/* =====================================================================
   TOMBOLA PANCRÉAS — Design System « PRIME TIME » (thème sombre)
   Socle CSS / tokens — v1 (item-001)
   Concept : lever de rideau d'un show de gala primetime.
   Glamour de la scène + dignité de la cause.
   Mobile-first. 60 fps. Respect de prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — variables CSS
   --------------------------------------------------------------------- */
:root {
  /* ---- Couleurs : Nuit aubergine (fond ≈ 80 %) ---- */
  --c-nuit:        #0B0620;   /* fond principal              */
  --c-nuit-2:      #160A30;   /* fond dégradé / élévation     */
  --c-nuit-3:      #1E0F3D;   /* surfaces surélevées          */
  --c-bg:          var(--c-nuit);

  /* ---- Violet ruban : couleur de la cause ---- */
  --c-violet:      #8B5CF6;
  --c-violet-2:    #6D28D9;
  --c-cause:       #7C3AED;   /* ruban officiel de la cause   */

  /* ---- Or champagne : prestige (rare & précis) ---- */
  --c-or:          #E9C46A;
  --c-or-clair:    #F7E3A1;
  --c-or-fonce:    #C9A227;

  /* ---- Bleu projecteur : écho « Vaincre le Cancer » ---- */
  --c-bleu:        #25D6F0;
  --c-bleu-vlc:    #009FE3;

  /* ---- Magenta / ambre : étincelles (parcimonie) ---- */
  --c-magenta:     #FF4FA3;
  --c-ambre:       #FF8A3D;

  /* ---- Texte : blanc / lilas gris ---- */
  --c-blanc:       #FFFFFF;
  --c-texte:       #C4BEDA;   /* corps de texte               */
  --c-texte-doux:  #8E86A8;   /* légendes, mentions           */

  /* ---- Rôles sémantiques ---- */
  --color-bg:            var(--c-nuit);
  --color-surface:       rgba(255, 255, 255, 0.05);
  --color-surface-hi:    rgba(255, 255, 255, 0.08);
  --color-border:        rgba(255, 255, 255, 0.12);
  --color-border-or:     rgba(233, 196, 106, 0.45);
  --color-heading:       var(--c-blanc);
  --color-text:          var(--c-texte);
  --color-muted:         var(--c-texte-doux);
  --color-accent:        var(--c-or);
  --color-link:          var(--c-or-clair);

  /* ---- Dégradés signature ---- */
  --grad-or:       linear-gradient(100deg, #E9C46A, #F7E3A1 45%, #E9C46A);
  --grad-or-leaf:  linear-gradient(100deg,
                     #C9A227 0%, #F7E3A1 22%, #FFF7DD 40%,
                     #E9C46A 60%, #C9A227 100%);
  --grad-nuit:     linear-gradient(180deg, #0B0620, #160A30 60%, #0B0620);
  --grad-cause:    linear-gradient(180deg, #0B0620, #1A0B33 50%, #0B0620);

  /* ---- Halos d'ambiance (projecteurs) ---- */
  --halo-violet:   radial-gradient(1200px 700px at 50% -12%, rgba(124,58,237,.42), transparent 60%);
  --halo-bleu:     radial-gradient(900px 600px at 12% 108%, rgba(0,159,227,.22), transparent 55%);
  --halo-magenta:  radial-gradient(900px 600px at 88% 100%, rgba(255,79,163,.16), transparent 55%);

  /* ---- Typographie : familles ---- */
  --font-enseigne: 'Anton', 'Archivo', system-ui, sans-serif;   /* titres-enseigne, grands chiffres */
  --font-condense: 'Archivo', system-ui, sans-serif;            /* eyebrows, boutons, labels        */
  --font-couture:  'Playfair Display', Georgia, serif;          /* émotion, noms d'artistes         */
  --font-corps:    'Manrope', 'Inter', system-ui, sans-serif;   /* corps, prix, mentions            */

  /* ---- Échelle typographique (fluide, mobile-first) ---- */
  --fs-eyebrow:  clamp(11px, 0.9vw + 8px, 13px);
  --fs-caption:  clamp(12px, 0.6vw + 10px, 14px);
  --fs-body:     clamp(15px, 0.5vw + 13px, 18px);
  --fs-lead:     clamp(16px, 1.4vw + 12px, 24px);
  --fs-h3:       clamp(19px, 1.6vw + 12px, 28px);
  --fs-h2:       clamp(26px, 3.4vw + 12px, 46px);
  --fs-h1:       clamp(40px, 8.4vw, 104px);
  --fs-mega:     clamp(34px, 6vw, 64px);   /* grands chiffres compteurs */

  --lh-tight:    0.94;
  --lh-heading:  1.12;
  --lh-body:     1.6;
  --ls-enseigne: 0.005em;
  --ls-label:    0.18em;   /* interlettrage eyebrows / boutons */

  /* ---- Échelle d'espacement (généreuse, base 4px) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --section-y:   clamp(64px, 9vw, 128px);   /* rythme vertical des sections */
  --gutter:      clamp(20px, 4vw, 40px);     /* marge interne latérale       */
  --maxw:        1200px;                      /* largeur de contenu           */
  --maxw-prose:  720px;                       /* largeur de lecture confort   */

  /* ---- Rayons ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- Ombres & lueurs ---- */
  --sh-card:    0 18px 50px rgba(0, 0, 0, 0.45);
  --sh-raised:  0 20px 50px rgba(0, 0, 0, 0.35);
  --glow-or:    0 12px 40px rgba(233, 196, 106, 0.45);
  --glow-violet:0 0 60px rgba(124, 58, 237, 0.35);
  --glow-bleu:  0 0 16px rgba(0, 159, 227, 0.6);

  /* ---- Verre dépoli (glassmorphism) ---- */
  --glass-bg:     rgba(11, 6, 32, 0.55);
  --glass-blur:   blur(10px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.12);

  /* ---- Transitions ----
     Courbe SIGNATURE unique : toute la page respire sur la même main.
     `--ease-out` est conservé comme alias historique mais pointe désormais
     sur la signature → boutons, filtres, galerie, cartes et reveals partagent
     exactement le même timing. (Les boucles ambiantes symétriques —
     `beam`, `breathe`, `live-pulse` — restent volontairement en `ease-in-out`.)
     `--t-motion-1/2/3` = durées de référence pour les reveals « rideau ». */
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  var(--ease-signature);
  --t-fast:    0.2s var(--ease-out);
  --t-med:     0.3s var(--ease-out);
  --t-slow:    0.5s var(--ease-out);
  --t-motion-1: 0.45s;
  --t-motion-2: 0.72s;
  --t-motion-3: 1.05s;

  /* ---- Focus (accessibilité) ---- */
  --focus-ring: 2px solid var(--c-or-clair);
  --focus-off:  2px;

  --z-base: 1;
  --z-content: 3;
  --z-sticky: 40;
  --z-overlay: 60;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE (mobile-first)
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--c-nuit);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }

a { color: var(--color-link); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-or-clair); }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-off);
  border-radius: var(--r-sm);
}

::selection { background: rgba(233, 196, 106, 0.3); color: #fff; }

/* ---------------------------------------------------------------------
   3. TYPOGRAPHIE — familles & niveaux
   --------------------------------------------------------------------- */
.font-enseigne, .u-enseigne { font-family: var(--font-enseigne); }
.font-condense, .u-condense { font-family: var(--font-condense); }
.font-couture,  .u-couture  { font-family: var(--font-couture); }
.font-corps,    .u-corps    { font-family: var(--font-corps); }

h1, h2, h3, h4 { color: var(--color-heading); line-height: var(--lh-heading); font-weight: 800; }

.h1, h1 {
  font-family: var(--font-enseigne);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-enseigne);
  text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(124, 58, 237, 0.5);
}

.h2, h2 {
  font-family: var(--font-couture);
  font-size: var(--fs-h2);
}

.h3, h3 {
  font-family: var(--font-couture);
  font-size: var(--fs-h3);
}

.eyebrow {
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-violet);
}

.lead {
  font-family: var(--font-couture);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--color-text);
}

.muted, small { color: var(--color-muted); font-size: var(--fs-caption); }

/* Grands chiffres (compteurs) */
.stat-num {
  font-family: var(--font-enseigne);
  font-size: var(--fs-mega);
  line-height: 1;
  color: var(--c-blanc);
  letter-spacing: 0.5px;
}
.stat-num.is-or  { color: var(--c-or-clair); }
.stat-num.is-mag { color: var(--c-magenta); }
.stat-num.is-bleu{ color: var(--c-bleu); }

/* ---------------------------------------------------------------------
   4. GESTE SIGNATURE — titre « feuille d'or » (dégradé + sheen animé)
   --------------------------------------------------------------------- */
.gold-leaf {
  position: relative;
  background: var(--grad-or-leaf);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(233, 196, 106, 0.4));
  animation: gold-sheen 5.5s linear infinite;
}
@keyframes gold-sheen {
  0%   { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

/* Variante pour surfaces (filet / bordure or) */
.hairline-or { border: 1px solid var(--color-border-or); }

/* ---------------------------------------------------------------------
   5. COULEURS UTILITAIRES
   --------------------------------------------------------------------- */
.text-blanc  { color: var(--c-blanc); }
.text-or     { color: var(--c-or-clair); }
.text-violet { color: var(--c-violet); }
.text-bleu   { color: var(--c-bleu); }
.text-muted  { color: var(--color-muted); }

/* ---------------------------------------------------------------------
   6. LAYOUT — conteneurs & rythme
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--maxw-prose); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--nuit  { background: var(--grad-nuit); }
.section--cause { background: var(--grad-cause); }

.stack   { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--sp-4); }
.center  { text-align: center; }

/* ---------------------------------------------------------------------
   7. SURFACES — verre dépoli & cartes
   --------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-raised);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

/* Badge / pastille */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-or-clair);
  background: var(--glass-bg);
  border: 1px solid var(--color-border-or);
  backdrop-filter: var(--glass-blur);
}

/* Pastille LIVE pulsée */
.live-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-magenta);
  box-shadow: 0 0 12px var(--c-magenta);
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

