/* ===================================================================================================
   randooom (site « hasard ») : les outils. Posé sur core.css (la DA figée de la série).
   Mêmes règles : le blanc et la couleur de la page ; le cadre maison pour tout ce qu'on touche ;
   les résultats en Anton (comme les chiffres de clooock) ; des glissements, pas de fondus.
   =================================================================================================== */
.hero { --pkf: clamp(56px, min(10.5vw, 11.4vh), 140px); }
@media (min-width: 721px) and (max-height: 780px) { .hero { --pkf: clamp(52px, min(10.5vw, 9.8vh), 120px); } }
@media (max-width: 720px) { .hero { --pkf: clamp(52px, min(15vw, 9.6vh), 92px); } }

/* ---------- Petits éléments communs ---------- */
.tb-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 12px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tb-stat b { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.tb-note { padding: 0 10px; font-size: 14px; font-weight: 500; opacity: .8; white-space: nowrap; }
.tb-count:empty { display: none; }
.tb-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--white); color: var(--bg); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.chip-btn:disabled { opacity: .45; }
.bump { animation: bump .28s var(--ease); }
.nav-more { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 16px; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.nav-more:hover { background: var(--frame-hi); }
/* La borne d'un tirage (« between [1] and [100] ») : le cadre maison, comme un choix au toucher */
.bound { display: inline-flex; align-items: baseline; padding: .1em .42em .14em; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); font: inherit; line-height: 1.3; font-variant-numeric: tabular-nums; transition: background-color .15s, transform .12s; }
.bound:hover { background: var(--frame-hi); }
.bound:active { transform: scale(.97); }
/* Une question, tapée ou pensée : une ligne dans le cadre maison */
.q-input { width: min(560px, 100%); min-height: 54px; padding: 0 20px; border: 0; border-radius: var(--r); background: var(--frame); color: var(--white); font: inherit; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; text-align: center; outline: none; transition: background-color .15s; }
.q-input::placeholder { color: color-mix(in srgb, var(--white) 62%, transparent); }
.q-input:hover, .q-input:focus { background: var(--frame-hi); }
.q-input:focus-visible { box-shadow: 0 0 0 3px var(--white); }
/* Les derniers résultats, en petites pastilles sous les boutons */
.history { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(720px, 100%); max-height: 64px; overflow: hidden; margin-top: calc(var(--gap) * -.5); }
.h-chip { padding: 3px 10px; border-radius: 9px; background: var(--frame); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-chip.is-new { background: var(--white); color: var(--bg); animation: slide-in .32s var(--ease); }
.h-chip:not(.is-new) { opacity: .85; }
button.h-chip, .tool--color .h-chip { cursor: pointer; }
@keyframes slide-in { from { transform: translateX(-14px); } }
.r-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(720px, 100%); }
.r-chip { min-width: 2.2em; padding: 4px 12px; border-radius: 12px; background: var(--frame); font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; text-align: center; animation: chip-up .34s var(--ease) both; }
.r-chip.is-first { background: var(--white); color: var(--bg); }
/* Des glissements, jamais de fondus : la pastille monte et se dévoile par le bas (cachée tant qu'elle attend son tour). */
@keyframes chip-up { from { transform: translateY(14px); clip-path: inset(100% -10px -10px -10px); } to { clip-path: inset(-10px); } }

/* ---------- Le rouleau : la roue de clooock, en grand, pour un résultat ---------- */
.reel-hit { display: inline-flex; justify-content: center; max-width: 100%; border-radius: .2em; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.reel-hit:focus-visible .reel::before { box-shadow: 0 0 0 3px var(--white); }
.reel { position: relative; display: grid; height: 3.4em; max-width: 100%; font-family: var(--f-display); font-weight: 400; font-size: var(--pkf); line-height: 1; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 32%, #000 68%, rgba(0, 0, 0, .5) 86%, transparent 100%); }
.reel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.12em; margin-top: -.56em; border-radius: .14em; background: var(--frame); transition: background-color .15s; }
.reel-hit:hover .reel::before { background: var(--frame-hi); }
.reel .wheel-track { position: absolute; inset: 0; }
.reel-sizer { display: grid; align-self: center; visibility: hidden; }
.reel-sizer span { grid-area: 1 / 1; height: 0; overflow: hidden; padding: 0 .32em; white-space: nowrap; }
.reel .w-item { overflow: hidden; text-overflow: ellipsis; padding: 0 .2em; }
.reel--num { min-width: 2.4em; }
.reel--letter { min-width: 1.6em; }
.reel--word { min-width: 2.6em; }
.reel--name { font-size: clamp(42px, min(7.6vw, 9.6vh), 112px); min-width: 3em; max-width: min(100%, 11em); }
.zoom-box { display: flex; justify-content: center; max-width: 100%; }
[data-answer="yes"] .reel::before, [data-answer="no"] .reel::before { background: var(--frame-hi); }

/* ---------- Cartes Flip (apparence « Flip » du nombre et de la lettre ; base.js → makeFlip) ----------
   La même allure que le Flip de clooock (flipCard, horloge et minuteurs) : une carte d'un ton plus foncé que la page, un trait
   au milieu ; sur une couleur claire (jaune…), la carte jaune foncé et le chiffre à l'encre. contain: paint : la moitié qui
   bascule (en 3D) ne compte pas dans la place prise (sinon la mesure du plein écran la voit et rapetisse tout). */
.flip-card { --fc-bg: color-mix(in srgb, var(--bg) 70%, #000); --fc-ink: var(--white); position: relative; display: inline-grid; padding: .05em .16em; border-radius: .1em; background: var(--fc-bg); color: var(--fc-ink); font-family: var(--f-display); font-weight: 400; line-height: 1.12; font-variant-numeric: tabular-nums; white-space: nowrap; isolation: isolate; contain: paint; user-select: none; -webkit-user-select: none; }
:root[data-light] .flip-card { --fc-bg: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.fc-sizer { display: grid; visibility: hidden; }
.fc-sizer > span { grid-area: 1 / 1; text-align: center; }
.fc-h { position: absolute; inset: 0; display: grid; place-items: center; padding: inherit; border-radius: inherit; background: var(--fc-bg); transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-top { clip-path: inset(0 0 50% 0); }
.fc-bot { clip-path: inset(50% 0 0 0); }
.fc-fall, .fc-rise { z-index: 1; }
.flip-card::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; height: max(2px, .03em); transform: translateY(-50%); background: var(--bg); pointer-events: none; }
/* Une seule carte (nombre, lettre) : à la place du rouleau, dans la même hauteur (rien ne bouge quand on change d'apparence). */
.flip-hit { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--pkf) * 3.4); max-width: 100%; border-radius: .2em; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.flip-hit .flip-card { font-size: min(calc(var(--pkf) * 2.3), calc((100vw - 48px) / (var(--fc-w, 1.5) + .32))); transition: box-shadow .15s; }
@media (hover: hover) { .flip-hit:hover .flip-card { box-shadow: 0 0 0 4px var(--frame-hi); } }
.flip-hit:focus-visible .flip-card { box-shadow: 0 0 0 3px var(--white); }
.flip-hit[hidden], .hero:not(.face-flip) .flip-hit { display: none; }
.hero.face-flip .zoom-box > .reel-hit { display: none; }
/* Plein écran : la carte grandit avec la taille − / + (la hauteur de la carte, plus celle du rouleau). */
.hero.is-fs .flip-hit { height: auto; max-width: none; flex-shrink: 0; }
.hero.is-fs .flip-hit .flip-card { font-size: calc(var(--pkf) * 1.85); }
/* Le bouton « apparence » de la barre de l'outil (page normale) : en plein écran, celui de la barre du plein écran suffit. */
.tbar [data-face] .face-lbl:empty { display: none; }
.hero.is-fs .tbar [data-face] { display: none; }

/* ---------- Liste de noms : la colonne de droite, dans le cadre maison ---------- */
.entries { display: flex; flex-direction: column; width: 100%; min-height: 0; border-radius: var(--r); background: var(--frame); text-align: left; overflow: hidden; }
.entries-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.entries-n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--white); color: var(--bg); font-size: 13px; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; }
.entries-text { flex: 1; min-height: 120px; width: 100%; margin: 0; padding: 4px 16px 16px; border: 0; background: transparent; color: var(--white); font: inherit; font-size: 17px; line-height: 1.55; resize: none; outline: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--white) 40%, transparent) transparent; }
.entries-text::placeholder { color: color-mix(in srgb, var(--white) 60%, transparent); }
.entries:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 70%, transparent); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 48px); align-items: stretch; width: min(1120px, 100%); }
.split-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.4vh, 26px); min-width: 0; }
.split > .entries { height: clamp(220px, calc(100svh - 400px), 480px); }
.split--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(860px, 100%); }
.hero.is-fs .split > .entries, .hero.is-fs .split { grid-template-columns: minmax(0, 1fr); }
.hero.is-fs .split > .entries { display: none; }

/* ---------- Roue : deux couleurs, le pointeur à droite, le moyeu blanc plein ---------- */
.tool--wheel { --wd: clamp(260px, min(calc(100svh - 312px), 50vw), 600px); }
.wh-stage { display: grid; grid-template-columns: auto 300px; gap: clamp(24px, 4vw, 64px); align-items: center; }
.wh-stage > .entries { height: var(--wd); }
.wh-zoom { padding: 0 18px; }
.wh { position: relative; width: var(--wd); aspect-ratio: 1; }
.wh-svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 18px 40px var(--shadow)); }
.wh.is-spinning .wh-svg { cursor: default; }
.wh-back { fill: var(--bg); }
.wh-rim { fill: none; stroke: var(--white); stroke-width: 3.2; }
.wh-seg { stroke: var(--bg); stroke-width: .6; }
.wh-seg.s0 { fill: var(--white); }
.wh-seg.s1 { fill: var(--frame-hi); }
.wh-seg.s2 { fill: var(--frame); }
.wh-txt { font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; pointer-events: none; }
.wh-txt.s0 { fill: var(--bg); }
.wh-txt.s1, .wh-txt.s2 { fill: var(--white); }
.wh.is-empty .wh-txt { opacity: .7; }
/* Le pointeur : un triangle blanc qui bat à chaque part */
.wh-pointer { position: absolute; right: -10px; top: 50%; width: 46px; height: 40px; margin-top: -20px; transform-origin: 85% 50%; filter: drop-shadow(0 4px 10px var(--shadow)); }
.wh-pointer i { position: absolute; inset: 0; background: var(--white); clip-path: polygon(0 50%, 100% 0, 88% 50%, 100% 100%); border-radius: 4px; }
.wh-pointer.flap { animation: flap .14s ease-out; }
@keyframes flap { 40% { transform: rotate(-16deg); } }
.wh-hub { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--bg); font-family: var(--f-display); font-size: clamp(20px, calc(var(--wd) * .07), 38px); letter-spacing: .02em; text-transform: uppercase; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px var(--white), 0 10px 28px var(--shadow); transition: transform .15s var(--ease), box-shadow .2s; }
.wh-hub:hover { box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px var(--white), 0 0 0 16px color-mix(in srgb, var(--white) 25%, transparent); }
.wh-hub:active { transform: translate(-50%, -50%) scale(.95); }
.wh.is-spinning .wh-hub { pointer-events: none; }
.hero.is-fs .tool--wheel { --wd: min(calc(100svh - 200px), 86vw); }
.hero.is-fs .wh-stage { grid-template-columns: auto; }
.hero.is-fs .wh-stage > .entries { display: none; }

/* ---------- Pile ou face : des pièces blanches, en 3D ---------- */
.coins { --cd: clamp(150px, min(30vh, 26vw), 270px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--cd) * .1); max-width: min(980px, 100%); min-height: calc(var(--cd) * 1.04); perspective: 1200px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.coins[data-n="2"] { --cd: clamp(130px, min(26vh, 22vw), 230px); }
.coins[data-n="3"] { --cd: clamp(110px, min(22vh, 19vw), 200px); }
.coins[data-n="5"] { --cd: clamp(84px, min(17vh, 14vw), 150px); }
.coins[data-n="10"] { --cd: clamp(64px, min(11.5vh, 11vw), 112px); }
.coins:focus-visible .coin-face { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--white); }
.coin-hop { width: var(--cd); height: var(--cd); }
.coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.coin-edge { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--white) 72%, var(--bg)); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 10px 22px var(--shadow)); }
.coin-face--h { transform: translateZ(3.2px); }
.coin-face--t { transform: rotateX(180deg) translateZ(3.2px); }
.coin-face svg { display: block; width: 100%; height: 100%; max-width: none; }
.cf-disc { fill: var(--white); }
.cf-ring { fill: none; stroke: var(--bg); stroke-width: 3; }
.cf-reed { stroke: var(--bg); stroke-width: 2; opacity: .55; }
.cf-mark { fill: var(--bg); }
.cf-mark--line { fill: none; stroke: var(--bg); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.cf-word { fill: var(--bg); font-family: var(--f-display); font-size: 40px; letter-spacing: .04em; }

/* ---------- Dés : blancs, des points de la couleur de la page ; les autres, des formes avec le chiffre ---------- */
.dice { --dd: clamp(84px, min(19vh, 15vw), 150px); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--dd) * .22); max-width: min(980px, 100%); min-height: calc(var(--dd) * 1.25); align-items: center; cursor: pointer; }
.dice[data-n="1"] { --dd: clamp(130px, min(28vh, 22vw), 220px); }
.dice[data-n="2"] { --dd: clamp(110px, min(24vh, 19vw), 190px); }
.dice[data-n="3"], .dice[data-n="4"] { --dd: clamp(96px, min(21vh, 16vw), 160px); }
.dice[data-n="7"], .dice[data-n="8"], .dice[data-n="9"], .dice[data-n="10"] { --dd: clamp(64px, min(13vh, 10vw), 104px); }
.die { position: relative; width: var(--dd); height: var(--dd); padding: 0; border: 0; border-radius: 22%; background: var(--white); color: var(--bg); box-shadow: 0 12px 26px var(--shadow), inset 0 -6px 0 color-mix(in srgb, var(--bg) 14%, var(--white)); transition: transform .25s var(--ease), box-shadow .2s; }
.die:not(.die--d6) { background: transparent; box-shadow: none; filter: drop-shadow(0 12px 22px var(--shadow)); }
.die svg { display: block; width: 100%; height: 100%; max-width: none; }
.die-shape { fill: var(--white); stroke: var(--white); stroke-width: 4; stroke-linejoin: round; }
.die-num { fill: var(--bg); font-family: var(--f-display); }
.pips { position: absolute; inset: 14%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center; }
.pips i { width: 62%; aspect-ratio: 1; border-radius: 50%; }
.pips i.on { background: var(--bg); }
.die.is-held { transform: translateY(-10px); box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--white), 0 18px 30px var(--shadow); }
.die:not(.die--d6).is-held { filter: drop-shadow(0 0 0 var(--white)) drop-shadow(0 12px 22px var(--shadow)); }
.die.is-held::after { content: attr(data-keep); position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; background: var(--white); color: var(--bg); font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.die.is-rolling { animation: die-roll .64s cubic-bezier(.3, .7, .3, 1); }
@keyframes die-roll { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(var(--rx), -26%) rotate(calc(var(--rr) * .4)); } 60% { transform: translate(calc(var(--rx) * -.4), 4%) rotate(calc(var(--rr) * .85)); } 100% { transform: translate(0, 0) rotate(var(--rr)); } }
.lead .tot { font-family: var(--f-display); font-weight: 400; font-size: 1.6em; line-height: 1; vertical-align: -.12em; margin-left: .15em; display: inline-block; }

