/* Garde-robe — jetons (htdocs/assets/garderobe/jetons.css).
   Posés sur <html class="gr"> des deux pages. style.css (thème commun des Tools) n'est pas touché :
   cette feuille se charge APRÈS lui. Clair = « papier », sombre = « chambre noire » (thème de référence).
   Le sombre suit le système, sauf si les Tools forcent un thème ([data-theme], clé localStorage ltb-theme). */

:root.gr {
    /* ---- Couleurs : papier ---- */
    --gr-encre-rgb: 28 26 23;               /* l'encre en triplet, pour les alphas */
    --gr-fond: #F3F0E9;                      /* page */
    --gr-surface: #FBFAF6;                   /* feuilles, cartes, groupes de rangées */
    --gr-surface-2: #E9E5DC;                 /* pistes, boutons secondaires, puces au repos */
    --gr-segment: #FBFAF6;                   /* segment actif sur une piste surface-2 */
    --gr-puits: #E7E2D8;                     /* fond d'une silhouette, avant teinte */
    --gr-tirage: #EEEAE3;                    /* fond d'une photo (mix-blend-mode: multiply) */
    --gr-texte: #1C1A17;                     /* texte 1, encre, bouton primaire, anneau de sélection, focus */
    --gr-texte-2: #57534B;                   /* métadonnées */
    --gr-texte-3: #6B655B;                   /* légendes, inactifs (jamais sur --gr-segment en sombre) */
    --gr-inverse: #FBFAF6;                   /* texte posé sur l'encre */
    --gr-ligne: rgb(var(--gr-encre-rgb) / .12);        /* filets décoratifs */
    --gr-ligne-forte: rgb(var(--gr-encre-rgb) / .50);  /* bord de champ, axe, liseré : ≥ 3:1 sur fond et surface */
    --gr-survol: rgb(var(--gr-encre-rgb) / .05);
    --gr-presse: rgb(var(--gr-encre-rgb) / .10);
    --gr-voile: rgb(var(--gr-encre-rgb) / .40);        /* ::backdrop des feuilles */
    --gr-verre: rgb(251 250 246 / .82);                 /* pastilles posées sur une vignette (+ flou 8 px) */
    --gr-barre: rgb(243 240 233 / .84);                 /* barres haute et basse (+ flou 20 px) ; .84 : texte-2 ≥ 4,5:1 sur tout ce qui passe dessous */
    --gr-accent: #9A3F1C;                    /* ROUILLE : trous, mort, zone de mort. Rien d'autre. */
    --gr-accent-doux: #E8D7CC;
    --gr-ok: #2E6A47;                        /* complet, enregistré */
    --gr-ok-doux: #D7DCD1;
    --gr-attention: #7C520B;                 /* usure apparue, hors ligne */
    --gr-attention-doux: #E2D9CA;
    --gr-danger: #B3261E;                    /* supprimer, échec (toujours en texte, jamais en aplat) */
    --gr-danger-doux: #EED5CC;
    --gr-focus: var(--gr-texte);
    /* Graphismes porteurs d'état (WCAG 1.4.11, ≥ 3:1, mesurés par tools/contraste-garderobe.mjs) */
    --gr-memoire: rgb(var(--gr-encre-rgb) / .50);       /* segment « de mémoire » de la bande des jours (3,23:1 sur le fond) */
    --gr-filet: rgb(251 250 246 / .50);                  /* filet de 5 s de la confirmation : l'inverse sur l'encre */

    /* ---- Ombres : seulement ce qui flotte ---- */
    --gr-o-flottant: 0 1px 2px rgb(28 26 23 / .06), 0 12px 32px -12px rgb(28 26 23 / .28);
    --gr-o-feuille: 0 -1px 0 var(--gr-ligne), 0 -24px 64px -32px rgb(28 26 23 / .35);
    --gr-o-souleve: 0 10px 28px -10px rgb(28 26 23 / .35);
    --gr-o-segment: 0 1px 2px rgb(28 26 23 / .10), 0 0 0 .5px rgb(28 26 23 / .06);

    /* ---- Typographie ---- */
    --gr-serif: "Instrument Serif", ui-serif, "New York", Georgia, serif;
    --gr-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --gr-mono: ui-monospace, SFMono-Regular, Menlo, monospace;   /* adresses et clés (Réglages › Claude) */

    /* ---- Espacements : grille de 4 ---- */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
    --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
    --gr-marge: max(20px, env(safe-area-inset-left));
    --gr-marge-d: max(20px, env(safe-area-inset-right));
    --gr-cible: 44px;

    /* ---- Rayons : trois, plus le disque (50 %) ---- */
    --r-tirage: 2px;     /* photos, vignettes, puits, barres de vie, cases du rythme, capsules du journal */
    --r-ctrl: 12px;      /* boutons, champs, groupes de rangées, cartes, segmentés */
    --r-feuille: 24px;   /* haut des feuilles, pilules (puces, confirmation, toast) */

    /* ---- Mouvement ---- */
    --d-instant: 100ms; --d-court: 180ms; --d-moyen: 280ms; --d-long: 420ms; --d-annuler: 5000ms;
    --c-sortie: cubic-bezier(.16, 1, .3, 1);     /* ce qui entre */
    --c-entree: cubic-bezier(.7, 0, .84, 0);     /* ce qui sort */
    --c-standard: cubic-bezier(.2, 0, 0, 1);
    --c-ressort: cubic-bezier(.34, 1.56, .64, 1); /* la coche seulement */

    /* ---- Plans (z-index hors couche supérieure) ---- */
    --z-barre: 20;       /* barres haute/basse, onglets */
    --z-detail: 30;      /* écran poussé (mobile) */
    --z-annonce: 40;     /* bandeau, toast quand aucune feuille n'est ouverte */

    color-scheme: light;
    background: var(--gr-fond);
}