/* ---------------------------------------------------------------------
   8. BOUTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--font-condense);
  font-weight: 900;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--t-med), box-shadow var(--t-med), filter var(--t-fast);
}

/* CTA prestige — or champagne */
.btn--or {
  position: relative;
  overflow: hidden;
  color: #231703;
  background: var(--grad-or);
  box-shadow: var(--glow-or), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.btn--or:hover,
.btn--or:focus-visible {
  color: #1a1000;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 60px rgba(233, 196, 106, 0.65);
  text-shadow: 0 1px 1px rgba(255, 248, 224, 0.6);
}
.btn--or::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  background-size: 250% 100%;
  mix-blend-mode: overlay;
  animation: btn-sheen 3.2s linear infinite;
}
@keyframes btn-sheen {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* Bouton secondaire — contour discret */
.btn--ghost {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { color: #fff; border-color: var(--color-border-or); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   9. AMBIANCE DÉCORATIVE — scène / projecteurs (réutilisable)
   --------------------------------------------------------------------- */
.stage {
  position: relative;
  overflow: hidden;
  background:
    var(--halo-violet),
    var(--halo-bleu),
    var(--halo-magenta),
    var(--grad-nuit);
}
.stage > * { position: relative; z-index: var(--z-content); }

/* Sol de scène réfléchissant */
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34vh; z-index: var(--z-base);
  background: linear-gradient(180deg, transparent, rgba(124,58,237,.10) 40%, rgba(0,0,0,.5));
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%);
          mask: linear-gradient(180deg, transparent, #000 60%);
  pointer-events: none;
}

/* Faisceau de projecteur qui balaie (composable : .beam.beam--or, etc.) */
.beam {
  position: absolute; top: -30vh; left: 50%;
  width: 60vw; height: 150vh;
  transform-origin: top center;
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: var(--z-base);
}
.beam--or  { background: linear-gradient(180deg, rgba(233,196,106,.28), transparent 65%); animation: beam-sweep-a 11s ease-in-out infinite; }
.beam--bleu{ background: linear-gradient(180deg, rgba(0,159,227,.24), transparent 62%);  animation: beam-sweep-b 13s ease-in-out infinite; }
.beam--mag { background: linear-gradient(180deg, rgba(255,79,163,.20), transparent 60%);  animation: beam-sweep-c 9s  ease-in-out infinite; }
@keyframes beam-sweep-a { 0%,100% { transform: translateX(-50%) rotate(-16deg); } 50% { transform: translateX(-50%) rotate(10deg); } }
@keyframes beam-sweep-b { 0%,100% { transform: translateX(-50%) rotate(14deg); }  50% { transform: translateX(-50%) rotate(-12deg); } }
@keyframes beam-sweep-c { 0%,100% { transform: translateX(-50%) rotate(-6deg); }  50% { transform: translateX(-50%) rotate(20deg); } }

/* Enseigne à ampoules « Broadway » */
.bulbs { display: inline-flex; gap: 6px; }
.bulbs i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-or-clair);
  box-shadow: 0 0 8px var(--c-or-clair);
  animation: bulb-chase 1.4s linear infinite;
}
.bulbs i:nth-child(2) { animation-delay: 0.18s; }
.bulbs i:nth-child(3) { animation-delay: 0.36s; }
.bulbs i:nth-child(4) { animation-delay: 0.54s; }
@keyframes bulb-chase { 0%,100% { opacity: 0.25; } 45% { opacity: 1; } }

/* Indice de scroll */
.scroll-cue {
  font-family: var(--font-condense);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
  animation: scroll-bob 2s ease-in-out infinite;
}
@keyframes scroll-bob { 0%,100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(7px); opacity: 1; } }

/* Apparition au scroll (utilitaire, activé via JS ou .is-in) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   9quater. HERO « LEVER DE RIDEAU » — poussière d'or, enseigne,
   compteur LIVE, bandeau confiance (item-005)
   --------------------------------------------------------------------- */

/* Poussière d'or / bokeh (canvas hydraté par JS ; couche décorative
   posée au-dessus des halos mais sous le contenu) */
.stage .dust {
  position: absolute; inset: 0;
  z-index: 2;                 /* > --z-base (halos), < --z-content (texte) */
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Fallback statique si JS absent / reduced-motion : quelques lueurs douces */
.stage .dust {
  background:
    radial-gradient(2px 2px at 18% 72%, rgba(247, 227, 161, 0.55), transparent 60%),
    radial-gradient(2px 2px at 76% 40%, rgba(233, 196, 106, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 22%, rgba(139, 92, 246, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 82%, rgba(0, 159, 227, 0.40), transparent 60%),
    radial-gradient(2px 2px at 88% 66%, rgba(247, 227, 161, 0.35), transparent 60%);
}

/* Enseigne à ampoules : légère lueur d'or supplémentaire */
.badge.sign {
  box-shadow: 0 0 30px rgba(233, 196, 106, 0.18);
  max-width: min(92vw, 520px);
}

/* Coiffe « LIVE » pulsée au-dessus du compteur temps réel */
.live-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  align-self: center; margin-bottom: var(--sp-3);
  font-family: var(--font-condense); font-weight: 800;
  font-size: var(--fs-eyebrow); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-or-clair);
}
.live .live-badge { margin-inline: auto; }

/* ------------------------------------------------------------------ *
 * Bloc « Rendez-vous du tirage » (HTML/CSS pur — sans JS)
 * Met en valeur la date du tirage + mention & logo Vaincre le Cancer.
 * ------------------------------------------------------------------ */
.draw {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--color-border-or);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 30px rgba(233, 196, 106, 0.18);
}

/* Eyebrow doré */
.draw__eyebrow {
  margin: 0;
  font-family: var(--font-condense); font-weight: 800;
  font-size: var(--fs-eyebrow); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-or-clair);
}

/* Date mise en valeur */
.draw__date {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  margin: var(--sp-2) 0 0;
  line-height: 1;
}
.draw__day {
  font-family: var(--font-enseigne);
  font-size: var(--fs-h3);
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.draw__year {
  font-family: var(--font-condense); font-weight: 800;
  font-size: var(--fs-h4, 1.05rem);
  letter-spacing: 0.28em;
  color: var(--c-or-clair);
}

/* Trait de séparation doré discret */
.draw__mention {
  position: relative;
  max-width: 34ch;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  font-family: var(--font-corps);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--color-muted);
}
.draw__mention::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-or-fonce), transparent);
}

/* Plaque claire réutilisable : pose un logo transparent (au texte sombre) sur
   un fond blanc à coins arrondis pour garantir contraste et lisibilité sur les
   fonds foncés (vue compte à rebours + bloc « Rendez-vous du tirage »). */
.org-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.org-plaque img {
  display: block;
  width: auto; height: 46px;
  max-width: 200px;
  object-fit: contain;
}

/* Logo association du bloc tirage, centré sur sa plaque claire */
.draw__logo {
  margin-top: var(--sp-3);
}
.draw__logo.org-plaque {
  padding: 8px 14px;
}
.draw__logo.org-plaque img {
  height: 36px;
}

/* Bandeau confiance : plaques sombres neutres */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
}
.trust__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-corps); font-size: var(--fs-caption);
  color: var(--color-muted);
}
.trust__item b { color: var(--c-blanc); font-weight: 700; }
.trust__ico { font-size: 15px; line-height: 1; opacity: 0.9; filter: saturate(0.8); }

/* Plaque « Vaincre le Cancer » — logo officiel posé sur une PLAQUE NEUTRE
   claire (jamais sur violet saturé — contrainte de marque). Le fond clair
   garantit la lisibilité de la partie noire « LE CANCER » du logotype. */
.trust__item--vlc { padding: 0; }
.vlc {
  display: inline-flex; align-items: center;
  padding: 9px 15px; border-radius: var(--r-md);
  background: #ffffff;
  border: 1px solid rgba(0, 159, 227, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.vlc__logo {
  display: block;
  height: 30px; width: auto;
}

@media (max-width: 640px) {
  .badge.sign { letter-spacing: 0.10em; }
  .trust { gap: var(--sp-3); }
}

/* ---------------------------------------------------------------------
   9bis. MUR DE LOTS D'EXCEPTION — gabarit unifié (item-003)
   Carte sombre · filet or · voile photographique commun (scrim +
   vignettage + grain + halo violet/or) · bandeau LOT NN · étiquette
   catégorie · badge Valeur · CTA. Lots phares en format XL.
   Micro-interactions : lévitation + balayage de lumière.
   --------------------------------------------------------------------- */
.lots { background: var(--grad-nuit); }
.lots__head { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.lots__title { font-weight: 800; }

/* Filtres par catégorie */
.lots__filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.lot-filter {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lot-filter:hover { color: #fff; border-color: var(--color-border-or); transform: translateY(-1px); }
.lot-filter.is-on {
  color: #231703;
  background: var(--grad-or);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(233, 196, 106, 0.35);
}
.lots__count { text-align: center; margin-bottom: var(--sp-5); }

/* Grille — cartes de lots de taille uniforme */
.lot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-5);
}

/* Carte — gabarit identique obligatoire */
.lot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-nuit-2);
  border: 1px solid var(--color-border-or);
  box-shadow: var(--sh-card);
  /* Tilt sous le pointeur (desktop) : la perspective est portée par la carte
     elle-même ; --rx/--ry sont mis à jour par le JS (throttle rAF), --ty gère
     la levée au survol. Sur (hover: none) le JS ne s'arme pas → carte plane. */
  transform: perspective(900px)
             translateY(var(--ty, 0))
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  will-change: transform;
}
.lot-card.is-hidden { display: none; }
.lot-card:hover, .lot-card:focus-visible {
  --ty: -10px;
  border-color: rgba(233, 196, 106, 0.75);
  box-shadow: 0 34px 80px rgba(124, 58, 237, 0.4), var(--glow-or);
}

/* Média — bloc à ratio fixe, image entièrement visible */
.lot-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-nuit-2);
}
.lot-card__media img {
  width: 100%; height: 100%;
  /* Remplit le cadre 4/5 sans déformation, quel que soit le ratio source. */
  object-fit: cover;
  /* Centrage par défaut sur le sujet ; réglage fin par lot via --lot-pos
     (ex. style="--lot-pos: 50% 20%" pour recadrer sur un sujet décentré). */
  object-position: var(--lot-pos, center center);
  filter: saturate(1.02) contrast(1.03);
  transition: transform var(--t-slow);
}
.lot-card:hover .lot-card__media img { transform: scale(1.07); }

/* Voile photographique COMMUN : léger halo violet/or + vignettage discret.
   Plus de scrim opaque en bas : le titre est désormais sous l'image. */
