/* ══════════════════════════════════════════════════════════════
   CUBE SUDOKU — UNE VARIANTE PAR FACE  (étape 3, 18/10/2026)
   Chargé après cube-3d.css. Rien ici ne s'applique au cube aux arêtes
   (index.html?aretes) : ses cases ne portent aucune de ces classes et
   #cb-rule y est masquée (cube-variantes.js).
   24/10 (mise en ligne) : à la racine du site, ex-outils-dev/cube-3d/cube-variantes.css.
══════════════════════════════════════════════════════════════ */

/* ── Teintes des variantes ──
   Mêmes valeurs que les pages du site (.diag du Sudoku X, .hyp de l'Hyper,
   _injectWaveStyle de sudoku-core.js), en background-IMAGE par-dessus la
   couleur de fond : surlignage, sélection, erreur et filtre secret restent
   visibles dessous. À spécificité égale avec les règles .hl / .sel / .err /
   .cb-same / .cb-spot de cube-3d.css (dont le « background » remet l'image
   à zéro) : ce fichier passe après, la teinte reste. */
.cb-cell.cb-diag { background-image: linear-gradient(rgba(232,197,71,.16), rgba(232,197,71,.16)); }
body.dark .cb-cell.cb-diag { background-image: linear-gradient(rgba(232,197,71,.13), rgba(232,197,71,.13)); }
.cb-cell.cb-hyp { background-image: linear-gradient(rgba(48,138,242,.13), rgba(48,138,242,.13)); }
body.dark .cb-cell.cb-hyp { background-image: linear-gradient(rgba(96,165,250,.13), rgba(96,165,250,.13)); }
/* Face finie : l'or de la face (cube-3d.css) PAR-DESSUS la teinte de la variante */
.cb-face.done .cb-cell.cb-diag {
  background-image: linear-gradient(rgba(232,197,71,.26), rgba(232,197,71,.26)), linear-gradient(rgba(232,197,71,.16), rgba(232,197,71,.16));
}
body.dark .cb-face.done .cb-cell.cb-diag {
  background-image: linear-gradient(rgba(232,197,71,.18), rgba(232,197,71,.18)), linear-gradient(rgba(232,197,71,.13), rgba(232,197,71,.13));
}
.cb-face.done .cb-cell.cb-hyp {
  background-image: linear-gradient(rgba(232,197,71,.26), rgba(232,197,71,.26)), linear-gradient(rgba(48,138,242,.13), rgba(48,138,242,.13));
}
body.dark .cb-face.done .cb-cell.cb-hyp {
  background-image: linear-gradient(rgba(232,197,71,.18), rgba(232,197,71,.18)), linear-gradient(rgba(96,165,250,.13), rgba(96,165,250,.13));
}

/* ── Sudoku irrégulier (phase 2, face 4) ──
   Les traits épais suivent les blocs biscornus de la grille (data-v sur la
   face, classes cb-rr / cb-rb posées par cube-variantes.js) à la place des
   carrés 3×3 de cube-3d.css : même trait or de 2 px. Teinte gris-violet des
   pages du site (.rg-t de sudoku-irregulier.js) sur des blocs qui ne se
   touchent pas (cb-rg). */
.cb-face[data-v="irregulier"] .cb-cell { border-right: 0; border-bottom: 0; }
.cb-face[data-v="irregulier"] .cb-cell.cb-rr { border-right: 2px solid var(--accent); }
.cb-face[data-v="irregulier"] .cb-cell.cb-rb { border-bottom: 2px solid var(--accent); }
.cb-cell.cb-rg { background-image: linear-gradient(rgba(90,79,150,.09), rgba(90,79,150,.09)); }
body.dark .cb-cell.cb-rg { background-image: linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.055)); }
.cb-face.done .cb-cell.cb-rg {
  background-image: linear-gradient(rgba(232,197,71,.26), rgba(232,197,71,.26)), linear-gradient(rgba(90,79,150,.09), rgba(90,79,150,.09));
}
body.dark .cb-face.done .cb-cell.cb-rg {
  background-image: linear-gradient(rgba(232,197,71,.18), rgba(232,197,71,.18)), linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.055));
}

/* ── Sudoku pair-impair (phase 3, face 3) ──
   Cases paires grises : teinte des pages du site (.par de sudoku-pair-impair.js),
   en sombre blanche (case paire plus CLAIRE). Sous la sélection, un cran plus
   foncée, comme le site (retour JC du 16/10 : on doit voir si la case est paire). */
.cb-cell.cb-par { background-image: linear-gradient(rgba(26,26,46,.12), rgba(26,26,46,.12)); }
body.dark .cb-cell.cb-par { background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)); }
.cb-cell.cb-par.sel { background-image: linear-gradient(rgba(26,26,46,.17), rgba(26,26,46,.17)); }
body.dark .cb-cell.cb-par.sel { background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)); }
.cb-face.done .cb-cell.cb-par {
  background-image: linear-gradient(rgba(232,197,71,.26), rgba(232,197,71,.26)), linear-gradient(rgba(26,26,46,.12), rgba(26,26,46,.12));
}
body.dark .cb-face.done .cb-cell.cb-par {
  background-image: linear-gradient(rgba(232,197,71,.18), rgba(232,197,71,.18)), linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12));
}

