/* ════════════════════════════════════════════════════════════════════
   SENTINELLE DUARTÉ — animations.css
   --------------------------------------------------------------------
   Ce fichier ajoute 3 effets signature au site, EN COMPLEMENT des CSS
   existants (base/layout/components/pages). Aucune redéfinition de
   variable, aucune duplication.
     1) MAGNETIC PILL — pastille dorée qui glisse sous le lien hovered
        du menu desktop (.site-nav)
     2) HERO PHARE SENTINELLE — faisceau conique doré tournant en 24s
        + lanterne pulsante + étoiles, appliqué via la classe
        .hero--lighthouse (à ajouter au <section class="hero …">)
     3) CARD REVEAL "ÉCLAIRÉ PAR LE FAISCEAU" — slide-up + fade-in +
        halo doré qui balaye chaque .mission-card au scroll, déclenché
        par bindScrollReveal() côté JS (ajoute .is-visible)
   --------------------------------------------------------------------
   Inclure APRÈS pages.css :
     <link rel="stylesheet" href="css/animations.css">
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1) MAGNETIC PILL — menu desktop
   --------------------------------------------------------------------
   La pastille est un <span class="nav-pill"> injecté par JS dans le
   <ul> du .site-nav (uniquement en desktop ≥960px). Elle se déplace
   sous le lien hovered/focused, calé sur .active au repos.
   Sur fond NAVY : la pill est OR semi-transparente, le texte du lien
   actif vire au GOLD-LIGHT (très lisible sur fond doré tamisé).
═════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .site-nav > ul {
    position: relative;     /* ★ ancrage de la pill absolue */
    isolation: isolate;
  }

  /* Pilule magnétique — effet "LIQUID GLASS" doré, angles droits.
     overflow:hidden pour clipper le reflet ; pseudo-éléments ::before
     (sheen haut) et ::after (halo bas) pour l'aspect verre liquide. */
  .nav-pill {
    position: absolute;
    top: 50%; left: 0;
    width: 0; height: 34px;
    transform: translate(0, -50%) scale(.92);
    /* Dégradé OR semi-transparent (verre doré) sur fond NAVY */
    background: linear-gradient(160deg,
                rgba(255, 244, 205, 0.30)  0%,
                rgba(232, 201, 106, 0.26) 40%,
                rgba(197, 155, 42,  0.30) 70%,
                rgba(148, 104, 23,  0.24) 100%);
    border: 1px solid rgba(232, 201, 106, 0.50);  /* bordure dorée 4 côtés */
    border-radius: 0;                              /* ★ arrondis supprimés */
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;                              /* clippe le reflet liquide */
    box-shadow:
      0 4px 16px rgba(197, 155, 42, 0.24),         /* ombre portée dorée    */
      inset 0 1px 0 rgba(255, 255, 255, 0.55),     /* arête haute brillante  */
      inset 0 -2px 6px rgba(148, 104, 23, 0.20);   /* creux inférieur        */
    /* Spring elegant sur la position/largeur ; fondu d'opacité plus long
       (.4s) pour que l'apparition/disparition de la pilule soit douce et
       non brute, en cohérence avec le fade de la lueur du texte. */
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1),
                width     .42s cubic-bezier(.34, 1.56, .64, 1),
                opacity   .40s ease;
  }
  /* Reflet "liquid glass" : bande lumineuse en haut */
  .nav-pill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.48) 0%,
                rgba(255, 255, 255, 0.12) 55%,
                transparent 100%);
    pointer-events: none;
  }
  /* Halo doré liquide en bas de la pilule */
  .nav-pill::after {
    content: '';
    position: absolute;
    bottom: -40%; left: 50%;
    width: 80%; height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
                rgba(232, 201, 106, 0.42) 0%,
                transparent 70%);
    filter: blur(6px);
    pointer-events: none;
  }
  .nav-pill.is-visible {
    opacity: 1;
    transform: translate(var(--pill-x, 0), -50%) scale(1);
  }

  /* Les liens passent par-dessus la pill et reçoivent un padding pour que
     la pill ait une zone visuelle généreuse autour du texte. Angles droits
     et padding CONSTANT (pas de transition de padding) → aucun décalage.
     Lisibilité : texte plus opaque, léger interlettrage, ombre douce qui
     détache le libellé du fond navy/doré. */
  /* Le box des liens (padding, police, couleur de repos) est défini dans
     layout.css (.site-nav ul a, plus spécifique). Ici on ne gère QUE
     l'empilement au-dessus de la pilule + la couleur active. */
  .site-nav a {
    position: relative;
    z-index: 1;
    border-radius: 0;                /* ★ arrondis supprimés */
    border-bottom: none !important;  /* override l'underline générique */
  }
  /* Sur la pill, le texte du lien actif/hovered passe en gold-light
     (lisible et chic sur l'or doux semi-transparent). Aucun soulignement.
     L'ombre se renforce un peu pour rester net par-dessus la pill claire. */
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--gold-light);
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(11, 18, 38, 0.70);
    border-bottom: none;
  }
  /* Plus de soulignement : on neutralise la barre verticale ::before (aside
     mobile) ET l'underline animée ::after (définie dans layout.css desktop).
     La pilule glossy est le SEUL indicateur de survol. */
  .site-nav ul a::before { content: none; }
  .site-nav ul a::after  { display: none; }
}

/* Mobile : la pill n'a pas lieu d'être (panneau plein écran) — on
   garde la nav inchangée. La pill JS est créée mais reste invisible. */

