/* ==========================================================================
   Solenne : header + hero (sections 4.1 et 4.2).
   Toutes les couleurs, tailles, espacements et courbes viennent de tokens.css.
   Les quelques variables locales ci-dessous sont soit dérivées des tokens par calc(),
   soit reprises des commentaires de tokens.css (interlignes, interlettrages).
   ========================================================================== */

/* ---------- Polices locales (aucune requête vers Google Fonts) ---------- */
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('fonts/lora-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('fonts/lora-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Variables locales ---------- */
:root {
  /* Reprises des commentaires de tokens.css */
  --h1-interligne: .98;
  --h1-interlettrage: -.01em;
  --texte-interligne: 1.55;
  --label-interlettrage: .18em;
  --placeholder-interlettrage: .14em;

  /* Dérivées des tokens */
  --header-h: calc(var(--bloc) * 2 + var(--texte) * 2);   /* 72 px */
  --logo-taille: calc(var(--texte) * 1.625);                /* 26 px */
  --cible: calc(var(--marge) * 2);                          /* 48 px : cible tactile */
  --cadre: calc(var(--bloc) * .3);                          /* 6 px : filet intérieur du portrait */
  --focus: calc(var(--filet-epaisseur) * 2);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--papier); color: var(--encre-doux); font-family: var(--font-texte); font-size: var(--texte); line-height: var(--texte-interligne); -webkit-font-smoothing: antialiased; }
h1, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; }
:focus-visible { outline: var(--focus) solid var(--or-profond); outline-offset: var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--bloc); top: calc(var(--header-h) * -2); z-index: 100; padding: var(--bloc); background: var(--encre); color: var(--papier); }
.skip:focus { top: var(--bloc); }

/* Paragraphes longs (sections suivantes) : justifiés, césure française */
.texte-long { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- 4.1 Header ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); padding-inline: var(--marge); display: flex; align-items: center; justify-content: space-between; background: var(--papier); border-bottom: var(--filet-epaisseur) solid var(--filet); }
.logo { font-family: var(--font-titre); font-weight: 500; font-size: var(--logo-taille); line-height: 1; color: var(--encre); text-decoration: none; }
.logo:hover { color: var(--encre); }

.burger { display: grid; place-items: center; width: var(--cible); height: var(--cible); margin-right: calc(var(--bloc) * -.5); padding: 0; background: none; border: 0; color: var(--encre); cursor: pointer; }
.burger svg { width: var(--marge); height: var(--marge); }
.burger__fermer, .burger[aria-expanded="true"] .burger__ouvrir { display: none; }
.burger[aria-expanded="true"] .burger__fermer { display: block; }

/* Menu mobile : panneau sous la barre */
.menu { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--marge); background: var(--papier); border-bottom: var(--filet-epaisseur) solid var(--filet); }
.menu.est-ouvert { display: block; }
.menu__liste a { display: block; padding: var(--bloc) 0; border-bottom: var(--filet-epaisseur) solid var(--filet); color: var(--encre); text-decoration: none; }
.menu__liste a:hover { color: var(--or-profond); }
.menu__cta { display: block; margin-top: var(--marge); text-align: center; }

/* ---------- 4.2 Hero ---------- */
.hero { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + var(--section-s)); }
.hero__texte { padding-inline: var(--marge); display: flex; flex-direction: column; align-items: center; gap: var(--bloc); text-align: center; }

.etiquette { font-size: var(--label); letter-spacing: var(--label-interlettrage); text-transform: uppercase; color: var(--or-profond); }
.hero h1 { font-family: var(--font-titre); font-weight: 400; font-size: var(--h1-mobile); line-height: var(--h1-interligne); letter-spacing: var(--h1-interlettrage); color: var(--encre); text-wrap: balance; }
.sous-titre { max-width: 28em; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); text-align: center; text-wrap: balance; }

.cta-bloc { display: flex; flex-direction: column; align-items: center; gap: calc(var(--bloc) * .4); }
.micro { font-size: var(--micro); font-style: italic; color: var(--gris); }

.lien-offres { align-self: center; display: inline-flex; align-items: center; gap: calc(var(--bloc) * .3); padding: var(--marge) var(--bloc) var(--marge); font-size: var(--texte-petit); color: var(--gris); text-decoration: none; }
.lien-offres svg { width: calc(var(--texte-petit) * .9); height: calc(var(--texte-petit) * .9); }
.lien-offres:hover { color: var(--encre); }

/* Apparition du titre, ligne par ligne (main.js découpe le titre en .ligne) */
.js .titre-ligne:not(.est-pret) { visibility: hidden; animation: titre-secours 0s linear 2.5s forwards; }
@keyframes titre-secours { to { visibility: visible; } }   /* filet de sécurité si le script échoue : le titre reste lisible */
.ligne { display: block; }
.js .est-pret .ligne { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duree) var(--ease-2), transform var(--reveal-duree) var(--ease-2); transition-delay: calc(var(--i) * var(--reveal-duree) / 6); }
.js .est-pret .ligne.est-visible { opacity: 1; transform: none; }

