/* ==========================================================================
   Oui Oui Car's — jetons de design v5 « nuit seule » (lot SOCLE, 4 octobre 2026)
   Sources : docs/BRIEF-V4-PRO.md §3 (direction artistique) et docs/SPEC-V5-PANNEAU-LOGO.md §1 et §1 bis
   (logo B « le rond-point », site uniquement en mode nuit). Toute couleur du site vient d'ici.
   Les NOMS historiques (--asphalte, --creme, --vert-oui, --zm-*, --gris-fonce…) sont conservés : les anciens
   jetons « clairs » sont devenus des alias de nuit. Guide des surfaces : docs/GABARIT.html.
   Aucun rouge : les erreurs restent orange (avec texte et symbole).
   ========================================================================== */

/* --- Polices variables auto-hébergées (sous-ensemble latin) --- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Chiffres du texte courant : Archivo (zéro sans barre) à la place des chiffres d'Atkinson Hyperlegible Next,
   dont le sous-ensemble livré n'a pas d'alternative au zéro barré (ni « zero », ni ssXX : vérifié avec fontTools).
   Limité aux chiffres 0-9 ; size-adjust aligne la hauteur des chiffres (Archivo 686 / Atkinson 668 unités).
   Sans U+0020, cette police n'est jamais la « première police disponible » : l'interlignage reste celui d'Atkinson. --- */
@font-face {
  font-family: "Chiffres";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  size-adjust: 97.4%;
  unicode-range: U+0030-0039;
}

/* --- Replis calibrés (CLS visé : 0). Archivo : asc 878 / desc 210 ; titres en largeur 88 %, graisse 650,
   chasse mesurée dans Chrome : 0,94 × Arial gras (même largeur de ligne à 2 % près). Atkinson Next : asc 984 / desc 316, chasse 0,434 em. --- */
@font-face {
  font-family: "Archivo repli";
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 94%;
  ascent-override: 93.4%;
  descent-override: 22.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson repli";
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 99.6%;
  ascent-override: 98.8%;
  descent-override: 31.7%;
  line-gap-override: 0%;
}

/* --- Palette de NUIT, unique thème du site (SPEC-V5 §1 bis, décision de Ken du 4 octobre 2026) ---
   Plus de thème clair, plus de bouton « Mode nuit », plus de html[data-phares] : :root porte directement la nuit.
   Hiérarchie : fond quasi-noir, puis surfaces étagées de plus en plus claires (sections alternées, cartes,
   champs, survols), séparées par des filets fins crème. Seule exception : l'impression (bas de ce fichier). --- */