/* ---------- Boule magique : blanche, une fenêtre ronde de la couleur de la page, un triangle blanc ---------- */
.ball { --bd: clamp(190px, min(34vh, 28vw), 330px); position: relative; width: var(--bd); height: var(--bd); padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--white) 0 18%, color-mix(in srgb, var(--white) 88%, var(--bg)) 62%, color-mix(in srgb, var(--white) 70%, var(--bg)) 100%); box-shadow: 0 24px 50px var(--shadow); display: flex; align-items: center; justify-content: center; outline: none; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease); }
.ball:hover { transform: scale(1.02); }
.ball:focus-visible { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--white), 0 24px 50px var(--shadow); }
.ball-win { position: relative; width: 52%; height: 52%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 calc(var(--bd) * .02) color-mix(in srgb, var(--white) 75%, var(--bg)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ball-tri { position: relative; width: 86%; height: 78%; margin-top: 8%; display: flex; align-items: flex-start; justify-content: center; padding-top: 16%; clip-path: polygon(50% 100%, 0 6%, 100% 6%); background: var(--white); color: var(--bg); transform: translateY(70%) scale(.6) rotate(10deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.ball.is-shown .ball-tri, .ball:not([data-kind]) .ball-tri { transform: none; opacity: 1; }
.ball-ans { width: 76%; font-weight: 800; font-size: calc(var(--bd) * .06); line-height: 1.12; text-transform: uppercase; letter-spacing: .02em; text-align: center; text-wrap: balance; }

/* ---------- Tarot : un paquet, une carte qui sort et se retourne ---------- */
.tarot { --tw: clamp(110px, min(20vh, 15vw), 190px); display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 60px); min-height: calc(var(--tw) * 1.7); perspective: 1400px; }
.deck { position: relative; width: var(--tw); aspect-ratio: 3 / 5; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s var(--ease); }
.deck:hover { transform: translateY(-4px); }
.deck i, .deck-top { position: absolute; inset: 0; border-radius: 14px; }
.deck i { background: color-mix(in srgb, var(--white) 30%, var(--bg)); box-shadow: 0 2px 0 var(--bg); }
.deck i:nth-child(1) { transform: translate(8px, 8px); opacity: .55; }
.deck i:nth-child(2) { transform: translate(5px, 5px); opacity: .75; }
.deck i:nth-child(3) { transform: translate(2.5px, 2.5px); }
.deck-top, .tc-back { background: var(--frame-hi); border: 3px solid var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px var(--shadow); }
.deck-top { background: var(--bg); }
.deck-top svg, .tc-back svg { width: 74%; height: auto; }
.tb-line { fill: none; stroke: var(--white); stroke-width: 2.4; }
.tb-star { fill: var(--white); }
.tarot:has(.tcard:not([hidden])) .deck { width: calc(var(--tw) * .62); }
.tcard { position: relative; width: var(--tw); aspect-ratio: 3 / 5; padding: 0; border: 0; background: none; cursor: pointer; }
.tc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(-60%) rotateY(180deg); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tcard.is-up .tc-inner { transform: none; }
.tc-back, .tc-front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tc-back { transform: rotateY(180deg); background: var(--bg); }
.tc-front { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12% 8% 10%; background: var(--white); color: var(--bg); box-shadow: 0 16px 34px var(--shadow); }
.tc-num { font-family: var(--f-display); font-size: calc(var(--tw) * .12); line-height: 1; }
.tc-emb { width: 58%; height: auto; fill: var(--bg); }
.tc-emb .emb-line { fill: none; stroke: var(--bg); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-emb .emb-thick { stroke-width: 5; }
.tc-emb .emb-inv { stroke: var(--white); }
.tc-name { font-weight: 800; font-size: calc(var(--tw) * .085); line-height: 1.1; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.tc-ans { padding: 2px 14px; border-radius: 10px; background: var(--bg); color: var(--white); font-family: var(--f-display); font-size: calc(var(--tw) * .16); line-height: 1.1; }
.t-line { min-height: 1.45em; max-width: 34em; margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; line-height: 1.45; text-wrap: balance; transform: translateY(12px); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.t-line.is-shown { transform: none; opacity: 1; }

/* ---------- Équipes : des cartes dans le cadre maison ---------- */
.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; max-height: clamp(180px, calc(100svh - 420px), 440px); overflow: auto; scrollbar-width: thin; text-align: left; }
.teams[data-n="2"], .teams[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.teams[data-n="3"], .teams[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team { padding: 14px 16px 16px; border-radius: var(--r); background: var(--frame); }
.team-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.team-h span { font-family: var(--f-body); font-weight: 700; font-size: 13px; opacity: .8; }
.team-list { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; line-height: 1.6; }
.teams.is-dealt .team-list li { animation: deal .38s var(--ease) both; animation-delay: calc(var(--i) * 40ms + var(--k) * 70ms); }
@keyframes deal { from { transform: translate(-24px, -10px) rotate(-4deg); clip-path: inset(-10px 100% -10px -10px); } to { clip-path: inset(-10px); } }
.teams.is-empty .team { min-height: 120px; background: color-mix(in srgb, var(--white) 9%, transparent); }

/* ---------- Liste mélangée ---------- */
.shuffled-box { display: flex; flex-direction: column; height: clamp(220px, calc(100svh - 420px), 460px); border-radius: var(--r); background: var(--frame); text-align: left; overflow: hidden; }
.shuffled { flex: 1; margin: 0; padding: 4px 16px 16px; list-style: none; overflow: auto; scrollbar-width: thin; font-size: 17px; line-height: 1.55; }
.shuffled li { display: flex; gap: 12px; }
.shuffled .ln { flex: none; min-width: 1.6em; font-family: var(--f-display); font-size: 1.15em; line-height: 1.35; opacity: .75; text-align: right; }
.shuffled.is-dealt li { animation: deal .36s var(--ease) both; animation-delay: calc(var(--k) * 35ms); }
.shuffled-box.is-empty .shuffled { display: flex; align-items: center; justify-content: center; }
.shuffled .ph { opacity: .7; font-weight: 500; }

/* ---------- Père Noël secret ---------- */
.santa { width: 100%; }
.santa[data-state="setup"] .s-drawn, .santa[data-state="drawn"] .s-setup { display: none; }
.s-setup, .s-drawn { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6vh, 28px); }
.santa.shake .s-setup { animation: nudge .3s var(--ease); }
.gift { width: clamp(110px, 20vh, 180px); }
.gift svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-box { fill: var(--white); }
.g-lid { fill: var(--white); }
.g-rib { stroke: var(--bg); stroke-width: 10; }
.g-bow { fill: none; stroke: var(--white); stroke-width: 7; stroke-linejoin: round; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; max-height: clamp(160px, calc(100svh - 420px), 420px); overflow: auto; }
.who { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--white); color: var(--bg); font-weight: 700; font-size: 18px; transition: transform .12s, background-color .15s; }
.who:active { transform: scale(.97); }
.who.is-seen { background: var(--frame); color: var(--white); }
.reveal-modal .rev-shown { display: none; }
.reveal-modal.is-open-name .rev-shown { display: inline; animation: chip-up .4s var(--ease); }
.reveal-modal.is-open-name .rev-hidden, .reveal-modal.is-open-name .rev-show-btn { display: none; }
.rev-hidden { opacity: .5; letter-spacing: .1em; }
.hero.is-private .tbar { display: none; }
.link-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; margin: 0 0 18px; padding: 0; list-style: none; overflow: auto; }
.link-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--tint); font-weight: 700; }
.link-copy { min-height: 40px; background: var(--bg); color: var(--white); }
.link-copy:hover { background: var(--bg); }
.links-card { width: min(480px, 100%); }

/* ---------- Tu préfères : deux grandes options, « or » au milieu ---------- */
.wyr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: min(980px, 100%); }
.wyr-opt { min-height: clamp(150px, 28vh, 260px); padding: 24px 34px; border: 0; border-radius: 24px; background: var(--frame); color: var(--white); font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, min(3vw, 4.6vh), 44px); line-height: 1.12; text-wrap: balance; transition: background-color .2s, color .2s, transform .2s var(--ease), opacity .25s; }
.wyr-opt:hover { background: var(--frame-hi); }
.wyr-opt.is-chosen { background: var(--white); color: var(--bg); transform: scale(1.02); }
.wyr.has-choice .wyr-opt:not(.is-chosen) { opacity: .55; }
.wyr-or { position: absolute; left: 50%; top: 50%; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 22px; text-transform: uppercase; }
.wyr.is-new .wyr-opt { animation: opt-in .42s var(--swift) both; }
.wyr.is-new .wyr-opt:last-child { animation-delay: 60ms; }
/* L'option glisse depuis la droite et se dévoile, sans fondu. */
@keyframes opt-in { from { transform: translateX(40px); clip-path: inset(-10px -10px -10px 100%); } to { clip-path: inset(-10px); } }
.counter { margin-left: .4em; font-size: .7em; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------- Action ou vérité : une grande carte ---------- */
.tod-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: min(860px, 100%); min-height: clamp(180px, 34vh, 320px); padding: clamp(24px, 4vh, 44px) clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--frame); }
.tod-kind { padding: 4px 14px; border-radius: 10px; background: var(--white); color: var(--bg); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.tod-text { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, min(3.6vw, 5.6vh), 56px); line-height: 1.12; text-wrap: balance; }
.tod-card.is-new .tod-text, .tod-card.is-new .tod-kind { animation: opt-in .42s var(--swift) both; }
.tod-card[data-kind="dare"] { background: var(--frame-hi); }

/* ---------- Pierre, feuille, ciseaux ---------- */
.rps { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px); }
.rps .reel { font-size: clamp(40px, min(6.6vw, 8.6vh), 100px); }
.rps-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rps-who { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.rps-vs { font-family: var(--f-display); font-size: 26px; opacity: .7; }
.hands { display: flex; gap: 12px; justify-content: center; }
.hand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: clamp(96px, 11vw, 132px); min-height: clamp(96px, 14vh, 132px); padding: 10px; border: 0; border-radius: 20px; background: var(--white); color: var(--bg); font-weight: 600; font-size: 16px; transition: transform .12s, box-shadow .2s; }
.hand svg { width: 46%; height: auto; }
.hand:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--white) 28%, transparent); }
.hand:active { transform: scale(.96); }
.hand[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--white); }
.hero[data-res="win"] .rps-side:first-child .reel::before, .hero[data-res="lose"] .rps-side:last-of-type .reel::before { background: var(--white); }
.hero[data-res="win"] .rps-side:first-child .w-item.is-center, .hero[data-res="lose"] .rps-side:last-of-type .w-item.is-center { color: var(--bg); }

/* ---------- Listes générées (prénoms, mots) : de grands mots en Anton, chacun dans le cadre maison ---------- */
.gen { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; width: min(1040px, 100%); min-height: clamp(150px, 26vh, 260px); margin: 0; padding: 0; list-style: none; max-height: clamp(200px, calc(100svh - 360px), 520px); overflow: auto; }
.gen li { display: flex; }
.g-item { min-height: 0; padding: .18em .5em .22em; border: 0; border-radius: .28em; background: var(--frame); color: var(--white); font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, min(3.6vw, 6vh), 52px); line-height: 1.1; white-space: nowrap; transition: background-color .15s, color .15s, transform .12s; }
.g-item:hover { background: var(--frame-hi); }
.g-item:active { transform: scale(.97); }
.g-item.is-copied { background: var(--white); color: var(--bg); }
.gen[data-n="1"] .g-item { font-size: clamp(56px, min(8vw, 13vh), 120px); }
.gen[data-n="3"] .g-item { font-size: clamp(40px, min(5vw, 9vh), 80px); }
.gen[data-n="10"] .g-item { font-size: clamp(24px, min(2.6vw, 4.4vh), 38px); }
.gen[data-n="20"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-content: start; }
.gen[data-n="20"] .g-item { width: 100%; font-size: clamp(20px, 1.9vw, 26px); }
.gen.is-dealt li { animation: chip-up .36s var(--ease) both; animation-delay: calc(var(--k) * 40ms); }

/* ---------- Couleur au hasard : le code, en très grand ---------- */
.hex-out { padding: 0 .16em; border: 0; border-radius: .12em; background: var(--frame); color: var(--white); font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, min(13vw, 17vh), 200px); line-height: 1.12; letter-spacing: .02em; transition: background-color .15s, transform .12s; }
.hex-out:hover { background: var(--frame-hi); }
.hex-out:active { transform: scale(.98); }
.hex-out [data-v] { display: inline-block; }
.codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Pop-up du résultat : le nom en très grand, des confettis blancs ---------- */
.res-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #FFFFFF; }
:root[data-light] .res-confetti { color: var(--ink); }
.modal-card.res-card { width: min(640px, 100%); text-align: center; }
.res-eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.res-big { margin: 0 0 14px; font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 12vw, 140px); line-height: 1.02; overflow-wrap: anywhere; text-wrap: balance; animation: res-in .5s var(--swift) both; }
@keyframes res-in { from { transform: translateY(30%) scale(.9); } }
.res-text { margin: 0 0 22px; font-size: 17px; line-height: 1.5; }
.res-text:empty { display: none; }
.res-card .modal-actions { width: min(360px, 100%); margin: 0 auto; }