/* ---------- Barre de CTA fixe (mobile) ---------- */
.barre-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: var(--bloc) var(--marge) calc(var(--bloc) + env(safe-area-inset-bottom)); background: var(--papier); border-top: var(--filet-epaisseur) solid var(--filet); }
.barre-cta .btn { display: block; text-align: center; }
.barre-cta[hidden] { display: none; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .entete { padding-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); }
  .burger { display: none; }
  .menu { position: static; display: flex; align-items: center; gap: calc(var(--marge) * 1.5); max-height: none; overflow: visible; padding: 0; background: none; border: 0; }
  .menu__liste { display: flex; gap: calc(var(--marge) * 1.5); }
  .menu__liste a { padding: calc(var(--bloc) * .5) 0; border: 0; font-size: var(--texte-petit); }
  .menu__cta { margin: 0; }

  .hero { padding-top: calc(var(--header-h) + var(--section-l-desktop)); }
  .hero__texte { gap: calc(var(--bloc) * 1.5); }
  .hero h1 { font-size: var(--h1-desktop); max-width: 12em; }
  .sous-titre { font-size: calc(var(--texte) * 1.15); }
  .lien-offres { padding-top: var(--section-s); padding-bottom: var(--section-s); }
  .barre-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .titre-ligne:not(.est-pret) { visibility: visible; }
  .js .est-pret .ligne { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   4.3 Ça te parle ? (id="pourquoi")
   ========================================================================== */
:root { --h2-interligne: 1.05; }   /* repris du commentaire de tokens.css */

.pourquoi { margin-inline: var(--marge); padding-block: var(--section-l); border-top: var(--filet-epaisseur) solid var(--filet); }
.pourquoi__colonne { max-width: 52ch; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--bloc); text-align: center; }
.pourquoi h2 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.pourquoi .texte-long { width: 100%; margin: 0; }
.pourquoi em { font-style: italic; color: var(--encre); }
.pourquoi .cloture { width: 100%; margin: var(--bloc) 0 0; padding-block: var(--section-s); border-top: var(--filet-epaisseur) solid var(--filet); border-bottom: var(--filet-epaisseur) solid var(--filet); font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .8); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }

/* Apparition au scroll, bloc par bloc (main.js pose .reveal-pret puis .est-visible) */
[data-reveal] { transition: opacity var(--reveal-duree) var(--ease-2), transform var(--reveal-duree) var(--ease-2); transition-delay: calc(var(--i, 0) * var(--reveal-duree) / 6); }
.reveal-pret [data-reveal]:not(.est-visible) { opacity: 0; transform: translateY(var(--reveal-distance)); }

@media (min-width: 900px) {
  .pourquoi { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .pourquoi__colonne { gap: calc(var(--bloc) * 1.5); }
  .pourquoi h2 { max-width: 14em; font-size: var(--h2-desktop); }
  .pourquoi .cloture { margin-top: var(--bloc); padding-block: calc(var(--section-s) * 1.5); font-size: calc(var(--h2-desktop) * .7); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .reveal-pret [data-reveal]:not(.est-visible) { opacity: 1; transform: none; }
}

/* ==========================================================================
   4.4 Ce que tu gagnes (id="benefices")
   ========================================================================== */
.benefices { margin-inline: var(--marge); padding-block: var(--section-l); }
.benefices h2 { max-width: 14em; margin: 0 auto var(--section-s); font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-align: center; text-wrap: balance; }

.benefices__liste { margin: 0; padding: 0; list-style: none; display: grid; }
.benefice { display: flex; flex-direction: column; gap: calc(var(--bloc) * .5); padding-block: var(--section-s); border-top: var(--filet-epaisseur) solid var(--filet); }
.benefice:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }
.benefice__num { font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: 1; color: var(--or-profond); font-variant-numeric: lining-nums; }
.benefice h3 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.benefice p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.benefice .fleche { display: inline-block; width: 1.2em; height: .9em; margin-inline: .15em; vertical-align: -.05em; color: var(--or-profond); }

/* Cascade : 0,1 s entre deux cartes (var(--reveal-duree) / 8) */
.benefices [data-reveal] { transition-delay: calc(var(--i, 0) * var(--reveal-duree) / 8); }

@media (min-width: 900px) {
  .benefices { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .benefices h2 { font-size: var(--h2-desktop); margin-bottom: var(--section-l-desktop); }
  .benefices__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--section-l-desktop); }
  .benefice { padding-block: calc(var(--section-s) * 1.25); }
  .benefice h3 { font-size: calc(var(--h2-desktop) * .5); }
  /* 5e carte : centrée, même largeur qu'une colonne */
  .benefice:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--section-l-desktop) / 2); }
}

/* ==========================================================================
   4.5 Mon approche (id="approche")
   Sans JavaScript : trait statique complet. Avec GSAP : le trait est tracé au scroll
   (main.js pose .est-anime) et chaque étape apparaît quand le trait l'atteint.
   ========================================================================== */
.approche { margin-inline: var(--marge); padding-block: var(--section-l); }
.approche__tete { display: flex; flex-direction: column; align-items: center; gap: var(--bloc); margin-bottom: var(--section-s); text-align: center; }
.approche h2 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.approche__intro { max-width: 52ch; margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); text-wrap: balance; }

