/* ==========================================================================
   Casino · accueil du visiteur et écran d'invitation

   Identité : feutre vert profond, filet or, papier crème et encre. Le tapis est
   l'objet de la page : une carte de joueur (papier) est posée sur un feutre, à
   côté de cinq cartes de la table et de piles de jetons. Aucune ombre molle
   (les ombres sont des décalages nets, comme une gravure), aucun dégradé
   décoratif, des filets d'un pixel plutôt que des cartes jumelles.

   Les écrans de jeu gardent leur thème sombre (style.css) ; cette feuille ne
   s'applique qu'à `.acc`, la coquille de l'accueil. Les polices viennent de
   /static/fonts.css (jamais Google Fonts).
   ========================================================================== */

.acc {
  --acc-paper: #fbfaf7;
  --acc-card: #fdfcf9;
  --acc-ink: #0a0a0a;
  --acc-text: #404040;
  --acc-muted: #525252;
  --acc-faint: #6f6a63;
  --acc-line: rgba(10, 10, 10, 0.12);
  --acc-line-2: rgba(10, 10, 10, 0.34);
  --acc-control: #85817a;
  --acc-gold: #b89b5e;
  --acc-gold-ink: #8a6a1f;
  --acc-gold-hi: #d6b770;
  --acc-felt: #0d4630;
  --acc-cream: #f4efdf;
  --acc-err: #a8231a;
  --acc-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --acc-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --acc-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --acc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Grain du feutre : un bruit fractal blanc, à 5,5 % d'opacité. */
  --acc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--acc-paper);
  color: var(--acc-ink);
  font-family: var(--acc-body);
  font-size: 16px; line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-user-select: text; user-select: text;
}
.acc [hidden] { display: none !important; }
/* Remises à zéro à spécificité nulle (:where) : sinon `.acc p` (0,1,1) battrait
   chaque `margin-bottom` posé par une classe (0,1,0) et tout l'accueil se tasserait. */
:where(.acc) :where(a) { color: inherit; text-decoration: none; }
:where(.acc) :where(button) { font-family: inherit; }
:where(.acc) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.acc) :where(h1, h2, h3, p) { margin: 0; }
.acc-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
.acc [tabindex="-1"]:focus { outline: none; }

/* Pour les lecteurs d'écran seulement */
.acc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le focus est toujours visible : filet d'encre sur le papier, d'or sur le feutre. */
.acc a:focus-visible,
.acc button:focus-visible,
.acc .acc-check input:focus-visible {
  outline: 2px solid var(--acc-ink); outline-offset: 3px; border-radius: 6px;
}
.acc .acc-tapis a:focus-visible,
.acc .acc-final a:focus-visible,
.acc .acc-final button:focus-visible { outline-color: var(--acc-gold-hi); }
.acc .acc-carte a:focus-visible,
.acc .acc-carte button:focus-visible { outline-color: var(--acc-ink); }

/* ── En-tête ───────────────────────────────────────────────── */
.acc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
.acc-logo-link { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.acc-logo { display: block; height: 40px; width: auto; }
.acc-nav { display: flex; align-items: center; gap: 26px; }
.acc-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--acc-muted);
  transition: color 160ms ease;
}
.acc-nav a:hover { color: var(--acc-ink); }
.acc-enter {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--acc-line-2); border-radius: 10px;
  background: transparent; color: var(--acc-ink); cursor: pointer;
  font-size: 14px; font-weight: 600;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.acc-enter:hover { background: var(--acc-ink); color: var(--acc-paper); border-color: var(--acc-ink); }

/* ── Hero ──────────────────────────────────────────────────── */
.acc-main { flex: 1; display: flex; flex-direction: column; }
.acc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "tapis" "facts";
  gap: 0;
  padding-top: 20px; padding-bottom: 52px;
}
.acc-copy { grid-area: copy; padding-bottom: 22px; min-width: 0; container-type: inline-size; }
.acc-tapis { grid-area: tapis; min-width: 0; }
.acc-facts { grid-area: facts; }

