/* ============================================================
   Gestion Cassini — Design tokens (SOURCE DE VÉRITÉ)
   Extraits de la maquette « Gestion Cassini - site.html »
   (source réelle : Refonte Gestion Cassini/Refonte Gestion Cassini.dc.html).
   Mêmes NOMS de variables que le thème immovendu (fork structurel
   drop-in) ; les rôles Cassini supplémentaires sont dans la
   section EXTENSIONS en bas de fichier.
   Ne jamais éditer assets/css/tokens.css à la main — copier depuis ici.
   ============================================================ */
:root {
  /* --- Couleurs (noms iso-IV, valeurs maquette Cassini) --- */
  --ink:          #15334E;   /* navy primaire : titres, boutons, bandes sombres */
  --accent:       #007A8C;   /* vert/teal officiel Gestion Cassini */
  --accent-soft:  #EAF1F5;   /* tint claire : chips, fonds d'accent doux */
  --cream:        #F5F7F9;   /* fond de section alterné (rôle « cream » IV) */
  --paper:        #FFFFFF;
  --gray:         #5D6B76;   /* texte secondaire */
  --gray-soft:    #7E8D98;   /* légendes, mentions, copyright */

  /* --- Typographies --- */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-accent:  "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  /* NB : chez IV --font-accent = script (Caveat). Cassini n'a pas de
     script : le rôle « accent » est tenu par la grotesque display
     Schibsted Grotesk (titres, chiffres, prix). */

  /* --- Échelle typo (desktop → mobile via clamp) --- */
  --h1:           clamp(40px, 5vw, 64px);      /* 700, ls -.025em (hero home) */
  --h1-lh:        1.02;
  --h2:           clamp(30px, 3.3vw, 42px);    /* 700, ls -.025em */
  --h2-lh:        1.08;
  --h3:           clamp(18px, 1.8vw, 23px);    /* 600, ls -.01em */
  --h3-lh:        1.2;
  --title-special: clamp(34px, 3.75vw, 48px); /* chiffres clés / stats, 700 */
  --special:      12.5px;                    /* eyebrow : uppercase, ls .16em, 600 */
  --body:         16px;                      /* Hanken Grotesk 400, lh 1.65 */
  --body-seo:     15.5px;                    /* paragraphes denses, FAQ, cartes */
  --quote:        15.5px;                    /* témoignages, lh 1.6 */
  --cta-size:     14.5px;                    /* boutons, 600, PAS d'uppercase */
  --nav-size:     14.5px;                    /* nav desktop, 500 */
  --nav-panel:    clamp(24px, 3vw, 32px);    /* liens panneau mobile, 700 */
  --breadcrumb:   12.5px;
  --footer-size:  14px;
  --article-size: 16px;                      /* corps d'article, lh 1.7 */

  /* --- Layout --- */
  --container:    1280px;                    /* maquette : max-width 1280 + padding 32 */
  --container-narrow: 920px;                 /* FAQ / colonnes de lecture */
  --gutter:       32px;
  --gap:          24px;                      /* grilles de cartes (24–26px) */
  --section-pad:  clamp(56px, 7vw, 88px);    /* maquette : 88px desktop */

  /* --- Espacements --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* --- Divers --- */
  --r-sm: 9px;                               /* boutons, inputs, selects, pagination */
  --r-md: 14px;                              /* cartes, encarts, médias */
  --r-pill: 100px;                           /* badges, chips, tabs pill */
  --shadow: 0 1px 3px rgba(13, 33, 53, 0.07);/* carte au repos */

  /* --- Système de boîtes cohérent, 2 niveaux (31/07) ---
     Niveau 1 « posé » : éléments répétés (cartes de grille, volets, tuiles) — discret.
     Niveau 2 « surélevé » : boîtes autonomes de mise en valeur — ressort.
     Radius + padding communs ; seul le fond change selon l'usage. */
  --box-radius: var(--r-md);
  --box-pad: 26px 28px;
  --box-elev-1: 0 1px 3px rgba(13, 33, 53, 0.06);          /* niveau 1 (avec filet) */
  --box-elev-2: 0 14px 34px -14px rgba(21, 51, 78, 0.16);  /* niveau 2 (sans filet) */
  --box-border: 1px solid var(--hairline);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.35s var(--ease);

  /* ============================================================
     EXTENSIONS CASSINI — rôles absents du tokens IV.
     (Le fork IV → GC les ignore sans casser ; documentés au README.)
     ============================================================ */

  /* Encres & textes */
  --ink-deep:      #0D2135;  /* navy profond : hero, footer, témoignages */
  --text:          #16242F;  /* texte courant (body) */
  --text-strong:   #2A3A45;  /* nav, specs, listes techniques */
  --text-soft:     #3A4A56;  /* paragraphes longs (fiche, agence) */

  /* Accent étendu */
  --accent-bright: #16C0AD;  /* fin de dégradé, hovers teal */
  --grad-accent:   linear-gradient(135deg, #007A8C 0%, #16C0AD 100%);
  --grad-brand:    linear-gradient(120deg, #15334E 0%, #007A8C 100%); /* texte dégradé stats */

  /* Palette « sur fond sombre » */
  --blue-soft:     #9DC0D6;  /* eyebrows et légendes sur navy */
  --on-dark:       #C7D3DD;  /* texte courant sur navy */
  --on-dark-soft:  #9DABB6;  /* liens footer */
  --on-dark-strong:#DBE4EA;  /* sous-titres hero */
  --on-dark-quote: #E8EEF3;  /* citations témoignages */

  /* Bordures & surfaces */
  --border:        #D6DDE2;  /* inputs, selects */
  --border-soft:   #CDD6DC;  /* boutons outline */
  --hairline:      #E9EDF0;  /* filets, header border */
  --hairline-soft: #EEF1F4;  /* séparateurs internes de carte */
  --placeholder:   #DFE6EB;  /* fond d'attente des images */
  --glass:         rgba(255, 255, 255, 0.82); /* header verre dépoli */
  --overlay-dark:  rgba(13, 33, 53, 0.55);    /* voile photo hero */

  /* Fonctionnels */
  --star:          #F0C14B;  /* étoiles avis */
  --danger:        #C0392B;  /* favoris (cœur), erreurs */
  --dpe-a: #2E8B3D; --dpe-b: #5BB04A; --dpe-c: #A7C520;
  --dpe-d: #F2CC14; --dpe-e: #F0A020; --dpe-f: #E8631C; --dpe-g: #D6322A;

  /* Ombres étendues */
  --shadow-hover:  0 22px 46px -22px rgba(13, 33, 53, 0.35); /* carte survolée */
  --shadow-accent: 0 10px 24px -10px rgba(13, 148, 136, 0.6);/* bouton teal */
  --shadow-float:  0 30px 70px -28px rgba(13, 33, 53, 0.55); /* carte recherche hero */
}
