/* ==========================================================================
   Color Guesser · univers.css · gabarit commun des 13 pages univers
   DA « négatif » (octobre 2026). S'appuie sur /cg.css (jetons, composants cg-*),
   chargé juste avant. Préfixe u-. Page : <body class="cg" data-u="pixar">.

   Règles : on n'anime que transform et opacity ; la zone où l'on juge une couleur
   est #FFFFFF, rien de coloré à moins de 24 px de l'élément ; une couleur
   d'univers par page (--u), jamais en texte courant ; Geist partout, logo compris
   (brand/logo.svg, Geist 560 vectorisé, DA § 7).
   La bande (DA § 11, v12 « la bande vivante ») : l'ambassadeur de l'univers
   (bande.js, pickForUniverse) se tient à droite de la tuile du héros, puis revient
   joyeux au final. Toujours sur le noir, jamais rogné, jamais près des cartes
   blanches de la pile. Il réagit (data-react : survol, tap, saut d'arrivée).
   ========================================================================== */

/* ---------- 0. Page ---------- */
.u-main{ overflow-x:clip; }
.u-main .cg-section{ padding-block:clamp(52px, 7.4vw, 104px); }
.u-main .u-how{ padding-top:clamp(56px, 8vw, 112px); }
.u-sentinel{ position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }
/* Logo de la nav (et du pied de page) : brand/logo.svg, une seule image (le symbole plein + « Color Guesser »
   en Geist 560 vectorisé, version « texte » pour 16 à 31 px de haut). 20 px sur téléphone, 22 px dès 768 px (DA § 7). */
.u-nav .cg-logo img{ --h:20px; }
@media (min-width:768px){ .u-nav .cg-logo img{ --h:22px; } }
.u-logo .u-logo__img{ display:block; height:var(--h); width:auto; flex:none; }
.u-nav .cg-nav__link[href^="#"]{ scroll-margin-top:80px; }
:where(.cg) section[id]{ scroll-margin-top:72px; }
.cg ::-webkit-scrollbar{ width:12px; height:12px; }
.cg ::-webkit-scrollbar-thumb{ background:#2A2A2A; border-radius:999px; border:3px solid var(--cg-bg); }
.cg ::-webkit-scrollbar-track{ background:var(--cg-bg); }
html:has(body.cg){ background:var(--cg-bg); scrollbar-color:#2A2A2A var(--cg-bg); }

/* Apparition au défilement : seulement si le JS tourne (sinon tout reste visible) */
.js [data-reveal]{ opacity:0; transform:translateY(calc(var(--cg-rise) * 1.5)); }
.js [data-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)); }

/* Titres de section : titre, puis une phrase, empilés (jamais côte à côte) */
.u-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px, 4vw, 44px); max-width:44rem; }
.u-head .cg-body{ max-width:46ch; }

