/* =====================================================================
   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 bleu roi (fond ≈ 80 %) ----
     Teinte ≈ 222°, saturation ≈ 85 % : on garde la famille chromatique de
     Solidarité Pancréas mais on remonte franchement la luminance pour un
     fond « pétant » et non plus feutré (demande client 2026-08-04).
     Repères de luminance : L 16 % → 24 % → 32 %. */
  --c-nuit:        #061C4E;   /* fond principal               */
  --c-nuit-2:      #0B2C78;   /* fond dégradé / élévation     */
  --c-nuit-3:      #113C9C;   /* surfaces surélevées          */
  --c-bg:          var(--c-nuit);

  /* ---- Bleu roi : couleur de la cause ----
     Éclairci par rapport au bleu institutionnel #0049AE, trop sombre pour
     porter un fond vif. Le bleu exact de la charte reste gravé dans les
     logos SVG de la marque (`assets/img/brand/`), qu'on ne retouche pas. */
  --c-bleu-sp:     #0A5BE0;   /* bleu roi franc (halos, aplats) */
  --c-bleu-sp-2:   #0044BE;   /* bleu roi profond               */
  --c-azur:        #7FBBFF;   /* bleu clair : seul ton bleu lisible en texte (AA) */
  --c-azur-2:      #2E7BF5;   /* 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-vlc` reste la valeur exacte de la charte VLC. ---- */
  --c-bleu:        #35E2FF;
  --c-bleu-vlc:    #009FE3;

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

  /* ---- Texte : blanc / gris bleuté (gamme du gris signature #434C60) ----
     Remontés vers le blanc (item-002, req 1824) : la cliente jugeait le
     corps de texte trop pâle et trop fin. Les deux tons tiennent AA sur le
     fond le plus clair du site (sommet du halo de cause, #083D9A) :
     8,6:1 pour le corps, 6,5:1 pour les mentions. */
  --c-blanc:       #FFFFFF;
  --c-texte:       #EAF1FC;   /* corps de texte     — 14,4:1 sur nuit */
  --c-texte-doux:  #C4D3EE;   /* légendes, mentions — 10,8: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 ≥ 6,5:1 avec
     l'encre #231703 des CTA et ≥ 6:1 sur la nuit bleu roi pour les titres
     (arrêt le plus sombre : #E08A00, 6,53:1 / 6,08:1). */
  --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, #061C4E, #0B2C78 60%, #061C4E);
  --grad-cause:    linear-gradient(180deg, #061C4E, #0C3184 50%, #061C4E);

  /* ---- Halos d'ambiance (projecteurs) ----
     Alpha du halo de cause abaissé de .58 à .52 : sur la nuit éclaircie, il
     montait sinon à #0841A3 et l'azur y retombait à 4,55:1 (marge nulle). */
  --halo-cause:    radial-gradient(1200px 700px at 50% -12%, rgba(10,91,224,.52), transparent 60%);
  --halo-bleu:     radial-gradient(900px 600px at 12% 108%, rgba(0,159,227,.26), transparent 55%);
  --halo-rouge:    radial-gradient(900px 600px at 88% 100%, rgba(254,95,82,.14), transparent 55%);

  /* ---- Cartouche : socle de lisibilité pour le texte posé sur image ----
     Un texte sur photo n'a aucun contraste garanti : la photo peut être
     claire, sombre ou bariolée. On glisse donc sous le texte un aplat
     nuit semi-opaque qui ramène le fond effectif dans une plage connue.
     À .82 d'opacité, le fond composé est borné par le CAS LE PIRE possible
     — une photo blanc pur, qui donne #33456E. Tous les tons du texte y
     tiennent AA sans exception : corps 8,3:1, mentions 6,3:1, or clair
     7,4:1, or 5,7:1, azur 4,7:1. Aucune photo ne peut faire échouer le
     contraste, quel que soit le visuel que la cliente enverra plus tard. */
  --cartouche-bg:     rgba(6, 28, 78, 0.82);
  --cartouche-blur:   saturate(1.1) blur(8px);

  /* ---- 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) ----
     Remontée d'un cran (item-002, req 1824). 80 % des visiteurs sont sur
     mobile : ce sont les BORNES BASSES des clamp() qui font foi, elles ont
     donc été relevées plus fortement que les bornes hautes.
     Rendu à 390 px de large (iPhone) : eyebrow 13, caption 14,5, corps 17,
     chapeau 20, h3 22, h2 30 — contre 11 / 12 / 15 / 16 / 19 / 26 avant. */
  --fs-eyebrow:  clamp(13px,   0.35vw + 11.6px, 15px);
  --fs-caption:  clamp(14.5px, 0.5vw  + 12.6px, 16px);
  --fs-body:     clamp(17px,   0.55vw + 14.9px, 20px);
  --fs-lead:     clamp(20px,   1.25vw + 15.1px, 27px);
  --fs-h3:       clamp(22px,   1.5vw  + 16.2px, 30px);
  --fs-h2:       clamp(30px,   3.2vw  + 17.5px, 48px);
  --fs-h1:       clamp(40px, 8.4vw, 104px);
  --fs-mega:     clamp(34px, 6vw, 64px);   /* grands chiffres compteurs */

  /* ---- Graisses ----
     Le corps passe de 400 à 500 : la typo était jugée « trop fine ». Manrope
     500 est bien chargé par le <link> Google Fonts des 34 pages (400;500;700;800),
     aucune synthèse de graisse par le navigateur. */
  --fw-corps:      500;
  --fw-corps-fort: 700;

  --lh-tight:    0.94;
  --lh-heading:  1.12;
  --lh-body:     1.65;
  --ls-enseigne: 0.005em;
  /* Interlettrage des labels en capitales. Abaissé de 0.18em à 0.12em :
     en petit corps, un interlettrage large disloque le mot et coûte plus en
     lisibilité qu'il ne rapporte en élégance. */
  --ls-label:    0.12em;
  --ls-label-lg: 0.18em;   /* réservé aux labels ≥ 20px, où l'écart tient */

  /* ---- É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(10, 91, 224, 0.55);
  --glow-bleu:  0 0 16px rgba(0, 159, 227, 0.6);

  /* ---- Verre dépoli (glassmorphism) ---- */
  --glass-bg:     rgba(6, 28, 78, 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);
  font-weight: var(--fw-corps);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--c-nuit);
  overflow-x: hidden;
  /* `-webkit-font-smoothing: antialiased` retiré (item-002) : sur macOS il
     amincit visiblement le texte clair sur fond sombre — exactement le
     défaut signalé (« typo trop fine »). Le lissage par défaut rend un
     gris de bord plus épais, donc plus lisible ici. */
  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(10, 91, 224, 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: var(--ls-label);
  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(10,91,224,.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: var(--ls-label);
  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(127, 187, 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: var(--ls-label); 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: var(--ls-label); 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: var(--ls-label-lg);
  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 : 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). Il vaut pour le bloc « Rendez-vous du
   tirage » (.draw__logos, plus bas), qui reste la valeur par défaut.
   DEUX EXCEPTIONS ARBITRÉES, et deux seulement — ne pas en ouvrir une
   troisième sans retour client écrit :
   · le cartouche « Au profit de » du footer (§10bis, item-012 req 1824) ;
   · le bandeau du compte à rebours (§ « tp-cd », item-007 req 0924).
   Les deux appliquent la même parité OPTIQUE 42/36 px sur deux plaques
   identiques, jamais une égalité arithmétique 42/42. */
.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.
   NB : la barre de filtres par univers (.lots__filters / .lot-filter) a
   été retirée à la demande de la cliente (req 1824, item-009) — le mur
   affiche désormais les 25 lots en continu. L'étiquette de catégorie
   (.lot-card__cat, §9ter) reste, elle, purement informative.
   --------------------------------------------------------------------- */
.lots { background: var(--grad-nuit); }
.lots__head { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.lots__title { font-weight: 800; }

/* 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:hover, .lot-card:focus-visible {
  --ty: -10px;
  border-color: rgba(233, 196, 106, 0.75);
  box-shadow: 0 34px 80px rgba(10, 91, 224, 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(10, 91, 224, 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(6, 28, 78, 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: 14px; 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: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
  /* Cartouche renforcé (item-002) : à .62 d'opacité, sur une photo claire le
     fond composé montait à #657291 et le blanc n'y tenait que 4,81:1 — AA
     tout juste, et seulement parce que le texte est blanc pur. À .82 on
     retombe à 9,47:1 quelle que soit la photo. */
  background: var(--cartouche-bg); border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: var(--cartouche-blur); -webkit-backdrop-filter: var(--cartouche-blur);
}
/* Badge « N gagnants » — item-007 (req 1824), mécanique GÉNÉRIQUE.
   Le nombre d'exemplaires mis en jeu est porté par `data-lot-winners` sur la
   carte ; le badge n'apparaît QUE si ce nombre est > 1. Un lot ordinaire
   (attribut absent, ou = "1") ne montre rien : annoncer « 1 gagnant » sur 24
   cartes sur 25 n'apprendrait rien et diluerait l'information sur celle qui
   compte. Aucun JS : le seul déclencheur est le sélecteur d'attribut ci-dessous.
   Famille visuelle = celle de `.result-row__badge` (cartouche nuit + filet or),
   PAS l'aplat or de `.lot-card__num` : deux pastilles or pleines sur la même
   image se seraient concurrencées, et le badge doit se lire comme un avantage,
   pas comme un second numéro de lot. Le cartouche à .82 borne le fond composé
   à #33456E dans le pire cas (photo blanc pur) : l'or clair y tient 7,42:1 et
   le filet or 5,67:1 — AA garanti quel que soit le visuel fourni plus tard.
   ⚠️ La carte est un <a> porteur d'un `aria-label` : le texte de ce badge n'est
   donc PAS restitué aux lecteurs d'écran. Le nombre de gagnants doit être
   répété dans l'`aria-label` de la carte — voir les deux murs. */
.lot-card__winners {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: none;                      /* défaut : masqué (lot à 1 gagnant) */
  align-items: baseline; gap: 6px;
  font-family: var(--font-condense); font-weight: 800; font-size: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
  background: var(--cartouche-bg); border: 1px solid var(--color-border-or);
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(6, 28, 78, 0.45), 0 0 14px rgba(233, 196, 106, 0.22);
  backdrop-filter: var(--cartouche-blur); -webkit-backdrop-filter: var(--cartouche-blur);
}
.lot-card__winners b {
  font-family: var(--font-enseigne); font-weight: 400;   /* Anton n'a que le 400 */
  font-size: 17px; line-height: 1; letter-spacing: 0.02em;
  color: var(--c-or-clair); font-variant-numeric: tabular-nums;
}
.lot-card[data-lot-winners]:not([data-lot-winners="1"]) .lot-card__winners {
  display: inline-flex;
}
/* 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: 13px;
  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: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  /* `text-shadow` retiré (item-002) : résidu de l'époque où le prix était
     posé sur la photo. Il est désormais dans `.lot-card__body`, sur un
     aplat nuit opaque — l'ombre n'y protégeait plus rien et empâtait le
     blanc en petit corps sur mobile. */
}
.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: 13px;
  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(10, 91, 224, 0.45), transparent 55%),
    radial-gradient(70% 50% at 50% 116%, rgba(233, 196, 106, 0.20), transparent 60%),
    linear-gradient(180deg, #04123A 0%, #061C4E 55%, #04123A 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(10, 91, 224, 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: #04123A; 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: 13px;
  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);
}
/* Bandeau « lot en N exemplaires » — item-007 (req 1824).
   Pendant, sur la fiche, du badge `.lot-card__winners` des murs : même filet
   or, mais posé sur la nuit (jamais sur une photo) et développé en une phrase,
   la fiche étant le seul endroit où l'on peut expliquer la mécanique — N
   exemplaires = N tirages = N gagnants. Générique : ne dépend d'aucun lot.
   Sur `--c-nuit-2` (#0B2C78) l'or clair tient 10,3:1 et le filet or 7,9:1. */