/* ════════════════════════════════════════════════════════════════════
   2) HERO PHARE SENTINELLE
   --------------------------------------------------------------------
   À activer en ajoutant la classe .hero--lighthouse au <section>
   existant. Cela DÉSACTIVE les deux cercles dorés ::before/::after
   décoratifs (anciens) et les remplace par le faisceau et la lanterne.
   Compatible avec le grain du body (la texture reste visible derrière).
═════════════════════════════════════════════════════════════════════ */
.hero--lighthouse {
  position: relative;
  isolation: isolate;
  min-height: 76vh;
  min-height: 76dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%,
              var(--navy)      0%,
              var(--navy-dark) 60%,
              #0A1428          100%);
}

/* Désactiver les cercles décoratifs du hero standard quand .hero--lighthouse est appliqué */
.hero.hero--lighthouse::before,
.hero.hero--lighthouse::after {
  /* on neutralise les anciens cercles et on réutilise ::before pour le faisceau */
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  top: auto;
  bottom: auto;
  right: auto;
  left: auto;
}

/* Faisceau du phare — la base du faisceau (point de rotation) est fixée
   au HAUT CENTRÉ du hero (y=0, x=50%). La lanterne, elle, est placée
   40px au-dessus, ce qui donne l'illusion d'une lampe qui projette son
   rayon vers le bas.

   IMPORTANT : sélecteur double `.hero.hero--lighthouse::before` pour
   avoir la même spécificité que la règle de neutralisation des cercles
   décoratifs (juste au-dessus). Sans ça, mes valeurs `inset: -50%` sont
   écrasées par les `top/right/bottom/left: auto` de la neutralisation
   et le pseudo se retrouve en 0×0 (invisible).

   Structure :
   - inset: -50%           → le pseudo fait 200% × 200% du hero
   - conic-gradient "at 50% 25%" → centre du gradient au top du hero
   - transform-origin: 50% 25% → pivot au top centré (base du faisceau fixe)
   - from 168deg          → le rayon central pointe vers le BAS (~180°)
   - animation alternate  → aller-retour gauche-droite ininterrompu */
.hero.hero--lighthouse::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    /* Angles d'ouverture du faisceau DOUBLÉS (55° → 110° total) pour
       élargir le rayon. Le `from 148deg` garde le centre du faisceau
       orienté vers le bas-droite (148 + 40 = 188° absolus). */
    from 148deg at 50% 25%,
    transparent                        0deg,
    rgba(232, 201, 106, 0.05)         12deg,
    rgba(232, 201, 106, 0.16)         28deg,
    rgba(232, 201, 106, 0.34)         36deg,
    rgba(197, 155, 42,  0.44)         40deg,    /* cœur du rayon */
    rgba(232, 201, 106, 0.34)         44deg,
    rgba(232, 201, 106, 0.16)         60deg,
    rgba(232, 201, 106, 0.05)         84deg,
    transparent                      110deg,
    transparent                      360deg
  );
  transform-origin: 50% 25%;
  animation: sd-lighthouse-sweep 8s ease-in-out infinite alternate;
  /* blur augmenté (6 → 10px) pour adoucir les contours du rayon
     élargi et garder un rendu velouté. */
  filter: blur(10px);
  /* z-index 5 = AU-DESSUS de la vignette (z=4), sinon le faisceau était
     écrasé par la vignette sombre aux extrémités de son balayage.
     Reste sous .hero-inner (z=10) qui contient le texte. */
  z-index: 5;
  will-change: transform;
  pointer-events: none;
}
/* Balayage : oscille de -55° (vers la gauche) à +55° (vers la droite).
   ease-in-out + alternate = mouvement naturel de va-et-vient. */
@keyframes sd-lighthouse-sweep {
  from { transform: rotate(-55deg); }
  to   { transform: rotate(55deg); }
}

/* Champ d'étoiles fixes (SVG inline en data URI).
   Partagé entre :
   - .hero--lighthouse  → hero d'accueil (étoiles + faisceau du phare)
   - .hero--stars       → hero des pages internes (étoiles seules, pas de phare)
   Le SVG est défini une seule fois ; les spécificités d'opacité et de
   z-index sont posées dans les règles ciblées ci-dessous. */
.hero--lighthouse .lh-stars,
.hero--stars .lh-stars {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><g fill='%23FFFFFF'><circle cx='40' cy='80' r='0.8' opacity='0.6'/><circle cx='130' cy='220' r='1.2' opacity='0.8'/><circle cx='250' cy='60' r='0.6' opacity='0.5'/><circle cx='320' cy='180' r='1' opacity='0.7'/><circle cx='420' cy='90' r='0.7' opacity='0.6'/><circle cx='520' cy='250' r='1.4' opacity='0.85'/><circle cx='610' cy='110' r='0.9' opacity='0.7'/><circle cx='720' cy='200' r='0.6' opacity='0.5'/><circle cx='80' cy='350' r='1.1' opacity='0.75'/><circle cx='200' cy='420' r='0.7' opacity='0.6'/><circle cx='290' cy='510' r='1.3' opacity='0.85'/><circle cx='400' cy='380' r='0.8' opacity='0.65'/><circle cx='500' cy='470' r='0.6' opacity='0.55'/><circle cx='580' cy='340' r='1' opacity='0.7'/><circle cx='680' cy='430' r='0.9' opacity='0.7'/><circle cx='750' cy='540' r='0.7' opacity='0.6'/></g></svg>");
  background-repeat: repeat;
  background-size: 800px 600px;
  animation: sd-stars-twinkle 5.5s ease-in-out infinite;
  pointer-events: none;
}
/* Variante d'accueil : étoiles très visibles, au-dessus des cercles décoratifs */
.hero--lighthouse .lh-stars {
  opacity: 0.85;
  z-index: 2;
}
/* Variante pages internes : étoiles plus discrètes, sous le contenu texte
   (.hero-inner garde son z-index: 2 hérité de .hero standard) */
