/* =====================================================================
   Gling : feuille de style du site
   Direction : des aplats rouge et violet, les couleurs de l'app.
   Grands titres serrés, cartes droites aux coins arrondis, aucun contour.
   Un seul objet garde du relief : le ticket à gratter.
   ===================================================================== */

/* ---------- Polices hébergées sur le site, allégées au latin ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Jetons ---------- */
/* Mise en page : une colonne sur téléphone ; sur grand écran, blocs décalés, jamais tout centré. */
:root {
  --rouge: #FF4C4C;          /* le rouge du logo : grandes surfaces, accroche */
  --violet: #5A22D6;         /* l'action : boutons, liens, Team */
  --violet-fonce: #4516B5;   /* survol des boutons */
  --nuit: #1A0939;           /* texte, le fond de l'app */
  --nuit-2: #4B3F66;         /* texte secondaire */
  --lilas: #F1EAFF;          /* fonds doux, cartes */
  --lilas-2: #E2D6FF;        /* séparations, cases vides */
  --lilas-3: #BFAEEA;        /* pointillés */
  --jaune: #FFC72C;          /* les gains : lots, prix mis en avant */
  --vert: #1FAF6B;           /* uniquement quand on gagne */
  --rouge-sombre: #C21F1F;   /* « Jamais demandé » */
  --rouge-pale: #FFE1E1;
  --blanc: #FFFFFF;

  --f-titre: "Bricolage Grotesque", Figtree, "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-feutre: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --rayon: 28px;
  --rayon-m: 20px;
  --rayon-s: 12px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --espace-section: clamp(4.5rem, 3.25rem + 5vw, 8rem);
  --focus: var(--nuit);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nuit); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--nuit);
  background: var(--blanc);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong { font-weight: 700; }
sup { font-size: .62em; line-height: 0; }
::selection { background: var(--jaune); color: var(--nuit); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 5rem; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.evitement {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  padding: .75rem 1.1rem; background: var(--nuit); color: var(--blanc);
  font-family: var(--f-titre); font-weight: 700; border-radius: var(--rayon-s); text-decoration: none;
}
.evitement:focus { top: 1rem; outline-color: var(--jaune); }

.enveloppe { width: min(100% - 2 * var(--gouttiere), 76rem); margin-inline: auto; }

.section { position: relative; padding-block: var(--espace-section); overflow-x: clip; }
.section--blanc { background: var(--blanc); }
.section--jaune { background: var(--lilas); }
.section--rouge { background: var(--rouge); --focus: var(--blanc); }
.section--bleu { background: var(--violet); color: var(--blanc); --focus: var(--blanc); }
.section--nuit { background: var(--nuit); color: var(--blanc); --focus: var(--blanc); }

/* ---------- Titres et textes ---------- */
.titre-2 {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4.5rem);
  line-height: 1; letter-spacing: -.035em;
}
.titre-3 {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  line-height: 1.15; letter-spacing: -.015em;
}
.titre-ligne { display: block; }
.chapeau {
  margin-top: 1.1rem; max-width: 38ch;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); line-height: 1.45;
}
.section--rouge .titre-2 { color: var(--blanc); }

.etiquette {
  display: inline-block; flex: none;
  padding: .28em .7em .3em;
  font-family: var(--f-titre); font-weight: 700; font-size: .75rem; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); background: var(--lilas);
  border-radius: 999px; vertical-align: middle;
}

.lien-fort {
  font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em;
  color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.lien-fort:hover { text-decoration-thickness: 3px; }
.lien-fort--clair { color: var(--blanc); }

/* ---------- Boutons ---------- */
.bouton {
  --fond: var(--violet); --texte: var(--blanc); --fond-survol: var(--violet-fonce);
  --levre: #34108C; --relief: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.75rem; padding: .85rem 1.85rem;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.1875rem; line-height: 1.1; letter-spacing: -.015em;
  text-align: center; text-decoration: none;
  color: var(--texte); background: var(--fond);
  border: 0; border-radius: 999px;
  box-shadow: 0 var(--relief) 0 var(--levre);
  margin-bottom: var(--relief);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, translate .12s ease, box-shadow .12s ease;
}
.bouton:hover { background: var(--fond-survol); translate: 0 -2px; box-shadow: 0 calc(var(--relief) + 2px) 0 var(--levre); }
.bouton:active { translate: 0 calc(var(--relief) - 1px); box-shadow: 0 1px 0 var(--levre); }
.bouton:focus-visible { outline-offset: 4px; }
.bouton--principal { --fond: var(--violet); --texte: var(--blanc); --fond-survol: #6630E6; --levre: #34108C; }
.bouton--blanc { --fond: var(--blanc); --texte: var(--nuit); --fond-survol: var(--blanc); --levre: rgba(26, 9, 57, .28); }
/* Sur le rouge, jamais de violet : le bouton principal passe en bleu nuit. */
.bouton--nuit { --fond: var(--nuit); --texte: var(--blanc); --fond-survol: #2B1656; --levre: #05010D; }
.bouton--petit { --relief: 4px; min-height: 2.75rem; padding: .5rem 1.15rem; font-size: 1rem; font-weight: 800; }

.pilule {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 2.5rem; padding: .35rem 1rem;
  font-family: var(--f-titre); font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--violet); background: var(--blanc);
  border: 0; border-radius: 999px;
  cursor: pointer;
}
.pilule svg { width: 1.1em; height: 1.1em; }
.pilule:hover { background: var(--lilas); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--lilas-2);
}
.entete__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  min-height: 4.25rem; padding-block: .6rem;
}
.entete__logo { flex: none; display: block; line-height: 0; border-radius: 8px; }
.entete__logo img { display: block; width: auto; height: 2.35rem; }
.entete__cta { margin-left: auto; }
.entete__nav { order: 10; flex-basis: 100%; }
.entete__liens { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.entete__liens > li > a { font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.entete__liens > li > a:hover { color: var(--violet); }
.entete__menu { display: none; }

.js .entete__nav { display: none; }
.js .entete__menu {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: var(--lilas); border: 0; border-radius: 999px; cursor: pointer;
}
.entete__menu-barres, .entete__menu-barres::before, .entete__menu-barres::after {
  display: block; width: 1.15rem; height: 2.5px; background: var(--nuit); border-radius: 2px;
  transition: rotate .2s ease, top .2s ease, background-color .2s ease;
}
.entete__menu-barres { position: relative; }
.entete__menu-barres::before, .entete__menu-barres::after { content: ""; position: absolute; left: 0; }
.entete__menu-barres::before { top: -6px; }
.entete__menu-barres::after { top: 6px; }
.entete__menu[aria-expanded="true"] .entete__menu-barres { background: transparent; }
.entete__menu[aria-expanded="true"] .entete__menu-barres::before { top: 0; rotate: 45deg; }
.entete__menu[aria-expanded="true"] .entete__menu-barres::after { top: 0; rotate: -45deg; }

.js .entete__nav.est-ouvert {
  display: block;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: .5rem var(--gouttiere) 1.75rem;
  background: var(--blanc); border-bottom: 1px solid var(--lilas-2);
}
.js .entete__nav.est-ouvert .entete__liens { flex-direction: column; gap: 0; }
.js .entete__nav.est-ouvert .entete__liens > li > a {
  display: block; padding: .9rem 0;
  font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em;
  border-bottom: 1px solid var(--lilas-2);
}

@media (max-width: 23.75rem) {
  .entete__logo img { height: 2.05rem; }
  .entete__barre { gap: .45rem; }
  .entete__cta { padding-inline: .9rem; }
}
@media (max-width: 21.24rem) {
  .entete__cta { display: none; }
  .entete__menu { margin-left: auto; }
}
@media (min-width: 64rem) {
  .entete__barre { flex-wrap: nowrap; gap: 1.5rem; min-height: 4.75rem; }
  .entete__logo img { height: 2.75rem; }
  .entete__nav, .js .entete__nav { display: block; order: 0; flex-basis: auto; margin-left: auto; }
  .entete__liens { gap: 2rem; }
  .entete__cta { margin-left: .5rem; }
  .js .entete__menu { display: none; }
}

/* ---------- 1. En tête de page : titre et carte à gratter ---------- */
.accroche {
  position: relative; background: var(--rouge);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--espace-section);
  overflow-x: clip;
}
.accroche__grille { display: grid; gap: clamp(3rem, 2.25rem + 3vw, 4.5rem); }
.accroche__texte { min-width: 0; container-type: inline-size; }
.accroche__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(3rem, 17vw, 5.5rem);
  line-height: .95; letter-spacing: -.045em;
  color: var(--blanc);
}
.accroche__ligne { display: block; }
.accroche__bande { display: block; color: var(--nuit); }
.accroche__sous {
  margin-top: 1.5rem; max-width: 34ch;
  font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem); line-height: 1.45;
}
.accroche__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.accroche__actions .bouton { flex: 1 1 15.5rem; }
.accroche__seul { display: inline-block; margin-top: 1.25rem; }
.accroche__jeu, .scene-ticket { position: relative; display: grid; justify-items: center; gap: 1.5rem; min-width: 0; }
.eclat { position: absolute; z-index: 2; width: 1.3rem; height: 1.3rem; color: var(--jaune); pointer-events: none; }
.eclat--t1 { top: -1.3rem; left: 4%; width: 2.3rem; height: 2.3rem; }
.eclat--t2 { top: 34%; right: -.5rem; color: var(--blanc); }
.eclat--t3 { top: 70%; left: -.4rem; width: 1rem; height: 1rem; color: var(--blanc); }
@media (prefers-reduced-motion: no-preference) {
  .a-gagne > .eclat { animation: scintille .55s ease-in-out 6 alternate; }
  .a-gagne > .eclat--t2 { animation-delay: .15s; }
  .a-gagne > .eclat--t3 { animation-delay: .3s; }
}
@keyframes scintille {
  from { scale: .55; opacity: .55; rotate: 0deg; }
  to { scale: 1.2; opacity: 1; rotate: 25deg; }
}
.accroche__note, .scene-ticket__note { max-width: 30ch; text-align: center; font-size: .9375rem; font-weight: 700; line-height: 1.4; }