/* ---------- Pavé numérique ---------- */
.kp-card { width: min(340px, 100%); }
.kp-display { margin: 0; font-family: var(--f-display); font-size: 64px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kp-display.is-empty { opacity: .45; }
.kp-was { margin: 2px 0 16px; font-size: 14px; font-weight: 500; opacity: .8; }
.kp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp-grid button { min-height: 60px; border: 0; border-radius: 14px; background: var(--tint); color: var(--bg); font-family: var(--f-display); font-size: 28px; display: flex; align-items: center; justify-content: center; transition: background-color .12s, transform .1s; }
.kp-grid button:hover { background: var(--tint-2); }
.kp-grid button:active { transform: scale(.96); }
.kp-grid .kp-ok { background: var(--bg); color: var(--white); font-family: var(--f-body); font-weight: 700; font-size: 18px; }

/* ---------- Aperçu seulement : comparer les deux noms ---------- */
.mock-switch { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--white); color: var(--bg); box-shadow: 0 10px 28px var(--shadow); font-size: 13px; font-weight: 700; view-transition-name: mock; }
.mock-switch button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tint); color: var(--bg); font-weight: 700; font-size: 13px; }
.mock-switch button[aria-pressed="true"] { background: var(--bg); color: var(--white); }
.page > .mock-switch { --bg: var(--user, var(--tool)); --tint: color-mix(in srgb, var(--bg) 12%, #FFFFFF); }
.hero.is-fs ~ .mock-switch { display: none; }
::view-transition-group(mock), ::view-transition-new(mock) { animation: none; }
::view-transition-old(mock) { animation: none; opacity: 0; }

/* ---------- Écrans d'ordinateur bas (13 pouces) ---------- */
@media (min-width: 721px) and (max-height: 760px) {
  .tool--wheel { --wd: clamp(240px, min(calc(100svh - 290px), 46vw), 520px); }
  .hand { min-height: 88px; }
  .wyr-opt { min-height: clamp(130px, 25vh, 220px); }
}

@media (min-width: 721px) and (max-height: 720px) {
  .q-input { min-height: 46px; }
  .tool--yesno, .tool--magic, .tool--tarot, .tool--rps { --pkf: clamp(48px, min(10.5vw, 8.4vh), 110px); }
  .ball { --bd: clamp(180px, 30vh, 300px); }
  .tarot { --tw: clamp(104px, 17vh, 170px); }
  .rps .reel { font-size: clamp(36px, min(6.6vw, 7vh), 90px); }
  .hand { min-height: 78px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .tool--wheel { --wd: min(86vw, 52svh); }
  .wh-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; width: 100%; }
  .wh-stage > .entries { height: 180px; }
  .wh-pointer { right: -6px; width: 36px; height: 32px; margin-top: -16px; }
  .split, .split--two { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .split > .entries, .shuffled-box { height: 200px; }
  .teams, .gen, .who-grid { max-height: none; }
  .teams[data-n="3"], .teams[data-n="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-item { font-size: 28px; }
  .gen[data-n="1"] .g-item { font-size: 52px; }
  .gen[data-n="3"] .g-item { font-size: 36px; }
  .wyr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wyr-opt { min-height: 120px; padding: 18px 22px; }
  .wyr-or { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 18px; }
  .tb-note { display: none; }
  .tb-stat { padding: 0 8px; font-size: 14px; }
  .hands { width: 100%; }
  .hand { flex: 1; width: auto; min-height: 92px; }
  .rps .reel { font-size: clamp(34px, 11vw, 56px); }
  .tarot { --tw: clamp(118px, 34vw, 160px); gap: 18px; }
  .ball { --bd: min(72vw, 40svh); }
  .mock-switch { padding: 3px 3px 3px 10px; }
  .mock-switch button { min-height: 32px; padding: 0 10px; }
}

/* Autres outils : 8 cartes, deux rangées de 4 */
@media (min-width: 900px) { .tool-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Barre de consentement (Google Analytics) : une carte qui glisse depuis le bas, rien ne bouge dessous (comme clooock) */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 120; width: min(440px, calc(100vw - 32px)); padding: 16px 16px 14px; border-radius: 20px; background: var(--white); color: var(--bg); box-shadow: 0 24px 64px var(--shadow); font-family: var(--f-body); font-size: 15px; line-height: 1.45; transform: translateY(calc(100% + 32px)); transition: transform .45s var(--ease); }
.consent.is-in { transform: none; }
.consent-t { margin: 0 0 12px; font-weight: 500; }
.consent-t a { color: inherit; font-weight: 700; }
.consent-b { display: flex; gap: 8px; }
.consent-b button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.consent-yes { background: var(--bg); color: var(--white); }
.consent-no { background: var(--tint); color: var(--bg); }
@media (max-width: 720px) { .consent { left: 10px; bottom: 10px; width: calc(100vw - 20px); } .consent-b button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* ---------- Plein écran : la scène du visuel (dés, pièces, cartes, tarot, boule magique, bingo) épouse son visuel ----------
   Sur téléphone, la scène occupe d'habitude la place libre du bandeau (hauteur fixe, container-type: size) ; en plein écran,
   le visuel grandit avec la taille − / + : une scène de hauteur fixe le laissait déborder sur la phrase et le bouton sans
   que le calcul de taille le voie. Ici, la scène prend la hauteur du visuel et le calcul de taille le garde dans l'écran. */
.hero.is-fs :is(.dice-stage, .coin-stage, .card-stage, .tr-stage, .mg-stage, .bb-stage) { flex: none; min-height: 0; container-type: normal; }
/* Plein écran sur ordinateur : l'outil se centre dans la place libre, entre la citation et les deux barres du bas
   (réglages, taille), et non au milieu de l'écran : il gagne la place perdue en haut, le visuel peut être plus grand. */
@media (min-width: 721px) { .hero.is-fs:has(main.tool > .tbar) main.tool { margin-bottom: 60px; } }
/* Plein écran : le rouleau garde la largeur de son plus long résultat (sans plafond) ; trop grand, c'est la taille qui baisse,
   au lieu de couper le nom tiré (« Cap… » pour Capucine sur téléphone). */
.hero.is-fs .zoomable :is(.reel-hit, .reel, .n-cells) { max-width: none; flex-shrink: 0; }
/* Plein écran (nombre, lettre, oui ou non, tirage au sort, tombola, pierre-feuille-ciseaux) : le rouleau ne garde qu'un bout des
   valeurs voisines, estompées. Sa hauteur ne compte plus deux lignes entières au-dessus et en dessous du résultat : le résultat
   grandit d'autant (il restait petit sur ordinateur). */
.hero.is-fs :is(.tool--number, .tool--letter, .tool--yesno, .tool--names, .tool--raffle, .tool--rps) .reel { height: 2.2em; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 12%, #000 25%, #000 75%, rgba(0, 0, 0, .45) 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 12%, #000 25%, #000 75%, rgba(0, 0, 0, .45) 88%, transparent 100%); }

/* ===================================================================================================
   Version 2 : plusieurs langues, la palette qu'on lance, et le téléphone repensé.
   =================================================================================================== */

/* ---------- En-tête : la langue, le titre court ---------- */
.lang { min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--white); font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .04em; cursor: pointer; transition: background-color .15s; }
.lang:hover { background: var(--frame); text-decoration: none; }
.tt-short { display: none; }
.lang-pop { display: grid; gap: 8px; }
.lang-pop a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px; border-radius: var(--r); background: var(--tint); color: var(--bg); font-weight: 700; font-size: 18px; text-decoration: none; transition: background-color .15s; }
.lang-pop a:hover { background: var(--tint-2); }
.lang-pop a[aria-current] { background: var(--bg); color: var(--white); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.foot-langs a[aria-current] { font-weight: 700; text-decoration: underline; }
.foot-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- La liste (noms…) : à droite sur ordinateur ; sur téléphone, un bouton l'ouvre en feuille ---------- */
.entries-open { display: none; }
.tbar .entries-open, .entries-open--all { align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--white); font: inherit; font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.tbar .entries-open:hover, .entries-open--all:hover { background: var(--frame); }
.entries-open svg { flex: none; width: 18px; height: 18px; }
.eo-n { font-variant-numeric: tabular-nums; }
.entries-open--all { display: inline-flex; }
.entries-hold { display: none; }
.entries:not(.in-sheet) .entries-done { display: none !important; }
.entries-done { align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--white); color: var(--bg); font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.show-sm-flex { display: none !important; }

/* La feuille : la liste (ou le tableau du bingo) en grand, par-dessus la page */
.sheet-card { width: min(560px, 100%); height: min(680px, calc(100svh - 32px)); display: flex; }
.sheet-body { flex: 1; display: flex; min-height: 0; width: 100%; }
.sheet-body > * { flex: 1; height: auto !important; max-height: none !important; }
.sheet-card .in-sheet { --white: #FFFFFF; --bg: var(--accent); --frame: rgba(255, 255, 255, .17); --frame-hi: rgba(255, 255, 255, .27); display: flex !important; color: var(--white); background: color-mix(in srgb, var(--accent) 90%, #FFFFFF); box-shadow: 0 -10px 40px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-light] .sheet-card .in-sheet { --white: var(--ink); --frame: color-mix(in srgb, var(--ink) 12%, transparent); --frame-hi: color-mix(in srgb, var(--ink) 20%, transparent); }
.sheet-card .entries-text { font-size: 18px; }
.sheet-card .entries:focus-within { box-shadow: none; }

/* ---------- La palette qu'on lance : elle rebondit dans le bandeau ; la niche la rappelle ---------- */
.theme-fab.is-free { position: absolute; left: 0; top: 0; z-index: 40; cursor: grab; will-change: transform; transition: box-shadow .2s; }
.theme-fab.is-held { cursor: grabbing; box-shadow: 0 22px 44px var(--shadow); }
.theme-fab { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.fab-home { position: relative; z-index: 2; flex: none; width: 56px; height: 56px; padding: 0; border: 2.5px dashed color-mix(in srgb, var(--white) 75%, transparent); border-radius: 50%; background: var(--frame); color: var(--white); display: grid; place-items: center; pointer-events: auto; cursor: pointer; opacity: 0; transform: scale(.4) rotate(-90deg); transition: transform .4s var(--ease), opacity .25s, background-color .15s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fab-home.is-on { opacity: 1; transform: none; animation: niche-call 2.6s ease-in-out 1.2s infinite; }
.fab-home:hover { background: var(--frame-hi); }
.fab-home svg { width: 22px; height: 22px; }
.fab-home[hidden] { display: none; }
@keyframes niche-call { 0%, 80%, 100% { transform: none; } 88% { transform: scale(1.1) rotate(-12deg); } 94% { transform: scale(.96) rotate(6deg); } }
.page > .cbar .fab-home { color: var(--white); }

/* ---------- Une autre langue ? (proposée, jamais imposée) ---------- */
/* La proposition de langue se pose en bas à gauche (loin des listes et des boutons de l'outil) et monte depuis le bord de l'écran. */
.lang-hint { position: absolute; bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: max(var(--gutter), env(safe-area-inset-left, 0px)); z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; background: var(--white); color: var(--bg); box-shadow: 0 12px 30px var(--shadow); animation: hint-up .5s var(--ease) .8s both; }
@keyframes hint-up { from { transform: translateY(calc(100% + 60px)); } }
/* Sur une page d'outil, elle se range dans la rangée de Partager et Widget (en bas à gauche) ; sur téléphone, la flèche du bas lui laisse la place. */
.hero-acts .lang-hint { position: static; margin-left: 4px; }
@media (max-width: 720px) { .hero:has(.hero-acts .lang-hint) .scroll-down { display: none; } }
.lang-hint a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: inherit; font-weight: 700; text-decoration: none; }
.lang-hint a:hover { background: var(--tint); }
.lang-hint button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.hero.is-fs .lang-hint { display: none; }
/* Mode concentré (un tirage qui tourne seul, comme le bingo automatique) : la proposition de langue sort de l'écran par le bas, comme elle est entrée. */
.lang-hint { transition: translate .45s var(--swift); }
.hero.live-idle .lang-hint { translate: 0 calc(100% + 60px); pointer-events: none; }

/* ---------- Choix de langue (roue des langues) ---------- */
.hero.is-fs .lang { display: none; }

/* ---------- Pages des versions prêtes (préréglages) ---------- */
.crumbs { padding-top: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: inherit; }
.band--intro .content--intro { max-width: 760px; margin: 0 auto; }
/* Bloc calculé d'une page préréglée (tableau de probabilités, liste tirée des données) : même largeur que l'intro, collé à elle. */
.band--data .content--data { max-width: 760px; margin: 0 auto; }
.band--intro + .band--data { padding-top: 0; }
.nowrap { white-space: nowrap; }
.preset-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.preset-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--tint); color: var(--bg); font-weight: 700; text-decoration: none; transition: background-color .15s, transform .12s; }
.preset-link:hover { background: var(--tint-2); transform: translateY(-1px); }
/* Les plus demandées : rangée en tête de la partie basse d'un outil, et grille sur l'accueil */
.band--popular { padding: 22px 0 0; }
.band--popular + .band { padding-top: clamp(28px, 4vw, 48px); }
.pop-title { margin: 0 0 12px; text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pop-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pop-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--tint); color: var(--bg); font-weight: 700; text-decoration: none; transition: background-color .15s, transform .12s; }
.pop-link:hover { background: var(--tint-2); transform: translateY(-1px); }
.pop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pop-card { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 76px; padding: 12px 18px; border-radius: 18px; background: var(--tint); color: var(--bg); text-decoration: none; transition: background-color .15s, transform .25s var(--ease); }
.pop-card b { font-size: 17px; line-height: 1.25; }
.pop-card span { font-size: 14px; font-weight: 500; opacity: .75; }
.pop-card:hover { background: var(--tint-2); transform: translateY(-2px); }
@media (max-width: 720px) { .pop-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .pop-card { min-height: 64px; padding: 10px 12px; border-radius: 14px; } .pop-card b { font-size: 15px; } .pop-card span { font-size: 13px; } }

/* ---------- Écrans d'ordinateur bas (13 pouces) ---------- */
@media (min-width: 721px) and (max-height: 760px) {
  .tbar .chip-btn, .tbar .entries-open { min-height: 40px; }
  .dice[data-n="1"] { --dd: clamp(120px, 24vh, 180px); }
  .bingo-ball { --bb: clamp(140px, 24vh, 200px); }
}

/* ---------- Téléphone : une main, le pouce ---------- */
@media (max-width: 720px) {
  .tt-long { display: none; }
  .tt-short { display: inline; }
  .top-title { font-size: 20px; }
  /* La liste sort de la page : un bouton dans la barre l'ouvre en grand */
  .split > .entries, .wh-stage > .entries { display: none; }
  .tbar .entries-open { display: inline-flex; }
  .show-sm-flex { display: inline-flex !important; }
  .sheetable:not(.in-sheet) { display: none !important; }
  #sheet-modal { padding: 0; align-items: end; }
  #sheet-modal .sheet-card { width: 100%; height: min(86svh, 720px); animation: sheet-up .38s var(--swift); }
  #sheet-modal .sheet-body > * { border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* La barre du bas : des icônes, sur une seule ligne */
  .hero .tbar { flex-wrap: nowrap; gap: 2px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .hero .tbar::-webkit-scrollbar { display: none; }
  .tbar .tb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbar .chip-btn { min-width: 46px; justify-content: center; padding: 0 12px; }
  .tbar .bar-sep { margin: 0 2px; }
  /* Les gros boutons : pleine largeur, sous le pouce */
  .hero .tool .actions { width: 100%; }
  .hero .tool .actions .btn-primary { flex: 1 1 100%; min-height: 64px; font-size: 20px; }
  .hero .tool .actions .btn-ghost { flex: 1 1 auto; min-height: 54px; }
  .lead { font-size: 21px; line-height: 1.45; }
  .foot-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab-home { width: 50px; height: 50px; }
}
@media (max-width: 440px) {
  /* Petit téléphone : avec le bouton Partager, le nom de l'outil ne tient plus à côté du logo ; il reste pour les lecteurs d'écran et Google. */
  .top-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes sheet-up { from { transform: translateY(40%); } }
.tool--yesno .reel { text-transform: uppercase; }

/* Sur la partie blanche : la niche prend la couleur du site (fond plein, flèche blanche), comme la palette. */
.cbar.on-white .fab-home { background: var(--page); border-color: rgba(255, 255, 255, .75); color: #FFFFFF; box-shadow: 0 10px 28px var(--shadow); }
.cbar.on-white .fab-home:hover { background: var(--dark); }
:root[data-light] .cbar.on-white .fab-home { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 60%, transparent); }

/* Téléphone : « Plus d'outils » montre seulement le nom du milieu (sans les voisins estompés) ;
   sur téléphone, la proposition de langue colle au bord gauche. */
@media (max-width: 720px) {
  .mt-wheel { height: 40px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .mt-wheel .w-item:not(.is-center) { visibility: hidden; }
  .lang-hint { bottom: max(14px, env(safe-area-inset-bottom, 0px)); left: 12px; }
}

/* Guides : le titre tient sur deux ou trois lignes, le bouton de l'outil juste dessous ; l'article se lit sur le blanc. */
.hero--guide .guide-title { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.04; max-width: 18ch; }
.hero--guide .lead { max-width: 46ch; }
.hero--guide .actions { margin-top: 28px; }
.content--guide table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 16px; }
.content--guide th, .content--guide td { padding: 8px 12px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--dark, #222) 14%, transparent); }
.content--guide th { font-weight: 700; }
.content--guide .guide-date { margin-top: 32px; font-size: 14px; opacity: .7; }
@media (max-width: 640px) { .content--guide table { font-size: 14px; display: block; overflow-x: auto; } .hero--guide .guide-title { font-size: 38px; } }
.guide-cards .tool-card b { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; hyphens: auto; overflow-wrap: break-word; }

/* ---------- La série : liens vers les sites frères (src/series.mjs, commun à clooock et randooom) ---------- */
.tool-card-site { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.foot-series { display: grid; gap: 16px; padding: 32px 0; border-bottom: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.foot-series .foot-h { margin: 0; }
.foot-sister { display: grid; gap: 6px; }
.foot-sister-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.foot-sister-name { color: var(--white); font-size: 20px; font-weight: 800; text-decoration: none; }
.foot-sister-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-links--row { display: flex; flex-wrap: wrap; gap: 0 18px; }
@media (min-width: 900px) { .band--series .tool-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-sister .logo-word { --lf: 30px; padding-block: .45em; }
.foot-sister-top { align-items: center; }

/* ---------- Accueil (le même gabarit que celui de clooock) ----------
   Bandeau : la formule, le mini-jeu (pile ou face géant), la phrase des outils, « Trouver un outil ». Partie basse : tous les outils par famille, une valeur en Anton par carte. */
.hero--home { min-height: min(calc(100vh - var(--peek)), 1100px); min-height: min(calc(100svh - var(--peek)), 1100px); }
.home-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(1100px, 100%); margin: 0 auto; padding: 0 0 clamp(14px, 3vh, 24px); text-align: center; }
.home-formula { max-width: 640px; margin: 0; font-family: var(--f-body); font-weight: 700; font-size: clamp(26px, 2.47vw, 36px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.home-sub { max-width: 800px; margin: clamp(10px, 1.8vh, 18px) 0 0; font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; line-height: 1.45; text-wrap: balance; }
/* Trouver un outil */
.home-find { position: relative; z-index: 4; display: flex; gap: 6px; width: min(680px, 100%); margin-top: clamp(14px, 2.4vh, 24px); padding: 6px; border-radius: 18px; background: var(--frame); transition: background-color .15s; }
.home-find:focus-within { background: var(--frame-hi); }
.home-q { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; background: transparent; color: var(--white); font: inherit; font-size: 17px; font-weight: 500; outline: none; -webkit-appearance: none; appearance: none; }
.home-q::placeholder { color: var(--white); opacity: .62; }
.home-q::-webkit-search-cancel-button { display: none; }
.home-go { flex: none; height: 50px; padding: 0 20px; border: 0; border-radius: 13px; background: var(--white); color: var(--bg); font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .12s; }
.home-go:active { transform: scale(.97); }
.home-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; padding: 8px; border-radius: 18px; background: var(--white); color: var(--bg); text-align: left; box-shadow: 0 18px 40px var(--shadow); }
.home-results a { display: block; padding: 12px 14px; border-radius: 12px; color: inherit; font-weight: 700; text-decoration: none; }
.home-results a:hover, .home-results a.is-cur { background: color-mix(in srgb, var(--bg) 12%, transparent); }
.home-none { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 16px; border-radius: 18px; background: var(--white); color: var(--bg); font-weight: 600; text-align: left; }
/* Mini-jeu : pile ou face géant. La pièce au centre (le même dessin que l'outil), « Pile » à gauche et « Face » à droite
   dans le cadre maison ; on parie, elle saute et tourne (glissement, jamais de fondu). Un toucher sur la pièce la lance sans pari. */
.cg { display: flex; flex-direction: column; align-items: center; margin-top: clamp(12px, 2.4vh, 26px); }
.cg-row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 44px); }
.cg-coin { --cd: clamp(150px, min(24vh, 17vw), 220px); flex: none; width: var(--cd); height: var(--cd); padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cg-coin:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; }
.cg-coin .coin-hop { display: block; width: 100%; height: 100%; }
.cg-coin .coin { display: block; }
.cg-btn { flex: none; width: clamp(108px, 9.5vw, 140px); height: clamp(64px, 8vh, 80px); padding: 0 10px; border: 0; border-radius: 22px; background: var(--frame); color: var(--white); font: inherit; font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.cg-btn:hover { background: var(--frame-hi); }
.cg-btn:active { transform: scale(.95); }
.cg-btn.is-bet { background: var(--white); color: var(--bg); }
.hl-msg { position: relative; width: min(680px, 100%); height: 1.45em; margin: clamp(8px, 1.6vh, 16px) 0 0; overflow: hidden; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.45; }
.hl-msg .hg-in { display: block; white-space: nowrap; }
.hl-score { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .9; }
.hl-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.cg.is-win [data-cg-streak] { animation: hl-up .4s var(--ease); }
@keyframes hl-up { 40% { transform: translateY(-4px) scale(1.08); } }

/* ---------- Partie basse : tous les outils (le même gabarit que l'accueil de clooock) ----------
   Des familles qui se déplient (toutes ouvertes au départ) ; chaque carte : une illustration animée, le nom, une phrase, une valeur en Anton.
   Au survol, la carte prend la couleur foncée, la valeur s'envole et une flèche arrive. */
.band--home { padding: clamp(56px, 8vw, 104px) 0 40px; }
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.home-head .section-title { margin: 0; }
.home-head p { margin: 0; font-weight: 500; opacity: .8; }
.home-fam { margin-bottom: clamp(20px, 3vw, 40px); color: var(--bg); }
.home-fam summary { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 8px; padding: 0 4px; list-style: none; cursor: pointer; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.home-fam summary::-webkit-details-marker { display: none; }
.home-fam summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.home-fam h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.home-fam-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 700; }
.home-fam summary svg { flex: none; width: 20px; height: 20px; margin-left: auto; transition: transform .3s var(--ease); }
.home-fam[open] summary svg { transform: rotate(180deg); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.home-card { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 96px; padding: 16px 20px 16px 16px; border-radius: 22px; overflow: hidden; background: var(--tint); color: var(--bg); text-decoration: none; transition: transform .35s var(--ease), background-color .25s, color .25s, box-shadow .35s var(--ease); }
.home-art { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: color-mix(in srgb, var(--page) 13%, transparent); transition: background-color .25s, transform .35s var(--ease); }
.home-card-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.home-card-t b { font-size: 17px; font-weight: 700; line-height: 1.2; }
.home-card-t span { font-size: 14px; font-weight: 500; line-height: 1.35; opacity: .8; }
.home-card-go { position: absolute; right: 18px; top: 50%; display: flex; transform: translate(70px, -50%); transition: transform .35s var(--ease); }
.home-card-go svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .home-card:hover, .home-card:focus-visible { transform: translateY(-4px); background: var(--bg); color: var(--white); box-shadow: 0 18px 40px color-mix(in srgb, var(--bg) 30%, transparent); }
  .home-card:hover .home-art, .home-card:focus-visible .home-art { background: rgba(255, 255, 255, .18); transform: scale(1.06); }
  .home-card:hover .home-card-go, .home-card:focus-visible .home-card-go { transform: translate(0, -50%); }
}

/* Les illustrations (src/build/home-art.mjs) : toujours en mouvement (demande de Fabrice, 3 nov.), sauf si le visiteur
   a demandé moins d'animations. Chaque élément animé (classe an) porte son animation dans --a. */
.art { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.art .f { fill: currentColor; stroke: none; }
.art .o { opacity: .3; }
.art .t { stroke-width: 2.5; }
.art .an { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .art .an { animation: var(--a); }
}
/* Tirer au sort */
.art--widgets .wg-tile { transform-origin: 32px 37px; --a: k-plug 2.4s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes k-plug { 0%, 12% { transform: translateY(-22px) scale(.6); } 40%, 82% { transform: none; } 100% { transform: translateY(-22px) scale(.6); } }
.art--wheel .wh-spin { transform-origin: 29px 32px; --a: k-roulette 3s cubic-bezier(.15, .7, .25, 1) infinite; }
.art--yesnowheel .yw-spin { transform-origin: 32px 34px; --a: k-roulette 3s cubic-bezier(.15, .7, .25, 1) infinite; }
.art--decision .de-r { transform-origin: 32px 19px; --a: k-sway 1.8s ease-in-out infinite; }
.art--decision .de-l { transform-origin: 32px 37px; --a: k-sway 1.8s .9s ease-in-out infinite backwards; }
.art--names .na-sel { --a: k-pick3 2.6s cubic-bezier(.7, 0, .2, 1) infinite; }
.art--teams .te-a { transform-origin: 19px 51px; --a: k-hop 1.2s ease-in-out infinite; }
.art--teams .te-b { transform-origin: 45px 51px; --a: k-hop 1.2s .6s ease-in-out infinite backwards; }
.art--list .li-x { --a: k-nudge 1.4s ease-in-out infinite; }
.art--raffle .ra-t { transform-origin: 32px 32px; --a: k-rock 1.6s ease-in-out infinite; }
.art--santa .sa-lid { transform-origin: 32px 31px; --a: k-lid 1.8s ease-in-out infinite; }
/* Hasard */
.art--coin .co-flip { transform-origin: 32px 33px; --a: k-coin 1.6s ease-in-out infinite; }
.art--dice .di-roll { transform-origin: 32px 32px; --a: k-tumble 1.8s ease-in-out infinite; }
.art--number .nb-turn { transform-origin: 31px 32px; --a: k-quarter 3.2s cubic-bezier(.7, 0, .2, 1) infinite; }
.art--letter .le-hop { transform-origin: 32px 54px; --a: k-hop 1.1s ease-in-out infinite; }
.art--lottery .lo-1 { --a: k-bounce 1.2s ease-in-out infinite; }
.art--lottery .lo-2 { --a: k-bounce 1.2s .2s ease-in-out infinite backwards; }
.art--lottery .lo-3 { --a: k-bounce 1.2s .4s ease-in-out infinite backwards; }
.art--bingo .bi-1, .art--bingo .bi-2, .art--bingo .bi-3 { transform-box: fill-box; transform-origin: center; }
.art--bingo .bi-1 { --a: k-stamp 2.4s ease-out infinite; }
.art--bingo .bi-2 { --a: k-stamp 2.4s .3s ease-out infinite backwards; }
.art--bingo .bi-3 { --a: k-stamp 2.4s .6s ease-out infinite backwards; }
.art--cards .ca-draw { transform-origin: 38px 50px; --a: k-draw 2s cubic-bezier(.7, 0, .2, 1) infinite; }
.art--yesno .yn-y { transform-origin: 17px 33px; --a: k-alt 1.8s ease-out infinite; }
.art--yesno .yn-n { transform-origin: 46px 33px; --a: k-alt 1.8s .9s ease-out infinite backwards; }
.art--magic .ma-shake { transform-origin: 32px 32px; --a: k-shake 2.2s linear infinite; }
.art--tarot .ta-flip { transform-origin: 32px 32px; --a: k-cardflip 2.2s cubic-bezier(.7, 0, .2, 1) infinite; }
/* Jouer */
.art--rps .rp-a { transform-origin: 32px 30px; --a: k-snipA .9s ease-in-out infinite; }
.art--rps .rp-b { transform-origin: 32px 30px; --a: k-snipB .9s ease-in-out infinite; }
.art--tod .to-q { transform-origin: 15px 54px; --a: k-swing 1.6s ease-in-out infinite; }
.art--wyr .wy-l, .art--wyr .wy-r { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-width: 5.5; }
.art--wyr .wy-l { --a: k-branch 2.4s ease-in-out infinite; }
.art--wyr .wy-r { --a: k-branch 2.4s 1.2s ease-in-out infinite backwards; }
.art--bottle .bo-spin { transform-origin: 32px 32px; --a: k-roulette 3.2s cubic-bezier(.15, .7, .25, 1) infinite; }
/* Générer */
.art--namegen .ng-tag { transform-origin: 42px 32px; --a: k-swing 1.8s ease-in-out infinite; }
.art--babyname .bb-heart { transform-origin: 32px 32px; --a: k-beat 1.2s ease-in-out infinite; }
.art--words .wo-w { transform-box: fill-box; transform-origin: left center; --a: k-type 1.4s cubic-bezier(.7, 0, .2, 1) infinite alternate; }
.art--color .cl-fill { transform: translateY(24px); --a: k-fillup 2.6s cubic-bezier(.7, 0, .2, 1) infinite; }

@keyframes k-roulette { 0% { transform: rotate(0); } 70%, 100% { transform: rotate(874.3deg); } }
@keyframes k-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } }
@keyframes k-pick3 { 0%, 12% { transform: translateY(0); } 22%, 34% { transform: translateY(14px); } 44%, 56% { transform: translateY(28px); } 66%, 74% { transform: translateY(14px); } 84%, 100% { transform: translateY(28px); } }
@keyframes k-hop { 0%, 100% { transform: translateY(0) scale(1.06, .92); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(.95, 1.05); } 85% { transform: translateY(0) scale(1); } }
@keyframes k-rock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes k-lid { 0%, 30% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-11px) rotate(-7deg); } 60% { transform: translateY(-11px) rotate(5deg); } 75%, 100% { transform: translateY(0) rotate(0); } }
@keyframes k-coin { 0%, 100% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-9px) scaleX(-1); } 50% { transform: translateY(-12px) scaleX(1); } 75% { transform: translateY(-6px) scaleX(-1); } }
@keyframes k-tumble { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-10px) rotate(45deg); } 40% { transform: translateY(0) rotate(90deg); } 55% { transform: translateY(-4px) rotate(135deg); } 70%, 100% { transform: translateY(0) rotate(180deg); } }
@keyframes k-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes k-stamp { 0% { transform: scale(0); } 12% { transform: scale(1.35); } 20%, 85% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes k-draw { 0%, 15% { transform: translate(0, 0) rotate(0); } 45%, 70% { transform: translate(7px, -9px) rotate(14deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes k-alt { 0% { transform: scale(1); opacity: .3; } 10% { transform: scale(1.22); opacity: 1; } 22%, 45% { transform: scale(1); opacity: 1; } 50%, 100% { transform: scale(1); opacity: .3; } }
@keyframes k-shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35%, 45% { transform: rotate(9deg); } 10%, 20%, 30%, 40% { transform: rotate(-9deg); } }
@keyframes k-cardflip { 0%, 25% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 75%, 100% { transform: scaleX(1); } }
@keyframes k-branch { 0% { stroke-dashoffset: 100; } 30%, 45% { stroke-dashoffset: 0; } 50%, 100% { stroke-dashoffset: 100; } }
@keyframes k-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } }
@keyframes k-type { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
@keyframes k-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.09); } 60% { transform: scale(1); } }
@keyframes k-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes k-quarter { 0%, 18% { transform: rotate(0); } 25%, 43% { transform: rotate(90deg); } 50%, 68% { transform: rotate(180deg); } 75%, 93% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
@keyframes k-snipA { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes k-snipB { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes k-fillup { 0% { transform: translateY(54px); } 60%, 85% { transform: translateY(0); } 100% { transform: translateY(54px); } }

/* 13 pouces peu hauts : tout tient sans défiler */
@media (min-width: 721px) and (max-height: 820px) {
  .home-formula { font-size: clamp(24px, 4.2vh, 34px); }
  .cg-coin { --cd: clamp(130px, 22vh, 190px); }
  .home-sub { font-size: 18px; margin-top: 8px; }
  .home-find { margin-top: 14px; }
}
@media (min-width: 721px) and (max-height: 700px) { .cg-coin { --cd: clamp(120px, 20vh, 170px); } .home-sub { font-size: 17px; } }
/* Téléphone : les familles se replient, deux raccourcis par ligne */
@media (max-width: 720px) {
  .home-hero { justify-content: flex-start; padding-top: clamp(10px, 4vh, 40px); }
  .home-formula { font-size: 24px; }
  .home-sub { font-size: 16px; }
  .home-find { padding: 5px; border-radius: 16px; }
  .home-q { height: 48px; padding: 0 10px; font-size: 16px; }
  .home-go { height: 48px; padding: 0 14px; font-size: 15px; }
  .cg-coin { --cd: clamp(118px, min(36vw, 21vh), 160px); }
  .cg-btn { width: clamp(84px, 24vw, 104px); height: 60px; padding: 0 6px; border-radius: 18px; font-size: 24px; }
  .cg-row { gap: 12px; }
  .hl-msg { height: 2.9em; font-size: 16px; }
  .hl-msg .hg-in { white-space: normal; text-wrap: balance; }
  .band--home { padding-block: 48px 8px; }
  .home-head { margin-bottom: 18px; }
  .home-fam { margin-bottom: 10px; border-radius: 18px; background: var(--tint); }
  .home-fam summary { min-height: 58px; margin: 0; padding: 0 16px; }
  .home-fam-n { background: var(--white); }
  .home-cards { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 6px 8px; }
  .home-card { min-height: 72px; gap: 12px; padding: 10px; background: transparent; border-radius: 14px; }
  .home-art { width: 48px; height: 48px; border-radius: 14px; }
  .art { width: 34px; height: 34px; }
}

/* « Trouver un outil » : la liste des résultats passe par-dessus le bas du bandeau au lieu d'être coupée par lui
   (bug vu sur téléphone le 4/11/2026), et défile dans son cadre si elle est longue. Même règle sur clooock. */
.hero:has([data-find-res]:not([hidden])), .hero:has([data-find-none]:not([hidden])) { overflow: visible; z-index: 30; }
[data-find-res] { max-height: min(56vh, 420px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Roue (roue aléatoire, roue oui / non, roue de la décision) : réglages propres à l'outil (audit du 3/11) ---------- */
/* Le mot du moyeu (« Tourner », « Drehen »…) tient toujours dans le rond, quelle que soit sa longueur ou la police chargée. */
.tool--wheel .wh-hub { font-size: clamp(8px, min(calc(var(--wd) * .07), calc(var(--wd) * .39 / var(--hub-ch, 6))), 38px); line-height: 1; white-space: nowrap; overflow: hidden; }

/* La feuille de la liste (téléphone) : une ligne de boutons sous le titre (Mélanger, Trier, Liste de départ…).
   Règle commune aux outils qui l'utilisent (roue, tirage au sort, tombola). */
.sheet-tools { display: none; }
.entries.in-sheet .sheet-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 10px; }
.sheet-tools .chip-btn { min-height: 44px; padding: 0 14px; background: var(--frame); }
.sheet-tools .chip-btn:hover { background: var(--frame-hi); }
.sheet-tools .chip-btn[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.sheet-tools .chip-btn svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 720px) {
  .tool--wheel .tbar [data-wh-shuffle], .tool--wheel .tbar [data-wh-sort], .tool--wheel .tbar [data-entries-reset] { display: none; }
}

/* Écran large mais bas (téléphone couché, petite fenêtre) : la roue se règle sur la hauteur, la barre du bas reste visible. */
@media (min-width: 721px) and (max-height: 520px) {
  .tool--wheel { --wd: clamp(150px, calc(100svh - 228px), 520px); }
}
@media (max-width: 720px) and (max-height: 500px) {
  .tool--wheel { --wd: min(86vw, max(140px, calc(100svh - 236px))); }
  .tool--wheel .wh-stage { gap: 10px; }
}
/* Téléphone en plein écran : la flèche reste dans le cadre de la roue (le calcul de taille ne la voyait pas, elle touchait le bord de l'écran). */
@media (max-width: 720px) { .hero.is-fs .wh-pointer { right: 0; } }



/* ---------- Tirage au sort de noms : réglages propres à l'outil (audit du 3/11) ---------- */
/* La scène : le rouleau, et à sa place, quand on tire plusieurs noms, les pastilles des noms tirés (même hauteur, rien ne bouge). */
.nm-stage { position: relative; display: flex; justify-content: center; width: 100%; }
.nm-stage .r-more { position: absolute; inset: 0; max-width: none; align-content: center; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; cursor: pointer; }
.nm-stage.has-more .reel-hit { visibility: hidden; }
.tool--names .r-chip { animation-delay: calc(var(--k, 0) * 40ms); }
/* Le nom tiré : un peu moins haut sur les écrans d'ordinateur bas, pour que tout tienne. */
.tool--names .reel--name { font-size: clamp(42px, min(7.6vw, 8.6vh), 112px); }
/* L'historique est dans la pop-up « Déjà tirés » : plus de ligne en plus sous les boutons. */
.tool--names .history { display: none; }

/* « Déjà tirés : 3 sur 12 » : sa place est toujours gardée ; un toucher ouvre les derniers tirages (avec Réinitialiser). */
.nm-picked { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: calc(var(--gap) * -.45) 0; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--white); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s; }
.nm-picked:hover { background: var(--frame); }
.nm-picked svg { flex: none; width: 16px; height: 16px; opacity: .85; }
.nm-picked.is-off { visibility: hidden; }
.nm-rm-short { display: none; }

@media (max-width: 720px) {
  /* Le nom tiré, plus grand sur téléphone (le résultat d'abord). */
  .tool--names .reel--name { font-size: clamp(44px, min(15vw, 8.4vh), 72px); }
  .tool--names .r-more { gap: 6px; }
  .tool--names .r-chip { font-size: 22px; padding: 3px 10px; }
  /* Libellé court dans la barre du bas (« Sans remise ») ; Réinitialiser est dans la pop-up « Déjà tirés » :
     la barre tient sur une ligne, sans défilement. */
  .nm-rm-long { display: none; }
  .nm-rm-short { display: inline; }
  .tool--names .tbar [data-reset] { display: none; }
}

/* ---------- Générateur d'équipes : réglages propres à l'outil (audit du 3/11) ---------- */
/* Beaucoup de noms : les équipes défilent dans leur cadre, les boutons restent à l'écran. */
.tool--teams .teams { overscroll-behavior: contain; }
.tool--teams .team-h span { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Copier à côté du bouton principal (au lieu d'une ligne de plus) */
  .tool--teams .actions { flex-wrap: nowrap; }
  .tool--teams .actions .btn-primary { flex: 1 1 auto; min-width: 0; }
  .tool--teams .actions .btn-ghost { flex: none; min-height: 64px; padding: 0 20px; }
  /* Les équipes prennent la place libre et défilent au-delà (en-tête, phrase, boutons et barre restent visibles). */
  .tool--teams .teams { max-height: max(150px, calc(100svh - 400px)); overflow-y: auto; gap: 8px; }
  .tool--teams .team { padding: 10px 12px 12px; }
  .tool--teams .team-h { font-size: 21px; }
  .tool--teams .team-list { font-size: 15px; line-height: 1.5; }
  .tool--teams .team-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tool--teams .teams.is-empty .team { min-height: 96px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .tool--teams .teams { max-height: max(140px, calc(100svh - 384px)); }
}
/* Ordinateur : la liste est à l'écran, la barre ne garde que le son ; plus de trait de séparation tout seul. */
@media (min-width: 721px) { .tool--teams .tbar .bar-sep { display: none; } }

/* Plein écran : les équipes grandissent (taille − / +) sans défiler dans leur cadre ; les prénoms longs passent à la ligne
   au lieu d'être coupés ; au repos, il ne reste qu'elles. */
.hero.is-fs .tool--teams .teams { max-height: none; overflow: visible; width: min(1040px, calc(100vw - 32px)); }
.hero.is-fs .tool--teams .team-list li { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  /* Téléphone en plein écran : une équipe par ligne, sur toute la largeur, prénoms sur deux colonnes
     (deux équipes côte à côte coupaient « Équipe 1 » en deux lignes dès qu'elles grandissaient). */
  .hero.is-fs .tool--teams .teams { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hero.is-fs .tool--teams .team-list { columns: 2; column-gap: 16px; }
  .hero.is-fs .tool--teams .team-list li { break-inside: avoid; }
}

/* ---------- Mélanger une liste : réglages propres à l'outil (audit du 3/11) ---------- */
@media (max-width: 720px) {
  /* Le résultat prend la place libre ; Copier à côté du bouton principal. */
  .tool--list .shuffled-box { height: clamp(180px, calc(100svh - 372px), 460px); }
  .tool--list .actions { flex-wrap: nowrap; }
  .tool--list .actions .btn-primary { flex: 1 1 auto; min-width: 0; }
  .tool--list .actions .btn-ghost { flex: none; min-height: 64px; padding: 0 20px; }
}
/* Ordinateur : la liste est à l'écran, la barre ne garde que le son ; plus de trait de séparation tout seul. */
@media (min-width: 721px) { .tool--list .tbar .bar-sep { display: none; } }

/* Plein écran : la liste mélangée grandit (taille − / +), sans cadre vide ni défilement ; une longue liste passe
   sur plusieurs colonnes. Au repos, il ne reste qu'elle. */
.hero.is-fs .tool--list .shuffled-box { height: auto; min-height: 160px; width: min(860px, 100%); }
.hero.is-fs .tool--list .shuffled { overflow: visible; columns: 3 170px; column-gap: 28px; }
.hero.is-fs .tool--list .shuffled li { break-inside: avoid; }
.hero.is-fs .tool--list .shuffled-box.is-empty .shuffled { columns: auto; min-height: 11em; }
.hero.is-fs .tool--list .shuffled .ph { justify-content: center; text-align: center; }

/* ---------- Tirage au sort : un rouleau, la liste des gagnants en pastilles ---------- */
.reel--ticket { font-size: clamp(42px, min(7.6vw, 9.6vh), 112px); min-width: 3em; max-width: min(100%, 11em); }
.winners { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(760px, 100%); max-height: 120px; margin: 0; padding: 0; list-style: none; overflow: auto; }
.winners li { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 14px; background: var(--frame); }
.winners li.is-new { background: var(--white); color: var(--bg); animation: chip-up .4s var(--ease); }
.w-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.winners b { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
body[data-raffle="tickets"] .tool--raffle .split { grid-template-columns: minmax(0, 1fr); width: min(900px, 100%); }
body[data-raffle="tickets"] .tool--raffle .split > .entries, body[data-raffle="tickets"] .tool--raffle [data-entries-open], body[data-raffle="tickets"] .tool--raffle [data-unique] { display: none !important; }
.r-range[hidden] { display: none; }
@media (max-width: 720px) { .winners { max-height: 90px; } .winners b { font-size: 20px; } }

/* ---------- Audit du 3/11 ---------- */
/* Les bornes (1 à 100) : petites dans la phrase, mais le doigt les attrape sur 44 px de haut et de large. */
.tool--raffle .bound { position: relative; justify-content: center; min-width: 1.5em; }
.tool--raffle .bound::after { content: ""; position: absolute; inset: -7px -6px; }
.winners { overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 720px) {
  /* Le gagnant, plus grand sur téléphone (le résultat d'abord). */
  .tool--raffle .reel--ticket { font-size: clamp(44px, min(15vw, 9vh), 72px); }
  .winners { gap: 6px; max-height: 88px; }
  .winners li { padding: 4px 10px; gap: 6px; }
  .w-n { font-size: 11px; letter-spacing: .06em; }
  /* « Une chance par nom » est dans la feuille de la liste : la barre garde la liste, Recommencer et le son. */
  .tool--raffle .tbar [data-unique] { display: none !important; }
}

/* ---------- Père Noël secret v3 : une question par écran, du décor de Noël en blanc ---------- */
.tool--santa { position: static; justify-content: flex-start; gap: 0; padding-top: clamp(26px, 6vh, 64px); }
/* Le décor : une guirlande, des boules qui se balancent, un peu de neige (deux couleurs : le blanc et ses voiles) */
.xmas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--white); }
.garland { position: absolute; left: 0; right: 0; top: 96px; width: 100%; height: 34px; fill: none; stroke: color-mix(in srgb, var(--white) 55%, transparent); stroke-width: 1.6; }
.bb { position: absolute; top: 101px; left: var(--x); width: 2px; height: var(--len); margin-left: -1px; background: color-mix(in srgb, var(--white) 55%, transparent); transform-origin: 50% 0; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.bb::before { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--white); }
.bb i { position: absolute; left: 50%; top: 100%; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); border-radius: 50%; }
.bb i::before { content: ""; position: absolute; left: 50%; top: -6px; width: 9px; height: 7px; margin-left: -4.5px; border-radius: 2px 2px 1px 1px; background: var(--white); }
.bb-full { background: var(--white); box-shadow: inset calc(var(--d) * -.14) calc(var(--d) * -.14) 0 color-mix(in srgb, var(--bg) 14%, transparent); }
.bb-ring { border: calc(var(--d) * .14) solid var(--white); }
.bb-star { background: var(--frame-hi); }
.bb-star::after { content: ""; position: absolute; inset: 22%; background: var(--white); clip-path: polygon(50% 0, 61% 37%, 100% 38%, 69% 61%, 80% 100%, 50% 77%, 20% 100%, 31% 61%, 0 38%, 39% 37%); }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); }
:root[data-light] .xmas { color: var(--ink); }
/* Plein écran : la neige reste (et, sur ordinateur, la guirlande et ses boules, sous la citation, de part et d'autre du formulaire). */
.hero.is-fs .garland { top: 104px; }
.hero.is-fs .bb { top: 109px; }
@media (max-width: 720px) { .hero.is-fs .xmas :is(.garland, .bb) { display: none; } }

/* La scène du formulaire */
.tf { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(760px, 100%); margin: 0 auto; }
.tf-bar { position: relative; width: min(420px, 70%); height: 5px; margin: 0 auto clamp(18px, 3.4vh, 34px); border-radius: 3px; background: var(--frame); overflow: hidden; }
.tf-bar i { position: absolute; inset: 0; border-radius: 3px; background: var(--white); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--swift); }
.tf.is-start .tf-bar { visibility: hidden; }
.tf-view { position: relative; width: 100%; }
.tf-screen { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; text-align: left; }
.tf-screen[hidden] { display: none !important; }
.tf-screen.shake { animation: nudge .3s var(--ease); }
.tf-start, .tf-center { align-items: center; text-align: center; }
.tf-wide { width: 100%; }
.tf-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.tf-num { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; opacity: .85; font-variant-numeric: tabular-nums; }
.tf-num:empty { display: none; }
.tf-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, min(4.2vw, 6.4vh), 54px); line-height: 1.06; text-wrap: balance; }
.tf-title--big { font-size: clamp(40px, min(5.6vw, 8.4vh), 76px); }
.tf-help { margin: -4px 0 4px; max-width: 54ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; opacity: .92; }
.tf-small { font-size: 15px; }
.tf-count { min-height: 1.3em; margin: 0; font-size: 15px; font-weight: 600; opacity: .9; }
.tf-err { min-height: 0; margin: 10px 0 0; font-weight: 700; text-align: center; }
.tf-err:not(:empty) { padding: 10px 16px; border-radius: 12px; background: var(--white); color: var(--bg); animation: chip-up .3s var(--ease); }

/* Champs : une grande ligne soulignée, comme un formulaire */
.tf-input, .chip-in input, .tf-other input, .mp-row input, .wish-row input, .mp-paste textarea, .me-box textarea, .adm-list input { width: 100%; border: 0; background: transparent; color: var(--white); font: inherit; outline: none; }
.tf-input { min-height: 64px; padding: 6px 2px; border-bottom: 2.5px solid color-mix(in srgb, var(--white) 55%, transparent); font-size: clamp(24px, min(2.8vw, 4.4vh), 36px); font-weight: 500; transition: border-color .2s; }
.tf-input:focus { border-bottom-color: var(--white); }
.tf-input::placeholder, .chip-in input::placeholder, .mp-row input::placeholder, .tf-other input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--white) 55%, transparent); }
.tf-area { min-height: 110px; padding-top: 12px; line-height: 1.35; resize: none; font-size: clamp(20px, 2vw, 26px); }
input[type="date"] { color-scheme: dark; }
:root[data-light] input[type="date"] { color-scheme: light; }

