/* =====================================================================
   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 bleutée (fond ≈ 80 %) ----
     Nuit dérivée du bleu secondaire Solidarité Pancréas (#003A8C) :
     même famille chromatique (teinte ≈ 218°), luminance abaissée pour
     rester un fond de scène. Remplace l'ancienne nuit aubergine. */
  --c-nuit:        #04102A;   /* fond principal              */
  --c-nuit-2:      #071A3C;   /* fond dégradé / élévation     */
  --c-nuit-3:      #0A2350;   /* surfaces surélevées          */
  --c-bg:          var(--c-nuit);

  /* ---- Bleu Solidarité Pancréas : couleur de la cause ----
     Charte de l'association (brandbook + sources/palette.css). */
  --c-bleu-sp:     #0049AE;   /* bleu principal de la marque  */
  --c-bleu-sp-2:   #003A8C;   /* bleu secondaire de la marque */
  --c-azur:        #68A6FF;   /* éclairci : seul ton lisible en texte sur nuit (AA) */
  --c-azur-2:      #1E63D6;   /* ton moyen : filets, dégradés */
  --c-cause:       var(--c-bleu-sp);   /* ruban officiel de la cause   */

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

  /* ---- Orange Solidarité Pancréas : chaleur festive.
     Accordé à l'or champagne (queue chaude des dégradés, survols). ---- */
  --c-orange:      #F8A002;
  --c-orange-2:    #E08A00;

  /* ---- Rouge cœur Solidarité Pancréas : accent ponctuel ---- */
  --c-rouge:       #FE5F52;
  --c-rouge-2:     #E2483C;
  --c-magenta:     var(--c-rouge);   /* alias historique (pastille LIVE, chiffres) */

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

  /* ---- Ambre : étincelles (parcimonie) ---- */
  --c-ambre:       #FF8A3D;

  /* ---- Texte : blanc / gris bleuté (gamme du gris signature #434C60) ---- */
  --c-blanc:       #FFFFFF;
  --c-texte:       #C3CFE4;   /* corps de texte     — 12,1:1 sur nuit */
  --c-texte-doux:  #96A2BB;   /* légendes, mentions —  7,4:1 sur nuit */

  /* ---- 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 ----
     L'or garde la main ; l'orange de la charte n'intervient qu'en queue
     de dégradé (chaleur festive) — tous les arrêts restent ≥ 7:1 avec
     l'encre #231703 des CTA et ≥ 7:1 sur la nuit pour les titres. */
  --grad-or:       linear-gradient(100deg, #E9C46A, #F7E3A1 45%, #F0A81E);
  --grad-or-leaf:  linear-gradient(100deg,
                     #C9A227 0%, #F7E3A1 22%, #FFF7DD 40%,
                     #E9C46A 60%, #E08A00 100%);
  --grad-nuit:     linear-gradient(180deg, #04102A, #071A3C 60%, #04102A);
  --grad-cause:    linear-gradient(180deg, #04102A, #071E45 50%, #04102A);

  /* ---- Halos d'ambiance (projecteurs) ---- */
  --halo-cause:    radial-gradient(1200px 700px at 50% -12%, rgba(0,73,174,.58), transparent 60%);
  --halo-bleu:     radial-gradient(900px 600px at 12% 108%, rgba(0,159,227,.22), transparent 55%);
  --halo-rouge:    radial-gradient(900px 600px at 88% 100%, rgba(254,95,82,.14), 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-cause: 0 0 60px rgba(0, 73, 174, 0.55);
  --glow-bleu:  0 0 16px rgba(0, 159, 227, 0.6);

  /* ---- Verre dépoli (glassmorphism) ---- */
  --glass-bg:     rgba(4, 16, 42, 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(0, 73, 174, 0.6);
}

.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-azur);
}

.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-azur,
.text-violet { color: var(--c-azur); }   /* .text-violet = alias historique */
.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(248, 160, 2, 0.55);
  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-cause),
    var(--halo-bleu),
    var(--halo-rouge),
    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(0,73,174,.16) 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(254,95,82,.18), 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(104, 166, 255, 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;
}

/* Duo « organisateur + association soutenue » (bandeau compte à rebours et
   bloc « Rendez-vous du tirage »).
   ⚠️ L'écart de taille entre les deux plaques est VOLONTAIRE et doit être
   conservé : Vaincre le Cancer, organisateur légal, domine ; Solidarité
   Pancréas, association soutenue, reste visible mais clairement au second
   rang (plaque plus petite, posée après le filet de séparation). */
.org-duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.org-duo__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--c-or-fonce), transparent);
}
/* Plaque secondaire : logotype plus petit, ombre allégée */
.org-plaque--second {
  padding: 9px 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.org-plaque--second img {
  height: 30px;
  max-width: 150px;
}

/* Le duo tient côte à côte jusqu'aux très petits écrans (~245 px de large) ;
   en deçà seulement, il s'empile et le filet bascule à l'horizontale. */
@media (max-width: 360px) {
  .org-duo { flex-direction: column; gap: var(--sp-2); }
  .org-duo__sep {
    width: 48px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-or-fonce), transparent);
  }
}