/* ---- Chambre noire ---- */
@media (prefers-color-scheme: dark) {
    :root.gr:not([data-theme="light"]) {
        --gr-encre-rgb: 239 235 227;
        --gr-fond: #121110; --gr-surface: #1B1A18; --gr-surface-2: #26241F; --gr-segment: #3A3731;
        --gr-puits: #2A2824; --gr-tirage: #8E897F;
        --gr-texte: #EFEBE3; --gr-texte-2: #B0AA9F; --gr-texte-3: #948E83; --gr-inverse: #121110;
        --gr-ligne-forte: rgb(var(--gr-encre-rgb) / .40);
        --gr-voile: rgb(0 0 0 / .60);
        --gr-verre: rgb(27 26 24 / .85);
        --gr-barre: rgb(18 17 16 / .84);
        --gr-accent: #E48A5E; --gr-accent-doux: #2B201A;
        --gr-ok: #84C49C; --gr-ok-doux: #202621;
        --gr-attention: #E2B256; --gr-attention-doux: #2A241A;
        --gr-danger: #FF8A7F; --gr-danger-doux: #2E201E;
        --gr-memoire: rgb(var(--gr-encre-rgb) / .45);
        --gr-filet: rgb(18 17 16 / .50);
        --gr-o-flottant: 0 0 0 1px rgb(239 235 227 / .08), 0 16px 40px -12px rgb(0 0 0 / .7);
        --gr-o-feuille: 0 -1px 0 rgb(239 235 227 / .10), 0 -24px 64px -24px rgb(0 0 0 / .8);
        --gr-o-souleve: 0 10px 28px -8px rgb(0 0 0 / .7);
        --gr-o-segment: 0 0 0 .5px rgb(239 235 227 / .10);
        color-scheme: dark;
    }
}
:root.gr[data-theme="dark"] {
    --gr-encre-rgb: 239 235 227;
    --gr-fond: #121110; --gr-surface: #1B1A18; --gr-surface-2: #26241F; --gr-segment: #3A3731;
    --gr-puits: #2A2824; --gr-tirage: #8E897F;
    --gr-texte: #EFEBE3; --gr-texte-2: #B0AA9F; --gr-texte-3: #948E83; --gr-inverse: #121110;
    --gr-ligne-forte: rgb(var(--gr-encre-rgb) / .40);
    --gr-voile: rgb(0 0 0 / .60);
    --gr-verre: rgb(27 26 24 / .85);
    --gr-barre: rgb(18 17 16 / .84);
    --gr-accent: #E48A5E; --gr-accent-doux: #2B201A;
    --gr-ok: #84C49C; --gr-ok-doux: #202621;
    --gr-attention: #E2B256; --gr-attention-doux: #2A241A;
    --gr-danger: #FF8A7F; --gr-danger-doux: #2E201E;
    --gr-memoire: rgb(var(--gr-encre-rgb) / .45);
    --gr-filet: rgb(18 17 16 / .50);
    --gr-o-flottant: 0 0 0 1px rgb(239 235 227 / .08), 0 16px 40px -12px rgb(0 0 0 / .7);
    --gr-o-feuille: 0 -1px 0 rgb(239 235 227 / .10), 0 -24px 64px -24px rgb(0 0 0 / .8);
    --gr-o-souleve: 0 10px 28px -8px rgb(0 0 0 / .7);
    --gr-o-segment: 0 0 0 .5px rgb(239 235 227 / .10);
    color-scheme: dark;
}