:root {
  color-scheme: dark;

  /* Fondamentaux */
  --noir: #0E1013;              /* fond de page (crème 17,2:1) */
  --nuit: #0B0D10;              /* le plus profond : pied de page, bandeaux, cadres de médias */
  --noir-2: #171A1F;            /* surfaces sur sombre (cartes, menu, en-tête opaque) */
  --noir-3: #22262D;            /* traits appuyés, états désactivés */
  --blanc-chaud: #F5F3EE;       /* TEXTE principal (crème) ; jamais un fond de section */
  --blanc: #FFFFFF;             /* texte sur les aplats vert profond et bleu ; jamais un fond de section */
  --gris: #8A8F98;              /* texte discret sur --noir et --surface-1 (5,6:1 au moins) */
  --gris-texte: #9CA1AA;        /* texte secondaire de zone : 5,5:1 au moins sur toutes les surfaces, --surface-4 comprise */
  --vert-profond: #0F6B3E;      /* marque : aplats des boutons primaires (blanc 6,6:1) ; jamais du texte sur sombre */
  --vert-profond-2: #0B5A33;    /* appui du vert profond */
  --vert-profond-survol: #13804A; /* survol des boutons primaires sur sombre (blanc 5,0:1) */
  --vert-signal: #2BD67B;       /* accent : liens, état actif, focus, anneau du logo (10:1 sur --noir) */
  --bleu-sortie: #1F4FBF;       /* EXCLUSIF : aplats et contours des liens d'assurance partenaires (blanc 7,2:1) */
  --bleu-sortie-2: #183E98;     /* survol du bleu partenaires */
  --bleu-sortie-texte: #8EADFF; /* bleu partenaires en TEXTE sur sombre (8,7:1 sur --noir, 7,2:1 sur --surface-3) */
  --orange-alerte: #F28C28;     /* erreurs et alertes (7,8:1 sur --noir), jamais de rouge */

  /* Surfaces étagées (du plus bas au plus haut) */
  --surface-0: var(--noir);     /* fond de page */
  --surface-1: #13161A;         /* section alternée (remplace l'ancien fond crème des .zone-marquage) */
  --surface-2: #181B20;         /* carte, encart, panneau */
  --surface-3: #1F2329;         /* carte surélevée, champ de formulaire, menu déroulant */
  --surface-4: #272B32;         /* survol, contrôle actif */
  /* Lueur de marque (fond des en-têtes de page sans photo) : vert signal à 6 %, jamais derrière du texte courant ;
     --lueur-verte-mi = palier à mi-course, pour une décroissance douce. */
  --lueur-verte: rgba(43,214,123,.06);
  --lueur-verte-mi: rgba(43,214,123,.03);
  /* Filets fins (séparations, contours de carte) */
  --filet: rgba(245,243,238,.09);
  --filet-2: rgba(245,243,238,.14);
  --filet-fort: rgba(245,243,238,.24);

  /* Noms historiques (conservés pour les autres lots) */
  --vert-oui: var(--vert-signal);
  --vert-oui-ombre: #1FAE62;
  --asphalte: var(--noir);
  --bitume: var(--noir-2);
  --creme: var(--blanc-chaud);
  --gris-glissiere: var(--gris);
  --orange-clignotant: var(--orange-alerte);
  --brun-parking: #3B3F46;      /* graphite sobre (signalétique véhicules et concessions, blanc 10,6:1) */
  --lampe-eteinte: #2A2E35;
  --vitre: #22324A;
  --ciel-aube: #E9DCC8; --ciel-jour: #DCE6EC; --ciel-couchant: #E8C9B0;   /* héritage v3 (scène) */
  /* Anciens jetons « clairs » : ALIAS de nuit, pour ne rien casser (ne plus les employer) */
  --gris-fonce: var(--gris-texte);  /* était le texte secondaire sur clair */
  --gris-clair: var(--surface-3);   /* était les traits et fonds discrets sur clair */

  /* Zones sémantiques. Une seule teinte de texte : crème. .zone-bitume = fond de page ;
     .zone-marquage (ex-zone claire) = section alternée, une marche plus haut. */
  --zb-fond: var(--noir);       --zb-surface: var(--surface-2); --zb-texte: var(--blanc-chaud); --zb-texte-2: var(--gris-texte); --zb-lien: var(--vert-signal);
  --zm-fond: var(--surface-1);  --zm-surface: var(--surface-2); --zm-texte: var(--blanc-chaud); --zm-texte-2: var(--gris-texte); --zm-lien: var(--vert-signal);

  /* Logo B « le rond-point » (SPEC-V5 §1) — valeurs LITTÉRALES : deux versions, jamais d'autre couleur.
     Nuit (version principale) : anneau vert signal, pointillés et contour de la voiture quasi-noir, voiture et nom
     crème, signature vert signal. Claire (impression seulement) : anneau vert profond, pointillés et contour blancs,
     voiture vert signal, nom quasi-noir. <ooc-logo> lit --logo-marque, --logo-fond, --logo-voiture, --logo-nom. */
  --logo-marque-sombre: #2BD67B;  --logo-fond-sombre: #0E1013;  --logo-voiture-sombre: #F5F3EE;  --logo-nom-sombre: #F5F3EE;
  --logo-marque-clair: #0F6B3E;   --logo-fond-clair: #FFFFFF;   --logo-voiture-clair: #2BD67B;   --logo-nom-clair: #0E1013;
  --logo-marque: var(--logo-marque-sombre);
  --logo-fond: var(--logo-fond-sombre);
  --logo-voiture: var(--logo-voiture-sombre);
  --logo-nom: var(--logo-nom-sombre);
  --zb-logo: var(--logo-marque-sombre);   /* héritage v4 */
  --zm-logo: var(--logo-marque-sombre);   /* héritage v4 */
  /* Taille UNIQUE du logo d'en-tête (site, menu, espace élève, poste de l'agence) : hauteur de capitale du nom.
     <ooc-logo> : font-size: var(--logo-entete) (boîte 9,40 × 1,04 em). Fichier officiel en <img>
     (logo-sombre.svg, marge de 6 unités autour du dessin) : height: var(--logo-entete-img), largeur auto.
     14 px sous 400 px (132 px de large), 15 px jusqu'à 900 px, 18 px au-delà (169 px). Valeurs plus bas. */
  --logo-entete: 14px;
  --logo-entete-img: calc(var(--logo-entete) * 1.12);

  /* Papier (impression seulement) : valeurs fixes, jamais inversées */
  --papier: #FFFFFF;
  --encre: #0E1013;
  --encre-2: #555B65;
  --trait-papier: rgba(14,16,19,.16);
}