/* ---------- 1. Héros : la grande carte, couleur de l'univers ---------- */
.u-hero{ padding-top:clamp(4px, 1.6vw, 20px); }
.u-hero__card{ display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; align-items:center; isolation:isolate; }
/* (minmax(0, 1fr) : la pile, plus large que la colonne sur téléphone, ne l'élargit plus ; les boutons gardent la marge de droite) */
.u-hero__card > .cg-glow{ right:-16%; top:-30%; width:80%; opacity:.62; }
.u-hero__card > .cg-glow.u-glow-2{ right:auto; top:auto; left:-22%; bottom:-46%; width:62%; opacity:.2; }
.u-hero__copy{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:22px; min-width:0; container-type:inline-size; }
.u-hero__top{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.u-hero__tags{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
/* La tuile et son ambassadeur partagent une ligne de sol : le bas de la boîte .cg-bande = les pieds,
   posés sur le bas de la tuile ; la silhouette (≈ 0,83 × --s) fait la hauteur de la tuile.
   --s suit la tuile : 72 → 88, 88 → 104, 96 → 120. */
.u-hero__id{ display:flex; align-items:flex-end; gap:10px; }
.u-amb{ --s:88px; }
/* La bande vivante (v12) : survol, tap, saut d'arrivée (bande.js, data-react). Seule la silhouette capte
   le doigt (::before de cg.css) ; manipulation : le tap part tout de suite, sans attendre un double tap. */
.u-amb.cg-bande--react, .u-amb.cg-bande--react::before,
.u-final__amb.cg-bande--react, .u-final__amb.cg-bande--react::before{ touch-action:manipulation; }
/* étiquettes empilées quand la place manque, en ligne sur la ligne de sol sinon */
@container (min-width:420px){ .u-hero__tags{ flex-direction:row; gap:8px; } }
.u-hero__tags .cg-tag{ height:30px; padding:0 12px; font-size:13px; font-weight:500; color:var(--cg-fg); }
.u-hero__tags .cg-tag b{ font-weight:600; }
.u-hero .cg-tile--xl{ --ts:72px; }
@media (min-width:600px){ .u-hero .cg-tile--xl{ --ts:88px; } .u-amb{ --s:104px; } .u-hero__id{ gap:14px; } }
@media (min-width:900px){ .u-hero .cg-tile--xl{ --ts:96px; } .u-amb{ --s:120px; } }

/* le nom de l'univers, en minuscules, signé d'un point à sa couleur */
.u-title{ align-self:stretch; margin:0; font-size:var(--u-fs, clamp(58px, 10.5vw, 128px)); font-weight:500; line-height:.9;
  letter-spacing:-.05em; text-wrap:balance; hyphens:manual; padding-bottom:.04em; }
.u-title--l{ --u-fs:clamp(48px, 8.4vw, 104px); }
.u-title--xl{ --u-fs:clamp(44px, 7.4vw, 92px); }
.u-title--one{ white-space:nowrap; }
.u-dot{ color:var(--u); }
/* ligne d'intention du H1 (SEO, « devine la couleur » / « guess the color »…) : première ligne du même titre,
   taille en px pour que le calage du grand mot (univers.js § 3 bis) ne la réduise jamais ; elle revient à la ligne */
.u-kick{ display:block; white-space:normal; font-size:clamp(17px, 2vw, 19px); font-weight:500; letter-spacing:-.01em;
  line-height:1.3; color:var(--cg-fg-2); margin-bottom:8px; text-wrap:balance; }
.u-hero .cg-lead{ max-width:31ch; margin-top:-4px; }
.u-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px; }
.u-ctas .cg-btn--lg{ padding:0 26px; }
@media (max-width:539px){
  .u-ctas{ width:100%; }
  .u-ctas .cg-btn{ flex:1 1 100%; }
}

/* la pile : trois manches de l'univers, la carte du dessus retrouve sa couleur */
.u-hero__art{ position:relative; z-index:1; display:grid; place-items:center; min-height:300px; }
.u-hero .cg-stack{ --w:min(400px, 84vw); }
.js .u-stack:not(.is-dealt) > *{ --x:0%; --y:5%; --r:0deg; }
.u-stack .cg-mini--paper{ box-shadow:0 0 0 1px rgba(255,255,255,.7), var(--cg-e-float); }
.u-stack .cg-mini--paper[data-pos="0"]{ box-shadow:0 0 0 1px #fff, 0 0 60px rgba(255,255,255,.08), var(--cg-e-float); }
.u-card-art{ position:absolute; inset:7%; }
.u-shuffle{ position:absolute; right:0; bottom:0; z-index:6; }

@media (min-width:900px){
  .u-hero__card{ grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr); gap:24px; min-height:min(580px, calc(100svh - 120px)); }
  .u-hero__art{ min-height:440px; }
  .u-hero .cg-stack{ --w:min(440px, 38vw); }
}
@media (max-width:899px){
  .u-hero__art{ margin-top:4px; min-height:min(320px, 82vw); }
  .u-shuffle{ right:-4px; bottom:-4px; }
}

/* ---------- 2. Éléments du jeu (SVG ou calques) ---------- */
.u-art{ position:relative; width:100%; height:100%; }
.u-art > *{ position:absolute; inset:0; width:100%; height:100%; }
.u-art__live svg{ display:block; width:100%; height:100%; }
.u-art img{ object-fit:contain; }
.u-art__paint{ display:block; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; background:#9E9E9E; }
.u-art__true{ opacity:0; transition:opacity .62s var(--cg-ease-soft); }
.is-true .u-art__true{ opacity:1; }
.u-art.is-ready{ animation:cg-fade .3s ease both; }

/* ---------- 3. Le principe : regarde, glisse, compare ---------- */
.u-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:900px){ .u-steps{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); gap:20px; } }
.u-step.cg-card{ display:flex; flex-direction:column; gap:6px; padding:14px 14px 24px; }
.u-step h3{ margin:18px 8px 0; }
.u-step p{ margin:0 8px; font-size:15px; line-height:1.45; color:var(--cg-fg-2); max-width:34ch; text-wrap:pretty; }
.u-screen{ position:relative; height:clamp(280px, 27vw, 340px); }