.hero--stars .lh-stars {
  opacity: 0.7;
  z-index: 1;
}
@keyframes sd-stars-twinkle {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* Lanterne (lampe du phare) — ancrée par son HAUT à top: -100px, centrée
   horizontalement. La lanterne fait 140px : son haut est à -100px et son
   bas à +40px du top du hero, donc on voit 40px de halo doré dépasser
   à l'intérieur du hero (le reste est clippé par overflow: hidden).
   IMPORTANT : on positionne par le top (pas par le centre) car translate
   verticale ferait remonter toute la lanterne dans la zone clippée. */
.hero--lighthouse .lh-lantern {
  position: absolute;
  top: -100px;
  left: 50%;
  width: 140px; height: 140px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 240, 200, 0.95) 0%,
              rgba(232, 201, 106, 0.65) 35%,
              rgba(197, 155, 42,  0.18) 70%,
              transparent              100%);
  filter: blur(2px);
  /* z-index 6 = juste au-dessus du faisceau (z=5) pour que la lampe
     reste visible devant le rayon qu'elle émet. */
  z-index: 6;
  pointer-events: none;
  animation: sd-lantern-pulse 4s ease-in-out infinite;
}
/* La pulsation conserve le translateX(-50%) horizontal et ajoute le scale */
@keyframes sd-lantern-pulse {
  0%, 100% { transform: translateX(-50%) scale(0.92); opacity: 0.85; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* Vignette : la lumière vient désormais du haut (lanterne à top: -40px),
   donc la zone claire est au sommet du hero, et les bords s'assombrissent.
   Allégée par rapport à l'origine pour ne pas écraser le faisceau qui
   passe maintenant AU-DESSUS de cette vignette (z=5 vs z=4).
   Sélecteur double `.hero.hero--lighthouse` : même raison que le faisceau
   ci-dessus (battre la spécificité de la règle de neutralisation). */
.hero.hero--lighthouse::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%,
              transparent              0%,
              transparent              55%,
              rgba(10, 20, 40, 0.30)  85%,
              rgba(10, 20, 40, 0.55) 100%);
  z-index: 4;
  pointer-events: none;
}

/* Le contenu remonte au-dessus de tout */
.hero--lighthouse .hero-inner {
  position: relative;
  z-index: 10;
}

/* Halo doré subtil sous le titre H1 pour le détacher du faisceau */
.hero--lighthouse h1 {
  text-shadow: 0 2px 24px rgba(197, 155, 42, 0.25),
               0 0 1px  rgba(255, 255, 255, 0.18);
}

/* Mobile : on réduit le min-height, la lanterne et on adoucit le faisceau */
@media (max-width: 640px) {
  .hero--lighthouse { min-height: 68vh; min-height: 68dvh; }
  .hero--lighthouse .lh-lantern { width: 110px; height: 110px; top: -75px; }
  .hero.hero--lighthouse::before { filter: blur(12px); opacity: 0.85; }
}

/* ════════════════════════════════════════════════════════════════════
   3) CARD REVEAL — slide-up + fade-in au scroll
   --------------------------------------------------------------------
   Appliqué aux .mission-card dans .grid--reveal.
   L'animation de balayage (halo doré ::before) est supprimée.
   Seule l'apparition slide-up reste active.
═════════════════════════════════════════════════════════════════════ */
.grid--reveal .mission-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity   .55s ease-out,
              transform .55s cubic-bezier(.4, 0, .2, 1),
              box-shadow .25s ease;
  isolation: isolate;
}

/* État révélé : slide-up + fade-in */
.grid--reveal .mission-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger jusqu'à 6 cartes : décalage progressif de 90ms */
.grid--reveal .mission-card:nth-child(1) { transition-delay: 0ms; }
.grid--reveal .mission-card:nth-child(2) { transition-delay: 90ms; }
.grid--reveal .mission-card:nth-child(3) { transition-delay: 180ms; }
.grid--reveal .mission-card:nth-child(4) { transition-delay: 270ms; }
.grid--reveal .mission-card:nth-child(5) { transition-delay: 360ms; }
.grid--reveal .mission-card:nth-child(6) { transition-delay: 450ms; }

/* Hover : la carte se soulève */
.grid--reveal .mission-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Reveal mutualisé : tout élément avec .section-reveal apparaît avec slide-up */
.section-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease-out,
              transform .55s cubic-bezier(.4, 0, .2, 1);
}
.section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — reduced-motion ASSOUPLI
   --------------------------------------------------------------------
   base.css coupe TOUTES les animations avec !important sous
   reduced-motion. Pour préserver les effets signature (faisceau,
   pill, reveal), on RALENTIT au lieu de couper — toujours respectueux
   de la préférence utilisateur (mouvements lents, jamais cligotants),
   et résout le souci des previews qui forcent reduced-motion.
═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Faisceau du phare : balayage oscillant ralenti (8s → 16s).
     `alternate` est indispensable pour que la rotation ne fasse pas de
     saut entre +55° et -55° à chaque cycle. 16s reste assez visible
     pour ne pas donner l'impression d'une animation figée. */
  .hero--lighthouse::before { animation: sd-lighthouse-sweep 16s ease-in-out infinite alternate !important; }
  /* Lanterne : 4s → 9s */
  .hero--lighthouse .lh-lantern { animation: sd-lantern-pulse 9s ease-in-out infinite !important; }
  /* Étoiles : 5.5s → 18s */
  .hero--lighthouse .lh-stars { animation: sd-stars-twinkle 18s ease-in-out infinite !important; }
  /* Pill et reveal : transitions raccourcies, conservées */
  .nav-pill { transition-duration: .25s !important; }
  .grid--reveal .mission-card,
  .section-reveal { transition-duration: .3s !important; }
}

