/* ==========================================================================
   IIN Design System — Design tokens
   Aspiré depuis le projet Claude Design « IIN Website.dc.html ».
   Source de vérité : chaque valeur ci-dessous est extraite du fichier
   design-system/reference/IIN-Website.source.dc.html (styles inline).
   ========================================================================== */

:root {

  /* --- Couleur : navy (couleur institutionnelle primaire) ---------------- */
  --iin-navy-900: #0C1526;  /* fond le plus sombre, filtres actifs */
  --iin-navy-880: #0E1830;  /* champ de saisie sur fond sombre */
  --iin-navy-850: #101A2E;  /* bandeau de page sombre (About, Membership) */
  --iin-navy-800: #131E33;  /* pied de page */
  --iin-navy-750: #15233C;  /* texte posé sur un aplat or */
  --iin-navy-700: #16233D;  /* fond des emplacements image */
  --iin-navy-600: #1B2A4A;  /* PRIMAIRE : texte, boutons, bordures fortes */
  --iin-navy-500: #243352;
  --iin-navy-450: #25324C;  /* filet du bandeau bas de pied de page */
  --iin-navy-400: #2C3C5C;  /* bordure inactive sur fond sombre */
  --iin-navy-350: #2E3C57;  /* bordure du champ newsletter */
  --iin-navy-300: #33456A;  /* fin du dégradé d'avatar */
  --iin-navy-200: #4A5A78;  /* soulignement de lien sur fond sombre */

  /* --- Couleur : or (accent unique) ------------------------------------- */
  --iin-gold-700: #9C7A23;  /* or sombre, aussi accent catégoriel */
  --iin-gold-600: #B8923F;  /* surtitres et labels sur fond clair */
  --iin-gold-500: #C9A24B;  /* ACCENT PRIMAIRE : filets, CTA sur fond sombre */

  /* --- Couleur : papier et surfaces -------------------------------------- */
  --iin-paper:         #F8F6F1;  /* fond de page */
  --iin-paper-raised:  #FCFBF8;  /* panneaux en léger relief */
  --iin-paper-field:   #FBFAF6;  /* fond des champs de formulaire */
  --iin-surface:       #FFFFFF;  /* cartes, bandes de contenu */

  /* --- Couleur : filets --------------------------------------------------- */
  --iin-rule:        #E6E2D8;  /* filet 1px par défaut, partout */
  --iin-rule-soft:   #ECE8DE;  /* séparateur interne de grille */
  --iin-rule-softer: #F1EEE6;  /* séparateur de ligne dans une carte tarif */
  --iin-rule-strong: #D8D3C6;  /* bordure de champ de formulaire */

  /* --- Couleur : texte sur fond clair ------------------------------------ */
  --iin-ink:        #1B2A4A;  /* titres, texte fort */
  --iin-ink-2:      #3A4255;  /* lignes de tableau, onglets inactifs */
  --iin-ink-3:      #4A5263;  /* chapô, paragraphes d'introduction */
  --iin-body:       #5A6273;  /* corps de texte courant */
  --iin-grey:       #6B7280;  /* légende dense */
  --iin-muted:      #8A909C;  /* méta, notes de bas de section */
  --iin-muted-2:    #9AA0AC;  /* label de champ secondaire */

  /* --- Couleur : texte sur fond sombre ----------------------------------- */
  --iin-on-dark:        #FFFFFF;
  --iin-on-dark-body:   #C3CFE3;
  --iin-on-dark-muted:  #9FB0CC;
  --iin-on-dark-dim:    #8497B5;
  --iin-on-dark-faint:  #5E6E8C;

  /* --- Couleur : accents catégoriels ------------------------------------- */
  /* Un accent par pays / par palier d'adhésion. Jamais décoratif :
     il identifie une catégorie et reste stable d'une page à l'autre. */
  --iin-cat-green:  #2E6E4E;
  --iin-cat-orange: #B5621F;
  --iin-cat-maroon: #7A2E3A;
  --iin-cat-blue:   #1B4D7A;
  --iin-cat-gold:   #9C7A23;

  /* --- Voiles et ombres --------------------------------------------------- */
  --iin-scrim-hero:  linear-gradient(to top, rgba(15,23,40,0.82) 0%, rgba(15,23,40,0.15) 46%, rgba(15,23,40,0) 72%);
  --iin-scrim-card:  linear-gradient(to top, rgba(15,23,40,0.7), rgba(15,23,40,0.05));
  --iin-scrim-bleed: linear-gradient(120deg, rgba(13,20,36,0.94) 0%, rgba(13,20,36,0.72) 48%, rgba(13,20,36,0.42) 100%);
  --iin-header-bg:   rgba(248,246,241,0.93);
  --iin-shadow-float: 0 8px 28px rgba(20,28,48,0.22);

  /* --- Typographie : familles -------------------------------------------- */
  --iin-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --iin-font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Typographie : échelle --------------------------------------------- */
  --iin-text-3xs:  10px;   /* label du sélecteur flottant */
  --iin-text-2xs:  11px;   /* surtitre, label de champ, tag */
  --iin-text-xs:   11.5px; /* bouton compact */
  --iin-text-sm:   12px;   /* surtitre de section, méta */
  --iin-text-sm2:  12.5px; /* légende dense */
  --iin-text-base: 13px;   /* corps courant, navigation, bouton */
  --iin-text-md:   14px;
  --iin-text-md2:  14.5px; /* titre de carte compacte */
  --iin-text-lg:   15px;
  --iin-text-lg2:  16.5px; /* chapô de section */
  --iin-text-xl:   17px;   /* chapô de page */
  --iin-text-2xl:  19px;   /* titre de carte délégation */
  --iin-text-3xl:  22px;   /* numéro serif, citation de mission */
  --iin-text-4xl:  26px;   /* titre de section secondaire */
  --iin-text-5xl:  28px;
  --iin-text-6xl:  30px;   /* prix, chiffre d'impact */
  --iin-text-7xl:  32px;   /* titre de section principale */
  --iin-text-8xl:  48px;   /* numéro de programme */
  --iin-text-9xl:  52px;   /* compteur de statistique */

  /* Titres fluides : la borne basse tient sur mobile sans media query. */
  --iin-display-hero:    clamp(40px, 5vw,   64px);  /* H1 accueil, variante A */
  --iin-display-bleed:   clamp(42px, 5.4vw, 70px);  /* H1 accueil, variante B */
  --iin-display-page:    clamp(36px, 4.6vw, 56px);  /* H1 de page intérieure */
  --iin-display-page-sm: clamp(34px, 4.4vw, 52px);  /* H1 de page dense */

  /* --- Typographie : graisses et interlignes ------------------------------ */
  --iin-weight-regular: 400;
  --iin-weight-display: 500;  /* Newsreader ne monte jamais plus haut */
  --iin-weight-medium:  600;
  --iin-weight-bold:    700;

  --iin-leading-display: 1.03;
  --iin-leading-title:   1.2;
  --iin-leading-snug:    1.45;
  --iin-leading-body:    1.6;
  --iin-leading-loose:   1.7;

  /* --- Typographie : approche -------------------------------------------- */
  --iin-tracking-display: -0.012em; /* resserré : titres serif */
  --iin-tracking-nav:      0.01em;
  --iin-tracking-tag:      0.04em;
  --iin-tracking-link:     0.05em;
  --iin-tracking-button:   0.06em;
  --iin-tracking-meta:     0.08em;
  --iin-tracking-label:    0.10em;
  --iin-tracking-filter:   0.12em;
  --iin-tracking-footer:   0.14em;
  --iin-tracking-country:  0.16em;
  --iin-tracking-office:   0.18em;
  --iin-tracking-eyebrow:  0.22em; /* surtitre : la valeur signature */

  /* --- Mise en page ------------------------------------------------------- */
  --iin-container: 1200px;
  --iin-gutter: 32px;
  --iin-section-y: 64px;      /* rythme vertical par défaut */
  --iin-section-y-lg: 72px;   /* ouverture de page */
  --iin-column-gap: 56px;     /* deux colonnes éditoriales */
  --iin-grid-gap: 24px;       /* grille de cartes */

  /* --- Géométrie ---------------------------------------------------------- */
  /* Zéro arrondi : c'est le parti pris du système. Le seul rayon autorisé
     est le cercle des pastilles d'initiales. */
  --iin-radius: 0;
  --iin-radius-avatar: 50%;
  --iin-hairline: 1px;
  --iin-accent-bar-w: 32px;   /* filet or sous un chiffre */
  --iin-accent-bar-h: 3px;
  --iin-accent-underline: 2px; /* soulignement or des liens d'action */
  --iin-tier-top: 4px;         /* liseré catégoriel en haut de carte */
}