/* ==========================================================================
   Color Guesser · cg.css · DA « négatif » (octobre 2026)
   Référence : refonte-2026-10/DA-NEGATIF.md  (ce fichier en est l'application)

   À mettre dans le <head> de chaque page (landing, univers, app) :
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&display=swap">
     <link rel="stylesheet" href="/cg.css?v=12">
     <meta name="theme-color" content="#0A0A0A">
   puis  <body class="cg">  (toute la base est rangée sous .cg : rien ne change
   tant qu'une page ne l'a pas activée).

   Règles : toutes les classes commencent par cg- ; on n'anime que transform
   et opacity ; chaque mouvement a sa variante « réduite » (fondu 150 ms) en
   bas de fichier ; la zone où l'on juge une couleur est #FFFFFF, rien de
   coloré à moins de 24 px.
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root{
  /* Surfaces sur noir (du plus bas au plus haut) */
  --cg-bg:#0A0A0A;          /* page */
  --cg-raised:#141414;      /* carte noire élevée */
  --cg-raised-2:#1C1C1C;    /* carte dans une carte, champs, rangées */
  --cg-raised-3:#262626;    /* survol, enfoncé, pistes */
  --cg-line:rgba(255,255,255,.08);   /* bord 1 px des cartes */
  --cg-line-2:rgba(255,255,255,.14); /* bord marqué, séparateurs utiles */
  --cg-line-3:rgba(255,255,255,.24); /* poignée de feuille, contour de champ */

  /* Texte sur noir : contrastes calculés sur #0A0A0A / #141414 / #1C1C1C / #262626 */
  --cg-fg:#FAFAFA;          /* 19,0 / 17,7 / 16,3 / 14,5 */
  --cg-fg-2:#A6A6A6;        /* 8,1 / 7,6 / 7,0 / 6,2   texte secondaire */
  --cg-fg-3:#939393;        /* 6,4 / 6,0 / 5,6 / 4,9   métadonnées, libellés */
  --cg-fg-4:#5C5C5C;        /* 3,0 : décor et désactivé uniquement, jamais de texte utile */

  /* Papier : la carte de jeu qui « s'allume » */
  --cg-paper:#FFFFFF;
  --cg-ink:#0A0A0A;         /* 19,8 sur blanc */
  --cg-ink-2:#5E5E5E;       /* 6,5 sur blanc */
  --cg-ink-3:#767676;       /* 4,5 sur blanc (minimum, petits libellés) */
  --cg-paper-line:rgba(10,10,10,.08);

  /* États (jamais de rouge pour un score) */
  --cg-ok:#30D158;          /* réussite, 9,8 sur noir */
  --cg-err:#FF6B5E;         /* vraie erreur (formulaire, réseau), 7,1 sur noir */
  --cg-gold:#FFD23F;        /* étoiles, trophées, « parfait », chrono < 5 s ; 13,7 sur noir */
  --cg-gold-ink:#7A5A00;    /* or en texte sur blanc, 6,2 */

  /* 13 univers : vifs sur noir, écart CIEDE2000 minimal 14,9 entre deux univers.
     --u-*-on = couleur du glyphe ou du texte posé SUR la couleur
     (blanc si ≥ 3:1, sinon encre : un glyphe blanc sur jaune serait à 1,3:1). */
  --u-nintendo:#FF3B30;       --u-nintendo-on:#FFFFFF;
  --u-marques:#FF7A1A;        --u-marques-on:#0A0A0A;
  --u-pixar:#FFB020;          --u-pixar-on:#0A0A0A;
  --u-pokemon:#FFE014;        --u-pokemon-on:#0A0A0A;
  --u-cartoons:#A8F03C;       --u-cartoons-on:#0A0A0A;
  --u-coupe-du-monde:#1ED760; --u-coupe-du-monde-on:#0A0A0A;
  --u-prescolaire:#2EF0C8;    --u-prescolaire-on:#0A0A0A;
  --u-boissons:#20C8FF;       --u-boissons-on:#0A0A0A;
  --u-flags:#2E6BFF;          --u-flags-on:#FFFFFF;
  --u-tech:#8C9BFF;           --u-tech-on:#0A0A0A;
  --u-football:#A855F7;       --u-football-on:#FFFFFF;
  --u-superheros:#FF3DD8;     --u-superheros-on:#FFFFFF;
  --u-disney:#FF4F8B;         --u-disney-on:#FFFFFF;
  --u:#FAFAFA; --u-on:#0A0A0A; /* valeur par défaut hors univers */
  --u-text:#0A0A0A; /* PETIT texte posé sur la couleur d'univers : encre partout (≥ 5:1), sauf drapeaux (blanc 4,5:1) */

  /* Spectre de marque (logo, anneau du défi, confettis neutres) */
  --cg-spectrum:#FF3B30, #FF7A1A, #FFB020, #FFE014, #A8F03C, #1ED760, #2EF0C8, #20C8FF, #2E6BFF, #8C9BFF, #A855F7, #FF3DD8, #FF4F8B, #FF3B30;

  /* Typographie : une seule famille, Geist */
  --cg-font:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cg-fs-hero:clamp(48px, 8.4vw, 104px);   /* titre de la landing (2 lignes max sur ordinateur) */
  --cg-fs-display:clamp(56px, 15vw, 92px);  /* titre de carte (« color guesser » à l'intro) */
  --cg-fs-h1:clamp(34px, 6vw, 48px);
  --cg-fs-h2:clamp(26px, 4vw, 34px);
  --cg-fs-h3:clamp(20px, 2.4vw, 22px);
  --cg-fs-lead:clamp(17px, 2vw, 19px);
  --cg-fs-body:15px;                         /* 16 px dès 768 px */
  --cg-fs-small:13px;
  --cg-fs-micro:12px;                        /* plancher absolu */
  --cg-fs-btn:15px;
  --cg-fs-num:clamp(96px, 30vw, 200px);      /* chiffres géants */
  --cg-fs-num-m:clamp(44px, 11vw, 64px);     /* chiffres de stats */
  --cg-track-tight:-.04em;                   /* titres (38 px → -1,52 px) */
  --cg-track-num:-.06em;

  /* Rayons (un seul système) */
  --cg-r-xl:30px;   /* grandes cartes, carte de jeu, feuilles */
  --cg-r-lg:22px;   /* mini-cartes, carré de couleur, cartes internes */
  --cg-r-md:16px;   /* champs, rangées */
  --cg-r-sm:12px;
  --cg-r-pill:999px;
  --cg-r-tile:30%;  /* tuile squircle (rattrapée par corner-shape quand dispo) */

  /* Élévations sur noir : la profondeur vient de la surface plus claire, du bord 1 px et de la lumière.
     Pas de grande ombre noire sur les cartes posées dans le flux : sur #0A0A0A elle ne se voit pas
     et, peinte au-dessus des blocs suivants, elle assombrit leur texte. L'ombre portée est réservée
     à ce qui flotte AU-DESSUS d'autre chose (piles, feuilles, barre d'onglets, boutons ronds). */
  --cg-e1:inset 0 0 0 1px var(--cg-line), inset 0 1px 0 rgba(255,255,255,.04);
  --cg-e2:inset 0 0 0 1px var(--cg-line-2), inset 0 1px 0 rgba(255,255,255,.07);
  --cg-e-float:0 3px 6px rgba(0,0,0,.4), 0 32px 64px -20px rgba(0,0,0,.9);
  --cg-e-paper:0 0 0 1px rgba(255,255,255,.6), 0 0 64px rgba(255,255,255,.06);
  --cg-halo:0 10px 28px -10px color-mix(in oklab, var(--u) 60%, transparent), 0 0 0 1px color-mix(in oklab, var(--u) 22%, transparent);

  /* Mouvement : courbes mesurées sur dialed.gg, transposées */
  --cg-ease-stack:cubic-bezier(.24,1.1,.28,1);   /* piles de cartes, .9 s */
  --cg-ease-out:cubic-bezier(.22,1,.36,1);       /* transform des boutons, .34 s */
  --cg-ease-pop:cubic-bezier(.34,1.56,.4,1);     /* pop, .3 s */
  --cg-ease-bounce:cubic-bezier(.28,1.5,.4,1);   /* rebond, .72 s */
  --cg-ease-soft:cubic-bezier(.22,.85,.3,1);     /* apparitions, .62 s */
  --cg-ease-exit:cubic-bezier(.5,0,.7,.4);       /* sorties : transform .2 s + opacity .15 s */
  --cg-ease-nav:cubic-bezier(.16,1,.3,1);        /* nav qui descend, .9 s */
  --cg-ease-sheet:cubic-bezier(.32,.72,0,1);     /* feuilles du bas, .42 s */
  --cg-d-bg:.22s;  --cg-d-btn:.34s; --cg-d-pop:.3s; --cg-d-soft:.62s;
  --cg-d-bounce:.72s; --cg-d-stack:.9s; --cg-d-nav:.9s; --cg-d-sheet:.42s;
  --cg-d-exit:.2s; --cg-d-exit-o:.15s;
  --cg-d-hop:.7s;   /* la bande vivante : 2 petits sauts (cg-hop) */
  --cg-stagger:60ms;
  --cg-rise:16px;   /* distance des apparitions (0 en mouvement réduit) */
  --cg-press:.97;   /* échelle à l'appui */

  /* Gouttières et zones sûres */
  --cg-gutter:16px;
  --cg-safe-t:env(safe-area-inset-top, 0px);
  --cg-safe-b:env(safe-area-inset-bottom, 0px);
  --cg-safe-l:env(safe-area-inset-left, 0px);
  --cg-safe-r:env(safe-area-inset-right, 0px);
}
@media (min-width:768px){ :root{ --cg-fs-body:16px; --cg-fs-btn:16px; --cg-gutter:24px; } }