.acc-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  font: 500 11px/1.4 var(--acc-mono);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc-faint);
}
.acc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--acc-gold); flex: none; }
.acc-h1 {
  margin-bottom: 18px;
  font: 600 clamp(32px, 9.6vw, 40px)/1.04 var(--acc-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* La taille suit la largeur de la colonne (unités de conteneur) : « une même maison. »
   (environ 8,3 em) tient toujours sur sa ligne. Sans cqw, la valeur ci-dessus s'applique. */
@supports (width: 1cqw) {
  .acc-h1 { font-size: clamp(32px, 10.8cqw, 54px); }
}
/* Une clause par ligne : le retour à la ligne tombe sur la virgule, jamais sur « une ». */
.acc-h1-l { display: block; }
.acc-lead {
  max-width: 34em;
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--acc-text);
}
.acc-gold { color: var(--acc-gold-ink); font-weight: 600; }

.acc-facts {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 26px;
  font: 500 11px/1.4 var(--acc-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-faint);
}
.acc-facts li { display: flex; align-items: center; gap: 9px; }
.acc-facts li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--acc-gold); transform: rotate(45deg);
}
.acc-facts strong { color: var(--acc-ink); font-weight: 600; }

/* ── Le tapis ──────────────────────────────────────────────── */
.acc-tapis {
  position: relative; isolation: isolate;
  padding: 18px 14px 52px;
  border-radius: 20px;
  color: var(--acc-cream);
  background-color: var(--acc-felt);
  background-image: var(--acc-grain);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  scroll-margin-top: 12px;
}
/* Le filet or inséré, comme la ligne de mise d'une vraie table. */
.acc-tapis::before {
  content: ""; position: absolute; inset: 8px; z-index: 0;
  border: 1px solid rgba(214, 183, 112, 0.55); border-radius: 14px;
  pointer-events: none;
}
.acc-tapis > * { position: relative; z-index: 1; }
.acc-tapis-label {
  display: none;
  margin: 6px 4px 12px; text-align: center;
  font: 500 10.5px/1 var(--acc-mono);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--acc-gold-hi);
}

/* Les cinq cartes de la table */
.acc-board {
  --acc-cw: 46px; --acc-gap: 5px;
  display: flex; justify-content: center; gap: var(--acc-gap);
  margin: 6px 4px 14px;
  perspective: 900px;
}
.acc-bcard { width: var(--acc-cw); flex: none; }
.acc-bcard-in { position: relative; transform-style: preserve-3d; }
.acc-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.acc-face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.acc-face svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.45));
}

/* Les piles de jetons : posées derrière la carte, elles dépassent de son coin bas droit. */
.acc-chips {
  position: absolute; z-index: 0;
  right: 20px; bottom: 12px;
  display: flex; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.acc-stack { position: relative; width: 34px; height: 42px; }
.acc-chip {
  position: absolute; left: 0; bottom: calc(var(--acc-k) * 5px);
  width: 34px; height: 34px; transform: scaleY(0.7); transform-origin: 50% 100%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}
.acc-chip svg { width: 100%; height: 100%; }

/* Carte annoncée : le lien de table qui a mené ici */
.acc-banner {
  margin: 0 4px 12px;
  padding: 10px 14px;
  border: 1px solid rgba(214, 183, 112, 0.6); border-left-width: 3px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 14px; line-height: 1.5; color: var(--acc-cream);
}
.acc-code {
  font: 600 14px var(--acc-mono); letter-spacing: 0.16em; color: var(--acc-gold-hi);
}

/* ── La carte de joueur ────────────────────────────────────── */
.acc-carte {
  position: relative; z-index: 1;
  container: acc-carte / inline-size;
  margin: 0 4px;
  background: var(--acc-card);
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 14px;
  box-shadow: 2px 3px 0 rgba(2, 20, 12, 0.7);
  color: var(--acc-ink);
}
.acc-carte-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 0;
}
.acc-carte-titre {
  font: 500 10.5px/1 var(--acc-mono);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc-faint);
}
.acc-tabs {
  display: flex; align-items: flex-end; gap: 22px;
  margin: 4px 18px 0; border-bottom: 1px solid var(--acc-line);
}
.acc-tab {
  position: relative; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center;
  border: 0; background: none; cursor: pointer;
  font: 600 15px/1 var(--acc-body); color: var(--acc-muted);
  transition: color 160ms ease;
}
.acc-tab:hover { color: var(--acc-ink); }
.acc-tab.is-on { color: var(--acc-ink); }
.acc-tab.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--acc-gold-ink);
}
.acc-tabs--seul { align-items: center; }
.acc-tabs--seul .acc-tab { cursor: default; }

