/* Novale · tokens du design system. Règles d'usage : DESIGN.md à la racine du dépôt.
   Source unique des couleurs, tailles et durées ; les aperçus l'importent, le futur site
   la reprendra dans son thème Tailwind (@theme). */

:root {
  /* 1. Primitifs : les valeurs, sans rôle, écrites en OKLCH (clarté, chroma, teinte) ; le nombre du nom est la clarté
     en pour cent. Les pages ne les lisent jamais directement : elles lisent les rôles ci-dessous.
     Étude des couleurs du 18/10/2026 (design-system/ETUDE-COULEURS.md) ; neutres accordés à l'encre (CO1, Matthieu),
     nuit plus profonde (NU2, Matthieu), mot en ambre et primitifs tranchés par DESIGN SYSTEM sur sa délégation. */
  --gris-100: oklch(100% 0 0);                 /* #FFFFFF */
  --gris-97: oklch(97.10% 0.0059 239.82);      /* #F2F6F9 */
  --gris-92: oklch(91.91% 0.0104 247.94);      /* #DFE5EB */
  --gris-90: oklch(89.92% 0.0147 244.73);      /* #D6DFE7 */
  --gris-51: oklch(51.16% 0.0177 242.03);      /* #5E6870 */
  --gris-26: oklch(25.93% 0.0161 240.66);      /* #1D252B */
  --ardoise-79: oklch(78.97% 0.0302 245.00);   /* #ABBDCD */
  --ardoise-75: oklch(74.91% 0.0358 249.66);   /* #9DB0C4 */
  --ardoise-59: oklch(59.19% 0.0411 250.98);   /* #6C8096, l'ardoise du logo */
  --ardoise-49: oklch(49.39% 0.0410 247.40);   /* #4F6478 */
  --encre-35: oklch(34.56% 0.0408 242.57);     /* #263C4D, l'encre du logo */
  --nuit-33: oklch(32.90% 0.0326 245.42);      /* #273745 */
  --nuit-21: oklch(21.11% 0.0248 241.78);      /* #0E1A23 */
  --nuit-17: oklch(16.86% 0.0193 245.27);      /* #081017 */
  --ambre-77: oklch(76.50% 0.1497 78.17);      /* #E6A526, l'ambre du logo */
  --ambre-50: oklch(49.86% 0.1148 61.96);      /* #905100 */
  --rouge-71: oklch(70.86% 0.1699 26.47);      /* #F97066 */
  --rouge-50: oklch(50.03% 0.1821 29.51);      /* #B42318 */
  --vert-70: oklch(69.91% 0.1421 157.19);      /* #3DB87A */
  --vert-52: oklch(51.50% 0.1115 156.41);      /* #1E7A4C */
  --orange-81: oklch(81.09% 0.1634 75.65);     /* #FDB022 */
  --orange-54: oklch(53.94% 0.1562 42.99);     /* #B54708 */

  /* 2. Rôles : ce que les pages lisent ; chacun choisit un primitif de jour, puis de nuit plus bas.
     3. Composants : plus bas (--principal-survol, --ombre-carte…), ils ne lisent que des rôles. */
  /* Neutres du site : noir et blanc. Le blanc pur a battu le papier aux tours 2 à 4. */
  --papier: var(--gris-100);
  --papier-2: var(--gris-97);
  --trait: var(--gris-92);
  --texte: var(--gris-26);
  --texte-doux: var(--gris-51);

  /* Marque : palette du logo. L'ambre vif sert aux formes et aux aplats, jamais au texte. */
  --encre: var(--encre-35);
  --ardoise: var(--ardoise-59);
  --ambre: var(--ambre-77);
  --ambre-texte: var(--ambre-50); /* mot mis en avant dans un titre (6,2:1) ; plus vif que l'ancien #8C571E, pour ne pas tourner au brun */
  --grille: var(--gris-90);
  /* Erreur : un rouge hors de la palette du logo, choisi par Matthieu au tour 3 du design system (ER2, 16/10/2026) ; 6,6:1 sur blanc. */
  --erreur: var(--rouge-50);

  /* Typographie retenue par les ateliers du goût (Google Fonts, licence OFL). */
  --police-texte: "Space Grotesk", system-ui, sans-serif;
  --police-chiffres: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* cotes, mesures, étiquettes */
  --police-accent: "Newsreader", Georgia, serif; /* italique, un seul mot à la fois */
  --taille-1: 0.75rem;  /* 12 : étiquettes en capitales */
  --taille-2: 0.875rem; /* 14 */
  --taille-3: 1rem;     /* 16 : texte courant */
  --taille-4: 1.25rem;  /* 20 */
  --taille-5: 1.75rem;  /* 28 */
  --taille-6: 2.5rem;   /* 40 */
  --taille-7: 4rem;     /* 64 */
  --taille-titre: 4.125rem; /* 66 : titre du premier écran, retenu au tour 3 */
  --taille-8: 6rem;     /* 96 : titre d'accueil */
  --interlettre-etiquette: 0.14em;

  /* Espacements sur une base de 4 px ; la grille pixel suit un pas de 8 px. */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;
  --espace-9: 96px;
  --espace-10: 128px;
  --grille-pas: 8px;
  --grille-colonnes: 12;
  --grille-gouttiere: 24px;
  --largeur-max: 1280px;

  /* Dessin technique : traits fins, coins nets, repères. */
  --trait-fin: 1px;
  --trait-moyen: 1.5px;
  --croix: 12px;    /* croix de repérage */
  --cote-tic: 8px;  /* trait aux extrémités d'une cote */
  --rayon: 2px;

  /* Mouvement : court et précis ; le parcours s'éclaire au défilement. */
  --duree-courte: 150ms;
  --duree: 300ms;
  --duree-eclairage: 600ms;
  --courbe: cubic-bezier(0.16, 1, 0.3, 1);
  /* Apparitions « premium » (F131, la carte de l'étape adresse) : une mise au point plutôt qu'un clignotement. */
  --duree-apparition: 320ms;
  --courbe-douce: cubic-bezier(0.22, 1, 0.36, 1);
  --flou-apparition: 6px;
  --duree-halo: 900ms;   /* le halo d'un repère qui se pose, deux fois au plus, jamais en boucle */
  --decalage: 120ms;     /* entre deux éléments qui apparaissent l'un après l'autre */
  --pause: 600ms;        /* l'arrêt d'un repère mobile avant qu'il reparte */

  /* États des éléments qui réagissent : règle obligatoire de DESIGN.md (tour 7 du design system, 16/10/2026).
     Valeurs de Material 3 (couches d'état), WCAG 2.2 (focus 2.4.7, contours 1.4.11) et des motifs ARIA. */
  --succes: var(--vert-52); /* vert « fait », hors de la palette du logo ; 5,3:1 sur blanc */
  --etat-survol: 8%;     /* couche d'état au survol, souris seulement */
  --etat-appui: 12%;     /* le fond fonce à l'appui */
  --etat-desactive: 0.4; /* opacité du contenu désactivé */
  --focus-largeur: 2px;  /* anneau du focus clavier, couleur --encre */
  --focus-decalage: 2px;
  --duree-fait: 1000ms;  /* le vert « fait » reste une seconde, puis retour au repos */
  --principal-survol: color-mix(in srgb, var(--encre), var(--papier) var(--etat-survol));
  --principal-appui: color-mix(in srgb, var(--encre), black var(--etat-appui));
  --secondaire-survol: var(--trait);
  --secondaire-appui: color-mix(in srgb, var(--trait), black var(--etat-appui));
  --ombre-carte: 0 1px 2px rgba(32, 37, 38, 0.08), 0 4px 12px rgba(32, 37, 38, 0.06);
  --ombre-carte-survol: 0 2px 4px rgba(32, 37, 38, 0.1), 0 8px 20px rgba(32, 37, 38, 0.08);
  --ombre-carte-appui: 0 1px 2px rgba(32, 37, 38, 0.1);

  /* Atelier des fondations, choix de Matthieu du 18/10/2026 (design-system/REGISTRE.md). */
  --avertissement: var(--orange-54); /* AV1 orange brûlé : ce qui demande d'agir bientôt sans être une erreur ; 5,4:1 sur blanc */
  --information: var(--ardoise-49); /* IN2 ardoise foncée : ce qui renseigne sans demander d'agir ; 6,1:1 sur blanc */
  /* EL1 ombres douces, quatre niveaux ; --ombre-1 vaut --ombre-carte. */
  --ombre-1: var(--ombre-carte);                                                      /* carte */
  --ombre-2: 0 4px 8px rgba(32, 37, 38, 0.1), 0 12px 24px rgba(32, 37, 38, 0.08);     /* menu, en-tête collant */
  --ombre-3: 0 8px 16px rgba(32, 37, 38, 0.12), 0 24px 48px rgba(32, 37, 38, 0.12);   /* fenêtre, tiroir */
  --ombre-4: 0 8px 16px rgba(32, 37, 38, 0.14), 0 24px 48px rgba(32, 37, 38, 0.14);   /* message */
  /* R2 points de rupture du DSFR. Une variable CSS ne peut pas servir dans @media : ces valeurs se recopient
     dans le thème Tailwind (--breakpoint-*) et dans les requêtes écrites à la main. */
  --rupture-sm: 576px;
  --rupture-md: 768px;
  --rupture-lg: 992px;
  --rupture-xl: 1248px;
  /* Superpositions, révisées par DESIGN SYSTEM le 18/10 sur sa délégation (« je vous laisse réviser cela ») :
     ce qui s'ouvre depuis une couche passe devant elle ; pas de 100 pour laisser de la place ; le voile d'une
     fenêtre ou d'un tiroir se place juste sous elle (z-index de la couche moins 1). */
  --z-contenu: 0;
  --z-colle: 100;     /* en-tête collant, barre collée en bas */
  --z-tiroir: 200;
  --z-fenetre: 300;   /* fenêtres, dont la palette ⌘ K */
  --z-flottant: 400;  /* menus, listes de choix, suggestions : au-dessus d'une fenêtre qui les ouvre */
  --z-message: 500;   /* toasts */
  --z-bulle: 600;     /* info-bulles */
}