/* --- Rayons, ombres, espacements, durées, courbes, plans --- */
:root {
  --r-petit: 4px; --r-panneau: 4px; --r-bouton: 6px; --r-carte: 12px; --r-feuille: 16px 16px 0 0; --r-capsule: 999px;
  --ombre-sombre: 0 0 0 1px rgba(245,243,238,.06), 0 18px 40px -24px rgba(0,0,0,.7);
  --ombre-haute: 0 0 0 1px rgba(245,243,238,.08), 0 30px 60px -30px rgba(0,0,0,.85);   /* dialogue, document */
  --ombre-fine: 0 0 0 1px rgba(245,243,238,.07);                    /* nuit : un filet plutôt qu'une ombre */
  --ombre-clair: var(--ombre-sombre);                               /* ancien nom « clair » : alias de nuit */
  --ombre-panneau: 0 1px 2px rgba(0,0,0,.4);
  --halo-vert: 0 0 0 3px rgba(43,214,123,.22);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  /* Mouvement : lent, précis, sans rebond (brief §3) */
  --e-cinema: cubic-bezier(.2,.7,.1,1);
  --e-sortie: var(--e-cinema);
  --e-ressort: var(--e-cinema);    /* v4 : plus de dépassement */
  --e-hoche: cubic-bezier(.45,0,.55,1);
  --e-douce: cubic-bezier(.4,0,.2,1);
  --d-micro: 120ms; --d-court: 200ms; --d-moyen: 320ms; --d-revele: 700ms; --d-long: 600ms; --d-lent: 900ms;
  --z-canvas: 0; --z-faisceau: 1; --z-contenu: 2; --z-entete: 50; --z-toast: 80; --z-dialog: 90; --z-flash: 100;
}