.approche__schema { position: relative; }
.approche__etapes { margin: 0; padding: 0; list-style: none; }
.etape { position: relative; display: grid; grid-template-columns: var(--cible) 1fr; column-gap: var(--bloc); padding-bottom: var(--section-s); }
.etape:last-child { padding-bottom: 0; }
.etape__num { position: relative; z-index: 1; display: grid; place-items: center; width: var(--cible); height: var(--cible); border: var(--filet-epaisseur) solid var(--or); border-radius: var(--rayon); background: var(--papier); font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .6); line-height: 1; font-variant-numeric: lining-nums; color: var(--or-profond); }
.etape__texte { display: flex; flex-direction: column; gap: calc(var(--bloc) * .4); padding-top: calc((var(--cible) - var(--h2-mobile) * .6 * var(--h2-interligne)) / 2); }
.etape h3 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.etape p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }

/* Trait statique (repli) : un segment sous chaque numéro, vertical sur mobile */
.etape:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--cible) / 2 - var(--filet-epaisseur) / 2); top: var(--cible); bottom: 0; width: var(--filet-epaisseur); background: var(--or); }

/* Trait animé : sa longueur est mesurée par main.js */
.approche__trait { display: none; position: absolute; z-index: 0; left: calc(var(--cible) / 2 - var(--filet-epaisseur) / 2); top: calc(var(--cible) / 2); width: var(--filet-epaisseur); background: var(--or); transform-origin: top; }
.est-anime .etape::after { display: none; }
.est-anime .approche__trait { display: block; transform: scaleY(0); }
.est-anime .etape { transition: opacity var(--reveal-duree) var(--ease-2), transform var(--reveal-duree) var(--ease-2); }
.est-anime .etape:not(.est-visible) { opacity: 0; transform: translateY(var(--reveal-distance)); }

@media (min-width: 900px) {
  .approche { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .approche h2 { font-size: var(--h2-desktop); }
  .approche__tete { margin-bottom: var(--section-l-desktop); }
  .approche__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--marge) * 2); }
  .etape { display: block; padding-bottom: 0; }
  .etape__texte { padding-top: var(--marge); }
  .etape h3 { font-size: calc(var(--h2-desktop) * .5); }
  .etape:not(:last-child)::after { left: var(--cible); right: calc(var(--marge) * -2); top: calc(var(--cible) / 2 - var(--filet-epaisseur) / 2); bottom: auto; width: auto; height: var(--filet-epaisseur); }
  .approche__trait { left: calc(var(--cible) / 2); top: calc(var(--cible) / 2 - var(--filet-epaisseur) / 2); width: auto; height: var(--filet-epaisseur); transform-origin: left; }
  .est-anime .approche__trait { transform: scaleX(0); }
}

/* ==========================================================================
   4.6 Offres (id="offres")
   ========================================================================== */
.offres { margin-inline: var(--marge); padding-block: var(--section-l); }
.offres h2 { max-width: 14em; margin: 0 auto var(--section-s); font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-align: center; text-wrap: balance; }

.offres__cartes { display: grid; gap: var(--marge); }
.offre { display: flex; flex-direction: column; gap: var(--bloc); padding: var(--marge); border: var(--filet-epaisseur) solid var(--filet); border-radius: var(--rayon); background: transparent; }
.offre > p, .offre__liste { margin: 0; }
.offre > p:not([class]) { font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.offre h3 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .8); line-height: var(--h2-interligne); color: var(--encre); }
.offre__promesse { font-family: var(--font-titre); font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--or-profond); }
.offre__pour { font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre); }
.offre__pourtoi { padding-block: var(--bloc); border-top: var(--filet-epaisseur) solid var(--filet); border-bottom: var(--filet-epaisseur) solid var(--filet); font-size: var(--texte); font-style: italic; line-height: var(--texte-interligne); color: var(--encre); }

.offre__liste + .offre__pourtoi { margin-top: calc(var(--bloc) * -1); border-top: 0; }   /* évite un double filet sous la liste */
.offre__sous { margin: var(--bloc) 0 calc(var(--bloc) * -.5); font-family: var(--font-texte); font-weight: 400; font-size: var(--label); letter-spacing: var(--label-interlettrage); text-transform: uppercase; color: var(--gris); }
.offre__liste { list-style: none; padding: 0; }
.offre__liste li { padding-block: calc(var(--bloc) * .6); border-top: var(--filet-epaisseur) solid var(--filet); font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.offre__liste li:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }

.offre__pied { margin-top: auto; padding-top: var(--bloc); display: flex; flex-direction: column; gap: var(--bloc); }
.offre__engagement { margin: 0; font-size: var(--texte-petit); letter-spacing: var(--label-interlettrage); text-transform: uppercase; color: var(--or-profond); }
.offre .btn { display: block; text-align: center; }

.offres__notes { max-width: 52ch; margin: var(--section-s) auto 0; display: flex; flex-direction: column; gap: var(--bloc); text-align: center; }
.offres__notes p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); text-wrap: balance; }