.lot-card__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(100% 60% at 50% 118%, rgba(233, 196, 106, 0.12), transparent 62%);
  box-shadow: inset 0 0 90px 16px rgba(11, 6, 32, 0.35); /* vignettage discret */
  mix-blend-mode: normal;
}
/* Grain commun — unifie le rendu des 25 visuels hétérogènes */
.lot-card__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.07; mix-blend-mode: soft-light; /* réduit (item-004) : ne s'additionne pas au grain global body::after */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* Reflet doré qui suit le pointeur : dégradé radial positionné en --mx/--my
   (custom props mises à jour au pointermove). « Comme si on inclinait un objet
   précieux sous un projecteur. » Fallback sans JS = halo centré discret. */
.lot-card__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity var(--t-med);
  background: radial-gradient(
    38% 38% at var(--mx, 50%) var(--my, 12%),
    rgba(255, 255, 255, 0.34),
    rgba(247, 227, 161, 0.16) 42%,
    transparent 72%);
}
.lot-card:hover .lot-card__shine,
.lot-card:focus-visible .lot-card__shine { opacity: 1; }
/* Balayage conservé pour les vignettes ambassadeurs (.amb-card__shine). */
@keyframes lot-sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* Bandeau LOT NN */
.lot-card__num {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  font-family: var(--font-enseigne); font-size: 13px; letter-spacing: 0.08em;
  color: #231703; background: var(--grad-or);
  padding: 4px 10px; border-radius: var(--r-sm);
  box-shadow: 0 4px 14px rgba(233, 196, 106, 0.4);
}
/* Étiquette catégorie */
.lot-card__cat {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-family: var(--font-condense); font-weight: 800; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(11, 6, 32, 0.62); border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* Corps — cartouche interne sous l'image, en flux normal sur fond plein */
.lot-card__body {
  position: relative; z-index: 4;
  flex: 1 1 auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(180deg, var(--c-nuit-2) 0%, var(--c-nuit) 100%);
  border-top: 1px solid var(--color-border-or);
}
.lot-card__title {
  font-family: var(--font-couture); font-weight: 800; color: #fff;
  font-size: var(--fs-h3); line-height: 1.14;
}
.lot-card__value {
  align-self: flex-start;
  font-family: var(--font-condense); font-weight: 800; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-or-clair);
  border: 1px solid var(--color-border-or); border-radius: var(--r-pill);
  padding: 4px 12px; background: rgba(233, 196, 106, 0.10);
}
/* Prix du ticket, affiché clairement sur chaque carte (identique pour tous les lots) */
.lot-card__price {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-condense); font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}
.lot-card__price b { color: var(--c-or-clair); font-weight: 900; }
.lot-card__ticket {
  width: 15px; height: 15px; flex: none; display: block;
  background: var(--c-or-clair);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v3a2 2 0 1 0 0 4v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2 2 0 1 0 0-4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v3a2 2 0 1 0 0 4v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2 2 0 1 0 0-4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lot-card__cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--font-condense); font-weight: 900; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase; color: #231703;
  background: var(--grad-or); padding: 11px 14px; border-radius: var(--r-md);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.lot-card:hover .lot-card__cta { filter: brightness(1.08); }
.lot-card__arrow { transition: transform var(--t-fast); }
.lot-card:hover .lot-card__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .lot-card { transform: none !important; }
  .lot-card__media img { transition: none; }
  .lot-card:hover .lot-card__media img { transform: none; }
  .lot-card__shine { display: none; }
}

/* ---------------------------------------------------------------------
   9ter. LOT EN PLEINE LUMIÈRE — fiche du lot phare (item-004)
   Traitement « maison de ventes » : galerie socle éclairé + fond
   sombre + rotation par vues (pseudo 360°), fiche récit / valeur /
   dimensions / seuil, réponse en un coup d'œil, packs 5+1 · 10+3 ·
   20+5 et tunnel « Je joue pour CE lot ».
   --------------------------------------------------------------------- */
.spotlight { position: relative; overflow: hidden; background: var(--grad-cause); }
.spotlight__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--halo-violet), var(--halo-magenta);
}
.spotlight > .container { position: relative; z-index: 1; }
.spotlight__head { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); }

.spotlight__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .spotlight__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--sp-8); }
}

