/* Feuille de base du catalogue : lisibilité et rien d'autre.
   L'identité ESGIM complète arrive avec la coquille de la landing (étape 2). */

:root {
  color-scheme: light dark;
  --ink: #12212e;
  --ink-soft: #4a5b6a;
  --paper: #ffffff;
  --paper-soft: #f4f7f9;
  --line: #dbe3e9;
  --accent: #0e6e78;
  --accent-soft: #e6f2f3;
  --measure: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef3;
    --ink-soft: #a3b4c2;
    --paper: #101a22;
    --paper-soft: #172530;
    --line: #273947;
    --accent: #5fc7d1;
    --accent-soft: #123034;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.05rem/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }
main.wrap { max-width: 52rem; padding-bottom: 4rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; position: fixed; z-index: 10; background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: .4rem; }

header.site { border-bottom: 1px solid var(--line); background: var(--paper-soft); }
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.brand { font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.langs { display: flex; gap: .5rem; font-size: .85rem; }
.langs a, .langs span { padding: .2rem .45rem; border-radius: .3rem; text-decoration: none; color: var(--ink-soft); }
.langs a:hover { background: var(--accent-soft); color: var(--accent); }
.langs span[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.crumbs { font-size: .85rem; color: var(--ink-soft); margin: 1.5rem 0 .5rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs span { margin: 0 .35rem; }

.kind { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: .15rem .5rem; border-radius: .25rem; margin-right: .5rem; }
p.kind { margin: 0 0 .5rem; }

h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.2; letter-spacing: -.02em; margin: .2rem 0 1rem; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2.4rem 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
p, li { max-width: var(--measure); }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
a { color: var(--accent); text-underline-offset: .15em; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }
code { font-size: .9em; background: var(--paper-soft); padding: .1rem .3rem; border-radius: .25rem; }
pre { overflow-x: auto; background: var(--paper-soft); padding: 1rem; border-radius: .5rem; }
img { max-width: 100%; height: auto; }

.doc table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-soft); }

.faq { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.faq details { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details > div { margin-top: .6rem; color: var(--ink-soft); }

.related ul { list-style: none; padding: 0; }
.related li { margin: .4rem 0; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 2rem 0 0; }
.chips a { font-size: .8rem; text-decoration: none; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 1rem; padding: .25rem .7rem; }
.chips a:hover { border-color: var(--accent); color: var(--accent); }

ul.cards { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin: 1.5rem 0; }
ul.cards li { border: 1px solid var(--line); border-radius: .6rem; padding: 1rem; background: var(--paper-soft); max-width: none; }
ul.cards li a { font-weight: 600; text-decoration: none; }
ul.cards li a:hover { text-decoration: underline; }
ul.cards li p { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-soft); max-width: none; }

footer.site { border-top: 1px solid var(--line); background: var(--paper-soft); padding: 1.5rem 0 2.5rem; font-size: .88rem; color: var(--ink-soft); }
footer.site p { max-width: none; margin: .4rem 0; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

@media (max-width: 32rem) {
  body { font-size: 1rem; }
  ul.cards { grid-template-columns: 1fr; }
}


/* ============================================================
   Identité ESGIM — landing FR « go for Silver ».
   Tokens repris tels quels de references/design-system.md du skill
   esgim-design : ils sont échantillonnés sur esgim.eu, ne pas les
   dériver. Tout est porté par .esgim pour que les 356 pages du
   catalogue gardent leur feuille de lecture inchangée.
   ============================================================ */

/* Inter est l'identité ESGIM. Servie depuis l'origine : la CSP
   n'autorise ni fonts.googleapis.com ni fonts.gstatic.com. */
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.esgim {
  --esgim-navy: #001b36;
  --esgim-abyss: #042646;
  --esgim-deep: #123a5e;
  --esgim-ocean: #115290;
  --esgim-blue: #1d70b6;
  --esgim-bright: #2b7cba;
  --esgim-polar: #5598bd;
  --esgim-teal: #06a88e;
  --esgim-indigo: #283c7e;
  --on-dark: #eef4fb;
  --on-dark-muted: #9fb4cc;
  --paper: #fff;
  --ink: #111827;
  --gray-500: #6b7280;
  --grad-brand: linear-gradient(90deg, var(--esgim-teal) 0%, #009fa0 30%, var(--esgim-blue) 70%, var(--esgim-indigo) 100%);
  --grad-ocean: linear-gradient(180deg, var(--esgim-abyss) 0%, var(--esgim-navy) 100%);
  --maxw: 1200px;

  margin: 0;
  background: var(--esgim-navy);
  color: var(--on-dark);
  font-family: "InterVar", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.esgim h1, .esgim h2, .esgim h3, .esgim h4, .esgim p, .esgim ul, .esgim ol, .esgim figure, .esgim blockquote { margin: 0; max-width: none; }
.esgim a { color: var(--esgim-bright); text-decoration: none; }
.esgim a:hover { text-decoration: underline; }
.esgim img { max-width: 100%; height: auto; }
.esgim strong { font-weight: 700; color: #fff; }
.esgim .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Grain : la profondeur d'eau, et de quoi tuer le banding des dégradés. */
.esgim::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  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.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.esgim > * { position: relative; z-index: 1; }

.esgim .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.esgim section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.esgim .eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--esgim-polar); }
.esgim .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.esgim .rule { height: 2px; width: 120px; background: var(--grad-brand); border-radius: 2px; margin: 2.5rem auto 0; }

/* — En-tête — */
.esgim-head { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0,27,54,.62); border-bottom: 1px solid rgba(255,255,255,.06); }
.esgim-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.esgim-head img { display: block; height: 32px; width: auto; }
/* Sélecteur de langue des landings : mêmes classes que le catalogue,
   recolorées pour l'en-tête sombre. */
.esgim-head .bar-right { display: flex; align-items: center; gap: .9rem; }
.esgim-head .langs { font-size: .82rem; letter-spacing: .04em; }
.esgim-head .langs a, .esgim-head .langs span { color: var(--on-dark-muted); }
.esgim-head .langs a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.esgim-head .langs span[aria-current] { color: #fff; background: rgba(255,255,255,.12); }
/* Sous 480 px, logo + langues + bouton ne tiennent pas sur une ligne : les
   langues restent accessibles dans le pied de page. */
@media (max-width: 480px) { .esgim-head .langs { display: none; } }
.esgim-foot .langs { margin-top: .6rem; }
.esgim-foot .langs a, .esgim-foot .langs span { color: var(--on-dark-muted); }
.esgim-foot .langs span[aria-current] { color: #fff; background: rgba(255,255,255,.12); }

/* — Boutons — */
.esgim .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.6rem; border-radius: 14px; font-weight: 600; color: #fff; background: var(--grad-brand); box-shadow: 0 10px 30px -8px rgba(23,97,171,.6); transition: transform .2s, box-shadow .2s; }
.esgim .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(6,168,142,.55); text-decoration: none; }
.esgim .btn-ghost { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-dark); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: .9rem 1.6rem; font-weight: 600; transition: .2s; }
.esgim .btn-ghost:hover { border-color: var(--esgim-polar); background: rgba(255,255,255,.04); text-decoration: none; }
.esgim .cta-fine { font-size: .92rem; color: var(--on-dark-muted); margin-top: 1rem; }

/* ------------------------------------------------------------
   1 · HERO — la médaille enchâssée dans la glace
   Le voile navy est fort en haut (le logo blanc de l'en-tête doit
   tenir sur un ciel surexposé) et fort en bas (le titre oversized
   en lettres blanches), léger au milieu pour que la médaille dans
   la glace reste lisible. C'est ce voile, pas la couleur du texte,
   qui fait ressortir le titre : le blanc reste blanc.
   ------------------------------------------------------------ */
.esgim .hero-photo {
  padding: 0;
  min-height: min(92vh, 860px);
  display: flex;
  background-color: var(--esgim-navy);
  background-image:
    linear-gradient(180deg, rgba(0,27,54,.85) 0%, rgba(0,27,54,0) 26%, rgba(0,27,54,0) 68%, rgba(0,27,54,.62) 100%),
    linear-gradient(97deg, rgba(0,27,54,.97) 0%, rgba(0,27,54,.95) 44%, rgba(0,27,54,.74) 62%, rgba(0,27,54,.26) 80%, rgba(4,38,70,.10) 100%),
    url("/assets/img/hero-glace.jpg");
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
}
.esgim .hero-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding-block: clamp(2rem, 5vw, 3.25rem) clamp(2.75rem, 6vw, 4.5rem); gap: clamp(3rem, 12vh, 9rem); }
.esgim .hero-bottom { max-width: 42rem; }
.esgim .hero-photo h1 {
  font-size: clamp(2.15rem, 4.1vw, 3.45rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0,20,40,.55);
}
/* « l'argent » : le mot porte l'enjeu. Il reste blanc — la lisibilité sur
   photo prime — et c'est un trait du dégradé de marque qui le désigne. */
.esgim .hero-photo h1 .silver {
  position: relative; white-space: nowrap;
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-size: 100% .12em;
  background-position: 0 92%;
  padding-bottom: .06em;
}
/* Titre long (NL : deux phrases imposées) : un cran plus petit pour rester
   sur quatre lignes et laisser la médaille visible. */
.esgim .hero-photo h1.h1-long { font-size: clamp(2rem, 3.5vw, 2.95rem); }
.esgim .hero-photo .lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #dbe7f4; max-width: 47ch; margin: 1.5rem 0 2rem; text-shadow: 0 1px 14px rgba(0,20,40,.5); }
.esgim .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.esgim .hero-photo .cta-fine { color: #bccbdd; }
.esgim .ev-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; padding: .55rem 1.25rem; box-shadow: 0 14px 34px -14px rgba(0,27,54,.85); align-self: flex-start; }
.esgim .ev-chip img { height: 26px; width: auto; display: block; }
@media (max-width: 820px) {
  /* Sur mobile, le voile qui rendrait le titre lisible effacerait la
     médaille. On sépare donc les deux : une bande photo pleine largeur
     en haut de la page, puis le titre oversized sur navy plein. */
  .esgim .hero-photo { display: block; min-height: 0; background-image: none; background-color: var(--esgim-navy); }
  .esgim .hero-photo::before {
    content: ""; display: block; height: clamp(260px, 44vh, 400px);
    background-image:
      linear-gradient(180deg, rgba(0,27,54,.55) 0%, rgba(0,27,54,0) 20%, rgba(0,27,54,.12) 58%, rgba(0,27,54,.86) 88%, var(--esgim-navy) 100%),
      url("/assets/img/hero-glace-sm.jpg");
    background-size: cover; background-position: 50% 40%; background-repeat: no-repeat;
  }
  .esgim .hero-inner { display: block; padding-block: 1.5rem 2.75rem; }
  .esgim .hero-bottom { margin-top: 1.5rem; max-width: none; }
  .esgim .hero-photo h1 { text-shadow: none; }
  .esgim .hero-photo .lead { text-shadow: none; }
}
@media (max-width: 620px) {
  /* Les césures écrites servent le grand format ; sous 620 px le titre
     s'équilibre tout seul, sans ligne orpheline. */
  .esgim .hero-photo h1 .br-lg { display: none; }
  .esgim .hero-photo h1 { font-size: clamp(1.95rem, 7.6vw, 2.4rem); }
}
@media (max-width: 560px) { .esgim .hero-actions .btn { width: 100%; justify-content: center; } }

/* — Têtes de section — */
.esgim .sec-head { max-width: 66ch; }
.esgim .sec-head.center { margin-inline: auto; text-align: center; }
.esgim .sec-head.wide { max-width: none; }
.esgim .sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.13; margin: .6rem 0 1rem; text-wrap: balance; }
.esgim .sec-head p { color: var(--on-dark-muted); font-size: 1.08rem; }

/* ------------------------------------------------------------
   2 et 7 · BANDEAUX de trois blocs — même traitement graphique
   ------------------------------------------------------------ */
.esgim .band { padding-block: clamp(2.5rem, 5vw, 3.75rem); background: var(--esgim-abyss); border-block: 1px solid rgba(255,255,255,.07); }
.esgim .band-titre { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--esgim-polar); text-align: center; margin-bottom: 1.75rem; }
.esgim .band-3 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.esgim .band-3 li { position: relative; padding-left: 1.6rem; font-size: clamp(1rem, 1.4vw, 1.16rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: #fff; text-transform: uppercase; }
.esgim .band-3 li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--grad-brand); }
.esgim .band-3.phrases li { text-transform: none; font-weight: 600; font-size: clamp(.98rem, 1.3vw, 1.08rem); color: var(--on-dark); line-height: 1.5; }
@media (max-width: 780px) { .esgim .band-3 { grid-template-columns: 1fr; gap: 1rem; } }

/* ------------------------------------------------------------
   3 · LE PROBLÈME — quatre verbatims, l'illustration en fond
   ------------------------------------------------------------ */
.esgim .probleme { overflow: hidden; background: radial-gradient(60% 60% at 12% 0%, rgba(43,124,186,.13), transparent 70%); }
.esgim .probleme-illu {
  position: absolute; right: max(1rem, 3vw); bottom: 0; width: clamp(230px, 26vw, 390px);
  height: auto; opacity: .18; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.esgim .probleme .wrap { position: relative; z-index: 1; }
.esgim .verbatims { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; max-width: 60rem; }
.esgim .verbatims li {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 18px; padding: 1.5rem 1.6rem 1.5rem 3.1rem; position: relative;
  font-size: 1.06rem; font-style: italic; line-height: 1.55; color: var(--on-dark);
  box-shadow: 0 20px 60px -24px rgba(0,27,54,.85);
}
.esgim .verbatims li::before {
  content: "“"; position: absolute; left: 1.1rem; top: .45rem;
  font-size: 3rem; line-height: 1; font-style: normal; font-weight: 700;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 780px) { .esgim .verbatims { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   4 · LA MÉTHODE — la loupe en fond, la médaille en grand
   ------------------------------------------------------------ */
.esgim .methode {
  background-image:
    linear-gradient(90deg, rgba(0,27,54,.98) 0%, rgba(0,27,54,.95) 42%, rgba(0,27,54,.72) 72%, rgba(4,38,70,.55) 100%),
    url("/assets/img/loupe.jpg");
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.esgim .methode-head { display: grid; grid-template-columns: 1fr 240px; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.esgim .methode-head .medaille { width: 240px; height: 240px; justify-self: end; filter: drop-shadow(0 24px 44px rgba(0,10,25,.75)); }
@media (max-width: 860px) {
  .esgim .methode { background-image: linear-gradient(180deg, rgba(0,27,54,.96) 0%, rgba(0,27,54,.9) 100%), url("/assets/img/loupe.jpg"); background-position: 70% center; }
  .esgim .methode-head { grid-template-columns: 1fr; }
  .esgim .methode-head .medaille { width: 160px; height: 160px; justify-self: start; }
}
.esgim .methode-titre { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--esgim-polar); }
.esgim .etapes { list-style: none; counter-reset: e; padding: 0; margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1.5rem; }
.esgim .etapes li {
  counter-increment: e; position: relative; padding: .95rem 1.1rem .95rem 3.6rem;
  border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  font-size: 1rem; line-height: 1.45; color: var(--on-dark);
}
.esgim .etapes li::before {
  content: counter(e, decimal-leading-zero); position: absolute; left: 1.05rem; top: .95rem;
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.esgim .etapes li:last-child { border-color: rgba(6,168,142,.45); background: rgba(6,168,142,.1); font-weight: 600; color: #fff; }
@media (max-width: 780px) { .esgim .etapes { grid-template-columns: 1fr; } }

/* « Et pourquoi pas l'or ? » — le texte apparaît, il ne se déroule pas. */
.esgim .or { margin-top: clamp(2.25rem, 4vw, 3rem); max-width: 74ch; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.esgim .or summary { cursor: pointer; list-style: none; padding: 1.15rem 1.5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: #fff; display: flex; align-items: center; gap: .8rem; }
.esgim .or summary::-webkit-details-marker { display: none; }
.esgim .or summary::before { content: "+"; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; line-height: 1; color: #fff; background: var(--grad-brand); }
.esgim .or[open] summary::before { content: "–"; }
.esgim .or summary:hover { color: var(--esgim-polar); }
.esgim .or-corps { padding: 0 1.5rem 1.5rem 4rem; }
.esgim .or-corps p { color: var(--on-dark-muted); margin-bottom: .9rem; }
.esgim .or-corps p.or-chute { color: #fff; font-weight: 600; margin-bottom: 0; }
.esgim .or-corps a { color: var(--esgim-polar); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
@media (max-width: 560px) { .esgim .or-corps { padding-left: 1.5rem; } }

/* ------------------------------------------------------------
   5 · LA CITATION — à la place de la mini-bio
   ------------------------------------------------------------ */
.esgim .dire { background: var(--esgim-abyss); border-block: 1px solid rgba(255,255,255,.06); }
.esgim .dire-bloc { display: grid; grid-template-columns: 180px 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; max-width: 62rem; margin-inline: auto; }
.esgim .dire-bloc > img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: linear-gradient(var(--esgim-abyss), var(--esgim-abyss)) padding-box, var(--grad-brand) border-box; box-shadow: 0 24px 60px -26px rgba(0,10,25,.9); }
.esgim .dire blockquote { position: relative; padding-left: 1.5rem; border-left: 3px solid transparent; border-image: var(--grad-brand) 1; }
.esgim .dire blockquote p { color: var(--on-dark-muted); font-size: 1.08rem; margin-bottom: .8rem; }
.esgim .dire .dire-accroche { font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 700; font-style: italic; letter-spacing: -.02em; line-height: 1.25; color: #fff; margin-bottom: 1rem; }
.esgim .dire blockquote p:last-child { color: var(--on-dark); margin-bottom: 0; }
.esgim .dire figcaption { margin-top: 1.4rem; padding-left: 1.5rem; font-size: .95rem; color: var(--on-dark-muted); }
.esgim .dire figcaption .nom { display: block; color: #fff; font-weight: 600; }
@media (max-width: 720px) {
  .esgim .dire-bloc { grid-template-columns: 1fr; }
  .esgim .dire-bloc > img { width: 132px; height: 132px; }
}

/* ------------------------------------------------------------
   6 · TIMELINE — bande claire, trois temps
   ------------------------------------------------------------ */
.esgim .band-light { background: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%); color: var(--ink); }
.esgim .band-light .eyebrow { color: var(--esgim-ocean); }
.esgim .band-light .sec-head h2 { color: var(--ink); }
.esgim .band-light .sec-head p { color: var(--gray-500); }
.esgim .band-light strong { color: var(--ink); }
.esgim .timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.75rem; position: relative; }
.esgim .timeline li { position: relative; padding: 1.75rem; border-radius: 18px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 14px 40px -24px rgba(0,27,54,.35); }
.esgim .tl-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad-brand); color: #fff; margin-bottom: 1rem; }
.esgim .tl-icon svg { width: 23px; height: 23px; }
.esgim .timeline h3 { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--esgim-ocean); margin-bottom: .5rem; }
.esgim .timeline p { color: var(--gray-500); font-size: 1rem; }
.esgim .timeline li:last-child { border-color: rgba(6,168,142,.4); box-shadow: 0 16px 44px -22px rgba(6,168,142,.5); }
.esgim .timeline li:last-child p { color: var(--ink); }
@media (max-width: 860px) { .esgim .timeline { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   8 · POURQUOI NOUS — l'image des grimpeurs en fond, traitement
   identique à celui de la coquille précédente
   ------------------------------------------------------------ */
.esgim .pourquoi {
  background-image: linear-gradient(90deg, rgba(0,27,54,.97) 0%, rgba(0,27,54,.9) 40%, rgba(0,27,54,.6) 72%, rgba(4,38,70,.42) 100%), url("/assets/img/sommet.jpg");
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.esgim .pourquoi .sec-head p { color: var(--on-dark); font-size: 1.1rem; max-width: 62ch; }
.esgim .pourquoi-actions { margin-top: 2rem; }
@media (max-width: 820px) {
  .esgim .pourquoi { background-image: linear-gradient(180deg, rgba(0,27,54,.95) 0%, rgba(0,27,54,.86) 100%), url("/assets/img/sommet.jpg"); background-position: 62% center; }
}

/* ------------------------------------------------------------
   9 · ILS NOUS ONT FAIT CONFIANCE — médaille + logo dans la carte
   ------------------------------------------------------------ */
.esgim .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2.75rem; }
.esgim figure.quote { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 1.9rem; display: flex; flex-direction: column; }
.esgim .quote-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.esgim figure.quote img.medal { width: 96px; height: 96px; flex: 0 0 auto;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 14px 26px rgba(0,27,54,.6)); }
.esgim .logo-tuile { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: .7rem .9rem; min-height: 54px; flex: 1 1 auto; max-width: 60%; }
.esgim .logo-tuile img { display: block; height: 30px; width: auto; }
.esgim figure.quote blockquote { font-size: 1.02rem; color: var(--on-dark); line-height: 1.6; flex: 1;
  font-style: italic; margin: 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid transparent; border-image: var(--grad-brand) 1; }
.esgim figure.quote figcaption { margin-top: 1.1rem; font-size: .92rem; color: var(--on-dark-muted); }
.esgim figure.quote figcaption .nom { display: block; color: #fff; font-weight: 600; }
.esgim figure.quote .result { display: inline-block; margin-top: .9rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--esgim-polar); }

/* ------------------------------------------------------------
   10 · COMBIEN ÇA COÛTE — le panneau interactif
   ------------------------------------------------------------ */
.esgim .tarifs { background: radial-gradient(55% 55% at 85% 0%, rgba(6,168,142,.1), transparent 70%); }
.esgim .panneau { margin-top: 2.75rem; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 80px -30px rgba(0,10,25,.9); }
.esgim .panneau-forfait { padding: clamp(1.5rem, 3vw, 2.25rem); }
.esgim .panneau-echeancier { padding: clamp(1.5rem, 3vw, 2.25rem); border-left: 1px solid rgba(255,255,255,.1); background: rgba(4,38,70,.4); }
@media (max-width: 860px) {
  .esgim .panneau { grid-template-columns: 1fr; }
  .esgim .panneau-echeancier { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
}
.esgim .champ-titre { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-size: .98rem; font-weight: 600; color: #fff; padding: 0; }
.esgim .pas { flex: 0 0 auto; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: .7rem; font-weight: 700; color: var(--on-dark-muted); }
.esgim .tarifs fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.esgim .tailles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; }
.esgim .taille { position: relative; }
.esgim .taille input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.esgim .taille label { display: flex; flex-direction: column; justify-content: center; min-height: 78px; padding: .8rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); cursor: pointer; transition: background .15s, border-color .15s; }
.esgim .taille label:hover { background: rgba(255,255,255,.07); border-color: var(--esgim-polar); }
.esgim .t-nom { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.esgim .t-dot { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; }
.esgim .t-dot::after { content: ""; width: 5px; height: 5px; background: var(--esgim-navy); border-radius: 50%; opacity: 0; }
.esgim .t-plage { margin-top: .35rem; font-size: .78rem; line-height: 1.3; color: var(--on-dark-muted); }
.esgim .taille input:checked + label { background: rgba(6,168,142,.14); border-color: var(--esgim-teal); box-shadow: inset 0 0 0 1px var(--esgim-teal); }
.esgim .taille input:checked + label .t-plage { color: #bfe9e0; }
.esgim .taille input:checked + label .t-dot { background: var(--esgim-teal); border-color: var(--esgim-teal); }
.esgim .taille input:checked + label .t-dot::after { opacity: 1; }
.esgim .taille input:focus-visible + label { outline: 3px solid var(--esgim-polar); outline-offset: 3px; }

.esgim .forfait { padding-top: 1.9rem; }
.esgim .forfait-label { color: var(--on-dark-muted); font-size: .92rem; margin-bottom: .35rem; }
.esgim .prix { display: flex; align-items: baseline; gap: .55rem; white-space: nowrap; font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.esgim .prix .devise { font-size: .55em; font-weight: 600; }
/* Anglais américain : le symbole précède le montant, collé. */
.esgim .prix-us { gap: .1rem; }
.esgim .prix-us .htva { margin-left: .5rem; }
.esgim .prix .htva { font-size: .2em; font-weight: 600; letter-spacing: .06em; color: var(--on-dark-muted); }
.esgim .forfait-detail { margin-top: .6rem; font-size: .95rem; color: var(--on-dark-muted); }
.esgim .abo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.6rem; padding-top: 1.25rem; }
.esgim .abo-kicker { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .3rem; }
.esgim .abo-titre { font-size: 1rem; color: var(--on-dark); }
.esgim .abo-prix { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: #fff; }
.esgim .abo-prix sup { font-size: .65rem; padding-left: 2px; }

.esgim .panneau-echeancier h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: #fff; margin-bottom: 1.4rem; }
.esgim .versements { list-style: none; padding: 0; display: grid; gap: .7rem; }
.esgim .versements li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .9rem; align-items: center; padding: .95rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); }
.esgim .pct { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; color: #fff; }
.esgim .pct small { font-size: .8rem; font-weight: 600; }
.esgim .jalon { display: block; font-size: .95rem; font-weight: 600; color: #fff; }
.esgim .jalon-note { display: block; font-size: .78rem; line-height: 1.35; color: var(--on-dark-muted); margin-top: .15rem; }
.esgim .montant { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: #fff; font-variant-numeric: tabular-nums; }
.esgim .versements .conditionnel { background: rgba(6,168,142,.14); border-color: rgba(6,168,142,.45); }
.esgim .versements-note { margin-top: 1rem; font-size: .8rem; line-height: 1.5; color: var(--on-dark-muted); }

.esgim .garantie { margin-top: 1.25rem; background: var(--esgim-abyss); border: 1px solid rgba(6,168,142,.3); border-radius: 24px; padding: clamp(1.6rem, 3vw, 2.25rem); display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.esgim .garantie-kicker { display: flex; align-items: center; gap: .5rem; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .13em; color: var(--esgim-teal); margin-bottom: .7rem; }
.esgim .garantie h3 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.18; color: #fff; margin-bottom: .6rem; }
.esgim .garantie h3 em { font-style: normal; color: #6fe3cb; }
.esgim .garantie-corps { color: var(--on-dark-muted); max-width: 62ch; font-size: 1rem; }
@media (max-width: 780px) { .esgim .garantie { grid-template-columns: 1fr; } .esgim .garantie .btn { width: 100%; justify-content: center; } }

.esgim .tarifs-note, .esgim .tarifs-noscript { margin-top: 1.1rem; font-size: .82rem; line-height: 1.55; color: var(--on-dark-muted); max-width: 78ch; }
.esgim .comparatif { margin-top: 1.5rem; }
.esgim .comparatif summary { cursor: pointer; width: fit-content; color: var(--on-dark-muted); font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; }
.esgim .comparatif summary:hover { color: #fff; }
.esgim .tableau { overflow-x: auto; margin-top: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.03); }
.esgim .tableau table { width: 100%; border-collapse: collapse; font-size: .92rem; text-align: left; min-width: 34rem; }
.esgim .tableau th, .esgim .tableau td { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); line-height: 1.45; }
.esgim .tableau thead th { font-weight: 700; color: #fff; }
.esgim .tableau tbody th { font-weight: 500; color: var(--on-dark-muted); }
.esgim .tableau tbody td { color: var(--on-dark); white-space: nowrap; }
.esgim .tableau tbody tr:last-child th, .esgim .tableau tbody tr:last-child td { border-bottom: 0; }

/* — CTA final — */
.esgim .cta { background: radial-gradient(50% 80% at 50% 120%, rgba(6,168,142,.22), transparent 70%), var(--grad-ocean); text-align: center; border-top: 1px solid rgba(255,255,255,.06); }
.esgim .cta h2 { font-size: clamp(1.7rem, 3.5vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; max-width: 24ch; margin: .6rem auto 1rem; text-wrap: balance; }
.esgim .cta p { color: var(--on-dark-muted); max-width: 58ch; margin: 0 auto 2rem; font-size: 1.08rem; }

/* — Porte vers le catalogue — */
.esgim .door { border-top: 1px solid rgba(255,255,255,.06); background: var(--esgim-abyss); }
.esgim .door .inner { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.esgim .door p { color: var(--on-dark-muted); max-width: 60ch; }

/* — Pied de page — */
.esgim-foot { background: var(--esgim-abyss); border-top: 1px solid rgba(255,255,255,.06); padding-block: 2.5rem 3rem; font-size: .9rem; }
.esgim-foot img { height: 28px; width: auto; opacity: .9; }
.esgim-foot .cols { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.esgim-foot .links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; }
.esgim-foot a { color: var(--on-dark-muted); }

/* Mentions obligatoires — mêmes mots sur la landing et sur le catalogue. */
.mentions { font-size: .85rem; line-height: 1.6; }
.mentions p { margin: .5rem 0; max-width: 78ch; }
.esgim .mentions { color: var(--on-dark-muted); }
.esgim .mentions a { color: var(--esgim-polar); }

/* — Pages légales : lecture longue sur fond profond — */
.esgim .legal { max-width: 76ch; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.esgim .legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 1.25rem; }
.esgim .legal h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 2.5rem 0 .8rem; }
.esgim .legal p, .esgim .legal li { color: var(--on-dark-muted); margin-bottom: .9rem; }
.esgim .legal ul { padding-left: 1.2rem; }
.esgim .legal li { margin-bottom: .5rem; }
/* Un lien au fil du texte ne doit pas se distinguer par la seule couleur
   (WCAG 1.4.1) : sur fond profond, l'écart avec le corps de texte est trop
   faible. On souligne. */
.esgim .legal p a, .esgim .legal li a, .esgim .mentions a, .esgim figure.quote a {
  color: var(--esgim-polar); text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
.esgim .legal .attrib a { color: var(--esgim-polar); }
.esgim .legal .attrib { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.1rem 1.3rem; color: var(--on-dark); font-size: .98rem; }

/* — Bandeau de consentement : couleurs en dur, car il s'affiche aussi hors .esgim — */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: rgba(4,38,70,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem 0; }
.consent .inner { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consent p { font-size: .9rem; color: #c9d6e4; max-width: 68ch; margin: 0; }
.consent a { color: #8fc3e0; text-decoration: underline; }
.consent .acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.consent button { font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; border-radius: 12px; padding: .55rem 1.1rem; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #eef4fb; }
.consent button.ok { border: 0; color: #fff; background: linear-gradient(90deg, #06a88e 0%, #009fa0 30%, #1d70b6 70%, #283c7e 100%); }

/* — Mouvement : un seul chargement orchestré — */
.esgim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.esgim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .esgim .reveal { opacity: 1; transform: none; transition: none; } }

.esgim a:focus-visible, .esgim button:focus-visible, .esgim summary:focus-visible { outline: 3px solid var(--esgim-polar); outline-offset: 3px; border-radius: 8px; }