/* Boutons */
.tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.tf-actions--row { gap: 10px; }
.tf-actions--tight { margin-top: 0; }
.tf-center .tf-actions { justify-content: center; }
.tf-ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--r); background: var(--white); color: var(--bg); font: inherit; font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .2s; }
.tf-ok svg { width: 20px; height: 20px; }
.tf-ok:hover { box-shadow: 0 10px 24px var(--shadow); }
.tf-ok:active { transform: scale(.97); }
.tf-ok:disabled { opacity: .6; }
.tf-ok--big { min-height: 64px; padding: 0 34px; font-size: 20px; }
.tf-ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--frame); color: var(--white); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .15s; }
.tf-ghost:hover { background: var(--frame-hi); }
.tf-ghost svg { width: 18px; height: 18px; }
.tf-ghost.is-armed { background: var(--white); color: var(--bg); }
.tf-enter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; opacity: .8; }
.tf-enter svg { width: 16px; height: 16px; }
.tf-nav { position: absolute; left: 0; top: -6px; }
.tf-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--white); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; opacity: .85; }
.tf-back:hover { background: var(--frame); opacity: 1; }
.tf-back svg { width: 18px; height: 18px; }

/* Les réponses à choisir : de grandes cartes, une lettre pour le clavier */
.tf-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.tf-choices--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 64px; padding: 16px 18px 16px 52px; border: 0; border-radius: 18px; background: var(--frame); color: var(--white); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, transform .15s var(--ease), color .2s; }
.tf-choice:hover { background: var(--frame-hi); transform: translateY(-2px); }
.tf-choice:active { transform: scale(.98); }
.tf-choice b { font-weight: 700; font-size: 19px; line-height: 1.2; }
.tf-choice > span:not(.tf-key):not(.tf-ci) { font-size: 15px; line-height: 1.4; opacity: .9; }
.tf-key { position: absolute; left: 14px; top: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--white) 60%, transparent); font-size: 13px; font-weight: 700; }
.tf-choice[aria-pressed="true"] { background: var(--white); color: var(--bg); }
.tf-choice[aria-pressed="true"] .tf-key { border-color: currentColor; }
.tf-choices--big .tf-choice { min-height: 190px; padding: 24px 24px 22px; justify-content: flex-end; border-radius: 24px; }
.tf-choices--big .tf-key { left: auto; right: 18px; top: 18px; }
/* Un seul choix (Père Noël secret par e-mail pas encore ouvert) : la carte reste au centre. */
.tf-choices--big:has(> [hidden]) { grid-template-columns: minmax(0, 360px); justify-content: center; }
.tf-choices--big .tf-choice b { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.tf-ci { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: auto; border-radius: 16px; background: var(--frame); }
.tf-ci svg { width: 30px; height: 30px; }
.tf-choice--sm { min-height: 58px; padding: 0 14px 0 50px; justify-content: center; }
.tf-choice--sm .tf-key { top: 50%; margin-top: -13px; }
.tf-choices:not(.tf-choices--big) .tf-ci { display: none; }
.tf-other { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.tf-other input { flex: 1 1 200px; min-height: 56px; border-bottom: 2.5px solid color-mix(in srgb, var(--white) 55%, transparent); font-size: 26px; }
.tf-cur { font-family: var(--f-display); font-size: 30px; }
.tf-other .tf-actions { margin: 0; }

/* Les prénoms en puces */
.chip-in { display: flex; align-items: center; gap: 10px; width: 100%; border-bottom: 2.5px solid color-mix(in srgb, var(--white) 55%, transparent); transition: border-color .2s; }
.chip-in:focus-within { border-bottom-color: var(--white); }
.chip-in input { min-height: 62px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; }
.chip-add { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--frame); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }
.chip-add svg { width: 18px; height: 18px; }
.name-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: clamp(96px, calc(100svh - 560px), 240px); margin: 0; padding: 0; list-style: none; overflow: auto; }
.name-chips li { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 4px 0 16px; border-radius: 21px; background: var(--white); color: var(--bg); font-weight: 700; font-size: 17px; }
.name-chips li.is-new { animation: chip-up .32s var(--ease); }
.name-chips button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .6; }
.name-chips button:hover { opacity: 1; background: color-mix(in srgb, var(--bg) 10%, transparent); }