/* --- Galerie « maison de ventes » --- */
.gallery { margin: 0; }
.gallery__stage {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--color-border-or);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 58, 237, 0.34), transparent 55%),
    radial-gradient(70% 50% at 50% 116%, rgba(233, 196, 106, 0.20), transparent 60%),
    linear-gradient(180deg, #05030d 0%, #0B0620 55%, #05030d 100%);
  box-shadow: var(--sh-card), inset 0 0 120px 30px rgba(0, 0, 0, 0.7);
}
/* Faisceau qui éclaire l'œuvre (socle éclairé) */
.gallery__spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 6%, rgba(247, 227, 161, 0.28), transparent 60%);
  mix-blend-mode: screen;
}
.gallery__img {
  position: absolute; z-index: 2; left: 50%; top: 46%;
  width: 84%; height: 82%; object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(124, 58, 237, 0.25));
  transition: opacity var(--t-med);
  animation: art-float 6s var(--ease-out) infinite;
}
@keyframes art-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 10px)); } }
/* Socle lumineux + reflet */
.gallery__plinth {
  position: absolute; z-index: 1; left: 50%; bottom: 7%;
  width: 62%; height: 7%; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 227, 161, 0.55), rgba(233, 196, 106, 0.12) 60%, transparent 72%);
  filter: blur(3px);
}
.gallery.is-spinning .gallery__img { animation: art-float 6s var(--ease-out) infinite, art-fade 0.6s var(--ease-out); }
@keyframes art-fade { from { opacity: 0.35; } to { opacity: 1; } }
.gallery__cap {
  margin-top: var(--sp-3); text-align: center;
  font-family: var(--font-condense); font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
}
.gallery__thumbs { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.gallery__thumb {
  width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; padding: 0;
  border: 1px solid var(--color-border); background: #05030d; opacity: 0.6;
  transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.gallery__thumb.is-on { opacity: 1; border-color: var(--c-or); box-shadow: 0 0 0 1px var(--c-or), var(--glow-or); }

/* --- Fiche --- */
.fiche { display: flex; flex-direction: column; gap: var(--sp-4); }
.fiche__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  font-family: var(--font-condense); font-weight: 800; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  color: var(--c-texte); background: var(--color-surface); border: 1px solid var(--color-border);
}
.chip--art { color: #231703; background: var(--grad-or); border-color: transparent; }
.fiche__name { font-family: var(--font-couture); font-weight: 800; font-size: var(--fs-h2); line-height: 1.08; color: #fff; }
.fiche__value { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.fiche__value-num { font-family: var(--font-enseigne); font-size: var(--fs-mega); line-height: 1; color: var(--c-or-clair); font-variant-numeric: tabular-nums; }
.fiche__value-label { font-family: var(--font-condense); font-weight: 800; font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.fiche__story { color: var(--color-text); }
.fiche__specs { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 520px) { .fiche__specs { grid-template-columns: 1fr 1fr; } }
.fiche__specs li { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-caption); color: var(--color-text); }
.fiche__specs li::before { content: "\25C6"; color: var(--c-or); font-size: 9px; line-height: 1.6; }
.fiche__specs b { color: #fff; font-weight: 700; margin-right: 4px; }
.fiche__seuil {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start;
  font-family: var(--font-condense); font-weight: 800; font-size: var(--fs-caption);
  letter-spacing: 0.05em; color: var(--c-or-clair);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(233, 196, 106, 0.10); border: 1px solid var(--color-border-or);
}

/* Répondre en un coup d'œil */
.ataglance {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--color-border);
}
@media (min-width: 620px) { .ataglance { grid-template-columns: repeat(4, 1fr); } }
.ataglance > div { padding: var(--sp-4); background: var(--c-nuit-2); }
.ataglance dt { font-family: var(--font-condense); font-weight: 800; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.ataglance dd { font-family: var(--font-couture); font-weight: 700; color: #fff; font-size: var(--fs-body); }

/* Packs 5+1 · 10+3 · 20+5 */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-2); }
.pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg); text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.pack:hover, .pack:focus-visible { transform: translateY(-3px); border-color: var(--color-border-or); box-shadow: var(--glow-or); }
.pack__tickets { font-family: var(--font-enseigne); font-size: clamp(24px, 5vw, 34px); line-height: 1; color: #fff; }
.pack__tickets b { color: var(--c-or-clair); font-weight: 400; }
.pack__label { font-family: var(--font-condense); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.pack__price { font-family: var(--font-condense); font-weight: 900; font-size: var(--fs-body); color: var(--c-or-clair); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pack--top { border-color: var(--color-border-or); background: rgba(233, 196, 106, 0.08); }
.pack__flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-condense); font-weight: 900; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #231703; background: var(--grad-or); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: 0 4px 14px rgba(233, 196, 106, 0.4);
}
.fiche__cta { align-self: stretch; }
.fiche__reassure { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .gallery__img { animation: none; }
}

/* ---------------------------------------------------------------------
   9quinquies. SECTION CAUSE — champ violet, chiffres count-up (item-007)
   Rupture sobre sur champ violet : ancrage émotionnel et digne de la
   cause. La paillette au service de la recherche — pas d'effet clinquant,
   un liseré doré discret, un ruban violet (couleur de la lutte contre le
   cancer du pancréas). Chiffres animés au scroll (voir le script + le
   respect de prefers-reduced-motion en §11).
   --------------------------------------------------------------------- */
.cause {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  /* Champ violet : rupture nette avec le fond « nuit » alentour. */
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(139, 92, 246, 0.34), transparent 62%),
    linear-gradient(180deg, #2A1152 0%, #3A1968 48%, #24104A 100%);
  border-block: 1px solid rgba(233, 196, 106, 0.22);
}
.cause__inner { max-width: 66rem; }
.cause__head { max-width: 46rem; margin-inline: auto; }
.cause__ribbon {
  display: block;
  width: 42px; height: 42px;
  margin: 0 auto var(--sp-4);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.cause__eyebrow { color: var(--c-or-clair); }
.cause__title {
  font-family: var(--font-couture);
  font-size: clamp(26px, 3vw + 14px, 42px);
  line-height: 1.12;
  margin-top: var(--sp-3);
  color: #fff;
}
.cause__lead {
  margin: var(--sp-4) auto 0;
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.cause__stats {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: 58rem;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}
.cause-stat {
  margin: 0;
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: rgba(11, 6, 32, 0.34);
}
.cause-stat__value { margin: 0; }
.cause-stat__num {
  display: block;
  font-family: var(--font-enseigne);
  font-size: clamp(40px, 4vw + 20px, 60px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cause-stat--phare { border-color: rgba(233, 196, 106, 0.42); }
.cause-stat--phare .cause-stat__num { color: var(--c-or-clair); }

/* Data-viz « 11 % » (item-002) — grille de 100 points : 89 en violet sombre
   désaturé, 11 qui s'allument en or. La grille est aria-hidden ; le texte
   visually-hidden du figcaption reste la source lisible. Dimensions fixées en
   CSS (colonnes + aspect-ratio) : l'espace est réservé, pas de CLS. */
.cause-stat--viz { text-align: center; }
.cause-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(4px, 1vw, 7px);
  width: 100%;
  max-width: 15rem;
  margin: 0 auto;
}
.cause-dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #342a4e; /* violet sombre désaturé */
}
.cause-dot--or.is-on {
  background: var(--c-or);
  box-shadow: 0 0 6px rgba(233, 196, 106, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .cause-dot--or { transition: background-color var(--t-slow), box-shadow var(--t-slow); }
}
.cause-stat__viznum {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-enseigne);
  font-size: clamp(30px, 3vw + 14px, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-or-clair);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .cause-dots { grid-template-columns: repeat(5, 1fr); max-width: 11rem; }
}
.cause-stat__label {
  display: block;
  margin-top: var(--sp-3);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.cause-stat__src {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.cause__sources {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  max-width: 48rem;
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.6);
}
.cause__cta { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------
   10. ACCESSIBILITÉ — utilitaires
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -60px;
  z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-nuit-3); color: #fff;
  border: 1px solid var(--color-border-or); border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------------------------------------------------------------------
   11. MOTION — respect de prefers-reduced-motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   9sexies. MUR DES AMBASSADEURS — preuve sociale (item-008)
   Gabarit strictement cohérent avec le mur de lots : carte sombre,
   filet or, voile photographique COMMUN (scrim bas + vignettage +
   grain fin + pointe de halo violet/or) qui unifie des visuels
   hétérogènes (portraits studio, affiches de spectacle, plans plein
   pied) pour qu'ils « appartiennent à la même soirée ». Cartes NON
   marchandes : ce sont des personnalités qui relaient, pas des lots —
   donc <figure>, sans CTA d'achat. Lévitation + balayage de
   lumière (désactivés sous prefers-reduced-motion, cf. §11).
   --------------------------------------------------------------------- */
.amb { background: var(--grad-nuit); }
.amb__head { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.amb__title { font-weight: 800; }
.amb__count { text-align: center; margin-bottom: var(--sp-5); }

/* Grille — cadence régulière, mur démocratique (aucune vedette en XL) */
.amb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-5);
}

/* Carte — même gabarit que .lot-card, sans curseur marchand */
.amb-card {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-nuit-2);
  border: 1px solid var(--color-border-or);
  box-shadow: var(--sh-card);
  transform: translateY(var(--ty, 0));
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  will-change: transform;
}
.amb-card.is-hidden { display: none; }
.amb-card:hover, .amb-card:focus-within {
  --ty: -10px;
  border-color: rgba(233, 196, 106, 0.75);
  box-shadow: 0 34px 80px rgba(124, 58, 237, 0.4), var(--glow-or);
}

/* Média plein cadre — un poil plus sombre que les lots pour dompter
   les fonds studio clairs (plein pied sur blanc) */
.amb-card__media { position: absolute; inset: 0; overflow: hidden; }
.amb-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* défaut : privilégie le visage ; surchargé en ligne */
  filter: saturate(1.02) contrast(1.04) brightness(0.9);
  transition: transform var(--t-slow);
}
.amb-card:hover .amb-card__media img { transform: scale(1.06); }

/* Voile photographique COMMUN (identique aux lots) */
.amb-card__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(124, 58, 237, 0.34), transparent 58%),
    radial-gradient(100% 60% at 50% 118%, rgba(233, 196, 106, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(11, 6, 32, 0.14) 0%, rgba(11, 6, 32, 0.26) 40%, rgba(11, 6, 32, 0.78) 72%, rgba(11, 6, 32, 0.97) 100%);
  box-shadow: inset 0 0 120px 24px rgba(11, 6, 32, 0.85);
}
.amb-card__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.07; mix-blend-mode: soft-light; /* réduit (item-004) : ne s'additionne pas au grain global body::after */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.amb-card__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast);
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  background-size: 250% 100%;
}
.amb-card:hover .amb-card__shine { opacity: 1; animation: lot-sheen 1.1s var(--ease-out); }

/* Étiquette univers (Musique / Danse / Humour / Sport / TV) */
.amb-card__cat {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-family: var(--font-condense); font-weight: 800; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(11, 6, 32, 0.62); border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* Petit sceau « ruban » — rappel de la cause, coin haut-gauche */
.amb-card__seal {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-condense); font-weight: 800; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-or-clair);
  background: var(--glass-bg); border: 1px solid var(--color-border-or);
  padding: 4px 9px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.amb-card__seal svg { width: 11px; height: 11px; }

/* Corps posé sur le voile */
.amb-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
}
.amb-card__name {
  font-family: var(--font-couture); font-weight: 800; color: #fff;
  font-size: var(--fs-h3); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.amb-card__role {
  font-family: var(--font-condense); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texte);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* ---- Bandeau teaser sur la page d'accueil : rangée d'avatars ---- */
.amb-teaser { background: var(--grad-cause); }
.amb-teaser__head { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.amb-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-6);
}
.amb-chip {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: 104px; text-align: center;
}
.amb-chip__ph {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  overflow: hidden; background: var(--c-nuit-3);
  border: 2px solid var(--color-border-or);
  box-shadow: 0 10px 26px rgba(11, 6, 32, 0.6), 0 0 0 4px rgba(233, 196, 106, 0.08);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.amb-chip__ph img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%;
  filter: saturate(1.02) contrast(1.03) brightness(0.98);
}
.amb-chip:hover .amb-chip__ph {
  transform: translateY(-4px);
  border-color: rgba(233, 196, 106, 0.85);
  box-shadow: var(--glow-or), 0 0 0 4px rgba(233, 196, 106, 0.14);
}
.amb-chip__name {
  font-family: var(--font-condense); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; color: var(--c-texte); line-height: 1.2;
}
.amb-chip--more .amb-chip__ph {
  display: grid; place-items: center;
  font-family: var(--font-enseigne); font-size: 22px; color: var(--c-or-clair);
  background: rgba(233, 196, 106, 0.10);
}

@media (max-width: 480px) {
  .amb-chip { width: 84px; }
  .amb-chip__ph { width: 66px; height: 66px; }
}

/* ---------------------------------------------------------------------
   9septies. CONFIANCE & TRANSPARENCE — bloc rassurant (item-009)
   Dernier palier avant l'achat : « le luxe sans la confiance ne convertit
   pas ». Ton sobre, aucune paillette — cartes sombres sur fond « nuit »,
   filets or discrets, icônes au trait. On expose les garanties (huissier,
   Fisher-Yates open-source, règlement PDF, Vaincre le Cancer / Paul
   Brousse, Stripe) puis une mention légale sobre (tirage huissier,
   règlement) posée dans un cartouche à liseré or.
   --------------------------------------------------------------------- */
.trust-sec {
  position: relative;
  border-block-start: 1px solid rgba(233, 196, 106, 0.14);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(0, 159, 227, 0.08), transparent 60%),
    var(--c-nuit);
}
.trust-sec__inner { max-width: 74rem; }
.trust-sec__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.trust-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-card {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, var(--c-nuit-2), var(--c-nuit));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  transition:
    transform var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.trust-card:hover,
.trust-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(233, 196, 106, 0.5);
  box-shadow: var(--glow-or);
}
.trust-card__ico {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-4);
  border-radius: 12px;
  color: var(--c-or-clair);
  background: rgba(233, 196, 106, 0.10);
  border: 1px solid rgba(233, 196, 106, 0.28);
}
.trust-card__ico svg { width: 24px; height: 24px; display: block; }
.trust-card__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-couture);
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
}
.trust-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-texte);
}
.trust-card__text b { color: #fff; font-weight: 700; }
.trust-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-or-clair);
}
.trust-card__link:hover { color: var(--c-or); }
.trust-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  max-width: 62rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-inline-start: 3px solid var(--c-or);
  border-radius: var(--r-sm);
  background: rgba(11, 6, 32, 0.5);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texte-doux);
}
.trust-note b { color: var(--c-texte); font-weight: 700; }
.trust-note__ico {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-or-clair);
}

/* ---------------------------------------------------------------------
   9octies. COMMENT ÇA MARCHE — parcours en 4 étapes (item-011)
   Zéro friction : choisir un lot → acheter le(s) ticket(s) → tirage par
   huissier → notification du gagnant. Cartes sombres cohérentes avec le
   bloc « confiance » (filet or, icônes au trait), agrémentées d'une
   pastille numérotée en or et d'un connecteur or entre les étapes
   (desktop). Un cartouche rappelle qu'un lot = un tirage.
   --------------------------------------------------------------------- */