/* Formulaires */
.acc-form { padding: 14px 18px 18px; }
.acc-form > * + * { margin-top: 12px; }
.acc-form > .acc-erreur:empty { margin-top: 0; }
.acc-form--texte { padding-top: 22px; }
.acc-field { min-width: 0; }
.acc-field > * + * { margin-top: 6px; }
.acc-label {
  display: block;
  font: 500 11px/1.3 var(--acc-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-faint);
}
.acc-input {
  display: block; width: 100%; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--acc-line-2); border-radius: 10px;
  background: #fff; color: var(--acc-ink);
  font: 450 16px/1.2 var(--acc-body);
  -webkit-user-select: text; user-select: text;
  transition: border-color 160ms ease;
}
.acc-input:focus { outline: 2px solid var(--acc-ink); outline-offset: 1px; border-color: var(--acc-ink); }
.acc-input[aria-invalid="true"] { border-color: var(--acc-err); box-shadow: inset 0 0 0 1px var(--acc-err); }
.acc-input--code {
  height: 56px; text-align: center; text-transform: uppercase;
  font: 600 22px/1 var(--acc-mono); letter-spacing: 0.4em;
  padding-left: calc(14px + 0.4em);
}
.acc-help { font-size: 13px; line-height: 1.4; color: var(--acc-muted); }
.acc-help--haut { padding-bottom: 2px; }
.acc-pw { position: relative; }
.acc-input--pw { padding-right: 52px; }
.acc-eye {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--acc-muted); cursor: pointer;
}
.acc-eye:hover { color: var(--acc-ink); }
.acc-eye .acc-eye-off { display: none; }
.acc-eye[aria-pressed="true"] .acc-eye-on { display: none; }
.acc-eye[aria-pressed="true"] .acc-eye-off { display: block; }

/* Avatars gravés : des boutons ronds de 44 px (la classe lite-avatar-opt est celle des écrans d'invitation). */
.acc-avatars { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 8px; justify-content: start; }
.acc .lite-avatar-opt {
  width: 44px; height: 44px; padding: 0;
  border: 2px solid transparent; border-radius: 50%;
  background: none; overflow: hidden; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.acc .lite-avatar-opt:hover { transform: scale(1.06); }
.acc .lite-avatar-opt.is-selected {
  border-color: var(--acc-ink);
  box-shadow: 0 0 0 3px var(--acc-gold);
}

/* Case à cocher : une vraie <input type="checkbox">, dessinée par la feuille. */
.acc-check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 3px 0; cursor: pointer;
  font-size: 14.5px; line-height: 1.45; color: var(--acc-text);
}
.acc-check input {
  -webkit-appearance: none; appearance: none;
  flex: none; display: grid; place-content: center;
  width: 24px; height: 24px; margin: 1px 0 0;
  border: 1.5px solid var(--acc-control); border-radius: 6px; background: #fff; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.acc-check input::after {
  content: ""; width: 14px; height: 14px;
  background-color: var(--acc-paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0); transition: transform 120ms ease;
}
.acc-check input:checked { background: var(--acc-ink); border-color: var(--acc-ink); }
.acc-check input:checked::after { transform: scale(1); }
.acc-check input[aria-invalid="true"] { border-color: var(--acc-err); box-shadow: 0 0 0 1px var(--acc-err); }

.acc-erreur {
  padding-left: 12px; border-left: 3px solid var(--acc-err);
  font: 500 14px/1.4 var(--acc-body); color: var(--acc-err);
}
.acc-erreur:empty { padding: 0; border: 0; height: 0; }