.fiche__winners {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: linear-gradient(100deg, rgba(233, 196, 106, 0.16), rgba(233, 196, 106, 0.06));
  border: 1px solid var(--color-border-or);
}
.fiche__winners-num {
  flex: none; font-family: var(--font-enseigne); font-weight: 400;
  font-size: 30px; line-height: 1; color: var(--c-or-clair);
  font-variant-numeric: tabular-nums;
}
.fiche__winners-txt { font-size: var(--fs-caption); color: var(--color-text); }
.fiche__winners-txt b {              /* intertitre du bandeau */
  display: block; font-family: var(--font-condense); font-weight: 800;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
}
.fiche__winners-txt strong { color: #fff; font-weight: 700; }  /* emphase EN LIGNE */

/* Cartouche « conditions du lot » — item-013 (req 1824).
   Contrepoint exact du bandeau `.fiche__winners` : celui-ci CÉLÈBRE (or,
   gros chiffre), celui-là RESTREINT. Donc surtout pas d'or — un cartouche
   neutre à filet blanc et pastille azur, qui informe sans casser l'élan
   d'achat ; seule la restriction elle-même passe en blanc gras, pour
   qu'aucun lecteur ne puisse dire qu'il ne l'avait pas vue. Générique :
   aucun lot, aucune date n'est câblé dans le CSS.
   Contrastes calculés sur le fond le plus clair que traverse une fiche
   (sommet du halo de cause #083D9A + voile blanc 5 % → #14479F) :
   corps 7,6:1 · restriction en blanc 8,6:1 · mention 5,7:1 ·
   pastille azur 4,3:1 (glyphe décoratif, seuil 3:1). */
.fiche__conditions {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.fiche__conditions-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--c-azur); background: rgba(127, 187, 255, 0.12);
  border: 1px solid rgba(127, 187, 255, 0.34);
}
.fiche__conditions-txt { font-size: var(--fs-caption); color: var(--color-text); line-height: 1.55; }
.fiche__conditions-head {              /* intertitre du cartouche */
  display: block; font-family: var(--font-condense); font-weight: 800;
  font-size: 12px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 4px;
}
.fiche__conditions-txt b { color: #fff; font-weight: 700; }    /* la restriction */
.fiche__conditions-note { display: block; margin-top: 6px; color: var(--color-muted); }

/* 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: 12px; 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 3 · 5 · 10 tickets — OFFRE PROMOTIONNELLE, jamais le point d'entrée.
   Grille arbitrée à l'item-004 (req 0924) : PRIX DÉGRESSIF (25 / 40 / 70 €),
   et non plus des tickets offerts. La tuile affiche le nombre de tickets,
   l'économie réalisée en pastille or (`.pack__bonus`, ex. « −30 € »), puis le
   prix : c'est la baisse du prix unitaire qui justifie le pack, pas un
   quelconque « minimum d'achat ». */
.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: 12px; 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: 11px; 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; }

