/* ==========================================================================
   TWISTORIA GAME — Feuille de style du site
   --------------------------------------------------------------------------
   ► Pour changer une COULEUR, une POLICE, un ARRONDI ou la force des OMBRES
     et du VERRE, modifiez uniquement la section 1 « RÉGLAGES » ci-dessous.
   Charte graphique officielle v5.0
   ========================================================================== */

/* Polices auto-hébergées (RGPD, 22/09/2026) : plus d'appel à fonts.googleapis.com,
   qui transmettait l'IP du visiteur à Google avant tout consentement. Fichiers
   récupérés une fois pour toutes depuis Google Fonts (sous-ensemble "latin",
   qui couvre les caractères accentués français) dans assets/fonts/. Inter et
   Josefin Sans sont des polices variables : un seul fichier sert les 3 graisses
   de chacune (c'est ce que Google Fonts fait lui-même en coulisses). */
@font-face {
  font-family: "Twistoria Wavy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/twistoria-wavy.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/josefinsans-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. RÉGLAGES
   ========================================================================== */
:root {
  /* Dégradé narratif officiel (toujours violet à gauche → orange à droite) */
  --violet: #2A1B6E;
  --amethyste: #6B2E8A;
  --fusion: #9B2D6F;
  --braise: #C43D2A;
  --embrasement: #B52508;
  --degrade: linear-gradient(90deg, #2A1B6E 0%, #6B2E8A 25%, #9B2D6F 50%, #C43D2A 75%, #B52508 100%);
  /* Même dégradé éclairci, réservé au TEXTE et aux TRAITS fins posés sur le fond Nuit
     (la version officielle est trop sombre pour rester lisible sur #0D0A1A) */
  --degrade-lumiere: linear-gradient(90deg, #9C8CF0 0%, #B77AD6 25%, #D873A8 50%, #EE8466 75%, #F0704A 100%);

  /* Neutres */
  --nuit: #0D0A1A;
  --lune: #F5F2FF;
  --ombre: #3A3550;
  --crepuscule: #8A85A8;
  --texte: var(--lune);
  --texte-doux: rgba(245, 242, 255, 0.78);
  --texte-discret: #ABA6C8;
  --froid: #B3A8F0;   /* côté violet */
  --chaud: #F29A80;   /* côté orange */

  /* Polices */
  --police-marque: "Josefin Sans", system-ui, sans-serif;  /* boutons, menu, étiquettes */
  --police-titre: "Poppins", system-ui, sans-serif;         /* titres */
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Arrondis (charte : boutons quasi carrés, cartes 10–12 px) */
  --rayon-bouton: 4px;
  --rayon: 12px;
  --rayon-grand: 16px;

  /* Verre liquide */
  --verre-fond: linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.08) 100%);
  --verre-flou: blur(22px) saturate(175%);
  --verre-bord: rgba(255, 255, 255, 0.16);
  --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 0 0 24px rgba(255, 255, 255, 0.05);

  /* Ombres portées (profondeur) : 1 = proche du fond, 4 = très en avant */
  --ombre-1: 0 1px 2px rgba(5, 3, 12, 0.5), 0 4px 10px -2px rgba(5, 3, 12, 0.45);
  --ombre-2: 0 2px 4px rgba(5, 3, 12, 0.45), 0 12px 24px -8px rgba(5, 3, 12, 0.6), 0 24px 48px -24px rgba(5, 3, 12, 0.7);
  --ombre-3: 0 4px 8px rgba(5, 3, 12, 0.4), 0 20px 40px -12px rgba(5, 3, 12, 0.7), 0 48px 80px -32px rgba(5, 3, 12, 0.85);
  --ombre-4: 0 8px 16px rgba(5, 3, 12, 0.4), 0 32px 64px -16px rgba(5, 3, 12, 0.75), 0 72px 120px -40px rgba(5, 3, 12, 0.9);
  --ombre-couleur: 0 14px 30px -12px rgba(155, 45, 111, 0.75);

  --largeur: 1180px;
  --transition: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #5A3F86 var(--nuit); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: #D873A8;
  accent-color: var(--fusion);
}
main { flex: 1; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
::selection { background: rgba(155, 45, 111, 0.6); color: #fff; }
:focus-visible { outline: 2px solid #D873A8; outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--nuit); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4B32B8, #9B2D6F, #C43D2A); border-radius: 10px; border: 2px solid var(--nuit); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.nowrap { white-space: nowrap; }

/* Fond : halos colorés qui donnent de la matière au verre */
.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(42, 27, 110, 0.55), transparent 70%), var(--nuit);
}
.fond span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: derive 26s ease-in-out infinite alternate;
}
.fond span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 8vh; background: #3B23A0; }
.fond span:nth-child(2) { width: 36vw; height: 36vw; left: 32vw; top: 42vh; background: #8E2A74; animation-duration: 32s; opacity: 0.4; }
.fond span:nth-child(3) { width: 42vw; height: 42vw; right: -14vw; top: -6vh; background: #B8330F; animation-duration: 29s; opacity: 0.42; }
.fond span:nth-child(4) { width: 30vw; height: 30vw; right: 6vw; bottom: -12vh; background: #5A2A9E; animation-duration: 36s; opacity: 0.35; }
@keyframes derive {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, -4vh, 0) scale(1.12); }
  100% { transform: translate3d(-4vw, 6vh, 0) scale(0.94); }
}

/* ==========================================================================
   3. VERRE LIQUIDE (class="verre" sur n'importe quel bloc)
   ========================================================================== */
.verre {
  position: relative;
  isolation: isolate;
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon);
  box-shadow: var(--verre-reflet), var(--ombre-2);
}
.verre::before { /* reflet qui suit la souris */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.15), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%);
}
.verre::after { /* liseré lumineux sur le bord */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(238, 132, 102, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.verre--fort { box-shadow: var(--verre-reflet), var(--ombre-3); }
/* Filet de 2 px en dégradé en haut (charte : cartes) */
.verre--filet { background: var(--degrade) top / 100% 2px no-repeat, var(--verre-fond); }

/* ==========================================================================
   4. EN-TÊTE ET MENU
   ========================================================================== */
.entete { position: sticky; top: 0; z-index: 50; padding-block: 14px; }
.entete .conteneur { max-width: 1400px; }
.entete__ligne { display: flex; align-items: center; gap: 14px; }
.barre {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  margin-left: auto;
  border-radius: var(--rayon-grand);
  box-shadow: var(--verre-reflet), var(--ombre-3);
}
.entete__droite { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marque { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex-shrink: 0; }
.marque__logo {
  width: 52px;
  height: 44px;
  border-radius: 8px;
  box-shadow: var(--ombre-1), var(--ombre-couleur);
  transition: transform var(--transition);
}
.marque:hover .marque__logo { transform: rotate(-4deg) scale(1.04); }
/* Halo derrière le nom : même verre que la barre de menu (même fond, même flou, donc même couleur),
   même hauteur (66 px), qui vient toucher la barre à droite. Un masque le fait fondre vers la gauche,
   le haut et le bas : aucune démarcation rectiligne. Le flou rend le texte qui défile illisible. */
.marque::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -11px; bottom: -11px; left: -32px; right: -22px;
  /* voile sombre (nuit, 55 %) posé sur le verre pour assombrir l'entourage du nom */
  background: linear-gradient(rgba(13, 10, 26, 0.55), rgba(13, 10, 26, 0.55)), var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
  mask-composite: intersect;
}
/* Second halo, plus large et plus transparent (25 %), autour du premier sans le modifier */
.marque::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  top: -26px; bottom: -26px; left: -48px; right: -34px;
  background: linear-gradient(rgba(13, 10, 26, 0.25), rgba(13, 10, 26, 0.25));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  mask-composite: intersect;
}
/* Le nom lui-même garde une ombre portée pour la profondeur */
.marque__nom {
  height: 26px; width: auto;
  filter: drop-shadow(0 2px 3px rgba(13, 10, 26, 0.9)) drop-shadow(0 0 8px rgba(42, 27, 110, 0.9));
}

/* Menu déployé : le bas des lettres du nom (TWISTORIA et GAME) est aligné sur la ligne de base du texte du menu */
@media (min-width: 1401px) {
  .marque__nom { position: relative; top: -9px; }
}

.nav__liste { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--texte-doux);
  font: 600 14px/1 var(--police-marque);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.nav__lien:hover, .nav__item:focus-within > .nav__lien, .nav__item.ouvert > .nav__lien, .nav__lien[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 5px;
  height: 2px;
  background: var(--degrade-lumiere);
}
.chevron { width: 10px; height: 10px; transition: transform var(--transition); }
.nav__item:hover .chevron, .nav__item:focus-within .chevron, .nav__item.ouvert .chevron { transform: rotate(180deg); }

/* Sous-menu : au survol (souris) ou au toucher (tablette) */
.sous-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: 280px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--rayon);
  box-shadow: var(--verre-reflet), var(--ombre-4);
  background: linear-gradient(160deg, rgba(44, 30, 88, 0.95), rgba(22, 15, 42, 0.97));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav__item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* pont de survol */
