/* ==========================================================================
   ISMOD · Tokens de marque
   Source unique des couleurs, typographies, espacements et mouvements.
   Propriétaire : direction artistique. Les équipes lisent, ne modifient pas.
   Toute proposition de changement passe par le rapport d'équipe.
   ========================================================================== */

/* ---------- Polices auto-hébergées (OFL) ---------- */
/* Zodiak (Indian Type Foundry, Fontshare, ITF Free Font License 2.0).
   Fichiers officiels non modifiés : ni sous-ensemble ni conversion (licence).
   À la mise en ligne, l'école télécharge sa propre copie sur fontshare.com. */
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak/Zodiak-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak/Zodiak-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Archivo (Omnibus-Type, OFL) : axe de chasse figé à 100 avec fontTools
   (seul l'axe de graisse reste variable), 90 Ko ramenés à 35 Ko. Le nom du
   fichier est conservé pour les préchargements existants. Original :
   _studio/archive/fonts-avant-passe3/. L'italique d'Archivo n'est plus
   déclaré : le site n'en utilise pas (italique réservé aux titres Zodiak). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Couleurs de marque ----------
     Le noir et le blanc du logo, des gris neutres, et un seul accent :
     l'indigo. Il vient de l'uniforme bleu des étudiantes de l'ISMOD et de la
     tradition de l'indigo en Afrique de l'Ouest. Rien n'est repris du flyer. */
  --noir: #0a0a0a;          /* noir du logo, fond des sections sombres */
  --anthracite: #1c1c1c;    /* surface sombre secondaire */
  --graphite: #2e2e2e;      /* filets et bordures sur fond sombre */
  --blanc: #ffffff;
  --craie: #f5f5f3;         /* gris très clair neutre (jamais crème) */
  --gris-100: #ececea;
  --gris-200: #d6d6d4;      /* filets sur fond clair */
  --gris-300: #b5b5b5;      /* texte secondaire sur fond sombre : 8,3:1 sur anthracite */
  --gris-500: #6e6e6e;      /* texte secondaire sur blanc : 5,1:1 */
  --gris-700: #3d3d3d;

  --indigo: #23307a;        /* accent : 11,8:1 sur blanc, 10,8:1 sur craie, blanc dessus 11,8:1 */
  --indigo-clair: #a3aeee;  /* accent sur fond sombre : 9,3:1 sur noir, 8:1 sur anthracite */
  --indigo-voile: #eef0f8;  /* surface claire teintée : indigo dessus 10,4:1, noir dessus 17,4:1 */
  --indigo-nuit: #141c4d;   /* aplat profond, sections sombres teintées : blanc dessus 16,1:1 */


  /* ---------- Rôles (thème clair par défaut) ---------- */
  --fond: var(--blanc);
  --fond-alt: var(--craie);
  --texte: var(--noir);
  --texte-doux: var(--gris-500);
  --filet: var(--gris-200);
  --accent: var(--indigo);        /* numéros, filets forts, liens actifs, icônes d'accent */
  --accent-plein: var(--indigo);  /* bouton principal */
  --sur-accent: var(--blanc);
  --focus: var(--noir);         /* anneau de 2 px décalé de 3 px : 19,8:1 sur blanc */

  /* ---------- Typographie ---------- */
  --police-titre: "Zodiak", "Times New Roman", serif;
  --police-texte: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Échelle fluide, 360 px → 1440 px. */
  --t-xs:   clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);  /* 12 → 13 : mentions */
  --t-sm:   clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); /* 14 → 15 : étiquettes, légendes */
  --t-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);      /* 16 → 18 : texte courant */
  --t-lg:   clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); /* 18 → 21 : chapeaux */
  --t-xl:   clamp(1.375rem, 1.23rem + 0.65vw, 1.75rem);   /* 22 → 28 */
  --t-2xl:  clamp(1.75rem, 1.47rem + 1.25vw, 2.5rem);     /* 28 → 40 : titres h3 */
  --t-3xl:  clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);      /* 36 → 60 : titres h2 */
  --t-4xl:  clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem);       /* 44 → 88 : titres h1 */
  --titre-page: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);    /* 40 → 88 : h1 des pages intérieures, graisse 400, une seule échelle */
  --t-5xl:  clamp(3.25rem, 1.6rem + 7.3vw, 8.25rem);      /* 52 → 132 : titres monumentaux */

  /* Graisses de Zodiak selon la taille rendue (mesurées sur la planche typographique). */
  --titre-graisse-monumental: 300; /* 88 px et plus */
  --titre-graisse: 400;            /* 40 à 88 px */
  --titre-graisse-petit: 500;      /* sous 40 px */

  --interligne-serre: 1.02;
  --interligne-titre: 1.1;
  --interligne-texte: 1.6;
  --approche-capitales: 0.06em; /* sigles et rares mentions en capitales, jamais de surtitre */
  --mesure: 66ch;               /* longueur de ligne maximale du texte courant */

  /* ---------- Espacements (base 4 px) ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;
  --section: clamp(4.5rem, 3rem + 7vw, 10rem); /* respiration verticale entre sections */

  /* ---------- Mise en page ---------- */
  --conteneur: 90rem;                        /* 1440 px */
  --conteneur-texte: 46rem;
  --marge: clamp(1rem, 0.4rem + 3vw, 3.5rem); /* gouttière latérale : 16 px mobile */
  --colonnes: 12;
  --gouttiere: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --hauteur-entete: 4.5rem;

  /* ---------- Signature : le décalage ----------
     Géométrie mesurée sur l'emblème (ismod-logo.ai, plan 3) :
     petit carré 162,5 ; bloc en L 284,4 × 331,4 ; jour entre les deux 13,4 (mesuré dans le vecteur).
     Rapport jour / carré = 0,082. Rapport bloc / carré = 1,75 × 2,04. */
  --sig-jour-ratio: 0.082;
  --sig-jour: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem); /* jour blanc entre deux aplats */
  --sig-decalage: clamp(1.5rem, 0.8rem + 3vw, 4rem);    /* décalage du carré d'appui */

  /* ---------- Formes ---------- */
  --rayon: 0;            /* tout est d'équerre, comme le logo */
  --filet-fin: 1px;
  --filet-fort: 2px;

  /* ---------- Tailles minimales du logo (écran) ---------- */
  --logo-min-complet: 300px;
  --logo-min-court: 120px;
  --logo-min-embleme: 32px;

  /* ---------- Mouvement ---------- */
  /* Peu de mouvement, et seulement d'équerre : un geste d'ouverture,
     des dépliages de photos, des changements d'état. Aucun fondu de texte. */
  --ease-couture: cubic-bezier(0.22, 0.61, 0.36, 1); /* entrée posée, sans emballement */
  --ease-etat: cubic-bezier(0.4, 0, 0.2, 1);         /* survols, focus, ouvertures */
  --ease-equerre: cubic-bezier(0.6, 0, 0.25, 1);     /* dépliage d'équerre des photos */
  --ease-sortie: cubic-bezier(0.4, 0, 1, 1);
  --duree-rapide: 160ms;
  --duree: 280ms;
  --duree-lente: 600ms;
  --duree-reveal: 700ms;

  /* ---------- Plans ---------- */
  --z-entete: 50;
  --z-menu: 60;
  --z-modale: 80;
}

/* Thème sombre local : à poser sur une section (class="theme-noir"). */
.theme-noir {
  --fond: var(--noir);
  --fond-alt: var(--anthracite);
  --texte: var(--blanc);
  --texte-doux: var(--gris-300);
  --filet: var(--graphite);
  --accent: var(--indigo-clair);
  --accent-plein: var(--blanc);
  --sur-accent: var(--noir);
  --focus: var(--blanc);
  background-color: var(--fond);
  color: var(--texte);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide: 0ms;
    --duree: 0ms;
    --duree-lente: 0ms;
    --duree-reveal: 0ms;
  }
}