@media (min-width: 40rem) {
  .accroche__titre { font-size: min(17cqi, 8.25rem); }
  .accroche__sous { max-width: 40ch; }
  .accroche__actions .bouton { flex: 0 1 auto; }
}
@media (min-width: 64rem) {
  .accroche__grille {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem);
    align-items: center; column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}

/* ---------- Le ticket à gratter : le seul objet en relief ---------- */
.ticket {
  position: relative;
  width: min(100%, 22.5rem);
  aspect-ratio: 360 / 470;
  container-type: inline-size;
  rotate: 2deg;
}
@media (min-width: 64rem) { .ticket { width: min(100%, 25rem); rotate: 3deg; } }
.ticket__cadre { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ticket__ombre { fill: var(--nuit); }
.ticket__fond { fill: var(--blanc); }
.ticket__bande { fill: var(--nuit); }
.ticket__filet { stroke: none; }
.ticket__perfo { stroke: var(--lilas-3); stroke-width: 3; stroke-dasharray: .1 9; stroke-linecap: round; }
.ticket__contour { fill: none; stroke: none; }

.ticket__haut {
  position: absolute; top: 0; left: 6.5%; right: 6.5%; height: 15.75%;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  color: var(--blanc);
  font-family: var(--f-titre); font-weight: 800; font-size: 6.2cqw; letter-spacing: -.02em; line-height: 1;
}
.ticket__haut .etiquette { font-size: 3.1cqw; color: var(--blanc); background: rgba(255, 255, 255, .2); }
.ticket__offert {
  position: absolute; top: 17.4%; left: 6%; right: 6%;
  text-align: center; font-size: 4.3cqw; line-height: 1.2; color: var(--nuit-2);
}
.ticket__offert strong { color: var(--nuit); }
.ticket__talon {
  position: absolute; top: 81.7%; bottom: 0; left: 7%; right: 7%;
  display: grid; place-items: center;
}
.ticket__infos { font-size: 3.6cqw; font-weight: 700; color: var(--nuit-2); text-align: center; }
.ticket__suite .bouton { font-size: max(1.0625rem, 4.8cqw); min-height: 2.9rem; padding-inline: 1.35rem; }

/* La zone à gratter */
.grattage {
  position: absolute; left: 6.1%; right: 6.1%; top: 24.3%; height: 48.9%;
  border-radius: 4cqw;
  overflow: hidden; background: var(--jaune);
}
.grattage__lot {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.8cqw; padding: 3cqw; text-align: center;
  background: radial-gradient(circle at 50% 36%, #FFE58A 0%, var(--jaune) 64%);
  overflow: hidden;
}
.grattage__lot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .85) 46%, rgba(255, 238, 170, .95) 50%, transparent 64%);
  background-size: 250% 100%; background-position: 150% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ticket.est-gagne .grattage__lot::after { animation: dorure 1.25s ease-out .1s both; }
}
@keyframes dorure {
  from { opacity: 1; background-position: 150% 0; }
  to { opacity: 1; background-position: -60% 0; }
}
.ticket__eclats { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grattage__picto { width: 15cqw; height: 15cqw; }
.grattage__gagne {
  display: inline-block;
  padding: .2em .7em .24em;
  font-family: var(--f-titre); font-weight: 800; font-size: 5.4cqw; line-height: 1; letter-spacing: -.01em;
  background: var(--vert); color: var(--nuit);
  border-radius: 999px;
}
.grattage__nom { font-family: var(--f-titre); font-weight: 800; font-size: 10cqw; line-height: .98; letter-spacing: -.04em; }
.grattage__retrait { font-weight: 700; font-size: 3.9cqw; }
.grattage__rejouer { margin-top: 1cqw; }

.grattage__couche {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%23FFC72C' stroke='%231A0939' stroke-width='3'/%3E%3Ccircle cx='18' cy='18' r='9.5' fill='none' stroke='%231A0939' stroke-width='2' stroke-dasharray='2 3'/%3E%3C/svg%3E") 18 18, pointer;
  transition: opacity .45s ease;
}
.grattage__couche:focus-visible { outline: 3px solid var(--nuit); outline-offset: -6px; }
.js .grattage__couche:not(.est-prete) { background: linear-gradient(135deg, #AAB2BE, #E9EDF2 27%, #BCC3CD 50%, #F3F5F8 73%, #A6AEBA); }
.grattage__couche.est-gratte { opacity: 0; pointer-events: none; }
.grattage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 140% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .grattage::after { animation: reflet 5s ease-in-out 1.4s infinite; }
}
.grattage.a-commence::after { display: none; }
@keyframes reflet {
  0% { background-position: 140% 0; }
  28%, 100% { background-position: -40% 0; }
}
.ticket.est-gagne .grattage__gagne { animation: surgit .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.ticket.est-gagne .grattage__nom { animation: surgit .5s .08s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes surgit {
  from { scale: .6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

/* ---------- 2. Le bandeau remplacement, et le ticket de caisse ---------- */
.remplacement__grille { display: grid; row-gap: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.remplacement__titre {
  display: grid; gap: .3em;
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.8vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.035em;
}
.remplacement__ligne { display: flex; align-items: center; gap: .4em; }
.picto-barre {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 1.2em; height: 1.2em;
  background: var(--blanc); border-radius: 50%;
}
.picto-barre svg { width: 64%; height: 64%; }
.picto-barre::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 112%; height: .09em; min-height: 4px;
  background: var(--rouge); border-radius: 99px;
  translate: -50% -50%; rotate: -40deg;
  box-shadow: 0 0 0 3px var(--nuit);
}
.remplacement__texte {
  max-width: 38ch;
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); font-weight: 700; line-height: 1.45;
}
@media (min-width: 60rem) {
  .remplacement__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-areas: "titre recu" "texte recu";
    align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .remplacement__titre { grid-area: titre; }
  .remplacement__texte { grid-area: texte; }
  .remplacement__grille > .recu { grid-area: recu; }
}

/* Le ticket de caisse : ce qu'est Gling, pour qui, combien */
.recu { width: min(100%, 26rem); color: var(--nuit); }
.recu__papier {
  --dent: 14px;
  background: var(--blanc);
  padding: 2.4rem clamp(1.35rem, 1rem + 1.5vw, 2rem);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dent) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dent) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dent) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dent) 51% repeat-x;
}
.recu__enseigne {
  font-family: var(--f-titre); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.03em;
  text-align: center; color: var(--rouge);
}
.recu__titre {
  margin-top: .4rem; padding-bottom: 1rem; border-bottom: 1.5px dashed var(--lilas-3);
  font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em;
  text-align: center;
}
.recu__definition { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.55; }
.recu__lignes {
  display: grid; gap: .6rem;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1.5px dashed var(--lilas-3);
  font-variant-numeric: tabular-nums;
}
.recu__lignes div { display: flex; align-items: baseline; gap: .5rem; }
.recu__lignes dt { display: flex; align-items: baseline; flex: 1; gap: .45rem; min-width: 0; }
.recu__lignes dt::after { content: ""; flex: 1; min-width: 1.25rem; border-bottom: 2px dotted var(--lilas-3); translate: 0 -.3em; }
.recu__lignes dd { margin: 0; font-family: var(--f-titre); font-weight: 800; font-size: 1.125rem; white-space: nowrap; }
.recu__note {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1.5px dashed var(--lilas-3);
  font-size: .9375rem; line-height: 1.45; color: var(--nuit-2);
}

/* ---------- 3. Comment ça marche au comptoir ---------- */
.comptoir { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
.comptoir__entete { max-width: 42rem; }
.comptoir__entete .chapeau { color: var(--nuit-2); }
@media (min-width: 56rem) {
  .comptoir {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "entete entete" "caisse etapes";
    align-items: start; column-gap: clamp(2.5rem, 6vw, 6rem);
  }
  .comptoir__entete { grid-area: entete; }
  .caisse { grid-area: caisse; }
  .etapes { grid-area: etapes; padding-top: .5rem; }
}

.caisse { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.25rem; min-width: 0; }
.caisse__carte {
  width: min(100%, 21rem);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem;
  padding: 1.5rem 1.4rem 1.6rem;
  text-align: center; color: var(--blanc);
  background: var(--rouge); border-radius: var(--rayon);
}
.caisse__logo { justify-self: start; width: 6rem; height: auto; }
.caisse__titre { font-family: var(--f-titre); font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -.04em; margin-top: -.25rem; }
.caisse__qr { width: 62%; height: auto; border-radius: 16px; }
.caisse__saisie { width: 100%; min-width: 0; padding: .9rem .9rem 1.05rem; color: var(--nuit); background: var(--blanc); border-radius: 16px; container-type: inline-size; }
.caisse__consigne { font-family: var(--f-titre); font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.caisse__code {
  display: flex; justify-content: center; gap: min(.3rem, 1.2cqi); margin-top: .55rem;
  font-family: var(--f-feutre); font-size: min(2rem, 11.4cqi); line-height: 1.15; color: var(--nuit);
}
.caisse__code span { position: relative; display: inline-block; width: 1.15em; rotate: var(--r, 0deg); }
.caisse__code span::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -.05em;
  height: 3px; border-radius: 2px; background: var(--lilas-2);
  rotate: calc(var(--r, 0deg) * -1);
}
.caisse__legende { max-width: 30ch; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--nuit-2); }
.caisse__legende .etiquette { margin-left: .25rem; }

.etapes { display: grid; }
.etape {
  position: relative;
  display: grid; grid-template-columns: 3rem 2.75rem minmax(0, 1fr);
  column-gap: 1rem; align-items: start;
  padding-bottom: 2.1rem;
}
.etape:last-child { padding-bottom: 0; }
.etape:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.4rem; bottom: .4rem;
  border-left: 2px dashed var(--lilas-3);
}
.etape__num {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; line-height: 1;
  color: var(--blanc); background: var(--violet); border-radius: 50%;
}
.etape__picto { width: 2.75rem; height: 2.75rem; margin-top: .15rem; }
.etape__texte { padding-top: .3rem; }
.etape__texte p { margin-top: .3rem; color: var(--nuit-2); }

