/* ============================================================
   CERVIS — Jetons de design
   Source : charte officielle « Logo Cervis.pdf », pages 4 et 5.
   Bleu #1e3a8a · Rouge #ed1b24 · Blanc #ffffff
   Titres Gefika · Corps Poppins
   ============================================================ */

/* --- Gefika : police de titre de la charte, sous licence commerciale.
   Aucune webfont libre n'existe. Déposer les fichiers dans assets/fonts/
   et cette règle prend le relais automatiquement ; sinon Poppins 700
   assure la substitution, elle aussi géométrique.
@font-face {
  font-family: 'Gefika';
  src: url('../fonts/gefika.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
--- */

:root {
  /* ---------- Couleurs de marque (valeurs exactes de la charte) ---------- */
  --bleu:            #1e3a8a;
  --rouge:           #ed1b24;
  --blanc:           #ffffff;

  /* Déclinaisons dérivées, toutes construites sur la teinte de marque.
     Aucun neutre chaud : la marque est froide, minérale, technique. */
  --bleu-encre:      #0b1b3f;   /* grandes surfaces sombres, pied de page */
  --bleu-nuit:       #142a63;   /* survol des aplats bleus */
  --bleu-clair:      #3253b5;   /* liens sur fond sombre, focus */
  --bleu-voile:      #e8ecf7;   /* aplat très léger, encadrés */

  /* Rouge accessible : #ed1b24 ne donne que 4,39:1 avec du blanc, donc
     insuffisant pour du petit texte. Cette version assombrie monte à 5,5:1
     et sert dès qu'un fond rouge doit porter un libellé. */
  --rouge-fonce:     #d1121a;
  --rouge-voile:     #fdeaeb;
  /* Sur le bleu encre, #ed1b24 ne donne que 3,85:1. Cette version
     éclaircie monte à 7,1:1 et sert à tout petit texte rouge posé
     sur un fond sombre. */
  --rouge-clair:     #ff6b70;

  /* ---------- Neutres, légèrement tirés vers le bleu de marque ---------- */
  --n-000: #ffffff;
  --n-025: #f7f8fc;
  --n-050: #f1f4fa;
  --n-100: #e4e9f2;
  --n-200: #d2d9e7;
  --n-300: #b3bed2;
  --n-400: #8794ae;
  --n-500: #5d6c8a;
  --n-600: #3d4a63;   /* texte courant : 8,3:1 sur blanc */
  --n-700: #2a3550;
  --n-800: #18213a;
  --n-900: #0b1226;

  /* ---------- Rôles ---------- */
  --fond:            var(--n-000);
  --fond-alt:        var(--n-050);
  --fond-sombre:     var(--bleu-encre);
  --surface:         var(--n-000);
  --encre:           var(--n-900);
  --encre-titre:     var(--bleu);
  --texte:           var(--n-600);
  --texte-doux:      var(--n-500);
  --filet:           var(--n-100);
  /* --n-200 ne donne que 1,42:1 sur blanc : invisible en plein jour sur un
     téléphone, alors que c'est la SEULE délimitation des champs de saisie.
     WCAG 1.4.11 exige 3:1 pour un composant d'interface. */
  --filet-fort:      #9aa6bd;   /* 3,05:1 : bordures d'interface */
  --filet-deco:      var(--n-200);  /* filets purement décoratifs */
  --filet-sombre:    rgba(255 255 255 / .16);
  --texte-sombre:    rgba(255 255 255 / .78);

  /* ---------- Typographie ---------- */
  --f-titre: 'Gefika', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-corps: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Échelle fluide, ratio ~1,28. Plafond du display à 88px :
     au-delà, la page crie au lieu de composer. */
  --t-xs:      0.75rem;                                  /* 12 */
  --t-sm:      0.8125rem;                                /* 13 */
  --t-base:    1.0625rem;                                /* 17 */
  --t-lead:    clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem);
  --t-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h3:      clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --t-h2:      clamp(1.75rem, 1.4rem + 1.55vw, 2.875rem);
  --t-h1:      clamp(2.25rem, 1.55rem + 3.1vw, 4.25rem);
  --t-display: clamp(2.625rem, 1.6rem + 4.4vw, 5.5rem);
  --t-chiffre: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  --lh-serre:  1.06;
  --lh-titre:  1.14;
  --lh-corps:  1.68;
  --ls-titre:  -0.022em;
  --ls-label:  0.14em;   /* pour les rares libellés en capitales */
  --mesure:    66ch;

  /* ---------- Rythme ---------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 2.5rem;   --e-8: 3rem;
  --e-9: 4rem;     --e-10: 5rem;    --e-11: 6.5rem;  --e-12: 8rem;

  /* Respiration verticale des sections, variable selon le viewport */
  --section-y:     clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-max: clamp(4.5rem, 2.5rem + 8vw, 10rem);

  --largeur:       1280px;
  --largeur-etroit: 880px;
  --gouttiere:     clamp(1.25rem, 0.7rem + 2.4vw, 3rem);

  /* ---------- Formes ----------
     L'échelle d'origine était très serrée (2 à 8 px), au nom du trait
     d'équerre. Elle rendait les surfaces sèches : à la demande du client,
     elle s'ouvre. Quatre crans seulement, employés selon la taille de la
     surface : plus la surface est grande, plus le rayon l'est.
       --r-1  filets, étiquettes, petits repères
       --r-2  boutons, champs de saisie, pastilles
       --r-3  fiches, encarts, images
       --r-4  grands panneaux, médias pleine largeur */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 24px;
  --r-plein: 999px;

  /* ---------- Ombres : portées, sèches, jamais diffuses ---------- */
  --ombre-1: 0 1px 2px rgb(11 27 63 / .06);
  --ombre-2: 0 2px 4px rgb(11 27 63 / .06), 0 8px 20px -8px rgb(11 27 63 / .10);
  --ombre-3: 0 4px 8px rgb(11 27 63 / .07), 0 24px 48px -20px rgb(11 27 63 / .18);
  /* 0,28 d'opacité donnait un anneau à 1,67:1, sous le seuil de 3:1.
     Un anneau de focus qu'on ne voit pas ne sert à rien. */
  --ombre-focus: 0 0 0 3px rgb(30 58 138 / .9);

  /* ---------- Mouvement ---------- */
  --d-court:  .18s;
  --d-moyen:  .34s;
  --d-long:   .62s;
  /* Sorties exponentielles : la vitesse tombe vite puis s'éteint.
     Aucun rebond, aucun élastique : ce n'est pas un jouet. */
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --ease-doux:   cubic-bezier(.22, .61, .36, 1);
  --ease-entree: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Empilement, nommé et non numéroté au hasard ---------- */
  --z-fond: 0;
  --z-contenu: 1;
  --z-flottant: 10;
  --z-entete: 100;
  --z-voile: 200;
  --z-panneau: 210;
  --z-message: 300;
}

/* Le site est conçu en clair. On le déclare pour que les contrôles natifs
   (champs, barres de défilement) suivent, y compris chez un visiteur en
   thème sombre système. */
:root { color-scheme: light; }