/* ── Sudoku « plus grand que » (phase 3, face 5 : dessus) ──
   Chevrons dans un SVG posé sur la face (cube-variantes.js, signsSvg), en
   unités de case (viewBox 9 × 9) : il tourne avec la face. Au-dessus des
   cases, sous le voile d'ombre de la face (::after). Halo couleur de case
   sous le trait, comme .gt-svg du site ; trait en unités de case (0,038 ≈
   2,5 px sur une face de 600 px). Notes resserrées à 80 % (comme le site) :
   les chevrons, à cheval sur le bord, ne touchent pas les 2, 4, 6, 8. */
.cb-gt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cb-gt path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cb-gt-halo { stroke: var(--cell-bg); stroke-width: 0.075; }
.cb-gt-sign { stroke: var(--text); stroke-opacity: .82; stroke-width: 0.038; }
.cb-face[data-v="plus-grand-que"] .cb-notes { width: 80%; height: 80%; }

/* ── Sudoku Killer (phase 4, face 6 : dessous) ──
   Pointillés des cages dans un SVG posé sur la face (cube-variantes.js,
   cagesSvg), en unités de case, comme les chevrons ; trait et tirets en px
   réels (vector-effect), valeurs de .kc-svg du site. Somme dans le coin de la
   1ʳᵉ case de chaque cage (data-sum, posé par cube-variantes.js : render()
   ne touche pas aux attributs) : ::before en « background: inherit » (fond de
   la case, surlignage compris) PAR-DESSUS les pointillés, comme .ks du site ;
   notes de cette case descendues sous la somme. */
.cb-cages { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cb-cages path {
  fill: none; stroke: var(--text); stroke-opacity: .62;
  stroke-width: 1.2px; stroke-dasharray: 3.5 2.5; stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.cb-cell.cb-ks { position: relative; }
.cb-cell.cb-ks::before {
  content: attr(data-sum);
  position: absolute; left: 1px; top: 0; z-index: 2;
  padding: 0 2px 1px 1px; border-radius: 0 0 3px 0;
  background: inherit;
  font: 500 max(7px, calc(var(--s, 320px) * 0.019))/1.15 'DM Mono', monospace;
  color: var(--text); opacity: .9;
  pointer-events: none;
}
html.cb-big .cb-cell.cb-ks::before { font-size: max(8px, calc(var(--s, 320px) * 0.023)); }
.cb-cell.cb-ks .cb-notes { height: 72%; margin-top: 22%; }
/* le voile d'ombre de la face (cube-3d.css) reste au-dessus des sommes (z-index 2) */
.cb-face::after { z-index: 3; }

/* ── Règle de la face posée à plat (#cb-rule, choix JC du 18/10) ──
   Empilée : juste sous le cube, avant le message (même « order », placée
   avant dans le HTML), à 14 px comme l'était le message (la flèche du bas
   déborde de 11 px sous la face) ; sa place (18 + 14 px) est comptée dans
   AROUND (cube-3d.js). Côte à côte : dans la colonne de droite, sous le
   statut. Une ligne réservée, même vide : rien ne saute d'une face à l'autre. */
.cb-rule {
  order: 4;
  min-height: 1.3em; margin: 0;
  text-align: center;
  font: 500 0.88rem/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  text-wrap: balance;   /* si une règle passe un jour sur 2 lignes : coupée au milieu */
}
/* Face Killer posée : 2 lignes réservées (choix JC du 18/10, comme les 2 lignes de
   #killer-combos du site) — la règle et « Touchez une case… », puis l'aide aux
   combinaisons ; les boutons ne bougent plus d'une cage à l'autre. */
.cb-rule.cb-rule2 { min-height: 2.6em; }
.cb-rule b { font-weight: 600; }
.cb-rule-sub { color: var(--muted); font-weight: 400; }
/* combinaisons en étiquettes (.k-c du site) ; la seule possible en or (texte fixe :
   le fond or ne change pas en sombre). Hauteur ≤ celle de la ligne (1,3 em). */
.cb-kc {
  display: inline-block; vertical-align: top; margin: 0 .06em; padding: 0 .3em;
  font: 500 0.8rem/1.2 'DM Mono', monospace;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.cb-kc.cb-k1 { background: #e8c547; border-color: #e8c547; color: #1a1a2e; font-weight: 700; }

/* ── Emoji de la variante sur la pastille de sa face ── */
.cb-faces button[data-emoji] { position: relative; }
.cb-faces button[data-emoji]::after {
  content: attr(data-emoji);
  position: absolute; top: -6px; right: -6px;
  font-size: 14px; line-height: 1;
  pointer-events: none;
}

/* 18/10 soir (retour JC) : nom du cube sous le titre de la carte 📊 (cube-stats.js) —
   moins d'espace que .cb-card-text seul, la grille des chiffres suit de près */
#cb-stats-cube { margin-bottom: 8px; }