/* ============================================================
   Le Val des Étoiles — Companion
   Thèmes : clair « papier » / sombre « nuit » (auto via système)
   ============================================================ */

@font-face {
  font-family: 'Goodchild';
  src: url('../assets/goodchild.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4efe4;
  --paper-2: #ece5d4;
  --ink: #211d18;
  --muted: rgba(33, 29, 24, 0.55);
  --line: rgba(33, 29, 24, 0.28);
  --card-bg: #fdfbf4;
  --rouge: #a8232a;
  --accent: #8a6d1f;
  /* logo (gravure sur fond transparent) : léger sépia en thème clair */
  --logo-filter: sepia(0.3);
  --logo-blend: normal;
  --shadow: 0 6px 24px rgba(33, 29, 24, 0.18);
  --serif: 'Goodchild', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme='dark'] {
  --paper: #14120f;
  --paper-2: #1d1a16;
  --ink: #e9e1cf;
  --muted: rgba(233, 225, 207, 0.55);
  --line: rgba(233, 225, 207, 0.28);
  --card-bg: #211d18;
  --rouge: #d4555b;
  --accent: #c9a84c;
  --logo-blend: screen;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #14120f;
    --paper-2: #1d1a16;
    --ink: #e9e1cf;
    --muted: rgba(233, 225, 207, 0.55);
    --line: rgba(233, 225, 207, 0.28);
    --card-bg: #211d18;
    --rouge: #d4555b;
    --accent: #c9a84c;
    --logo-filter: none;
    --logo-blend: screen;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

/* interrupteur haptique iOS : présent et rendu (opacity:0, pas display:none,
   sinon le haptique ne se déclenche pas), mais hors d'atteinte du doigt */
.haptic-switch {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.view[hidden] { display: none !important; }

/* ============================================================
   Compteur de Majestés
   ============================================================ */

#view-majestes {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.half {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.half-1 { transform: rotate(180deg); }

.zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  touch-action: none;
  color: var(--muted);
  font-size: 1.5rem;
  font-family: var(--serif);
}

.zone:active { background: rgba(127, 127, 127, 0.08); }

.zone-moins { left: 0; }
.zone-plus { right: 0; }

/* affordance discrète : glyphes aux coins extérieurs (la rotation de
   .half-1 envoie le « bottom » local vers le bord physique de l'écran) */
.zone::after {
  content: '';
  position: absolute;
  bottom: max(10px, env(safe-area-inset-bottom));
  font-size: 1.4rem;
  opacity: 0.5;
}
.zone-moins::after { content: '−'; left: 18px; }
.zone-plus::after { content: '+'; right: 18px; }
.zone-moins, .zone-plus { font-size: 0; } /* le libellé accessible reste pour les lecteurs d'écran */

.score-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.score {
  font-family: var(--serif);
  font-size: min(34svh, 52vw);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.4s ease-out;
}

.score.cent { font-size: min(26svh, 36vw); }
.score.min { opacity: 0.35; }
.score.max { color: var(--accent); }

/* éclair doré : on bascule en accent sans transition, puis le retrait de la
   classe laisse la transition ci-dessus ramener la couleur normale */
.score.flash { color: var(--accent); transition: none; }

.score-label {
  font-family: var(--serif);
  font-size: clamp(0.8rem, 2.2svh, 1.1rem);
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-top: 0.4em;
}

/* ---- bande centrale ---- */

.center-band {
  flex: none;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: relative;
}

.center-band::before,
.center-band::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  margin: 0 14px;
}

.center-band { gap: 0; }

.band-btn {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--muted);
  display: grid;
  place-items: center;
  order: 0;
}

#btn-aide { order: 0; }
.center-band::before { order: 1; }
.logo-btn { order: 2; }
.center-band::after { order: 3; }
#btn-theme { order: 4; }

.band-btn:active { background: var(--paper-2); }

.logo-btn {
  flex: none;
  width: 114px;
  height: 114px;
  padding: 0;
  display: grid;
  place-items: center;
}

.logo-btn img {
  width: 109px;
  height: 99px;
  object-fit: contain;
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-blend);
  pointer-events: none;
}

/* Compteur plein écran (tactile) : jamais d'anneau de focus sur ses contrôles
   — il réapparaît sinon au retour de focus après fermeture d'une modale, et
   son rectangle jure avec le logo carré. Les anneaux clavier restent actifs
   dans les panneaux d'aide et les dialogues (accessibilité). */
.zone:focus,
.zone:focus-visible,
.band-btn:focus,
.band-btn:focus-visible,
.logo-btn:focus,
.logo-btn:focus-visible {
  outline: none;
}

/* ============================================================
   Vue Aides de jeu
   ============================================================ */

.view-aide {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.aide-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: max(6px, env(safe-area-inset-top)) 10px 6px;
}