/* Boutons */
.acc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 0 22px;
  border: 1px solid var(--acc-ink); border-radius: 10px;
  background: var(--acc-ink); color: var(--acc-paper); cursor: pointer;
  font: 600 15px/1 var(--acc-body); letter-spacing: -0.005em;
  transition: background 160ms ease, transform 100ms ease;
}
.acc-btn:hover { background: #26262a; }
.acc-btn:active { transform: translateY(1px); }
.acc-btn[disabled] { opacity: 0.62; cursor: progress; }
.acc-btn--paper { width: auto; background: var(--acc-paper); border-color: var(--acc-paper); color: var(--acc-ink); }
.acc-btn--paper:hover { background: #fff; }
.acc-aide { font-size: 14px; color: var(--acc-muted); }
.acc-aide a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--acc-gold); }
.acc-aide a:hover { text-decoration-color: var(--acc-ink); }
.acc-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 18px 20px; padding: 12px 14px;
  border: 1px solid var(--acc-line); border-left: 3px solid var(--acc-gold);
  border-radius: 10px; background: #fff;
  font-size: 14px; line-height: 1.5; color: var(--acc-text);
}
.acc-note .acc-ico { flex: none; margin-top: 2px; color: var(--acc-gold-ink); }
.acc-note--haut { margin: 16px 18px 0; }
.acc-btn--ligne { margin-top: 10px; background: transparent; color: var(--acc-ink); }
.acc-btn--ligne:hover { background: rgba(10, 10, 10, 0.06); }
.acc-btn--table { display: inline-flex; width: auto; text-decoration: none; }
.acc-lead-table { margin-top: 18px; }
.acc-soiree { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 42em; margin-top: 18px; }
.acc-soiree p { font-size: 17px; line-height: 1.55; color: var(--acc-text); }
.acc-h1.acc-h1--carte { font-size: clamp(30px, 8vw, 40px); margin-bottom: 12px; }
.acc-lead--carte { font-size: 15.5px; margin-bottom: 18px; }
.acc-hero--seul { padding-top: 28px; }
.acc-hero--seul .acc-tapis { grid-column: 1 / -1; max-width: 560px; margin-inline: auto; width: 100%; }

/* ── Sections ──────────────────────────────────────────────── */
.acc-sec { padding-block: 44px 8px; }
.acc-sec-head { display: flex; align-items: center; gap: 18px; }
.acc-sec-head h2 {
  font: 600 clamp(26px, 3.2vw, 34px)/1.1 var(--acc-display); letter-spacing: -0.03em;
}
.acc-rule { flex: 1; height: 1px; background: var(--acc-line); min-width: 24px; }
.acc-sec-tag {
  white-space: nowrap;
  font: 500 10.5px/1 var(--acc-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-faint);
}

.acc-tables { margin-top: 24px; border-top: 1px solid var(--acc-line); }
.acc-table {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--acc-line);
}
.acc-table-art {
  display: block; width: 96px; height: 96px; border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.acc-table h3 { font: 600 22px/1.15 var(--acc-display); letter-spacing: -0.025em; margin-bottom: 4px; }
.acc-table p { font-size: 15px; line-height: 1.5; color: var(--acc-text); }
.acc-table p.acc-meta {
  margin-top: 8px;
  font: 500 10.5px/1.3 var(--acc-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-faint);
}

.acc-steps { margin-top: 24px; border-top: 1px solid var(--acc-line); }
.acc-step { padding: 22px 0; border-bottom: 1px solid var(--acc-line); }
.acc-step-n { display: block; margin-bottom: 8px; font: 600 28px/1 var(--acc-mono); color: var(--acc-gold-ink); }
.acc-step h3 { font: 600 20px/1.2 var(--acc-display); letter-spacing: -0.02em; margin-bottom: 6px; }
.acc-step p { font-size: 15px; line-height: 1.55; color: var(--acc-text); max-width: 30em; }

.acc-regle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.acc-regle-head h2 {
  font: 600 clamp(26px, 3.2vw, 34px)/1.1 var(--acc-display); letter-spacing: -0.03em;
}
.acc-regle-head .acc-eyebrow { margin-bottom: 12px; }
.acc-regle-list { border-top: 1px solid var(--acc-line); }
.acc-regle-list li {
  position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--acc-line);
  font-size: 16px; line-height: 1.55; color: var(--acc-text);
}
.acc-regle-list li::before {
  content: ""; position: absolute; left: 3px; top: 25px; width: 7px; height: 7px;
  background: var(--acc-gold); transform: rotate(45deg);
}