.howto {
  position: relative;
  border-block-start: 1px solid rgba(233, 196, 106, 0.14);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(124, 58, 237, 0.12), transparent 60%),
    var(--grad-nuit);
}
.howto__inner { max-width: 74rem; }
.howto__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.howto-steps {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.howto-step {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, var(--c-nuit-2), var(--c-nuit));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  transition:
    transform var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.howto-step:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 196, 106, 0.5);
  box-shadow: var(--glow-or);
}
/* Connecteur or dans la gouttière entre deux étapes (desktop) */
.howto-step:not(:last-child)::after {
  content: "\2192";           /* → */
  position: absolute;
  top: calc(var(--sp-6) + 23px);
  right: -18px;
  transform: translate(50%, -50%);
  font-family: var(--font-condense);
  font-size: 22px;
  line-height: 1;
  color: var(--c-or);
  opacity: 0.75;
  z-index: 2;
  pointer-events: none;
}
.howto-step__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font-enseigne);
  font-size: 16px;
  color: var(--c-nuit);
  background: var(--grad-or);
  box-shadow: 0 4px 14px rgba(233, 196, 106, 0.35);
}
.howto-step__ico {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-4);
  border-radius: 12px;
  color: var(--c-or-clair);
  background: rgba(233, 196, 106, 0.10);
  border: 1px solid rgba(233, 196, 106, 0.28);
}
.howto-step__ico svg { width: 24px; height: 24px; display: block; }
.howto-step__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-couture);
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
}
.howto-step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-texte);
}
.howto-step__text b { color: #fff; font-weight: 700; }
.howto-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  max-width: 62rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(233, 196, 106, 0.28);
  border-inline-start: 3px solid var(--c-or);
  border-radius: var(--r-sm);
  background: rgba(124, 58, 237, 0.08);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-texte);
}
.howto-note b { color: #fff; font-weight: 700; }
.howto-note__ico {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-or-clair);
}
@media (max-width: 900px) {
  .howto-steps { grid-template-columns: repeat(2, 1fr); }
  .howto-step:not(:last-child)::after { content: none; }
}
@media (max-width: 560px) {
  .howto-steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   9nonies. DON COMPLÉMENTAIRE & FAQ — dernier palier rassurant (item-014)
   Deux temps dans une même section « nuit » : d'abord un appel au don
   libre (bandeau sombre + cartouche or « reçu fiscal possible »), puis
   une FAQ grand public en accordéon natif <details>/<summary> — zéro JS,
   marqueur +/− animé en CSS, réponse qui se déploie au clic. On reprend
   les cartes sombres à filet or déjà en place (confiance / comment).
   --------------------------------------------------------------------- */
.give-faq {
  position: relative;
  border-block-start: 1px solid rgba(233, 196, 106, 0.14);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(124, 58, 237, 0.10), transparent 60%),
    var(--c-nuit);
}
.give-faq__inner { max-width: 74rem; }

/* --- Don complémentaire --- */
.give {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, var(--c-nuit-2), var(--c-nuit));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
}
.give__body { justify-content: center; }
.give__body h2 { margin: 0; }
.give__text {
  margin: 0;
  max-width: 40rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-texte);
}
.give__text b { color: #fff; font-weight: 700; }
.give__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.give__receipt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid rgba(233, 196, 106, 0.28);
  border-inline-start: 3px solid var(--c-or);
  border-radius: var(--r-sm);
  background: rgba(233, 196, 106, 0.06);
}
.give__receipt-ico {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  color: var(--c-or-clair);
  background: rgba(233, 196, 106, 0.10);
  border: 1px solid rgba(233, 196, 106, 0.28);
}
.give__receipt-ico svg { width: 22px; height: 22px; display: block; }
.give__receipt-title {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-couture);
  font-size: 18px;
  color: #fff;
}
.give__receipt-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texte-doux);
}
.give__receipt-text b { color: var(--c-texte); font-weight: 700; }
.give__receipt-text a { color: var(--c-or-clair); font-weight: 700; }
.give__receipt-text a:hover { color: var(--c-or); }

/* --- FAQ accordéon natif --- */
.faq { margin-top: clamp(2.5rem, 6vw, 4rem); }
.faq__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.faq__list {
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
}
.faq-item {
  background: linear-gradient(180deg, var(--c-nuit-2), var(--c-nuit));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item[open],
.faq-item:hover,
.faq-item:focus-within {
  border-color: rgba(233, 196, 106, 0.5);
}
.faq-item[open] { box-shadow: var(--glow-or); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-couture);
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.35;
  color: #fff;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Marqueur +/− en pur CSS */
.faq-item__sign {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(233, 196, 106, 0.45);
  background: rgba(233, 196, 106, 0.08);
}
.faq-item__sign::before,
.faq-item__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: var(--c-or-clair);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.faq-item__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-item__a {
  padding: 0 var(--sp-5) var(--sp-5);
}
.faq-item__a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-texte);
}
.faq-item__a b { color: #fff; font-weight: 700; }
.faq-item__a a { color: var(--c-or-clair); font-weight: 700; }
.faq-item__a a:hover { color: var(--c-or); }
.faq__contact {
  max-width: 56rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  color: var(--c-texte-doux);
}
.faq__contact-ico { font-size: 18px; color: var(--c-or-clair); }
.faq__contact a { color: var(--c-or-clair); font-weight: 700; }
.faq__contact a:hover { color: var(--c-or); }

@media (max-width: 760px) {
  .give { grid-template-columns: 1fr; }
}

/* =====================================================================
   §10 — PIED DE PAGE GLOBAL (request-2026-07-03-1530, item-016)
   Footer partagé accueil / lots / ambassadeurs. Rappelle le cadre légal
   (association Vaincre le Cancer, huissier Me Simonin) et regroupe les
   liens obligatoires : règlement PDF, mentions légales, RGPD, presse,
   contact. Liens en chemins absolus → même markup à toute profondeur.
   ===================================================================== */
.site-footer {
  position: relative;
  margin-top: var(--section-y);
  border-top: 1px solid var(--color-border-or);
  background: var(--halo-violet), linear-gradient(180deg, #0B0620 0%, #08041A 100%);
  color: var(--color-text);
}
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--sp-7) var(--sp-6);
}
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }

.site-footer__brand-name {
  font-family: var(--font-couture);
  font-size: var(--fs-h3);
  color: #fff;
  margin: 0 0 var(--sp-3);
  line-height: 1.1;
}
.site-footer__brand-name b {
  background: var(--grad-or-leaf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.site-footer__blurb {
  max-width: 44ch;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--color-text);
  line-height: 1.6;
}
.site-footer__legalnote {
  max-width: 48ch;
  margin: 0;
  font-size: 12px;
  color: var(--c-texte-doux);
  line-height: 1.6;
}
.site-footer__legalnote strong { color: var(--color-text); font-weight: 700; }

.site-footer h3 {
  font-family: var(--font-condense);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--c-or-clair);
  margin: 0 0 var(--sp-4);
}
.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text);
  font-size: var(--fs-caption);
}
.site-footer__nav a:hover { color: var(--c-or-clair); }
.site-footer__nav a[data-pdf]::after {
  content: "PDF";
  font-family: var(--font-condense);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--c-nuit);
  background: var(--grad-or);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  line-height: 1.4;
}
.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--c-texte-doux);
}
.site-footer__trust span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.site-footer__trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-or);
  box-shadow: 0 0 8px rgba(233, 196, 106, .8);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--c-texte-doux);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: var(--c-texte-doux); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bottom a:hover { color: var(--c-or-clair); }

/* ---------------------------------------------------------------------
   §10bis — Version noble (item-017)
   Cartouche « Au profit de » + logo VLC sur plaque neutre · réseaux
   sociaux · « Powered by GoTombola ». Le logo « Vaincre le Cancer »
   reste posé sur une plaque SOMBRE NEUTRE (jamais sur violet saturé).
   --------------------------------------------------------------------- */
.site-footer__cause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  /* Plaque sombre neutre — isole le logo VLC du fond violet du footer */
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.92), rgba(4, 7, 18, 0.92));
}
.site-footer__cause-label {
  font-family: var(--font-condense);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--c-texte-doux);
}
/* Logo VLC agrandi pour le footer — hérite de .vlc, plaque neutre claire */
.vlc--footer {
  padding: 12px 20px;
  background: #ffffff;
  border-color: rgba(0, 159, 227, 0.45);
}
.vlc--footer .vlc__logo { height: 42px; }
.site-footer__cause-note {
  flex: 1 1 22ch;
  min-width: 22ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-texte-doux);
}
.site-footer__cause-note b { color: var(--color-text); font-weight: 700; }

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}
.site-footer__social-label {
  font-family: var(--font-condense);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  color: var(--c-or-clair);
}
.site-footer__social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.site-footer__social-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  color: var(--color-text);
  font-size: 12px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.site-footer__social-list a:hover {
  color: var(--c-or-clair);
  border-color: var(--color-border-or);
  background: rgba(233, 196, 106, 0.06);
}
.site-footer__social-list svg { flex: none; }