/* Les couples */
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { min-height: 46px; padding: 0 18px; border: 0; border-radius: 23px; background: var(--frame); color: var(--white); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease); }
.pick:hover { background: var(--frame-hi); }
.pick.is-paired { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--white) 60%, transparent); }
.pick.is-on { background: var(--white); color: var(--bg); transform: scale(1.06); }
.pairs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pairs li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 14px; border-radius: 20px; background: var(--white); color: var(--bg); font-weight: 700; animation: chip-up .3s var(--ease); }
.pairs li i { font-style: normal; font-size: 14px; }
.pairs button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; cursor: pointer; opacity: .6; }
.pairs .pairs-none { padding: 0 14px; background: var(--frame); color: var(--white); font-weight: 600; }

/* Les idées de cadeaux (page « liste d'envies ») : une ligne par personne */
.wish-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: clamp(150px, calc(100svh - 520px), 380px); overflow: auto; padding: 2px; }
.wish-row { display: grid; grid-template-columns: minmax(70px, 180px) minmax(0, 1fr); gap: 14px; align-items: center; }
.wish-row span { font-weight: 700; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wish-row input { min-height: 48px; padding: 0 2px; border-bottom: 2px solid color-mix(in srgb, var(--white) 40%, transparent); font-size: 18px; }
.wish-row input:focus { border-bottom-color: var(--white); }

/* Les participants par e-mail */
.mp-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: clamp(150px, calc(100svh - 520px), 380px); overflow: auto; padding: 2px; scroll-behavior: smooth; }
.mp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 40px; gap: 10px; align-items: center; animation: chip-up .3s var(--ease); }
.mp-row input { min-height: 48px; padding: 0 2px; border-bottom: 2px solid color-mix(in srgb, var(--white) 40%, transparent); font-size: 18px; }
.mp-row input:focus { border-bottom-color: var(--white); }
.mp-row--me { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 40px; min-height: 48px; font-size: 18px; font-weight: 700; }
.mp-me i { font-style: normal; font-weight: 500; opacity: .8; }
.mp-me-mail { opacity: .85; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mp-del { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--white); font-size: 22px; cursor: pointer; opacity: .7; }
.mp-del:hover { background: var(--frame); opacity: 1; }
.mp-paste { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mp-paste textarea { min-height: 96px; padding: 10px 12px; border-radius: 12px; background: var(--frame); font-size: 16px; resize: vertical; }

/* Le récapitulatif */
.recap { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; border-radius: 18px; background: var(--frame); overflow: hidden; }
.recap > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; }
.recap > div + div { box-shadow: 0 -1px 0 color-mix(in srgb, var(--white) 18%, transparent); }
.recap dt { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.recap dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-weight: 600; min-width: 0; }
.recap dd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-edit { flex: none; padding: 4px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--white); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Le tirage, le téléphone qu'on se passe, les liens */
.gift { width: clamp(100px, 18vh, 160px); }
.gift svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-box, .g-lid { fill: var(--white); }
.g-rib { stroke: var(--bg); stroke-width: 10; }
.g-bow { fill: none; stroke: var(--white); stroke-width: 7; stroke-linejoin: round; }
.gift--shake svg { animation: gift-shake .5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes gift-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateY(-4px); } 75% { transform: rotate(7deg) translateY(-4px); } }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; max-height: clamp(160px, calc(100svh - 470px), 420px); overflow: auto; }
.who { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--white); color: var(--bg); font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; transition: transform .12s, background-color .15s; }
.who:active { transform: scale(.97); }
.who.is-seen { background: var(--frame); color: var(--white); }
.link-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: clamp(160px, calc(100svh - 500px), 400px); margin: 0; padding: 0; list-style: none; overflow: auto; }
.link-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--frame); font-weight: 700; }
.link-copy { min-height: 40px; background: var(--white); color: var(--bg); }

/* La révélation : on maintient, le nom apparaît */
.rev-card { text-align: center; }
.rev-g { margin: 0 0 16px; font-family: var(--f-display); font-size: clamp(28px, 5vw, 40px); line-height: 1.1; }
.rev-box { display: grid; justify-items: center; gap: 14px; margin-bottom: 10px; }
.rev-t { width: min(100%, 420px); min-height: 1.15em; margin: 0; padding: .06em .2em; border-radius: 18px; font-family: var(--f-display); font-size: clamp(44px, 10vw, 84px); line-height: 1.12; overflow-wrap: anywhere; transition: background-color .2s, color .2s; }
.rev-modal:not(.is-open-name) .rev-t { color: transparent; background: var(--tint); }
.rev-modal.is-open-name .rev-t { animation: res-in .4s var(--swift); }
.rev-hold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; width: min(100%, 320px); padding: 0 24px; border: 0; border-radius: var(--r); background: var(--bg); color: var(--white); font: inherit; font-weight: 700; font-size: 18px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; transition: transform .12s; }
.rev-modal.is-open-name .rev-hold { transform: scale(.97); }
.rev-w { width: min(100%, 420px); margin: 0; padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; transition: background-color .2s, color .2s; }
.rev-w:empty { display: none; }
.rev-modal:not(.is-open-name) .rev-w { color: transparent; background: var(--tint); }
.rev-b { margin: 0 0 8px; font-weight: 700; }
.rev-b:empty { display: none; }
.rev-pass { margin: 0 0 18px; opacity: .85; }
.hero.is-private .tbar, .hero.is-private .scroll-down { display: none; }

/* Page privée d'un participant, page de l'organisateur */
.me-card { width: 100%; padding: 22px; border-radius: 22px; background: var(--white); color: var(--bg); text-align: center; }
.me-to { margin: 0; font-family: var(--f-display); font-size: clamp(54px, 9vw, 110px); line-height: 1.02; overflow-wrap: anywhere; animation: res-in .5s var(--swift) both; }
.me-msg { margin: 10px 0 0; }
.me-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: 100%; }
.me-box { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--frame); }
.f-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.me-wish { margin: 0; white-space: pre-wrap; font-size: 17px; line-height: 1.5; }
.me-wish.is-empty { opacity: .8; font-style: italic; }
.me-box textarea { min-height: 96px; padding: 10px 12px; border-radius: 12px; background: var(--frame); font-size: 16px; resize: vertical; }
.adm-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.adm-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto auto; gap: 10px; align-items: center; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--frame); }
.a-name { font-weight: 700; }
.a-mail { opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.a-mail input { min-height: 38px; border-bottom: 2px solid var(--white); font-size: 16px; }
.a-st { display: flex; gap: 6px; flex-wrap: wrap; }
.st { padding: 3px 9px; border-radius: 9px; background: var(--frame); font-size: 12px; font-weight: 700; white-space: nowrap; }
.st.is-on { background: var(--white); color: var(--bg); }
.a-act { display: flex; gap: 6px; }
.a-act .chip-btn { min-height: 38px; padding: 0 12px; font-size: 14px; }

/* Écrans bas (13 pouces) */
@media (min-width: 721px) and (max-height: 820px) {
  .tool--santa { padding-top: 12px; }
  .tf-choices--big .tf-choice { min-height: 160px; padding: 18px 22px; }
  .tf-screen { gap: 12px; }
}
@media (min-width: 721px) and (max-height: 760px) {
  .tool--santa { padding-top: 4px; }
  .tf-title { font-size: clamp(30px, 6vh, 46px); }
  .tf-bar { margin-bottom: 14px; }
  .tf-choices--big .tf-choice { min-height: 138px; padding: 16px 20px; }
  .tf-screen { gap: 10px; }
  .tf-input { min-height: 54px; }
}
/* Téléphone : tout en haut, pour que le clavier ne cache rien ; les choix les uns sous les autres */
@media (max-width: 720px) {
  .tool--santa { padding-top: 40px; }
  .garland { top: 80px; height: 22px; }
  .bb { top: 84px; --len: 10px !important; --d: 16px !important; }
  .bb--far, .bb:nth-of-type(1), .bb:nth-of-type(8) { display: none; }
  .tf-bar { width: calc(100% - 92px); margin: 0 0 18px auto; }
  .tf-nav { top: -14px; }
  .tf-title { font-size: clamp(28px, 8.4vw, 38px); }
  .tf-title--big { font-size: clamp(34px, 10vw, 46px); }
  .tf-choices, .tf-choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-choices--big { grid-template-columns: minmax(0, 1fr); }
  .tf-choices--big .tf-choice { min-height: 0; padding: 18px 18px 18px 86px; justify-content: center; }
  .tf-choices--big .tf-ci { position: absolute; left: 16px; top: 50%; margin: -27px 0 0; }
  .tf-choices--big .tf-key { display: none; }
  .tf-choices--big .tf-choice b { font-size: 26px; }
  .tf-ok { flex: 1 1 100%; min-height: 58px; }
  .tf-actions--row .tf-ghost { flex: 1 1 auto; justify-content: center; }
  .tf-input { font-size: 24px; }
  .mp-row { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "n d" "e d"; gap: 0 6px; padding: 6px 0; }
  .mp-row [data-pn] { grid-area: n; }
  .mp-row [data-pe] { grid-area: e; }
  .mp-row .mp-del { grid-area: d; }
  .mp-row--me { grid-template-columns: minmax(0, 1fr); }
  .mp-rows { max-height: none; }
  .recap > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .me-cols { grid-template-columns: minmax(0, 1fr); }
  .adm-list li { grid-template-columns: minmax(0, 1fr); }
  .name-chips { max-height: none; }
  .wish-rows { max-height: none; }
  .wish-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0; }
}

/* ---------- Audit du 3/11 (téléphone) ---------- */
@media (max-width: 720px) {
  /* Retour et la barre de progression passent sous la guirlande (les boules ne les recouvrent plus) ;
     « 1 → 4 » disparaît : la barre de progression dit déjà où l'on en est. */
  .hero .tool--santa { padding-top: 56px; }
  .hero:not(.is-fs) main.tool--santa { padding-bottom: 58px; } /* + les 70 px du bandeau : la place de la barre posée en bas */
  .tool--santa .tf-num { display: none; }
  .tool--santa .tf-nav { top: -16px; }
  /* Recommencer et le son restent en bas de l'écran, loin du bouton OK (plus de remise à zéro par erreur). */
  .hero:not(.is-fs) .tool--santa .tbar { position: absolute; left: 50%; bottom: 62px; z-index: 3; transform: translateX(-50%); }
  /* Qui a le téléphone : deux colonnes, toute la liste visible (la page défile pour un grand groupe). */
  .who-grid, .link-list { max-height: none; }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .who { min-height: 54px; font-size: 17px; }
  .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 720px) and (max-height: 700px) {
  /* Petit téléphone : l'écran d'accueil tient sans défiler dans toutes les langues. */
  .hero .tool--santa { padding-top: 50px; }
  .tool--santa .tf-screen { gap: 12px; }
  .tool--santa .tf-title--big { font-size: clamp(30px, 9.4vw, 42px); }
  .tool--santa .tf-choices--big .tf-choice { padding-block: 14px; }
}
/* Un mot avec un trait d'union (« veux-tu ») ne se coupe jamais en fin de ligne. */
.tf-title .nw { white-space: nowrap; }

/* Au premier écran, rien à recommencer : Recommencer et son séparateur disparaissent (ordinateur et téléphone). */
.tool--santa:has(.tf.is-start) .tbar [data-restart], .tool--santa:has(.tf.is-start) .tbar [data-restart] + .bar-sep { display: none; }
/* Le titre d'un grand choix (« Ensemble, tout de suite ») se coupe en lignes équilibrées, sans mot seul sur la dernière. */
.tf-choices--big .tf-choice b { text-wrap: balance; }
/* Téléphone en plein écran : le formulaire grandit ; « Ajouter » ne garde que son « + » (le mot reste lu par les lecteurs d'écran)
   pour laisser au prénom tapé toute la largeur (« Tape un prénom » était coupé). */
@media (max-width: 720px) {
  .hero.is-fs .chip-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero.is-fs .chip-in input { font-size: 18px; }
}

/* ---------- Plein écran digne (nov. 2026) ----------
   Chaque écran a son cœur (.tf-core, data-focus) : le titre, et sa liste quand il en a une (les prénoms, les couples, qui a le
   téléphone, les liens). Hors plein écran, le cœur n'existe pas pour la mise en page (display: contents) et l'ordre reste celui
   du formulaire. En plein écran, le cœur passe en tête de l'écran ; au repos, il ne reste que lui, au milieu, avec la neige
   (le socle efface le reste en glissant et fait glisser le cœur au centre). */
.tf-core { display: contents; }
[data-screen="l-people"] .tf-core > .name-chips, [data-screen="l-people"] > .tf-count { order: 1; }
[data-screen="couples"] .tf-core > .pairs, [data-screen="l-links"] .tf-core > .link-list { order: 1; }
:is([data-screen="l-people"], [data-screen="couples"], [data-screen="l-links"]) > .tf-actions { order: 2; }
.hero.is-fs .tf-core { display: flex; flex-direction: column; align-items: inherit; gap: 14px; width: 100%; }
.hero.is-fs .tf-start .tf-core, .hero.is-fs .tf-center .tf-core { align-items: center; }
.hero.is-fs .tf-core:has(> .name-chips:empty, > .pairs:empty) { gap: 0; }
.hero.is-fs .tf-core .name-chips { max-height: none; }
/* En plein écran, tout se centre, comme une affiche : au repos, le titre et sa liste glissent au milieu sans rien déplacer d'autre. */
.hero.is-fs .tf-screen { align-items: center; text-align: center; }
.hero.is-fs .tf-core { align-items: center; }
.hero.is-fs .tf-screen :is(.name-chips, .pairs, .pick-chips, .tf-actions) { justify-content: center; }
.hero.is-fs .tf-help { margin-inline: auto; }
/* Plein écran : la liste des liens et celle de « qui a le téléphone » se montrent en entier (la taille s'ajuste), sans ascenseur ;
   sur ordinateur, les liens sur deux colonnes. */