/* ════════════════════════════════════════════════════════════════════
   COMPOSANT RÉUTILISABLE — "GLASS BAND" + "GLASS PANEL"
   --------------------------------------------------------------------
   Bandeau sombre en dégradé diagonal + panneau / cartes "liquid glass"
   (façon Apple) à reflet animé. ENTIÈREMENT THÉMABLE via variables CSS :
   pour décliner une autre couleur, il suffit d'ajouter une classe
   modificatrice (.glass-band--brun, .glass-band--green, …) ou de
   surcharger les variables en inline style.

   Variables de thème (avec valeurs par défaut = thème marron/or) :
     --gb-1 .. --gb-4   : 4 arrêts du dégradé du bandeau (clair → foncé)
     --gb-accent        : accent principal (filets, bordures)        [hex]
     --gb-accent-light  : accent clair (eyebrow, titres de carte)     [hex]
     --gb-accent-rgb    : accent en composantes R,G,B (pour rgba())
     --gb-glass-rgb     : teinte du verre en R,G,B (fond du panneau)
     --gb-glass-deep-rgb: teinte sombre du verre en R,G,B (bas du panneau)
   Markup générique (BEM) :
     <section class="glass-band glass-band--THEME">
       <div class="glass-band__inner">
         <p  class="glass-band__eyebrow">…</p>
         <h2 class="glass-band__title">…</h2>
         <p  class="glass-band__lead">…</p>
         <blockquote class="glass-panel glass-panel--quote">…</blockquote>
         <hr class="glass-band__rule">
         <p  class="glass-band__author">… <span>…</span></p>
       </div>
     </section>
═════════════════════════════════════════════════════════════════════ */
.glass-band {
  /* ── Thème par défaut : MARRON / OR ── */
  --gb-1: #352513;          /* clair (bas-droite du dégradé)  */
  --gb-2: #241809;
  --gb-3: #160F05;
  --gb-4: #0E0904;          /* le plus foncé (haut-gauche)    */
  --gb-accent:       #C59B2A;
  --gb-accent-light: #E8C96A;
  --gb-accent-rgb:   232, 201, 106;
  --gb-glass-rgb:    120, 84, 28;   /* fond verre (haut)      */
  --gb-glass-deep-rgb: 58, 38, 12;  /* fond verre (bas)       */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Dégradé diagonal : clair en bas-droite → foncé en haut-gauche */
  background: linear-gradient(315deg,
              var(--gb-1) 0%,
              var(--gb-2) 40%,
              var(--gb-3) 78%,
              var(--gb-4) 100%);
  color: #FDFDFD;
  padding: 5rem 0;
}

/* ── Modificateurs de thème (déclinaisons multi-couleurs) ───────────── */
/* Thème VERT PROFOND / OR (ex. section Histoire) */
.glass-band--green {
  --gb-1: #1E4D3A;
  --gb-2: #143729;
  --gb-3: #0C241B;
  --gb-4: #07160F;
  --gb-accent:       #C59B2A;
  --gb-accent-light: #E8C96A;
  --gb-accent-rgb:   232, 201, 106;
  --gb-glass-rgb:    28, 92, 66;
  --gb-glass-deep-rgb: 10, 40, 28;
}
/* Thème NAVY / OR (réserve, ex. autres pages) */
.glass-band--navy {
  --gb-1: #2A3C6B;
  --gb-2: #1F2F5A;
  --gb-3: #141F3D;
  --gb-4: #0C1428;
  --gb-accent:       #C59B2A;
  --gb-accent-light: #E8C96A;
  --gb-accent-rgb:   232, 201, 106;
  --gb-glass-rgb:    40, 60, 110;
  --gb-glass-deep-rgb: 16, 26, 52;
}
/* Thème ROUGE BORDEAUX PROFOND / OR (ex. CTA "Signaler une situation") */
.glass-band--bordeaux {
  --gb-1: #5A1A22;          /* bordeaux clair (bas-droite)    */
  --gb-2: #401015;
  --gb-3: #2A090D;
  --gb-4: #1A0507;          /* le plus sombre (haut-gauche)   */
  --gb-accent:       #C59B2A;
  --gb-accent-light: #E8C96A;
  --gb-accent-rgb:   232, 201, 106;
  --gb-glass-rgb:    120, 34, 42;
  --gb-glass-deep-rgb: 58, 14, 18;
}

/* Symbole géant en filigrane (optionnel) — piloté par --gb-mark.
   Par défaut un guillemet ouvrant ; redéfinir --gb-mark pour un autre
   caractère, ou masquer via .glass-band--nomark. */
.glass-band::before {
  content: var(--gb-mark, '\201C');
  position: absolute;
  top: 0.06em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 700;
  font-size: clamp(12rem, 26vw, 22rem);
  line-height: 1;
  color: rgba(var(--gb-accent-rgb), 0.08);
  pointer-events: none;
  z-index: 0;
}
.glass-band--nomark::before { content: none; }