/* ---- Contraste renforcé ---- */
/* Le :is() porte la spécificité à (0,3,0), celle des blocs sombres : déclaré après eux, ce bloc
   l'emporte aussi en sombre (avec :root.gr seul, le sombre gardait son texte-3 et ses barres en verre). */
@media (prefers-contrast: more) {
    :root.gr:is(:not([data-theme="light"]), [data-theme="light"]) {
        --gr-ligne: var(--gr-ligne-forte); --gr-texte-3: var(--gr-texte-2); --gr-verre: var(--gr-surface); --gr-barre: var(--gr-fond);
    }
}

/* ---- Base ---- */
.gr body {
    margin: 0;
    background: var(--gr-fond);
    color: var(--gr-texte);
    font: 400 17px/24px var(--gr-sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
/* La barre des Tools et le pied ne changent pas : on leur rend la police et le corps de style.css. */
.gr .topbar, .gr .appfoot { font: 400 16px/1.55 'Inter', system-ui, -apple-system, sans-serif; }
.gr ::selection { background: rgb(var(--gr-encre-rgb) / .18); }
.gr :focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; }
/* style.css pose sur tout :focus-visible un halo bleu (box-shadow: var(--ring)) et un rayon de 6 px :
   ni halo ni bleu dans la Garde-robe (§ 2.1, § 11), l'anneau encre seul. Spécificité (0,1,0), celle de
   style.css (battue par l'ordre) : toute classe de composants.css la bat encore. La barre des Tools garde
   son style. Rayon par défaut du tirage (2 px) pour ce qui n'en déclare pas. */
:where(.gr :not(.topbar *)):focus-visible { box-shadow: none; border-radius: var(--r-tirage); }

/* Champs : jamais sous 16 px (zoom iOS) ; neutralise style.css (même spécificité, chargé avant) */
/* :where() garde la spécificité à (0,1,1) : celle de style.css (qu'on bat par l'ordre) et que composants.css peut battre. */
.gr input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])),
.gr select, .gr textarea {
    -webkit-appearance: none; appearance: none;
    font: 400 17px/24px var(--gr-sans); color: var(--gr-texte);
    background: var(--gr-surface); border: 1px solid var(--gr-ligne-forte); border-radius: var(--r-ctrl);
    box-shadow: none; padding: 13px 14px; width: 100%;
}
.gr input:where(:not([type="checkbox"], [type="radio"], [type="range"])):focus, .gr select:focus, .gr textarea:focus { outline: none; border-color: var(--gr-texte); box-shadow: 0 0 0 1px var(--gr-texte); }
.gr input::placeholder, .gr textarea::placeholder { color: var(--gr-texte-3); }
/* Cases, boutons radio, curseurs : style.css leur pose aussi le halo bleu (input:focus) ; l'anneau encre suffit. */
.gr input:where([type="checkbox"], [type="radio"], [type="range"]):focus { box-shadow: none; }