@media (min-width: 900px) {
  .offres { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .offres h2 { font-size: var(--h2-desktop); margin-bottom: var(--section-l-desktop); }
  .offres__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--marge); }
  .offre { padding: calc(var(--marge) * 1.5); }
  .offres__notes { margin-top: var(--section-l-desktop); }
}

/* ==========================================================================
   4.7 Résultats (id="resultats")
   ========================================================================== */
.resultats { margin-inline: var(--marge); padding-block: var(--section-l); }
.resultats h2 { font-variant-numeric: lining-nums; max-width: 14em; margin: 0 auto var(--section-s); font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-align: center; text-wrap: balance; }

.resultats__cas { display: grid; }
.cas { display: flex; flex-direction: column; gap: var(--bloc); padding-block: var(--section-s); border-top: var(--filet-epaisseur) solid var(--filet); }
.cas:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }
.cas p { margin: 0; }

.cas__avant { font-size: var(--texte); line-height: var(--texte-interligne); color: var(--gris); }
.cas__fleche { width: calc(var(--texte) * .75); height: var(--texte); color: var(--or-profond); }
.cas__cle, .cas__apres { font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .8); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.cas__cle .cas__avant { font-family: var(--font-texte); font-size: var(--texte); }
.cas__cle, .cas__apres { font-variant-numeric: lining-nums; }
.cas__cle .cas__unite { display: block; }
.cas__grand { display: inline-block; font-size: calc(var(--h2-mobile) * 1.8); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--or-profond); }
.cas__cle .cas__avant { display: block; margin-bottom: calc(var(--bloc) * .4); }
.cas__texte { font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }

/* Cas 1 : captures réelles à la place de l'emplacement gris, empilées à leur ratio d'origine */
.cas__captures { margin-top: auto; display: flex; flex-direction: column; gap: var(--bloc); }
.cas__image { margin: 0; border: var(--filet-epaisseur) solid var(--filet); border-radius: var(--rayon); overflow: hidden; background: var(--filet); }
.cas__image img { display: block; width: 100%; height: auto; }
.cas__capture { margin-top: auto; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--placeholder); color: var(--encre-doux); font-size: var(--micro); letter-spacing: var(--placeholder-interlettrage); text-transform: uppercase; }

@media (min-width: 900px) {
  .resultats { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .resultats h2 { font-size: var(--h2-desktop); margin-bottom: var(--section-l-desktop); }
  .resultats__cas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--marge) * 1.5); }
  .cas { padding-block: var(--section-s) 0; border-bottom: 0; }
  .cas:last-child { border-bottom: 0; }
  .cas__cle, .cas__apres { font-size: calc(var(--h2-desktop) * .5); }
  .cas__grand { font-size: calc(var(--h2-desktop) * 1.2); }
}

/* ==========================================================================
   4.8 À propos (id="apropos")
   ========================================================================== */
.apropos { margin-inline: var(--marge); padding-block: var(--section-l); display: grid; gap: var(--section-s); }

/* Cadre double, comme sur le hero : filet extérieur, filet intérieur, emplacement gris */
.apropos__portrait { margin: 0; padding: var(--cadre); border: var(--filet-epaisseur) solid var(--filet); background: var(--papier); }
.apropos__cadre { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--placeholder); color: var(--encre-doux); font-size: var(--micro); letter-spacing: var(--placeholder-interlettrage); text-transform: uppercase; }

.apropos__texte { display: flex; flex-direction: column; gap: var(--bloc); }
.apropos h2 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.apropos .texte-long { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.apropos__final { margin: 0; padding-top: var(--bloc); border-top: var(--filet-epaisseur) solid var(--filet); font-style: italic; font-size: calc(var(--texte) * 1.15); line-height: var(--texte-interligne); color: var(--encre); }

@media (min-width: 900px) {
  .apropos { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--marge) * 3); align-items: start; }
  .apropos h2 { font-size: var(--h2-desktop); }
}

/* ==========================================================================
   4.9 Avis (id="avis")
   Carrousel : défilement horizontal natif + scroll-snap, sans bibliothèque ni animation.
   ========================================================================== */
.avis { margin-inline: var(--marge); padding-block: var(--section-l); }
.avis h2 { max-width: 14em; margin: 0 auto var(--section-s); font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-align: center; text-wrap: balance; }

.avis__piste { display: flex; gap: var(--marge); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--bloc); scrollbar-width: thin; scrollbar-color: var(--or) var(--filet); }
.avis__carte { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: var(--bloc); padding: var(--marge); border: var(--filet-epaisseur) solid var(--filet); border-radius: var(--rayon); background: transparent; }
.avis blockquote { margin: 0; }
.avis blockquote p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }

.avis figcaption { margin-top: auto; padding-top: var(--bloc); border-top: var(--filet-epaisseur) solid var(--filet); display: flex; flex-direction: column; gap: calc(var(--bloc) * .2); }
.avis__nom { font-family: var(--font-titre); font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); }
.avis__role { font-size: var(--texte-petit); color: var(--gris); }
.avis__source { margin-top: calc(var(--bloc) * .3); font-size: var(--label); letter-spacing: var(--label-interlettrage); text-transform: uppercase; color: var(--or-profond); }