/* ---------------------------------------------------------------------
   9quater-bis. TARIF — LE TICKET À L'UNITÉ D'ABORD (item-006, req 1824)
   Constat cliente : « l'écran de quantité laisse croire qu'on ne peut
   acheter qu'à partir de 5 tickets ». Le ticket à 10 € redevient donc
   l'entrée par défaut, et il est TYPOGRAPHIÉ COMME TEL : chiffre en
   enseigne or, cartouche or, CTA pleine largeur, mention « aucun
   minimum ». Les packs ne sont qu'une offre promotionnelle : second
   registre, sous un intertitre « Offre promo », économie explicite
   (item-004, req 0924 : le prix du ticket baisse lot par lot — il n'y a
   plus de tickets offerts).
   Le bloc sert aussi bien la colonne étroite d'une fiche de lot que la
   pleine largeur d'une section d'accueil (max-width + marges auto).
   ⚠️ Côté HTML, un CTA principal ne doit JAMAIS porter
   `data-buy-sheet-preselect-pack` sur un pack : c'est le seul attribut
   lu par sale.<hash>.js pour fixer la quantité d'ouverture de la feuille
   (`data-buy-sheet-pack` / `data-pack` sont inertes, gardés par
   cohérence de gabarit). L'état par défaut du tunnel est déjà qty = 1.
   --------------------------------------------------------------------- */