/* ---- Échelle typographique : 7 niveaux + micro ---- */
.t-heros    { font: 400 112px/.88 var(--gr-serif); letter-spacing: -.02em; }
.t-affiche  { font: 400 44px/1 var(--gr-serif); letter-spacing: -.01em; }
.t-titre    { font: 400 28px/1.1 var(--gr-serif); }
.t-chapo    { font: italic 400 21px/1.35 var(--gr-serif); text-wrap: balance; }
.t-corps    { font: 400 17px/24px var(--gr-sans); }
.t-legende  { font: 500 13px/18px var(--gr-sans); }
.t-surtitre { font: 600 12px/16px var(--gr-sans); letter-spacing: .1em; text-transform: uppercase; font-stretch: 88%; }
.t-micro    { font: 600 11px/13px var(--gr-sans); }
.gr .nb, .t-corps, .t-legende, .t-micro { font-variant-numeric: tabular-nums; }
.gr sup { font-size: .7em; vertical-align: .45em; line-height: 0; }
@media (min-width: 1024px) {
    .t-heros   { font-size: 168px; }
    .t-affiche { font-size: 64px; }
    .t-titre   { font-size: 34px; }
    .t-chapo   { font-size: 24px; }
    .t-corps, .gr body { font-size: 16px; }
}

/* ---- Icônes : un seul jeu, trait de 1,5 px rendu ---- */
.g-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
        stroke-linecap: round; stroke-linejoin: round; }
.g-ic * { vector-effect: non-scaling-stroke; }
.g-ic.p  { width: 20px; height: 20px; }
.g-ic.pp { width: 16px; height: 16px; }
.g-ic.actif { stroke-width: 2; }

/* ---- Vignette : photo sur tirage, ou silhouette sur puits teinté ----
   La page pose --c1, --c2, --tr sur .g-vg (GR.styleTeinte). --c-encre se calcule ici, sans état. */
.g-vg {
    --c-encre: color-mix(in oklab, var(--c1, #888) 50%, var(--gr-texte));
    position: relative; display: block; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--r-tirage);
    background: color-mix(in oklab, var(--c1, #888) 12%, var(--gr-puits));
}
.g-vg > svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.g-vg.photo { background: var(--gr-tirage); }
.g-vg.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.g-vg.mini { --trait: none; }            /* sous 40 px : la forme seule (propriété, pas sélecteur : voir §5.4) */
.g-vg.rebut { filter: grayscale(1); opacity: .6; }

/* Silhouettes : sélecteurs SANS contexte (ils s'appliquent dans l'arbre cloné par <use>) */
.s-corps  { fill: var(--c1); stroke: color-mix(in oklab, var(--c1) 50%, var(--gr-texte)); stroke-width: 1;
            vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.s-detail { fill: var(--c2, var(--c1)); stroke: color-mix(in oklab, var(--c1) 50%, var(--gr-texte)); stroke-width: 1;
            vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.s-trait  { display: var(--trait, inline); fill: none; stroke: var(--tr, rgb(0 0 0 / .28)); stroke-width: 1;
            vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
    .gr *, .gr *::before, .gr *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; scroll-behavior: auto !important; }
    .gr .fondu { transition-duration: 120ms !important; }   /* seuls les fondus courts restent */
}