/* Pages « code couleur exact » (/couleur/, /<lang>/color/), 20 oct. 2026. DA négatif : le noir porte, la couleur
   signe, le blanc juge. Une pièce maîtresse : le spécimen (la carte du jeu qui se coupe : l'élément sur le blanc,
   la couleur en aplat dessous). Pages générées par scripts/build_couleurs.py. */

.cc{ --cc-gap:clamp(16px, 3vw, 32px); }
/* la capsule de verre de la nav (inset -10 px) dépasserait de l écran tant que le conteneur prend toute la largeur */
@media (max-width:1219px){ .cc-nav .cg-nav__in::before{ left:6px; right:6px; } }
.cc ::selection{ background:var(--cg-fg); color:var(--cg-bg); }
.cc-main{ display:block; padding-bottom:clamp(40px, 8vw, 96px); }
.cc-nav__hub{ display:none; }
@media (min-width:640px){ .cc-nav__hub{ display:inline-flex; } }

/* fil d'Ariane */
.cc-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:8px 0 clamp(16px, 3vw, 28px);
  font-size:13px; color:var(--cg-fg-3); }
.cc-crumb a{ color:var(--cg-fg-2); text-decoration:none; border-radius:6px; }
.cc-crumb a:hover{ color:var(--cg-fg); text-decoration:underline; text-underline-offset:3px; }
.cc-crumb [aria-current]{ color:var(--cg-fg); }
.cc-crumb__sep{ --s:12px; color:var(--cg-fg-4); }

/* ---------- héros : spécimen + infos ---------- */
.cc-hero{ padding-top:4px; }
.cc-hero__grid{ display:grid; gap:var(--cc-gap); align-items:start; }
@media (min-width:900px){ .cc-hero__grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } }

.cc-spec{ position:relative; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:6px;
  border-radius:var(--cg-r-xl); overflow:hidden; box-shadow:var(--cg-e-float); isolation:isolate; }
@media (min-width:900px){ .cc-spec{ grid-template-columns:1fr; grid-template-rows:auto auto; position:sticky; top:84px; } }
.cc-spec__paper{ display:grid; place-items:center; aspect-ratio:1; padding:14%; background:#FFFFFF; }
.cc-spec__paper{ position:relative; }
.cc-spec__paper img{ position:absolute; inset:14%; width:72%; height:72%; object-fit:contain; }
.cc-spec__sw{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:clamp(14px, 3vw, 24px); background:var(--c); color:var(--on); min-height:100%; }
@media (min-width:900px){ .cc-spec__sw{ min-height:clamp(150px, 15vw, 200px); } }
.cc-spec__hex{ font-size:clamp(28px, 7.4vw, 64px); font-weight:500; line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; }
.cc-spec__name{ font-size:15px; font-weight:500; }

/* le moment : la carte s'allume, puis la couleur monte dans sa moitié (comme au reveal du jeu) */
@media (prefers-reduced-motion:no-preference){
  .cc-spec__paper{ animation:cc-light .5s var(--cg-ease-soft) both; }
  .cc-spec__sw{ animation:cc-fill .74s var(--cg-ease-soft) .18s both; }
  .cc-spec__hex, .cc-spec__name{ animation:cg-rise .5s var(--cg-ease-soft) .52s both; }
}
@keyframes cc-light{ from{ opacity:0; filter:brightness(.4); } to{ opacity:1; filter:none; } }
@keyframes cc-fill{ from{ clip-path:inset(100% 0 0 0 round 0); } to{ clip-path:inset(0 0 0 0 round 0); } }

.cc-h1{ margin:0; overflow-wrap:anywhere; }
.cc-cname{ margin:12px 0 0; font-size:15px; color:var(--cg-fg-2); }
.cc-cname__k{ color:var(--cg-fg-3); }
.cc-cname__k::after{ content:" ·"; }
.cc-cname__v{ color:var(--cg-fg); font-weight:500; }

/* valeurs à copier */
.cc-vals{ list-style:none; margin:clamp(18px, 3vw, 28px) 0 0; padding:0; display:grid; gap:8px; }
@media (min-width:560px){ .cc-vals{ grid-template-columns:1fr 1fr; } }
.cc-val{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:10px;
  min-height:64px; padding:10px 8px 10px 16px; border-radius:var(--cg-r-md); background:var(--cg-raised);
  box-shadow:inset 0 0 0 1px var(--cg-line); }
.cc-val__k{ grid-column:1; font-size:12px; font-weight:500; letter-spacing:.01em; color:var(--cg-fg-3); }
.cc-val__v{ grid-column:1; font-family:inherit; font-size:15px; font-weight:500; color:var(--cg-fg); font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; -webkit-user-select:all; user-select:all; }
.cc-copy{ grid-column:2; grid-row:1 / 3; position:relative; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 14px;
  border:0; border-radius:var(--cg-r-pill); background:rgba(255,255,255,.08); color:var(--cg-fg); font:inherit; font-size:14px; font-weight:600;
  box-shadow:inset 0 0 0 1px var(--cg-line); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--cg-d-bg) ease, transform var(--cg-d-btn) var(--cg-ease-out); }
.cc-copy:hover{ background:rgba(255,255,255,.14); }
.cc-copy:active{ transform:scale(.96); }
.cc-copy .cg-ico{ --s:18px; }
.cc-copy__b{ display:none; }
.cc-copy.is-done{ background:#FFFFFF; color:#0A0A0A; }
.cc-copy.is-done .cc-copy__a{ display:none; }
.cc-copy.is-done .cc-copy__b{ display:block; animation:cg-pop var(--cg-d-pop) var(--cg-ease-pop) both; }
@media (max-width:380px){ .cc-copy__t{ display:none; } .cc-copy{ width:44px; padding:0; justify-content:center; } }

.cc-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:clamp(20px, 3vw, 28px); }
.cc-cta .cg-small{ margin:0; }
.cc-note{ margin:14px 0 0; max-width:60ch; }

