/* == ADEXWEB - Les jetons. Seule source de la couleur, du corps, du rythme ==  D-800 */

/* == Polices auto-hebergees. Aucune requete tierce.
   Les fichiers sont REDUITS : axes figes, jeu de caracteres francais.
   `python refonte-adexweb/sous-ensemble.py` les refabrique.  D-801 == */

/* Titres seulement, de 24 a 60 px. wght borne a 380-560, opsz a 24-72. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 380 560;
  font-style: normal;
  font-display: swap;
}
/* L'italique n'emphase qu'un mot de titre : une seule graisse, grandes tailles. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-italique.woff2") format("woff2");
  font-weight: 380 560;
  font-style: italic;
  font-display: swap;
}
/* Corps, interface, boutons, champs. Axe de chasse fige a 100. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* == 1 · COULEUR ==
     Un seul theme. Le fond est blanc en majorite : c'est ce qui inspire
     confiance et empeche de se sentir perdu.  D-802 */

  --pearl: #FDFFFF;             /* fond principal */
  --silk: #EEE5D9;              /* sections secondaires, cartes */
  --marble: #E8E4E0;            /* bordures, fonds legers */

  /* Les ratios sont ceux que rend `node tools/palette-check.mjs`, pas des
     souvenirs : l'outil relit ce fichier et arrete si un chiffre ment. */
  --navy: #222D52;              /* 13,37:1 sur pearl */
  --navy-dark: #18213D;         /* 15,81:1 */
  --navy-light: #35446F;        /*  9,48:1 */

  --champagne: #D2B68A;         /* 1,94:1 — DECOR SEUL */
  --champagne-dark: #B99B6B;    /* 2,63:1 — DECOR SEUL, meme pour une icone */
  --champagne-light: #E7D7BC;

  --text: #161A24;              /* 17,33:1 sur pearl · 13,95 silk · 13,75 marble */
  --text-soft: #4F5261;         /*  7,72:1 sur pearl ·  6,21 silk ·  6,12 marble */
  --text-muted: #6E7180;        /*  4,82:1 sur pearl — 3,88 sur silk et 3,83 sur
                                   marble : INTERDIT sur ces deux fonds  D-803 */

  --line: #E1DCD6;              /* filet ordinaire */
  --line-strong: #C9C2BA;       /* filet appuye */
  --line-accent: var(--champagne);

  --danger: #A3341F;            /* 6,82:1 sur pearl · 6,08 sur son lavis */
  --danger-wash: #FBEFEC;
  --ok: #1F5D3C;                /* 7,78:1 sur pearl · 6,97 sur son lavis */
  --ok-wash: #ECF4EF;

  --scrim: rgb(24 33 61 / 0.58);

  /* == 2 · TYPOGRAPHIE ==
     Base 19 px, rapport 1,25 exact. Sept niveaux, aucune valeur inventee.
     15 x1,25=19 x1,25=24 x1,25=30 x1,25=38 x1,25=48 x1,25=60.
     Le corps ne retrecit JAMAIS sous 19 px, a aucune largeur.  D-804 */

  --font-titre: "Newsreader", Georgia, "Times New Roman", serif;
  --font-texte: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --t-00: 0.9375rem;   /* 15 px — mentions, dates, meta */
  --t-0:  1.1875rem;   /* 19 px — CORPS, le niveau par defaut */
  --t-1:  1.5rem;      /* 24 px — chapo, phrase de benefice */
  --t-2:  1.875rem;    /* 30 px — titre de service, question de FAQ */
  --t-3:  2.375rem;    /* 38 px — titre de section */
  --t-4:  3rem;        /* 48 px — h1 des pages interieures */
  --t-5:  3.75rem;     /* 60 px — h1 de l'accueil */

  --lh-00: 1.4667;   /* 22 px */
  --lh-0:  1.5789;   /* 30 px — plus aere que l'anglais : le francais fait
                        des lignes 15 a 20 % plus longues, et le lecteur a
                        45 a 60 ans. C'est ce qui l'empeche de sauter une
                        ligne en revenant a gauche. */
  --lh-1:  1.4167;   /* 34 px */
  --lh-2:  1.2667;   /* 38 px */
  --lh-3:  1.2105;   /* 46 px */
  --lh-4:  1.125;    /* 54 px */
  --lh-5:  1.0667;   /* 64 px */

  --ls-00:  0.02em;
  --ls-1:  -0.005em;
  --ls-2:  -0.01em;
  --ls-3:  -0.015em;
  --ls-4:  -0.018em;
  --ls-5:  -0.021em;
  --ls-etiquette: 0.14em;   /* les capitales espacees du logotype */

  /* == 3 · RYTHME. Unite de base 8 px, aucune valeur hors multiple.  D-805 == */

  --e-1: 0.5rem;     /*  8 */
  --e-2: 1rem;       /* 16 */
  --e-3: 1.5rem;     /* 24 */
  --e-4: 2rem;       /* 32 */
  --e-5: 2.5rem;     /* 40 */
  --e-6: 3rem;       /* 48 */
  --e-7: 4rem;       /* 64 */
  --e-8: 4.5rem;     /* 72 */
  --e-9: 6rem;       /* 96 */
  --e-10: 8rem;      /* 128 */
  --e-11: 12rem;     /* 192 */

  /* LE VIDE N'EST PAS DE LA RESPIRATION QUAND IL N'A RIEN A SEPARER.  D-886
     128 px de fond au-dessus PLUS 128 au-dessous font 256 px de blanc
     entre deux sections de meme fond : mesure a l'image sur l'accueil,
     c'etait le tiers de la page. Le client a lu ce blanc comme « le site
     est vide », et il avait raison — le remede est double, moins de vide
     ET plus de contenu. 88 px de chaque cote, 176 au total. */
  --bande: 3.5rem;         /* 56 — entre deux sections, petit ecran */
  --bande-large: 5.5rem;   /* 88 — entre deux sections */
  --bande-coupure: 7rem;   /* 112 — coupure majeure */

  /* == 4 · COMPOSITION == */

  --page-max: 1280px;
  --gouttiere: 1.5rem;      /* 24 sous 768 */
  --colonne-texte: 680px;   /* ~68 signes a 19 px */
  --nav-h: 3.5rem;          /* 56 — hauteur de la pilule sous 768 */
  --barre-marge: 0.75rem;   /* 12 — l'air autour de la pilule flottante */
  /* Ce que `main` doit se pousser pour ne pas commencer sous la barre :
     marge + pilule + marge, au pixel. Une valeur ecrite a la main ici
     devient une superposition le jour ou la hauteur de la barre change. */
  --barre-espace: calc(var(--nav-h) + var(--barre-marge) * 2);

  /* == 5 · FORME.
     Un seul rayon, faible, partout : il se lit comme une decision, pas
     comme un defaut, et il ne concurrence jamais le contenu. Ne JAMAIS
     melanger 4, 8, 16 et la pilule sur une meme page.  D-806 == */

  /* QUATRE RAYONS, ET CHACUN A SON ETAGE.  D-915
     La regle « un seul rayon » venait d'un site sans grande image et sans
     surface flottante : elle n'avait rien a arbitrer. Depuis que l'accueil
     porte un mur d'ecrans, un rail de cartes de 62 % de hauteur d'ecran et
     une barre qui flotte, 8 px sur une carte de 520 px de haut ne se
     lisent plus comme une decision — ils se lisent comme un accident de
     rendu. Le rayon suit la TAILLE de la surface, ce qui est une regle,
     pas une preference :
       champ, etiquette, petit bouton carre .... 4
       carte de contenu, vignette .............. 12
       grande carte media, panneau ............. 24
       bouton, pilule de navigation ............ plein
     Ce qui reste interdit : melanger deux rayons sur des surfaces de
     MEME taille. */
  --rayon: 4px;
  --rayon-large: 12px;      /* cartes et vignettes */
  --rayon-carte: 24px;      /* grandes cartes media, panneaux, barre */
  --rayon-pilule: 999px;    /* boutons et navigation flottante */
  --filet: 1px;
  --focus-w: 3px;
  --focus-offset: 2px;

  /* == 5.1 · LE VERRE ==  D-916
     Un verre ne se mesure pas sur ce qu'il laisse passer, il se mesure sur
     son PIRE fond. A 0,88 de blanc sur du noir pur, la composition rend
     #DEDEDE : le navy y tient 9,5:1, la meme barre au-dessus d'une photo
     sombre comme au-dessus du blanc. C'est le plancher d'alpha du site —
     sous 0,85, aucun texte ne se pose sur du verre.
     `node tools/verre-check.mjs` recalcule ces compositions et arrete. */
  --verre-clair: rgb(253 255 255 / 0.88);
  --verre-clair-appui: rgb(253 255 255 / 0.94);
  --verre-sombre: rgb(24 33 61 / 0.90);
  --verre-flou: saturate(1.6) blur(20px);
  --verre-filet: rgb(253 255 255 / 0.70);
  --verre-filet-sombre: rgb(253 255 255 / 0.16);
  --ombre-flottante: 0 4px 12px rgb(24 33 61 / 0.06), 0 20px 48px -16px rgb(24 33 61 / 0.22);

  --cible: 3.5rem;          /* 56 — hauteur d'un bouton de page */
  /* 48 — hauteur d'un champ, d'un choix et d'une case DANS un formulaire.
     Quatre pixels au-dessus du plancher WCAG, huit de moins que le bouton
     de page : c'est ce qui separe un formulaire d'une loupe.  D-985 */
  --cible-champ: 3rem;
  --cible-min: 2.75rem;     /* 44 — plancher WCAG 2.5.5 */

  /* Les ombres sont permises, et rares. Deux valeurs, pas trois. */
  --ombre-pose: 0 1px 2px rgb(24 33 61 / 0.05), 0 2px 8px rgb(24 33 61 / 0.04);
  --ombre-levee: 0 2px 4px rgb(24 33 61 / 0.06), 0 8px 24px rgb(24 33 61 / 0.08);

  /* == 6 · MOUVEMENT. Un seul geste d'entree dans tout le site.  D-807 == */

  /* 24 et non 16 : mesure du 2026-08-08 sur cinq sites d'agence primes,
     aucun ne descend sous 24 px, et 16 ne se voyait pas — « une animation
     qu'on ne remarque pas n'existe pas ». Les IMAGES montent de 32.  D-905 */
  --m-distance: 24px;
  --m-distance-media: 32px;
  --m-duree: 500ms;
  --m-decalage: 60ms;                          /* par BLOC, jamais par mot */
  --m-courbe: cubic-bezier(0.16, 1, 0.3, 1);

  --t-vif: 160ms;      /* retour tactile */
  --t-etat: 220ms;     /* survol, etat */
  --t-panneau: 320ms;  /* modale, tiroir */
  --e-sortie: cubic-bezier(0.33, 1, 0.68, 1);

  /* LE GESTE LONG — celui qui se REMARQUE.  D-917
     La montee de 24 px en 500 ms est un geste d'arrivee : il dit « ceci
     vient de paraitre ». Il ne dit rien d'une grande image ni d'un titre
     de 60 px, ou 24 px sur 900 de haut est un frisson. Trois gestes de
     plus, et trois seulement :
       --m-lever    un titre qui se leve de derriere sa ligne de base
       --m-echelle  une image qui se pose en se rapprochant
       --m-rail     le pas du rail horizontal des services
     Chacun se resout a la MEME image finale que le mouvement reduit :
     `tools/reduit-check.mjs` compare les deux etats et arrete sur un
     ecart d'un seul pixel. */
  --m-lever: 700ms;
  --m-lever-pas: 90ms;      /* d'une ligne de titre a la suivante */
  --m-echelle: 900ms;
  /* L'image part de PLUS PETIT et se pose a 1. Elle partait de 1,08 et
     debordait de sa colonne : rien ne la rognait, et le document gagnait
     2 px de large a 700 px sur trois pages.  D-981 */
  --m-echelle-vers: 0.94;
  --m-rail: cubic-bezier(0.22, 1, 0.36, 1);

  /* == 7 · COUCHES == */

  --z-nav: 60;
  --z-menu: 70;
  --z-modal: 80;
  --z-skip: 100;
}