@media (min-width: 900px) {
  .avis { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .avis h2 { font-size: var(--h2-desktop); margin-bottom: var(--section-l-desktop); }
  .avis__carte { flex-basis: calc((100% - var(--marge)) / 2); padding: calc(var(--marge) * 1.5); }
}

/* ==========================================================================
   4.10 Sommes-nous faits pour travailler ensemble ? (id="criteres")
   ========================================================================== */
.criteres { margin-inline: var(--marge); padding-block: var(--section-l); }
.criteres__tete { display: flex; flex-direction: column; align-items: center; gap: var(--bloc); margin-bottom: var(--section-s); text-align: center; }
.criteres h2 { max-width: 14em; margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.criteres .liant { white-space: nowrap; }   /* évite de couper « Sommes-nous » au trait d'union */
.criteres__sous { margin: 0; font-size: calc(var(--texte) * 1.15); line-height: var(--texte-interligne); color: var(--encre-doux); }

.criteres__liste { max-width: calc(var(--conteneur) * .75); margin: 0 auto; padding: 0; list-style: none; }
.critere { display: grid; grid-template-columns: var(--marge) 1fr; column-gap: var(--bloc); padding-block: var(--section-s); border-top: var(--filet-epaisseur) solid var(--filet); }
.critere:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }
.critere__coche { width: var(--marge); height: var(--marge); color: var(--or-profond); stroke-width: calc(var(--filet-epaisseur) * 1.5); }
.critere__texte { display: flex; flex-direction: column; gap: calc(var(--bloc) * .4); }
.critere h3 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.critere p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }

@media (min-width: 900px) {
  .criteres { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .criteres__tete { margin-bottom: var(--section-l-desktop); }
  .criteres h2 { font-size: var(--h2-desktop); }
  .critere { padding-block: calc(var(--section-s) * 1.25); column-gap: var(--marge); }
  .critere h3 { font-size: calc(var(--h2-desktop) * .5); }
}

/* ==========================================================================
   4.11 FAQ (id="faq")
   Sans JavaScript : toutes les réponses sont visibles. Avec main.js (.faq-pret) : accordéon,
   une seule réponse ouverte, hauteur animée en var(--reveal-duree) / 2 = 0,4 s, courbe var(--ease-1).
   ========================================================================== */
.faq { margin-inline: var(--marge); padding-block: var(--section-l); }
.faq h2 { max-width: 14em; margin: 0 auto var(--section-s); font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-align: center; text-wrap: balance; }

.faq__liste { max-width: calc(var(--conteneur) * .75); margin: 0 auto; }
.faq__item { border-top: var(--filet-epaisseur) solid var(--filet); }
.faq__item:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }
.faq__item h3 { margin: 0; font-weight: 400; }

.faq__q { width: 100%; min-height: var(--cible); display: flex; align-items: center; justify-content: space-between; gap: var(--bloc); padding: var(--bloc) 0; background: none; border: 0; text-align: left; color: var(--encre); cursor: pointer; }
.faq__question { font-family: var(--font-titre); font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); }
.faq__signe { flex: none; font-family: var(--font-titre); font-size: calc(var(--h2-mobile) * .8); line-height: 1; color: var(--or-profond); }
.faq__signe::before { content: '+'; }
.faq__q[aria-expanded="true"] .faq__signe::before { content: '\2212'; }

.faq__r-int p { margin: 0; max-width: 52ch; padding-bottom: var(--marge); font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.faq__q:hover .faq__question { color: var(--or-profond); }

/* Accordéon actif */
.faq-pret .faq__r { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows calc(var(--reveal-duree) / 2) var(--ease-1), visibility 0s linear calc(var(--reveal-duree) / 2); }
.faq-pret .faq__r-int { min-height: 0; overflow: hidden; }
.faq-pret .est-ouvert .faq__r { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows calc(var(--reveal-duree) / 2) var(--ease-1), visibility 0s; }

@media (min-width: 900px) {
  .faq { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .faq h2 { font-size: var(--h2-desktop); margin-bottom: var(--section-l-desktop); }
  .faq__q { padding-block: calc(var(--bloc) * 1.25); }
  .faq__question { font-size: calc(var(--h2-desktop) * .5); }
  .faq__signe { font-size: calc(var(--h2-desktop) * .6); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-pret .faq__r, .faq-pret .est-ouvert .faq__r { transition: none; }
}

/* ==========================================================================
   4.12 Contact (id="contact")
   Champs soulignés (pas de boîtes), une colonne de var(--conteneur) / 2 = 560 px, aucune animation.
   ========================================================================== */
.contact { margin-inline: var(--marge); padding-block: var(--section-l); }
.contact__tete { display: flex; flex-direction: column; align-items: center; gap: var(--bloc); margin-bottom: var(--section-s); text-align: center; }
.contact h2 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.contact__texte { max-width: 52ch; margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); text-wrap: balance; }

.formulaire { max-width: calc(var(--conteneur) * .5); margin-inline: auto; display: flex; flex-direction: column; gap: calc(var(--marge) * 1.5); }
.champ { display: flex; flex-direction: column; gap: calc(var(--bloc) * .4); min-width: 0; margin: 0; padding: 0; border: 0; }
.champ > label, .champ legend { padding: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre); }
.champ__facultatif { font-size: var(--texte-petit); color: var(--gris); }
.champ__aide { margin: 0; font-size: var(--micro); font-style: italic; color: var(--gris); }

/* Champs de saisie : libellé au-dessus, filet de 1 px dessous, focus en --or */
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ textarea { width: 100%; padding: calc(var(--bloc) * .5) 0; font: inherit; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre); background: transparent; border: 0; border-bottom: var(--filet-epaisseur) solid var(--gris); border-radius: 0; outline: none; appearance: none; -webkit-appearance: none; }
.champ textarea { resize: vertical; min-height: calc(var(--section-l) * 1.5); }
.champ input[type="text"]:focus, .champ input[type="email"]:focus, .champ input[type="tel"]:focus, .champ textarea:focus,
.choix__texte:focus { border-bottom-color: var(--or); box-shadow: 0 var(--filet-epaisseur) 0 0 var(--or); }