/* regarde : la lumière s'allume (blanc pur), l'élément en gris */
.u-look{ position:absolute; inset:0; border-radius:var(--cg-r-md); }
.u-look.cg-lightable:not(.is-lit){ background:var(--cg-raised-2); }
.u-look__art{ position:absolute; inset:14px 14px 48px; }
.u-elname{ position:absolute; left:0; right:0; bottom:20px; text-align:center; font-size:13px; font-weight:500; color:var(--cg-ink-2); }

/* glisse : la carte blanche au-dessus, le grand carré dessous */
.u-slide{ position:absolute; inset:0; display:grid; grid-template-rows:38% 1fr; gap:8px; }
.u-slide__paper{ position:relative; border-radius:var(--cg-r-md); background:#FFFFFF; }
.u-slide__art{ position:absolute; inset:10px max(12px, 6%); }
.u-slide .cg-square{ aspect-ratio:auto; height:100%; border-radius:var(--cg-r-md); cursor:crosshair; }
.u-slide .cg-square:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.u-try{ position:absolute; left:10px; top:10px; z-index:2; pointer-events:none; gap:6px;
  opacity:0; transform:translateY(-4px) scale(.96); transition:opacity .2s ease, transform .3s var(--cg-ease-pop); }
.u-try.cg-tag--glass{ background:rgba(10,10,10,.74); color:#FFFFFF; } /* lisible sur le haut clair du carré (≥ 8:1) */
.u-try.is-on{ opacity:1; transform:none; }
.u-try .cg-ico{ --s:14px; }

/* compare : la précision, puis la carte coupée */
.u-compare{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr; gap:14px; }
.u-score{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:4px 6px 0; }
.u-score__n{ display:flex; flex-direction:column; gap:6px; }
.u-score .cg-word{ font-size:15px; }
.u-num{ --cg-fs-num:clamp(60px, 6.2vw, 80px); }
.u-score .cg-stars{ padding-bottom:8px; gap:4px; }
.u-score .cg-star{ --ss:22px; }
.u-split.cg-split{ aspect-ratio:auto; height:100%; gap:5px; border-radius:var(--cg-r-md); --bot-on:#fff; }
.u-split .cg-split__half{ padding:14px 16px; }
.u-split .cg-split__half--top{ border-radius:var(--cg-r-md) var(--cg-r-md) 6px 6px; }
.u-split .cg-split__half--bot{ border-radius:6px 6px var(--cg-r-md) var(--cg-r-md); }
.u-split:not(.is-open) .cg-split__half{ box-shadow:inset 0 0 0 1px var(--cg-line); border-radius:inherit; }
.u-split:not(.is-open) .cg-split__half--top{ border-radius:var(--cg-r-md) var(--cg-r-md) 6px 6px; }
.u-split:not(.is-open) .cg-split__half--bot{ border-radius:6px 6px var(--cg-r-md) var(--cg-r-md); }
.u-split .cg-split__lab{ font-size:13px; }
.u-split .cg-split__lab small{ font-size:12px; }


/* ---------- 4. Nuancier (FR) : un mini-test ---------- */
.u-test__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(24px, 3.4vw, 36px); }
.u-test__top .u-head{ margin-bottom:0; }
.u-chips{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:640px){ .u-chips{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1100px){ .u-chips{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; } }
.u-chip{ display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:12px 14px 12px 12px; border:0;
  border-radius:var(--cg-r-md); background:var(--cg-raised); box-shadow:var(--cg-e1); color:var(--cg-fg); text-align:left;
  -webkit-user-select:none; user-select:none;
  transition:transform var(--cg-d-btn) var(--cg-ease-out), background-color var(--cg-d-bg) ease; }
.u-chip:active{ transform:scale(var(--cg-press)); transition-duration:.1s; }
.u-chip__dot{ position:relative; width:36px; height:36px; flex:none; border-radius:50%; background:var(--cg-raised-3);
  box-shadow:inset 0 0 0 1px var(--cg-line-2); }
.u-chip__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  opacity:0; transform:scale(.35); transition:opacity .18s ease, transform var(--cg-d-pop) var(--cg-ease-pop); }
.u-chip[aria-pressed="true"] .u-chip__dot::after{ opacity:1; transform:none; }
.u-chip__txt{ display:flex; flex-direction:column; min-width:0; }
.u-chip__name{ font-size:14px; font-weight:500; line-height:1.25; letter-spacing:-.01em; overflow-wrap:anywhere;
  transform:translateY(8px); transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.u-chip[aria-pressed="true"] .u-chip__name{ transform:none; }
.u-chip__hex{ font-size:12px; line-height:16px; color:var(--cg-fg-3); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform var(--cg-d-btn) var(--cg-ease-out); }
.u-chip[aria-pressed="true"] .u-chip__hex{ opacity:1; transform:none; transition-delay:.06s; }
.u-revealall .u-revealall__off{ display:none; }
.u-revealall[aria-pressed="true"] .u-revealall__on{ display:none; }
.u-revealall[aria-pressed="true"] .u-revealall__off{ display:inline; }
@media (hover:hover) and (pointer:fine){ .u-chip:hover{ background:var(--cg-raised-2); } }
/* ancre profonde (#c-pikachu) : la pastille visée s'ouvre d'elle-même, son nom et son code en clair */
.u-chips li[id]{ scroll-margin-top:96px; }
.u-chips li:target .u-chip{ box-shadow:var(--cg-e1), inset 0 0 0 1px rgba(255,255,255,.28); }
.u-chips li:target .u-chip__dot::after, .u-chips li:target .u-chip__name, .u-chips li:target .u-chip__hex{ opacity:1; transform:none; }
.u-test__note{ margin:clamp(18px, 2.4vw, 24px) 0 0; max-width:62ch; }

/* ---------- 5. Les autres univers ---------- */
.u-unis .cg-ucard{ min-height:136px; color:var(--cg-fg); }
.u-unis .cg-tile{ --ts:44px; }
.u-unis .cg-ucard__go{ position:absolute; right:14px; top:14px; --s:18px; color:var(--cg-fg-3);
  transition:transform var(--cg-d-btn) var(--cg-ease-out), color var(--cg-d-bg) ease; }
@media (hover:hover) and (pointer:fine){
  .u-unis .cg-ucard:hover .cg-ucard__go{ color:var(--cg-fg); transform:translate(2px, -2px); }
}
@media (min-width:1024px){ .u-unis .cg-ucard{ min-height:150px; padding:18px; } .u-unis .cg-tile{ --ts:48px; } }

/* ---------- 6. Questions ---------- */
.u-faq__in{ display:grid; gap:24px; }
@media (min-width:900px){
  .u-faq__in{ grid-template-columns:minmax(0, .72fr) minmax(0, 1.5fr); gap:56px; align-items:start; }
  .u-faq__in > .cg-h2{ position:sticky; top:96px; }
}
.u-qs{ display:flex; flex-direction:column; gap:8px; }
.u-q.cg-card--flat{ border-radius:var(--cg-r-md); background:var(--cg-raised); }
.u-q summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:14px 18px 14px 20px;
  cursor:pointer; list-style:none; font-size:16px; font-weight:500; letter-spacing:-.015em; line-height:1.35; border-radius:inherit; }
.u-q summary::-webkit-details-marker{ display:none; }
.u-q summary:focus-visible{ outline-offset:-3px; }
.u-q__caret{ --s:20px; color:var(--cg-fg-3); transition:transform var(--cg-d-btn) var(--cg-ease-out); }
.u-q[open] .u-q__caret{ transform:rotate(180deg); color:var(--cg-fg); }
.u-q__a{ padding:0 20px 20px; }
.u-q__a p{ margin:0; font-size:15px; line-height:1.55; color:var(--cg-fg-2); max-width:62ch; text-wrap:pretty; }
.u-q[open] .u-q__a{ animation:cg-rise-sm .34s var(--cg-ease-soft) both; }
@media (hover:hover) and (pointer:fine){ .u-q summary:hover .u-q__caret{ color:var(--cg-fg); } }

/* ---------- 7. Final ---------- */
.u-final{ padding-bottom:clamp(40px, 6vw, 72px); }
.u-final__in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px; }
.u-final .cg-hero{ font-size:clamp(52px, 9vw, 112px); }
/* « ton score compte » : une phrase sous le titre, collée à lui, le bouton reste la seule action */
.u-final__p{ max-width:38ch; margin:-12px 0 0; }
.u-final__amb{ --s:104px; } /* joyeux par défaut (cg-bande--happy-default, sauts 1,35 fois plus hauts), au-dessus du titre */
@media (min-width:768px){ .u-final__amb{ --s:120px; } }

/* ---------- 8. Pied de page ---------- */
.u-foot{ padding-bottom:calc(28px + var(--cg-safe-b)); }
.u-spectrum{ display:grid; grid-template-columns:repeat(13, minmax(0, 1fr)); gap:4px; height:16px; align-items:end; margin-bottom:28px; }
.u-spectrum i{ display:block; height:4px; border-radius:2px; background:var(--u); transform-origin:50% 100%; }
.u-spectrum i.is-here{ height:14px; border-radius:4px; }
.u-foot__grid{ display:grid; gap:20px; }
@media (min-width:900px){ .u-foot__grid{ grid-template-columns:auto 1fr; align-items:start; gap:24px 48px; } }
.u-foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.u-foot__brand .cg-logo img{ --h:20px; }   /* le même logo que la nav */
.u-foot__navs{ display:flex; flex-direction:column; gap:6px; }
@media (min-width:900px){ .u-foot__navs{ align-items:flex-end; } }
.u-links{ display:flex; flex-wrap:wrap; gap:2px; margin:0 -12px; }
@media (min-width:900px){ .u-links{ justify-content:flex-end; margin:0 -12px 0 0; } }
.u-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; }
.u-langs .u-link[aria-current]{ color:var(--cg-fg); background:rgba(255,255,255,.08); }
@media (hover:hover) and (pointer:fine){ .u-link:hover{ color:var(--cg-fg); background:rgba(255,255,255,.06); } }
.u-legal{ grid-column:1 / -1; display:flex; flex-direction:column; gap:4px; padding-top:20px; border-top:1px solid var(--cg-line);
  font-size:12px; line-height:1.5; color:var(--cg-fg-3); }
.u-legal p{ margin:0; max-width:92ch; }

/* ---------- 9. Mouvement réduit (système ou réglage « animations douces ») ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ transform:none; }
  .js [data-reveal].is-in{ transition:opacity .15s ease; }
  .u-art__true{ transition-duration:.15s; }
  .u-chip__dot::after, .u-try, .u-chip__hex{ transition:opacity .15s ease; transform:none; }
  .u-chip__name{ transition:none; }
  .u-q__caret{ transition:none; }
  .u-q[open] .u-q__a{ animation:cg-fade .15s ease both; }
}
.cg-reduce [data-reveal]{ transform:none; }
.cg-reduce [data-reveal].is-in{ transition:opacity .15s ease; }
.cg-reduce .u-art__true{ transition-duration:.15s; }
.cg-reduce .u-chip__dot::after, .cg-reduce .u-try, .cg-reduce .u-chip__hex{ transition:opacity .15s ease; transform:none; }
.cg-reduce .u-chip__name{ transition:none; }
.cg-reduce .u-q[open] .u-q__a{ animation:cg-fade .15s ease both; }