.menu-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--ink);
}

.aide-titre {
  margin: 0;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.3rem;
  color: var(--ink);
}

/* ---- tiroir de navigation ---- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: min(80vw, 300px);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); box-shadow: var(--shadow); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.drawer-logo {
  width: 40px;
  height: 36px;
  object-fit: contain;
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-blend);
}

.drawer-titre {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.drawer-sep {
  padding: 14px 18px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-link {
  display: block;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  border-left: 3px solid transparent;
}

.drawer-link:active { background: var(--paper-2); }

.drawer-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.drawer-reglages {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
}

.reglages-titre {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* titre retiré : on collapse l'espace fantôme pour garder la ligne centrée */
.reglages-titre:empty { display: none; }

.reglage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}

.reglage-row > span:first-child { flex: 1; font-size: 0.98rem; }

/* ligne-bouton (Règles) : pleine largeur, valeur courante à droite */
button.reglage-row { width: 100%; text-align: left; }
.reglage-valeur { color: var(--muted); font-size: 0.95rem; }

/* interrupteur (toggle) */
.reglage-row input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reglage-row .switch {
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s ease;
}

.reglage-row .switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
  transition: left 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reglage-row input:checked + .switch {
  background: var(--accent);
  border-color: var(--accent);
}
.reglage-row input:checked + .switch::after { left: calc(100% - 1.2rem - 2px); }
.reglage-row input:focus-visible + .switch { box-shadow: 0 0 0 2px var(--accent); }

.aide-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
}

.panel { max-width: 720px; margin: 0 auto; }

.panel h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.5rem;
  text-align: center;
  margin: 0.6em 0 0.8em;
}

.panel h2:first-child { margin-top: 0; }

.panel .intro {
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
  margin: -0.4em 0 1.2em;
}

/* ---- cartes & formations ---- */

.formation {
  --cw: 2.1rem;
  --ch: 2.9rem;
  display: grid;
  /* pistes fixes 3×3 : chaque être occupe la même empreinte qu'un Accompli ;
     les emplacements manquants gardent la taille d'une carte, d'où une place
     constante pour chaque ressource (et des .carte toujours identiques). */
  grid-template-columns: repeat(3, var(--cw));
  grid-template-rows: repeat(3, var(--ch));
  gap: 5px;
  justify-content: center;
  align-content: center;
}

.formation.grande {
  --cw: 3rem;
  --ch: 4.2rem;
  gap: 7px;
}

.carte {
  width: var(--cw);
  height: var(--ch);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
  position: relative;
  display: grid;
  place-items: center;
}

.carte-esprit  { grid-area: 1 / 2; }
.carte-coeur   { grid-area: 2 / 1; }
.carte-figure  { grid-area: 2 / 2; }
.carte-arme    { grid-area: 2 / 3; }
.carte-pouvoir { grid-area: 3 / 2; }

.carte .suit { font-size: calc(var(--cw) * 0.62); line-height: 1; }
.carte .lettre {
  font-family: var(--serif);
  font-size: calc(var(--cw) * 0.66);
  line-height: 1;
}

.carte .bonus {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: calc(var(--cw) * 0.30);
  font-weight: 600;
  color: var(--ink);
}

/* Les Amoureux : le Roi et la Dame échangent figure et Cœur en fondu croisé
   (2 s par état, fondu de 0,8 s ; les deux lettres partagent la même cellule) */
.carte .lettre.alterne { display: inline-grid; place-items: center; }
.carte .alterne .alt { grid-area: 1 / 1; animation: fondu-roi-dame 4s ease-in-out infinite; }
.carte .alterne .alt-b { animation-delay: -2s; }

@keyframes fondu-roi-dame {
  0%, 30% { opacity: 1; }
  50%, 80% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .carte .alterne .alt { animation: none; }
  .carte .alterne .alt-b { opacity: 0; }
}

.rouge { color: var(--rouge); }

/* Goodchild a des chiffres proportionnels (le « 1 » fait 0,343 em, le « 0 »
   0,506 em) : chaque chiffre est posé dans une cellule de la largeur du plus
   large pour que les valeurs ne sautent pas quand elles changent. */
.chiffre {
  display: inline-block;
  width: 0.506em;
  text-align: center;
}

/* ---- grille des êtres ---- */