/* Fond sombre : valeurs de la déclinaison sombre du logo. */
:root[data-theme="sombre"] {
  /* Nuit plus profonde (NU2, Matthieu, 18/10/2026), neutres accordés à l'encre (CO1). */
  --papier: var(--nuit-17);
  --papier-2: var(--nuit-21);
  --trait: var(--nuit-33);
  --texte: var(--gris-97);
  --texte-doux: var(--ardoise-79); /* Lc 65 en APCA, au-dessus de Lc 60 ; l'ancien #9DB0C4 ne faisait que Lc 57 */
  --encre: var(--gris-97);
  --ardoise: var(--ardoise-79);
  --ambre-texte: var(--ambre-77);
  --grille: var(--nuit-33);
  --erreur: var(--rouge-71); /* le même rouge, lisible sur la nuit (6,9:1) */
  /* Vert « fait » de nuit, gardé par Matthieu le 18/10/2026 (le #1E7A4C ne fait que 3,3:1 sur la nuit) : 7,6:1. */
  --succes: var(--vert-70);
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --ombre-carte-survol: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
  --ombre-carte-appui: 0 1px 2px rgba(0, 0, 0, 0.35);
  --avertissement: var(--orange-81); /* 10,4:1 sur la nuit */
  --information: var(--ardoise-75); /* 8,6:1 sur la nuit */
  --ombre-2: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.3);
  --ombre-3: 0 8px 16px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.4);
  --ombre-4: 0 8px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-courte: 0ms; --duree: 0ms; --duree-eclairage: 0ms; --duree-apparition: 0ms; --duree-halo: 0ms; --decalage: 0ms; --flou-apparition: 0px; }
}