/* Second rang de la mention : l'association soutenue, jamais organisatrice.
   Ton bleu de marque (--c-azur) pour la distinguer de l'or réservé à
   l'organisateur, corps légèrement réduit → hiérarchie lisible d'un coup d'œil. */
.org-mention__aside {
  display: block;
  margin-top: 4px;
  font-size: 0.94em;
  color: var(--color-muted);
}
.org-mention__aside b {
  color: var(--c-azur);
  font-weight: 600;
}
/* Signature officielle de Solidarité Pancréas, posée en typographie couture. */
.org-mention__slogan {
  display: block;
  margin-top: 3px;
  font-family: var(--font-couture);
  font-style: italic;
  font-weight: 600;
  font-size: 0.96em;
  letter-spacing: 0.01em;
  color: var(--c-or-clair);
  opacity: 0.72;
}

/* Logos du bloc tirage, centrés sur leurs plaques claires */
.draw__logos {
  margin-top: var(--sp-3);
}
.draw__logos .org-plaque {
  padding: 8px 14px;
}
.draw__logos .org-plaque img {
  height: 36px;
}
.draw__logos .org-plaque--second {
  padding: 7px 12px;
}
.draw__logos .org-plaque--second img {
  height: 26px;
  max-width: 130px;
}

/* 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 bleu 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 bleu/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(0, 73, 174, 0.5), 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 bleu/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(0, 73, 174, 0.30), 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(4, 16, 42, 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(4, 16, 42, 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-cause), var(--halo-rouge);
}
.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(0, 73, 174, 0.45), transparent 55%),
    radial-gradient(70% 50% at 50% 116%, rgba(233, 196, 106, 0.20), transparent 60%),
    linear-gradient(180deg, #030B1C 0%, #04102A 55%, #030B1C 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(0, 73, 174, 0.35));
  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: #030B1C; 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 bleu, chiffres count-up (item-007)
   Rupture sobre sur champ bleu Solidarité Pancréas : ancrage émotionnel
   et digne de la cause. La paillette au service de la recherche — pas
   d'effet clinquant, un liseré doré discret, un ruban aux couleurs 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 bleu : rupture nette avec le fond « nuit » alentour. Luminance
     plafonnée (point le plus clair ≈ L 0,038) pour que le texte blanc à
     62 % d'opacité des sources garde ≥ 5,5:1 — l'ancien champ violet
     tombait à 3,6:1 au sommet du halo. */
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(0, 73, 174, 0.42), transparent 62%),
    linear-gradient(180deg, #052256 0%, #072A61 48%, #041C48 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(4, 16, 42, 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 bleu ardoise
   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: #26324B; /* bleu ardoise 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 bleu/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(0, 73, 174, 0.5), 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(0, 73, 174, 0.45), transparent 58%),
    radial-gradient(100% 60% at 50% 118%, rgba(233, 196, 106, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(4, 16, 42, 0.14) 0%, rgba(4, 16, 42, 0.26) 40%, rgba(4, 16, 42, 0.78) 72%, rgba(4, 16, 42, 0.97) 100%);
  box-shadow: inset 0 0 120px 24px rgba(4, 16, 42, 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(4, 16, 42, 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(4, 16, 42, 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(4, 16, 42, 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(0, 73, 174, 0.18), 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(0, 73, 174, 0.14);
  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(0, 73, 174, 0.16), 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-cause), linear-gradient(180deg, #04102A 0%, #020A18 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 bleu 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 bleu 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 & bleu 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(4, 16, 42, 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(104, 166, 255, 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(4, 16, 42, 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(254, 95, 82, 0.6);
  animation: tp-cd-pulse 2s ease-out infinite;
}
@keyframes tp-cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(254, 95, 82, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(254, 95, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(254, 95, 82, 0); }
}

/* Organisateur (sous l'horloge) : plaques claires + mention discrète.
   Le duo est géré par .org-duo (cf. §5) ; ici on ne fixe que les hauteurs
   propres à ce bandeau — 40 px pour l'organisateur, 30 px pour l'association
   soutenue (rapport ≈ 3/4, dominance visuelle voulue et à conserver). */
.tp-cd__org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tp-cd__org .org-plaque img { height: 40px; }
.tp-cd__org .org-plaque--second img { height: 30px; max-width: 150px; }
.tp-cd__org-mention {
  margin: 0;
  font-family: var(--font-condense);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--color-muted);
}
.tp-cd__org-mention b { color: var(--c-or-clair); font-weight: 600; }
/* La mention secondaire garde le corps de texte, pas la graisse or. */
.tp-cd__org-mention .org-mention__aside b { color: var(--c-azur); }

@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(10, 35, 80, 0.98), rgba(4, 16, 42, 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(4, 16, 42, 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(0, 73, 174, 0.45), transparent 60%),
    rgba(2, 9, 22, 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(9, 32, 72, 0.96), rgba(4, 14, 34, 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(0, 73, 174, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(4, 16, 42, 0) 40%, rgba(4, 16, 42, 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(4, 16, 42, 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 & bleu. 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/bleu
   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(104, 166, 255, 0.10));
  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 bleu (.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 bleu 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(0, 73, 174, 0.45), 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-azur);
  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-azur); }

@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 bleus 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(2, 8, 20, 0.16) 82%,
    rgba(2, 8, 20, 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; }

/* =====================================================================
   §20 — BLOC « ASSOCIATION SOLIDARITÉ PANCRÉAS » (req 2026-08-04-1539, item-005)
   Présentation de l'association soutenue par l'opération, posée juste après
   la section « La cause ». Gabarit repris du bandeau de don (§9nonies) :
   panneau sombre à filet discret, deux colonnes (blason / texte) qui
   s'empilent sous 900 px. Aucune animation propre — le bloc hérite du
   reveal générique (.assoc__head est capté par le sélecteur `[class*="__head"]`)
   et du sheen de la feuille d'or.
   Rappel rédactionnel : le vocabulaire du bloc reste « soutenue »,
   « partenaire », « bénéficiaire » ; l'organisateur affiché est Vaincre le
   Cancer (cf. commentaire du markup dans index.html).
   ===================================================================== */
.assoc {
  position: relative;
  border-block-start: 1px solid rgba(233, 196, 106, 0.14);
  background:
    radial-gradient(120% 85% at 22% -12%, rgba(0, 73, 174, 0.20), transparent 62%),
    var(--c-nuit);
}
.assoc__inner { max-width: 74rem; }

.assoc__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  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);
}

/* --- Blason : logo blanc de la marque + signature officielle --- */
.assoc__blason {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(233, 196, 106, 0.22);
  border-radius: var(--r-sm);
  background:
    radial-gradient(95% 70% at 50% 0%, rgba(0, 73, 174, 0.30), transparent 72%),
    rgba(255, 255, 255, 0.03);
}
/* Le logo est un SVG blanc plein : aucune ombre portée (le trait est déjà
   très lisible sur la nuit), on maîtrise seulement sa largeur optique. */
.assoc__logo {
  width: clamp(140px, 17vw, 200px);
  height: auto;
}
.assoc__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}
/* Filet or interrompu par le cœur de la marque (rappel du symbole). */
.assoc__ornement {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 15rem;
}
.assoc__ornement::before,
.assoc__ornement::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.55), transparent);
}
.assoc__heart {
  flex: none;
  width: 13px;
  height: auto;
  color: var(--c-rouge);
}
.assoc__slogan {
  font-family: var(--font-couture);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 0.9vw + 12px, 20px);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--c-or-clair);
}