.glass-band__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.glass-band__eyebrow {
  display: inline-block;
  font-family: var(--font-mono), monospace;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gb-accent-light);
  margin-bottom: 1.25rem;
}
.glass-band__title {
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: #FDFDFD;
}
/* Emphase dans le titre : or clair (lisible sur fond sombre, tous thèmes) */
.glass-band__title em { color: var(--gb-accent-light); font-style: italic; }
.glass-band__lead {
  font-family: var(--font-sans);   /* texte de lecture → sans-serif lisible */
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.7;
  color: rgba(253, 253, 253, 0.92);
  margin: 0 auto 2rem;
  max-width: 680px;
}
.glass-band__rule {
  width: 60px; height: 2px;
  background: var(--gb-accent);
  border: 0; margin: 0 auto 1.25rem;
  opacity: 0.85;
}
.glass-band__author {
  font-family: var(--font-mono), monospace;
  font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gb-accent-light);
  /* La règle globale `p { max-width: 68ch }` rendait ce bloc non centré
     (marges latérales à 0). On recentre le bloc + le texte. */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.glass-band__author span {
  display: block;
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: 0.95rem;
  color: rgba(253, 253, 253, 0.72);
  letter-spacing: 0.01em;
  margin-top: 0.15rem;
}

/* ── PANNEAU "LIQUID GLASS" (façon Apple) — thémable ──────────────────
   Utilisé seul (citation) ou en grille (cartes). Couleurs dérivées des
   variables --gb-* du bandeau parent. */
.glass-panel {
  position: relative;
  color: #FDFDFD;
  padding: 2.25rem 2.25rem 2.5rem;
  /* couche 1 : reflet spéculaire diagonal animé
     couche 2 : voile teinté accent en haut
     couche 3 : fond verre (accent profond) */
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0.26) 49%,
      rgba(255, 255, 255, 0.12) 53%,
      rgba(255, 255, 255, 0) 64%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(var(--gb-accent-rgb), 0.28) 0%,
      rgba(var(--gb-accent-rgb), 0.10) 30%,
      rgba(var(--gb-accent-rgb), 0) 58%),
    linear-gradient(165deg,
      rgba(var(--gb-glass-rgb), 0.46) 0%,
      rgba(var(--gb-glass-deep-rgb), 0.62) 100%);
  background-size: 250% 100%, 100% 100%, 100% 100%;
  background-position: 120% 0, 0 0, 0 0;
  border: 1px solid rgba(var(--gb-accent-rgb), 0.45);
  border-radius: 22px;
  backdrop-filter: blur(18px) saturate(160%) brightness(0.94);
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(0.94);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 248, 230, 0.55),
    inset 0 0 0 1px rgba(var(--gb-accent-rgb), 0.12),
    inset 0 -16px 32px rgba(0, 0, 0, 0.40);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55),
               0 2px 14px rgba(0, 0, 0, 0.40);
  animation: glass-sheen 9s ease-in-out infinite;
}
@keyframes glass-sheen {
  0%, 100% { background-position: 120% 0, 0 0, 0 0; }
  50%      { background-position: -20% 0, 0 0, 0 0; }
}
/* Décalage du reflet entre cartes pour un balayage non synchrone */
.glass-panel:nth-child(2) { animation-delay: .9s; }
.glass-panel:nth-child(3) { animation-delay: 1.8s; }
.glass-panel:nth-child(4) { animation-delay: 2.7s; }
.glass-panel:nth-child(5) { animation-delay: 3.6s; }

/* Variante CITATION : texte serif italique centré + gros guillemets */
.glass-panel--quote {
  font-family: var(--font-serif), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.55;
  margin: 3.25rem auto 3.5rem;
  max-width: 760px;
  padding: 2.75rem 3.25rem 3rem;
}
.glass-panel--quote::before,
.glass-panel--quote::after {
  position: absolute;
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 700; font-style: normal;
  font-size: clamp(4.5rem, 10vw, 7rem);
  line-height: 0;
  color: var(--gb-accent-light);
  opacity: 0.80;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
  pointer-events: none;
}
.glass-panel--quote::before { content: '\201C'; top: 0.32em; left: 0.28em; }
.glass-panel--quote::after  { content: '\201D'; bottom: -0.05em; right: 0.3em; }

/* Mot-clé mis en relief dans un panneau (or pâle lumineux, lisible) */
.glass-panel .accent {
  font-style: italic;
  font-weight: 700;
  color: #F4DCA0;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55),
               0 0 14px rgba(var(--gb-accent-rgb), 0.35);
}

/* ── TIMELINE sur un GLASS BAND : passage en clair-sur-sombre + cartes ──
   Surcharge restreinte à .glass-band pour ne pas affecter les timelines
   classiques (page claire). Chaque .timeline-item devient un glass-panel. */