.tarif {
  display: grid; gap: var(--sp-5);
  width: 100%; max-width: 620px; margin-inline: auto;
}
.tarif__unit {
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg);
  background: rgba(233, 196, 106, 0.07);
  border: 1px solid var(--color-border-or);
}
.tarif__price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); }
.tarif__price-num {
  font-family: var(--font-enseigne); font-size: var(--fs-mega); line-height: 1;
  color: var(--c-or-clair); font-variant-numeric: tabular-nums;
}
.tarif__price-unit {
  font-family: var(--font-condense); font-weight: 900; font-size: var(--fs-body);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
}
.tarif__cta { justify-self: stretch; }
/* Réutilisable seul, sous n'importe quel CTA d'achat (hero, grand final). */
.tarif__note { text-align: center; font-size: var(--fs-caption); color: var(--color-muted); }
.tarif__note b { color: var(--c-or-clair); font-weight: 700; }
.tarif__promo { display: grid; gap: var(--sp-3); }
.tarif__promo-head {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3); text-align: center;
  font-size: var(--fs-caption); color: var(--color-muted);
}
.tarif__promo-head b { color: #fff; font-weight: 700; }
.tarif__promo-flag {
  font-family: var(--font-condense); font-weight: 900; font-size: 13px;
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
  color: #231703; background: var(--grad-or);
  padding: 4px 11px; border-radius: var(--r-pill);
}
.pack__bonus {
  font-family: var(--font-condense); font-weight: 900; font-size: 13px;
  letter-spacing: 0.04em; white-space: nowrap; margin-top: 4px;
  color: var(--c-or-clair); background: rgba(233, 196, 106, 0.14);
  border: 1px solid var(--color-border-or);
  padding: 2px 8px; border-radius: var(--r-pill);
}
/* Sous 480 px la grille tombe à ~108 px par colonne et la pastille
   « Le + généreux » débordait de sa tuile (mesuré : ~13 px hors cadre, sans
   débordement de page). On resserre l'interlettrage et les paddings — jamais
   le corps du texte, qui reste à 11 px (passe de lisibilité item-002). */
@media (max-width: 480px) {
  .pack__flag { letter-spacing: 0.04em; padding: 3px 6px; }
}

@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 roi : rupture nette avec la nuit alentour. Le point le plus
     clair du champ (sommet du halo) compose à #093E94 ; c'est lui qui borne
     toute la section — le gris-bleu doux y tient 5,0:1, l'azur 4,9:1 et le
     glyphe cœur 3,3:1. Alpha du halo ramené de .42 à .32 pour ça. */
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(10, 91, 224, 0.32), transparent 62%),
    linear-gradient(180deg, #093070 0%, #0C3C8E 48%, #082961 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(6, 28, 78, 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: #2A4586; /* bleu roi désaturé : point « éteint », 1,12:1 sur la bande */
}
.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:hover, .amb-card:focus-within {
  --ty: -10px;
  border-color: rgba(233, 196, 106, 0.75);
  box-shadow: 0 34px 80px rgba(10, 91, 224, 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(10, 91, 224, 0.45), transparent 58%),
    radial-gradient(100% 60% at 50% 118%, rgba(233, 196, 106, 0.16), transparent 60%),
    /* Scrim de lisibilité. Les arrêts médians sont remontés (.26 → .38 à 40 %,
       .78 → .86 à 72 %) : la 1re ligne de `.amb-card__name` retombe vers 63 %
       de hauteur, où l'ancien profil ne valait plus que α ≈ .63 — soit 5,7:1
       sur un portrait studio clair. On passe à 7,7:1. Le haut de l'image
       (0 %) est laissé quasi transparent : c'est le visage, il ne porte
       aucun texte et doit rester lumineux. */
    linear-gradient(180deg, rgba(6, 28, 78, 0.14) 0%, rgba(6, 28, 78, 0.38) 40%, rgba(6, 28, 78, 0.86) 72%, rgba(6, 28, 78, 0.98) 100%);
  box-shadow: inset 0 0 120px 24px rgba(6, 28, 78, 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: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
  /* Cartouche renforcé (item-002) : à .62 d'opacité, sur une photo claire le
     fond composé montait à #657291 et le blanc n'y tenait que 4,81:1 — AA
     tout juste, et seulement parce que le texte est blanc pur. À .82 on
     retombe à 9,47:1 quelle que soit la photo. */
  background: var(--cartouche-bg); border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: var(--cartouche-blur); -webkit-backdrop-filter: var(--cartouche-blur);
}
/* 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: 12px;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-or-clair);
  /* ⚠️ C'ÉTAIT LE PIRE CONTRASTE DU SITE (corrigé item-002).
     `--glass-bg` (α .55) est un fond de VERRE conçu pour se poser sur la
     nuit, pas sur une photo. Or plusieurs ambassadeurs sont photographiés
     en studio sur fond blanc : le composé montait à #6B7792 et l'or pâle
     n'y tenait plus que 3,52:1 — échec AA franc sur un texte de 12 px.
     Le cartouche (α .82) ramène à 8,01:1 sur ce même portrait clair. */
  background: var(--cartouche-bg); border: 1px solid var(--color-border-or);
  padding: 4px 9px; border-radius: var(--r-pill);
  backdrop-filter: var(--cartouche-blur); -webkit-backdrop-filter: var(--cartouche-blur);
}
.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: 13.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texte);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
/* Lien « Son lot → ». Était stylé à 100 % en `style=""` inline sur les 13
   cartes de `/ambassadeurs/`, à 11 px — donc invisible à toute passe de
   lisibilité menée depuis la feuille de styles, et perdu à la moindre
   régénération du HTML. Rapatrié ici et remonté à 13 px (item-002). */