/* --- Colonne de texte --- */
.assoc__body { justify-content: center; }
.assoc__body > * + * { margin-top: var(--sp-5); }
.assoc__head { gap: var(--sp-3); }
.assoc__head > * + * { margin-top: var(--sp-3); }
.assoc__head h2 { margin: 0; }
.assoc__text {
  margin: 0;
  max-width: 44rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-texte);
}
.assoc__text b { color: #fff; font-weight: 700; }

.assoc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Mention d'organisateur : même grammaire que .trust-note, filet azur pour
   la distinguer des cartouches or (prestige) — c'est une note de statut. */
.assoc__note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-inline-start: 3px solid var(--c-azur-2);
  border-radius: var(--r-sm);
  background: rgba(4, 16, 42, 0.5);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texte-doux);
}
.assoc__note b { color: var(--c-texte); font-weight: 700; }
.assoc__note-ico { flex: none; color: var(--c-azur); font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .assoc__panel { grid-template-columns: 1fr; gap: var(--sp-6); }
  .assoc__blason { max-width: 26rem; margin-inline: auto; }
  .assoc__text { max-width: none; }
}

/* =====================================================================
   §21 — SEMIS DE MARQUE · CŒUR & MAINS (req 2026-08-04-1539, item-008)
   Le symbole Solidarité Pancréas (deux mains ouvertes soutenant un cœur)
   est décliné en MOTIF RÉCURRENT plutôt qu'en logo répété : glyphe en
   ligne à la place des emojis cœur, puces de FAQ, ornements de titre et
   filigranes de fond. L'idée est qu'on retrouve la forme du logo sans
   jamais le lire — un rappel implicite, pas une signature de plus.

   Deux techniques, selon l'usage :
   • `mask` + `background-color` quand le motif doit prendre l'encre du
     contexte (currentColor du CTA or, rouge cœur des puces) ;
   • `background-image` brut quand le filigrane doit garder les couleurs
     natives de la charte (bleu #0049AE / orange #F8A002 des mains,
     rouge #FE5F52 du cœur), très fortement atténuées.

   Accessibilité : tous ces motifs sont soit des pseudo-éléments (jamais
   exposés aux technologies d'assistance), soit des <span> vides marqués
   `aria-hidden="true"` dans le markup. AUCUN n'est animé — il n'y a donc
   rien à neutraliser sous `prefers-reduced-motion` / `html.a11y-no-motion`,
   et le semis reste identique quel que soit le réglage de l'utilisateur.

   Contraste : les filigranes sont posés SOUS le contenu et sous le
   vignettage (§19), à 5–7 % d'opacité sur des fonds sombres — l'écart de
   luminance induit est < 0,5 %, les paires texte/fond validées AA en
   item-002 restent inchangées.
   ===================================================================== */