/* --- Polices et échelle typographique --- */
:root {
  --police-affichage: "Archivo", "Archivo repli", "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Chiffres", "Atkinson Hyperlegible Next", "Atkinson repli", system-ui, sans-serif;
  --largeur-titre: 88%;            /* semi-condensé (axe wdth d'Archivo) */
  --largeur-logo: 112%;
  --graisse-titre: 650;

  --fs-mention: 13px;
  --fs-s: 14px;
  --fs-base: 16px;                 /* 17 px au-dessus de 900 px */
  --fs-l: 19px;
  --fs-h3: clamp(21px, 1.2rem + .6vw, 28px);
  --fs-h2: clamp(30px, 1.2rem + 3.2vw, 60px);
  --fs-h1: clamp(38px, 1.4rem + 4.6vw, 84px);
  --fs-affiche: clamp(44px, 1rem + 7.2vw, 128px);
  --fs-oui: var(--fs-affiche);

  --lh-affiche: .96;
  --lh-h1: 1;
  --lh-h2: 1.04;
  --ls-h2: -.018em;
  --lh-h3: 1.18;
  --lh-texte: 1.6;
  --mesure: 68ch;
}
@media (min-width: 900px) {
  :root { --fs-base: 17px; --fs-l: 20px; }
}

/* ==========================================================================
   Dérivés — mêmes teintes que la palette, pour ne jamais écrire une couleur
   en dur ailleurs.
   ========================================================================== */
:root {
  /* Transparences (noms historiques conservés) */
  --creme-a06: rgba(245,243,238,.06);
  --creme-a12: rgba(245,243,238,.12);
  --creme-a20: rgba(245,243,238,.2);
  --creme-a40: rgba(245,243,238,.4);
  --creme-a70: rgba(245,243,238,.72);
  --asphalte-a06: rgba(14,16,19,.06);
  --asphalte-a12: rgba(14,16,19,.12);
  --asphalte-a45: rgba(14,16,19,.45);
  --asphalte-a70: rgba(14,16,19,.7);
  --asphalte-a85: rgba(14,16,19,.86);
  --noir-a0: rgba(14,16,19,0);     /* fin de dégradé vers la nuit (jamais « transparent » noir pur : pas de gris) */
  --noir-a20: rgba(14,16,19,.2);
  --noir-a30: rgba(14,16,19,.3);
  --noir-a35: rgba(14,16,19,.35);
  --noir-a40: rgba(14,16,19,.4);
  --noir-a50: rgba(14,16,19,.5);
  --noir-a55: rgba(14,16,19,.55);
  --noir-a60: rgba(14,16,19,.6);
  --noir-a72: rgba(14,16,19,.72);
  --noir-a78: rgba(14,16,19,.78);
  --noir-a80: rgba(14,16,19,.8);
  --noir-a86: rgba(14,16,19,.86);
  --noir-a90: rgba(14,16,19,.9);
  --noir-a92: rgba(14,16,19,.92);
  --ombre-portee: rgba(0,0,0,.8); /* ombre portée des panneaux flottants (menu, popover) */
  --nuit-a80: rgba(11,13,16,.8);
  --vert-oui-a15: rgba(43,214,123,.15);
  --vert-oui-a25: rgba(43,214,123,.25);
  --vert-oui-a35: rgba(43,214,123,.35);
  --vert-oui-a55: rgba(43,214,123,.55);
  --vert-profond-a10: rgba(43,214,123,.08);   /* nuit : teinte verte lisible sur sombre (ancien nom conservé) */
  --vert-profond-a20: rgba(43,214,123,.18);
  --vert-signal-a08: rgba(43,214,123,.08);
  --orange-a15: rgba(242,140,40,.15);
  --orange-a25: rgba(242,140,40,.25);
  --bleu-sortie-a10: rgba(31,79,191,.1);
  --blanc-a30: rgba(255,255,255,.3);
  --blanc-a60: rgba(255,255,255,.6);

  /* Voiles de lisibilité sur images et vidéos */
  --voile-bas: linear-gradient(to top, rgba(14,16,19,.88) 0%, rgba(14,16,19,.55) 38%, rgba(14,16,19,.12) 72%, rgba(14,16,19,.28) 100%);
  --voile-gauche: linear-gradient(90deg, rgba(14,16,19,.82) 0%, rgba(14,16,19,.5) 45%, rgba(14,16,19,.05) 80%);
  --voile-haut: linear-gradient(to bottom, rgba(14,16,19,.72), rgba(14,16,19,.4) 55%, rgba(14,16,19,0));

  /* Héritage v3 (objets de la route) : neutralisés */
  --tole-bleue: var(--bleu-sortie-2);
  --beton: #8A8F99;
  --matrice: #111111;
  --terre: #3B3F46;
  --mousse: #2F5D45;
  --bois: #B9A78F;

  /* Traits, ombres, anneau de focus par zone (nuit partout) ; plus de grain */
  --zb-trait: var(--filet-2);
  --zm-trait: var(--filet-2);
  --zb-ombre: var(--ombre-sombre);
  --zm-ombre: var(--ombre-sombre);
  --zb-anneau: var(--vert-signal);
  --zm-anneau: var(--vert-signal);
  --grain-bitume: none;
  --grain-marquage: none;
  --zb-grain: none;
  --zm-grain: none;
  --zm-grain-melange: normal;

  /* Mise en page */
  --h-entete: 64px;
  --h-barre-bas: 64px;
  --zone-sure-bas: env(safe-area-inset-bottom, 0px);
  --gouttiere: 20px;
  /* UN seul conteneur pour tout le site (en-tête, héros, sections, légendes, boutons pause, pied) :
     1440 px de contenu au plus, centré, avec la gouttière de part et d'autre. */
  --largeur-max: 1440px;
  --conteneur: min(100% - 2 * var(--gouttiere), var(--largeur-max));
  /* Retrait d'un élément positionné (right/left) dans un bloc pleine largeur, aligné sur le bord du conteneur.
     Les % se résolvent à l'usage : largeur du bloc qui contient l'élément. */
  --bord-conteneur: max(var(--gouttiere), (100% - var(--largeur-max)) / 2);
  --largeur-texte: 72ch;
}
@media (min-width: 400px) { :root { --logo-entete: 15px; } }
@media (min-width: 600px) { :root { --gouttiere: 32px; } }
@media (min-width: 900px) { :root { --h-entete: 76px; --gouttiere: 48px; --logo-entete: 18px; } }
@media (min-width: 1440px) { :root { --gouttiere: 64px; } }