.amb-card__lot {
  margin-top: 2px;
  font-family: var(--font-condense); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  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(6, 28, 78, 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: 13.5px;
  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, HelloAsso) 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: clamp(21px, 0.9vw + 18.5px, 25px);
  line-height: 1.2;
  color: #fff;
}
.trust-card__text {
  margin: 0;
  font-size: var(--fs-body);
  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: var(--fs-caption);
  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(6, 28, 78, 0.5);
  font-size: var(--fs-caption);
  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(10, 91, 224, 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: clamp(21px, 0.9vw + 18.5px, 25px);
  line-height: 1.2;
  color: #fff;
}
.howto-step__text {
  margin: 0;
  font-size: var(--fs-body);
  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(10, 91, 224, 0.14);
  font-size: var(--fs-body);
  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(10, 91, 224, 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: var(--fs-body);
  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: clamp(20px, 0.8vw + 17.9px, 24px);
  color: #fff;
}
.give__receipt-text {
  margin: 0;
  font-size: var(--fs-caption);
  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: var(--fs-body);
  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: var(--fs-body);
  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, #061C4E 0%, #03102F 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: var(--fs-caption);
  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: 11px;
  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: var(--fs-caption);
  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: var(--fs-caption);
  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(9, 30, 84, 0.92), rgba(6, 22, 64, 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; }

/* Parité de logos — CARTOUCHE « AU PROFIT DE » UNIQUEMENT (item-012)
   ─────────────────────────────────────────────────────────────────
   Demande client : « le logo de Solidarité Pancréas de même taille
   visuelle que celui de Vaincre le Cancer quand ils sont l'un à côté
   de l'autre ».
   ⚠️ PÉRIMÈTRE : ce cartouche + le bandeau du compte à rebours. La
   règle rédactionnelle « deux associations » interdit les logos à
   taille égale là où l'ORGANISATEUR est désigné ; ce cartouche y
   échappe par nature (« Au profit de » désigne des BÉNÉFICIAIRES,
   registre où les deux associations figurent légitimement à parité).
   Le bandeau du compte à rebours, lui, désigne bien l'organisateur :
   il est passé à la même parité sur demande explicite du client
   (item-007 req 0924), en reprenant les valeurs arbitrées ici. Le bloc
   « Rendez-vous du tirage » (.draw__logos) garde sa hiérarchie
   (36/26 px, cf. §5) — il n'était pas dans la demande.
   ─────────────────────────────────────────────────────────────────
   Égalisation OPTIQUE, pas arithmétique. Les deux logotypes ont des
   proportions et des densités très différentes : VLC 1331×720 (1,85:1,
   script aéré, 19 % de couverture d'encre), SP 1090×404 (2,69:1,
   symbole massif + logotype gras sur 2 lignes, 32 % d'encre). À hauteur
   strictement égale (42 px), SP mesurerait 113 px de large contre 78 et
   ÉCRASERAIT VLC ; à 36 px les deux marques occupent la même surface
   optique (97 px de large contre 78, mais un tiers d'encre en plus) et
   les deux blocs de logotype se répondent. Ne pas « simplifier » en
   height: 42px — ce serait l'inverse de l'effet demandé.
   Les plaques, elles, sont RIGOUREUSEMENT identiques (même fond, même
   filet, même ombre, même hauteur hors-tout) : deux plaques inégales
   recréeraient à elles seules la hiérarchie qu'on vient de retirer.
   Hauteur de plaque = image + 2 × padding + 2 × filet :
   VLC 42 + 2×12 + 2 = 68 px  ·  SP 36 + 2×15 + 2 = 68 px. */
.site-footer__cause .org-plaque--second {
  padding: 15px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 159, 227, 0.45);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.site-footer__cause .org-plaque--second img {
  height: 36px;
}

.site-footer__cause-note {
  flex: 1 1 22ch;
  min-width: 22ch;
  font-size: var(--fs-caption);
  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: var(--fs-caption);
  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: var(--fs-caption);
}
.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(6, 28, 78, 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(127, 187, 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(6, 28, 78, 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: var(--ls-label);
  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.

   PARITÉ OPTIQUE — demande client req 0924/item-007 : « augmenter la taille
   du logo de Solidarité Pancréas sur la home en haut pour qu'il ait la même
   taille que celui de VLC ». Les hauteurs 40/30 px d'origine sont donc
   caduques ICI ; on applique le seul précédent arbitré, celui du cartouche
   « Au profit de » (§10bis, item-012) : 42 px pour VLC, 36 px pour SP.
   ⚠️ Ce n'est PAS une égalité arithmétique, et il ne faut pas la « simplifier »
   en 42/42. Les ratios diffèrent — VLC 1331×720 (1,85:1, script aéré),
   SP 1090×404 (2,70:1, symbole massif + logotype gras) : à hauteur égale SP
   mesurerait 113 px de large contre 78 et ÉCRASERAIT l'organisateur, soit
   l'inverse de l'effet demandé. À 42/36 les deux marques occupent la même
   surface optique (78 px contre 97 px de large, mais un tiers d'encre en plus
   côté SP).
   Les deux plaques sont RIGOUREUSEMENT identiques (même fond, même ombre,
   même hauteur hors-tout) — deux plaques inégales recréeraient à elles seules
   la hiérarchie qu'on vient de retirer :
   VLC 42 + 2×12 = 66 px · SP 36 + 2×15 = 66 px.
   La hiérarchie « deux associations » n'est pas perdue pour autant : elle
   passe par la MENTION (« organisée par » + nom en or contre « en soutien à »
   + nom en azur), pas par la taille. Le bloc « Rendez-vous du tirage »
   (.draw__logos, §5) conserve lui son écart de taille — hors demande. */
.tp-cd__org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tp-cd__org .org-plaque img { height: 42px; }
.tp-cd__org .org-plaque--second {
  /* Padding vertical relevé (9 → 15 px) pour compenser les 6 px d'image en
     moins : les deux plaques retombent à 66 px. Ombre alignée sur la plaque
     principale (celle de .org-plaque--second est volontairement allégée). */
  padding: 15px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.tp-cd__org .org-plaque--second img { height: 36px; max-width: 150px; }

/* Seuil d'empilement PROPRE À CE BANDEAU. À parité le duo mesure 276 px de
   large (113,6 + 12 + 1 + 12 + 137,1) contre 242 px auparavant, alors que la
   largeur utile vaut « viewport − 88 px » (24 px de padding d'overlay + 20 px
   de gouttière, de chaque côté) : il ne tient plus dès 361 px. Le seuil
   générique de 360 px (§5) est donc relevé à 370 px ici seulement — aucun
   terminal courant ne tombe entre 361 et 374 px, et 375 px garde le côte à
   côte avec 11 px de marge. Le bloc tirage et le cartouche du footer gardent
   le seuil générique : leurs duos n'ont pas changé de taille. */
@media (max-width: 370px) {
  .tp-cd__org .org-duo { flex-direction: column; gap: var(--sp-2); }
  .tp-cd__org .org-duo__sep {
    width: 48px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-or-fonce), transparent);
  }
}
.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; }
  /* `flex: 1 1 22%` laissait l'horloge en largeur de contenu (277 px sur un
     écran de 390) : les 4 cartes se serraient alors que la place existait.
     `1 1 0` + `width: 100%` leur fait partager toute la largeur utile, ce
     qui suffit à contenir « Secondes » — le mot le plus long. */
  .tp-cd__clock { width: 100%; }
  .tp-cd__unit { min-width: 0; flex: 1 1 0; padding-inline: 4px; }
  /* L'horloge est la SEULE grille du site à 4 colonnes fixes non
     réductibles : « SECONDES » y est le mot le plus long du site pour la
     place disponible. La remontée de `--fs-caption` (12,3 → 14,5 px) le
     faisait déborder de la carte. On lui rend ici un corps et un
     interlettrage propres — le chiffre, lui, reste énorme (34 px), et
     c'est lui qui porte l'information. */
  .tp-cd__lbl { font-size: 12px; letter-spacing: 0; }
}
/* Sous 380 px il n'y a plus assez de place pour « Secondes » à 12 px, même
   les cartes étalées : on le laisse suivre la largeur. Le libellé est
   secondaire — c'est le chiffre (34 px) qui porte l'information. */
@media (max-width: 380px) {
  .tp-cd__lbl { font-size: clamp(9.5px, 3vw - 0.4px, 11.5px); }
}

/* 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(17, 60, 156, 0.98), rgba(6, 28, 78, 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(6, 28, 78, 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(10, 91, 224, 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(15, 55, 140, 0.96), rgba(6, 26, 72, 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: var(--ls-label);
  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: var(--fs-body);
  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(10, 91, 224, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(6, 28, 78, 0) 40%, rgba(6, 28, 78, 0.62) 100%);
}
.result-row__badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--c-or-clair);
  background: var(--cartouche-bg);
  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.78rem;
  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.15rem;
  line-height: 1.28;
  color: var(--color-heading);
}
.result-row__value {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.92rem;
  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.76rem;
  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: var(--fs-caption);
  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: var(--fs-caption); }

@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(127, 187, 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(10, 91, 224, 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(10, 91, 224, 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(10, 91, 224, 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 --- */
/* ⚠️ Le rythme vertical est porté par `gap`, PAS par `.stack > * + *`
   (req 2026-08-04-1824, item-015). Les règles de flux `.assoc__body > * + *`
   et `.assoc__head > * + *` avaient la même spécificité (0,1,0) que les
   `margin: 0` posés plus bas sur `.assoc__text` et `.assoc__note` : écrites
   AVANT eux, elles perdaient la cascade et l'espacement tombait à 0 — le
   titre était collé au récit, et la puce « bénéficiaire » au cartouche de
   mention. `gap` est immunisé contre ces resets. Les `margin-block-start: 0`
   neutralisent l'héritage de `.stack` pour ne pas cumuler les deux systèmes. */
.assoc__body { justify-content: center; gap: var(--sp-5); }
.assoc__body > * + * { margin-block-start: 0; }
.assoc__head { gap: var(--sp-4); }
.assoc__head > * + * { margin-block-start: 0; }
.assoc__head h2 { margin: 0; }
.assoc__text {
  margin: 0;
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-texte);
}
.assoc__text b { color: #fff; font-weight: 700; }

.assoc__chips {
  display: flex;
  flex-wrap: wrap;
  /* sp-3 et non sp-2 : sous 480 px les deux puces passent l'une sous l'autre,
     8 px ne suffisaient plus à les séparer une fois empilées. */
  gap: var(--sp-3);
}

/* 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;
  /* Respiration supplémentaire (sp-5 du `gap` + sp-2 = 32 px) : la mention
     d'organisateur est une note de statut, elle ne doit pas se lire comme la
     suite des puces. S'ajoute au `gap` du parent, ne le remplace pas. */
  margin: var(--sp-2) 0 0;
  padding: 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(6, 28, 78, 0.5);
  font-size: var(--fs-caption);
  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) {
  /* Empilé, le `gap` ne sépare plus deux colonnes mais le blason (carte à
     filet or) de l'eyebrow qui ouvre le récit : sp-6 les laissait trop
     proches — c'est le point signalé par la cliente sur mobile (80 % du
     trafic). sp-7 rétablit la respiration entre les deux registres. */
  .assoc__panel { grid-template-columns: 1fr; gap: var(--sp-7); }
  .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; }
}

/* =====================================================================
   22. BANDEAU D'ACCROCHE — DÉFILÉ DE PORTRAITS D'ARTISTES (hero, item-005)
   Dispositif « NRJ Music Awards » demandé par la cliente : une galerie de
   VISAGES qui défile, en PREMIER PLAN — surtout pas en fond (contre-exemple
   explicite : La Tanière). Les portraits sont donc posés sur un rail opaque
   (z-index de contenu, cf. §16 « .stage > * »), avec cerclage or et ombre
   portée, au-dessus des faisceaux et du sol de scène.

   Règles de casting (cf. docs/SITE.md) :
   • UNIQUEMENT des visages. Tout visuel de tournée où l'artiste n'apparaît
     pas — ou apparaît minuscule / de profil / noyé — est écarté. Deux cas
     tranchés à la main : `lots/disque-or-johnny` est une photo d'OBJET
     (disque d'or) → exclu ; `ambassadeurs/david-hallyday` est une AFFICHE
     de tournée (« Requiem pour un fou ») où le visage est petit et de
     profil → exclu du bandeau, mais conservé partout ailleurs sur le site.
   • Les noms sont posés SOUS le cercle, sur la nuit — jamais sur la photo.
     Aucun cartouche `--cartouche-bg` n'est donc nécessaire ici (il reste la
     règle pour tout texte réellement posé sur un visuel).

   Cadrage : chaque portrait porte son propre `--fx`/`--fy` (object-position)
   et, pour les sources larges type affiche, un `--fz` (zoom) qui recentre le
   visage dans le cercle. Valeurs réglées visuellement en headless, une par
   une — ne pas « harmoniser » sans revérifier le rendu.

   Boucle : la piste contient DEUX jeux identiques, le second `aria-hidden`,
   et translate de 0 → -50% (même mécanique que le marquee du Grand final,
   §18). Neutralisé sous `prefers-reduced-motion` ET `html.a11y-no-motion` :
   le second jeu disparaît et le premier passe en grille centrée qui se
   replie — le bandeau reste alors intégralement lisible, sans mouvement.
   ===================================================================== */

.hero-faces {
  --face-size: clamp(66px, 6.4vw, 94px);
  --face-gap: clamp(var(--sp-4), 2.2vw, var(--sp-6));
  align-self: stretch;                     /* le parent est en align-items:center */
  margin-inline: calc(-1 * var(--gutter)); /* bord à bord dans le conteneur       */
  margin-top: var(--sp-6);
  padding-block: var(--sp-4);
  position: relative;
  /* Plaque de premier plan : assez dense pour que les visages se détachent
     des faisceaux, assez douce pour ne pas couper le hero en deux. */
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(6, 28, 78, 0.62) 14%,
      rgba(6, 28, 78, 0.62) 86%,
      transparent 100%);
}
/* Filets or très fins, fondus sur les bords (haut et bas du rail). */
.hero-faces::before,
.hero-faces::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(233, 196, 106, 0.34) 22%,
    rgba(233, 196, 106, 0.34) 78%, transparent);
}
.hero-faces::before { top: 0; }
.hero-faces::after  { bottom: 0; }