.grid-etres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.etre-btn {
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.etre-btn:active { background: var(--paper-2); }

/* Le Damné n'existe pas dans l'aide de jeu officielle : légèrement estompé
   (30 % de transparence) pour bien le distinguer des êtres canoniques. */
.etre-btn[data-id='damne'] { opacity: 0.7; }

.etre-btn .nom {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.badge-helios,
.badge-antares {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Antarès est une étoile rouge : badge teinté pour le distinguer d'Hélios */
.badge-antares {
  color: var(--rouge);
  border-color: var(--rouge);
}

.panel h2 .badge-antares {
  vertical-align: 0.25em;
  margin-left: 2px;
}

/* noms de versions dans le texte : mêmes teintes que leurs pastilles */
.mot-antares { color: var(--rouge); }
.mot-helios { color: var(--accent); }

/* niveau de règles choisi (réglage « Règles ») : les contenus des versions
   au-delà du niveau sont estompés */
.v-antares, .v-helios { transition: opacity 0.25s ease; }
[data-regles='sinnlos'] .v-antares,
[data-regles='sinnlos'] .v-helios,
[data-regles='antares'] .v-helios { opacity: 0.35; }

/* ---- panneau arcanes : tuiles ---- */

.grid-tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.4em;
}

.grid-tuiles.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-tuiles .tuile:only-child { grid-column: 1 / -1; }

@media (max-width: 360px) {
  .grid-tuiles.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tuile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tuile:active { background: var(--paper-2); }

.tuile .icone {
  font-size: 2.4rem;
  line-height: 1.1;
  font-family: var(--serif);
}

.tuile .icone .petit-suit { font-size: 1.5rem; vertical-align: 0.12em; }

.tuile .nom { font-size: 0.98rem; }

/* ---- panneau tour du jeu ---- */

.bloc {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
}

.bloc h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.12rem;
  color: var(--accent);
}

.bloc p { margin: 0; line-height: 1.5; font-size: 0.95rem; }

.credits {
  margin-top: 2em;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.credits a { color: inherit; }

/* ---- panneau Force Céleste (feuille de score) ---- */

.fc-total {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: center;
  padding: 0.45em 0.7em;
  margin: 0 0 1em;
  /* masque le contenu qui défile dans le padding haut de .aide-body */
  box-shadow: 0 -22px 0 var(--paper);
}

.fc-total .fc-eq { color: var(--muted); }
.fc-total #fc-total { font-variant-numeric: tabular-nums; }

.fc-grp {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.15rem;
  color: var(--accent);
  margin: 1.1em 0 0.2em;
}

.fc-liste { display: flex; flex-direction: column; }

.fc-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.fc-lbl { flex: 1; font-size: 0.98rem; line-height: 1.3; }
.fc-mult { color: var(--muted); font-size: 0.85em; white-space: nowrap; }

.fc-field {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.fc-field input[type='number'] {
  width: 3.3em;
  font-family: var(--serif);
  font-size: 1.25rem;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.fc-field input::-webkit-outer-spin-button,
.fc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-field input:focus { border-bottom-color: var(--accent); }

.fc-calc {
  min-height: 0.95em;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* case à cocher stylée (input réel masqué mais accessible) */
.fc-check input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fc-box {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  display: grid;
  place-items: center;
}

.fc-check input:checked + .fc-box {
  border-color: var(--accent);
  background: var(--accent);
}

.fc-check input:checked + .fc-box::after {
  content: '✓';
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
}

.fc-check input:focus-visible + .fc-box {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ============================================================
   Dialogs
   ============================================================ */

.dlg {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 22px 22px 16px;
  max-width: min(92vw, 26rem);
  width: max-content;
  min-width: min(86vw, 20rem);
}

.dlg::backdrop { background: rgba(0, 0, 0, 0.45); }

.dlg h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.4rem;
  margin: 0 0 0.5em;
  text-align: center;
}

.dlg p { margin: 0 0 1em; text-align: center; line-height: 1.5; }

.dlg.rotated { transform: rotate(180deg); }

.dlg-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 1.2em 0 0;
  padding: 0;
}

.dlg-actions button {
  flex: 1;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 1rem;
}

.btn-ghost { border: 1px solid var(--line); color: var(--muted); }
.btn-fort { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }

/* ---- modale « Règles » : curseur cumulatif (barre remplie jusqu'au niveau
   choisi ; impossible d'atteindre Hélios sans passer par Antarès) ---- */

.regles-hint { color: var(--muted); font-size: 0.88rem; }

.regles-slider {
  position: relative;
  height: 3.1rem;
  margin: 1.6em 2.2em 0.6em;
}

/* piste : fine ligne traversante ; remplissage en dégradé fixe (encre →
   rouge Antarès → or Hélios) révélé par clip-path, donc les teintes restent
   ancrées à leur cran quel que soit le niveau */
.rs-track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.6rem - 1px);
  height: 2px;
  border-radius: 999px;
  background: var(--line);
}

.rs-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--muted), var(--rouge) 50%, var(--accent));
  transition: clip-path 0.35s ease;
}