/* ---------- sections ---------- */
.cc-sec{ padding-top:clamp(48px, 8vw, 96px); }
.cc-read > *{ max-width:72ch; }
.cc-sec .cg-h2{ margin:0 0 14px; }
.cc-text p{ margin:0 0 14px; font-size:var(--cg-fs-body); line-height:1.6; color:var(--cg-fg-2); max-width:68ch; text-wrap:pretty; }
.cc-sec .cg-body{ margin:0; }

/* teintes proches : la vraie couleur et la voisine, côte à côte */
.cc-nears{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }
@media (min-width:760px){ .cc-nears{ grid-template-columns:1fr 1fr; } }
.cc-near{ display:grid; grid-template-columns:56px minmax(0, 1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:14px;
  min-height:72px; padding:10px 16px 10px 10px; border-radius:var(--cg-r-md); background:var(--cg-raised);
  box-shadow:inset 0 0 0 1px var(--cg-line); color:var(--cg-fg); text-decoration:none;
  transition:background-color var(--cg-d-bg) ease; }
a.cc-near:hover{ background:var(--cg-raised-2); }
.cc-near__sw{ grid-row:1 / 3; width:56px; height:52px; border-radius:12px;
  background:linear-gradient(90deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.cc-near__t{ display:flex; flex-direction:column; min-width:0; }
.cc-near__n{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-near__u{ font-size:13px; color:var(--cg-fg-3); }
.cc-near__hex{ grid-column:2; font-family:inherit; font-size:13px; color:var(--cg-fg-2); font-variant-numeric:tabular-nums; }
.cc-near__de{ grid-column:3; grid-row:1 / 3; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
a.cc-near .cc-near__n{ text-decoration:underline; text-decoration-color:var(--cg-line-3); text-underline-offset:3px; }

/* cartes de couleurs (à voir aussi, accueil) */
.cc-cards{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:760px){ .cc-cards{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1100px){ .cc-cards--hub{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.cc-card{ display:flex; flex-direction:column; height:100%; border-radius:var(--cg-r-lg); overflow:hidden; background:var(--cg-raised);
  box-shadow:inset 0 0 0 1px var(--cg-line); color:var(--cg-fg); text-decoration:none;
  transition:transform var(--cg-d-btn) var(--cg-ease-out), box-shadow var(--cg-d-bg) ease; }
.cc-card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--cg-line-2), var(--cg-e-float); }
.cc-card:active{ transform:scale(.98); }
.cc-card__paper{ position:relative; display:block; aspect-ratio:16 / 10; background:#FFFFFF; }
.cc-card__paper img{ position:absolute; inset:12% 16%; width:68%; height:76%; object-fit:contain; }
.cc-card__sw{ display:flex; align-items:center; height:40px; padding:0 12px; background:var(--c); color:var(--on); }
.cc-card__sw code{ font-family:inherit; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.cc-card__n{ padding:10px 12px 12px; font-size:14px; font-weight:500; line-height:1.25; }

.cc-links{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.cc-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--u, var(--cg-fg-3)); flex:none; }

/* FAQ */
.cc-qs{ display:grid; gap:8px; }
.cc-q{ border-radius:var(--cg-r-md); background:var(--cg-raised); box-shadow:inset 0 0 0 1px var(--cg-line); }
.cc-q summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:12px 16px;
  font-weight:500; cursor:pointer; list-style:none; }
.cc-q summary::-webkit-details-marker{ display:none; }
.cc-q__caret{ --s:18px; color:var(--cg-fg-3); transition:transform var(--cg-d-bg) ease; }
.cc-q[open] .cc-q__caret{ transform:rotate(180deg); }
.cc-q p{ margin:0; padding:0 16px 16px; color:var(--cg-fg-2); line-height:1.55; max-width:68ch; }

/* ---------- accueil des codes couleur ---------- */
.cc-hero--hub .cc-lead{ max-width:52ch; margin:16px 0 0; }
.cc-hub{ display:grid; gap:clamp(40px, 6vw, 72px); padding-top:clamp(36px, 6vw, 64px); }
.cc-usec__head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.cc-usec__h{ display:flex; align-items:center; gap:10px; margin:0; }
.cc-usec__h a{ color:var(--cg-fg); text-decoration:none; }
.cc-usec__h a:hover{ text-decoration:underline; text-underline-offset:4px; }
.cc-usec__play{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; font-weight:500; color:var(--cg-fg-2); text-decoration:none; }
.cc-usec__play:hover{ color:var(--cg-fg); }
.cc-usec__play .cg-ico{ --s:16px; }
.cc-usec .cc-cards{ margin-top:14px; }

/* ---------- pied de page ---------- */
.cc-foot{ margin-top:clamp(56px, 9vw, 120px); padding:32px 0 calc(32px + var(--cg-safe-b)); border-top:1px solid var(--cg-line); }
.cc-foot__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.cc-foot__links, .cc-foot__langs{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.cc-foot__links a, .cc-foot__langs a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:var(--cg-r-pill);
  font-size:14px; color:var(--cg-fg-2); text-decoration:none; }
.cc-foot__links a:hover, .cc-foot__langs a:hover{ color:var(--cg-fg); background:rgba(255,255,255,.06); }
.cc-foot__langs{ margin-top:12px; }
.cc-foot__langs a[aria-current]{ color:var(--cg-fg); }
.cc-foot__legal{ margin:16px 0 0; max-width:80ch; }

.cc-toast{ pointer-events:none; }