@media (min-width: 48em) {   /* 768 */
  :root {
    --gouttiere: 3rem;       /* 48 */
    --nav-h: 4rem;           /* 64 */
    --barre-marge: 1rem;     /* 16 */
    --bande: var(--bande-large);
  }
}

@media (min-width: 64em) {   /* 1024 */
  :root { --gouttiere: 5rem; }   /* 80 — colonne utile 1120 */
}

/* SUR UN ECRAN DE 1920, ON PEIGNAIT 1 120 PX DE CONTENU AU MILIEU ET ON
   LAISSAIT 400 PX DE BLANC DE CHAQUE COTE.  D-893
   C'est une des trois causes mesurees du « le site est vide » : la page
   n'occupait pas l'ecran. 1 408 au-dela de 1 440 rend 1 248 px utiles —
   assez pour six portes de front, pour une mosaique de cinq captures, et
   pour que la barre porte enfin un SECOND bouton (elle pese 1 234).
   La prose ne s'allonge pas : `.mesure` la tient a 680 px, et `.chapo` a
   46 signes. Ce qui s'elargit, ce sont les grilles et les images — ce
   qu'on veut voir plus grand. */
@media (min-width: 90em) {   /* 1440 */
  :root { --page-max: 1408px; }
}

/* Sous 768 les titres descendent d'un cran et demi. Le CORPS ne bouge pas :
   c'est la seule regle qui protege un lecteur de 55 ans.  D-808 */
@media (max-width: 47.99em) {
  :root {
    --t-5: 2.375rem;   /* 38 */
    --t-4: 2rem;       /* 32 */
    --t-3: 1.6875rem;  /* 27 */
    --t-2: 1.5rem;     /* 24 */
    --t-1: 1.3125rem;  /* 21 */
    --lh-5: 1.1579;
    --lh-4: 1.1875;
    --lh-3: 1.2593;
  }
}