.site-footer__powered {
  color: var(--c-texte-doux);
  font-size: 12px;
}
.site-footer__powered a { color: var(--c-texte-doux); text-decoration: none; }
.site-footer__powered a b {
  color: var(--color-text);
  font-weight: 700;
  background: var(--grad-or-leaf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer__powered a:hover b { filter: brightness(1.15); }

@media (max-width: 560px) {
  .site-footer__cause { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   §11 — EFFETS PREMIUM / MICRO-INTERACTIONS (item-018)
   Couche d'effets « premium » chargée en idle et pilotée par JS :
   apparitions au scroll, parallaxe légère, boutons magnétiques et
   explosion de confettis dorés à l'achat.
   Principe clé : on anime uniquement des propriétés INDÉPENDANTES
   (opacity, translate) — jamais transform — afin de se composer avec
   les transform des hovers existants sans les écraser.
   Garde-fous : ces classes ne sont posées que par le JS (aucun contenu
   n'est masqué sans JS) ; neutralisées par prefers-reduced-motion et par
   le widget d'accessibilité (html.a11y-no-motion) ; ambiant désactivé au
   pointeur tactile / petit écran (voir script item-018).
   ===================================================================== */

/* Apparitions au scroll : fondu + montée. Armé par JS (.fx-reveal), révélé
   par IntersectionObserver (.is-in). Sans JS → rien n'est masqué. */
.fx-reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity var(--t-motion-2) var(--ease-signature),
    translate var(--t-motion-3) var(--ease-signature);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-reveal.is-in { opacity: 1; translate: 0 0; }

/* --- Reveal des GRANDS TITRES ligne par ligne (« lever de rideau ») ---
   Extension du même système : le JS scinde h1/h2 en lignes .fx-line et
   révèle chacune par un masque clip-path décalé (~80 ms/ligne), sur la
   courbe signature. Aucun markup masqué sans JS (le split n'a lieu qu'au
   chargement, desktop + pointeur précis + mouvement autorisé). */
.fx-reveal--lines { opacity: 1; translate: none; transition: none; }
.fx-lines { display: block; }
.fx-line  { display: block; }
.fx-line__in {
  display: inline-block;
  /* `will-change` RETIRÉ (perf) : il promouvait EN PERMANENCE chaque ligne de
     titre en couche GPU (clip-path inclus), alourdissant le scroll. Le reveal
     one-shot reste fluide sans lui. */
  transform: translateY(0.82em);
  /* masque bas → haut ; marges négatives pour ne jamais rogner
     ascendantes/descendantes ni le halo doré des .gold-leaf */
  clip-path: inset(-14% -18% 108% -18%);
  opacity: 0;
  transition:
    transform var(--t-motion-2) var(--ease-signature),
    clip-path var(--t-motion-2) var(--ease-signature),
    opacity   var(--t-motion-1) var(--ease-signature);
  transition-delay: calc(var(--ln, 0) * 80ms);
}
.fx-reveal--lines.is-in .fx-line__in {
  transform: none;
  clip-path: inset(-14% -18% -14% -18%);
  opacity: 1;
}

/* Parallaxe légère : décor du hero déplacé par JS via --fx-py. */
.fx-parallax { translate: 0 var(--fx-py, 0px); will-change: translate; }

/* --- Parallaxe MÉDIAS — RETIRÉE (perf, req 2026-07-04) -------------------
   L'ancienne dérive scroll-driven (`animation-timeline: view()` + `scale: 1.1`)
   promouvait CHAQUE visuel de lot/ambassadeur en couche « composited » remise à
   jour à chaque frame de scroll ; combinée au grain global (retiré §19) et au
   grain par carte, elle re-compositait tout l'écran au scroll → lag majeur,
   surtout sur /lots (~25 images). Les images sont désormais statiques.
   Le flottement `art-float` de la galerie (règle de base §9) est conservé ; on
   garde uniquement sa neutralisation par le widget d'accessibilité. */
html.a11y-no-motion .gallery__img { animation: none; }

/* Boutons magnétiques : le curseur attire légèrement le CTA. Le translate
   indépendant se compose avec le transform:translateY(-3px) du :hover. On
   reprend la transition d'origine de .btn en y ajoutant « translate ». */
.fx-magnetic {
  translate: var(--fx-mx, 0px) var(--fx-my, 0px);
  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    filter var(--t-fast),
    translate 0.28s var(--ease-signature);
}

/* Calque de confettis dorés : plein écran, non interactif, au-dessus de tout. */
.fx-confetti-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 2147483000;
}

/* Ceinture + bretelles : si l'utilisateur demande moins d'animations, on
   annule aussi les états d'effet côté CSS (le JS ne les arme déjà pas). */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; translate: 0 0; transition: none; }
  .fx-magnetic, .fx-parallax { translate: 0 0; }
  .fx-line__in { transform: none; clip-path: none; opacity: 1; transition: none; }
}
html.a11y-no-motion .fx-reveal { opacity: 1; translate: 0 0; }
html.a11y-no-motion .fx-magnetic,
html.a11y-no-motion .fx-parallax { translate: 0 0; }
html.a11y-no-motion .fx-line__in {
  transform: none; clip-path: none; opacity: 1; transition: none;
}

/* =====================================================================
   12. VUE D'ATTENTE — compte à rebours plein écran « premium » (item-001)
   Fond scénique or & violet cohérent avec .stage / .beam / .dust.
   Affichée uniquement sous <html class="tp-countdown"> (bascule critique
   inlinée dans le <head> pour un rendu sans flash). Le contenu du site est
   masqué en parallèle. Inspirée de tombola-arsla.org / tombola-lataniere.org.
   ===================================================================== */
#tp-countdown {
  position: fixed;
  inset: 0;
  z-index: 2147482000;      /* au-dessus de tout le site, sous les confettis */
  /* display piloté par la bascule critique (#head) : none / flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: clamp(20px, 5vw, 56px) var(--sp-5, 20px);
  text-align: center;
  isolation: isolate;
}

/* Voile scénique supplémentaire pour asseoir le contraste du texte. */
#tp-countdown::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(11, 6, 32, 0.72) 100%);
}

/* Poussière d'or CSS (deux nappes en parallaxe lente, purement décoratives). */
.tp-cd__dust {
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(2px 2px at 18% 72%, rgba(247, 227, 161, 0.55), transparent 60%),
    radial-gradient(2px 2px at 76% 40%, rgba(233, 196, 106, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 22%, rgba(139, 92, 246, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 82%, rgba(0, 159, 227, 0.42), transparent 60%),
    radial-gradient(2px 2px at 88% 66%, rgba(247, 227, 161, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 48%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(2px 2px at 9% 30%, rgba(233, 196, 106, 0.35), transparent 60%);
  animation: tp-cd-drift 22s linear infinite;
}
.tp-cd__dust--2 {
  inset: 0 -10% -10% -10%;
  opacity: 0.7;
  filter: blur(0.4px);
  animation-duration: 34s;
  animation-direction: reverse;
}
@keyframes tp-cd-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Colonne de contenu */
#tp-countdown .tp-cd__inner {
  position: relative;
  z-index: 5;
  gap: clamp(14px, 2.4vw, 26px);
  max-width: 900px;
  /* Le stack est un flex-column : sans cette règle, ses enfants sont étirés
     sur toute la largeur (align-items: stretch par défaut). Les éléments
     inline-flex (badge à ampoules, .tp-cd__foot) se retrouvaient alors
     étalés pleine largeur avec leur contenu calé à gauche. On les recentre. */
  align-items: center;
  text-align: center;
}

.tp-cd__eyebrow {
  margin: 0;
  font-family: var(--font-condense);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-or-clair);
}

.tp-cd__title {
  margin: 0;
  font-size: clamp(36px, 7vw, 84px);
  line-height: var(--lh-tight);
}

.tp-cd__lead {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--c-texte);
}

/* Horloge Jours · Heures · Minutes · Secondes */
.tp-cd__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 2vw, 20px);
  margin-top: clamp(6px, 1.5vw, 14px);
  flex-wrap: nowrap;
}
.tp-cd__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: clamp(64px, 15vw, 128px);
  padding: clamp(12px, 2vw, 22px) clamp(8px, 1.4vw, 16px);
  border-radius: var(--r-lg, 18px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 6, 32, 0.55);
  border: 1px solid var(--color-border-or);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 34px -18px rgba(233, 196, 106, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tp-cd__num {
  font-family: var(--font-enseigne);
  font-size: clamp(34px, 7.5vw, 72px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  color: var(--c-blanc);
  background: var(--grad-or-leaf);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 16px rgba(233, 196, 106, 0.4));
  animation: gold-sheen 6s linear infinite;
  /* Charnière haute : le chiffre pivote depuis son bord supérieur, comme
     le volet d'une horloge à palettes. */
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}
.tp-cd__lbl {
  font-family: var(--font-condense);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tp-cd__sep {
  align-self: center;
  width: 8px;
  height: 8px;
  margin-top: clamp(-14px, -1.6vw, -6px);
  border-radius: 50%;
  background: var(--c-or-clair);
  box-shadow: 0 0 12px var(--c-or-clair);
  position: relative;
}
.tp-cd__sep::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
}

/* Bascule type « flip-clock » à chaque changement de valeur : le nouveau
   chiffre retombe depuis le haut (charnière + perspective 3D), franchit
   l'horizontale puis se stabilise avec un léger rebond — désactivée si
   reduced-motion. */
.tp-cd__num.is-flip {
  animation:
    gold-sheen 6s linear infinite,
    tp-cd-flip 0.6s cubic-bezier(0.2, 0.72, 0.28, 1);
}
@keyframes tp-cd-flip {
  0%   { transform: perspective(360px) rotateX(-90deg); opacity: 0; }
  40%  { opacity: 1; }
  70%  { transform: perspective(360px) rotateX(11deg); opacity: 1; }
  86%  { transform: perspective(360px) rotateX(-4deg); }
  100% { transform: perspective(360px) rotateX(0deg); opacity: 1; }
}

.tp-cd__foot {
  margin: clamp(8px, 1.6vw, 16px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-condense);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.tp-cd__foot time { color: var(--c-or-clair); }
.tp-cd__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-magenta);
  box-shadow: 0 0 0 0 rgba(255, 79, 163, 0.6);
  animation: tp-cd-pulse 2s ease-out infinite;
}
@keyframes tp-cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 79, 163, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 79, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 79, 163, 0); }
}

/* Organisateur (sous l'horloge) : plaque claire + mention discrète */
.tp-cd__org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tp-cd__org .org-plaque img { height: 40px; }
.tp-cd__org-mention {
  margin: 0;
  font-family: var(--font-condense);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.tp-cd__org-mention b { color: var(--c-or-clair); font-weight: 600; }

@media (max-width: 480px) {
  .tp-cd__clock { gap: 6px; }
  .tp-cd__sep { display: none; }
  .tp-cd__unit { min-width: 0; flex: 1 1 22%; }
}

/* Respect strict de prefers-reduced-motion : on fige toutes les animations
   de la vue d'attente (les chiffres restent lisibles et se mettent à jour). */
@media (prefers-reduced-motion: reduce) {
  .tp-cd__dust,
  .tp-cd__num,
  .tp-cd__num.is-flip,
  .tp-cd__dot { animation: none; }
  #tp-countdown .beam { animation: none; }
}
html.a11y-no-motion .tp-cd__dust,
html.a11y-no-motion .tp-cd__num,
html.a11y-no-motion .tp-cd__dot { animation: none; }

/* =====================================================================
   13. VUE « dn2 » — TOMBOLA TERMINÉE : CTA de participation désactivés
   + tooltip premium (item-002, request-2026-07-03-2213)
   Affichée sous <html class="tp-dn2"> (posé très tôt par le contrôleur en
   <head> → l'état « désactivé » est peint dès le premier rendu, sans flash).
   Le JS de fin de <body> pose .tp-disabled + aria-disabled sur chaque cible,
   neutralise l'ouverture du tunnel et pilote un tooltip flottant partagé
   (#tp-dn2-tooltip, appendu au <body> pour n'être jamais rogné).
   ===================================================================== */

/* --- État désactivé : atténuation, désaturation, curseur « interdit » --- */
html.tp-dn2 .tp-disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
  filter: grayscale(0.55) saturate(0.85);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
/* On coupe toute réactivité au survol / focus : lévitation, tilt (transform
   inline posé en JS), halos. Le CTA « répond » désormais uniquement au tooltip. */
html.tp-dn2 .tp-disabled,
html.tp-dn2 .tp-disabled:hover,
html.tp-dn2 .tp-disabled:focus,
html.tp-dn2 .tp-disabled:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}
/* Bouton or désactivé : on éteint le balayage lumineux (sheen). */
html.tp-dn2 .btn--or.tp-disabled::after { animation: none; opacity: 0; }
/* Carte de lot désactivée : on fige le balayage de lumière et l'arrow du CTA. */
html.tp-dn2 .lot-card.tp-disabled .lot-card__shine { opacity: 0 !important; }
html.tp-dn2 .lot-card.tp-disabled:hover .lot-card__arrow { transform: none !important; }
/* Focus toujours visible au clavier (l'anneau signale la cible « informative »). */
html.tp-dn2 .tp-disabled:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* --- Tooltip flottant partagé (premium, cohérent avec le thème) --- */
#tp-dn2-tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483000;                 /* au-dessus de tout le site */
  max-width: min(320px, 88vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  font-family: var(--font-corps);
  font-size: 13.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--c-blanc);
  text-align: left;
  background:
    linear-gradient(180deg, rgba(30, 15, 61, 0.98), rgba(11, 6, 32, 0.98));
  border: 1px solid var(--color-border-or);
  border-radius: 13px;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(233, 196, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;                /* purement informatif */
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: transform, opacity;
}
#tp-dn2-tooltip.is-on { opacity: 1; transform: translateY(0) scale(1); }