/* ---------- 4. Les jeux jouables ---------- */
.jeux { padding-top: calc(var(--espace-section) + 2.75rem); }
.jeux::before, .store::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.4rem;
  background: repeating-linear-gradient(90deg, var(--rouge) 0 2.5rem, var(--blanc) 2.5rem 5rem);
  -webkit-mask:
    radial-gradient(circle 1.25rem at 50% calc(100% - 1.25rem), #000 97%, #0000) 0 100% / 2.5rem 2.5rem repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1.25rem) no-repeat;
  mask:
    radial-gradient(circle 1.25rem at 50% calc(100% - 1.25rem), #000 97%, #0000) 0 100% / 2.5rem 2.5rem repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1.25rem) no-repeat;
}
.jeux__entete { display: grid; gap: 1rem; max-width: 50rem; margin-bottom: clamp(2.5rem, 1.75rem + 3vw, 3.75rem); }
.jeux__note { max-width: 44ch; font-weight: 700; font-size: 1.0625rem; color: var(--lilas-2); }
.jeux__grille { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 56rem) {
  .jeux__grille { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
  .jeu--tirage { margin-top: 4rem; }
}
.jeu {
  --focus: var(--nuit);
  position: relative; min-width: 0;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  color: var(--nuit); background: var(--blanc); border-radius: var(--rayon);
}
.jeu__type {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  margin-bottom: 1.25rem;
}
.jeu__nom {
  padding: .45rem .9rem;
  font-family: var(--f-titre); font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap;
  color: var(--nuit); background: var(--rouge-pale); border-radius: 999px;
}
.jeu--tirage .jeu__nom { color: var(--violet); background: var(--lilas); }
.jeu__prix { font-family: var(--f-titre); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.jeu > p:not([class]) { margin-top: .45rem; max-width: 46ch; color: var(--nuit-2); }

.jeu__action { display: grid; justify-items: center; gap: .9rem; width: 100%; }
.jeu__resultat { display: grid; justify-items: center; gap: .65rem; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .jeu__resultat { animation: surgit .45s cubic-bezier(.3, 1.5, .5, 1) both; }
}
.resultat__lot { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; }
.resultat__mot {
  display: inline-block; margin-right: .15em;
  padding: .1em .5em .14em;
  background: var(--vert); color: var(--nuit);
  border-radius: 999px;
}
.resultat__code { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.resultat__code strong {
  padding: .15em .55em;
  font-family: var(--f-titre); font-weight: 800; letter-spacing: .08em;
  color: var(--violet); background: var(--lilas); border-radius: 8px;
}
.resultat__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .35rem; }
.resultat__boutons .pilule { background: var(--lilas); }
.resultat__boutons .pilule:hover { background: var(--lilas-2); }

/* La roue */
.roue { display: grid; justify-items: center; gap: 1.4rem; margin-top: 1.6rem; }
.roue__cadre {
  position: relative;
  width: min(100%, 19rem); aspect-ratio: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.roue__disque { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.roue__libelles text {
  font-family: var(--f-titre); font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  text-anchor: middle; dominant-baseline: central;
}
.roue__ampoules circle { fill: var(--blanc); }
@media (prefers-reduced-motion: no-preference) {
  .roue.tourne .roue__ampoules circle { animation: ampoule .32s steps(1) infinite; }
  .roue.tourne .roue__ampoules circle:nth-child(even) { animation-delay: .16s; }
}
@keyframes ampoule { 0% { fill: var(--jaune); } 50% { fill: var(--blanc); } }
.roue .eclat { z-index: 1; }
.eclat--r1 { top: 1%; left: 5%; width: 1.7rem; height: 1.7rem; }
.eclat--r2 { top: 9%; right: 1%; color: var(--rouge); }
.eclat--r3 { top: 52%; right: -6%; }
.eclat--r4 { bottom: 3%; right: 9%; width: 1.5rem; height: 1.5rem; color: var(--violet); }
.eclat--r5 { bottom: 9%; left: -3%; color: var(--rouge); }
.eclat--r6 { top: 38%; left: -7%; width: 1rem; height: 1rem; color: var(--violet); }
@media (prefers-reduced-motion: no-preference) {
  .roue.tourne .eclat { animation: scintille .45s ease-in-out infinite alternate; }
  .roue.a-gagne .eclat { animation: scintille .55s ease-in-out 6 alternate; }
  .roue .eclat:nth-of-type(2n) { animation-delay: .2s; }
  .roue .eclat:nth-of-type(3n) { animation-delay: .35s; }
}
.roue__fleche {
  position: absolute; top: -5%; left: 50%;
  width: 13%; height: auto; translate: -50% 0;
  overflow: visible;
}

/* Le tirage au sort */
.tirage { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.tirage__compteur { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.tirage__nombre {
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.tirage__detail { font-size: .9375rem; line-height: 1.3; color: var(--nuit-2); }
.tirage__fenetre {
  --ligne: 3.4rem;
  position: relative; height: calc(3 * var(--ligne));
  overflow: hidden;
  background: var(--lilas); border-radius: var(--rayon-m);
}
.tirage__fenetre::before {
  content: ""; position: absolute; left: .4rem; right: .4rem; top: calc(var(--ligne) + 2px); height: calc(var(--ligne) - 4px);
  background: var(--blanc); border-radius: var(--rayon-s);
  transition: background-color .25s ease;
}
.tirage.a-gagne .tirage__fenetre::before { background: var(--vert); }
.tirage__bande { position: relative; will-change: transform; }
.tirage__ligne {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  height: var(--ligne); padding-inline: 1.15rem;
}
.tirage__pseudo { font-family: var(--f-titre); font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tirage__boutique { font-size: .875rem; color: var(--nuit); white-space: nowrap; }

.jeux__suite { margin-top: clamp(2.5rem, 2rem + 3vw, 3.75rem); }
.jeux__suite .lien-fort { color: var(--blanc); }

/* ---------- 5. Union ou franchise ---------- */
.team__entete { max-width: 48rem; margin-bottom: clamp(2.75rem, 2rem + 3vw, 4rem); }
.team__grille { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 56rem) {
  .team__grille { grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); align-items: start; }
  .offre--franchise { margin-top: 5rem; }
}
.offre {
  --focus: var(--nuit);
  display: grid; justify-items: start; gap: 1rem;
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--nuit); background: var(--blanc); border-radius: var(--rayon);
}
.offre--franchise { background: var(--lilas); }
.offre__picto { width: 5.5rem; height: 4rem; }
.offre__pour { font-family: var(--f-titre); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--violet); }
.offre .titre-3 { font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem); line-height: 1.04; letter-spacing: -.035em; }
.offre > p:not([class]) { max-width: 42ch; color: var(--nuit-2); }
.pastille {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem;
  padding: .55rem 1rem .6rem;
  font-weight: 700; font-size: .95rem; line-height: 1.2;
  background: var(--jaune); border-radius: 999px;
}
.pastille strong { font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.offre .bouton { margin-top: .25rem; }

/* ---------- 6. Vous êtes seul ? ---------- */
.solo { display: grid; gap: clamp(3rem, 2.5rem + 3vw, 4.5rem); }
@media (min-width: 56rem) {
  .solo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); }
}
.solo__liste { display: grid; gap: 1.1rem; margin-top: 1.9rem; }
.solo__liste li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; align-items: center; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.solo__liste svg { width: 3.25rem; height: 3.25rem; padding: .6rem; background: var(--lilas); border-radius: 50%; color: var(--violet); }
.solo__precision { margin-top: 1.6rem; max-width: 42ch; color: var(--nuit-2); }
.solo__texte .bouton { margin-top: 1.6rem; }

.tampons { display: grid; justify-items: center; gap: 1.25rem; }
.tampons__carte {
  width: min(100%, 25rem);
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--lilas); border-radius: var(--rayon);
}
.tampons__entete {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.03em;
}
.tampons__entete .etiquette { background: var(--blanc); }
.tampons__sous { margin-top: .3rem; font-size: .9375rem; color: var(--nuit-2); }
.tampons__grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.case {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; color: var(--nuit-2);
  border: 2px dashed var(--lilas-3); border-radius: 50%;
}
.case--pleine { border: 0; color: var(--violet); }
.case--pleine svg { width: 100%; height: 100%; }
.case--avis {
  gap: 0; align-content: center;
  color: var(--blanc); background: var(--nuit); border: 0;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
}
.case--avis svg { width: 48%; height: 48%; margin-bottom: -.05rem; color: var(--jaune); }
.tampons__legende { max-width: 32ch; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--nuit-2); }

/* ---------- 7. Les prix en une phrase ---------- */
.prix { display: grid; gap: clamp(3rem, 2.25rem + 3vw, 4rem); }
@media (min-width: 56rem) {
  .prix { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.prix__titre {
  display: grid; justify-items: start; gap: .05em;
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.25rem); line-height: 1; letter-spacing: -.045em;
  color: var(--blanc);
}
.prix__ligne { display: block; }
.prix__ligne:last-child { color: var(--nuit); }
.prix__cote { display: grid; justify-items: start; gap: 1.5rem; }
.etiquette-prix { position: relative; width: min(100%, 18rem); aspect-ratio: 300 / 150; }
.etiquette-prix__forme { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.etiquette-prix__texte {
  position: absolute; inset: 0 0 0 22%;
  display: grid; place-content: center; text-align: center;
  color: var(--nuit);
}
.etiquette-prix__mot { font-family: var(--f-titre); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.etiquette-prix__montant { font-family: var(--f-titre); font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -.05em; }
.prix__texte { max-width: 26ch; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; }

/* ---------- 8. Zéro fichier client ---------- */
.donnees { display: grid; gap: clamp(3rem, 2.5rem + 3vw, 4.5rem); }
@media (min-width: 56rem) {
  .donnees { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); }
}
.donnees__texte .chapeau { color: var(--nuit-2); }
.donnees__demo { display: grid; justify-items: center; padding-block: .5rem 1rem; }
.fiche {
  position: relative;
  width: min(100%, 20rem);
  padding: 1.35rem 1.35rem 1.6rem;
  background: var(--lilas); border-radius: var(--rayon-m);
}
.fiche--barree { justify-self: start; }
.fiche--pseudo { z-index: 1; justify-self: end; margin-top: -1.25rem; color: var(--blanc); background: var(--violet); }
@media (min-width: 30rem) {
  .donnees__demo { justify-items: stretch; }
  .fiche--barree { margin-left: 2%; }
  .fiche--pseudo { margin-right: 2%; }
}
.fiche__titre { font-family: var(--f-titre); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit-2); }
.fiche--pseudo .fiche__titre { color: var(--lilas); }
.champ { position: relative; display: grid; gap: .3rem; margin-top: 1rem; font-weight: 700; }
.champ + .champ { margin-top: 1.1rem; }
.champ__ligne { position: relative; display: block; height: 2.6rem; background: var(--blanc); border-radius: 10px; }
.champ__ligne::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 3px; background: var(--rouge); border-radius: 2px; rotate: -4deg;
}
.fiche__tampon {
  position: absolute; right: 1.1rem; top: -.9rem;
  padding: .35em .75em .38em;
  font-family: var(--f-titre); font-weight: 800; font-size: .95rem; line-height: 1; letter-spacing: -.005em;
  color: var(--rouge-sombre); background: var(--rouge-pale); border-radius: 999px;
}
.fiche__pseudo { margin-top: .45rem; font-family: var(--f-titre); font-weight: 800; font-size: 2.6rem; line-height: 1.05; letter-spacing: -.04em; }
.fiche__passages { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .45rem; font-weight: 700; }
.fiche--pseudo .etiquette { color: var(--blanc); background: rgba(255, 255, 255, .2); }

/* ---------- 9. Questions fréquentes ---------- */
.faq { display: grid; gap: 2.25rem; }
@media (min-width: 56rem) {
  .faq { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.faq__liste { display: grid; gap: .75rem; }
.question { --focus: var(--nuit); background: var(--blanc); border-radius: var(--rayon-m); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--f-titre); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.015em;
  list-style: none; cursor: pointer; border-radius: var(--rayon-m);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ""; flex: none;
  width: 2rem; height: 2rem;
  background:
    linear-gradient(var(--violet), var(--violet)) center / 44% 2.5px no-repeat,
    linear-gradient(var(--violet), var(--violet)) center / 2.5px 44% no-repeat,
    var(--lilas);
  border-radius: 50%;
  transition: rotate .2s ease;
}
.question[open] summary::after { rotate: 45deg; }
.question p { padding: 0 1.35rem 1.35rem; max-width: 62ch; color: var(--nuit-2); }

/* ---------- 10. Dernier appel et rue à fanions ---------- */
.final { padding-bottom: 0; }
.final__contenu { display: grid; justify-items: start; gap: 1.6rem; padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.final__titre { max-width: 14ch; font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); line-height: .98; letter-spacing: -.045em; }
.final__titre-2 { color: var(--nuit); }
.final__actions { display: flex; flex-wrap: wrap; gap: .75rem; width: 100%; }
.final__actions .bouton { flex: 1 1 15.5rem; }
@media (min-width: 40rem) { .final__actions .bouton { flex: 0 1 auto; } }
.final__rue {
  display: block; width: 100%;
  height: clamp(11rem, 7rem + 12vw, 16rem);
  background: url("../images/rue.svg") repeat-x 50% 100% / auto 100%;
}

/* ---------- Pied de page ---------- */
.pied { --focus: var(--jaune); padding-block: 3.25rem 2rem; color: var(--blanc); background: var(--nuit); }
.pied__grille { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pied__grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.pied__marque img { display: block; width: 8rem; height: auto; }
.pied__marque p { margin-top: 1rem; max-width: 34ch; color: #E4DDF5; }
.pied__cookies { font-weight: 700; }
.plaque {
  display: inline-grid; justify-items: center;
  padding: .5rem 1rem .55rem;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; line-height: 1.05; letter-spacing: .03em;
  text-transform: uppercase; color: var(--blanc);
  background: var(--violet); border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--violet), inset 0 0 0 5px var(--blanc);
}
.plaque span { font-size: .62rem; font-weight: 700; letter-spacing: .14em; }
.pied__titre { font-family: var(--f-titre); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: #B9A8E6; }
.pied__nav ul { display: grid; gap: .6rem; margin-top: .9rem; }
.pied__nav a { font-weight: 700; text-decoration: none; }
.pied__nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.pied__bas { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid #3A2B5E; font-size: .875rem; color: #C9BEE6; }

/* ---------- Au défilement, les cartes glissent doucement en place ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-pose] { transition: translate .7s cubic-bezier(.2, .8, .2, 1); }
  .js [data-pose].en-attente { translate: 0 1.25rem; }
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Pages intérieures : Team, Jeux, Tarifs, Démo, pages légales
   Même règle que l'accueil : sur le rouge, du bleu nuit et du blanc.
   ===================================================================== */

/* La page en cours, dans le menu */
.entete__liens a[aria-current="page"] {
  color: var(--violet);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .4em;
}

/* ---------- Tête de page ---------- */
.tete { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--espace-section); overflow-x: clip; }
.tete--rouge { background: var(--rouge); --focus: var(--blanc); }
.tete--violet { background: var(--violet); color: var(--blanc); --focus: var(--blanc); }
.tete--nuit { background: var(--nuit); color: var(--blanc); --focus: var(--blanc); }
.tete--lilas { background: var(--lilas); }
.tete__grille { display: grid; gap: clamp(3rem, 2.25rem + 3vw, 4.5rem); }
@media (min-width: 64rem) {
  .tete__grille {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
    align-items: center; column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}
.tete__texte { min-width: 0; }
.tete__titre {
  max-width: 16ch;
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(2.6rem, 1.45rem + 5.2vw, 5.4rem);
  line-height: .97; letter-spacing: -.045em;
}
.tete__ligne, .tete__bande { display: block; }
.tete--rouge .tete__ligne { color: var(--blanc); }
.tete--rouge .tete__bande { color: var(--nuit); }
.tete--violet .tete__bande { color: var(--jaune); }
.tete--nuit .tete__bande { color: var(--rouge); }
.tete--lilas .tete__bande { color: var(--violet); }
.tete__sous {
  margin-top: 1.5rem; max-width: 40ch;
  font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem); line-height: 1.45;
}
.tete__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.tete__actions .bouton { flex: 1 1 15.5rem; }
@media (min-width: 40rem) { .tete__actions .bouton { flex: 0 1 auto; } }
.tete__lien { display: inline-block; margin-top: 1.25rem; }

/* Le store rayé de l'échoppe, en tête de la page Jeux */
.store { padding-top: calc(clamp(2.5rem, 1.5rem + 4vw, 4.5rem) + 3.4rem); }

/* Jeux : les trois jeux en cartes, dans la tête de page */
.choix-jeux { display: grid; gap: .75rem; }
.choix-jeux a {
  --focus: var(--blanc);
  position: relative;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 1rem 3.25rem 1rem 1.1rem;
  color: var(--nuit); background: var(--blanc); border-radius: var(--rayon-m); text-decoration: none;
  transition: background-color .15s ease, translate .15s ease;
}
.choix-jeux a::after {
  content: ""; position: absolute; right: 1.25rem; top: 50%; translate: 0 -50%;
  width: 1.2rem; height: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5' fill='none' stroke='%235A22D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.choix-jeux a:hover { background: var(--lilas); translate: 0 -2px; }
.choix-jeux__picto { grid-row: span 2; width: 3.5rem; height: 3.5rem; padding: .5rem; background: var(--lilas); border-radius: 50%; }
.choix-jeux a:hover .choix-jeux__picto { background: var(--blanc); }
.choix-jeux__nom { align-self: end; font-family: var(--f-titre); font-weight: 800; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.choix-jeux__usage { align-self: start; margin-top: .15rem; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--nuit-2); }
@media (min-width: 64rem) {
  .choix-jeux li:nth-child(2) { margin-left: 1.75rem; }
  .choix-jeux li:nth-child(3) { margin-left: 3.5rem; }
}

/* Petits sommaires en pastilles */
.sommaire { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.sommaire a {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.1rem; padding: .45rem 1.15rem .45rem .5rem;
  font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
  color: var(--nuit); background: var(--blanc); border-radius: 999px; text-decoration: none;
}
.sommaire a:hover { background: var(--lilas); }
.sommaire svg { width: 2.2rem; height: 2.2rem; flex: none; }

.titre-ligne--nuit { color: var(--nuit); }
.titre-ligne--jaune { color: var(--jaune); }
.titre-ligne--violet { color: var(--violet); }

/* Listes cochées */
.liste-cochee { display: grid; gap: .65rem; }
.liste-cochee li { position: relative; padding-left: 2rem; font-weight: 700; line-height: 1.4; }
.liste-cochee li::before {
  content: ""; position: absolute; left: 0; top: .05em;
  width: 1.35rem; height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%235A22D6'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.liste-cochee--claire li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23FFC72C'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%231A0939' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.liste-cochee--nuit li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231A0939'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Team : la carte commune ---------- */
.carte-commune { display: grid; justify-items: center; gap: 1.25rem; }
.carte-commune .tampons__carte { color: var(--nuit); background: var(--blanc); }
.carte-commune .tampons__entete .etiquette { background: var(--lilas); }
.carte-commune__legende { max-width: 30ch; text-align: center; font-size: .9375rem; font-weight: 700; line-height: 1.45; }
.case--tirage { background: var(--nuit); border: 0; }
.case--tirage svg { width: 58%; height: 58%; }

/* Team : le tirage papier face au tirage Gling */
.probleme { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
@media (min-width: 64rem) {
  .probleme { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(2.5rem, 4vw, 4rem); }
}
.probleme__texte .chapeau { color: var(--nuit-2); }
.probleme__texte .etiquette { margin-top: 1.25rem; background: var(--blanc); }
.probleme__recus { display: grid; gap: 1.25rem; justify-items: center; }
@media (min-width: 36rem) {
  .probleme__recus { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 1rem; }
  .probleme__recus .recu { width: 100%; }
  .probleme__recus .recu__papier { padding-inline: clamp(1.1rem, .8rem + 1vw, 1.6rem); }
  .probleme__recus .recu:last-child { margin-top: 3.25rem; }
}
.recu--papier .recu__papier { background: var(--lilas-2); }
.recu--papier .recu__enseigne { color: var(--nuit-2); }
.recu--papier .recu__titre, .recu--papier .recu__lignes, .recu--papier .recu__note { border-color: var(--lilas-3); }
.recu__enseigne--petit { font-size: 1.65rem; }
.recu__titre--petit { font-size: 1.125rem; }
.recu__zero { color: var(--violet); }

/* Team : ce que fait une Team */
.fonctions { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 56rem) {
  .fonctions { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .fonction--grande { grid-row: span 2; }
}
.fonction { padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem); background: var(--lilas); border-radius: var(--rayon); }
.fonction__picto { width: 3.5rem; height: 3.5rem; }
.fonction .titre-3 { margin-top: 1rem; }
.fonction p { margin-top: .5rem; max-width: 40ch; color: var(--nuit-2); }
.fonction--grande { color: var(--blanc); background: var(--violet); }
.fonction--grande .titre-3 { font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem); line-height: 1.04; letter-spacing: -.035em; }
.fonction--grande p { color: #EFE8FF; font-size: 1.125rem; }
/* Le chemin d'un client d'une boutique à l'autre */
.chemin { display: flex; align-items: center; margin-top: 1.75rem; }
.chemin li { display: grid; justify-items: center; gap: .45rem; flex: none; font-weight: 700; font-size: .875rem; }
.chemin svg { width: clamp(3.1rem, 2.6rem + 2vw, 4rem); height: clamp(3.1rem, 2.6rem + 2vw, 4rem); }
.chemin .chemin__trait { flex: 1 1 auto; min-width: 1rem; max-width: 7rem; height: 0; margin-bottom: 1.6rem; border-top: 3px dashed rgba(255, 255, 255, .55); }
@media (min-width: 56rem) {
  .fonction--grande { display: flex; flex-direction: column; }
  .fonction--grande .chemin { margin-top: auto; padding-top: 2rem; }
  .fonction--grande .chemin svg { width: 4.5rem; height: 4.5rem; }
}

.demarrer { margin-top: clamp(3rem, 2.5rem + 2vw, 4rem); }
.demarrer__etapes { display: grid; gap: 1.5rem; margin-top: 1.4rem; }
@media (min-width: 48rem) { .demarrer__etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; } }
.demarrer__etapes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.demarrer__etapes p { padding-top: .35rem; color: var(--nuit-2); }
.demarrer__etapes strong { display: block; font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; color: var(--nuit); }

/* Team : union ou franchise */
.section--nuit .team__entete .chapeau { color: #E4DDF5; }
.offre .liste-cochee { margin-block: .25rem .5rem; }
.offre .liste-cochee li { color: var(--nuit); }

/* Team : exemples de prix */
.prix-team { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
@media (min-width: 56rem) {
  .prix-team { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.prix-team .chapeau { max-width: 36ch; }
.prix-team .bouton { margin-top: 1.9rem; }
.exemples { display: grid; gap: .75rem; }
.exemple {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.35rem;
  background: var(--blanc); border-radius: var(--rayon-m);
}
.exemple span { font-weight: 700; line-height: 1.3; }
.exemple small { display: block; margin-top: .15rem; font-size: .875rem; color: var(--violet); }
.exemple strong { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
@media (min-width: 30rem) {
  .exemple:nth-child(2) { margin-left: 1.25rem; }
  .exemple:nth-child(3) { margin-left: 2.5rem; }
}
.exemples__note { margin-top: .5rem; font-size: .9375rem; font-weight: 700; line-height: 1.45; }

/* ---------- Jeux : une section par démo ---------- */
.demo-jeu__grille { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
@media (min-width: 60rem) {
  .demo-jeu__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); }
  .demo-jeu--inverse .demo-jeu__texte { order: 2; }
}
.demo-jeu__texte { min-width: 0; }
.demo-jeu__texte .jeu__type { justify-content: flex-start; }
.demo-jeu__texte .chapeau { max-width: 36ch; }
.demo-jeu__texte .liste-cochee { margin-top: 1.6rem; }
.demo-jeu__texte .bouton { margin-top: 1.9rem; }
.section--rouge .jeu__nom, .section--bleu .jeu__nom { background: var(--blanc); }
.section--bleu .jeu__nom { color: var(--violet); }
.section--rouge .demo-jeu__texte .titre-2 { color: var(--blanc); }
.jeu--scene { display: grid; justify-items: center; }
.jeu--lilas { background: var(--lilas); }
.jeu--scene .roue, .jeu--scene .tirage { margin-top: 0; width: 100%; }

/* Jeux : l'ardoise des envies */
.envies { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 60rem) {
  .envies { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.envies .chapeau { color: var(--nuit-2); }
.ardoise {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  color: var(--blanc); background: var(--nuit); border-radius: var(--rayon);
}
.ardoise table { width: 100%; border-collapse: collapse; }
.ardoise thead th {
  padding: 0 0 .9rem;
  font-family: var(--f-titre); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: #B9A8E6;
}
.ardoise tbody th, .ardoise td { padding: 1rem 0; text-align: left; vertical-align: top; border-top: 1.5px dashed rgba(255, 255, 255, .22); }
.ardoise tbody th { width: 46%; padding-right: 1.75rem; font-family: var(--f-titre); font-weight: 800; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.015em; }
.ardoise td { color: #E4DDF5; font-weight: 700; line-height: 1.45; }
.ardoise td strong { color: var(--jaune); }
@media (max-width: 40rem) {
  .ardoise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ardoise tbody tr { display: block; padding: 1rem 0; border-top: 1.5px dashed rgba(255, 255, 255, .22); }
  .ardoise tbody tr:first-child { border-top: 0; padding-top: 0; }
  .ardoise tbody th, .ardoise td { display: block; width: auto; padding: 0; border: 0; }
  .ardoise td { margin-top: .35rem; }
}

/* ---------- Tarifs ---------- */
.formules { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) {
  .formules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
  .formule--jeu { margin-top: 2.75rem; }
}
.formule {
  --focus: var(--nuit);
  display: grid; justify-items: start; gap: 1.15rem;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  border-radius: var(--rayon);
}
.formule--solo { background: var(--lilas); }
.formule--jeu { background: var(--jaune); }
.formule--team { color: var(--blanc); background: var(--violet); --focus: var(--blanc); }
.formule__tete { display: flex; align-items: center; gap: .75rem; }
.formule__tete svg { width: 3rem; height: 3rem; flex: none; }
.formule--team .formule__tete svg { width: 4.1rem; height: 3rem; }
.formule__nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -.025em; }
.formule__prix { display: grid; gap: .35rem; }
.formule__prix strong { font-family: var(--f-titre); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem); line-height: .95; letter-spacing: -.05em; }
.formule__prix span { max-width: 26ch; font-weight: 700; line-height: 1.35; }
.formule .liste-cochee { padding-top: 1.15rem; border-top: 1.5px dashed rgba(26, 9, 57, .25); }
.formule--team .liste-cochee { border-color: rgba(255, 255, 255, .35); }
.formule .bouton { margin-top: .35rem; }
.formules__note { margin-top: 1.25rem; font-weight: 700; color: var(--nuit-2); }
.formule__pour { margin-top: -.55rem; font-weight: 700; line-height: 1.3; color: #EFE8FF; }

/* Tarifs : le prix pour les unions, en trois paliers puis un plafond */
.unions { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 60rem) {
  .unions {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "texte bareme" "paliers bareme";
    align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .unions__texte { grid-area: texte; }
  .paliers { grid-area: paliers; }
  .bareme { grid-area: bareme; align-self: center; }
}
.unions .chapeau { max-width: 42ch; color: var(--nuit-2); }
.paliers { display: grid; gap: .6rem; }
.palier {
  display: grid; gap: .3rem;
  padding: 1rem 1.25rem 1.1rem; background: var(--blanc); border-radius: var(--rayon-m);
}
.palier__quand { font-family: var(--f-titre); font-weight: 700; font-size: .8125rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit-2); }
.palier--plafond .palier__quand { color: var(--nuit); }
.palier__prix { font-weight: 700; line-height: 1.3; color: var(--nuit-2); }
.palier__prix strong {
  margin-right: .2rem;
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.6rem, 1.4rem + .8vw, 2rem); letter-spacing: -.04em; color: var(--nuit);
}
.palier--plafond { background: var(--jaune); }
.palier--plafond .palier__prix { color: var(--nuit); }
@media (min-width: 30rem) {
  .palier:nth-child(2) { margin-left: 1.25rem; }
  .palier:nth-child(3) { margin-left: 2.5rem; }
}
.bareme { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--blanc); border-radius: var(--rayon); }
.bareme table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bareme__titre { padding-bottom: 1rem; text-align: left; font-family: var(--f-titre); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.bareme thead th {
  padding: 0 0 .7rem;
  font-family: var(--f-titre); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: var(--nuit-2);
}
.bareme thead th:last-child { text-align: right; }
.bareme tbody th, .bareme td { padding-block: .8rem; border-top: 1.5px dashed var(--lilas-3); }
.bareme tbody th { text-align: left; font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; }
.bareme td {
  text-align: right; white-space: nowrap;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
}
.bareme td .etiquette { margin-right: .5rem; vertical-align: .15em; }
.bareme__plafond td { color: var(--violet); }
.bareme__note { margin-top: 1rem; font-size: .9375rem; line-height: 1.45; color: var(--nuit-2); }

/* Tarifs : le calculateur de la Team */
.calcul { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 60rem) {
  .calcul { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
.calcul__carte {
  --focus: var(--nuit);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  color: var(--nuit); background: var(--blanc); border-radius: var(--rayon);
}
.calcul__type { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; }
.calcul__legende {
  float: left; width: 100%; margin-bottom: .6rem; padding: 0;
  font-family: var(--f-titre); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit-2);
}
.choix {
  position: relative; display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: .55rem 1.1rem;
  font-weight: 700; line-height: 1.2; color: var(--nuit); background: var(--lilas); border-radius: 999px; cursor: pointer;
}
.choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix.est-choisi { color: var(--blanc); background: var(--violet); }
.choix:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 2px; }
.calcul__question { display: block; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; }
.calcul__saisie { display: grid; grid-template-columns: minmax(0, 1fr) 5.75rem; gap: 1rem; align-items: center; margin-top: 1.4rem; }
.calcul__curseur { --rempli: 12%; width: 100%; height: 2.75rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.calcul__curseur::-webkit-slider-runnable-track {
  height: .8rem; border-radius: 999px;
  background: linear-gradient(var(--violet), var(--violet)) 0 0 / var(--rempli) 100% no-repeat, var(--lilas-2);
}
.calcul__curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.3rem; height: 2.3rem; margin-top: -.75rem;
  background: var(--violet); border: 4px solid var(--blanc); border-radius: 50%;
  box-shadow: 0 3px 0 #34108C;
}
.calcul__curseur::-moz-range-track { height: .8rem; border-radius: 999px; background: var(--lilas-2); }
.calcul__curseur::-moz-range-progress { height: .8rem; border-radius: 999px; background: var(--violet); }
.calcul__curseur::-moz-range-thumb {
  width: 2.3rem; height: 2.3rem; box-sizing: border-box;
  background: var(--violet); border: 4px solid var(--blanc); border-radius: 50%;
  box-shadow: 0 3px 0 #34108C;
}
.calcul__nombre {
  width: 100%; min-height: 3.1rem; padding: .35rem .5rem;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.4rem; text-align: center;
  color: var(--nuit); background: var(--lilas); border: 0; border-radius: var(--rayon-s);
}
.calcul__resultat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin-top: 1.6rem; }
.calcul__prix {
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(3.4rem, 2.6rem + 3.2vw, 5.25rem);
  line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.calcul__le-jeu { font-family: var(--f-titre); font-weight: 700; font-size: 1.25rem; }
.calcul__detail { margin-top: .6rem; font-weight: 700; color: var(--nuit-2); font-variant-numeric: tabular-nums; }
.calcul__papier {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1.5px dashed var(--lilas-3);
  line-height: 1.45;
}
.calcul__exemples { margin-top: 1.4rem; font-size: .9375rem; color: var(--nuit-2); }
.calcul__exemples strong { color: var(--nuit); }
.section--bleu .calcul__texte .chapeau { color: #EFE8FF; }

/* ---------- Démo : le formulaire ---------- */
.demo__grille { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
@media (min-width: 60rem) {
  .demo__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: clamp(2.5rem, 6vw, 6rem); }
}
.demo__points { display: grid; gap: 1rem; margin-top: 2.1rem; }
.demo__points li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; align-items: center; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.demo__points svg { width: 3.25rem; height: 3.25rem; padding: .6rem; background: var(--blanc); border-radius: 50%; }
.demo__ecrire { margin-top: 2rem; font-weight: 700; }
.demo__seul { margin-top: .6rem; font-weight: 700; }
.demo__ecrire a, .demo__seul a, .prose a, .formulaire a { color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.formulaire-carte { padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); background: var(--blanc); border-radius: var(--rayon); }
.formulaire { position: relative; display: grid; gap: 1.3rem; }
.champ-f { display: grid; gap: .45rem; }
.champ-f label { font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.01em; }
.champ-f__option { font-family: var(--f-texte); font-weight: 400; color: var(--nuit-2); letter-spacing: 0; }
.champ-f input, .champ-f select, .champ-f textarea {
  width: 100%; min-height: 3.3rem; padding: .75rem 1rem;
  font: inherit; font-size: 1.0625rem; color: var(--nuit);
  background: var(--lilas); border: 2px solid transparent; border-radius: var(--rayon-s);
}
.champ-f textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
.champ-f select {
  -webkit-appearance: none; appearance: none; padding-right: 3rem;
  background: var(--lilas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235A22D6' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 1.25rem no-repeat;
}
.champ-f input::placeholder, .champ-f textarea::placeholder { color: #7D7197; }
.champ-f input:focus-visible, .champ-f select:focus-visible, .champ-f textarea:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 2px; background-color: var(--blanc); border-color: var(--lilas-2);
}
.champ-f [aria-invalid="true"] { background-color: var(--rouge-pale); border-color: var(--rouge-sombre); }
.champ-f__aide { font-size: .9375rem; color: var(--nuit-2); }
.champ-f__erreur { font-size: .9375rem; font-weight: 700; color: var(--rouge-sombre); }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__rgpd { font-size: .9375rem; line-height: 1.45; color: var(--nuit-2); }
.formulaire__envoi { justify-self: start; }
.formulaire__envoi[aria-busy="true"] { opacity: .7; cursor: progress; }
.formulaire__erreur { padding: .9rem 1.1rem; font-weight: 700; line-height: 1.45; color: var(--rouge-sombre); background: var(--rouge-pale); border-radius: var(--rayon-s); }
.formulaire__merci { display: grid; gap: .8rem; }
.formulaire__merci:focus { outline: none; }
.formulaire__merci-titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; }
.formulaire__merci-titre span { color: var(--violet); }
.formulaire__signature { margin-top: .4rem; font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

/* ---------- Pages légales ---------- */
.page-texte { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--espace-section); background: var(--blanc); }
.page-texte__enveloppe { width: min(100% - 2 * var(--gouttiere), 46rem); margin-inline: auto; }
.page-texte__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.25rem); line-height: 1; letter-spacing: -.045em; }
.page-texte__date { margin-top: 1rem; font-weight: 700; color: var(--nuit-2); }
.page-texte__chapeau { margin-top: 1.5rem; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.5; }
.sommaire--texte { margin-top: 1.75rem; }
.sommaire--texte a { padding-left: 1.15rem; background: var(--lilas); }
.sommaire--texte a:hover { background: var(--lilas-2); }
.prose { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin-top: 2.75rem; scroll-margin-top: 6rem;
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.95rem); line-height: 1.12; letter-spacing: -.025em;
}
.prose h3 { margin-top: 1.75rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
.prose p, .prose ul, .prose ol, .prose dl { margin-top: .9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
.prose li::marker { color: var(--violet); }
.prose dl { display: grid; gap: .15rem 1.25rem; }
@media (min-width: 40rem) { .prose dl { grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); } }
.prose dt { font-weight: 700; }
.prose dd { margin: 0 0 .6rem; }
.encadre { padding: 1.25rem 1.4rem; background: var(--lilas); border-radius: var(--rayon-m); }
.encadre--alerte { color: var(--rouge-sombre); background: var(--rouge-pale); font-weight: 700; }
.a-completer {
  padding: .05em .4em; font-weight: 700; font-style: normal;
  color: var(--nuit); background: #FFF1C2; border: 2px dashed #D19A00; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.page-texte .formulaire-carte { margin-top: 1.5rem; background: var(--lilas); }
.page-texte .champ-f input, .page-texte .champ-f select { background-color: var(--blanc); }

/* ---------- Dernier appel : variantes ---------- */
.final__titre--long { max-width: 19ch; font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.6rem); }
.final__mention { max-width: 44ch; font-weight: 700; line-height: 1.45; }

/* ---------- Page introuvable ---------- */
.introuvable .final__contenu { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.introuvable .sommaire { margin-top: .5rem; }

/* =====================================================================
   Menu à sous-menus : une rubrique s'ouvre au toucher (ou au clic), le détail reste à un clic.
   Sur téléphone, les rubriques s'ouvrent comme des tiroirs dans le menu.
   ===================================================================== */
.entete__rubrique { position: static; }
.entete__ouvrir {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0; min-height: 2.75rem;
  font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; color: var(--nuit);
  background: none; border: 0; cursor: pointer;
}
.entete__ouvrir::after {
  content: ""; width: .5rem; height: .5rem; margin-top: -.2rem;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg;
  transition: rotate .2s ease, margin .2s ease;
}
.entete__ouvrir[aria-expanded="true"]::after { rotate: -135deg; margin-top: .25rem; }
.entete__ouvrir:hover, .entete__ouvrir[aria-expanded="true"] { color: var(--violet); }
.sous-menu { display: none; }
.sous-menu.est-ouvert { display: block; }
.sous-menu__liens { display: grid; gap: .25rem; }
.sous-menu__liens a {
  display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: var(--rayon-s); text-decoration: none;
}
.sous-menu__liens a:hover, .sous-menu__liens a:focus-visible { background: var(--lilas); }
.sous-menu__liens strong { font-family: var(--f-titre); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
.sous-menu__liens strong { display: block; }
.sous-menu__liens span { display: block; font-family: var(--f-texte); font-weight: 400; color: var(--nuit-2); font-size: .9375rem; line-height: 1.4; }
.sous-menu__encart {
  display: grid; gap: .75rem; align-content: start; padding: 1.25rem; border-radius: var(--rayon-m);
  background: var(--violet); color: var(--blanc); --focus: var(--blanc);
}
.sous-menu__encart p:first-child { font-family: var(--f-titre); font-weight: 800; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; }
.sous-menu__encart p { color: #EFE8FF; }
.sous-menu__encart .bouton { justify-self: start; }

/* Téléphone : les rubriques, dans le menu ouvert, deviennent des tiroirs. */
.js .entete__nav.est-ouvert { max-height: calc(100dvh - 4.25rem); overflow-y: auto; }
.js .entete__nav.est-ouvert .entete__ouvrir {
  display: flex; width: 100%; justify-content: space-between; padding: .9rem 0;
  font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em; border-bottom: 1px solid var(--lilas-2);
}
.js .entete__nav.est-ouvert .sous-menu.est-ouvert { padding: .5rem 0 1rem; border-bottom: 1px solid var(--lilas-2); }
.js .entete__nav.est-ouvert .sous-menu__liens a { padding: .7rem .25rem; }
.js .entete__nav.est-ouvert .sous-menu__encart { margin-top: .75rem; }
html:not(.js) .sous-menu { display: block; }

@media (min-width: 64rem) {
  .entete__liens { align-items: center; gap: 1.6rem; }
  .entete__rubrique { position: static; }
  .sous-menu.est-ouvert {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanc); border-bottom: 1px solid var(--lilas-2);
    box-shadow: 0 24px 40px -24px rgba(26, 9, 57, .35);
  }
  .sous-menu__grille {
    width: min(100% - 2 * var(--gouttiere), 76rem); margin-inline: auto; padding-block: 1.5rem 2rem;
    display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem;
  }
  .sous-menu__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-content: start; }
  html:not(.js) .sous-menu { display: none; }
  html:not(.js) .entete__rubrique:hover .sous-menu, html:not(.js) .entete__rubrique:focus-within .sous-menu {
    display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc);
  }
}

/* =====================================================================
   Pages de fonctionnalité : fil d'Ariane, la vraie appli, les étapes, les questions repliées.
   ===================================================================== */
.ariane { padding-block: 1rem 0; font-size: .9375rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.ariane li { display: inline-flex; align-items: center; gap: .5rem; }
.ariane li + li::before { content: "›"; color: currentColor; opacity: .6; }
.ariane a { color: inherit; text-underline-offset: .2em; }
.ariane [aria-current="page"] { font-weight: 700; }
.tete--lilas .ariane, .ariane--lilas { background: var(--lilas); }

.ecran { display: grid; justify-items: center; gap: .9rem; margin: 0; }
.ecran__cadre {
  width: min(100%, 19rem); border-radius: 2.2rem; padding: .55rem; background: var(--nuit);
  box-shadow: 0 30px 60px -30px rgba(26, 9, 57, .55);
}
.ecran__cadre img { display: block; width: 100%; height: auto; border-radius: 1.7rem; }
.ecran--large .ecran__cadre { width: min(100%, 46rem); border-radius: 1.4rem; padding: .5rem; }
.ecran--large .ecran__cadre img { border-radius: 1rem; }
.ecran figcaption { max-width: 40ch; text-align: center; font-size: .9375rem; color: var(--nuit-2); }
.section--nuit .ecran figcaption, .tete--violet .ecran figcaption { color: #E4DDF5; }

.avantages { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 48rem) { .avantages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avantage { padding: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); background: var(--lilas); border-radius: var(--rayon); }
.avantage p { margin-top: .5rem; color: var(--nuit-2); }

.marche { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 64rem) { .marche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }
.marche__etapes { display: grid; gap: 1.4rem; margin-top: 1.75rem; counter-reset: etape; }
.marche__etapes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.marche__etapes li::before {
  counter-increment: etape; content: counter(etape);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px;
  font-family: var(--f-titre); font-weight: 800; background: var(--jaune); color: var(--nuit);
}
.marche__etapes p { max-width: 46ch; }
.section--nuit .marche__etapes p { color: #E4DDF5; }
.section--nuit .marche__etapes strong { color: var(--blanc); }

.voir-aussi { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .voir-aussi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voir-aussi a {
  display: grid; gap: .25rem; padding: 1.1rem 1.25rem; border-radius: var(--rayon-m);
  background: var(--lilas); text-decoration: none;
}
.voir-aussi a:hover { background: var(--lilas-2); }
.voir-aussi strong { font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; }
.voir-aussi span { color: var(--nuit-2); font-size: .9375rem; }
.tete__grille--ariane { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tete--violet .ariane a, .tete--nuit .ariane a { color: var(--blanc); }
@media (min-width: 64rem) { .marche--seul { grid-template-columns: minmax(0, 1fr); } }
.section--serree { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0; }
.section--serree + .section--serree { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section--serree:last-of-type { padding-bottom: var(--espace-section); }
.voir-aussi--grand a { padding: 1.4rem 1.5rem; }
.voir-aussi--grand strong { font-size: 1.3rem; }