.hero-faces__rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hero-faces__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: hero-faces-scroll 46s linear infinite;
}
/* Lecture confortable : le défilé se fige au survol et pendant la
   navigation au clavier (le nom ciblé reste sous les yeux). */
.hero-faces__track:hover,
.hero-faces__track:focus-within { animation-play-state: paused; }

/* Le raccord de boucle doit être INVISIBLE : la translation vaut -50 % de la
   piste, soit exactement un jeu. Il faut donc que l'écart entre le dernier
   visage d'un jeu et le premier du suivant soit égal à l'écart interne — d'où
   `padding-right` = `gap`, et AUCUN padding à gauche. Un `padding-inline`
   symétrique doublerait l'écart au raccord et ferait « tressauter » le
   défilé une fois par cycle. */
.hero-faces__set {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--face-gap);
  padding-right: var(--face-gap);
}
.hero-face {
  flex: 0 0 auto;
  width: calc(var(--face-size) + 2.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}
.hero-face__ph {
  position: relative;
  width: var(--face-size);
  height: var(--face-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-nuit-3);
  border: 2px solid var(--color-border-or);
  box-shadow:
    0 12px 30px rgba(4, 14, 40, 0.72),
    0 0 0 4px rgba(233, 196, 106, 0.10);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
/* ⚠️ Le <picture> doit porter la taille du cercle : sans cela, le `height:100%`
   de l'<img> se résout contre un parent en hauteur `auto` (le <picture>) et
   retombe donc sur `auto`. Les sources PAYSAGE (Jarry, Philippe Lacheau)
   n'occupaient alors que le haut du cercle, le reste laissant voir le fond
   `--c-nuit-3` — un demi-disque bleu. Ne pas retirer cette règle. */
.hero-face__ph picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Cadrage par portrait — modèle « zoom + point de visée », posé en style inline
   sur l'<img>. On n'utilise NI `object-fit: cover` NI `object-position` :
   `cover` rogne d'abord l'image à un carré CENTRÉ, et sur un portrait en pied
   (Licata, Elsa Bois…) la tête tombe hors de ce carré — plus aucun zoom ni
   décalage ultérieur ne peut aller la rechercher. On dimensionne donc l'image
   nous-mêmes et on l'amène au bon endroit.

     --fz : largeur de l'image = --fz × diamètre du cercle (zoom).
     --tx/--ty : décalage, en % de la BOÎTE DE L'IMAGE, qui amène le point de
                 visée (le visage) au centre du cercle.

   Calculés à la génération (cf. le script d'insertion) à partir du point de
   visée (fx, fy) relevé sur planche-contact quadrillée et de la hauteur de
   tête `hf`, tous fractions de la source W×H :
     --fz = 0.58 × W / (hf × H)          (la tête occupe ~58 % du cercle)
     --tx = 1 / (2·fz) − fx
     --ty = W / (2·fz·H) − fy            (l'axe Y se rapporte à la HAUTEUR
                                          de l'image, d'où le facteur W/H)
   Ne pas retoucher ces valeurs à la main sans revérifier le rendu. */
.hero-face__ph img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% * var(--fz, 1));
  /* ⚠️ Sans ceci, le `max-width: 100%` du reset (§2 « img, picture, svg… »)
     rogne la largeur zoomée à celle du cercle et ANNULE tout le cadrage. */
  max-width: none;
  height: auto;
  transform: translate(var(--tx, 0%), var(--ty, 0%));
  filter: saturate(1.03) contrast(1.04);
}
.hero-face:hover .hero-face__ph {
  transform: translateY(-3px);
  border-color: rgba(233, 196, 106, 0.85);
  box-shadow: var(--glow-or), 0 0 0 4px rgba(233, 196, 106, 0.16);
}
.hero-face__name {
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: clamp(13px, 0.3vw + 11.8px, 15px);
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-texte);
  white-space: normal;   /* les noms longs se replient sur 2 lignes */
}