.regles-slider[data-niveau='sinnlos'] .rs-fill { clip-path: inset(0 100% 0 0); }
.regles-slider[data-niveau='antares'] .rs-fill { clip-path: inset(0 50% 0 0); }
.regles-slider[data-niveau='helios'] .rs-fill { clip-path: inset(0 0 0 0); }

.rs-stop {
  position: absolute;
  top: 0;
  left: var(--pos);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 8px 6px;
}

.rs-dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: border-color 0.25s ease;
}

.rs-dot::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rs-stop.coche .rs-dot { border-color: var(--ink); }
.rs-stop.coche .rs-dot::after { opacity: 1; }

/* focus clavier : anneau sur le point plutôt que le rectangle par défaut */
.rs-stop:focus-visible { outline: none; }
.rs-stop:focus-visible .rs-dot { box-shadow: 0 0 0 2px var(--accent); }

/* crans teintés comme leurs pastilles */
.rs-stop[data-niveau='antares'].coche .rs-dot { border-color: var(--rouge); }
.rs-stop[data-niveau='antares'].coche .rs-dot::after { background: var(--rouge); }
.rs-stop[data-niveau='helios'].coche .rs-dot { border-color: var(--accent); }
.rs-stop[data-niveau='helios'].coche .rs-dot::after { background: var(--accent); }

.rs-label {
  font-family: var(--serif);
  font-size: 1rem;
  transition: opacity 0.25s ease;
}

.rs-stop:not(.coche) .rs-label { opacity: 0.4; }

/* deux champs numériques (départ / max) sous le curseur */
.regles-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 1.4em;
}

.regle-champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
}

.regle-champ > span {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.regle-champ input[type='number'] {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.regle-champ input[type='number']::-webkit-outer-spin-button,
.regle-champ input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; }
.regle-champ input[type='number']:focus { outline: none; border-color: var(--accent); }

/* ---- barrel picker (Nouveau Crépuscule) ----
   Tonneau iOS : scroll-snap vertical + animations pilotées par le défilement
   (chaque item pivote en rotateX en traversant le scrollport). La lecture de
   la valeur ne dépend que de scrollTop : l'effet 3D est purement décoratif. */

.barrel-wrap {
  --bi: 2.75rem;           /* hauteur d'un item */
  --visibles: 5;
  position: relative;
  width: 9rem;
  margin: 0 auto;
}

.barrel-wrap::before,
.barrel-wrap::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--accent);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.barrel-wrap::before { top: calc(50% - var(--bi) / 2); }
.barrel-wrap::after { top: calc(50% + var(--bi) / 2); }

.barrel {
  height: calc(var(--bi) * var(--visibles));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  /* centre les valeurs extrêmes (1 et 99) */
  padding-block: calc(var(--bi) * (var(--visibles) - 1) / 2);
  perspective: 30rem;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  scrollbar-width: none;
  overscroll-behavior: contain;
  outline: none;
}

.barrel::-webkit-scrollbar { display: none; }

.barrel:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 8px; }

/* drag souris en cours : snap suspendu pour suivre le pointeur librement */
.barrel { cursor: grab; }
.barrel.drag { scroll-snap-type: none; cursor: grabbing; }
.barrel.drag .barrel-item { cursor: grabbing; }

.barrel-item {
  height: var(--bi);
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* effet tonneau : pivote autour de X en traversant le scrollport */
@supports (animation-timeline: view()) {
  .barrel-item {
    animation: barrel-tour linear both;
    animation-timeline: view();
  }

  @keyframes barrel-tour {
    0%   { transform: rotateX(-58deg) scale(0.82); opacity: 0.2; }
    50%  { transform: rotateX(0deg) scale(1); opacity: 1; }
    100% { transform: rotateX(58deg) scale(0.82); opacity: 0.2; }
  }
}

/* repli sans scroll-driven animations : fondu via le masque seulement */

/* dialog de détail */

.dlg-detail {
  padding: 0;
  width: min(92vw, 24rem);
}

.detail-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.detail-entete h2 {
  flex: 1;
  text-align: left;
  margin: 0;
  font-size: 1.3rem;
}

.detail-icone {
  font-size: 1.9rem;
  font-family: var(--serif);
  line-height: 1;
}

.detail-icone:empty { display: none; }

.btn-fermer {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.05rem;
}

.detail-corps { padding: 16px 18px 20px; }

.detail-corps p {
  text-align: left;
  margin: 0 0 0.7em;
  line-height: 1.5;
  font-size: 0.95rem;
}

.detail-corps .formation { margin: 14px auto 6px; }

.detail-corps .note-variante {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px dashed var(--line);
}

.detail-corps .note-variante p {
  margin: 0.5em 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@keyframes dlg-in {
  from { opacity: 0; translate: 0 10px; }
}

.dlg[open] { animation: dlg-in 0.16s ease-out; }
.dlg.rotated[open] { animation: none; }