.hero.is-fs :is(.who-grid, .link-list) { max-height: none; overflow: visible; }
@media (min-width: 721px) { .hero.is-fs .link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* [r2] Pile ou face sur téléphone : la zone des pièces prend toute la place libre du bandeau (conteneur),
   les pièces s'y ajustent (1, 2, 3, 5 ou 10). Une ligne d'historique est réservée : rien ne bouge au premier lancer. */
@media (max-width: 720px) {
  .tool--coin .when { flex: 1 1 auto; min-height: 0; }
  .coin-stage { flex: 1 1 0; min-height: 96px; width: 100%; container-type: size; display: grid; place-items: center; }
  .coin-stage .coins { --cd: min(92cqh, 64cqw, 300px); min-height: 0; max-width: 100%; }
  .coin-stage .coins[data-n="2"] { --cd: min(92cqh, 44cqw, 230px); }
  .coin-stage .coins[data-n="3"] { --cd: min(90cqh, 30cqw, 190px); }
  .coin-stage .coins[data-n="5"] { --cd: min(45cqh, 30cqw, 150px); }
  .coin-stage .coins[data-n="10"] { --cd: min(45cqh, 18cqw, 110px); }
  .tool--coin .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--coin .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--coin .history[hidden] { display: flex !important; visibility: hidden; }
}

/* Le visuel : la phrase du résultat et les pièces, ensemble. En plein écran, ils grandissent d'un bloc (taille − / +)
   et, au repos, glissent ensemble au milieu de l'écran. Les rangées ne changent pas avec la taille : rien ne s'empile. */
.coin-vis { display: flex; flex-direction: column; align-items: center; gap: inherit; width: 100%; }
@media (max-width: 720px) { .tool--coin .coin-vis { flex: 1 1 auto; min-height: 0; } }
.hero.is-fs .tool--coin .coin-vis { flex: none; width: auto; }
.hero.is-fs .coin-stage { width: max-content; padding: 8px 48px; display: block; }
.hero.is-fs .coins { flex-wrap: nowrap; width: max-content; max-width: none; min-height: 0; }
.hero.is-fs .coins[data-n="10"] { flex-wrap: wrap; max-width: calc(var(--cd) * 5.4 + 2px); }
/* Téléphone en plein écran : les pièces en quinconce, serrées comme des pièces posées (3 = 1 + 2, 5 = 2 + 1 + 2,
   10 = 3 + 2 + 3 + 2 ; base.js → stagger pose --c, --r et --tracks) : elles grandissent au lieu de rester sur deux longues rangées. */
@media (max-width: 720px) {
  .hero.is-fs .coin-stage { padding-inline: 12px; }
  .hero.is-fs .coins[data-n] { --cg: calc(var(--cd) * .12); display: grid; grid-template-columns: repeat(var(--tracks, 2), calc((var(--cd) + var(--cg)) / 2)); grid-auto-rows: calc(var(--cd) * .84); gap: var(--cg) 0; justify-content: center; align-content: start; width: max-content; max-width: none; min-height: 0; padding-bottom: calc(var(--cd) * .16); }
  .hero.is-fs .coins[data-n] > .coin-hop { grid-column: var(--c, auto) / span 2; grid-row: var(--r, auto); justify-self: center; align-self: start; }
}
/* Dix pièces sur ordinateur : deux rangées de cinq (avant : neuf, puis une seule en dessous). */
@media (min-width: 721px) { .coins[data-n="10"] { max-width: calc(var(--cd) * 5.5 + 2px); } }

/* Six dés : un peu plus petits que cinq, pour tenir sur une seule ligne dans un écran 13 pouces (1440×780, 1280×680). */
.dice[data-n="6"] { --dd: clamp(72px, min(15vh, 12vw), 128px); }
/* De 7 à 10 dés : deux rangées équilibrées (4 + 3, 4 + 4, 5 + 4, 5 + 5) plutôt que 8 + 2. */
.dice[data-n="7"], .dice[data-n="8"] { max-width: min(calc(var(--dd) * 4.66 + 2px), 100%); }
.dice[data-n="9"], .dice[data-n="10"] { max-width: min(calc(var(--dd) * 5.88 + 2px), 100%); }

/* Tableaux de probabilités calculés au build (pages préréglées des dés, des pièces et des nombres) :
   chiffres alignés, et sur téléphone des marges plus serrées pour que quatre colonnes tiennent sans défiler. */
.content table.odds { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .content table.odds { font-size: 15px; }
  .content table.odds th, .content table.odds td { padding: 11px 8px; }
  .content table.odds th { font-size: 11px; letter-spacing: .05em; }
  .content table.odds th:first-child, .content table.odds td:first-child { padding-left: 14px; }
  .content table.odds th:last-child, .content table.odds td:last-child { padding-right: 14px; }
}

/* [r2] Dés : l'étiquette « gardé » se pose sur le bord bas du dé (elle ne cache plus la rangée suivante) ;
   le total ne fait pas bouger la phrase. Téléphone : la zone des dés prend la place libre, les dés s'y ajustent. */
.die.is-held::after { top: auto; bottom: -9px; padding: 1px 7px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }
.tool--dice .lead { min-height: 1.6em; display: flex; align-items: center; justify-content: center; gap: .25em; line-height: 1.2; }
.tool--dice .lead .tot { margin-left: 0; vertical-align: 0; }
@media (max-width: 720px) {
  .tool--dice { --lift: 12px; }
  .tool--dice .when { flex: 1 1 auto; min-height: 0; }
  .dice-stage { flex: 1 1 0; min-height: 90px; width: 100%; container-type: size; display: grid; place-items: center; }
  .dice-stage .dice { --dd: min(70cqh, 52cqw, 200px); min-height: 0; max-width: 100%; }
  .dice-stage .dice[data-n="2"] { --dd: min(70cqh, 38cqw, 170px); }
  .dice-stage .dice[data-n="3"] { --dd: min(70cqh, 26cqw, 140px); }
  .dice-stage .dice[data-n="4"] { --dd: min(38cqh, 34cqw, 130px); }
  .dice-stage .dice[data-n="5"], .dice-stage .dice[data-n="6"] { --dd: min(38cqh, 25cqw, 118px); max-width: 100%; }
  .dice-stage .dice[data-n="7"], .dice-stage .dice[data-n="8"] { --dd: min(38cqh, 19cqw, 100px); max-width: 100%; }
  .dice-stage .dice[data-n="9"], .dice-stage .dice[data-n="10"] { --dd: min(38cqh, 15.5cqw, 90px); max-width: 100%; }
  .tool--dice .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--dice .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--dice .history[hidden] { display: flex !important; visibility: hidden; }
  .tool--dice .h-chip:nth-child(n+7) { display: none; }
}

/* Le visuel : le total et les dés, ensemble. En plein écran, ils grandissent d'un bloc (taille − / +) et, au repos,
   glissent ensemble au milieu de l'écran ; la consigne « Lance les dés » s'efface, le total reste. */
.dice-vis { display: flex; flex-direction: column; align-items: center; gap: inherit; width: 100%; }
@media (max-width: 720px) {
  .tool--dice .dice-vis { flex: 1 1 auto; min-height: 0; }
  .dice-stage .dice[data-n="2"] { --dd: min(70cqh, 43cqw, 170px); }
}
/* Plein écran : les rangées de dés ne changent pas avec la taille (rien ne s'empile), la scène épouse les dés. */
.hero.is-fs .tool--dice .dice-vis { flex: none; width: auto; }
.hero.is-fs .dice-stage { width: max-content; padding: 10px 48px; display: block; }
.hero.is-fs .dice { flex-wrap: nowrap; width: max-content; max-width: none; min-height: 0; }
.hero.is-fs .dice[data-n="7"], .hero.is-fs .dice[data-n="8"] { flex-wrap: wrap; max-width: calc(var(--dd) * 4.66 + 2px); }
.hero.is-fs .dice[data-n="9"], .hero.is-fs .dice[data-n="10"] { flex-wrap: wrap; max-width: calc(var(--dd) * 5.88 + 2px); }
/* Téléphone en plein écran : des rangées en quinconce plutôt qu'une ou deux longues rangées de petits dés
   (3 = 1 + 2, 5 = 2 + 1 + 2, 7 = 2 + 3 + 2, 10 = 3 + 2 + 3 + 2… ; base.js → stagger pose --c, --r et --tracks) : les dés grandissent. */
@media (max-width: 720px) {
  .hero.is-fs .dice-stage { padding-inline: 12px; }
  .hero.is-fs .dice[data-n] { --dg: calc(var(--dd) * .22); display: grid; grid-template-columns: repeat(var(--tracks, 2), calc((var(--dd) + var(--dg)) / 2)); grid-auto-rows: var(--dd); gap: var(--dg) 0; justify-content: center; align-content: center; width: max-content; max-width: none; }
  .hero.is-fs .dice[data-n] > .die { grid-column: var(--c, auto) / span 2; grid-row: var(--r, auto); justify-self: center; }
}
/* Au repos, la consigne « Lance les dés » s'efface en glissant (comme les réglages), jamais en fondu ; le total reste. */
.hero.is-fs .tool--dice .lead { transition: clip-path .45s var(--swift), translate .45s var(--swift); }
.hero.is-fs.fs-idle .tool--dice .lead:not(:has(.tot)) { clip-path: inset(0 0 100% 0); translate: 0 -12px; }

/* Apparence « Chiffres » (dés à 6 faces) : le nombre en Anton au milieu du dé, de la couleur de la page. */
.die-dg { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 4%; font-family: var(--f-display); font-weight: 400; font-size: calc(var(--dd) * .6); line-height: 1; color: var(--bg); font-variant-numeric: tabular-nums; pointer-events: none; }

/* [r2] Nombre au hasard. Plusieurs nombres : des cases (data-cells) dans la hauteur exacte du rouleau, rien ne bouge autour.
   La taille du texte est calculée par client.js (--nf) pour que tout tienne. */
.n-cells { --nf: 40px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: max(6px, calc(var(--nf) * .16)); width: min(100%, 940px); height: calc(var(--pkf) * 3.4); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.n-cells:focus-visible { box-shadow: 0 0 0 3px var(--white); border-radius: 14px; }
.n-cell { display: inline-grid; place-items: center; min-width: 1.9em; padding: .06em .26em; border-radius: .2em; background: var(--frame); font-family: var(--f-display); font-weight: 400; font-size: var(--nf); line-height: 1.12; font-variant-numeric: tabular-nums; }
.n-cell.is-blank { opacity: .55; }
.n-cell.is-in { background: var(--white); color: var(--bg); animation: n-in .3s var(--swift); }
@keyframes n-in { from { transform: translateY(-.35em); } }
.n-cells:hover .n-cell:not(.is-in) { background: var(--frame-hi); }
.tool--number .h-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .tool--number .when { flex: 1 1 auto; justify-content: center; }
  .tool--number .lead { text-wrap: balance; }
  .tool--number .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--number .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--number .history[hidden] { display: flex !important; visibility: hidden; }
  .tool--number .h-chip:nth-child(n+4) { display: none; }
}

/* Apparence « Flip » : plusieurs nombres, une carte par nombre (base.js → makeFlip ; cartes dans site.css), même place que les cases. */
.n-cell.flip-card { padding: .06em .26em; border-radius: .12em; background: var(--fc-bg); color: var(--fc-ink); animation: none; }
.n-cells:hover .n-cell.flip-card:not(.is-in) { background: var(--fc-bg); }
@media (hover: hover) { .n-cells:hover .n-cell.flip-card:not(.is-in) { box-shadow: 0 0 0 3px var(--frame-hi); } }
.n-cell.flip-card.is-blank { opacity: 1; color: color-mix(in srgb, var(--fc-ink) 55%, var(--fc-bg)); }
/* Téléphone en plein écran : la place des cases est plus haute (l'écran est en hauteur) ; les cases se rangent en conséquence
   (2 + 2 + 1 plutôt que 3 + 2) et grandissent, au lieu d'une rangée large qui obligeait à réduire la taille. */
@media (max-width: 720px) { .hero.is-fs .n-cells { height: calc(var(--pkf) * 6.4); } }

/* [r2] Lettre au hasard. Les cases de plusieurs lettres reprennent celles du nombre au hasard (.n-cells, number/style.css).
   Téléphone : une ligne d'historique réservée ; la barre du bas en icônes (« Aa » = minuscules). */
.n-cells--letter .n-cell { min-width: 1.35em; }
.tb-ic { font-weight: 800; font-size: 16px; letter-spacing: -.02em; line-height: 1; }
@media (min-width: 721px) { .tool--letter .tbar .tb-ic { display: none; } }
@media (max-width: 720px) {
  .tool--letter .when { flex: 1 1 auto; justify-content: center; }
  .tool--letter .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--letter .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--letter .history[hidden] { display: flex !important; visibility: hidden; }
  .tool--letter .h-chip:nth-child(n+6) { display: none; }
}
/* Apparence « Flip » : plusieurs lettres, une carte par lettre (cartes dans site.css, cases dans number/style.css). */
.n-cells--letter .n-cell.flip-card { min-width: 1.35em; }

/* ---------- Loto : des boules blanches, la boule « bonus » en anneau ---------- */
/* --ls : taille voulue selon le nombre de grilles ; --b : taille réelle, réduite si la ligne est longue (--per boules par rangée, posé par client.js). */
.tool--lottery { --ls: clamp(54px, min(6.6vw, 10.5vh), 96px); }
.lotto { --cols: 1; --per: 7; --lw: calc((min(100vw, 1500px) - 160px - var(--cols) * 96px) / var(--cols) / (var(--per) * 1.18)); --b: min(var(--ls), var(--lw)); display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: calc(var(--b) + 8px); cursor: pointer; }
.lotto[data-n="3"] { --ls: clamp(44px, min(5vw, 7vh), 64px); }
.lotto[data-n="5"] { --ls: clamp(36px, min(4vw, 5.4vh), 52px); gap: 8px; }
.lotto[data-n="10"] { --cols: 2; --ls: clamp(30px, min(3vw, 4.4vh), 42px); display: grid; grid-template-columns: repeat(2, auto); gap: 8px 34px; }
.lt-line { display: flex; align-items: center; gap: 14px; }
.lt-n { min-width: 4.6em; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; text-align: right; }
.lt-balls { display: flex; align-items: center; gap: calc(var(--b) * .16); }
.lball { display: grid; place-items: center; width: var(--b); height: var(--b); border-radius: 50%; background: var(--white); color: var(--bg); font-family: var(--f-display); font-weight: 400; font-style: normal; font-size: calc(var(--b) * .46); line-height: 1; font-variant-numeric: tabular-nums; box-shadow: inset 0 calc(var(--b) * -.06) 0 color-mix(in srgb, var(--bg) 12%, transparent); }
.lball.ball--x { background: transparent; color: var(--white); box-shadow: inset 0 0 0 calc(var(--b) * .07) var(--white); }
.lball.is-blank { background: var(--frame); color: var(--white); box-shadow: none; opacity: .8; }
.lball.ball--x.is-blank { background: transparent; box-shadow: inset 0 0 0 calc(var(--b) * .05) var(--frame-hi); }
.lball.is-in { animation: lball-in .5s var(--swift) both; animation-delay: calc(var(--d) * 80ms); }
.lotto[data-n="3"] .lball.is-in, .lotto[data-n="5"] .lball.is-in, .lotto[data-n="10"] .lball.is-in, .lotto.is-grid .lball.is-in { animation-delay: calc(var(--d) * 22ms); }
.lotto.is-grid[data-n="5"] .lball.is-in, .lotto.is-grid[data-n="10"] .lball.is-in { animation-delay: calc(var(--d) * 4ms); }
@keyframes lball-in { 0% { transform: translateY(-60%) scale(0) rotate(-120deg); } 70% { transform: translateY(6%) scale(1.04); } } /* [r2] sans fondu */
.lt-plus { font-family: var(--f-display); font-size: calc(var(--b) * .5); opacity: .7; }
.lt-extra { margin: -6px 0 0; font-size: 14px; font-weight: 500; opacity: .8; }
.tb-note--keep { white-space: normal; max-width: 34ch; line-height: 1.3; }
/* Grandes grilles (plus de 20 boules, comme Lotomania) : 10 colonnes par grille, les grilles côte à côte */
.lotto.is-grid { --lw: 999px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 24px; max-width: min(100%, 1320px); margin-inline: auto; }
.lotto.is-grid { --ls: clamp(28px, min(4vw, 6.2vh), 56px); }
.lotto.is-grid[data-n="3"] { --ls: clamp(22px, min(2.6vw, 4vh), 40px); }
.lotto.is-grid[data-n="5"] { --ls: clamp(16px, min(1.7vw, 2.8vh), 26px); }
.lotto.is-grid[data-n="10"] { --ls: clamp(17px, min(1.55vw, 2.5vh), 24px); display: flex; gap: 12px 22px; }
.lotto.is-grid .lt-line { flex-direction: column; gap: 6px; }
.lotto.is-grid .lt-n { min-width: 0; text-align: center; font-size: 12px; }
.lotto.is-grid .lt-balls { display: grid; grid-template-columns: repeat(10, var(--b)); gap: calc(var(--b) * .12); }
.lotto.is-grid .lt-plus { display: none; }
@media (max-width: 720px) {
  .tool--lottery { --ls: clamp(40px, 12vw, 58px); }
  .lotto { --lw: 999px; }
  .lt-balls { flex-wrap: wrap; justify-content: center; }
  .lotto[data-n="3"] { --ls: 40px; }
  .lotto[data-n="5"], .lotto[data-n="10"] { --ls: 34px; display: flex; }
  .lt-line { flex-direction: column; gap: 4px; }
  .lt-n { min-width: 0; text-align: center; }
  .lotto.is-grid, .lotto.is-grid[data-n] { --ls: min(30px, calc((100vw - 64px) / 11.2)); flex-direction: column; flex-wrap: nowrap; align-items: center; }
}
/* Tableau des chances d'un jeu (pages des jeux, calculé au build) */
.content .lt-odds th:last-child, .content .lt-odds td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.content .lt-odds td:last-child { white-space: nowrap; }
.content .lt-odds tr:last-child td { border-top-width: 2px; }
@media (max-width: 720px) {
  .content .lt-odds th, .content .lt-odds td { padding: 11px 8px; font-size: 14px; }
  .content .lt-odds th { font-size: 11px; letter-spacing: .04em; }
  .content .lt-odds th:first-child, .content .lt-odds td:first-child { padding-left: 14px; }
  .content .lt-odds th:last-child, .content .lt-odds td:last-child { padding-right: 14px; }
  .content .lt-odds td:last-child { white-space: normal; }
}

/* [r2] Loto sur téléphone : les grilles prennent la place libre du bandeau ; client.js cherche la plus grande taille de boule
   (--fit) qui tient en largeur et en hauteur, quel que soit le jeu (5 + 1, 6 + 1, 15 boules, Lotomania et ses 50 numéros)
   et le nombre de grilles. Les grilles se rangent côte à côte quand elles sont petites. Copier passe à côté du bouton principal. */
@media (max-width: 720px) {
  .tool--lottery { --lift: 12px; }
  .tool--lottery .when { flex: 1 1 auto; min-height: 0; }
  .lt-stage { flex: 1 1 0; min-height: 60px; width: 100%; contain: size; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .lt-stage .lotto, .lt-stage .lotto[data-n], .lt-stage .lotto.is-grid, .lt-stage .lotto.is-grid[data-n] { --b: var(--fit, 40px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: center; gap: calc(var(--b) * .3) calc(var(--b) * .7); max-width: 100%; min-height: 0; margin: 0; flex: none; }
  .lt-stage .lt-line { flex-direction: column; align-items: center; gap: 2px; }
  .lt-stage .lt-balls { flex-wrap: nowrap; justify-content: center; gap: calc(var(--b) * .14); }
  .lt-stage .lotto.is-long .lt-balls { flex-wrap: wrap; max-width: calc(var(--b) * 11.8); }
  .lt-stage .lotto.is-grid .lt-balls { display: grid; grid-template-columns: repeat(10, var(--b)); gap: calc(var(--b) * .1); max-width: none; }
  .lt-stage .lotto.is-grid .lt-plus { display: none; }
  .lt-stage .lt-n { min-width: 0; text-align: center; font-size: 11px; line-height: 1.2; }
  .lt-stage .lotto[data-n="5"]:not(.is-grid) .lt-n, .lt-stage .lotto[data-n="10"]:not(.is-grid) .lt-n { display: none; }
  .lt-stage .lotto.is-grid .lt-n { font-size: 10px; }
  .lt-stage .lt-extra { margin: 6px 0 0; font-size: 13px; }
  .tool--lottery .actions { flex-wrap: nowrap; }
  .tool--lottery .actions .btn-primary { flex: 1 1 auto; }
  .tool--lottery .actions .btn-ghost { flex: 0 0 auto; min-height: 64px; padding: 0 18px; }
}
.lt-checked { margin-top: 14px; font-size: .9em; opacity: .8; }

/* Plein écran : les grilles et la mention du numéro bonus grandissent ensemble (taille − / +), la mention reste sous les boules ;
   sur téléphone, la scène épouse les grilles (elle les coupait), les boules partent d'une taille fixe ;
   un peu d'air de chaque côté pour qu'elles ne touchent pas le bord de l'écran. */
.hero.is-fs .lt-line { padding-inline: 20px; }
.hero.is-fs .lt-extra { margin-top: 4px; }
@media (max-width: 720px) {
  .hero.is-fs .tool--lottery .lt-stage { flex: none; min-height: 0; contain: none; overflow: visible; }
  .hero.is-fs .lt-stage :is(.lotto, .lotto[data-n], .lotto.is-grid, .lotto.is-grid[data-n]) { --b: 40px; }
  .hero.is-fs .lt-line { padding-inline: 4px; }
  /* Une seule grille : les boules sur des rangées de 3 (--fsc, posé par client.js), les numéros bonus sur leur rangée à eux
     (le « + » devient le saut de ligne ; « + Étoiles » reste dessous) : sept boules sur une ligne restaient toutes petites. */
  .hero.is-fs .lt-stage .lotto:is([data-n="0"], [data-n="1"]):not(.is-grid):not(.is-long) .lt-balls { flex-wrap: wrap; justify-content: center; max-width: calc(var(--b) * (1.14 * var(--fsc, 3) - .14) + 2px); row-gap: calc(var(--b) * .16); }
  .hero.is-fs .lt-stage .lotto:is([data-n="0"], [data-n="1"]):not(.is-grid):not(.is-long) .lt-plus { flex-basis: 100%; height: 0; margin: calc(var(--b) * -.06) 0; overflow: hidden; }
}

/* ---------- Bingo : une grosse boule blanche, le tableau à droite ---------- */
.split--bingo { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; }
.tool--bingo .lead { text-wrap: balance; }
.bingo-ball { --bb: clamp(160px, min(26vh, 24vw), 280px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--bb); height: var(--bb); padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--bg); box-shadow: 0 18px 40px var(--shadow); cursor: pointer; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.bingo-ball::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: calc(var(--bb) * .03) solid color-mix(in srgb, var(--bg) 22%, transparent); }
.bingo-ball:active { transform: scale(.97); }
.bb-l { font-family: var(--f-display); font-size: calc(var(--bb) * .17); line-height: 1; margin-bottom: calc(var(--bb) * -.02); }
.bb-n { font-family: var(--f-display); font-size: calc(var(--bb) * .42); line-height: 1; font-variant-numeric: tabular-nums; }
.bingo-ball:not(.has-letter) .bb-l { display: none; }
.bingo-ball:not(.has-letter) .bb-n { font-size: calc(var(--bb) * .48); }
.bingo-ball.is-blank .bb-n { opacity: .35; }
.bingo-ball.roll { animation: bingo-roll .6s var(--swift); }
@keyframes bingo-roll { 0% { transform: translateX(-60%) rotate(-200deg) scale(.7); } 70% { transform: translateX(4%) rotate(8deg) scale(1.03); } }
.bingo-last { display: flex; gap: 8px; min-height: 40px; }
.bl-chip { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 20px; background: var(--frame); font-family: var(--f-display); font-size: 22px; font-variant-numeric: tabular-nums; animation: slide-in .32s var(--ease); }
.bl-chip:first-child { background: var(--frame-hi); }
.bingo-board-wrap { display: flex; flex-direction: column; border-radius: var(--r); background: var(--frame); overflow: hidden; }
.bingo-board { display: flex; flex-direction: column; gap: 4px; padding: 4px 14px 14px; overflow: auto; }
.bb-row { display: grid; gap: 4px; }
.bingo-board--75 .bb-row { grid-template-columns: 30px repeat(15, minmax(0, 1fr)); }
.bingo-board--90 .bb-row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.bb-head { display: grid; place-items: center; font-family: var(--f-display); font-size: 22px; }
.bb-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .5; transition: background-color .2s, color .2s, opacity .2s; }
.bingo-board--90 .bb-cell { font-size: 15px; }
.bb-cell.is-on { background: var(--white); color: var(--bg); opacity: 1; }
.tool--bingo .hint { margin: 0; font-weight: 500; }
@media (min-width: 721px) and (max-height: 760px) { .bingo-ball { --bb: clamp(140px, 24vh, 200px); } .bb-cell { font-size: 12px; } .tool--bingo .split-main { gap: 10px; } .bingo-last { min-height: 34px; } .bl-chip { height: 34px; font-size: 19px; } }
@media (max-width: 720px) {
  .split--bingo { grid-template-columns: minmax(0, 1fr); }
  .bingo-ball { --bb: min(66vw, 38svh); }
  .bingo-last { flex-wrap: wrap; justify-content: center; }
  .sheet-card .bingo-board { padding: 6px 12px 16px; }
  .sheet-card .bingo-board--75 .bb-row { grid-template-columns: 22px repeat(15, minmax(0, 1fr)); gap: 2px; }
  .sheet-card .bingo-board--75 .bb-cell { font-size: 10px; border-radius: 4px; }
  .sheet-card .bingo-board--75 { gap: 3px; }
}
@media (min-width: 721px) and (min-height: 761px) and (max-height: 820px) { .bingo-ball { --bb: clamp(150px, 24vh, 220px); } .tool--bingo .split-main { gap: 14px; } }

/* Tirage automatique, après 3 s sans toucher : il ne reste que la boule, au centre et en grand ; le reste s'efface en glissant
   (comme les réglages du plein écran au repos), jamais en fondu. */
.hero--bingo :is(.lead, .bingo-last, .hint, .actions, .bingo-board-wrap) { transition: clip-path .45s var(--swift), translate .45s var(--swift); }
.hero--bingo.live-idle :is(.lead, .bingo-last, .hint, .actions, .bingo-board-wrap) { clip-path: inset(0 0 100% 0); translate: 0 -12px; pointer-events: none; }
.bingo-ball[data-focus] { transition: transform .8s var(--swift); }

/* [r2] Bingo sur téléphone : la boule prend la place libre (scène .bb-stage) ; « Tableau » à côté du bouton principal. */
.bb-stage { display: contents; }
@media (max-width: 720px) {
  .tool--bingo { --lift: 12px; }
  .tool--bingo .split--bingo { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .tool--bingo .split-main { min-height: 0; gap: clamp(8px, 1.8vh, 18px); }
  .tool--bingo .bb-stage { display: grid; place-items: center; flex: 1 1 0; min-height: 110px; width: 100%; container-type: size; }
  .tool--bingo .bb-stage .bingo-ball { --bb: min(96cqh, 72cqw, 300px); }
  .tool--bingo .bingo-last { flex-wrap: nowrap; min-height: 36px; }
  .tool--bingo .bl-chip { height: 36px; min-width: 48px; font-size: 20px; }
  .tool--bingo .actions { flex-wrap: nowrap; }
  .tool--bingo .actions .btn-primary { flex: 1 1 auto; }
  .tool--bingo .actions .btn-ghost { flex: 0 0 auto; gap: 8px; min-height: 64px; padding: 0 18px; }
  .tool--bingo .actions .btn-ghost svg { width: 20px; height: 20px; }
}
/* [r2] Ordinateur bas (13 pouces) : le tableau de 90 boules s'aplatit un peu pour laisser la place à la barre du bas. */
@media (min-width: 721px) and (max-height: 760px) { .bingo-board--90 .bb-cell { aspect-ratio: 1.45; } .bingo-board--90 { gap: 3px; } .bingo-board--90 .bb-row { gap: 3px; } }

/* Plein écran : la boule entière grandit (taille − / +) ; sur ordinateur le tableau reste à sa droite (il passait
   dessous, en pleine largeur, et chevauchait les barres) ; au repos il s'efface et la boule glisse au milieu. */
.hero.is-fs .split--bingo { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); width: min(1120px, 100%); }
.hero.is-fs .tool--bingo .bb-stage { display: grid; place-items: center; width: auto; padding: 6px; }
@media (max-width: 720px) {
  .hero.is-fs .split--bingo { grid-template-columns: minmax(0, 1fr); }
  .hero.is-fs .tool--bingo .bb-stage .bingo-ball { --bb: min(66vw, 260px); }
}
/* La lettre (B, I, N, G, O) ne touche plus le haut du numéro. */
.bb-l { margin-bottom: calc(var(--bb) * .02); }

/* ---------- Cartes : un paquet (dos à rayures), les cartes blanches, enseignes de la couleur de la page ---------- */
.tool--cards { --cw: clamp(96px, min(11vw, 22vh), 170px); }
.card-table { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); min-height: calc(var(--cw) * 1.4 + 10px); }
.pdeck { --h: 1; position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdeck i, .pdeck-top { position: absolute; inset: 0; border-radius: calc(var(--cw) * .09); background: var(--white); }
.pdeck i { opacity: calc(.25 + var(--h) * .5); }
.pdeck i:nth-child(1) { transform: translate(calc(var(--h) * 9px), calc(var(--h) * 9px)); opacity: calc(var(--h) * .35); }
.pdeck i:nth-child(2) { transform: translate(calc(var(--h) * 6px), calc(var(--h) * 6px)); opacity: calc(var(--h) * .55); }
.pdeck i:nth-child(3) { transform: translate(calc(var(--h) * 3px), calc(var(--h) * 3px)); opacity: calc(var(--h) * .8); }
.pdeck-top { background: var(--white) repeating-linear-gradient(45deg, color-mix(in srgb, var(--bg) 26%, transparent) 0 6px, transparent 6px 14px); box-shadow: inset 0 0 0 calc(var(--cw) * .06) var(--white); transition: transform .15s; }
.pdeck:hover .pdeck-top { transform: translateY(-3px); }
.pdeck.is-empty i { display: none; }
.pdeck.is-empty .pdeck-top { background: transparent; box-shadow: inset 0 0 0 2.5px var(--frame-hi); }
.pdeck.shuffling .pdeck-top { animation: deck-shuffle .5s var(--ease) 2; }
@keyframes deck-shuffle { 25% { transform: translateX(-14%) rotate(-6deg); } 75% { transform: translateX(14%) rotate(6deg); } }
.pcards { display: flex; gap: clamp(10px, 1.4vw, 18px); perspective: 900px; cursor: pointer; }
.pcards[data-n="5"] { --cw: clamp(78px, min(8.5vw, 17vh), 128px); }
.pcard { position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .09); background: var(--white); color: var(--bg); box-shadow: 0 14px 30px var(--shadow); }
.pcard.is-dealt { animation: card-deal .55s var(--swift) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes card-deal { 0% { transform: translateX(-60%) rotateY(180deg) scale(.85); opacity: 0; } 40% { opacity: 1; } }
.pc-c { position: absolute; top: 7%; left: 9%; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.pc-c b { font-family: var(--f-display); font-weight: 400; font-size: calc(var(--cw) * .2); }
.pc-c i { font-style: normal; font-size: calc(var(--cw) * .15); }
.pc-c--b { top: auto; left: auto; bottom: 7%; right: 9%; transform: rotate(180deg); }
.pc-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); line-height: 1; }
.pc-mid--joker { font-family: var(--f-display); font-size: calc(var(--cw) * .17); letter-spacing: .04em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.pcard--joker .pc-c { font-size: calc(var(--cw) * .16); }
.tool--cards .hint { margin: 0; font-weight: 500; }
@media (max-width: 720px) {
  .tool--cards { --cw: min(30vw, 120px); }
  .card-table { flex-direction: column; gap: 18px; }
  .pdeck { --cw: 70px; }
  .pcards { flex-wrap: wrap; justify-content: center; }
  .pcards[data-n="5"], .pcards[data-n="3"] { --cw: min(26vw, 96px); }
}

/* [r2] Téléphone : le paquet à gauche, les cartes à droite, dans la place libre du bandeau (conteneur) ;
   la taille des cartes suit la place (1, 2, 3 ou 5 cartes) ; Mélanger à côté de Tirer ; une ligne d'historique réservée. */
.card-stage { display: contents; }
@media (max-width: 720px) {
  .tool--cards { --lift: 12px; }
  .tool--cards .when { flex: 1 1 auto; min-height: 0; }
  .tool--cards .card-stage { display: grid; place-items: center; flex: 1 1 0; min-height: 110px; width: 100%; container-type: size; }
  .card-stage .card-table { --cw: min(66cqh, 40cqw, 150px); flex-direction: row; align-items: center; gap: 14px; min-height: 0; }
  .card-stage .pdeck { --cw: inherit; width: calc(var(--cw) * .7); height: calc(var(--cw) * .98); }
  .card-stage .card-table:not(:has(.pcard)) { --cw: min(66cqh, 46cqw, 150px); }
  .card-stage .card-table:not(:has(.pcard)) .pdeck { width: var(--cw); height: calc(var(--cw) * 1.4); }
  .card-stage .card-table:has(.pcards[data-n="1"]) { --cw: min(92cqh / 1.4, (100cqw - 14px) / 1.7, 170px); }
  .card-stage .card-table:has(.pcards[data-n="2"]) { --cw: min(92cqh / 1.4, (100cqw - 24px) / 2.7, 140px); }
  .card-stage .card-table:has(.pcards[data-n="3"]) { --cw: min(92cqh / 1.4, (100cqw - 34px) / 3.7, 120px); }
  .card-stage .card-table:has(.pcards[data-n="5"]) { --cw: min((100cqh - 10px) / 2.8, (100cqw - 34px) / 3.7, 110px); }
  .card-stage .pcards, .card-stage .pcards[data-n="3"], .card-stage .pcards[data-n="5"] { --cw: inherit; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .card-stage .pcards[data-n="5"] { max-width: calc(var(--cw) * 3 + 20px); }
  .card-stage .pcard { box-shadow: 0 8px 18px var(--shadow); }
  .tool--cards .actions { flex-wrap: nowrap; }
  .tool--cards .actions .btn-primary { flex: 1 1 auto; }
  .tool--cards .actions .btn-ghost { flex: 0 0 auto; min-height: 64px; padding: 0 18px; }
  .tool--cards .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--cards .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--cards .history[hidden] { display: flex !important; visibility: hidden; }
  .tool--cards .h-chip:nth-child(n+5) { display: none; }
}
/* [r2] La carte arrive en se retournant (vue de profil au départ), sans fondu. */
@keyframes card-deal { 0% { transform: translateX(-60%) rotateY(90deg) scale(.85); } }
/* Plein écran : le paquet et les cartes grandissent ensemble (taille − / +) et, au repos, glissent au milieu de l'écran. */
.hero.is-fs .tool--cards .card-stage { display: grid; place-items: center; width: auto; }
/* Un peu d'air autour (il grandit avec les cartes) : ni le paquet ni la carte ne touchent le bord de l'écran. */
.hero.is-fs .tool--cards .card-table { padding: 4px 14px 12px; }

/* [r2] Oui ou non sur téléphone : le rouleau grandit dans la place libre ; une ligne d'historique réservée. */
@media (max-width: 720px) {
  .tool--yesno { --lift: 12px; }
  .tool--yesno .when { flex: 1 1 auto; justify-content: center; }
  .tool--yesno .zoom-box { --pkf: clamp(52px, min(17vw, 10.5vh), 92px); }
  .tool--yesno .history { height: 27px; max-height: 27px; flex: none; flex-wrap: nowrap; overflow: hidden; width: max-content; max-width: 100%; justify-content: flex-start; }
  .tool--yesno .history[hidden] { display: flex !important; visibility: hidden; }
  .tool--yesno .h-chip { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; }
  .tool--yesno .h-chip:nth-child(n+6) { display: none; }
}

/* [r2] Boule magique : la réponse monte du fond en glissant, sans fondu ; sur téléphone, la boule prend la place libre. */
.ball-tri { opacity: 1 !important; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ball:not(.is-shown)[data-kind] .ball-tri { transform: translateY(105%) rotate(10deg); }
.mg-stage { display: contents; }
@media (max-width: 720px) {
  .tool--magic { --lift: 12px; }
  .tool--magic .when { flex: 1 1 auto; min-height: 0; }
  .tool--magic .mg-stage { display: grid; place-items: center; flex: 1 1 0; min-height: 150px; width: 100%; container-type: size; }
  .tool--magic .mg-stage .ball { --bd: min(98cqh, 84cqw, 330px); }
  .tool--magic .sentence { display: none; }
}
/* [r2] Une fenêtre et un triangle plus grands : les réponses longues restent lisibles (client.js ajuste la taille). */
.tool--magic .ball-win { width: 60%; height: 60%; }
.tool--magic .ball-tri { width: 92%; height: 84%; margin-top: 6%; padding-top: 13%; }
.tool--magic .ball-ans { width: 84%; letter-spacing: 0; line-height: 1.08; }
/* [r2] Ordinateur bas (13 pouces) : la consigne s'efface (la question la dit déjà), la boule gagne la place. */
@media (min-width: 721px) and (max-height: 760px) {
  .tool--magic .sentence { display: none; }
  .tool--magic .ball { --bd: clamp(200px, 40vh, 320px); }
}
/* Plein écran : la boule entière grandit (taille − / +) et, au repos, glisse au milieu de l'écran. */
.hero.is-fs .tool--magic .mg-stage { display: grid; place-items: center; width: auto; padding: 8px; }
@media (max-width: 720px) { .hero.is-fs .tool--magic .mg-stage .ball { --bd: min(78vw, 300px); } }

/* [r2] Tarot : la phrase de la carte glisse sans fondu ; sur téléphone, le paquet et la carte prennent la place libre
   (le paquet rapetisse à côté de la carte tirée), la phrase garde deux lignes réservées pour que rien ne bouge. */
.t-line { opacity: 1; transform: translateY(14px); clip-path: inset(0 0 100% 0); transition: transform .45s var(--ease), clip-path .45s var(--ease); }
.t-line.is-shown { transform: none; clip-path: inset(0 0 0 0); }
.tr-stage { display: contents; }
@media (max-width: 720px) {
  .tool--tarot { --lift: 12px; }
  .tool--tarot .when { flex: 1 1 auto; min-height: 0; }
  .tool--tarot .tr-stage { display: grid; place-items: center; flex: 1 1 0; min-height: 150px; width: 100%; container-type: size; }
  .tool--tarot .tr-stage .tarot { --tw: min(96cqh * .6, 44cqw, 190px); min-height: 0; gap: 16px; }
  .tool--tarot .t-line { min-height: 2.9em; font-size: 17px; line-height: 1.45; }
}
/* Plein écran : le paquet et la carte grandissent (taille − / +) ; la marge du paquet couvre ses cartes décalées
   (sinon elles dépassaient du cadre et le calcul de taille réduisait tout à une vignette). */
.hero.is-fs .tarot .deck { margin: 0 9px 9px 0; }
.hero.is-fs .tool--tarot .tr-stage { display: grid; place-items: center; width: auto; }
.hero.is-fs .tarot { padding: 4px 14px 6px; }
@media (max-width: 720px) { .hero.is-fs .tool--tarot .tr-stage .tarot { --tw: min(34vw, 150px); } }

/* ---------- Pierre, feuille, ciseaux (audit nov. 2026) ----------
   Le score s'affiche en grand à côté de « Toi » et « Ordinateur », au-dessus de chaque rouleau (la barre du bas garde Recommencer et Son).
   Téléphone : « contre » disparaît et le rouleau se règle sur la largeur de l'écran, pour que le mot le plus long (Ciseaux, Scissors…) tienne en entier. */
.rps-who { display: inline-flex; align-items: baseline; gap: 8px; }
.rps-pts { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 1; }
.rps-pts.bump { animation: bump .28s var(--ease); }
@media (max-width: 720px) {
  .rps { gap: 10px; width: 100%; }
  .rps-vs { display: none; }
  .rps-side { flex: 1 1 0; min-width: 0; }
  .rps .reel { font-size: min(56px, calc((100vw - 44px) / 8)); }
  .rps-pts { font-size: 24px; }
}

/* Plein écran : les deux rouleaux gardent la largeur de leur mot le plus long ; trop grands, ils réduisent tous les deux
   (au lieu de couper « Pierre » en « Pier… » sur téléphone). */
.hero.is-fs .rps { width: auto; }
.hero.is-fs .rps-side { flex: none; min-width: auto; }
/* Téléphone en plein écran : les deux rouleaux l'un au-dessus de l'autre (« Toi », puis « Ordinateur ») ; côte à côte, la largeur
   de l'écran les gardait petits, empilés ils grandissent dans la hauteur libre. */
@media (max-width: 720px) { .hero.is-fs .rps { flex-direction: column; gap: 12px; } }

/* Téléphone : Vérité et Action côte à côte sous le pouce, Au hasard en dessous (trois boutons empilés faisaient dépasser le bandeau de l'écran). */
@media (max-width: 720px) {
  .hero .tool .actions.actions--tod .btn-primary { flex: 1 1 0; min-width: 0; }
  .hero .tool .actions.actions--tod .btn-ghost { flex: 1 1 100%; }
}

/* Pages préréglées d'Action ou vérité et de Tu préfères (même classe) : la liste complète des questions, numérotée, en deux colonnes sur ordinateur. */
.content .q-list { display: block; max-width: none; columns: 2 340px; column-gap: 48px; padding-left: 2em; font-size: 17px; line-height: 1.5; }
.content .q-list li { break-inside: avoid; margin: 0 0 8px; padding-left: .2em; }
.content--data h3 + .q-list { margin-top: 10px; }

/* ---------- Audit nov. 2026 ----------
   La carte change en glissant (sans fondu). Téléphone : carte un peu moins haute et « Au hasard » plus fin,
   pour que tout l'outil et sa barre tiennent dans l'écran (390×664, 360×640) au-dessus des pastilles flottantes. */
.tod-card.is-new .tod-text, .tod-card.is-new .tod-kind { animation-name: tod-wipe; }
@keyframes tod-wipe { from { transform: translateX(32px); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
/* La taille du texte suit sa longueur (--fit, posé par client.js). */
.tod-text { font-size: calc(clamp(30px, min(3.6vw, 5.6vh), 56px) * var(--fit, 1)); }
/* Avec des joueurs : en bas de la carte, qui commence puis qui suit. */
.tod-turn { font-size: 15px; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.tool--tod .eo-n[hidden] { display: none; }
@media (max-width: 720px) {
  .tod-turn { font-size: 14px; }
  .tod-text { font-size: calc(min(28px, 7.6vw) * var(--fit, 1)); }
  .tod-card { min-height: clamp(160px, 27vh, 260px); gap: 12px; padding: 22px 20px; border-radius: 24px; }
  .hero .tool .actions.actions--tod .btn-ghost { min-height: 48px; }
}
/* Plein écran : « Action ou vérité ? » reste sur une ligne quand la carte grandit. */
.tod-kind { white-space: nowrap; }
@media (max-width: 720px) { .hero.is-fs .tod-kind { padding: 3px 10px; font-size: 11px; letter-spacing: .05em; } }

/* ---------- Tu préfères (audit nov. 2026) ----------
   Les deux choix arrivent en glissant (sans fondu). Téléphone : cases un peu plus basses pour que tout l'outil
   et sa barre tiennent dans l'écran (390×664, 360×640), au-dessus des pastilles flottantes. */
.wyr.is-new .wyr-opt { animation-name: wyr-wipe; }
@keyframes wyr-wipe { from { transform: translateX(40px); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.wyr.has-choice .wyr-opt:not(.is-chosen) { transform: scale(.97); }
@media (max-width: 720px) {
  .wyr { gap: 10px; }
  .wyr-opt { min-height: clamp(96px, 16svh, 150px); padding: 14px 20px; font-size: 24px; border-radius: 22px; }
  .wyr-or { width: 42px; height: 42px; margin: -21px 0 0 -21px; font-size: 16px; }
}
/* Téléphone : les deux choix ont la même hauteur, « ou » tombe toujours entre eux (en plein écran il mordait sur le texte). */
@media (max-width: 720px) { .wyr { grid-auto-rows: 1fr; } }
/* Téléphone en plein écran : les deux choix s'écartent d'autant que « ou » grandit (il ne mord plus sur le texte). */
@media (max-width: 720px) { .hero.is-fs .wyr { row-gap: calc(34px * var(--cs, 1)); } }

/* ---------- La bouteille : blanche, au milieu ; les joueurs en cercle ---------- */
.bottle-stage { --bs: clamp(200px, min(calc(100svh - 450px), 46vw), 440px); position: relative; width: var(--bs); height: var(--bs); }
.bottle-stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed var(--frame-hi); }
.bottle-stage.has-players::before { inset: 14%; }
.bottle { position: absolute; left: 50%; top: 50%; width: calc(var(--bs) * .2); height: calc(var(--bs) * .66); margin: calc(var(--bs) * -.33) 0 0 calc(var(--bs) * -.1); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bottle-in { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 14px 22px var(--shadow)); }
.bottle-in svg { display: block; width: 100%; height: 100%; }
.bt-glass { fill: var(--white); }
.bt-cap { fill: var(--white); stroke: var(--bg); stroke-width: 3; }
.bt-label { fill: color-mix(in srgb, var(--bg) 24%, transparent); }
.bt-shine { stroke: color-mix(in srgb, var(--bg) 20%, transparent); stroke-width: 5; stroke-linecap: round; fill: none; }
.bottle-ring { position: absolute; inset: 0; pointer-events: none; }
.br-seat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--bs) * -.44)) rotate(calc(var(--a) * -1)); }
.br-seat span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); max-width: 9em; padding: 5px 12px; border-radius: 12px; background: var(--frame); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .2s, color .2s, transform .3s var(--ease); }
.br-seat.is-win span { background: var(--white); color: var(--bg); transform: translate(-50%, -50%) scale(1.18); }
.tool--bottle .lead { min-height: 1.5em; margin: 0; }
.tool--bottle .lead.is-win { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; animation: chip-up .4s var(--ease); }
@media (max-width: 720px) { .bottle-stage { --bs: min(84vw, 46svh); } .br-seat span { font-size: 13px; padding: 4px 9px; } }

/* ---------- Audit nov. 2026 ----------
   La ligne du haut garde la même hauteur (consigne ou prénom désigné : rien ne saute) ; le prénom arrive en glissant, sans fondu.
   Téléphone : la bouteille se règle sur la hauteur de l'écran pour que le bouton et la barre (Joueurs, Son) restent dans l'écran,
   au-dessus des pastilles flottantes. « Joueurs » sans « 0 » tant que la liste est vide. */
.tool--bottle .lead { display: flex; align-items: center; justify-content: center; min-height: clamp(46px, 6vh, 56px); text-wrap: balance; }
.tool--bottle .lead.is-win { animation: bt-name .42s var(--ease); }
@keyframes bt-name { from { transform: translateY(40%); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.tool--bottle .eo-n[hidden] { display: none; }
/* Avec des joueurs : les prénoms passent au-dessus de la bouteille (jamais cachés par elle), la bouteille est un peu plus courte. */
.bottle-ring { z-index: 1; }
.bottle-stage.has-players .bottle-in svg { transform: scale(.88); }
@media (max-width: 720px) {
  .bottle-stage { --bs: clamp(200px, min(84vw, calc(100svh - 400px)), 400px); }
  .tool--bottle .lead { min-height: 44px; font-size: 18px; line-height: 1.3; }
  .tool--bottle .lead.is-win { font-size: 34px; }
}

/* Plein écran : l'anneau et la bouteille grandissent ensemble (taille − / +), d'un bloc ; avant, seule la bouteille changeait de taille. */
.bottle-zoom { display: flex; justify-content: center; }

/* ---------- Générateurs de noms et de mots (audit nov. 2026 ; ce fichier sert aussi au générateur de mots, même gabarit .tool--gen) ----------
   Téléphone : Générer et Tout copier sur une seule ligne sous le pouce ; la liste reste dans son cadre (elle défile dedans
   quand on demande 10 ou 20 noms) pour que le bouton et la barre restent dans l'écran ; 10 et 20 en deux colonnes. */
@media (max-width: 720px) {
  .tool--gen .lead { font-size: 19px; line-height: 1.5; text-wrap: wrap; }
  .tool--gen .gen { gap: 8px; min-height: 0; max-height: max(150px, calc(100svh - 405px)); overflow: auto; overscroll-behavior: contain; }
  .tool--gen .g-item { font-size: 24px; }
  .tool--gen .gen[data-n="1"] .g-item { font-size: min(52px, 13vw); white-space: normal; text-wrap: balance; }
  .tool--gen .gen[data-n="3"] .g-item { font-size: 32px; }
  .tool--gen .gen[data-n="10"], .tool--gen .gen[data-n="20"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; }
  .tool--gen .gen[data-n="10"] li, .tool--gen .gen[data-n="20"] li { min-width: 0; }
  .tool--gen .gen[data-n="10"] .g-item, .tool--gen .gen[data-n="20"] .g-item { width: 100%; font-size: 19px; overflow: hidden; text-overflow: ellipsis; }
  .hero .tool--gen .actions { flex-wrap: nowrap; }
  .hero .tool--gen .actions .btn-primary { flex: 1 1 0; min-width: 0; }
  .hero .tool--gen .actions .btn-ghost { flex: 0 0 auto; min-height: 64px; padding: 0 18px; }
}
/* Allemand : les noms communs gardent leur majuscule (site.css met les mots en minuscules, ce qui donnait « hund », « u-boot »). */
:lang(de) .gen--words .g-item { text-transform: none; }

/* ---------- Prénoms pour bébé : de grandes cartes, un cœur pour garder, un duel pour choisir ---------- */
.tool--baby { gap: clamp(12px, 2.2vh, 24px); }
.baby-modes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 5px; border-radius: 18px; background: var(--frame); }
.baby-modes > button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 13px; background: transparent; color: var(--white); font: inherit; font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; }
.baby-modes > button svg { width: 16px; height: 16px; }
.baby-modes > button:hover:not([aria-pressed="true"]) { background: var(--frame); }
.baby-filters { margin: 0; }
.bf-letter[hidden] { display: none; }
.baby-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(1080px, 100%); }
/* La description */
.ask { display: flex; flex-direction: column; gap: 10px; width: min(820px, 100%); text-align: left; }
.ask[hidden] { display: none; }
.ask-title { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.ask-row { display: flex; gap: 10px; align-items: stretch; }
.ask-row textarea { flex: 1; min-height: 64px; padding: 12px 16px; border: 0; border-radius: var(--r); background: var(--frame); color: var(--white); font: inherit; font-size: 19px; line-height: 1.35; resize: none; outline: none; transition: background-color .15s, box-shadow .15s; }
.ask-row textarea::placeholder { color: color-mix(in srgb, var(--white) 60%, transparent); }
.ask-row textarea:focus { background: var(--frame-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 70%, transparent); }
.ask-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; padding: 0 20px; border: 0; border-radius: var(--r); background: var(--white); color: var(--bg); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; transition: transform .12s; }
.ask-go svg { width: 20px; height: 20px; }
.ask.is-busy .ask-go svg { animation: spin-star 1s linear infinite; }
@keyframes spin-star { to { transform: rotate(360deg); } }
.ask-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.ask.has-results .ask-ex { display: none; }
@media (max-height: 820px) { .ask.has-results .ask-title { display: none; } }
.ask-ex button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--frame); color: var(--white); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.ask-ex button:hover { background: var(--frame-hi); }
.baby-note { min-height: 1.3em; margin: 0; font-size: 14px; font-weight: 600; opacity: .9; text-align: center; }
/* Les cartes : le prénom en grand, l'origine, le sens, le cœur */
.bcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.bcard { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 104px; padding: 12px 44px 12px 14px; border-radius: 18px; background: var(--frame); text-align: left; }
.bcards.is-in .bcard { animation: chip-up .38s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.bc-rank { font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.bc-n { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, min(2.3vw, 4vh), 34px); line-height: 1.06; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-n.is-long { font-size: clamp(19px, min(1.8vw, 3.2vh), 27px); }
.bc-m { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bc-t, .bc-why { font-size: 13px; line-height: 1.3; opacity: .85; }
.bc-why { font-style: italic; }
.bc-love { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color .15s, transform .15s; }
.bc-love:hover { background: var(--frame); }
.bc-love svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.bc-love[aria-pressed="true"] svg { fill: currentColor; }
.bcard:has(.bc-love[aria-pressed="true"]) { background: var(--frame-hi); }
/* Les 100 premiers : des pastilles à cocher */
.b100 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; width: 100%; max-height: clamp(220px, calc(100svh - 420px), 560px); overflow: auto; text-align: left; }
.b100[hidden] { display: none; }
.b100-col h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.b100-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.b100-n { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: var(--frame); color: var(--white); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .15s, color .15s; }
.b100-n i { font-style: normal; font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.b100-n:hover { background: var(--frame-hi); }
.b100-n.is-fav { background: var(--white); color: var(--bg); }
.fav-open svg { width: 18px; height: 18px; fill: currentColor; }
.tool--baby .tbar svg { flex: none; }
/* Coups de cœur, duel */
.fav-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 40vh; margin: 0 0 18px; overflow: auto; }
.fav-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 16px; border: 0; border-radius: 21px; background: var(--bg); color: var(--white); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.fav-chip span { opacity: .6; }
.fav-empty { margin: 0; opacity: .85; }
.fav-modal .m-primary svg { width: 18px; height: 18px; vertical-align: -3px; }
.fav-clear { display: block; margin: 12px auto 0; padding: 6px 12px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; opacity: .85; }
.duel-card { width: min(760px, 100%); text-align: center; }
.duel-help { margin: 0 0 22px; opacity: .9; }
.duel-help[hidden], .duel-card .modal-title[hidden] { display: none; }
.duel-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.duel-pair[hidden] { display: none; }
.duel-n { min-height: 150px; padding: 18px; border: 0; border-radius: 24px; background: var(--bg); color: var(--white); font-family: var(--f-display); font-size: clamp(34px, 6vw, 64px); line-height: 1.05; overflow-wrap: normal; word-break: keep-all; cursor: pointer; transition: transform .15s var(--ease); }
.duel-n.is-long { font-size: clamp(26px, 4.2vw, 46px); }
.duel-n:hover { transform: translateY(-3px) scale(1.02); }
.duel-n.is-picked { transform: scale(1.06); }
.duel-vs { font-family: var(--f-display); font-size: 30px; opacity: .7; }
.duel-win .res-big { color: var(--bg); }
@media (min-width: 721px) and (max-height: 820px) { .bcard { min-height: 86px; padding-block: 10px; } .bc-n { font-size: clamp(22px, 3.6vh, 30px); } .ask-title { font-size: 24px; } .ask-row textarea { min-height: 54px; font-size: 17px; } .tool--baby { gap: 10px; } .tool--baby .lead { font-size: clamp(18px, 2.6vh, 24px); } }
@media (max-width: 720px) {
  .baby-modes { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .baby-modes::-webkit-scrollbar { display: none; }
  .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bcard { min-height: 92px; }
  .bc-n { font-size: 25px; }
  .ask-row { flex-direction: column; }
  .ask-go { min-height: 56px; }
  .b100 { max-height: none; }
  .duel-pair { grid-template-columns: minmax(0, 1fr); }
  .duel-n { min-height: 110px; }
}
/* Pages préréglées (un style, une origine) : les chiffres clés puis le tableau des prénoms, sous l'intro */
.band--intro + .band--data:has(.bn-data) { padding-top: 0; }
.bn-data { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 760px; margin: 0 auto; }
.bn-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.bn-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 16px; border-radius: 20px; background: var(--tint); }
.bn-facts dt { font-size: 13px; font-weight: 600; line-height: 1.3; }
.bn-facts dd { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1.05; overflow-wrap: break-word; }
.bn-table .bn-r { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bn-out { font-size: 14px; opacity: .7; }
.bn-source { font-size: 15px; line-height: 1.55; }
/* Téléphone : une ligne par prénom, le rang à droite, l'origine et le sens dessous */
@media (max-width: 720px) {
  .bn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-facts dd { font-size: 24px; }
  .content .bn-table thead { display: none; }
  .content .bn-table, .content .bn-table tbody { display: block; }
  .content .bn-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .content .bn-table tr:first-child { border-top: 0; }
  .content .bn-table td { padding: 0; border: 0; }
  .content .bn-table .bn-n { grid-column: 1 / 3; }
  .content .bn-table--norank .bn-n { grid-column: 1 / -1; }
  .content .bn-table .bn-r { grid-column: 3; grid-row: 1; text-align: right; font-size: 15px; }
  .content .bn-table .bn-o { grid-column: 1; font-size: 14px; opacity: .75; }
  .content .bn-table .bn-m { grid-column: 2 / 4; font-size: 14px; }
}

/* ---------- Audit nov. 2026 ----------
   Les cartes arrivent en glissant (sans fondu). Ordinateur : rien ne change (l'origine est déjà dans la ligne des styles).
   Téléphone : les cinq façons de chercher sur deux lignes pleines, sans rien de coupé ni de caché à faire défiler ; la phrase
   des filtres plus courte en hauteur ; des cartes courtes (rang et origine en haut, le prénom, le sens sur deux lignes au plus). */
.bcards.is-in .bcard { animation-name: bc-wipe; }
@keyframes bc-wipe { from { transform: translateY(14px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.bc-o { display: none; }
.bcard.no-rank .bc-rank { display: none; }
@media (max-width: 720px) {
  .baby-modes { display: flex; flex-wrap: wrap; justify-content: stretch; width: 100%; gap: 2px; padding: 4px; overflow: visible; }
  .baby-modes > button { flex: 1 1 22%; justify-content: center; min-height: 44px; padding: 0 9px; gap: 6px; }
  .baby-modes > button[hidden] { display: none; }
  .baby-modes > button svg { flex: none; }
  /* La source (et les petits messages) passe sous les cartes : en haut, seulement les réglages. */
  .baby-note { order: 3; }
  .bcards, .b100 { order: 2; }
  .tool--baby { gap: 12px; }
  .tool--baby .baby-filters { font-size: 18px; line-height: 1.45; }
  .baby-stage { gap: 8px; }
  .baby-note { font-size: 12.5px; line-height: 1.35; }
  .bcards { gap: 8px; }
  .bcard { min-height: 0; gap: 2px; padding: 10px 40px 11px 12px; border-radius: 16px; }
  .bcard.no-rank .bc-rank { display: block; }
  .bc-rank { font-size: 11px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-o { display: inline; }
  .bc-n, .bc-n.is-long { font-size: 24px; }
  .bc-n.is-long { font-size: 20px; }
  .bc-m, .bc-why { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bc-t { display: none; }
  .bc-love { right: 3px; top: 3px; width: 40px; height: 40px; }
  .b100-n { min-height: 40px; }
}

/* Plein écran : les cartes de prénoms grandissent ou rapetissent (taille − / +) pour que tout tienne entre la citation et
   les barres du bas (sur téléphone, le haut et le bas se chevauchaient) ; au repos, il ne reste qu'elles. Le Top 100
   défile dans son cadre. */
.hero.is-fs .tool--baby .b100 { max-height: calc(100svh - 360px); overflow: auto; }
/* La source (et les petits messages) s'efface en glissant au repos, comme les réglages : il ne reste que les cartes. */
.hero.is-fs .baby-note { transition: clip-path .45s var(--swift), translate .45s var(--swift); }
.hero.is-fs.fs-idle .baby-note { clip-path: inset(0 0 100% 0); translate: 0 -12px; }
/* Téléphone en plein écran : les façons de chercher sur une seule ligne qui défile, la phrase des filtres plus serrée et des
   cartes plus courtes (le sens sur une ligne) : la place gagnée va aux cartes, qui grandissent (elles restaient toutes petites). */
@media (max-width: 720px) {
  .hero.is-fs .baby-modes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .hero.is-fs .baby-modes::-webkit-scrollbar { display: none; }
  .hero.is-fs .baby-modes > button { flex: none; min-height: 44px; padding: 0 14px; }
  .hero.is-fs .tool--baby { gap: 8px; }
  .hero.is-fs .tool--baby .baby-filters { font-size: 15px; line-height: 1.38; }
  .hero.is-fs .baby-stage { gap: 6px; }
  .hero.is-fs .bcards { gap: 6px; }
  .hero.is-fs .bcard { gap: 1px; padding: 7px 36px 8px 11px; }
  .hero.is-fs .bcard :is(.bc-m, .bc-why) { -webkit-line-clamp: 1; }
  .hero.is-fs .bc-love { top: 1px; right: 1px; }
  .hero.is-fs .baby-note { font-size: 11.5px; line-height: 1.3; }
}


/* ---------- Couleur au hasard (audit nov. 2026) ----------
   RGB et HSL sont deux petits boutons qu'on touche pour les copier. Téléphone : le code HEX plus grand,
   Générer et Copier le HEX sur une seule ligne sous le pouce. */
.code-btn { min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, color .15s; }
.code-btn:hover { background: var(--frame); }
.code-btn.is-copied { background: var(--white); color: var(--bg); }
.tool--color .codes { gap: 4px 8px; }
@media (max-width: 720px) {
  .hex-out { font-size: min(92px, 21vw); }
  .tool--color .codes { font-size: 16px; }
  .code-btn { min-height: 44px; padding: 0 10px; }
  .hero .tool--color .actions { flex-wrap: nowrap; }
  .hero .tool--color .actions .btn-primary { flex: 1 1 0; min-width: 0; }
  .hero .tool--color .actions .btn-ghost { flex: 0 0 auto; min-height: 64px; padding: 0 18px; }
}

/* Plein écran : le cadre du code grandit d'un bloc (taille − / +) ; un bord transparent garde de l'air
   entre le cadre et le bord de l'écran sur téléphone. */
.hero.is-fs .hex-out { border: 10px solid transparent; background-clip: padding-box; }

/* La machine à widgets : la phrase du choix de l'outil, puis la machine (aperçu, tailles, boutons ; voir src/core/widget.js). */
.tool--widgets .wgt { width: min(1040px, 100%); }
.wgt-box { width: 100%; margin-top: clamp(10px, 2vh, 20px); }
/* Plein écran : la machine grandit avec la taille − / + ; au repos, il ne reste que l'aperçu du widget, au milieu de l'écran
   (le choix de l'outil s'efface avec le socle ; la phrase, les tailles et les boutons de la machine s'effacent en glissant). */
.hero.is-fs .tool--widgets .wgt-box { width: auto; }
.hero.is-fs .tool--widgets .wgt-box > * { width: min(1040px, calc(100vw - 48px)); }
.hero.is-fs .tool--widgets :is(.wg-lead, .wg-seg, .wg-btns, .wg-help) { transition: clip-path .45s var(--swift), translate .45s var(--swift); }
.hero.is-fs.fs-idle .tool--widgets :is(.wg-lead, .wg-seg, .wg-btns, .wg-help) { clip-path: inset(0 0 100% 0); translate: 0 -12px; pointer-events: none; }
/* Ordinateur : l'aperçu est dans la colonne de gauche de la machine ; au repos, il glisse d'une demi-colonne pour se poser au milieu. */
@media (min-width: 900px) {
  .hero.is-fs .tool--widgets .wg-view { transition: translate .7s var(--swift); }
  .hero.is-fs.fs-idle .tool--widgets .wg-view { translate: calc((min(1040px, 100vw - 48px) - 32px) / 4.6 + 16px) 0; }
}