.glass-band .timeline::before { background: rgba(var(--gb-accent-rgb), 0.30); }
.glass-band .timeline-item { padding-bottom: var(--space-lg, 2rem); }
.glass-band .timeline-item::before {
  background: var(--gb-accent);
  border-color: var(--gb-3);
  box-shadow: 0 0 0 1px var(--gb-accent), 0 0 12px rgba(var(--gb-accent-rgb), 0.45);
}
.glass-band .timeline-date  { color: var(--gb-accent-light); }
.glass-band .timeline-title { color: #FDFDFD; }
.glass-band .timeline-item > p { color: rgba(253, 253, 253, 0.88); }

/* Carte glass appliquée à l'item de frise : on réutilise .glass-panel
   dans le markup ; ici on ajuste juste le padding/tonalité pour une carte. */
.glass-band .timeline-item.glass-panel {
  padding: 1.6rem 1.9rem 1.7rem;   /* respiration interne nette (texte non collé) */
  margin-bottom: var(--space-lg, 2rem);
  border-radius: 16px;
}
.glass-band .timeline-item.glass-panel > p { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.glass-band .timeline-item.glass-panel:last-child { margin-bottom: 0; }

/* Sur GLASS BAND (desktop ≥720px) : frise CENTRÉE en alternance.
   Barre verticale au milieu ; cartes verre alternées — 1ʳᵉ à DROITE,
   2ᵉ à GAUCHE, 3ᵉ à droite, etc. (on inverse l'alternance native du site,
   qui place les impairs à gauche). Texte toujours aligné à gauche dans la
   carte (plus lisible qu'un texte justifié à droite), pastille sur la barre
   reliée à la carte par un petit connecteur. */
@media (min-width: 720px) {
  .glass-band .timeline { max-width: 920px; margin: 0 auto; padding-left: 0; }
  /* Barre centrale (héritée de components.css) : on garde left:50% + translateX.
     On la teinte juste à l'accent du thème via la règle plus haut. */

  /* Largeur d'une carte = un peu moins de la moitié, pour laisser un
     couloir central autour de la barre. */
  .glass-band .timeline-item {
    width: 47%;
    margin-bottom: var(--space-lg, 2rem);
    text-align: left;        /* texte toujours à gauche dans la carte */
  }

  /* Items IMPAIRS (1, 3, 5) → à DROITE de la barre.
     Le couloir central est géré par la marge (margin-left), PAS par le
     padding : le padding interne de la carte verre est ainsi préservé. */
  .glass-band .timeline-item:nth-child(odd) {
    margin-left: 53%;
    text-align: left;
  }
  /* Items PAIRS (2, 4) → à GAUCHE de la barre */
  .glass-band .timeline-item:nth-child(even) {
    margin-left: 0;
    text-align: left;
  }

  /* Pastille dorée posée sur la barre centrale (et non sur le bord de carte).
     Impairs (carte à droite) : pastille sur le bord GAUCHE de la carte.
     Pairs (carte à gauche)  : pastille sur le bord DROIT de la carte. */
  .glass-band .timeline-item::before { top: 1.5rem; }
  .glass-band .timeline-item:nth-child(odd)::before  { left: -32px;  right: auto; }
  .glass-band .timeline-item:nth-child(even)::before { right: -32px; left: auto; }

  /* Petit connecteur horizontal entre la barre centrale et la carte, via
     ::after, pour matérialiser le lien (couleur accent translucide). */
  .glass-band .timeline-item::after {
    content: '';
    position: absolute;
    top: calc(1.5rem + 6px);
    width: 26px; height: 1px;
    background: rgba(var(--gb-accent-rgb), 0.45);
  }
  .glass-band .timeline-item:nth-child(odd)::after  { left: -28px; }
  .glass-band .timeline-item:nth-child(even)::after { right: -28px; }
}

/* Responsive + reduced-motion mutualisés pour le composant */
@media (max-width: 540px) {
  .glass-band { padding: 3.5rem 0; }
  .glass-panel--quote { padding: 2.5rem 1.5rem 2.75rem; }
  .glass-panel--quote::before { font-size: 4.5rem; top: 0.34em; left: 0.12em; }
  .glass-panel--quote::after  { font-size: 4.5rem; bottom: 0; right: 0.14em; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-panel { animation: none !important; background-position: 38% 0, 0 0, 0 0; }
}

/* ── CARTES (.card) en GLASS PANEL sur un GLASS BAND ──────────────────
   Permet d'utiliser une grille de cartes (.grid .card) sur un bandeau
   sombre : on neutralise le fond/bordure clairs natifs de .card (le
   .glass-panel fournit déjà le verre) et on éclaircit la typo. */
.glass-band .grid { position: relative; z-index: 1; }
.glass-band .card.glass-panel {
  background:                                   /* re-déclare le verre (sinon le radial clair de .card l'emporte) */
    linear-gradient(115deg,
      transparent 0%, rgba(255,255,255,0) 34%,
      rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.26) 49%,
      rgba(255,255,255,0.12) 53%, rgba(255,255,255,0) 64%, transparent 100%),
    linear-gradient(180deg,
      rgba(var(--gb-accent-rgb), 0.28) 0%, rgba(var(--gb-accent-rgb), 0.10) 30%,
      rgba(var(--gb-accent-rgb), 0) 58%),
    linear-gradient(165deg,
      rgba(var(--gb-glass-rgb), 0.46) 0%, rgba(var(--gb-glass-deep-rgb), 0.62) 100%);
  background-size: 250% 100%, 100% 100%, 100% 100%;
  background-position: 120% 0, 0 0, 0 0;
  border: 1px solid rgba(var(--gb-accent-rgb), 0.45);
  border-radius: 16px;
  padding: 1.6rem 1.8rem 1.7rem;
}
.glass-band .card.glass-panel .card-eyebrow { color: var(--gb-accent-light); }
.glass-band .card.glass-panel .card-title   { color: #FDFDFD; }
.glass-band .card.glass-panel .card-desc    {
  color: rgba(253, 253, 253, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}
/* Lien e-mail protégé + bouton "Copier" lisibles sur fond sombre.
   Texte blanc, soulignement doré, hover net (texte or clair + halo). */
.glass-band .card.glass-panel .js-email-protect {
  color: #FFFFFF;
  border-bottom-color: rgba(var(--gb-accent-rgb), 0.65);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}
.glass-band .card.glass-panel .js-email-protect:hover,
.glass-band .card.glass-panel .js-email-protect:focus-visible {
  color: var(--gb-accent-light);
  border-bottom-color: var(--gb-accent-light);
  text-shadow: 0 0 10px rgba(var(--gb-accent-rgb), 0.55);
}
/* Le [at] et le [.] restent dorés et lisibles */
.glass-band .card.glass-panel .js-email-protect .at,
.glass-band .card.glass-panel .js-email-protect .dot { color: var(--gb-accent-light); }
.glass-band .card.glass-panel .btn-copy {
  color: var(--gb-accent-light);
  border-color: rgba(var(--gb-accent-rgb), 0.50);
}
.glass-band .card.glass-panel .btn-copy:hover {
  background: rgba(var(--gb-accent-rgb), 0.12);
  border-color: var(--gb-accent-light);
  color: #FDFDFD;
}
/* Badges + liens "voir les pièces" lisibles sur fond sombre.
   Les badges passent en or clair / blanc translucide ; .link-more en blanc
   avec soulignement doré et hover or clair. */
.glass-band .card.glass-panel .badge {
  color: var(--gb-accent-light);
  border-color: rgba(var(--gb-accent-rgb), 0.45);
  background: rgba(var(--gb-accent-rgb), 0.14);
}
.glass-band .card.glass-panel .badge--green {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
}
.glass-band .card.glass-panel .link-more {
  color: #FFFFFF;
  border-bottom-color: rgba(var(--gb-accent-rgb), 0.65);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.glass-band .card.glass-panel .link-more:hover,
.glass-band .card.glass-panel .link-more:focus-visible {
  color: var(--gb-accent-light);
  border-bottom-color: var(--gb-accent-light);
}

/* ── .support-card (cartes adhésion/don) en GLASS PANEL sur GLASS BAND ──
   Même principe : on neutralise le fond/bordure clairs et on éclaircit la
   typo ; le prix, l'eyebrow et les puces ✓ restent dorés (lisibles). */
.glass-band .support-options { position: relative; z-index: 1; }
.glass-band .support-card.glass-panel {
  background:
    linear-gradient(115deg,
      transparent 0%, rgba(255,255,255,0) 34%,
      rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.26) 49%,
      rgba(255,255,255,0.12) 53%, rgba(255,255,255,0) 64%, transparent 100%),
    linear-gradient(180deg,
      rgba(var(--gb-accent-rgb), 0.28) 0%, rgba(var(--gb-accent-rgb), 0.10) 30%,
      rgba(var(--gb-accent-rgb), 0) 58%),
    linear-gradient(165deg,
      rgba(var(--gb-glass-rgb), 0.46) 0%, rgba(var(--gb-glass-deep-rgb), 0.62) 100%);
  background-size: 250% 100%, 100% 100%, 100% 100%;
  background-position: 120% 0, 0 0, 0 0;
  border: 1px solid rgba(var(--gb-accent-rgb), 0.45);
  border-top: 4px solid var(--gb-accent);   /* on conserve le liseré or épais en haut */
  border-radius: 16px;
  padding: 1.9rem 1.9rem 1.8rem;
}
/* Les 3 premiers éléments (eyebrow, titre, prix) centrés dans la carte. */
.glass-band .support-card.glass-panel .card-eyebrow {
  color: var(--gb-accent-light);
  display: block;
  text-align: center;
}
.glass-band .support-card.glass-panel h2 { color: #FDFDFD; text-align: center; }

/* ── PRIX en "badge LIQUID GLASS" — catchy, centré, reflets dorés ──────
   Pastille de verre dorée translucide avec reflet supérieur (::before),
   bordure dorée et léger halo. Police serif pour la mise en valeur.
   Vaut pour "dès 2 € / an" comme pour "Libre". */
.glass-band .support-card.glass-panel .price {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.25rem auto 0.5rem;     /* centré horizontalement dans la carte */
  position: relative;
  overflow: hidden;
  padding: 0.55rem 1.4rem;
  font-family: var(--font-serif), Georgia, serif;   /* police mise en valeur */
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-align: center;
  color: #FFF3D4;                                   /* or très clair lumineux */
  border: 1px solid rgba(var(--gb-accent-rgb), 0.55);
  border-radius: 999px;                             /* pilule */
  background:
    linear-gradient(180deg,
      rgba(255, 248, 225, 0.22) 0%,
      rgba(255, 248, 225, 0.05) 48%,
      rgba(var(--gb-accent-rgb), 0.10) 100%),
    linear-gradient(160deg,
      rgba(var(--gb-accent-rgb), 0.30) 0%,
      rgba(var(--gb-glass-deep-rgb), 0.34) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.30),
    0 0 16px rgba(var(--gb-accent-rgb), 0.28),       /* halo doré */
    inset 0 1px 1px rgba(255, 248, 230, 0.55);       /* arête haute brillante */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Reflet "liquid glass" : bande lumineuse sur la moitié haute de la pilule */
.glass-band .support-card.glass-panel .price::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%);
  pointer-events: none;
}
/* "Libre" : on garde le serif italique, taille harmonisée avec le badge */
.glass-band .support-card.glass-panel .price--libre {
  font-style: italic;
  font-size: 32px;
}
/* Le suffixe "/ an" reste discret dans le badge */
.glass-band .support-card.glass-panel .price span {
  font-family: var(--font-mono), monospace;
  font-style: normal;
  vertical-align: 0.12em;
}

.glass-band .support-card.glass-panel .card-desc {
  color: rgba(253, 253, 253, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}
.glass-band .support-card.glass-panel ul li {
  color: rgba(253, 253, 253, 0.90);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}
.glass-band .support-card.glass-panel ul li::before { color: var(--gb-accent-light); }

/* ── Bouton HelloAsso + logo centrés dans une carte support-card ──────
   .hello-cta pousse le bouton en bas de la carte (margin-top:auto, comme
   l'ancien .btn) et le centre ; .hello-logo centre le logo en dessous. */
.support-card .hello-cta {
  margin-top: auto;          /* colle le bloc bouton en bas de la carte */
  margin-bottom: 0;
  max-width: none;           /* annule p { max-width: 68ch } */
  /* flex + justify-content: centrage fiable du bouton, quel que soit
     son display (inline-flex). text-align en secours. */
  display: flex;
  justify-content: center;
  text-align: center;
}
.support-card .hello-logo {
  margin-top: var(--space-sm);
  margin-bottom: 0;
  max-width: none;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* ── Vrai BOUTON HelloAsso (logo intégré) + centrage ──────────────────
   .hello-btn-wrap centre le bouton ; .btn-helloasso porte le logo dans
   une pastille blanche (le logo coloré reste lisible sur l'or). */
.hello-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
.hello-btn-secondary {
  max-width: none;
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}
.btn-helloasso {
  gap: 10px;
  padding-left: 14px;        /* un peu d'air autour de la pastille logo */
}
.btn-helloasso .btn-helloasso__logo {
  height: 22px;
  width: auto;
  display: block;
  background: #FFFFFF;       /* pastille blanche → logo coloré lisible sur l'or */
  border-radius: 5px;
  padding: 3px 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ── Grille de TARIFS d'adhésion (liste montant + libellé) ───────────
   Utilisée dans la carte "Adhérer" : chaque ligne = un montant doré à
   gauche + le libellé du membre à droite. Lisible sur fond clair OU
   sur glass-band (la couleur du libellé s'adapte via héritage). */
.tarif-list { list-style: none; margin: var(--space-sm) 0 var(--space-md); padding: 0; }
.tarif-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(197, 155, 42, 0.18);
}
.tarif-list li:last-child { border-bottom: none; }
.tarif-list .tarif-montant {
  flex: 0 0 auto;
  min-width: 78px;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gold);
}
.tarif-list .tarif-label {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
/* Sur glass-band : montants en or clair, libellés en ivoire */
.glass-band .tarif-list li { border-bottom-color: rgba(var(--gb-accent-rgb), 0.20); }
.glass-band .tarif-list .tarif-montant { color: var(--gb-accent-light); }
.glass-band .tarif-list .tarif-label {
  color: rgba(253, 253, 253, 0.90);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}

/* ── Variante de prix "Libre" (carte don) : serif italique, centré ──── */
.price--libre {
  font-family: var(--font-serif) !important;   /* surcharge le mono de .price */
  font-style: italic;
  font-weight: 600;
  text-align: center;
  font-size: 40px;
  letter-spacing: 0.01em;
}

/* ── .identity-grid (liste d'identifiants dt/dd) sur un GLASS BAND ─────
   Le <dl> devient un panneau verre unique ; libellés (dt) en or clair,
   valeurs (dd) en ivoire ; séparateurs de lignes en or translucide. */
.glass-band .identity-grid {
  position: relative; z-index: 1;
  background:
    linear-gradient(165deg,
      rgba(var(--gb-glass-rgb), 0.42) 0%, rgba(var(--gb-glass-deep-rgb), 0.58) 100%);
  border: 1px solid rgba(var(--gb-accent-rgb), 0.40);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(150%) brightness(0.96);
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38),
              inset 0 1px 1px rgba(255, 248, 230, 0.30);
}
.glass-band .identity-grid dt {
  color: var(--gb-accent-light);
  background: rgba(0, 0, 0, 0.14);
  border-bottom: 1px solid rgba(var(--gb-accent-rgb), 0.18);
}
.glass-band .identity-grid dd {
  color: rgba(253, 253, 253, 0.92);
  border-bottom: 1px solid rgba(var(--gb-accent-rgb), 0.18);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}

/* ── ACCORDÉON (FAQ) sur un GLASS BAND ────────────────────────────────
   Chaque .accordion devient un panneau verre ; titres en ivoire, corps
   éclairci, chevron/markers dorés. Le JS (initAccordions) est inchangé. */
.glass-band .accordion {
  position: relative; z-index: 1;
  background:
    linear-gradient(165deg,
      rgba(var(--gb-glass-rgb), 0.40) 0%, rgba(var(--gb-glass-deep-rgb), 0.56) 100%);
  border: 1px solid rgba(var(--gb-accent-rgb), 0.38);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(150%) brightness(0.97);
  -webkit-backdrop-filter: blur(12px) saturate(150%) brightness(0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30),
              inset 0 1px 1px rgba(255, 248, 230, 0.25);
}
.glass-band .accordion-head { color: #FDFDFD; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.glass-band .accordion-head:hover { background: rgba(var(--gb-accent-rgb), 0.12); }
.glass-band .accordion-head .chevron { color: var(--gb-accent-light); }
.glass-band .accordion-body p,
.glass-band .accordion-body ul,
.glass-band .accordion-body ol {
  color: rgba(253, 253, 253, 0.90);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}
.glass-band .accordion-body li::marker { color: var(--gb-accent-light); }
/* Liens dans les réponses de la FAQ sur fond sombre : texte OR (doré),
   soulignement doré, et BLANC au survol/focus pour rester lisible. */
.glass-band .accordion-body a,
.glass-band .accordion-body a.js-email-protect {
  color: var(--gb-accent-light);
  border-bottom-color: rgba(var(--gb-accent-rgb), 0.65);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.glass-band .accordion-body a:hover,
.glass-band .accordion-body a:focus-visible,
.glass-band .accordion-body a.js-email-protect:hover,
.glass-band .accordion-body a.js-email-protect:focus-visible {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
/* Le [at] et le [.] du lien e-mail restent dorés */
.glass-band .accordion-body .js-email-protect .at,
.glass-band .accordion-body .js-email-protect .dot { color: var(--gb-accent-light); }