/* Boutons radio et case : lignes séparées par des filets fins */
.choix__liste { display: flex; flex-direction: column; }
.choix { display: flex; align-items: flex-start; gap: var(--bloc); padding-block: calc(var(--bloc) * .6); border-bottom: var(--filet-epaisseur) solid var(--filet); font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); cursor: pointer; }
.choix:first-child { border-top: var(--filet-epaisseur) solid var(--filet); }
.choix--autre { align-items: center; cursor: default; }
.choix__radio { display: flex; align-items: flex-start; gap: var(--bloc); cursor: pointer; }
.choix__texte { flex: 1; min-width: 0; padding: calc(var(--bloc) * .2) 0; font: inherit; font-size: var(--texte); color: var(--encre); background: transparent; border: 0; border-bottom: var(--filet-epaisseur) solid var(--gris); border-radius: 0; outline: none; }

.choix input[type="radio"], .choix input[type="checkbox"] { flex: none; appearance: none; -webkit-appearance: none; width: calc(var(--texte) * 1.1); height: calc(var(--texte) * 1.1); margin: calc(var(--texte) * .22) 0 0; background: transparent; border: var(--filet-epaisseur) solid var(--gris); }
.choix input[type="radio"] { border-radius: 50%; }
.choix input[type="checkbox"] { border-radius: var(--rayon); }
.choix input:checked { background: var(--or-profond); border-color: var(--or-profond); box-shadow: inset 0 0 0 calc(var(--filet-epaisseur) * 3) var(--papier); }
.choix input[type="checkbox"]:checked { box-shadow: inset 0 0 0 calc(var(--filet-epaisseur) * 2) var(--papier); }
.choix input:focus-visible { outline: var(--focus) solid var(--or); outline-offset: var(--focus); }
.choix--consentement { border: 0; padding-block: 0; color: var(--encre-doux); }
.choix--consentement:first-child { border-top: 0; }
.choix--consentement a { color: var(--or-profond); }

/* Messages d'erreur : texte seul, repéré par le filet et le texte, pas par la couleur seule */
.champ__erreur { margin: 0; font-size: var(--texte-petit); line-height: var(--texte-interligne); color: var(--or-profond); }
.champ--invalide input[type="text"], .champ--invalide input[type="email"], .champ--invalide input[type="tel"], .champ--invalide textarea { border-bottom-color: var(--or-profond); box-shadow: 0 var(--filet-epaisseur) 0 0 var(--or-profond); }

/* Piège à robots : sorti de l'écran, hors tabulation (et non display:none, que certains robots ignorent) */
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire[hidden] { display: none; }
.formulaire[hidden] { display: none; }
.formulaire__envoi { margin-top: var(--bloc); }
.formulaire .btn { cursor: pointer; }
.formulaire .btn[disabled] { cursor: default; color: var(--gris); border-color: var(--filet); }
.formulaire__statut { margin: 0; padding: var(--bloc); border: var(--filet-epaisseur) solid var(--or); border-radius: var(--rayon); font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre); text-align: center; }
.formulaire__confirmation { max-width: calc(var(--conteneur) * .5); margin: 0 auto; padding: var(--marge); border-top: var(--filet-epaisseur) solid var(--or); border-bottom: var(--filet-epaisseur) solid var(--or); font-family: var(--font-titre); font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); text-align: center; outline: none; }

@media (min-width: 900px) {
  .contact { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-block: var(--section-l-desktop); }
  .contact h2 { font-size: var(--h2-desktop); }
  .contact__tete { margin-bottom: var(--section-l-desktop); }
  .formulaire__confirmation { font-size: calc(var(--h2-desktop) * .5); }
}

/* ==========================================================================
   4.13 Footer + pages légales
   ========================================================================== */
.pied { display: flex; flex-direction: column; align-items: center; gap: var(--bloc); padding: var(--section-s) var(--marge) calc(var(--section-s) + env(safe-area-inset-bottom)); background: var(--papier); border-top: var(--filet-epaisseur) solid var(--filet); font-size: var(--texte-petit); line-height: var(--texte-interligne); color: var(--encre-doux); text-align: center; }
.pied p { margin: 0; }
.pied__contact, .pied__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--marge); }
.pied a { display: inline-block; padding-block: calc(var(--bloc) * .4); color: var(--or-profond); }   /* cible d'au moins 24 px de haut */
.pied a:hover { color: var(--encre); }