@keyframes hero-faces-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile (80 % du trafic) : cercles plus petits, gouttières resserrées, mais
   noms maintenus au-dessus du plancher de lisibilité fixé à l'item-002. */
@media (max-width: 560px) {
  /* Le bandeau s'intercale entre la promesse et le bloc « tirage » : on
     resserre son encombrement vertical pour ne pas repousser le CTA or
     plus bas que nécessaire. */
  .hero-faces { margin-top: var(--sp-4); padding-block: var(--sp-2); }
  .hero-face  { width: calc(var(--face-size) + 1.6rem); }
}

/* Reduced-motion / widget d'accessibilité : plus aucun défilement. Le second
   jeu (décoratif, aria-hidden) disparaît et le premier se replie en grille
   centrée — les 12 visages restent tous accessibles, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .hero-faces__rail {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-faces__track { animation: none; width: 100%; }
  .hero-faces__set--dup { display: none; }
  .hero-faces__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: var(--sp-4);
  }
  .hero-face__ph { transition: none; }
}
html.a11y-no-motion .hero-faces__rail {
  -webkit-mask-image: none;
          mask-image: none;
}
html.a11y-no-motion .hero-faces__track { animation: none; width: 100%; }
html.a11y-no-motion .hero-faces__set--dup { display: none; }
html.a11y-no-motion .hero-faces__set {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  row-gap: var(--sp-4);
}
html.a11y-no-motion .hero-face__ph { transition: none; }


/* =====================================================================
   23. EN-TÊTE MINIMAL DU TUNNEL D'ACHAT (req 2026-08-05-0924, item-006)
   Barre de tête des pages `/participer*`. Brief §4.4 : « En-tête minimal :
   logo/nom de la tombola, lien "← Retour aux lots", mention paiement
   sécurisé. PAS DE NAVIGATION COMPLÈTE DU SITE. »

   Pourquoi une barre dédiée et non le gabarit d'en-tête des autres pages :
   sur un écran transactionnel, chaque lien est une fuite. On ne garde donc
   qu'UNE sortie explicite (« ← Retour aux lots », qui ramène au catalogue,
   pas à l'accueil) et le reste est purement informatif. Le bloc de marque
   n'est VOLONTAIREMENT PAS cliquable : un logo-lien vers `/` rouvrirait une
   deuxième sortie, non demandée par le brief.

   ⚠️ RÈGLE « DEUX ASSOCIATIONS » (docs/SITE.md) — cette barre désigne
   l'ORGANISATEUR : seul le logo de **Vaincre le Cancer** y figure, sur sa
   plaque neutre claire habituelle. Solidarité Pancréas n'apparaît PAS ici.
   Ne jamais y importer le duo à parité du cartouche « Au profit de »
   (§10bis) : cette parité est arbitrée pour le registre des BÉNÉFICIAIRES
   uniquement. La mention « en soutien à Solidarité Pancréas » reste au pied
   de page réduit du tunnel, à son rang de partenaire soutenu.

   ⚠️ COLLANTE SEULEMENT DANS SA FORME À UNE LIGNE (≥ 901 px, cf. les replis
   plus bas). Mesuré au CDP sur la page réelle : 68 px sur une ligne, mais
   122 px dès qu'elle passe à deux rangs (< 901 px) et 153 px à trois rangs
   (≤ 430 px). Coller 153 px de barre en haut d'un écran de 568 px, c'est
   confisquer 27 % de la hauteur utile au moment précis où l'on demande de
   remplir un panier — le rappel de réassurance ne vaut pas ce prix. En
   dessous du seuil, la barre défile donc normalement.
   z-index `--z-sticky` (40) : au-dessus du contenu de scène (`--z-content`,
   3) et sous le skip-link et les surcouches (`--z-overlay`, 60).
   --------------------------------------------------------------------- */