.nav__item:hover > .sous-menu, .nav__item:focus-within > .sous-menu, .nav__item.ouvert > .sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sous-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.sous-menu a:hover, .sous-menu a:focus-visible { background: rgba(255, 255, 255, 0.09); transform: translateX(3px); }
.sous-menu strong { display: block; font: 700 15px/1.3 var(--police-marque); letter-spacing: 0.04em; }
.sous-menu small { display: block; margin-top: 2px; color: var(--texte-discret); font-size: 13px; line-height: 1.4; }

/* Bouton compte */
.compte {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-left: 6px;
  padding: 8px 16px 8px 9px;
  border-radius: var(--rayon-bouton);
  color: #fff;
  text-decoration: none;
  font: 700 13px/1 var(--police-marque);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--degrade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ombre-2), var(--ombre-couleur);
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}
.compte:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ombre-3), var(--ombre-couleur); }
.compte__icone {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.compte__icone svg { width: 15px; height: 15px; }

.burger {
  display: none;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--verre-bord);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--ombre-1);
}
.burger span, .burger span::before, .burger span::after {
  display: block;
  position: relative;
  width: 20px; height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition);
}
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1400px) {
  .burger { display: block; }
  .compte { margin-left: auto; padding: 8px; min-width: 46px; justify-content: center; }
  .compte__texte { display: none; }
  .nav {
    /* fixed (pas absolute) : .barre porte .verre, donc position:relative, et depuis la refonte
       de l'en-tête du 26/09 elle ne fait plus que la largeur de la pastille compte+burger —
       un .nav absolu se retrouvait ancré (et rétréci) à cette pastille au lieu de la largeur de l'écran. */
    position: fixed;
    top: 92px;
    left: clamp(16px, 4vw, 32px);
    right: clamp(16px, 4vw, 32px);
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding: 12px;
    border-radius: var(--rayon-grand);
    background: #1B1336;
    border: 1px solid var(--verre-bord);
    box-shadow: var(--verre-reflet), var(--ombre-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .menu-ouvert .nav { opacity: 1; visibility: visible; transform: none; }
  /* Menu ouvert : la barre devient opaque, sinon Chrome laisse voir la page à travers le menu */
  .menu-ouvert .barre { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1B1336; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__item + .nav__item { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .nav__lien { padding: 14px 12px; font-size: 15px; color: #fff; }
  .nav__lien[aria-haspopup] { min-height: 0; padding-bottom: 4px; color: var(--texte-discret); font-size: 12px; letter-spacing: 0.14em; pointer-events: none; }
  .nav__lien[aria-haspopup], .nav__lien[aria-haspopup]:hover { background: none; box-shadow: none; }
  .nav__lien[aria-current="page"]::after, .nav__item::after, .chevron { display: none; }
  .sous-menu {
    position: static;
    min-width: 0;
    padding: 0 0 8px;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
  }
  .sous-menu::before, .sous-menu::after, .sous-menu small { display: none; }
  .sous-menu a { padding: 11px 12px; }
  .sous-menu strong { font-size: 16px; }
}
@media (max-width: 480px) {
  .marque { gap: 8px; }
  .marque__nom { height: 15px; }
  .marque__logo { width: 42px; height: 36px; }
  .barre { gap: 8px; padding-inline: 10px; }
}

/* ==========================================================================
   5. TYPOGRAPHIE ET BOUTONS
   ========================================================================== */
h1, h2, h3 { margin: 0 0 0.5em; font-family: var(--police-titre); font-weight: 700; line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: 0.01em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: 0.02em; }
h3 { font-size: 1.25rem; letter-spacing: 0.02em; }
* + h2 { margin-top: 0; }
.degrade-texte { background: var(--degrade-lumiere); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.chapo { max-width: 62ch; color: var(--texte-doux); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.soustitre { max-width: 62ch; margin: -8px 0 14px; color: var(--texte-discret); font-style: italic; font-size: 0.95rem; }
.meta { margin: 14px 0 0; color: var(--texte-discret); font-size: 14px; }
.note { margin-top: 24px; color: var(--texte-discret); font-size: 14px; }
.centre { text-align: center; }
.centre .chapo, .centre .note, .centre .soustitre,
.chapo.centre, .note.centre, .soustitre.centre { margin-inline: auto; }
.tete-section { margin-bottom: clamp(28px, 4vw, 44px); }

.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.centre .boutons { justify-content: center; }
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--rayon-bouton);
  color: #fff;
  font: 700 13px/1.25 var(--police-marque);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: var(--degrade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.2), var(--ombre-2), var(--ombre-couleur);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.bouton:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--ombre-3), var(--ombre-couleur); }
.bouton:active { transform: translateY(0); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.bouton--verre {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ombre-2);
}
.bouton--verre:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--ombre-3); }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 700 13px/1 var(--police-marque);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--degrade-lumiere);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lien-fleche span {
  transition: transform var(--transition);
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lien-fleche:hover span { transform: translateX(5px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font: 600 12px/1.4 var(--police-texte);
  letter-spacing: 0.06em;
  background: rgba(107, 46, 138, 0.3);
  border: 1px solid rgba(179, 168, 240, 0.35);
  color: #E6DFFF;
}
.badge--chaud { background: rgba(196, 61, 42, 0.28); border-color: rgba(242, 154, 128, 0.5); color: #FFDDD2; }
/* Même dégradé et typographie que les boutons pleins (.bouton), en pastille arrondie
   (pilule) et plus petite — une information secondaire, pas une action comme un bouton. */
.badge--degrade {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 16px; border: 0; border-radius: 999px;
  color: #fff; text-align: center;
  font: 700 11px/1.25 var(--police-marque); letter-spacing: 0.14em; text-transform: uppercase;
  /* --degrade va de #2A1B6E (très sombre) à #B52508 (sombre aussi) sur toute
     sa largeur — sur un long bouton rectangulaire (.bouton) ça se voit à
     peine, noyé dans le reste du dégradé, mais sur une pastille toute
     petite et TOUTE ronde (border-radius: 999px), ces deux teintes les plus
     sombres tombent pile sur les bouts arrondis, les plus visibles à l'œil
     — d'où l'aspect "mal fait"/sale aux deux extrémités signalé par
     Ludivine sur le bouton MOIS. Un flou sur le reflet du haut ne change
     rien à ça (testé, aucune évolution) : le vrai souci est la couleur du
     dégradé lui-même à cet endroit, pas le reflet. Fix : on garde le même
     dégradé de marque (rien de dupliqué en dur) mais on l'étire 2,5× et on
     centre — seule sa portion la plus vive (grosso modo de 30 % à 70 %,
     jamais les tout premiers/derniers %) reste visible dans la pastille. */
  background: var(--degrade);
  background-size: 250% 100%;
  background-position: center;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.35), var(--ombre-1);
}
/* Montants de réduction : texte plus grand que le reste de la pastille */
.reductions .badge--degrade { font-size: 16px; }
/* « Bon plan » reste la plus discrète des 3 pastilles : texte plus petit, pastille plus étroite */
.reductions .badge--chaud {
  padding: 5px 12px; font: 700 10px/1.25 var(--police-marque); letter-spacing: 0.08em; text-transform: uppercase;
}

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.puces li {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--texte-doux);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}
.centre .puces { justify-content: center; }

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */
.section { padding-block: clamp(56px, 9vw, 110px); }
.section--serree { padding-block: clamp(32px, 5vw, 60px); }
.sans-haut { padding-top: 0; }
.separateur { height: 1px; max-width: var(--largeur); margin-inline: auto; background: var(--degrade-lumiere); opacity: 0.3; }

/* --- Héros d'accueil --- */
.heros { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.heros__grille { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.heros h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

/* Tablette qui montre un vrai moment de choix */
.scene { position: relative; perspective: 1400px; padding: 18px 0 30px; }
.tablette {
  position: relative;
  margin-inline: auto;
  max-width: 400px;
  padding: 12px;
  border-radius: 28px;
  background: linear-gradient(160deg, #221A3C, #0B0816);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--ombre-4), 0 40px 90px -30px rgba(155, 45, 111, 0.55);
  transform: rotateY(-12deg) rotateX(5deg);
  transition: transform 700ms var(--transition);
}
.scene:hover .tablette { transform: rotateY(-4deg) rotateX(2deg); }

/* Écran : reproduction d'un nœud collectif de l'application */
.ecran {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-radius: 18px;
  font-family: var(--police-marque);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(59, 35, 160, 0.55), transparent 65%),
    radial-gradient(90% 60% at 100% 10%, rgba(150, 40, 25, 0.45), transparent 65%),
    #0F0B1E;
}
.ecran::after { /* reflet de la vitre */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%);
  pointer-events: none;
}
.ecran__haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ecran__titre { font-size: 12px; letter-spacing: 0.04em; color: var(--texte-doux); }
.joueurs { display: flex; gap: 5px; }
.joueurs i {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-style: normal;
  background: #1A1430;
  box-shadow: inset 0 0 0 2px #7A3A9E, 0 0 0 1px rgba(196, 61, 42, 0.5);
}
.ecran__recit {
  margin: auto 0 0;
  padding-block: 10px 14px;
  text-align: center;
  font: 400 clamp(11.5px, 1.25vw, 13.5px)/1.5 var(--police-marque);
  color: #fff;
  text-wrap: pretty;
}
.ecran__etat { display: flex; gap: 6px; margin-bottom: 7px; }
.etiquette {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 9.5px;
  white-space: nowrap;
  color: #fff;
}
.etiquette--etat { flex: 1; color: var(--texte-discret); }
.point { width: 5px; height: 5px; border-radius: 50%; background: #7A6A55; flex-shrink: 0; }
.point--fusion { background: #D873A8; }
.etat--fin { position: absolute; left: 20px; opacity: 0; color: #fff; }
.etat--cours, .etat--fin { animation: 8s var(--transition) infinite; }
.etat--cours { animation-name: etat-cours; }
.etat--fin { animation-name: etat-fin; }
.votes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vote {
  display: flex;
  align-items: stretch;
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(90deg, #4B32B8, #C23C8C 55%, #E0573C) top / 100% 1px no-repeat, rgba(20, 15, 38, 0.9);
  font-size: 11.5px;
  color: #fff;
}
.vote--gagnant { animation: gagnant 8s var(--transition) infinite; }
.vote__compte {
  display: grid;
  place-items: center;
  align-content: center;
  width: 38px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--texte-discret);
}
.vote__compte small { font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.vote__n { display: block; height: 15px; overflow: hidden; font-size: 14px; line-height: 15px; font-weight: 700; }
.vote__n b { display: block; }
.vote--gagnant .vote__n b { animation: compte-2 8s steps(1) infinite; }
.vote--un .vote__n b { animation: compte-1 8s steps(1) infinite; }
.vote__texte { display: flex; align-items: center; padding: 6px 10px; line-height: 1.25; }

@keyframes compte-2 { 0%, 18% { transform: translateY(0); } 18%, 42% { transform: translateY(-15px); } 42%, 94% { transform: translateY(-30px); } 94%, 100% { transform: translateY(0); } }
@keyframes compte-1 { 0%, 30% { transform: translateY(0); } 30%, 94% { transform: translateY(-15px); } 94%, 100% { transform: translateY(0); } }
@keyframes gagnant {
  0%, 52% { background-color: rgba(20, 15, 38, 0.9); box-shadow: none; }
  58%, 90% { background-color: rgba(155, 45, 111, 0.55); box-shadow: 0 0 0 1px rgba(242, 154, 128, 0.7), 0 8px 20px -8px rgba(155, 45, 111, 0.9); }
  96%, 100% { background-color: rgba(20, 15, 38, 0.9); box-shadow: none; }
}
@keyframes etat-cours { 0%, 52% { opacity: 1; } 56%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes etat-fin { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.objectif {
  position: absolute;
  top: calc(6% - 65px);
  left: calc(-10% + 48px);
  z-index: 3;
  max-width: 230px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texte-doux);
  box-shadow: var(--verre-reflet), var(--ombre-3);
}
.objectif strong { display: block; margin-top: 3px; color: #fff; font: 700 15px/1.3 var(--police-marque); letter-spacing: 0.02em; }
.objectif svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--chaud); }

/* --- Bannière photo --- */
.banniere { position: relative; margin: 0; overflow: hidden; border-radius: var(--rayon-grand); box-shadow: var(--ombre-4); }
.banniere img { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; }
.banniere__legende {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 11px 20px;
  border-radius: 8px;
  font: 700 13px/1.4 var(--police-marque);
  letter-spacing: 0.12em;
  text-align: center;
}

/* --- Nos aventures (cartes courtes : peu de texte, pas de fioritures) --- */
.aventures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aventure {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 22px);
  transition: transform var(--transition), box-shadow var(--transition);
}
.aventure:hover { transform: translateY(-5px); box-shadow: var(--verre-reflet), var(--ombre-4); }
.aventure h3 { margin: 0 0 4px; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.05em; }
.aventure__genre { margin: 0 0 8px; font: 700 10px/1.3 var(--police-marque); letter-spacing: 0.12em; text-transform: uppercase; color: var(--froid); }
.aventure--chaud .aventure__genre { color: var(--chaud); }
.aventure__accroche { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: #fff; }
.aventure p { margin: 0 0 10px; font-size: 0.92rem; color: var(--texte-doux); text-align: justify; }
.aventure .puces { margin-top: 4px; }
.aventure__pied { margin-top: auto; padding-top: 12px; }
.aventure--bientot { border-style: dashed; }

/* Murder : carte pleine largeur, plus discrète que Heroes/Dilemma */
.aventure--mini { grid-column: 1 / -1; }

/* Mini écran de jeu (réutilisé en haut à droite de la page Heroes) */
.scene--mini { padding: 0; margin: 0 0 18px; perspective: 900px; }
.scene--mini .tablette { max-width: 190px; margin-inline: 0; padding: 8px; border-radius: 18px; transform: rotateY(-8deg) rotateX(3deg); }
.scene--mini .ecran { padding: 10px 9px 9px; border-radius: 13px; }
.scene--mini .ecran__titre { font-size: 9px; }
.scene--mini .joueurs i { width: 18px; height: 18px; font-size: 9px; }
.scene--mini .ecran__recit { font-size: 9px; padding-block: 6px 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scene--mini .etiquette { font-size: 7px; padding: 4px 7px; }
.scene--mini .vote { min-height: 24px; font-size: 8.5px; }
.scene--mini .vote__compte { width: 24px; }
.scene--mini .vote__n { font-size: 9px; height: 10px; line-height: 10px; }
.scene--mini .vote__texte { padding: 4px 7px; }
.scene--mini .objectif { display: none; }

/* --- Parcours en 3 étapes (ligne verticale centrale, texte en quinconce) --- */
.parcours { position: relative; margin: 0; padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 40px); list-style: none; display: flex; flex-direction: column; gap: 36px; }
.parcours::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--degrade-lumiere);
  opacity: 0.5;
}
.parcours li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(16px, 3vw, 32px);
}
.parcours h3 { margin: 0 0 6px; font-size: 1.15rem; }
.parcours p { margin: 0; color: var(--texte-doux); }
.parcours__texte { grid-column: 1; text-align: right; }
.parcours li:nth-child(even) .parcours__texte { grid-column: 3; text-align: left; }
.parcours__num {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font: 700 23px/1 var(--police-titre);
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 68% 82%, rgba(5, 3, 12, 0.35), rgba(5, 3, 12, 0) 55%),
    var(--degrade);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -8px 12px rgba(5, 3, 12, 0.4), var(--ombre-3), var(--ombre-couleur);
}

/* --- Blocs génériques --- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.panneau { padding: clamp(26px, 4vw, 46px); }
.panneau p:not(.chapo, .chiffre) { text-align: justify; }
.panneau--etroit { max-width: 640px; margin-inline: auto; }
.panneau[href] { display: block; text-decoration: none; transition: transform var(--transition); }
.panneau[href]:hover { transform: translateY(-3px); }
.panneau[href] h3 { margin-top: 0; }
.panneau[href] p { margin-bottom: 0; }
.grille { display: grid; gap: 22px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grille--2 { --cols: 2; }
.chiffre { margin: 0.1em 0 0.2em; font: 700 clamp(2.6rem, 6vw, 4rem)/1.1 var(--police-titre); }

/* Liste d'atouts (icône + texte) dans un seul panneau */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.atouts li { padding: clamp(22px, 3vw, 32px); }
.atouts li + li { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.atouts h3 { margin: 16px 0 6px; font-size: 1.15rem; }
.atouts p { margin: 0; color: var(--texte-doux); }
.icone {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--degrade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ombre-2);
}
.icone svg { width: 24px; height: 24px; color: #fff; }

/* Liste à coches */
.coches { margin: 0; padding: 0; list-style: none; }
.coches--centre { max-width: 640px; margin-inline: auto; }
.coches li { position: relative; padding: 8px 0 8px 34px; color: var(--texte-doux); }
.coches li strong { color: #fff; }
.coches li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--degrade);
  box-shadow: var(--ombre-1);
}
.coches li::after {
  content: "";
  position: absolute;
  left: 8px; top: 15px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Bandeau d'appel à l'action */
.appel { padding: clamp(36px, 6vw, 68px) clamp(22px, 5vw, 64px); text-align: center; overflow: hidden; }
.appel::before {
  background:
    radial-gradient(600px circle at 0% 100%, rgba(75, 50, 184, 0.45), transparent 60%),
    radial-gradient(600px circle at 100% 0%, rgba(224, 66, 26, 0.35), transparent 60%);
}
.appel .chapo { margin-inline: auto; }
.appel .boutons { justify-content: center; }

/* En-tête de page intérieure */
.page-titre { padding-block: clamp(44px, 7vw, 88px) clamp(20px, 3vw, 36px); }
.page-titre h1 { max-width: 20ch; }
.page-titre.centre h1 { margin-inline: auto; }
.page-titre .puces { margin-top: 0; margin-bottom: 18px; }
.page-titre__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.page-titre__grille h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* Carrousel 3D des lieux partenaires : anneau de cartes portrait en rotation
   continue (partenaires.html). 5 cartes espacées de 72°, rayon nettement plus
   grand que la largeur de carte pour laisser un vrai espace entre elles. */
.lieux-scene3d {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(340px, 38vw, 460px);
  perspective: 1500px;
}
.lieux-anneau {
  position: relative;
  width: 200px;
  height: 270px;
  transform-style: preserve-3d;
  animation: lieux-tourner 32s linear infinite;
}
.lieux-scene3d:hover .lieux-anneau { animation-play-state: paused; }
.lieu-carte-3d {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(calc(72deg * var(--i))) translateZ(187px);
}
.lieu-carte-3d__face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: var(--rayon-grand);
  box-shadow: var(--verre-reflet), 0 24px 48px -12px rgba(5, 3, 12, 0.4);
}
.lieu-carte-3d__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lieu-carte-3d__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 14px;
  background: linear-gradient(0deg, rgba(13, 10, 26, 0.85) 10%, transparent 90%);
  font: 600 14px/1.25 var(--police-marque);
  letter-spacing: 0.02em;
  color: #fff;
}
.lieu-carte-3d__overlay .icone { width: 38px; height: 38px; flex-shrink: 0; }
.lieu-carte-3d__overlay .icone svg { width: 18px; height: 18px; }
@keyframes lieux-tourner {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
th { font: 600 12px/1.4 var(--police-texte); letter-spacing: 0.08em; color: var(--texte-discret); }
td:last-child, th:last-child { text-align: right; }
td strong { font-family: var(--police-marque); font-size: 1.15rem; }
tr:last-child td { border-bottom: 0; }

/* Réductions */
.reductions { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.reductions > div { display: flex; flex-direction: column; align-items: center; padding: 24px 28px; text-align: center; }
.reductions > div + div { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.reductions h3 { margin: 0 0 4px; font-size: 1.05rem; }
.reductions p { margin: 0 0 14px; color: var(--texte-doux); font-size: 15px; }
.reductions .badge { margin-top: auto; }

/* Tarifs Heroes/Dilemma (page Dates) : blocs plus petits, plus serrés */
.grille--tarifs { gap: 14px; }
.grille--tarifs .panneau { padding: clamp(16px, 2.5vw, 22px); }
.grille--tarifs h3 { margin-bottom: 2px; }
.grille--tarifs .meta { margin: 2px 0 8px; font-size: 13px; }
.grille--tarifs th, .grille--tarifs td { padding: 7px 10px; font-size: 14px; }

/* Agenda */
.agenda { display: grid; gap: 16px; }
.date { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; }
.date__jour {
  display: grid;
  place-items: center;
  width: 74px; height: 80px;
  border-radius: 8px;
  text-align: center;
  background: var(--degrade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ombre-2);
}
.date__jour b { display: block; font: 700 28px/1 var(--police-titre); }
.date__jour span { display: block; font: 700 12px/1.3 var(--police-marque); letter-spacing: 0.12em; text-transform: uppercase; }
.date h3 { margin: 0 0 4px; font-size: 1.1rem; }
.date p { margin: 0; color: var(--texte-doux); font-size: 15px; text-align: justify; }
.vide { padding: clamp(28px, 4vw, 40px); text-align: center; }
.vide h3 { margin-top: 16px; }
.vide .chapo { margin-inline: auto; font-size: 1rem; }
.vide .boutons { justify-content: center; }

/* Planning : liste des sessions + carte (page Dates) */
.planning { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; margin-bottom: 28px; }
.planning__titre { margin: 0 0 14px; }
.planning__liste { max-height: 480px; overflow-y: auto; padding-right: 4px; }
.planning__liste .agenda { gap: 12px; }
.planning__liste .date { grid-template-columns: auto 1fr auto; padding: 14px 16px; gap: 12px; align-items: center; }
.planning__liste .date .bouton, .planning__liste .date .badge {
  grid-column: auto;
  justify-self: end;
  min-height: unset;
  padding: 9px 16px;
  font-size: 11px;
  white-space: nowrap;
}
.planning__liste .date__jour { width: 56px; height: 60px; }
.planning__liste .date__jour b { font-size: 20px; }
.planning__liste .date h3 { font-size: .95rem; }
.planning__liste .date p { font-size: 13px; }
.planning__carte { display: flex; flex-direction: column; }
/* Leaflet initialise la carte directement sur #carteEvenements (pas d'enfant à cibler) :
   le fond plein évite un flash gris pendant le chargement des tuiles, le cadre (bordure,
   ombre, arrondi, flou) vient de .verre pour rester cohérent avec le reste du site. */
.carte-evenements {
  width: 100%; height: 480px; padding: 4px; overflow: hidden;
  background: #1C1440; font-family: var(--police-texte);
}
.carte-evenements .leaflet-tooltip {
  background: rgba(28, 20, 64, .97); color: var(--texte); border: 1px solid var(--verre-bord);
  border-radius: 8px; box-shadow: var(--ombre-2); font-size: 13px; padding: 10px 12px;
}
.carte-evenements .leaflet-tooltip-top::before { border-top-color: rgba(28, 20, 64, .97); }
.evt-infobulle strong { display: block; font: 700 14px var(--police-titre); margin-bottom: 3px; }
.evt-infobulle .evt-quand { color: var(--texte-doux); font-size: 12.5px; }
.evt-infobulle .evt-statut {
  display: inline-block; margin-top: 7px; font: 700 11px var(--police-marque);
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.evt-infobulle .evt-statut--ouvert { background: rgba(155, 45, 111, .35); color: #F0D6E6; }
.evt-infobulle .evt-statut--complet { background: rgba(255, 255, 255, .1); color: var(--texte-discret); }

/* Pop-up de choix du créneau (bouton "Réserver" d'un événement à plusieurs
   créneaux, page Dates) : liste chaque heure avec ses propres places. */
body.popup-ouvert { overflow: hidden; }
.popup-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8, 5, 20, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.popup { position: relative; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; padding: 28px; }
.popup h3 { margin: 0 0 4px; font-size: 1.1rem; padding-right: 28px; }
.popup .text-sm { margin: 0 0 18px; color: var(--texte-doux); font-size: 13px; }
.popup-fermer {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--texte);
  font-size: 20px; line-height: 1; cursor: pointer; transition: var(--transition);
}
.popup-fermer:hover { background: rgba(255, 255, 255, .18); }
.creneau-liste { display: flex; flex-direction: column; gap: 10px; }
.creneau-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--rayon); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--verre-bord);
}
.creneau-ligne strong { display: block; font: 700 15px var(--police-titre); }
.creneau-statut { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texte-doux); }
.creneau-ligne--complet { opacity: .6; }
.creneau-ligne .bouton--pilule { width: auto; flex-shrink: 0; min-height: unset; padding: 9px 18px; font-size: 11px; white-space: nowrap; }

/* Calendrier : semaine / mois / année (page Dates) */
.calendrier { padding: clamp(22px, 3vw, 32px); margin-bottom: 28px; }
.calendrier__entete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.calendrier__entete h2 { margin: 0; font-size: 1.2rem; }
.calendrier-vues { display: flex; gap: 4px; }
.calendrier-vue-btn {
  min-width: 84px;
  padding: 6px 16px; border-radius: 999px; font: 700 11px/1.25 var(--police-marque);
  letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--verre-bord); color: var(--texte-discret); cursor: pointer; transition: var(--transition);
}
.calendrier-vue-btn.active {
  /* Dégradé étiré/centré — voir le commentaire sur .badge--degrade : même
     pilule (999px), même défaut, même correctif (le flou seul du reflet ne
     suffisait pas, revu après retour de Ludivine que ça n'avait rien changé). */
  border-color: transparent; color: #fff;
  background: var(--degrade);
  background-size: 250% 100%;
  background-position: center;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, .35), var(--ombre-1);
}
.calendrier-vue-btn:hover:not(.active) { border-color: var(--froid); color: var(--texte); }
.calendrier-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.calendrier-nav button { background: none; border: none; color: var(--texte); cursor: pointer; font-size: 18px; padding: 4px 10px; border-radius: 6px; }
.calendrier-nav button:hover { background: rgba(255, 255, 255, .08); }
.calendrier-label { font: 700 15px var(--police-titre); min-width: 170px; text-align: center; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.calendrier-jour-nom { min-width: 0; font: 700 10px var(--police-marque); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-discret); padding: 6px 0; }
.calendrier-jour { min-width: 0; min-height: 0; aspect-ratio: 8 / 3; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--texte-doux); position: relative; font-size: 13px; }
.calendrier-jour.vide { visibility: hidden; }
.calendrier-jour.aujourdhui { font-weight: 700; color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--froid); }
.calendrier-jour.avec-session { color: var(--texte); font-weight: 600; cursor: pointer; }
/* Complet : violet Twistoria · à réserver : orange Twistoria */
.calendrier-jour.avec-session--complet { background: linear-gradient(135deg, rgba(42, 27, 110, .45), rgba(107, 46, 138, .45)); }
.calendrier-jour.avec-session--complet:hover { background: linear-gradient(135deg, rgba(42, 27, 110, .65), rgba(107, 46, 138, .65)); }
.calendrier-jour.avec-session--reserver { background: linear-gradient(135deg, rgba(196, 61, 42, .4), rgba(242, 154, 128, .4)); }
.calendrier-jour.avec-session--reserver:hover { background: linear-gradient(135deg, rgba(196, 61, 42, .6), rgba(242, 154, 128, .6)); }
.calendrier-jour .point-session {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--amethyste);
}
.avec-session--reserver .point-session { background: var(--braise); }
/* Petite étoile en haut à droite d'un jour : au moins une session « Bon plan » (tarif tiers-lieu réduit) ce jour-là */
.calendrier-jour .bon-plan-symbole {
  position: absolute; top: 2px; right: 4px; font-size: 9px; line-height: 1; color: #FFDDD2;
  filter: drop-shadow(0 0 2px rgba(196, 61, 42, .7));
}
.calendrier-legende { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 11px; color: var(--texte-discret); }
.calendrier-legende-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.calendrier-legende-etoile { display: inline-block; margin-right: 4px; color: #FFDDD2; }
.calendrier-legende-anneau {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--froid); margin-right: 4px; vertical-align: middle;
}

