/* ============================================================
   PAGE LEGEND (invest.galeon.care/fr/legend, /legend) AU GABARIT V10 — ce qui lui est propre
   ------------------------------------------------------------
   Chargée APRÈS css/v10.css et css/v10-invest.css, sur cette seule page (aperçu :
   public/preview/invest/legend/ et /en/). Classes leg- : rien ne heurte v10 ni inv-.
   Le hero sur la photo du plateau Legend, la bande presse en couleur, les étapes « problème » et
   « comment ça fonctionne », les chiffres sur la carte. Les conditions des obligations, le simulateur et
   les boutons « Investir » sont retirés avec js/v10-invest-legend.js (campagne close le 12/04/2026 :
   revue MiCA du 16/10/2026, docs/2026-10-16-revue-mica-invest.md) : ne pas les remettre.
   Piège 8 : les images n'ont d'attributs width/height que si cette feuille fixe width + height:auto.
   ============================================================ */

/* ─── HERO ───────────────────────────────────────── */
/* La photo du plateau (les deux visages au centre) ; le texte en bas, sur le voile, comme l'origine. La section
   porte v-hero v-hero--seul : marges, titre et largeurs de .v-hero (css/v10.css). */
.leg-hero{isolation:isolate;min-height:min(100svh,940px);display:flex;align-items:flex-end;background:var(--fond);text-align:center}
.leg-hero__fond{position:absolute;inset:0;z-index:-2;margin:0}
.leg-hero__fond img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.leg-hero__voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,16,32,.7) 0%,rgba(11,16,32,0) 20%,rgba(11,16,32,0) 42%,rgba(11,16,32,.72) 66%,var(--fond) 100%)}
.leg-hero .wrap{position:relative}
.leg-hero h1{margin:0 auto;text-wrap:balance}
.leg-hero h1 a{color:inherit}
.leg-hero h1 img{display:inline-block;height:.9em;width:auto;aspect-ratio:790/141;vertical-align:-.12em;margin-left:.18em;filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}
.leg-pastilles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.leg-pastille{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:14px;color:var(--tx);transition:border-color .2s,background .2s}
a.leg-pastille:hover{background:rgba(255,255,255,.12)}
.leg-pastille__google{width:85px;height:auto}
.leg-pastille__etoiles{width:98px;height:auto}
.leg-pastille__visages{width:70px;height:auto}
.leg-pastille b{font-weight:600}
.leg-pastille__sep{width:1px;height:18px;background:rgba(255,255,255,.25)}
@media (max-width:767px){
  /* l'image mobile garde les visages en bas : le texte passe au-dessus, sur le noir du plateau (comme l'origine) */
  .leg-hero{min-height:1000px;align-items:flex-start;padding-top:calc(var(--nav-h) + 56px)}
  .leg-hero__voile{background:linear-gradient(180deg,rgba(11,16,32,.35) 0%,rgba(11,16,32,0) 45%,rgba(11,16,32,0) 86%,var(--fond) 100%)}
}

/* ─── PRESSE : les logos d'origine sont en couleur (BFM, Europe 1, RMC, CNews) ─ */
/* v10.css passe en blanc les logos d'une section sombre : ici, un aplat de couleur deviendrait un bloc. */
.v-sec.leg-presse{padding:clamp(40px,5vw,64px) 0}
.leg-presse .defile__piste{gap:44px}
.v-sec.leg-presse .defile__piste img{height:40px;max-width:150px;filter:none;opacity:1}

/* ─── TITRES DE SECTION ──────────────────────────── */
.leg-tete{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,64px)} /* les mesures de .v-sec__tete--centre */
.leg-tete h2{text-wrap:balance}
.leg-tete .lead{margin:18px auto 0}
.leg-titre-ic img{display:inline-block;width:.9em;height:auto;margin-left:.2em;vertical-align:-.1em}
.leg-rouge{background:linear-gradient(70deg,#ff3b3c,#ff8a7a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:inherit}
.leg-check{display:inline-block;width:.78em;height:.78em;vertical-align:-.04em;margin:0 .18em 0 .1em}

/* ─── VIDÉO (js/galeon-video.js : rien ne part vers YouTube avant le clic) ─ */
.leg-video{max-width:980px;margin:0 auto}
.leg-video figure.galeon-video{margin:0}
.leg-video .galeon-video__place{border:1px solid var(--line-d);box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* ─── ÉTAPES (problème, comment ça fonctionne) ───── */
.leg-etapes{display:flex;justify-content:center;align-items:stretch;gap:12px;margin:0;padding:0;list-style:none}
.leg-etape{flex:1 1 0;min-width:0;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px;border-radius:20px;text-align:center;border:1px solid var(--line-d);background:radial-gradient(90% 70% at 50% 0,rgba(71,154,243,.16),transparent 70%),rgba(255,255,255,.04)}
.leg-etape h3{margin:0}
.leg-etape p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}
.leg-etape__img{width:128px;height:auto}
.leg-etapes--rouge .leg-etape{justify-content:space-between;background:radial-gradient(90% 70% at 50% 0,rgba(255,59,60,.16),transparent 70%),rgba(255,255,255,.04)}
.leg-etapes--rouge .leg-etape__img{width:112px}
.leg-fleche{flex:none;align-self:center;display:grid;place-items:center;width:22px}
.leg-fleche img{width:18px;height:auto;opacity:.7}
@media (max-width:1000px){
  .leg-etapes--bleu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .leg-etapes--bleu .leg-fleche{display:none}
  .leg-etapes--bleu .leg-etape{max-width:none}
}
@media (max-width:760px){
  .leg-etapes--rouge{flex-direction:column;align-items:center}
  .leg-etapes--rouge .leg-etape{width:100%;max-width:420px;flex:none}
  .leg-etapes--rouge .leg-fleche img{transform:rotate(90deg)}
}
@media (max-width:600px){
  .leg-etapes--bleu{grid-template-columns:minmax(0,1fr)}
}
.leg-pastille-titre{display:flex;justify-content:center;margin:0 0 22px}
.leg-pastille-titre p{margin:0;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:rgba(71,154,243,.14);border:1px solid rgba(140,194,255,.3);font-size:14px;font-weight:600;color:var(--blue-l)}

/* ─── CHIFFRES SUR LA CARTE ──────────────────────── */
.v-sec.leg-campagne{overflow:hidden;isolation:isolate}
.leg-carte{position:absolute;left:50%;top:50%;z-index:-1;width:min(1000px,120%);height:auto;transform:translate(-50%,-50%);opacity:.32;pointer-events:none}
.leg-chiffres{display:flex;justify-content:center;gap:clamp(32px,8vw,120px);margin:0;padding:clamp(24px,4vw,56px) 0;text-align:center}
.leg-chiffre b{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(40px,4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1} /* .v-chiffre b */
.leg-chiffre b img{width:32px;height:auto}
.leg-chiffre span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--dim)}
@media (max-width:420px){.leg-chiffres{flex-direction:column;gap:28px}}

/* ─── TÉMOIGNAGES ────────────────────────────────── */
.leg-temoins .v-videos{margin-top:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.leg-temoins .v-videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.leg-temoins .defiles{margin-top:clamp(40px,5vw,64px)}