#tp-dn2-tooltip .tp-tip__ico {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 900;
  color: var(--c-nuit);
  background: var(--grad-or);
  box-shadow: 0 0 12px rgba(233, 196, 106, 0.5);
}
#tp-dn2-tooltip .tp-tip__txt { display: block; }
#tp-dn2-tooltip .tp-tip__txt b {
  color: var(--c-or-clair);
  font-weight: 800;
}

/* Flèche : carré pivoté, deux bords masqués selon la position au-dessus/dessous. */
#tp-dn2-tooltip::after {
  content: "";
  position: absolute;
  left: var(--tp-arrow-x, 50%);
  width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(11, 6, 32, 0.98);
  border: 1px solid var(--color-border-or);
}
#tp-dn2-tooltip[data-pos="above"]::after {
  bottom: -7px;
  border-top: 0; border-left: 0;       /* pointe vers le bas */
}
#tp-dn2-tooltip[data-pos="below"]::after {
  top: -7px;
  border-bottom: 0; border-right: 0;    /* pointe vers le haut */
}

/* Respect du « réduire les animations » (média + widget d'accessibilité). */
@media (prefers-reduced-motion: reduce) {
  html.tp-dn2 .tp-disabled { transition: none; }
  #tp-dn2-tooltip { transition: none; transform: none; }
  #tp-dn2-tooltip.is-on { transform: none; }
}
html.a11y-no-motion #tp-dn2-tooltip { transition: none; }

/* =====================================================================
   14. VUE « dn3 » — TIRAGE RÉALISÉ : modale premium + accès /results
   (item-003, request-2026-07-03-2213)
   Affichée sous <html class="tp-dn3"> (posé très tôt par le contrôleur en
   <head> → l'affichage de la modale est peint dès le premier rendu, sans
   flash). La CSS critique inline du <head> pilote display/scroll-lock ;
   ce bloc porte l'habillage. Le JS de fin de <body> gère le piège de focus,
   la fermeture ESC / overlay / bouton (ajout de .tp-dn3-off sur <html>).
   ===================================================================== */

.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;                 /* au-dessus de tout le contenu de page */
  place-items: center;           /* grid : centre le panneau */
  padding: var(--sp-5);
}

/* Overlay : voile nuit + flou léger de l'arrière-plan. */
.tp-modal__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(124, 58, 237, 0.34), transparent 60%),
    rgba(6, 4, 18, 0.78);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  animation: tp-modal-fade 0.4s ease both;
}

/* Panneau : verre dépoli nuit, filet or, halo de scène. */
.tp-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100dvh - var(--sp-7));
  overflow: auto;
  text-align: center;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 44px) clamp(24px, 3.4vw, 40px);
  border-radius: var(--r-xl);
  border: 1px solid var(--color-border-or);
  background:
    linear-gradient(180deg, rgba(30, 18, 58, 0.96), rgba(14, 9, 32, 0.98));
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 60px rgba(233, 196, 106, 0.14) inset;
  animation: tp-modal-rise 0.5s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}
/* Filet or intérieur discret. */
.tp-modal__panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: calc(var(--r-xl) - 7px);
  border: 1px solid rgba(233, 196, 106, 0.22);
  pointer-events: none;
}
/* Halo doré rasant en haut du panneau. */
.tp-modal__glow {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 62%; height: 3px;
  border-radius: var(--r-pill);
  background: var(--grad-or);
  box-shadow: 0 0 26px 3px rgba(233, 196, 106, 0.55);
  pointer-events: none;
}

/* Sceau / médaille (icône trophée). */
.tp-modal__seal {
  display: inline-grid;
  place-items: center;
  width: 74px; height: 74px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  color: #2a1c02;
  background: var(--grad-or);
  box-shadow:
    var(--glow-or),
    0 0 0 6px rgba(233, 196, 106, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.tp-modal__eyebrow {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-or-clair);
}
.tp-modal__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-couture);
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(28px, 4.4vw, 42px);
  color: #fff;
}
.tp-modal__lead {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--color-muted);
  font-size: var(--fs-body);
}

/* Actions : CTA or (résultats) + bouton fantôme (parcourir le site). */
.tp-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}
.tp-modal__cta svg { transition: transform var(--t-fast); }
.tp-modal__cta:hover svg { transform: translateX(3px); }

.tp-modal__foot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  font-family: var(--font-condense);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tp-modal__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-or);
  box-shadow: 0 0 0 4px rgba(233, 196, 106, 0.16);
}

/* Bouton de fermeture (croix) — pastille dorée en coin. */
.tp-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  cursor: pointer;
  color: var(--c-or-clair);
  border-radius: 50%;
  border: 1px solid var(--color-border-or);
  background: rgba(255, 255, 255, 0.05);
  transition: color var(--t-fast), background var(--t-fast),
    border-color var(--t-fast), transform var(--t-fast);
}
.tp-modal__close:hover {
  color: #231703;
  background: var(--grad-or);
  border-color: transparent;
  transform: rotate(90deg);
}
.tp-modal__close:focus-visible,
.tp-modal__cta:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

@keyframes tp-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tp-modal-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Respect du « réduire les animations » (média + widget d'accessibilité). */
@media (prefers-reduced-motion: reduce) {
  .tp-modal__overlay,
  .tp-modal__panel { animation: none; }
  .tp-modal__close:hover { transform: none; }
  .tp-modal__cta:hover svg { transform: none; }
}
html.a11y-no-motion .tp-modal__overlay,
html.a11y-no-motion .tp-modal__panel { animation: none; }

/* =====================================================================
   §15 — PAGE RÉSULTATS /results (request-2026-07-03-2213, item-004)
   Liste de TOUS les lots avec, pour chacun, un gagnant « Non disponible »
   et un numéro de ticket « ? » (placeholders en attendant le tirage réel
   constaté par huissier). Reprend la charte (nuit aubergine, filet or,
   voile photographique des cartes de lot).
   ===================================================================== */
.results { position: relative; }

.results__head { margin-bottom: var(--sp-6); }

/* Bandeau d'information : tirage à venir, résultats en attente. */
.results__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 780px;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.09), rgba(233, 196, 106, 0.025));
  border: 1px solid var(--color-border-or);
  border-radius: 18px;
  box-shadow: 0 18px 46px -30px rgba(233, 196, 106, 0.55);
}
.results__notice-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--c-or-clair);
  background: rgba(233, 196, 106, 0.12);
  border: 1px solid var(--color-border-or);
}
.results__notice-txt {
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.55;
}
.results__notice-txt b { color: var(--c-or-clair); }

/* Liste des résultats : une ligne par lot. */
.result-list {
  display: grid;
  gap: 14px;
  margin-top: var(--sp-5);
}

.result-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(160px, 220px) 108px;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px 18px 12px 12px;
  background: linear-gradient(180deg, var(--c-nuit-2), var(--c-nuit));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.result-row:hover {
  border-color: var(--color-border-or);
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -34px rgba(233, 196, 106, 0.6);
}
.result-row--art { border-color: var(--color-border-or); }

/* Vignette du lot : voile photographique commun + pastille LOT NN. */
.result-row__media {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--c-nuit-3);
}
.result-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.result-row__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(11, 6, 32, 0) 40%, rgba(11, 6, 32, 0.62) 100%);
}
.result-row__badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--c-or-clair);
  background: rgba(11, 6, 32, 0.72);
  border: 1px solid var(--color-border-or);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
}

/* Bloc central : catégorie, nom du lot, valeur. */
.result-row__info { min-width: 0; }
.result-row__cat {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.result-row__name {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--color-heading);
}
.result-row__value {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--c-or);
}

/* Colonnes gagnant / ticket : libellé + valeur placeholder. */
.result-row__winner,
.result-row__ticket {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-row__ticket { text-align: center; }
.result-row__label {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.result-row__pending {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--color-border);
}
.result-row__pending::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-or);
  box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.18);
  animation: results-pulse 2.4s ease-in-out infinite;
}
.result-row__tnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 12px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--c-nuit);
  background: var(--grad-or);
  border: 1px solid var(--color-border-or);
  box-shadow: 0 8px 22px -12px rgba(233, 196, 106, 0.75);
}

.results__foot { margin-top: var(--sp-6); font-size: 0.86rem; }

@keyframes results-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(233, 196, 106, 0.05); }
}

