/* ============================================================
   tokens2.css — refonte UI (v2 du livrable design, 16/08/2026).
   Lato AUTO-HÉBERGÉE (choix RGPD) — woff2 dans assets/fonts/.
   Chargé APRÈS legacy.css et AVANT ui.css ; le <style> thème
   cohorte du layout reste le DERNIER :root (thémabilité).
   Renommage final en tokens.css à la fin de la transition.
   ============================================================ */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/lato-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/lato-300-latin.woff2') format('woff2');
    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: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-400-latin.woff2') format('woff2');
    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: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/lato-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/lato-700-latin.woff2') format('woff2');
    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: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/lato-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/lato-900-latin.woff2') format('woff2');
    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: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-400-italic-latin.woff2') format('woff2');
    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;
}
:root {
    /* ---- MARQUE (surchargée par cohorte) ---- */
    --orange:        #F75A00;
    --orange-fonce:  #A63C00;   /* actions (boutons pleins) & liens — AA ≥4.5 sur blanc ET sur --orange-clair */
    /* Même valeur que dans tokens.css, redéclarée ici parce que les documents AUTONOMES
       (rapport d'évaluation, offre de services, export des rêves) ne chargent QUE cette
       feuille. Sans cette ligne, leur background:var(--orange-bouton) est invalide, retombe
       sur « transparent », et leur bouton principal est blanc sur blanc — invisible. */
    --orange-bouton: #A63C00;

    /* Les quatre ÉTAPES d'une méthode — CŒUR (Contexte/Œuvre/Utilité/Règles) et
       CAPE (Cause/Ancrage/Promesse/Exécution) partagent le même quatuor, par position.
       Ce sont des CATÉGORIES, pas des états : jamais --succes ni --erreur, sinon
       « Ancrage » passerait pour une réussite et le sens dériverait au premier thème.
       Chacune est lisible en texte sur crème ET sous du texte blanc. L'étape 1 portait
       #F75A00, qui ne tenait que 3,02:1 : elle prend l'orange lisible de la marque. */
    --etape-1: #A63C00;   /* 6,02:1 en texte sur crème · 6,43:1 sous du blanc */
    --etape-2: #1A7F37;   /* 4,69 · 5,08 */
    --etape-3: #2563EB;   /* 4,78 · 5,17 */
    --etape-4: #7C3AED;   /* 5,27 · 5,70 */

    /* Les trois niveaux de CRITICITÉ des réflexes de sécurité — des états, portés par la forme
       autant que par la couleur (disque plein, anneau épais, anneau fin : voir securite/_reflexes.php).
       Déclarés ici parce que deux vues les emploient : le hub (_reflexes) et la page d'un réflexe. */
    --sec-crit-haute:   #C0392B;
    --sec-crit-moyenne: #D98324;
    --sec-crit-basse:   #E8B923;
    --orange-clair:  #FCE7D6;   /* fonds teintés, bulle « moi » */

    /* ---- COQUILLE (nav sombre) ---- */
    --coquille:        #2A2422;
    --coquille-texte:  rgba(253,251,247,.72);  /* AA 8+ sur --coquille */
    --coquille-texte-2:rgba(253,251,247,.55);  /* labels de groupe — AA 5.7 */
    --coquille-actif:  rgba(255,255,255,.10);

    /* ---- FONDS ---- */
    --fond:   #FDFBF7;   /* zone de contenu */
    --carte:  #FFFFFF;
    --sable:  #F3ECE1;   /* fonds secondaires, volets ouverts, segments */
    --creme:  #F7F2EA;   /* bulle compagnon secondaire, table têtes */

    /* ---- TEXTE ---- */
    --encre:   #4F3231;  /* titres, texte fort */
    --texte-2: #6E635B;  /* corps */
    --muted:   #7A7066;  /* méta, placeholders — AA 4.5+ sur --fond (l'ancien #A99F95 ne passait pas) */

    /* ---- ÉTATS ---- */
    /* Vert assombri le 4 octobre 2026. L'ancien #4E7A3E posé en TEXTE sur son propre
       fond --succes-fond ne donnait que 4,42:1 — sous le seuil AA de 4,5:1 pour du texte
       normal, et seize règles de l'application font exactement ce couple (pastilles de
       badge à 11px pour la plupart : .ds-badge--valide, .jalon.fait, .flash.succes,
       .site-flash--succes, et douze autres dans les vues).
       #15702E passe dans ses QUATRE rôles et améliore les trois autres :
         texte sur --succes-fond ... 4,42 → 5,45:1
         texte sur une carte ....... 4,91 → 6,05:1
         texte sur la page ......... 4,86 → 6,00:1
         fond sous du texte blanc .. 5,03 → 6,20:1 */
    --succes:      #15702E;  --succes-fond: #EBF3E5;
    --erreur:      #B42318;  --erreur-fond: #FDECEA;
    --alerte-fond: #FEF6EC;
    /* Le trio d'alerte avait un fond et un bord, mais aucune couleur de TEXTE lisible :
       --alerte (#C9A227) ne donne que 2,26:1 sur son propre fond — c'est une couleur de
       pastille et de bord, pas de texte. --alerte-texte complète le trio, à 5,33:1. */
    --alerte-texte: #8A5E00;

    /* ---- BORDURE (usage rare : champs uniquement) ---- */
    --bord-champ: #E7DFD3;

    /* ---- TYPO — Lato AUTO-HÉBERGÉE (choix RGPD : ne pas appeler Google Fonts,
       bien que la CSP l'autorise) : déclarer les @font-face ici ;
       repli pile système en attendant les woff2. ---- */
    --police: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, sans-serif;
    --fs-h1:     26px;   /* 900, un seul par écran */
    --fs-h2:     17px;   /* 800, titres de volet/carte */
    --fs-corps:  15px;
    --fs-petit:  13px;
    --fs-micro:  11.5px; /* kickers, compteurs */
    --lh-corps:  1.55;

    /* ---- LA VOIX DES TEXTES QU'ON LIT ----
       Attention : --serif est un ALIAS de --police (donc Lato) dans tokens.css
       comme ici ; legacy.css l'utilise pour les titres. Il ne donne aucune
       empattement et ne convient pas à un texte long qu'on lit vraiment.
       --police-lecture est la pile système utilisée pour la lettre et le conte :
       exactement celle du canvas de reves.js et de reves/export.php, pour que
       l'écran, l'image exportée et le papier parlent de la même voix.
       Police système : aucun @font-face, aucun appel réseau. */
    --police-lecture: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
    /* Longueur de colonne de lecture. En PIXELS et non en « ch » : l'unité ch se
       résout contre la police de l'élément QUI L'UTILISE, si bien que la même
       valeur donnait 644 px sur un bloc en Georgia 17,5 px et 522 px sur un bloc
       en Lato 15 px — deux blocs superposés, désalignés de 61 px de chaque côté. */
    --mesure-lecture: 644px;  /* = 60 signes en Georgia 17,5px */

    /* ---- ESPACEMENTS (rythme 4px) ---- */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

    /* ---- RAYONS ---- */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
    --r-bulle:16px;

    /* ---- OMBRES (remplacent toutes les bordures de séparation) ---- */
    --ombre-1: 0 2px 10px -6px rgba(42,36,34,.28);   /* cartes, bulles */
    --ombre-2: 0 8px 24px -10px rgba(42,36,34,.35);  /* flottants : composer, menus */
    --halo-focus: 0 0 0 3px rgba(247,90,0,.18);      /* recalculé si marque changée : ok, décoratif */

    /* ---- ACCENT STRUCTUREL (décision produit 16/08 soir, révisée) ----
       3e couleur des TITRES (h1/h2 uniquement — texte large, seuil AA 3:1) :
       la couleur PRINCIPALE de la marque, celle du bouton carré orange.
       Suit le thème de cohorte, comme les boutons.
       NE PAS l'étendre au petit texte : --orange donne 3,27:1 sur blanc, ce qui
       passe pour un titre (seuil 3:1) mais reste sous le seuil 4,5:1 du petit
       texte. Les intitulés de section des volants gardent --muted pour cette
       raison — voir .vol-titre dans ui.css. */
    --accent-2: var(--orange);

    /* ---- TRANSITIONS ---- */
    --t: .15s ease;

    /* ---- MOUVEMENT (livrable motion — voir MOTION.md et assets/motion.css) ---- */
    --t-court:  120ms;  /* retour au doigt : survol, focus, case cochée */
    --t-moyen:  220ms;  /* un élément : volet, chip, carte, bulle */
    --t-long:   420ms;  /* une page, un palier, une transition de vue */
    --ease:     cubic-bezier(.2,.8,.25,1);   /* la seule courbe du produit */
    --ease-sceau: cubic-bezier(.2,1.4,.3,1); /* rebond, réservé au sceau */
    --t: var(--t-moyen); /* alias historique (ui.css) */

    /* ---- ALIAS DE COMPATIBILITÉ (anciens gabarits) ---- */
    --brun: var(--encre);
    --gris: var(--muted);
    --ivoire: var(--fond);
    --crrme-accent: var(--sable);
    --bord: var(--bord-champ);
    --serif: var(--police);
    --sans: var(--police);
}