:root {
  /* Chemins RELATIFS à cette feuille (servie depuis /assets/). */
  --sp-motif-coeur:   url("img/brand/solidarite-pancreas/heart.0886f71c03.svg");
  --sp-motif-mains:   url("img/brand/solidarite-pancreas/hands.fdd25fa68d.svg");
  --sp-motif-symbole: url("img/brand/solidarite-pancreas/icon.ff6d627d09.svg");
}

/* --- 1. Glyphe de marque en ligne -------------------------------------
   Remplace les emojis ❤️/♥ des puces de confiance et du CTA de don : même
   place, même poids visuel, mais la forme exacte du cœur de la charte et
   un rendu identique sur tous les OS (l'emoji système variait du rouge
   plat au dégradé selon la plateforme). Encré en `currentColor`, donc il
   suit la couleur du contexte sans règle supplémentaire.
   Ratio du fichier : 438,8 × 394,94 → 1 / 0,9. */
.sp-glyphe {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 0.9em;
  vertical-align: -0.06em;
  background-color: currentColor;
  -webkit-mask: var(--sp-glyphe-src) center / contain no-repeat;
          mask: var(--sp-glyphe-src) center / contain no-repeat;
}
.sp-glyphe--coeur { --sp-glyphe-src: var(--sp-motif-coeur); }

/* Puce « Au profit de… » du bandeau de confiance du hero. `.trust__ico`
   applique `filter: saturate(.8)` pour assagir les emojis système (⚖ 🔒) :
   inutile ici, le vecteur porte déjà la couleur exacte de la charte. */
.trust__ico.sp-glyphe {
  font-size: 16px;
  color: var(--c-rouge);
  opacity: 1;
  filter: none;
}
/* Même puce dans la ligne de confiance du grand final. */
.final__trust-item .sp-glyphe { color: var(--c-rouge); }
/* CTA « Je fais un don » : le cœur s'encre de l'encre du bouton or
   (#231703) — un cœur rouge sur l'or serait illisible et ferait tache. */
.btn .sp-glyphe { font-size: 1.15em; }

/* --- 2. Puces de la FAQ ------------------------------------------------
   Petit cœur or devant chaque question, qui passe au rouge de la charte
   quand la réponse est ouverte. Posé sur le <span> du libellé (et non sur
   le `summary`, en `space-between`) pour ne pas perturber la répartition
   libellé / marqueur ±. */
.faq-item__q > span:first-child::before {
  content: "";
  display: inline-block;
  width: 0.68em;
  height: 0.61em;
  margin-inline-end: 0.5em;
  vertical-align: 0.02em;
  background-color: var(--c-or);
  opacity: 0.8;
  -webkit-mask: var(--sp-motif-coeur) center / contain no-repeat;
          mask: var(--sp-motif-coeur) center / contain no-repeat;
}
.faq-item[open] .faq-item__q > span:first-child::before {
  background-color: var(--c-rouge);
  opacity: 1;
}