.legal { margin-inline: var(--marge); padding-top: calc(var(--header-h) + var(--section-s)); padding-bottom: var(--section-l); }
.legal__colonne { max-width: calc(var(--conteneur) * .6); margin-inline: auto; display: flex; flex-direction: column; gap: var(--marge); }
.legal h1 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: var(--h2-mobile); line-height: var(--h2-interligne); color: var(--encre); text-wrap: balance; }
.legal section { display: flex; flex-direction: column; gap: var(--bloc); padding-top: var(--marge); border-top: var(--filet-epaisseur) solid var(--filet); }
.legal h2 { margin: 0; font-family: var(--font-titre); font-weight: 400; font-size: calc(var(--h2-mobile) * .6); line-height: var(--h2-interligne); color: var(--encre); }
.legal p { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.legal__liste { margin: 0; display: flex; flex-direction: column; }
.legal__liste > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--bloc) * .2); padding-block: calc(var(--bloc) * .6); border-bottom: var(--filet-epaisseur) solid var(--filet); }
.legal__liste dt { font-size: var(--label); letter-spacing: var(--label-interlettrage); text-transform: uppercase; color: var(--gris); }
.legal__liste dd { margin: 0; font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre); }
.legal__puces { margin: 0; padding: 0; list-style: none; }
.legal__puces li { padding-block: calc(var(--bloc) * .6); border-bottom: var(--filet-epaisseur) solid var(--filet); font-size: var(--texte); line-height: var(--texte-interligne); color: var(--encre-doux); }
.legal__puces li:first-child { border-top: var(--filet-epaisseur) solid var(--filet); }

@media (min-width: 900px) {
  .pied { flex-direction: row; justify-content: space-between; padding-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); text-align: left; }
  .pied__contact, .pied__legal { justify-content: flex-start; }
  .legal { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); padding-top: calc(var(--header-h) + var(--section-l-desktop)); padding-bottom: var(--section-l-desktop); }
  .legal h1 { font-size: var(--h2-desktop); }
  .legal h2 { font-size: calc(var(--h2-desktop) * .5); }
  .legal__liste > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--marge); align-items: baseline; }
}

/* ==========================================================================
   Corrections du contrôle complet
   ========================================================================== */
/* Mobile : un élément qui prend le focus au clavier ne doit pas passer sous la barre de CTA fixe */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(var(--section-s) * 3); }
}
/* Lien isolé dans la liste des mentions légales (e-mail de l'éditeur) : cible d'au moins 24 px de haut */
.legal__liste dd a { display: inline-block; padding-block: calc(var(--bloc) * .2); }
/* Sections qui reçoivent le focus après un clic sur une ancre : pas de contour sur le conteneur */
[tabindex="-1"]:focus { outline: none; }
/* Mouvement réduit : le fondu de couleur des boutons (défini dans tokens.css) est aussi supprimé */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ==========================================================================
   Photos de Solenne
   ========================================================================== */
/* Hero : la photo remplit le cadre (les dimensions du cadre viennent de la mise en page, la photo est recadrée) */
.portrait__cadre { position: relative; min-height: 0; overflow: hidden; }
.portrait__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* À propos : cadre 4:5, photo recadrée */
.apropos__cadre { overflow: hidden; }
.apropos__cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; }

/* Bandeau décoratif, entre deux sections */
.bandeau { margin: 0 var(--marge); }
.bandeau img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 30% 50%; border-radius: var(--rayon); }
@media (min-width: 900px) {
  .bandeau { margin-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2)); }
  .bandeau img { aspect-ratio: 960 / 355; }
}

/* ==========================================================================
   Palette appliquée
   Fonds : --papier (par défaut), --filet (sections douces), --encre (sections sombres), --or-profond (panneau de clôture).
   --or sert aux filets et contours ; en texte, il n'apparaît que sur fond --encre (contraste supérieur à 4,5).
   Les alias --base-* gardent les valeurs d'origine quand les variables sont redéfinies localement.
   ========================================================================== */
:root {
  --base-papier: var(--papier);
  --base-encre: var(--encre);
  --base-encre-doux: var(--encre-doux);
  --base-gris: var(--gris);
  --base-filet: var(--filet);
  --base-or: var(--or);
}

/* ----- Sections douces : fond --filet, filets en --or ----- */
#benefices, #apropos, #faq {
  background: var(--base-filet);
  box-shadow: 0 0 0 100vmax var(--base-filet);
  clip-path: inset(0 -100vmax);
  --filet: var(--base-or);
  --gris: var(--base-encre-doux);
}