/* Bandeau final : le même feutre que le tapis, pour fermer la page comme elle s'ouvre. */
.acc-final { margin-top: 44px; margin-bottom: 56px; }
.acc-final-in {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 32px 26px 34px; border-radius: 20px;
  color: var(--acc-cream);
  background-color: var(--acc-felt);
  background-image: var(--acc-grain);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.acc-final-in::before {
  content: ""; position: absolute; inset: 8px; z-index: 0;
  border: 1px solid rgba(214, 183, 112, 0.55); border-radius: 14px; pointer-events: none;
}
.acc-final-in > * { position: relative; z-index: 1; }
.acc-final-in > .acc-chips { display: none; position: absolute; z-index: 0; }
.acc-final h2 {
  font: 600 clamp(28px, 4vw, 44px)/1.05 var(--acc-display); letter-spacing: -0.03em;
  color: #f8f3e3; margin-bottom: 10px;
}
.acc-final p { margin-bottom: 22px; font-size: 17px; color: #e5ddc6; }

/* ── Pied de page ──────────────────────────────────────────── */
.acc-foot { margin-top: auto; border-top: 1px solid var(--acc-line); }
.acc-foot-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 28px; padding-block: 16px;
  font: 500 10.5px/1.5 var(--acc-mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc-faint);
}
.acc-foot p, .acc-foot-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.acc-foot a {
  display: inline-flex; align-items: center; min-height: 44px; color: inherit;
}
.acc-foot a:hover { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-legal { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* Sans JavaScript : l'accueil se dessine par script ; ce message le dit. Tant que #app est vide
   (la feuille du casino lui donne toute la hauteur de la fenêtre), il resterait sous le pli. */
#app:empty { display: none; }
.acc-noscript {
  box-sizing: border-box; width: min(520px, calc(100% - 32px)); margin: 14vh auto 0; padding: 26px 28px;
  border-radius: 14px; background: #fbfaf7; color: #0a0a0a;
  font: 450 16px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.acc-noscript p + p { margin-top: 12px; }
.acc-noscript a { text-decoration: underline; }

/* ── Mouvement : une arrivée sobre, d'environ une seconde, rien en boucle ─ */
@keyframes acc-up {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes acc-fade {
  from { opacity: 0; }
}
/* Distribution : chaque carte part du coin du sabot (la première place, en haut à gauche). */
@keyframes acc-deal {
  from {
    opacity: 0;
    transform: translate(calc(var(--acc-i) * (var(--acc-cw) + var(--acc-gap)) * -1 - 18px), -20px) rotate(-12deg);
  }
  35% { opacity: 1; }
}
@keyframes acc-flip {
  from { transform: rotateY(180deg); }
}
@keyframes acc-drop {
  0%   { opacity: 0; transform: translateY(-70px) scaleY(0.7); }
  40%  { opacity: 1; }
  66%  { transform: translateY(0) scaleY(0.7); }
  82%  { transform: translateY(-6px) scaleY(0.7); }
  100% { transform: translateY(0) scaleY(0.7); }
}

.acc .acc-eyebrow, .acc .acc-h1, .acc .acc-lead, .acc .acc-facts {
  animation: acc-up 560ms var(--acc-ease) backwards;
}
.acc .acc-eyebrow { animation-delay: 0ms; }
.acc .acc-h1 { animation-delay: 60ms; }
.acc .acc-lead { animation-delay: 120ms; }
.acc .acc-facts { animation-delay: 220ms; }
.acc .acc-tapis { animation: acc-fade 480ms ease-out backwards; animation-delay: 60ms; }
.acc .acc-carte { animation: acc-up 520ms var(--acc-ease) backwards; animation-delay: 200ms; }
.acc .acc-bcard { animation: acc-deal 400ms var(--acc-ease) backwards; animation-delay: calc(120ms + var(--acc-i) * 70ms); }
.acc .acc-bcard-in { animation: acc-flip 460ms var(--acc-ease) backwards; animation-delay: calc(120ms + var(--acc-i) * 70ms + 300ms); }
.acc .acc-chip { animation: acc-drop 520ms cubic-bezier(0.3, 0.9, 0.4, 1) backwards; animation-delay: calc(380ms + var(--acc-n) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .acc, .acc *, .acc *::before, .acc *::after { animation: none !important; transition: none !important; }
}
html.reduced-motion .acc,
html.reduced-motion .acc *,
html.reduced-motion .acc *::before,
html.reduced-motion .acc *::after { animation: none !important; transition: none !important; }

/* ── Écrans moyens et grands ───────────────────────────────── */
@media (min-width: 520px) {
  .acc-tapis { padding: 22px 20px 58px; }
  .acc-tapis-label { display: block; }
  .acc-tapis::before { inset: 10px; }
  .acc-board { --acc-cw: 56px; --acc-gap: 8px; margin: 2px 4px 16px; }
  .acc-carte { margin: 0 6px; }
  .acc-chips { right: 26px; bottom: 14px; }
  .acc-final-in { padding: 40px 40px 42px; }
}
@media (min-width: 640px) {
  /* Les mêmes piles que sur le tapis, plus grandes : la page se ferme comme elle s'ouvre. */
  .acc-final-in > .acc-chips {
    display: flex; right: 44px; bottom: 40px; gap: 6px;
    transform: scale(1.5); transform-origin: 100% 100%;
  }
  .acc-final .acc-chip { animation: none; }
}
@media (min-width: 760px) {
  .acc-tables { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acc-table { grid-template-columns: 112px minmax(0, 1fr); gap: 22px; }
  .acc-table-art { width: 112px; height: 112px; }
  .acc-table:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--acc-line); }
  .acc-table:nth-child(even) { padding-left: 32px; }
  .acc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc-step { padding: 26px 28px 28px 0; border-bottom: 0; }
  .acc-step + .acc-step { padding-left: 28px; border-left: 1px solid var(--acc-line); }
  .acc-regle { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .acc-sec { padding-block: 64px 8px; }
  .acc-final { margin-top: 60px; margin-bottom: 72px; }
}
@media (min-width: 980px) {
  .acc-hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-areas: "copy tapis" "facts tapis";
    grid-template-rows: 1fr 1fr;
    column-gap: 56px; padding-top: 12px; padding-bottom: 52px;
  }
  .acc-h1 { font-size: clamp(32px, 11cqw, 74px); }
  .acc-board { --acc-cw: 50px; margin-bottom: 14px; }
  .acc-tapis { padding-top: 16px; }
  .acc-tapis-label { margin-top: 2px; margin-bottom: 10px; }
  .acc-copy { align-self: end; padding-bottom: 0; }
  .acc-facts { align-self: start; }
  .acc-carte { rotate: -0.6deg; }
  .acc-hero--seul { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tapis"; grid-template-rows: auto; }
}

@media (min-width: 1180px) {
  .acc-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ── Téléphone ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .acc-nav a { display: none; }
}
@media (max-width: 640px) {
  .acc-wrap { padding-inline: 16px; }
  .acc-top { padding-block: 12px; }
  .acc-logo { height: 34px; }
  .acc-lead-more { display: none; }
  .acc-facts { margin-top: 20px; }
  .acc-hero { padding-bottom: 36px; }
  .acc-foot-in { padding-block: 14px; }
}
/* Six boutons de 44 px et leurs écarts demandent 304 px : sous 340 px de carte, ils passent
   trois par rangée, plus grands, alignés sur les bords des champs, plutôt que cinq puis un orphelin. */
@container acc-carte (max-width: 339px) {
  .acc-avatars { grid-template-columns: repeat(3, 52px); justify-content: space-between; row-gap: 10px; }
  .acc .lite-avatar-opt { width: 52px; height: 52px; }
}
@media (max-width: 400px) {
  .acc-board { --acc-cw: 40px; --acc-gap: 5px; }
  .acc-form { padding-inline: 14px; }
  .acc-carte-tete { padding-inline: 14px; }
  .acc-tabs { margin-inline: 14px; gap: 16px; }
  .acc-note { margin-inline: 14px; }
  .acc-eyebrow { letter-spacing: 0.14em; }
}

/* iOS zoome au premier tap sous 16 px : les champs restent à 16 px minimum.
   Les porteuses sont nommées (une classe plus spécifique poserait sinon sa
   propre taille). */
@media (max-width: 760px) {
  .acc input,
  .acc textarea,
  .acc select,
  .acc .acc-input,
  .acc .acc-input--pw,
  .acc .acc-input--code { font-size: 16px; }
}

/* Écran tactile : les contrôles gardent une cible de 44 px, et le survol ne colle pas. */
@media (hover: none) {
  .acc .lite-avatar-opt:hover { transform: none; }
  .acc-btn:hover { background: var(--acc-ink); }
  .acc-btn--paper:hover { background: var(--acc-paper); }
  .acc-enter:hover { background: transparent; color: var(--acc-ink); border-color: var(--acc-line-2); }
}