/* Formulaire */
.formulaire { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font: 600 14px/1.4 var(--police-texte); color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #fff;
  font: 400 16px/1.5 var(--police-texte);
  background: rgba(8, 6, 15, 0.5);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input::placeholder { color: #8C87AA; }
.champ select option { background: #1A1430; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: #D873A8; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(155, 45, 111, 0.4); }
.champ input:disabled { opacity: 0.6; cursor: not-allowed; }
.erreur { display: none; margin: 0; font-size: 13px; color: var(--chaud); }
.champ :user-invalid { border-color: var(--chaud); }
.champ:has(:user-invalid) .erreur { display: block; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; line-height: 1.5; color: var(--texte-discret); }
.case input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.case + .erreur { margin-top: 4px; font-size: 11px; }
/* Même dégradé que .bouton, mais en pilule (999px) : dégradé étiré/centré
   pour ne garder que sa portion vive, sinon les teintes les plus sombres de
   --degrade tombent sur les bouts arrondis (même défaut que .badge--degrade,
   corrigé ici sans toucher au .bouton carré standard utilisé partout
   ailleurs sur le site). */
.bouton--pilule {
  border-radius: 999px; padding-inline: 34px;
  background: var(--degrade);
  background-size: 250% 100%;
  background-position: center;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.2), var(--ombre-2), var(--ombre-couleur);
}
.bouton--pilule:hover { box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.4), var(--ombre-3), var(--ombre-couleur); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retour { margin-bottom: 20px; padding: 14px 18px; border-radius: 8px; font-weight: 600; }
.retour--ok { background: rgba(107, 46, 138, 0.35); border: 1px solid rgba(179, 168, 240, 0.45); }
.retour--erreur { background: rgba(196, 61, 42, 0.25); border: 1px solid rgba(242, 154, 128, 0.55); }

/* Pages juridiques */
.texte-legal { max-width: 860px; margin-inline: auto; padding: clamp(24px, 5vw, 56px); }
.texte-legal h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.texte-legal h2 { margin-top: 2em; font-size: 1.15rem; }
.texte-legal p, .texte-legal li { color: var(--texte-doux); font-size: 15px; text-align: justify; }
.texte-legal strong { color: #fff; }
.texte-legal table { margin: 1em 0 1.6em; font-size: 14px; }
.texte-legal td:last-child, .texte-legal th:last-child { text-align: left; }
.a-completer { padding: 1px 6px; border-radius: 4px; background: rgba(196, 61, 42, 0.3); color: #FFDDD2; }

/* Page compte */
.compte-page { max-width: 440px; margin-inline: auto; text-align: center; }
.compte-page .formulaire { grid-template-columns: 1fr; margin-top: 22px; text-align: left; }
.compte-page .bouton--google { margin-top: 20px; }
.separateur-ou { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--texte-discret); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.separateur-ou::before, .separateur-ou::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
.bouton--google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; color: #fff; }
.bouton--google svg { width: 18px; height: 18px; flex-shrink: 0; }
.liens-secondaires { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; font-size: 14px; color: var(--texte-doux); }
.liens-secondaires a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   7. PIED DE PAGE
   ========================================================================== */
.pied { padding-block: 30px 20px; }
.pied__boite {
  padding: 30px clamp(22px, 4vw, 40px) 18px;
}
.pied__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px; }
.pied__marque { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.pied__marque img:first-child { width: 58px; height: auto; }
.pied__marque img:last-child { height: 22px; width: auto; }
.pied__accroche { margin: 0; color: var(--texte-doux); }
.reseaux { display: flex; gap: 10px; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--ombre-1);
  transition: transform var(--transition), background var(--transition);
}
.reseaux a:hover { transform: translateY(-3px); background: var(--degrade); }
.reseaux svg { width: 18px; height: 18px; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: var(--texte-discret);
}
.pied__bas a { display: inline-flex; align-items: center; min-height: 36px; color: var(--texte-discret); text-decoration: none; }
.pied__bas a:hover { color: #fff; text-decoration: underline; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pied__sitemap {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.pied__sitemap a { color: var(--texte-doux); text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
.pied__sitemap a:hover { color: #fff; text-decoration: underline; }
.pied__nap { margin: 14px 0 0; font-size: 12px; color: var(--texte-discret); }
.pied__nap a { color: inherit; }

/* ==========================================================================
   8. RESPONSIVE ET ACCESSIBILITÉ
   ========================================================================== */
@media (max-width: 900px) {
  .heros__grille, .duo, .aventures, .page-titre__grille { grid-template-columns: 1fr; }
  .scene { max-width: 460px; margin-inline: auto; width: 100%; }
  .lieux-scene3d { height: 300px; }
  .tablette { transform: none; }
  .atouts, .reductions { grid-template-columns: 1fr; }
  .atouts li + li, .reductions > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .planning { grid-template-columns: 1fr; }
  .planning__liste { max-height: none; overflow-y: visible; order: 2; }
  .planning__carte { order: 1; }
  .carte-evenements { height: 320px; }
  .parcours { gap: 24px; }
  .parcours::before { left: 23px; }
  .parcours li, .parcours li:nth-child(even) { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .parcours__texte, .parcours li:nth-child(even) .parcours__texte { grid-column: 2; grid-row: 1; text-align: left; }
  .parcours__num { grid-column: 1; grid-row: 1; }
  .parcours h3 { margin: 0; }
  .grille, .grille--2 { --cols: 1; }
}
@media (max-width: 640px) {
  .bouton { width: 100%; }
  .objectif { position: relative; top: auto; right: auto; max-width: none; margin: -18px 12px 0; }
  .banniere img { aspect-ratio: 5 / 2; object-position: 50% 30%; }
  .banniere__legende { position: static; transform: none; width: auto; max-width: none; border-radius: 0; border: 0; font-size: 12px; }
  .date { grid-template-columns: auto 1fr; }
  .date .bouton, .date .badge { grid-column: 1 / -1; }
  .formulaire { grid-template-columns: 1fr; }
  .pied__haut .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .vote--gagnant { background-color: rgba(155, 45, 111, 0.55); }
  .vote--gagnant .vote__n b { transform: translateY(-30px); }
  .vote--un .vote__n b { transform: translateY(-15px); }
}
/* Navigateurs sans flou d'arrière-plan : fond plus opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: rgba(30, 22, 58, 0.92); }
}
.scene { margin: 0; }
.panneau--formulaire { max-width: 820px; }

/* ==========================================================================
   BANDEAU DE CONSENTEMENT COOKIES (RGPD, tâche 7.1)
   ========================================================================== */
body.cookies-bandeau-ouvert { padding-bottom: 0; }
.bandeau-cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 500;
  max-width: 1040px;
  margin-inline: auto;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  animation: bandeau-cookies-entree 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bandeau-cookies-entree { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bandeau-cookies__texte { flex: 2 1 420px; font-size: 13px; line-height: 1.55; color: var(--texte-doux); }
.bandeau-cookies__texte strong { color: #fff; }
.bandeau-cookies__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex-shrink: 0; margin-left: auto; }
/* Seul « Accepter » reste en dégradé plein (charte, action principale) : les deux
   autres (« Gérer mes choix », « Continuer sans accepter ») restent volontairement
   sans couleur (verre), à égalité l'une de l'autre — décision de Ludivine. */
.bouton-cookies { min-height: 36px; padding: 8px 16px; font-size: 10px; gap: 6px; white-space: nowrap; }
/* .bouton--verre applique lui-même un flou (backdrop-filter) : posé sur le bandeau,
   qui est déjà un panneau en verre flouté, ce flou n'a plus rien de coloré à
   capter derrière lui et rend un gris plat terne au lieu du bel effet visible sur
   « Organiser mon événement » (posé, lui, directement sur les dégradés du fond).
   On retire ce second flou ici et on renforce légèrement le contraste du bord et
   du dégradé pour que le bouton reste bien lisible sur le panneau déjà flouté. */
.bandeau-cookies .bouton--verre {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--ombre-2);
}
.bandeau-cookies .bouton--verre:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--ombre-3);
}
@media (max-width: 640px) {
  .bandeau-cookies { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .bandeau-cookies__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .bandeau-cookies__actions .bouton-cookies { flex: 1 1 auto; }
}

/* Pop-up de préférences (« Gérer mes choix » / « Gérer mes préférences ») :
   une ligne par catégorie de cookie, choix par pilules horizontales. */
.cookies-choix {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 12px;
  border-radius: var(--rayon); background: rgba(255, 255, 255, .05); border: 1px solid var(--verre-bord);
}
.cookies-choix__texte { display: flex; flex-direction: column; gap: 3px; }
.cookies-choix__nom { font: 700 14px var(--police-titre); }
.cookies-choix__desc { font-size: 12px; color: var(--texte-doux); }
.cookies-pilules {
  display: flex; gap: 3px; flex-shrink: 0;
  padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--verre-bord);
}
.cookies-pilule {
  min-width: 78px; padding: 8px 14px; border: 0; border-radius: 999px;
  font: 700 10.5px/1.25 var(--police-marque); letter-spacing: .08em; text-transform: uppercase;
  background: none; color: var(--texte-discret); cursor: pointer; transition: var(--transition);
}
.cookies-pilule:hover:not(.active) { color: var(--texte); }
.cookies-pilule.active {
  /* Même défaut/même correctif (dégradé étiré/centré) que .badge--degrade. */
  color: #fff;
  background: var(--degrade);
  background-size: 250% 100%;
  background-position: center;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, .35), var(--ombre-1);
}
.cookies-pilules--figees .cookies-pilule { cursor: default; }
.popup .cookies-choix:last-of-type { margin-bottom: 22px; }
@media (max-width: 480px) {
  .cookies-choix { flex-direction: column; align-items: stretch; }
  .cookies-pilules { align-self: flex-start; }
}
.compte-page h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

/* Logo wavy blanc à gauche du nom */
.marque__wavy {
  height: 40px; width: auto; margin-right: 10px;
  filter: drop-shadow(0 2px 3px rgba(13, 10, 26, 0.9)) drop-shadow(0 0 8px rgba(42, 27, 110, 0.9));
}
@media (min-width: 1401px) { .marque__wavy { position: relative; top: -9px; } }
@media (max-width: 640px) { .marque__wavy { height: 26px; margin-right: 6px; } }

/* Nom de marque en police wavy (majuscules uniquement, sans accents) */
.nom-wavy { font-family: "Twistoria Wavy", var(--police-titre); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   BANDEAU D'ENCART PERSONNALISÉ (dernier lieu joué), sous l'en-tête,
   sur toutes les pages — assets/js/encart-personnalise.js
   ========================================================================== */
.bandeau-encart {
  background: var(--degrade);
  overflow: hidden;
  height: 42px;
  display: flex;
  align-items: center;
}
.bandeau-encart__piste {
  display: flex;
  width: max-content;
  gap: 72px;
  padding-left: 72px;
  white-space: nowrap;
  animation: bandeauEncartDefilement 44s linear infinite;
}
.bandeau-encart:hover .bandeau-encart__piste,
.bandeau-encart:focus-within .bandeau-encart__piste { animation-play-state: paused; }
.bandeau-encart__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font: 600 13px/1 var(--police-texte);
  text-decoration: none;
  white-space: nowrap;
}
.bandeau-encart__item:hover { text-decoration: underline; }
.bandeau-encart__sep { opacity: .5; }
.bandeau-encart__cta { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@keyframes bandeauEncartDefilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-encart__piste { animation: none; padding-left: 16px; }
}