.tunnel-head {
  position: static;
  top: 0;
  z-index: var(--z-sticky);
  /* Fond opaque en repli : le contenu défile dessous, aucune transparence
     ne doit laisser passer un visuel de lot. Le blur n'est qu'un bonus. */
  background: linear-gradient(180deg, rgba(6, 28, 78, 0.97), rgba(6, 28, 78, 0.92));
  backdrop-filter: saturate(1.15) blur(10px);
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
/* Filet or hairline sous la barre — même signature que les cartes premium,
   posé en pseudo-élément pour ne pas doubler l'épaisseur du border. */
.tunnel-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-or-fonce), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* Trois zones : sortie (gauche) · marque (centre) · réassurance (droite).
   `1fr auto 1fr` garde la marque OPTIQUEMENT centrée quelle que soit la
   largeur des deux mentions latérales. */
.tunnel-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-3);
}
.tunnel-head__back   { justify-self: start; }
.tunnel-head__brand  { justify-self: center; }
.tunnel-head__secure { justify-self: end; }

/* ---- Sortie unique : retour au catalogue ---- */
.tunnel-head__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  font-family: var(--font-condense);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tunnel-head__back:hover,
.tunnel-head__back:focus-visible {
  color: var(--c-or-clair);
  border-color: var(--color-border-or);
  background: rgba(233, 196, 106, 0.08);
}
/* La flèche recule d'un cheveu au survol : micro-affordance de retour. */
.tunnel-head__back-arrow {
  transition: translate var(--t-fast);
}
.tunnel-head__back:hover .tunnel-head__back-arrow { translate: -3px 0; }

/* ---- Marque : nom de l'opération + logo de l'organisateur ---- */
.tunnel-head__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
/* Plaque VLC réduite au format barre (hérite de `.vlc`, §8). */
.vlc--tunnel { padding: 6px 10px; border-radius: var(--r-sm); }
.vlc--tunnel .vlc__logo { height: 22px; }

.tunnel-head__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tunnel-head__name {
  font-family: var(--font-condense);
  font-weight: 900;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Second rang : l'organisateur légal, nommé en toutes lettres.
   13 px = plancher de lisibilité du site (item-002, req 1824) — ne pas
   descendre en dessous pour gagner de la hauteur de barre. */
.tunnel-head__org {
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-muted);
  white-space: nowrap;
}
.tunnel-head__org b { color: var(--c-texte); font-weight: 700; }

/* ---- Réassurance paiement ---- */
.tunnel-head__secure {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-muted);
  white-space: nowrap;
}
.tunnel-head__secure b { color: #fff; font-weight: 700; }
.tunnel-head__secure svg {
  flex: none;
  width: 17px; height: 17px;
  color: var(--c-or);
}

/* ---------------------------------------------------------------------
   Forme à une ligne — et donc collante. Seuil mesuré, pas choisi : les trois
   zones font 232 + 294 + 249 = 775 px, plus 2 × 16 px de gouttière = 807 px.
   À 900 px de fenêtre le conteneur offre 828 px utiles (gutter 4vw) : ça
   passe avec 21 px de marge. À 860 px il n'en offrirait que 791 — les zones
   sont toutes en `nowrap`, elles déborderaient. D'où 901 px.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  .tunnel-head { position: sticky; }
  /* Ancrage d'étape (`#coordonnees`) : le scroll doit s'arrêter SOUS la
     barre collante, sinon le titre de l'étape 2 se glisse dessous.
     68 px de barre + une respiration. */
  body.tunnel-page :target { scroll-margin-top: calc(68px + var(--sp-4)); }
}

/* ---------------------------------------------------------------------
   Repli tablette / petit desktop : DEUX RANGS — marque seule au-dessus,
   puis sortie et réassurance sur la même ligne, aux deux bords.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tunnel-head__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: var(--sp-3);
  }
  .tunnel-head__brand  { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .tunnel-head__back   { grid-column: 1; grid-row: 2; }
  .tunnel-head__secure { grid-column: 2; grid-row: 2; }
}

/* Repli mobile : UN SEUL RANG PAR ZONE.
   Seuil mesuré au CDP, et il ne vaut pas ce qu'on croit : le bouton de
   retour (207 px) et la réassurance (232 px) demandent 455 px + 16 px de
   gouttière, soit 471 px de contenu utile pour tenir côte à côte. À 500 px
   de fenêtre le conteneur n'en offre que 460 (gutter plancher de 20 px) et
   à 431 px il en offre 391 : mesuré, ce dernier cas débordait la page de
   46 px. Le seuil réel est donc ~520 px, arrondi à 559 px pour garder de la
   marge — surtout pas 430 px, qui « semblait » être le mobile.
   Les trois mentions passent alors l'une sous l'autre, alignées à gauche.
   Le libellé du prestataire (`HelloAsso`) n'est JAMAIS masqué ni tronqué :
   c'est une mention de réassurance contractuelle, pas une décoration. */
@media (max-width: 559px) {
  .tunnel-head__inner {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .tunnel-head__brand  { grid-column: 1; }
  .tunnel-head__back   { grid-column: 1; grid-row: 2; justify-self: start; }
  .tunnel-head__secure { grid-column: 1; grid-row: 3; justify-self: start; white-space: normal; }
  .vlc--tunnel .vlc__logo { height: 20px; }
}

/* ---------------------------------------------------------------------
   Page de tunnel — garde-fous de gabarit.
   `body.tunnel-page` marque les écrans `/participer*`. Le brief §4.4
   interdit la navigation complète du site sur ces pages : le bandeau de
   portraits du hero (§22) et les colonnes de navigation du pied de page
   (§10) n'y sont pas posés par construction. Ces deux règles sont un
   FILET, pas une béquille : elles neutralisent le jour où quelqu'un
   recopiera le gabarit d'une autre page dans le tunnel.
   --------------------------------------------------------------------- */
body.tunnel-page .hero-faces,
body.tunnel-page .site-footer__nav,
body.tunnel-page .site-footer__col { display: none; }