/* ==========================================================================
   Impression : seule exception à la nuit (facture, devis, CGV, toute page imprimée).
   Les jetons de nuit s'inversent ici : fonds blancs, texte quasi-noir, vert profond pour les accents,
   logo en version claire. Tout ce qui est écrit avec les jetons s'imprime donc sur papier blanc.
   ========================================================================== */
@media print {
  :root {
    color-scheme: light;
    --noir: #FFFFFF; --nuit: #FFFFFF; --noir-2: #FFFFFF; --noir-3: #E6E3DC;
    --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F7F6F2; --surface-4: #EFEDE7;
    --blanc-chaud: #0E1013; --gris: #555B65; --gris-texte: #555B65;
    --vert-signal: #0F6B3E; --bleu-sortie-texte: #1F4FBF; --lueur-verte: transparent;
    --filet: rgba(14,16,19,.12); --filet-2: rgba(14,16,19,.16); --filet-fort: rgba(14,16,19,.32);
    --creme-a06: rgba(14,16,19,.04); --creme-a12: rgba(14,16,19,.12); --creme-a20: rgba(14,16,19,.2);
    --creme-a40: rgba(14,16,19,.4); --creme-a70: rgba(14,16,19,.72);
    --vert-profond-a10: rgba(15,107,62,.08); --vert-profond-a20: rgba(15,107,62,.18);
    --ombre-sombre: 0 0 0 0 transparent; --ombre-haute: 0 0 0 0 transparent; --ombre-fine: 0 0 0 0 transparent; --ombre-panneau: 0 0 0 0 transparent;
    --logo-marque: var(--logo-marque-clair); --logo-fond: var(--logo-fond-clair);
    --logo-voiture: var(--logo-voiture-clair); --logo-nom: var(--logo-nom-clair);
  }
}