/* ----- Sections sombres : fond --encre, texte --papier, accents --or ----- */
#offres, #avis {
  background: var(--base-encre);
  box-shadow: 0 0 0 100vmax var(--base-encre);
  clip-path: inset(0 -100vmax);
  --encre: var(--base-papier);
  --encre-doux: var(--base-filet);
  --gris: var(--base-filet);
  --or-profond: var(--base-or);
  --filet: var(--base-gris);
}
.pied {
  background: var(--base-encre);
  --encre: var(--base-papier);
  --encre-doux: var(--base-filet);
  --gris: var(--base-filet);
  --or-profond: var(--base-or);
  --filet: var(--base-gris);
}
#offres .offre, #avis .avis__carte { border-color: var(--base-or); }

/* ----- Touches d'or : contours et filets ----- */
.portrait, .apropos__portrait { border-color: var(--or); }
.pourquoi { border-top-color: var(--or); }

/* ----- Phrase de clôture de « Ça te parle ? » : panneau --or-profond ----- */
.pourquoi .cloture {
  padding: var(--section-s) var(--marge);
  background: var(--or-profond);
  border: 0;
  border-radius: var(--rayon);
  color: var(--papier);
}

/* ----- Bandeau décoratif : un peu d'air de part et d'autre ----- */
.bandeau { margin-block: var(--section-s) 0; }
@media (min-width: 900px) { .bandeau { margin-block: var(--section-l-desktop) 0; } }

/* ==========================================================================
   Hero : la photo garde son cadrage d'origine (3:4), sans recadrage, centrée sous le titre
   ========================================================================== */
.portrait { flex: none; min-height: 0; width: min(calc(100% - var(--marge) * 2), calc(var(--conteneur) * .36)); margin-inline: auto; }
.portrait__cadre { flex: none; width: 100%; aspect-ratio: 3 / 4; }
.portrait__cadre img { object-position: 50% 50%; }
@media (min-width: 900px) {
  .portrait { max-width: none; aspect-ratio: auto; margin-top: var(--section-s); }
}

/* ==========================================================================
   Résultats : captures plus grandes, légendées, agrandissables
   Mobile : pleine largeur de colonne. Desktop : texte au-dessus, deux captures côte à côte sur toute la largeur.
   ========================================================================== */
.cas__texte-bloc { display: flex; flex-direction: column; gap: var(--bloc); }
.cas__captures { margin-top: var(--bloc); }
.cas__image { margin: 0; display: flex; flex-direction: column; gap: calc(var(--bloc) * .5); border: 0; border-radius: 0; overflow: visible; background: none; }
.cas__zoom { position: relative; display: block; width: 100%; padding: 0; border: var(--filet-epaisseur) solid var(--filet); border-radius: var(--rayon); overflow: hidden; background: var(--filet); cursor: zoom-in; }
.cas__zoom img { display: block; width: 100%; height: auto; }
.cas__zoom:hover { border-color: var(--or); }
.cas__loupe { position: absolute; right: calc(var(--bloc) * .5); bottom: calc(var(--bloc) * .5); display: grid; place-items: center; width: var(--marge); height: var(--marge); background: var(--papier); border: var(--filet-epaisseur) solid var(--or); border-radius: var(--rayon); font-family: var(--font-titre); font-size: var(--texte); line-height: 1; color: var(--or-profond); }
.cas__image figcaption { font-size: var(--texte-petit); line-height: var(--texte-interligne); color: var(--encre-doux); }

@media (min-width: 900px) {
  .resultats__cas { grid-template-columns: minmax(0, 1fr); }
  .cas { padding-block: calc(var(--section-s) * 1.5); border-bottom: 0; }
  .cas:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }
  .cas__texte-bloc { max-width: 44em; }
  .cas__cle, .cas__apres { font-size: calc(var(--h2-desktop) * .7); }
  .cas__grand { font-size: calc(var(--h2-desktop) * 1.5); }
  .cas__captures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--marge); align-items: start; margin-top: var(--marge); }
}

/* Capture agrandie : fenêtre modale, la capture reste lisible (défilement dans la fenêtre sur petit écran) */
.zoom { padding: 0; width: min(calc(100vw - var(--marge) * 2), var(--conteneur)); max-width: none; max-height: calc(100vh - var(--marge) * 2); max-height: calc(100dvh - var(--marge) * 2); background: var(--papier); color: var(--encre); border: var(--filet-epaisseur) solid var(--or); border-radius: var(--rayon); overflow: hidden; }
.zoom[open] { display: flex; flex-direction: column; }
.zoom::backdrop { background: color-mix(in srgb, var(--encre) 88%, transparent); }
.zoom__barre { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--bloc); padding: calc(var(--bloc) * .5) calc(var(--bloc) * .5) calc(var(--bloc) * .5) var(--bloc); border-bottom: var(--filet-epaisseur) solid var(--filet); }
.zoom__legende { margin: 0; font-size: var(--texte-petit); line-height: var(--texte-interligne); color: var(--encre-doux); }
.zoom__fermer { flex: none; display: grid; place-items: center; width: var(--cible); height: var(--cible); padding: 0; background: none; border: 0; color: var(--encre); cursor: pointer; }
.zoom__fermer svg { width: var(--marge); height: var(--marge); }
.zoom__cadre { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--cadre); }
.zoom__cadre img { display: block; width: max(100%, calc(var(--conteneur) * .8)); height: auto; }
html:has(.zoom[open]) { overflow: hidden; }