/* --- 3. Ornement de titre / séparateur --------------------------------
   Filet or interrompu par le cœur de la marque. Généralisation de
   l'ornement du blason `.assoc__ornement` (§20), désormais réutilisable
   en clôture de chapeau de section. */
.sp-ornement {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
}
.sp-ornement::before,
.sp-ornement::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.55), transparent);
}
.sp-ornement__coeur {
  flex: none;
  width: 13px;
  height: 12px;
  background-color: var(--c-rouge);
  -webkit-mask: var(--sp-motif-coeur) center / contain no-repeat;
          mask: var(--sp-motif-coeur) center / contain no-repeat;
}

/* --- 4. Filigranes de fond --------------------------------------------
   Le motif est servi en `background-image` d'un pseudo-élément en
   `inset: 0` : les valeurs négatives de `background-position` le font
   « sortir » du cadre, mais c'est le fond qui est rogné par la boîte —
   jamais un débordement de mise en page (pas de scroll horizontal, y
   compris à 320 px).
   Les tailles sont exprimées en `rem`, JAMAIS en pourcentage de la boîte :
   ces sections ont des hauteurs très variables (de 40 à 150 vh selon le
   contenu), un motif dimensionné en % y devenait un aplat géant illisible
   au lieu d'un filigrane. En rem, l'emblème garde partout la même échelle
   et reste lisible comme forme. */
.cause::before,
.trust-sec::before,
.assoc__panel::before,
.final__inner::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* La cause — deux cœurs de tailles inégales, l'un en haut à droite,
   l'autre en bas à gauche : un semis, pas une symétrie. Se glisse sous la
   vignette (`.cause::after`, z 0, postérieure dans l'ordre du document)
   et sous `.cause__inner` (z 1). */
.cause::before {
  inset: 0;
  z-index: 0;
  opacity: 0.07;
  background-image: var(--sp-motif-coeur), var(--sp-motif-coeur);
  background-position: right -3.5rem top 2.5rem, left -1.5rem bottom 2.5rem;
  background-size: auto 17rem, auto 8rem;
}

/* Confiance — les mains, en bas à gauche : le geste qui soutient, sous
   les cartes de garanties (le gabarit laisse la dernière rangée
   incomplète, le motif occupe ce vide plutôt que de passer sous du texte). */
.trust-sec::before {
  inset: 0;
  z-index: 0;
  opacity: 0.06;
  background-image: var(--sp-motif-mains);
  background-position: left 2rem bottom 5rem;
  background-size: auto 15rem;
}
.trust-sec__inner { position: relative; z-index: 1; }

/* Association Solidarité Pancréas — motif « mains » posé DANS le panneau
   (et non sur la section) : le panneau porte son propre fond opaque et
   masquerait un filigrane de section. `overflow: hidden` le rogne au rayon
   du cadre ; blason et corps de texte repassent au-dessus. */
.assoc__panel { position: relative; overflow: hidden; }
.assoc__panel::before {
  inset: 0;
  z-index: 0;
  opacity: 0.07;
  background-image: var(--sp-motif-mains);
  background-position: right -2.5rem center;
  background-size: auto 16rem;
}
.assoc__blason,
.assoc__body { position: relative; z-index: 1; }

/* Grand final — le symbole complet (mains + cœur), centré sous le
   nom-enseigne. `.final__inner` est un `.stage > *` (position: relative,
   z-index 3) : il ouvre donc un contexte d'empilement, et `z-index: -1`
   range le filigrane derrière son propre contenu sans le faire repasser
   sous les halos de la scène. */
.final__inner::before {
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  background-image: var(--sp-motif-symbole);
  background-position: center 62%;
  background-size: auto 24rem;
}

/* Sous 700 px les filigranes latéraux se retrouvent derrière le texte :
   on les réduit et on les affaiblit encore. */
@media (max-width: 700px) {
  .cause::before {
    opacity: 0.05;
    background-position: right -2.5rem top 1.5rem, left -1rem bottom 1.5rem;
    background-size: auto 9rem, auto 4.5rem;
  }
  .trust-sec::before {
    opacity: 0.05;
    background-position: left -1.5rem bottom 2rem;
    background-size: auto 9rem;
  }
  .assoc__panel::before {
    opacity: 0.05;
    background-position: right -2rem top 1.5rem;
    background-size: auto 9rem;
  }
  .final__inner::before { opacity: 0.05; background-size: auto 14rem; }
}