/* Univers : <section data-u="pokemon"> pose --u et --u-on pour tout le bloc */
[data-u="nintendo"]{--u:var(--u-nintendo);--u-on:var(--u-nintendo-on);--u-text:#0A0A0A}
[data-u="marques"]{--u:var(--u-marques);--u-on:var(--u-marques-on);--u-text:#0A0A0A}
[data-u="pixar"]{--u:var(--u-pixar);--u-on:var(--u-pixar-on);--u-text:#0A0A0A}
[data-u="pokemon"]{--u:var(--u-pokemon);--u-on:var(--u-pokemon-on);--u-text:#0A0A0A}
[data-u="cartoons"]{--u:var(--u-cartoons);--u-on:var(--u-cartoons-on);--u-text:#0A0A0A}
[data-u="coupe-du-monde"]{--u:var(--u-coupe-du-monde);--u-on:var(--u-coupe-du-monde-on);--u-text:#0A0A0A}
[data-u="prescolaire"]{--u:var(--u-prescolaire);--u-on:var(--u-prescolaire-on);--u-text:#0A0A0A}
[data-u="boissons"]{--u:var(--u-boissons);--u-on:var(--u-boissons-on);--u-text:#0A0A0A}
[data-u="flags"]{--u:var(--u-flags);--u-on:var(--u-flags-on);--u-text:#FFFFFF}
[data-u="tech"]{--u:var(--u-tech);--u-on:var(--u-tech-on);--u-text:#0A0A0A}
[data-u="football"]{--u:var(--u-football);--u-on:var(--u-football-on);--u-text:#0A0A0A}
[data-u="superheros"]{--u:var(--u-superheros);--u-on:var(--u-superheros-on);--u-text:#0A0A0A}
[data-u="disney"]{--u:var(--u-disney);--u-on:var(--u-disney-on);--u-text:#0A0A0A}

/* ---------- 2. Base légère (sous .cg uniquement) ------------------------- */
.cg{
  margin:0; min-height:100dvh;
  background:var(--cg-bg); color:var(--cg-fg);
  font-family:var(--cg-font); font-size:var(--cg-fs-body); line-height:1.5; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; color-scheme:dark;
}
/* Noir jusqu'au bord de la fenêtre : pas de flash blanc au rebond iOS, barre de défilement sombre */
html:has(body.cg){ background:var(--cg-bg); scrollbar-color:#2A2A2A var(--cg-bg); }
/* Une feuille ouverte bloque le défilement de la page derrière elle */
html:has(dialog.cg-sheet[open]){ overflow:hidden; }
/* Base à spécificité nulle (:where) : n'importe quelle classe cg- l'emporte toujours */
:where(.cg) *, :where(.cg) *::before, :where(.cg) *::after{ box-sizing:border-box; }
:where(.cg) [hidden]{ display:none !important; }
:where(.cg) :where(img, svg, canvas, video){ display:block; max-width:100%; }
:where(.cg) :where(button, input, select, textarea){ font:inherit; color:inherit; letter-spacing:inherit; }
:where(.cg) :where(button){ cursor:pointer; touch-action:manipulation; } /* pas de délai d'appui sur iOS */
:where(.cg) :where(a){ color:inherit; text-decoration:none; }
:where(.cg) :where(h1,h2,h3,h4,p,ul,ol,figure){ margin:0; }
:where(.cg) ::selection{ background:#FFFFFF; color:#0A0A0A; }
/* Focus : visible sur le noir, sur le blanc et sur toutes les couleurs d'univers */
:where(.cg) :focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
:where(.cg) :where(.cg-paper :focus-visible, .cg-on-paper:focus-visible){ outline-color:var(--cg-ink); }
/* Champs : 16 px mini (iOS ne zoome plus) */
:where(.cg) :where(input, select, textarea){ font-size:max(16px, 1em); }
/* Appui long : pas de sélection ni de menu image sur les éléments jouables */
.cg-nosel{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- 3. Typographie ------------------------------------------------ */
.cg-hero{ font-size:var(--cg-fs-hero); font-weight:500; line-height:.9; letter-spacing:-.05em; text-wrap:balance; }
.cg-display{ font-size:var(--cg-fs-display); font-weight:500; line-height:.92; letter-spacing:-.045em; }
.cg-h1{ font-size:var(--cg-fs-h1); font-weight:500; line-height:1; letter-spacing:var(--cg-track-tight); text-wrap:balance; }
.cg-h2{ font-size:var(--cg-fs-h2); font-weight:500; line-height:1.06; letter-spacing:var(--cg-track-tight); text-wrap:balance; }
.cg-h3{ font-size:var(--cg-fs-h3); font-weight:500; line-height:1.15; letter-spacing:-.03em; }
.cg-lead{ font-size:var(--cg-fs-lead); line-height:1.45; letter-spacing:-.01em; color:var(--cg-fg-2); text-wrap:pretty; max-width:34ch; }
.cg-body{ font-size:var(--cg-fs-body); line-height:1.5; color:var(--cg-fg-2); text-wrap:pretty; max-width:60ch; }
.cg-small{ font-size:var(--cg-fs-small); line-height:1.4; color:var(--cg-fg-3); }
.cg-micro{ font-size:var(--cg-fs-micro); line-height:1.3; letter-spacing:.01em; color:var(--cg-fg-3); }
.cg-fg{ color:var(--cg-fg); } .cg-fg-2{ color:var(--cg-fg-2); } .cg-fg-3{ color:var(--cg-fg-3); }
.cg-tnum{ font-variant-numeric:tabular-nums; }
/* Chiffres géants : partie entière blanche, décimales et unités grises */
.cg-num{ font-size:var(--cg-fs-num); font-weight:500; line-height:.82; letter-spacing:var(--cg-track-num);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.cg-num--m{ font-size:var(--cg-fs-num-m); line-height:.9; letter-spacing:-.05em; }
.cg-num__dec, .cg-num__unit{ color:var(--cg-fg-3); }
.cg-num__unit{ font-size:.42em; letter-spacing:-.02em; margin-left:.06em; }
.cg-paper .cg-num__dec, .cg-paper .cg-num__unit{ color:var(--cg-ink-3); }
/* Palier du score, posé quand le compteur arrive : or ≥ 95, vert 85 à 94, gris sous 40 (jamais de rouge) */
.cg-num[data-tier="gold"]{ color:var(--cg-gold); }
.cg-num[data-tier="ok"]{ color:var(--cg-ok); }
.cg-num[data-tier="low"]{ color:var(--cg-fg-2); }
.cg-num.is-whole .cg-num__dec{ display:none; } /* 100 % s'écrit rond */
.cg-word{ /* le mot au-dessus d'un chiffre géant (« prêt », « score ») */
  font-size:var(--cg-fs-h3); font-weight:500; letter-spacing:-.03em; color:var(--cg-fg-2); }

/* ---------- 4. Mise en page ---------------------------------------------- */
.cg-wrap{ width:100%; max-width:1180px; margin-inline:auto;
  padding-inline:max(var(--cg-gutter), var(--cg-safe-l)) max(var(--cg-gutter), var(--cg-safe-r)); }
.cg-section{ padding-block:clamp(56px, 9vw, 120px); }
.cg-vstack{ display:flex; flex-direction:column; gap:var(--gap, 16px); }
.cg-hstack{ display:flex; align-items:center; gap:var(--gap, 12px); flex-wrap:wrap; }
.cg-grid{ display:grid; gap:var(--gap, 16px); grid-template-columns:repeat(var(--cols, 1), minmax(0, 1fr)); }
.cg-grid-u{ /* grille des univers : 2 col. téléphone, 3 col. tablette, 4 col. ordinateur */
  display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:640px){ .cg-grid-u{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .cg-grid-u{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cg-safe-b{ padding-bottom:calc(16px + var(--cg-safe-b)); }
.cg-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cg-skip{ position:fixed; left:12px; top:12px; z-index:100; transform:translateY(-200%);
  background:#fff; color:#0A0A0A; padding:10px 16px; border-radius:var(--cg-r-pill); font-weight:600; }
.cg-skip:focus{ transform:none; }
/* Carte cliquable en entier qui garde overflow:hidden : un bouton étiré la couvre.
   <article class="cg-card"> ... <button class="cg-hit" aria-label="jouer pokémon"></button></article>
   Le contour de focus est rentré de 4 px, sinon l'overflow de la carte le rogne. */
.cg-hit{ position:absolute; inset:0; z-index:1; margin:0; padding:0; border:0; border-radius:inherit; background:transparent;
  color:inherit; font-size:0; cursor:pointer; }
.cg-hit:focus-visible{ outline-offset:-4px; }

/* ---------- 5. Icônes (sprite /brand/icons.svg, Phosphor) --------------- */
.cg-ico{ width:var(--s, 20px); height:var(--s, 20px); flex:none; fill:currentColor; }

/* ---------- 6. Logo ------------------------------------------------------- */
.cg-logo{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--cg-fg); }
.cg-logo img{ height:var(--h, 28px); width:auto; }

/* ---------- 7. Navigation ------------------------------------------------- */
.cg-nav{ position:sticky; top:0; z-index:40; padding-top:var(--cg-safe-t);
  background:rgba(10,10,10,0); transition:background-color var(--cg-d-bg) ease, box-shadow var(--cg-d-bg) ease; }
.cg-nav.is-scrolled{ background:rgba(10,10,10,.72); box-shadow:0 1px 0 var(--cg-line);
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); }
.cg-nav__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.cg-nav__links{ display:none; align-items:center; gap:4px; }
@media (min-width:900px){ .cg-nav__links{ display:flex; } }
.cg-nav__link{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:var(--cg-r-pill);
  font-size:14px; font-weight:500; color:var(--cg-fg-2); transition:color var(--cg-d-bg) ease, background-color var(--cg-d-bg) ease; }
.cg-nav__link[aria-current="page"]{ color:var(--cg-fg); }
.cg-nav__end{ display:flex; align-items:center; gap:8px; }
.cg-nav--enter{ animation:cg-nav-in var(--cg-d-nav) var(--cg-ease-nav) both; }

/* ---------- 8. Boutons ---------------------------------------------------- */
/* Pilule : blanche (action principale, UNE par écran), fantôme (secondaire), encre (sur papier) */
.cg-btn{ --bh:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); min-width:44px; padding:0 22px; border:0; border-radius:var(--cg-r-pill);
  font-size:var(--cg-fs-btn); font-weight:600; letter-spacing:-.01em; white-space:nowrap; text-decoration:none;
  -webkit-user-select:none; user-select:none;
  transition:background-color var(--cg-d-bg) ease, color var(--cg-d-bg) ease, transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-btn:active{ transform:scale(var(--cg-press)); transition-duration:var(--cg-d-bg), var(--cg-d-bg), .1s; }
.cg-btn--white{ background:#FFFFFF; color:#0A0A0A; }
.cg-btn--ghost{ background:rgba(255,255,255,.08); color:var(--cg-fg); box-shadow:inset 0 0 0 1px var(--cg-line); }
.cg-btn--ink{ background:#0A0A0A; color:#FFFFFF; }
.cg-btn--u{ background:var(--u); color:var(--u-text); }
.cg-btn--lg{ --bh:56px; padding:0 28px; font-size:17px; }
.cg-btn--sm{ --bh:44px; padding:0 16px; font-size:14px; }
.cg-btn--block{ display:flex; width:100%; }
.cg-btn[disabled], .cg-btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.cg-btn__arrow{ width:18px; height:18px; fill:currentColor; transition:transform var(--cg-d-btn) var(--cg-ease-out); }
@media (hover:hover) and (pointer:fine){
  .cg-btn--white:hover{ background:#E6E6E6; }
  .cg-btn--ghost:hover{ background:rgba(255,255,255,.14); }
  .cg-btn--ink:hover{ background:#262626; }
  .cg-btn:hover .cg-btn__arrow{ transform:translateX(3px); }
  .cg-nav__link:hover{ color:var(--cg-fg); background:rgba(255,255,255,.06); }
}

/* Bouton rond blanc (icône seule : aria-label obligatoire) */
.cg-round{ --rs:56px; display:inline-grid; place-items:center; width:var(--rs); height:var(--rs); flex:none;
  border:0; border-radius:50%; background:#FFFFFF; color:#0A0A0A; padding:0;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  transition:background-color var(--cg-d-bg) ease, transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-round .cg-ico{ --s:calc(var(--rs) * .4); }
.cg-round:active{ transform:scale(.94); transition-duration:var(--cg-d-bg), .1s; }
.cg-round--sm{ --rs:44px; } .cg-round--lg{ --rs:72px; }
.cg-round--dark{ background:rgba(255,255,255,.08); color:var(--cg-fg); box-shadow:inset 0 0 0 1px var(--cg-line); }
@media (hover:hover) and (pointer:fine){
  .cg-round:hover{ background:#E6E6E6; }
  .cg-round--dark:hover{ background:rgba(255,255,255,.14); }
}
/* Souris : pilules et boutons ronds se soulèvent de 2 px au survol et s'enfoncent quand même à l'appui.
   :where() garde la spécificité basse : une classe locale (.is-pressed…) l'emporte toujours. */
@media (hover:hover) and (pointer:fine){
  .cg-btn:where(:not([disabled])):hover, .cg-round:hover{ transform:translateY(-2px); }
  .cg-btn:where(:not([disabled])):hover:active{ transform:scale(var(--cg-press)); }
  .cg-round:hover:active{ transform:scale(.94); }
}
/* Libellé sous un bouton rond (8 à 80 ans : une icône seule ne suffit pas) */
.cg-round-lab{ display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  font-size:var(--cg-fs-small); font-weight:500; color:var(--cg-fg-2); }

/* Bouton anneau arc-en-ciel : réservé au Défi du jour */
.cg-ring{ --rs:72px; --rw:4px; position:relative; display:inline-grid; place-items:center;
  width:var(--rs); height:var(--rs); flex:none; border:0; padding:0; border-radius:50%;
  background:transparent; color:#0A0A0A; isolation:isolate;
  transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-ring::before{ /* l'anneau */
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-2;
  background:conic-gradient(from 0deg, var(--cg-spectrum));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + .5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + .5px));
  animation:cg-spin 9s linear infinite; animation-play-state:paused; }
.cg-ring::after{ /* le cœur blanc, séparé de l'anneau par un liseré noir */
  content:""; position:absolute; inset:calc(var(--rw) + 4px); border-radius:50%; background:#FFFFFF; z-index:-1;
  transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-ring .cg-ico{ --s:calc(var(--rs) * .34); }
.cg-ring:active{ transform:scale(.94); }
.cg-ring--lg{ --rs:96px; --rw:5px; }
.cg-ring--sm{ --rs:52px; --rw:3px; }
.cg-ring.is-done::after{ background:#141414; } .cg-ring.is-done{ color:var(--cg-fg); } /* défi joué */
/* L'anneau tourne aussi au survol du bouton libellé qui le contient : <a class="cg-ring-host"><span class="cg-ring">…</span> défi du jour</a> */
@media (hover:hover) and (pointer:fine){
  .cg-ring:hover::before, .cg-ring-host:hover .cg-ring::before{ animation-play-state:running; }
  .cg-ring:hover::after, .cg-ring-host:hover .cg-ring::after{ transform:scale(.96); }
}
.cg-ring-host:active .cg-ring{ transform:scale(.94); }
.cg-ring--live::before{ animation-play-state:running; } /* tourne en continu (écran Défi seulement) */
/* Défi joué : l'anneau s'arrête où il est, même en --live ou au survol */
.cg-ring.is-done::before, .cg-ring-host:hover .cg-ring.is-done::before{ animation-play-state:paused; }

/* Interrupteur : <label class="cg-toggle"><input type="checkbox" role="switch"><span class="cg-toggle__track"></span>Son</label> */
.cg-toggle{ display:inline-flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; font-weight:500; }
.cg-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.cg-toggle__track{ position:relative; width:52px; height:32px; flex:none; border-radius:var(--cg-r-pill);
  background:var(--cg-raised-3); box-shadow:inset 0 0 0 1px var(--cg-line-2);
  transition:background-color var(--cg-d-bg) ease; }
.cg-toggle__track::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform var(--cg-d-btn) var(--cg-ease-out), background-color var(--cg-d-bg) ease; }
.cg-toggle input:checked + .cg-toggle__track{ background:#FFFFFF; }
.cg-toggle input:checked + .cg-toggle__track::after{ transform:translateX(20px); background:#0A0A0A; }
.cg-toggle input:focus-visible + .cg-toggle__track{ outline:3px solid #FFFFFF; outline-offset:3px; }

/* Sélecteur segmenté (rythme Zen / 20 s / 10 s) :
   <div class="cg-seg" role="radiogroup" style="--n:3;--i:1"> 3 x <button role="radio" class="cg-seg__opt"> + <span class="cg-seg__thumb"> */
.cg-seg{ --n:3; --i:0; position:relative; display:grid; grid-template-columns:repeat(var(--n), 1fr);
  padding:4px; border-radius:var(--cg-r-pill); background:var(--cg-raised-2); box-shadow:inset 0 0 0 1px var(--cg-line);
  isolation:isolate; }
.cg-seg__thumb{ position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n));
  border-radius:var(--cg-r-pill); background:#FFFFFF;
  transform:translateX(calc(var(--i) * 100%)); transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-seg__opt{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 12px;
  border:0; background:none; border-radius:var(--cg-r-pill); font-size:14px; font-weight:600; color:var(--cg-fg-2);
  transition:color var(--cg-d-bg) ease; }
.cg-seg__opt[aria-checked="true"]{ color:#0A0A0A; }

/* Petite étiquette (« ta couleur », « série 4 j », compteur) */
.cg-tag{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--cg-r-pill);
  background:rgba(255,255,255,.08); color:var(--cg-fg); font-size:var(--cg-fs-micro); font-weight:600;
  letter-spacing:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cg-tag .cg-ico{ --s:14px; }
.cg-tag--gold{ color:var(--cg-gold); }
.cg-tag--paper{ background:#FFFFFF; color:#0A0A0A; }
/* Verre sombre : lisible même posé sur le haut presque blanc du carré (blanc sur ce fond ≥ 8:1) */
.cg-tag--glass{ background:rgba(10,10,10,.74); color:#FFFFFF; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
/* Chiffre en gras PUIS mot (« <b>13</b> univers ») : une espace normale au lieu du gap de 6 px */
.cg-tag:has(> b){ gap:0; }
.cg-tag:has(> b) > .cg-ico{ margin-right:6px; }
.cg-tag > b{ margin-right:.3em; }

/* ---------- 9. Cartes ------------------------------------------------------ */
/* Carte noire élevée (accueil, univers, défi) */
.cg-card{ position:relative; border-radius:var(--cg-r-xl); background:var(--cg-raised); box-shadow:var(--cg-e1);
  padding:clamp(20px, 3vw, 32px); overflow:hidden; }
.cg-card--hero{ box-shadow:var(--cg-e2); padding:clamp(24px, 4.5vw, 56px); }
.cg-card--flat{ background:var(--cg-raised-2); box-shadow:inset 0 0 0 1px var(--cg-line); border-radius:var(--cg-r-lg); }
.cg-card--press{ transition:transform var(--cg-d-btn) var(--cg-ease-out), box-shadow var(--cg-d-bg) ease; }
.cg-card--press:active{ transform:scale(.98); }
@media (hover:hover) and (pointer:fine){
  .cg-card--press:hover{ box-shadow:var(--cg-e1), inset 0 0 0 1px var(--cg-line-2); }
}
/* Lueur d'univers derrière une carte ou une tuile */
.cg-glow{ position:absolute; inset:auto; width:60%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--u) 38%, transparent), transparent);
  opacity:.55; }

/* Carte blanche de jeu : LA zone où l'on juge (blanc pur, rien de coloré à moins de 24 px) */
.cg-paper{ position:relative; isolation:isolate; border-radius:var(--cg-r-xl); background:var(--cg-paper); color:var(--cg-ink);
  box-shadow:var(--cg-e-paper); }
.cg-stage{ position:relative; display:grid; place-items:center; padding:24px; background:#FFFFFF; border-radius:inherit; }
.cg-stage > img, .cg-stage > svg, .cg-stage > canvas{ max-width:100%; max-height:100%; }
/* « La lumière s'allume » : la carte part noire et s'allume en blanc
   <div class="cg-paper cg-lightable"> ... </div>  puis  el.classList.add('is-lit') */
.cg-lightable{ position:relative; isolation:isolate; background:var(--cg-raised); box-shadow:var(--cg-e1); }
.cg-lightable::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#FFFFFF; opacity:0; }
.cg-lightable::after{ content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; opacity:0; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 96px 4px rgba(255,255,255,.12); }
.cg-lightable > *{ opacity:0; }
.cg-lightable.is-lit::before{ animation:cg-light-on .52s linear forwards; }
.cg-lightable.is-lit::after{ animation:cg-fade 1.1s var(--cg-ease-soft) .12s forwards; }
.cg-lightable.is-lit > *{ animation:cg-rise-sm .34s var(--cg-ease-soft) .3s forwards; }
.cg-lightable.is-lit{ background:var(--cg-paper); transition:background-color 0s linear .5s; } /* plus de liseré sombre au bord une fois allumée */
/* La carte arrive avant de s'allumer : monte de 48 px et grandit de 90 à 100 % (0,9 s, courbe des piles) */
.cg-open{ animation:cg-open var(--cg-d-stack) var(--cg-ease-stack) both; }

/* Mini-carte (écran du jeu en miniature, dans les piles) */
.cg-mini{ position:relative; overflow:hidden; border-radius:var(--cg-r-lg); background:var(--cg-raised-2);
  box-shadow:inset 0 0 0 1px var(--cg-line-2), var(--cg-e-float); aspect-ratio:3 / 4; }
.cg-mini--paper{ background:#FFFFFF; color:#0A0A0A; box-shadow:var(--cg-e-float); }

/* Pile de mini-cartes inclinées + mélange (dialed : transform .9 s cubic-bezier(.24,1.1,.28,1))
   <div class="cg-stack"> 3 x <div class="cg-mini" data-pos="0|1|2"> </div>  ; mélange = faire tourner data-pos */
/* --stack-ar : proportion de la pile (plus basse dans une carte : --stack-ar:1 / .84).
   Nom dédié : --ar est déjà hérité par cg-square et cg-split. */
.cg-stack{ position:relative; width:var(--w, 280px); aspect-ratio:var(--stack-ar, 1 / 1); }
.cg-stack > *{ position:absolute; left:50%; top:50%; width:58%;
  transform:translate(-50%, -50%) translate(var(--x, 0%), var(--y, 0%)) rotate(var(--r, 0deg));
  transition:transform var(--cg-d-stack) var(--cg-ease-stack); z-index:var(--z, 1); will-change:transform; }
.cg-stack > [data-pos="0"]{ --x:-2%;  --y:2%;  --r:-4deg; --z:3; }
.cg-stack > [data-pos="1"]{ --x:34%;  --y:-6%; --r:7deg;  --z:2; }
.cg-stack > [data-pos="2"]{ --x:-34%; --y:-2%; --r:-11deg; --z:1; }
.cg-stack > [data-pos="3"]{ --x:0%;   --y:-14%; --r:2deg; --z:0; }
/* La pile s'écarte au survol d'elle-même ou de toute la carte qui la porte (.cg-stack-host) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cg-stack:hover > [data-pos="1"], .cg-stack-host:hover .cg-stack > [data-pos="1"]{ --x:40%; --r:10deg; }
  .cg-stack:hover > [data-pos="2"], .cg-stack-host:hover .cg-stack > [data-pos="2"]{ --x:-40%; --r:-14deg; }
}

/* Tuile d'univers squircle + glyphe :  <span class="cg-tile" data-u="pixar"><svg class="cg-ico"><use href="/brand/icons.svg?v=10#u-pixar"/></svg></span> */
.cg-tile{ --ts:48px; position:relative; display:inline-grid; place-items:center; width:var(--ts); height:var(--ts); flex:none;
  border-radius:var(--cg-r-tile); color:var(--u-on);
  background:linear-gradient(180deg, color-mix(in oklab, var(--u), #fff 14%), var(--u) 55%, color-mix(in oklab, var(--u), #000 10%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.08), var(--cg-halo); }
.cg-tile .cg-ico{ --s:calc(var(--ts) * .5); }
.cg-tile--sm{ --ts:36px; } .cg-tile--lg{ --ts:64px; } .cg-tile--xl{ --ts:96px; }
@supports (corner-shape:squircle){ .cg-tile{ border-radius:42%; corner-shape:squircle; } }

/* Carte d'univers (accueil de l'app et grilles) */
.cg-ucard{ position:relative; display:flex; flex-direction:column; gap:12px; min-height:132px; padding:16px;
  border-radius:var(--cg-r-lg); background:var(--cg-raised); box-shadow:var(--cg-e1); text-align:left; border:0;
  transition:transform var(--cg-d-btn) var(--cg-ease-out), box-shadow var(--cg-d-bg) ease; }
.cg-ucard:active{ transform:scale(.97); transition-duration:.1s; }
.cg-ucard__name{ font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--cg-fg); margin-top:auto; }
.cg-ucard__meta{ font-size:var(--cg-fs-micro); color:var(--cg-fg-3); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){
  .cg-ucard:hover{ box-shadow:var(--cg-e1), 0 0 0 1px color-mix(in oklab, var(--u) 45%, transparent), 0 20px 50px -20px color-mix(in oklab, var(--u) 55%, transparent); }
}

/* ---------- 10. Le grand carré de couleur (manche) ------------------------ */
/* Le carré ne rogne pas sa poignée : aux bords (rouge pur à x = 0) elle doit rester entière. */
.cg-square{ position:relative; width:100%; aspect-ratio:var(--ar, 4 / 3); border-radius:var(--cg-r-lg);
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.cg-square--fill{ aspect-ratio:auto; } /* remplit sa case dans une mise en page flex ou grid */
.cg-square > canvas, .cg-square__field{ position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; }
.cg-square::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--cg-line); }
/* Poignée : cercle blanc épais, liseré sombre pour se voir sur le blanc comme sur le noir.
   Elle suit le doigt 1:1 (style.transform), jamais de transition pendant le glisser. */
.cg-handle{ position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:4px solid #FFFFFF; box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.35);
  pointer-events:none; will-change:transform; }
.cg-handle.is-grabbed{ width:44px; height:44px; margin:-22px 0 0 -22px; } /* grossit sous le doigt (pas d'animation de taille) */

/* ---------- 11. Reveal : la carte se coupe en deux ------------------------ */
/* <div class="cg-split" style="--top:#..;--bot:#..;--top-on:#fff;--bot-on:#0A0A0A">
     <div class="cg-split__half cg-split__half--top">..</div><div class="cg-split__half cg-split__half--bot">..</div></div>
   puis el.classList.add('is-open') */
.cg-split{ position:relative; display:grid; grid-template-rows:1fr 1fr; gap:6px; border-radius:var(--cg-r-xl);
  aspect-ratio:var(--ar, 3 / 4); }
.cg-split--fill{ aspect-ratio:auto; height:100%; } /* prend exactement la place de la carte blanche qu'elle remplace */
.cg-split__half{ position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px; }
.cg-split__half::before{ content:""; position:absolute; inset:0; z-index:0; }
.cg-split__half > *{ position:relative; z-index:1; }
.cg-split__half--top{ color:var(--top-on, #fff); border-radius:var(--cg-r-xl) var(--cg-r-xl) 10px 10px; }
.cg-split__half--top::before{ background:var(--top); border-radius:inherit; transform-origin:50% 100%; }
.cg-split__half--bot{ color:var(--bot-on, #fff); border-radius:10px 10px var(--cg-r-xl) var(--cg-r-xl); }
.cg-split__half--bot::before{ background:var(--bot); border-radius:inherit; transform-origin:50% 0%; }
.cg-split:not(.is-open) .cg-split__half::before{ transform:scaleY(0); }
.cg-split:not(.is-open) .cg-split__half > *{ opacity:0; }
.cg-split.is-open .cg-split__half::before{ animation:cg-grow-y var(--cg-d-soft) var(--cg-ease-soft) both; }
.cg-split.is-open .cg-split__half--bot::before{ animation-delay:.12s; }
.cg-split.is-open .cg-split__half > *{ animation:cg-rise-sm .34s var(--cg-ease-soft) .38s both; }
.cg-split__lab{ display:flex; flex-direction:column; gap:2px; font-size:var(--cg-fs-small); font-weight:600; }
.cg-split__lab small{ font-size:var(--cg-fs-micro); font-weight:500; opacity:.82; font-variant-numeric:tabular-nums; }

/* ---------- 12. Barre d'onglets de l'app --------------------------------- */
/* <nav class="cg-tabbar" style="--n:4;--i:0"><span class="cg-tabbar__pill"></span> 4 x <a class="cg-tab" aria-current="page"> */
.cg-tabbar{ --n:4; --i:0; --tw:76px; position:fixed; z-index:30; left:50%; bottom:calc(12px + var(--cg-safe-b));
  display:grid; grid-template-columns:repeat(var(--n), var(--tw)); padding:6px; border-radius:var(--cg-r-pill);
  transform:translateX(-50%); isolation:isolate;
  background:rgba(28,28,28,.78); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--cg-line-2), 0 20px 40px -12px rgba(0,0,0,.85); }
.cg-tabbar__pill{ position:absolute; z-index:-1; top:6px; bottom:6px; left:6px; width:var(--tw); border-radius:var(--cg-r-pill);
  background:#FFFFFF; transform:translateX(calc(var(--i) * var(--tw))); transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:52px; border:0;
  background:none; border-radius:var(--cg-r-pill); font-size:var(--cg-fs-micro); font-weight:600; color:var(--cg-fg-3);
  transition:color var(--cg-d-bg) ease; }
.cg-tab .cg-ico{ --s:22px; }
.cg-tab[aria-current="page"]{ color:#0A0A0A; }
@media (min-width:1024px){ .cg-tabbar{ --tw:88px; } }

/* ---------- 13. Feuille du bas / fenêtre --------------------------------- */
/* <dialog class="cg-sheet"> ... </dialog> + showModal(). Téléphone : monte du bas. Ordinateur : carte centrée. */
.cg-sheet{ position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:none; max-height:92dvh; overflow:auto;
  border:0; padding:8px max(20px, var(--cg-safe-l)) calc(24px + var(--cg-safe-b)) max(20px, var(--cg-safe-r));
  border-radius:var(--cg-r-xl) var(--cg-r-xl) 0 0; background:var(--cg-raised); color:var(--cg-fg);
  box-shadow:inset 0 1px 0 var(--cg-line-2), 0 -30px 80px rgba(0,0,0,.6);
  transform:translateY(0); transition:transform var(--cg-d-sheet) var(--cg-ease-sheet), opacity .2s ease,
    overlay var(--cg-d-sheet) allow-discrete, display var(--cg-d-sheet) allow-discrete; }
.cg-sheet:not([open]):not(.is-open){ transform:translateY(100%); }
@starting-style{ .cg-sheet[open]{ transform:translateY(100%); } }
.cg-sheet::backdrop{ background:rgba(0,0,0,.6); opacity:1; transition:opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
@starting-style{ .cg-sheet[open]::backdrop{ opacity:0; } }
.cg-sheet__handle{ display:block; width:36px; height:5px; margin:4px auto 16px; border-radius:3px; background:var(--cg-line-3); }
.cg-sheet__title{ font-size:var(--cg-fs-h3); font-weight:500; letter-spacing:-.03em; margin-bottom:8px; }
.cg-sheet.is-drag{ transition:none !important; } /* fermeture au glissé : la feuille suit le doigt 1:1 */
/* NB : une .cg-sheet passée en display:flex doit redire :not([open]){display:none}, sinon elle reste affichée fermée */
@media (min-width:768px){
  .cg-sheet{ inset:50% auto auto 50%; width:min(480px, calc(100% - 32px)); border-radius:var(--cg-r-xl); padding:28px;
    box-shadow:var(--cg-e2), var(--cg-e-float); transform:translate(-50%, -50%); }
  .cg-sheet:not([open]):not(.is-open){ transform:translate(-50%, -50%) scale(.96); opacity:0; }
  @starting-style{ .cg-sheet[open]{ transform:translate(-50%, -50%) scale(.96); opacity:0; } }
  .cg-sheet__handle{ display:none; }
}
.cg-scrim{ position:fixed; inset:0; z-index:49; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cg-scrim.is-open{ opacity:1; pointer-events:auto; }

/* Champ de formulaire */
.cg-field{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:500; color:var(--cg-fg-2); } /* libellés : 14 px minimum */
.cg-field__hint{ font-size:var(--cg-fs-micro); font-weight:400; color:var(--cg-fg-3); }
.cg-field:has(.cg-field__err:not([hidden])) .cg-field__hint{ display:none; } /* l'erreur remplace l'aide, elles ne s'empilent pas */
.cg-input{ height:52px; padding:0 16px; border:0; border-radius:var(--cg-r-md); background:var(--cg-raised-2); color:var(--cg-fg);
  box-shadow:inset 0 0 0 1px var(--cg-line-2); font-size:16px; }
.cg-input::placeholder{ color:var(--cg-fg-3); }
.cg-input:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px #FFFFFF; }
.cg-input[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--cg-err); }
.cg-field__err{ color:var(--cg-err); font-size:var(--cg-fs-small); }

/* Message bref (un seul à la fois, role="status") */
.cg-toast{ position:fixed; z-index:60; left:50%; top:calc(12px + var(--cg-safe-t)); display:inline-flex; align-items:center; gap:10px;
  max-width:calc(100% - 32px); min-height:44px; padding:10px 18px; border-radius:var(--cg-r-pill);
  background:var(--cg-raised-2); color:var(--cg-fg); font-size:14px; font-weight:500; box-shadow:var(--cg-e2), var(--cg-e-float);
  transform:translate(-50%, 0); transition:transform var(--cg-d-btn) var(--cg-ease-out), opacity var(--cg-d-bg) ease; }
.cg-toast:not(.is-on){ transform:translate(-50%, calc(-100% - 24px)); opacity:0; pointer-events:none; }

/* Liste (classement) */
.cg-row{ display:grid; grid-template-columns:36px 40px 1fr auto; align-items:center; gap:12px; min-height:60px; padding:10px 14px;
  border-radius:var(--cg-r-md); background:var(--cg-raised); box-shadow:inset 0 0 0 1px var(--cg-line); font-variant-numeric:tabular-nums; }
.cg-row__rank{ display:grid; place-items:center; font-weight:600; color:var(--cg-fg-3); text-align:center; } /* la couronne du 1er reste centrée */
.cg-row__score{ font-weight:600; }
/* Nom sur deux lignes (« ta place si tu te connectes ») : <span class="cg-row__name"><b>Renard-4821</b><small>…</small></span> */
.cg-row__name{ display:flex; flex-direction:column; min-width:0; }
.cg-row__name > b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.cg-row__name > small{ font-size:var(--cg-fs-micro); color:var(--cg-fg-3); }
.cg-row--me{ background:#FFFFFF; color:#0A0A0A; box-shadow:0 12px 40px -12px rgba(255,255,255,.25); }
.cg-row--me .cg-row__rank, .cg-row--me .cg-row__name > small{ color:var(--cg-ink-2); }
.cg-avatar{ --as:40px; display:grid; place-items:center; width:var(--as); height:var(--as); border-radius:50%; overflow:hidden;
  background:var(--u); color:var(--u-on); font-weight:600; font-size:calc(var(--as) * .42); }
.cg-avatar img{ width:100%; height:100%; object-fit:cover; }
/* Avatar renard : le renard peint sur un disque blanc (jamais nu sur le noir) */
.cg-avatar.is-fox{ position:relative; background:#FFFFFF; }
.cg-avatar.is-fox img{ position:absolute; left:8%; bottom:-6%; width:84%; height:auto; object-fit:contain; }

/* Renard peint : contour noir invisible sur le noir, donc toujours dans un médaillon blanc
   (le buste est coupé par le cercle) ou devant un halo blanc. Jamais posé nu sur le noir. */
.cg-fox{ --fs:96px; position:relative; display:inline-block; width:var(--fs); height:var(--fs); flex:none;
  border-radius:50%; background:#FFFFFF; overflow:hidden;
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 18px 40px -12px rgba(0,0,0,.7); }
.cg-fox img{ position:absolute; left:6%; bottom:-1%; width:88%; height:auto; max-width:none; }
.cg-fox--halo{ background:transparent; overflow:visible; box-shadow:none; }
.cg-fox--halo::before{ content:""; position:absolute; inset:-20%; border-radius:50%;
  background:radial-gradient(closest-side, #FFFFFF 54%, rgba(255,255,255,.55) 72%, rgba(255,255,255,0)); }
.cg-fox--halo img{ left:0; bottom:0; width:100%; }
.cg-fox--float{ animation:cg-float 3.2s ease-in-out infinite alternate; }
.cg-fox--calm{ animation:cg-fade .4s ease both; } /* entrée sobre (fin de partie modeste), à côté de cg-bounce-in */
/* (cg-fox et cg-avatar.is-fox : obsolètes depuis la bande, v11. Gardés le temps que les pages migrent.) */

/* ---------- La bande : 4 peluches 3D, le casting de la marque (DA § 11) ----------
   Un perso :
     <span class="cg-bande" data-perso="tanuki-bleu" style="--s:120px">
       <span class="cg-bande__fig"><img class="cg-bande__img" src="/bande/tanuki-bleu/neutre-320.webp?v=11"
         width="120" height="120" alt="" decoding="async" loading="lazy"></span>
     </span>
   --s = côté du canevas carré affiché (webp 320 jusqu'à 160 px, 640 jusqu'à 320 px, 1024 au-delà ; width/height = --s).
   La boîte de mise en page épouse la silhouette (union des 3 expressions, mesurée sur les originaux de 1254 px) :
   son bord bas = les pieds. align-items:flex-end (ou end) aligne donc les pieds sur une même ligne de base.
   Les marges transparentes du fichier restent là (débordement visible, le fichier n'est jamais rogné) : les 3 expressions
   se superposent exactement. Seule exception voulue : le héros de la landing, où le bord bas du héros coupe la bande
   à mi-corps (tête et haut du corps visibles). Sur le noir, sans médaillon ni halo. Jamais sur la carte blanche ni sur les
   aplats du reveal, ni à moins de 24 px. On n'anime que transform (dont scale) et opacity. */
[data-perso="tanuki-bleu"]{ --bl:.1451; --br:.1467; --bt:.1284; --bf:.0463; --ay:.40; --fur:#0F80F8; }
[data-perso="chat-lime"]  { --bl:.1738; --br:.1762; --bt:.1172; --bf:.0494; --ay:.40; --fur:#B5D857; }
[data-perso="shiba-jaune"]{ --bl:.1874; --br:.1898; --bt:.0989; --bf:.0606; --ay:.37; --fur:#F7BA39; }
[data-perso="lapin-rose"] { --bl:.1874; --br:.1874; --bt:.1005; --bf:.0606; --ay:.42; --fur:#F82AB5; }
.cg-bande{ position:relative; display:inline-block; flex:none; vertical-align:bottom;
  width:calc(var(--s, 96px) * (1 - var(--bl, .16) - var(--br, .16)));
  height:calc(var(--s, 96px) * (1 - var(--bt, .11) - var(--bf, .05)));
  transform-origin:50% 100%; pointer-events:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.cg-bande__fig{ position:absolute; left:calc(var(--s, 96px) * var(--bl, .16) * -1); top:calc(var(--s, 96px) * var(--bt, .11) * -1);
  width:var(--s, 96px); height:var(--s, 96px); transform-origin:50% calc(100% - var(--s, 96px) * var(--bf, .05)); }
.cg-bande__img{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; -webkit-user-drag:none; }
/* Changement d'expression (bande.js, setMood) : la nouvelle image se pose au-dessus et apparaît en 120 ms,
   l'ancienne reste dessous puis disparaît ; la figure fait un petit rebond (scaleY .96 → 1, courbe pop). */
.cg-bande__img.is-in{ animation:cg-fade .12s linear both; }
.cg-bande__fig.is-swap{ animation:cg-bande-squash var(--cg-d-pop) var(--cg-ease-pop); }
/* Entrées : pop (apparition, .3 s) ou rebond (célébration, .72 s), depuis les pieds. --i : rang dans la cascade.
   rise (v12) : montée depuis le bas, 60 ms d'écart (héros de la landing, persos coupés par le bord bas) ;
   --cg-bande-rise = distance (40 % de la boîte par défaut). Avec CGBande.react, le saut d'arrivée part à la fin de la montée. */
.cg-bande--pop{ animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger) + var(--cg-bande-delay, 0ms)); }
.cg-bande--bounce{ animation:cg-bounce var(--cg-d-bounce) var(--cg-ease-bounce) both; animation-delay:var(--cg-bande-delay, 0ms); }
.cg-bande--rise, .cg-bande-group--rise > .cg-bande{
  animation:cg-bande-rise var(--cg-d-soft) var(--cg-ease-out) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger) + var(--cg-bande-delay, 0ms)); }
/* Respiration au repos (seulement là où la DA autorise une boucle, à partir de 72 px) : scale 1 → 1,015 en 3,2 s.
   Sur la figure, avec la propriété scale : elle se cumule avec l'entrée et le rebond sans les écraser. */
.cg-bande--breathe .cg-bande__fig, .cg-bande-group--breathe .cg-bande__fig{
  animation:cg-bande-breathe 3.2s ease-in-out infinite alternate; animation-delay:calc(var(--i, 0) * -.8s); }
.cg-bande--breathe .cg-bande__fig.is-swap, .cg-bande-group--breathe .cg-bande__fig.is-swap{
  animation:cg-bande-breathe 3.2s ease-in-out infinite alternate, cg-bande-squash var(--cg-d-pop) var(--cg-ease-pop);
  animation-delay:calc(var(--i, 0) * -.8s), 0s; }
/* Apparition à l'entrée dans l'écran (bande.js pose .is-in une fois, comme cg-reveal).
   Masqué seulement si le JavaScript tourne : sans script, la bande reste visible. */
@media (scripting:enabled){
  .cg-bande--reveal:not(.is-in), .cg-bande-group--reveal:not(.is-in) > .cg-bande{ opacity:0; }
}
.cg-bande--reveal.is-in, .cg-bande-group--reveal.is-in > .cg-bande{
  animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger) + var(--cg-bande-delay, 0ms)); }
.cg-bande-group--pop > .cg-bande{
  animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger) + var(--cg-bande-delay, 0ms)); }

/* Groupe : toujours dans l'ordre bleu, vert, jaune, rose ; pieds sur une même ligne ; les silhouettes
   se chevauchent de 4 % de --s ; les deux du milieu passent devant. Largeur ≈ 2,49 × --s.
   <div class="cg-bande-group" style="--s:120px" role="img" aria-label="la bande : …"> 4 × .cg-bande (--i 0 à 3) </div> */
.cg-bande-group{ display:inline-flex; align-items:flex-end; flex:none; vertical-align:bottom; }
.cg-bande-group > .cg-bande + .cg-bande{ margin-left:calc(var(--s, 96px) * -.04); }
.cg-bande-group > .cg-bande:nth-child(2), .cg-bande-group > .cg-bande:nth-child(3){ z-index:1; }

/* Avatar : le buste du perso dans le disque, sur un noir teinté de sa fourrure (jamais de disque blanc).
   <span class="cg-avatar cg-avatar--bande" data-perso="chat-lime" style="--as:40px"><img src="…/neutre-320.webp" alt=""></span> */
.cg-avatar--bande{ position:relative; background:color-mix(in oklab, var(--fur, #262626) 20%, #0A0A0A);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--fur, #FFFFFF) 32%, transparent); }
.cg-avatar--bande img{ position:absolute; left:50%; top:50%; width:calc(var(--as) * 1.34); height:calc(var(--as) * 1.34); max-width:none;
  object-fit:fill; transform:translate(-50%, calc(var(--ay, .4) * -100%)); pointer-events:none; -webkit-user-drag:none; }

/* Choix d'avatar : le perso debout dans un bouton noir. Au survol c'est le BOUTON qui se soulève.
   <button class="cg-bande-pick" type="button" role="radio" aria-checked="false" aria-label="le tanuki bleu"> .cg-bande </button> */
.cg-bande-pick{ --pk:88px; position:relative; display:inline-grid; place-items:end center; width:var(--pk); height:calc(var(--pk) * 1.12);
  padding:0 0 calc(var(--pk) * .1); border:0; border-radius:var(--cg-r-lg); background:var(--cg-raised-2); color:inherit; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--cg-line); -webkit-tap-highlight-color:transparent;
  transition:transform var(--cg-d-btn) var(--cg-ease-out), box-shadow var(--cg-d-bg) ease, background-color var(--cg-d-bg) ease; }
.cg-bande-pick .cg-bande{ --s:calc(var(--pk) * .84); }
.cg-bande-pick[aria-checked="true"], .cg-bande-pick[aria-pressed="true"]{ box-shadow:inset 0 0 0 3px #FFFFFF; background:var(--cg-raised); }
@media (hover:hover) and (pointer:fine){
  .cg-bande-pick:hover{ transform:translateY(-3px); background:var(--cg-raised-3); }
}
.cg-bande-pick:active{ transform:scale(var(--cg-press)); transition-duration:.1s; }

/* Carte d'état avec un perso (vide, erreur, hors ligne) : <div class="cg-state"> .cg-bande.cg-state__bande + p + bouton </div> */
.cg-state__bande{ --s:88px; margin:4px 0 6px; }
@media (min-width:768px){ .cg-state__bande{ --s:104px; } }

@keyframes cg-bande-breathe{ from{ scale:1; } to{ scale:1.015; } }
@keyframes cg-bande-squash{ from{ transform:scaleY(.96); } to{ transform:none; } }
@keyframes cg-bande-rise{ from{ transform:translateY(var(--cg-bande-rise, 40%)); opacity:0; } 35%{ opacity:1; } to{ transform:none; opacity:1; } }

/* ---------- La bande vivante (v12, DA § 11.5 bis) ----------
   Au survol (souris), au tap (tactile) et à l'arrivée dans la vue, le perso passe joyeux et fait 2 petits sauts :
   on se tasse, on s'étire en montant, on s'écrase à l'atterrissage, un 2e saut plus petit, puis le ressort
   cubic-bezier(.28,1.5,.4,1) le pose. 700 ms, transform seulement, depuis les pieds. bande.js (CGBande.react,
   hop, hopWave) pose .cg-hop sur .cg-bande__fig (ou sur une image seule) et le retire à la fin.
   Hauteur : en % de la figure (suit la taille du perso) ; --cg-hop-k multiplie (1,35 sous .cg-bande--happy-default). */
.cg-hop, .cg-bande__fig.cg-hop{ animation:cg-hop var(--cg-d-hop, .7s) linear; }
.cg-hop:not(.cg-bande__fig){ transform-origin:50% 95%; }   /* image seule : les pieds sont à 95 % du canevas */
.cg-bande--breathe .cg-bande__fig.cg-hop, .cg-bande-group--breathe .cg-bande__fig.cg-hop{
  animation:cg-bande-breathe 3.2s ease-in-out infinite alternate, cg-hop var(--cg-d-hop, .7s) linear;
  animation-delay:calc(var(--i, 0) * -.8s), 0s; }
/* Contextes sociaux et de victoire (défier un ami, défi réussi, fin de partie réussie, final de la landing) :
   joyeux par défaut (react() prend « joyeux » pour base) et sauts plus marqués. Sur le perso ou sur son conteneur. */
.cg-bande--happy-default{ --cg-hop-k:1.35; }
/* Perso réactif : il reçoit les pointeurs sur sa silhouette seulement (ovale arrondi de la boîte, jamais les marges
   transparentes du fichier), sans gêner les boutons voisins. La boîte et l'image restent pointer-events:none. */
.cg-bande--react{ -webkit-tap-highlight-color:transparent; }
.cg-bande.cg-bande--react::before{ content:""; position:absolute; inset:3% 4% 0; pointer-events:auto; cursor:pointer;
  border-radius:48% 48% 40% 40% / 44% 44% 30% 30%; }
img.cg-bande--react{ pointer-events:auto; cursor:pointer; -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; }
@keyframes cg-hop{
  0%   { transform:none;                                                                    animation-timing-function:cubic-bezier(.33,0,.4,1); }
  9%   { transform:scale(1.06, .92);                                                        animation-timing-function:cubic-bezier(.2,.8,.4,1); }   /* on se tasse */
  20%  { transform:translateY(calc(var(--cg-hop-k, 1) * -9%))  scale(.94, 1.08);            animation-timing-function:cubic-bezier(.25,.6,.45,1); } /* décolle, étiré */
  30%  { transform:translateY(calc(var(--cg-hop-k, 1) * -13%)) scale(.99, 1.01);            animation-timing-function:cubic-bezier(.55,0,.85,.45); }/* en haut */
  43%  { transform:scale(1.09, .89);                                                        animation-timing-function:cubic-bezier(.2,.8,.4,1); }   /* atterrit, écrasé */
  52%  { transform:translateY(calc(var(--cg-hop-k, 1) * -4%))  scale(.96, 1.05);            animation-timing-function:cubic-bezier(.25,.6,.45,1); } /* 2e saut */
  60%  { transform:translateY(calc(var(--cg-hop-k, 1) * -6%))  scale(1, 1);                 animation-timing-function:cubic-bezier(.55,0,.85,.45); }
  70%  { transform:scale(1.05, .94);                                                        animation-timing-function:cubic-bezier(.28,1.5,.4,1); } /* atterrit, puis le ressort */
  100% { transform:none; }
}

/* États : chargement, vide, hors ligne, erreur (DA § 13.13) */
/* Silhouette qui respire (opacité .5 ↔ .85 en 1,2 s ; fixe en mouvement réduit). La mise en page vient de la page. */
.cg-skel{ border-radius:var(--cg-r-md); background:var(--cg-raised); box-shadow:inset 0 0 0 1px var(--cg-line); list-style:none;
  animation:cg-breathe 1.2s ease-in-out infinite alternate; animation-delay:calc(var(--i, 0) * -180ms); }
.cg-skel i{ display:block; height:12px; border-radius:6px; background:var(--cg-raised-3); }
/* Carte d'état : <div class="cg-state"><span class="cg-fox cg-state__fox">…</span><p class="cg-state__p">…</p><button class="cg-btn cg-btn--white">réessayer</button></div> */
.cg-state{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 24px 32px; border-radius:var(--cg-r-xl);
  background:var(--cg-raised); box-shadow:var(--cg-e1); text-align:center; animation:cg-rise var(--cg-d-soft) var(--cg-ease-soft) both; }
.cg-state__fox{ --fs:72px; margin-bottom:2px; }
.cg-state__tag{ color:var(--cg-fg-2); }
.cg-state__p{ max-width:26ch; font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-.02em; text-wrap:balance; }
.cg-state .cg-btn{ margin-top:6px; }

/* Étoiles (s'allument quand le score franchit 40, 65, 85 %) */
.cg-stars{ display:inline-flex; gap:6px; }
.cg-star{ --ss:28px; width:var(--ss); height:var(--ss); fill:var(--cg-fg-4); transition:fill var(--cg-d-bg) ease; }
.cg-star.is-on{ fill:var(--cg-gold); animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; }

/* Progression de partie : 10 segments */
.cg-progress{ display:grid; grid-template-columns:repeat(var(--n, 10), 1fr); gap:4px; }
.cg-progress > i{ height:4px; border-radius:2px; background:var(--cg-raised-3); }
.cg-progress > i.is-done{ background:#FFFFFF; }
.cg-progress > i.is-now{ background:var(--cg-fg-2); }
/* Chrono : une barre qui se vide (transform scaleX), or dans les 5 dernières secondes */
.cg-timer{ height:4px; border-radius:2px; background:var(--cg-raised-3); overflow:hidden; }
.cg-timer > i{ display:block; height:100%; background:#FFFFFF; transform-origin:0 50%; transform:scaleX(var(--t, 1)); }
.cg-timer.is-late > i{ background:var(--cg-gold); }

/* ---------- 14. Utilitaires de mouvement ------------------------------- */
.cg-press{ transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.cg-press:active{ transform:scale(var(--cg-press)); transition-duration:.1s; }
.cg-enter{ animation:cg-rise var(--cg-d-soft) var(--cg-ease-soft) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger)); }
.cg-pop-in{ animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; animation-delay:calc(var(--i, 0) * var(--cg-stagger)); }
.cg-bounce-in{ animation:cg-bounce var(--cg-d-bounce) var(--cg-ease-bounce) both; }
.cg-bump{ animation:cg-bump var(--cg-d-pop) var(--cg-ease-pop); }
/* Apparition au défilement, une seule fois : IntersectionObserver ajoute .is-in.
   Masqué seulement si le JavaScript tourne : sans script, le contenu reste visible.
   Sur un composant cliquable (cg-ucard, cg-btn…), poser cg-reveal sur le PARENT (le <li>) :
   sur l'élément lui-même, sa transition de transform écraserait l'appui à 0,97. */
@media (scripting:enabled){
  .cg-reveal{ opacity:0; transform:translateY(calc(var(--cg-rise) * 1.5)); }
}
.cg-reveal.is-in{ opacity:1; transform:none;
  transition:opacity var(--cg-d-soft) var(--cg-ease-soft), transform var(--cg-d-soft) var(--cg-ease-soft);
  transition-delay:calc(var(--i, 0) * var(--cg-stagger)); }
/* Sortie (écran qui s'en va) */
.cg-exit{ opacity:0; transform:scale(.98) translateY(6px); pointer-events:none;
  transition:opacity var(--cg-d-exit-o) linear, transform var(--cg-d-exit) var(--cg-ease-exit); }

@keyframes cg-rise{ from{ opacity:0; transform:translateY(var(--cg-rise)); } to{ opacity:1; transform:none; } }
@keyframes cg-rise-sm{ from{ opacity:0; transform:translateY(calc(var(--cg-rise) * .5)); } to{ opacity:1; transform:none; } }
@keyframes cg-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cg-pop{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
@keyframes cg-bounce{ from{ opacity:0; transform:translateY(calc(var(--cg-rise) * 2)) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes cg-bump{ 0%{ transform:none; } 40%{ transform:scale(1.14); } 100%{ transform:none; } }
@keyframes cg-grow-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes cg-spin{ to{ transform:rotate(1turn); } }
@keyframes cg-float{ from{ transform:translateY(0); } to{ transform:translateY(-6px); } }
@keyframes cg-nav-in{ from{ transform:translateY(-100%); opacity:0; } to{ transform:none; opacity:1; } }
/* tube qui s'allume : une seule petite hésitation, puis la pleine lumière (aucun clignotement répété) */
@keyframes cg-light-on{ 0%{ opacity:0; } 16%{ opacity:.18; } 30%{ opacity:.07; } 100%{ opacity:1; } }
@keyframes cg-open{ from{ transform:translateY(48px) scale(.9); opacity:0; } 24%{ opacity:1; } to{ transform:none; opacity:1; } }
@keyframes cg-breathe{ from{ opacity:.5; } to{ opacity:.85; } }

/* ---------- 15. Mouvement réduit : fondus de 150 ms, aucun déplacement ---- */
@media (prefers-reduced-motion:reduce){
  :root{ --cg-rise:0px; --cg-press:1; --cg-stagger:0ms; --cg-d-soft:.15s; --cg-d-pop:.15s; --cg-d-bounce:.15s; --cg-d-nav:.15s; }
  .cg *, .cg *::before, .cg *::after{ scroll-behavior:auto !important; }
  .cg-nav--enter{ animation:cg-fade .15s ease both; }
  .cg-btn, .cg-round, .cg-ring, .cg-ucard, .cg-card--press, .cg-press, .cg-seg__thumb, .cg-tabbar__pill,
  .cg-toggle__track::after, .cg-btn__arrow{ transition-duration:0s !important; }
  .cg-btn:active, .cg-round:active, .cg-ring:active, .cg-ucard:active, .cg-card--press:active, .cg-press:active{ transform:none; }
  .cg-ring::before, .cg-fox--float{ animation:none !important; }
  .cg-stack > *{ transition:opacity .15s ease; }
  .cg-sheet, .cg-sheet::backdrop{ transition:opacity .15s ease, overlay .15s allow-discrete, display .15s allow-discrete !important; }
  .cg-sheet:not([open]):not(.is-open){ transform:none; opacity:0; }
  @starting-style{ .cg-sheet[open]{ transform:none; opacity:0; } }
  .cg-toast, .cg-toast:not(.is-on){ transform:translate(-50%, 0); transition:opacity .15s ease; }
  .cg-lightable.is-lit::before{ animation:cg-fade .15s ease forwards; }
  .cg-lightable.is-lit{ transition-delay:.15s; }
  .cg-lightable.is-lit::after, .cg-lightable.is-lit > *{ animation:cg-fade .15s ease forwards; }
  .cg-split.is-open .cg-split__half::before{ animation:cg-fade .15s ease both; }
  .cg-split.is-open .cg-split__half > *{ animation:cg-fade .15s ease both; }
  .cg-star.is-on, .cg-bump, .cg-pop-in, .cg-bounce-in, .cg-enter{ animation:cg-fade .15s ease both; }
  .cg-reveal{ transform:none; } .cg-reveal.is-in{ transition:opacity .15s ease; }
  .cg-exit{ transform:none; transition:opacity .15s linear; }
  .cg-btn:hover, .cg-btn:hover:active, .cg-round:hover, .cg-round:hover:active, .cg-ring-host:active .cg-ring{ transform:none; }
  .cg-open, .cg-state, .cg-fox--calm{ animation:cg-fade .15s ease both; }
  .cg-skel{ animation:none; opacity:.65; }
  /* la bande : fondu de 150 ms, ni pop, ni rebond, ni respiration, ni écrasement */
  .cg-bande--pop, .cg-bande--bounce, .cg-bande--reveal.is-in, .cg-bande-group--reveal.is-in > .cg-bande,
  .cg-bande-group--pop > .cg-bande, .cg-bande--rise, .cg-bande-group--rise > .cg-bande{ animation:cg-fade .15s ease both; animation-delay:0s; }
  .cg-bande__fig, .cg-bande__fig.is-swap{ animation:none !important; }
  .cg-bande__img.is-in{ animation:cg-fade .15s ease both; }
  .cg-bande-pick, .cg-bande-pick:hover, .cg-bande-pick:active{ transform:none; transition-duration:0s; }
  .cg-hop{ animation:none !important; }   /* la bande vivante : seulement l'expression, en fondu de 150 ms */
}
/* Même chose à la demande : réglage « animations douces » de l'app (classe cg-reduce posée sur <body>) */
.cg-reduce{ --cg-rise:0px; --cg-press:1; --cg-stagger:0ms; --cg-d-soft:.15s; --cg-d-pop:.15s; --cg-d-bounce:.15s; --cg-d-nav:.15s; }
.cg-reduce *, .cg-reduce *::before, .cg-reduce *::after{ scroll-behavior:auto !important; }
.cg-reduce .cg-nav--enter{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-btn, .cg-reduce .cg-round, .cg-reduce .cg-ring, .cg-reduce .cg-ucard, .cg-reduce .cg-card--press, .cg-reduce .cg-press, .cg-reduce .cg-seg__thumb, .cg-reduce .cg-tabbar__pill, .cg-reduce .cg-toggle__track::after, .cg-reduce .cg-btn__arrow{ transition-duration:0s !important; }
.cg-reduce .cg-btn:active, .cg-reduce .cg-round:active, .cg-reduce .cg-ring:active, .cg-reduce .cg-ucard:active, .cg-reduce .cg-card--press:active, .cg-reduce .cg-press:active{ transform:none; }
.cg-reduce .cg-ring::before, .cg-reduce .cg-fox--float{ animation:none !important; }
.cg-reduce .cg-stack > *{ transition:opacity .15s ease; }
.cg-reduce .cg-sheet, .cg-reduce .cg-sheet::backdrop{ transition:opacity .15s ease, overlay .15s allow-discrete, display .15s allow-discrete !important; }
.cg-reduce .cg-sheet:not([open]):not(.is-open){ transform:none; opacity:0; }
@starting-style{ .cg-reduce .cg-sheet[open]{ transform:none; opacity:0; } }
.cg-reduce .cg-toast, .cg-reduce .cg-toast:not(.is-on){ transform:translate(-50%, 0); transition:opacity .15s ease; }
.cg-reduce .cg-lightable.is-lit::before{ animation:cg-fade .15s ease forwards; }
.cg-reduce .cg-lightable.is-lit{ transition-delay:.15s; }
.cg-reduce .cg-lightable.is-lit::after, .cg-reduce .cg-lightable.is-lit > *{ animation:cg-fade .15s ease forwards; }
.cg-reduce .cg-split.is-open .cg-split__half::before{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-split.is-open .cg-split__half > *{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-star.is-on, .cg-reduce .cg-bump, .cg-reduce .cg-pop-in, .cg-reduce .cg-bounce-in, .cg-reduce .cg-enter{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-reveal{ transform:none; }
.cg-reduce .cg-reveal.is-in{ transition:opacity .15s ease; }
.cg-reduce .cg-exit{ transform:none; transition:opacity .15s linear; }
.cg-reduce .cg-btn:hover, .cg-reduce .cg-btn:hover:active, .cg-reduce .cg-round:hover, .cg-reduce .cg-round:hover:active, .cg-reduce .cg-ring-host:active .cg-ring{ transform:none; }
.cg-reduce .cg-open, .cg-reduce .cg-state, .cg-reduce .cg-fox--calm{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-skel{ animation:none; opacity:.65; }
.cg-reduce .cg-bande--pop, .cg-reduce .cg-bande--bounce, .cg-reduce .cg-bande--reveal.is-in, .cg-reduce .cg-bande-group--reveal.is-in > .cg-bande,
.cg-reduce .cg-bande-group--pop > .cg-bande, .cg-reduce .cg-bande--rise, .cg-reduce .cg-bande-group--rise > .cg-bande{ animation:cg-fade .15s ease both; animation-delay:0s; }
.cg-reduce .cg-bande__fig, .cg-reduce .cg-bande__fig.is-swap{ animation:none !important; }
.cg-reduce .cg-bande__img.is-in{ animation:cg-fade .15s ease both; }
.cg-reduce .cg-bande-pick, .cg-reduce .cg-bande-pick:hover, .cg-reduce .cg-bande-pick:active{ transform:none; transition-duration:0s; }
.cg-reduce .cg-hop{ animation:none !important; }

/* Contraste renforcé demandé par le système */
@media (prefers-contrast:more){
  :root{ --cg-fg-2:#C4C4C4; --cg-fg-3:#B0B0B0; --cg-line:rgba(255,255,255,.22); --cg-line-2:rgba(255,255,255,.32); }
}
/* Transparence réduite : barres pleines */
@media (prefers-reduced-transparency:reduce){
  .cg-nav.is-scrolled, .cg-tabbar, .cg-tag--glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#1C1C1C; }
}