/* --- Responsive : passage en pile sous 760px --- */
@media (max-width: 760px) {
  .result-row {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "media info"
      "winner ticket";
    gap: 12px var(--sp-3);
  }
  .result-row__media { width: 64px; height: 64px; grid-area: media; }
  .result-row__info { grid-area: info; }
  .result-row__winner {
    grid-area: winner;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }
  .result-row__ticket {
    grid-area: ticket;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }
  .result-row__tnum { width: 38px; height: 38px; font-size: 1.15rem; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .result-row { transition: none; }
  .result-row:hover { transform: none; }
  .result-row__pending::before { animation: none; }
}
html.a11y-no-motion .result-row__pending::before { animation: none; }

/* =====================================================================
   §16 — EFFETS PREMIUM · TITRES & BOUTONS (item-006, request-2026-07-03-2213)
   Couche additive, mutualisée : rehausse les grands titres « feuille d'or »
   (.gold-leaf) et TOUS les boutons (.btn / .btn--or / .btn--ghost) d'un
   halo & d'un balayage lumineux « premium », cohérents avec l'identité
   or & violet. Purement CSS (aucun JS, aucun markup à changer) : ces
   règles se composent avec les effets existants sans les écraser.
   Lisibilité & perf préservées ; prefers-reduced-motion + widget
   d'accessibilité (html.a11y-no-motion) respectés en fin de section.
   ===================================================================== */

/* --- Titres feuille d'or : on ajoute une pulsation douce du halo doré
   au sheen déjà en place (le dégradé/animation d'origine sont conservés,
   seule la propriété `animation` est enrichie d'un 2e calque). --- */
.gold-leaf {
  animation:
    gold-sheen 5.5s linear infinite,
    gold-leaf-glow 4.5s ease-in-out infinite;
}
@keyframes gold-leaf-glow {
  0%, 100% { filter: drop-shadow(0 2px 16px rgba(233, 196, 106, 0.38)); }
  50%      { filter: drop-shadow(0 3px 26px rgba(247, 227, 161, 0.62)); }
}

/* --- Balayage lumineux partagé sur TOUS les boutons ---------------- *
 * Un glint diagonal traverse le bouton au survol / focus clavier.
 * Posé en ::before (le sheen constant de .btn--or reste en ::after),
 * sous le libellé, non interactif → n'altère jamais la lisibilité. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* au-dessus du fond du bouton, sous le libellé */
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 180% 0;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.btn:hover::before,
.btn:focus-visible::before {
  opacity: 1;
  animation: btn-glint 0.9s var(--ease-out);
}
@keyframes btn-glint {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* CTA prestige (or) : halo doré légèrement respirant au repos pour
   « appeler l'œil » sans agiter la page ; le survol reste maître. */
.btn--or {
  animation: btn-or-breathe 4.8s ease-in-out infinite;
}
.btn--or:hover,
.btn--or:focus-visible { animation: none; }
@keyframes btn-or-breathe {
  0%, 100% { box-shadow: var(--glow-or), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }
  50%      { box-shadow: 0 16px 48px rgba(233, 196, 106, 0.6),
                         0 0 0 1px rgba(255, 255, 255, 0.55) inset; }
}

/* Bouton fantôme : le survol gagne un liseré or, une teinte or/violet
   discrète et un halo doux → montée en gamme cohérente. */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: #fff;
  border-color: var(--color-border-or);
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.12), rgba(139, 92, 246, 0.07));
  box-shadow: 0 14px 34px -16px rgba(233, 196, 106, 0.55);
  transform: translateY(-2px);
}

/* --- Cohérence avec la vue « dn2 » : les CTA désactivés ne brillent
   pas (ni respiration, ni glint au survol) ; ils ne « répondent » qu'au
   tooltip (cf. §13). --- */
html.tp-dn2 .btn--or.tp-disabled { animation: none; }
html.tp-dn2 .tp-disabled:hover::before,
html.tp-dn2 .tp-disabled:focus-visible::before { animation: none; opacity: 0; }

/* --- Respect des préférences « moins d'animation » ---------------- */
@media (prefers-reduced-motion: reduce) {
  .gold-leaf { animation: none; }
  .btn--or { animation: none; }
  .btn:hover::before,
  .btn:focus-visible::before { animation: none; opacity: 0; }
}
html.a11y-no-motion .gold-leaf { animation: none; }
html.a11y-no-motion .btn--or { animation: none; }
html.a11y-no-motion .btn:hover::before,
html.a11y-no-motion .btn:focus-visible::before { animation: none; opacity: 0; }

/* ---------------------------------------------------------------------
   17. TRAÎNÉE D'ÉTOILES DERRIÈRE LE CURSEUR (item-003 / req-2257)
   Effet purement décoratif rendu sur <canvas> par assets/cursor-stars.js.
   Le canvas couvre tout le viewport, ne capte AUCUN évènement pointeur
   et reste au-dessus du contenu sans jamais le masquer.
   --------------------------------------------------------------------- */
canvas.cursor-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483000;         /* au-dessus du contenu, sous les overlays système */
  pointer-events: none;        /* ne gêne ni clic, ni survol, ni sélection */
  background: transparent;
  /* mix-blend-mode RETIRÉ (perf, req 2026-07-04) : une couche fixe plein écran
     en blend forçait un re-compositing de TOUT le viewport à chaque frame de
     scroll → gros lag desktop. Sur fond nuit, les étoiles claires restent bien
     visibles en compositing normal (source-over). */
  contain: strict;
}

/* Garde-fous : jamais de traînée sur tactile / pointeur grossier, petit
   écran, préférence « moins d'animation » ou widget d'accessibilité.
   (Le script n'installe déjà pas le canvas dans ces cas — double sécurité
   au cas où le canvas serait présent.) */
@media (prefers-reduced-motion: reduce) {
  canvas.cursor-stars { display: none !important; }
}
@media (hover: none), (pointer: coarse), (max-width: 819px) {
  canvas.cursor-stars { display: none !important; }
}
html.a11y-no-motion canvas.cursor-stars { display: none !important; }

/* ---------------------------------------------------------------------
   18. GRAND FINAL (request-2026-07-04-0033, item-003)
   Dernier acte plein écran : fond nuit + halo violet (.stage), nom-enseigne
   géant défilant en marquee horizontal lent (contenu dupliqué → boucle
   translateX(-50 %) sans couture), baseline solennelle, LE bouton or seul,
   rappel confiance sur une ligne. Le marquee est purement décoratif
   (aria-hidden) ; le nom accessible est porté une seule fois par le titre.
   Tout mouvement neutralisé sous prefers-reduced-motion ET html.a11y-no-motion
   (nom statique, centré). La section vit dans le flux principal : masquée en
   dn0 via le sélecteur critique en <head>, CTA désactivé en dn2/dn3 par le
   mécanisme .tp-disabled partagé.
   --------------------------------------------------------------------- */
.final {
  min-height: 96svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--section-y);
}
/* Halo violet supplémentaire, centré, sous le contenu (.stage > * = z 3). */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(62% 62% at 50% 44%, rgba(124, 58, 237, 0.32), transparent 70%);
}
.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* --- Nom-enseigne en marquee --- */
.final__title {
  margin: 0;
  width: 100%;
  line-height: var(--lh-tight);
}
.final__marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.final__track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: final-marquee 34s linear infinite;
}
.final__word {
  font-family: var(--font-enseigne);
  font-size: clamp(3.25rem, 15vw, 15rem);
  line-height: 0.9;
  letter-spacing: var(--ls-enseigne);
  text-transform: uppercase;
  padding-inline: clamp(14px, 2.4vw, 44px);
  background: var(--grad-or-leaf);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.final__star {
  font-family: var(--font-enseigne);
  font-size: clamp(1.4rem, 5vw, 4.5rem);
  color: var(--c-violet);
  opacity: 0.7;
  align-self: center;
}
@keyframes final-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Baseline, CTA, rappel confiance --- */
.final__baseline {
  margin-top: clamp(var(--sp-5), 3.5vw, var(--sp-7));
  max-width: var(--maxw-prose);
  font-family: var(--font-couture);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--c-blanc);
}
.final__cta { margin-top: var(--sp-7); }
.final__btn {
  font-size: var(--fs-body);
  padding: var(--sp-4) var(--sp-8);
}
.final__trust {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  font-family: var(--font-corps);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}
.final__trust-item { display: inline-flex; align-items: center; gap: 6px; }
.final__trust-dot { color: var(--c-violet); }

@media (max-width: 560px) {
  .final { min-height: 90svh; }
  .final__word { padding-inline: 12px; }
}

/* Reduced-motion / widget a11y : le nom devient statique, centré (une seule
   occurrence visible), plus de défilement ni de masque de fondu latéral. */
@media (prefers-reduced-motion: reduce) {
  .final__marquee {
    justify-content: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .final__track { animation: none; }
  .final__track .final__word:not(:first-child),
  .final__track .final__star { display: none; }
}
html.a11y-no-motion .final__marquee {
  justify-content: center;
  -webkit-mask-image: none;
          mask-image: none;
}
html.a11y-no-motion .final__track { animation: none; }
html.a11y-no-motion .final__track .final__word:not(:first-child),
html.a11y-no-motion .final__track .final__star { display: none; }

/* =====================================================================
   19. ÉTALONNAGE — grain cinéma global + vignettage doux (item-004)
   Voile de grain unique + vignettes de section pour un rendu « étalonné ».
   Objectif : casser le banding des halos violets et unifier le rendu.
   ===================================================================== */

/* Voile de grain plein écran — RETIRÉ (perf, req 2026-07-04).
   L'ancien `body::after` fixe, plein écran, en `mix-blend-mode: overlay`
   forçait le compositeur à re-blender TOUT le viewport à chaque frame de scroll
   ou d'animation (curseur étoilé, marquee du grand final, count-ups…) → lag
   majeur sur mobile comme desktop. Le vignettage de section ci-dessous
   (dégradés statiques, sans blend) suffit au rendu « étalonné » sans coût de
   compositing. Le grain par carte (`.lot-card__grain`/`.amb-card__grain`),
   statique, est conservé. */

/* Vignettage : radial-gradient TRÈS doux, centre transparent, coins assombris,
   uniquement sur les sections à fond plein. Pas de vignette par carte.
   Non interactif, placé au-dessus des halos décoratifs mais SOUS le contenu
   (texte), donc jamais de perte de lisibilité. Le grain global ci-dessus
   dithère ce dégradé → pas de banding. */
.stage,
.spotlight,
.cause { position: relative; }

.stage::after,
.spotlight::after,
.cause::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%,
    transparent 55%,
    rgba(6, 3, 18, 0.16) 82%,
    rgba(6, 3, 18, 0.30) 100%);
}
/* .stage : halos/faisceaux/sol = z 1, contenu = z 3 → vignette en z 2. */
.stage::after    { z-index: 2; }
/* .spotlight : glow = z 0, .container = z 1 → vignette en z 0 (au-dessus du
   glow par ordre de source, sous le contenu). */
.spotlight::after { z-index: 0; }
/* .cause : fond porté par l'élément, contenu en flux → vignette en z 0 et on
   remonte le contenu au-dessus. */
.cause::after     { z-index: 0; }
.cause__inner     { position: relative; z-index: 1; }