/* ============================================================
   FOC STUDIO — PAGE DIAGNOSTIC
   Sections propres à la page :
   - Hero "allumé / éteint" (fond particules + corde à tirer)
   - C'est pour toi si… (fond rose)
   - Comment ça se passe (fond noir)
   - Le diagnostic en deux temps (fond feu)
   - Pricing / réserve (fond noir)
   (Contact = bloc partagé, voir components.css)
   ============================================================ */

/* ============================================================
   HERO — "allumé / éteint"
   ------------------------------------------------------------
   État par défaut = ALLUMÉ (fallback sûr si JS absent : contenu
   visible, scroll libre). Le JS ajoute la "salle obscure" :
     html/body.diag-is-dark    → verrou de scroll
     .diag-hero (sans .is-lit) → fond NOIR, contenu masqué
     .diag-hero.is-lit         → fond FEU, contenu révélé
   Fond animé : particules feu (particles.js), cf. js/diagnostic.js.
   ============================================================ */
.diag-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--noir);                 /* ÉTEINT = noir */
  transition: background 0.6s var(--ease-out-quart);
  padding: clamp(8rem, 12vw, 11rem) var(--gutter) var(--section-pad);
  /* Couleur du fil de la corde, selon l'état (cf. plus bas). */
  --cord-color: #989898;
}
.diag-hero.is-lit {
  --cord-color: #0a0a0a;
  background: var(--feu);                  /* ALLUMÉ = feu */
}

/* Verrou de scroll quand le hero est éteint (salle obscure). On bloque le
   scroller RÉEL (html) ET le body : sans le verrou sur html, un scroll
   restauré par le navigateur (refresh en milieu de page) resterait coincé. */
/* overscroll-behavior: none → coupe le "pull-to-refresh" mobile. Sans ça,
   tirer vers le haut (réflexe naturel sur la salle obscure) rechargeait la
   page au lieu d'allumer la lumière. Le scroll reste de toute façon verrouillé
   tant qu'on est éteint ; c'est l'intention de scroll qui allume (cf. JS). */
html.diag-is-dark { overflow: hidden; height: 100%; overscroll-behavior: none; }
body.diag-is-dark { overflow: hidden; height: 100vh; overscroll-behavior: none; }

/* ---------- Fond particules (remplace les vidéos) ----------
   Le canvas reste sous le contenu (z-index 0) ; il garde ses events
   (repulse au survol / push au clic) pour les zones vides du hero, tandis
   que le contenu (z-index 2) et la corde (z-index 5) passent au-dessus. */
.diag-hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.diag-hero-particles canvas { display: block; }

/* ---------- Contenu ---------- */
.diag-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* Principe "v-animation" : le texte garde une couleur FIXE, c'est le FOND
   qui l'affiche ou le masque par contraste.
     - feu  → lisible ÉTEINT (sur noir), fondu ALLUMÉ (sur feu)
     - noir → masqué ÉTEINT, lisible ALLUMÉ (sur feu)

   .diag-surtitle hérite de .title-seo — on n'ajuste QUE la couleur (feu). */
.diag-surtitle { color: var(--feu); }

/* .diag-title hérite de .title-hero — on n'ajuste QUE couleur(s) + marge.
   Deux lignes, deux couleurs fixes : le fond bascule laquelle est lisible. */
.diag-title { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.diag-title span { display: block; }
.diag-title-line1 { color: var(--feu); }
.diag-title-line2 { color:var(--noir); }

.diag-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color:var(--noir);
  line-height: 1.4;
  max-width: 600px;
  text-wrap: balance;
  margin-bottom: var(--title-gap);
}

.diag-cta {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  align-items: center;
  min-height: 3.4rem;   /* réserve la place du CTA jumpy quand il s'arrime (.jump-cta) */
}

.diag-cta-price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--noir);
}

/* Sous-titre = texte noir : masqué éteint, lisible allumé (par le fond).
   Le CTA, lui, est de l'UI (fond plein) : on ne peut pas le "masquer par
   couleur", donc on le garde caché tant que le hero est éteint. */
.diag-cta { transition: opacity 0.6s var(--ease-out-quart); }
.diag-hero:not(.is-lit) .diag-cta {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   CORDE À TIRER — SVG repris VERBATIM du CodePen jh3y/VwjgdLj
   ------------------------------------------------------------
   La "dummy-cord" est tirable ; au relâchement le CORD_TL morphe
   les 5 paths en yoyo (la ficelle qui vibre). viewBox cadré sur
   la ficelle (60 240 90 155).
   ============================================================ */
.toggle-cord {
  position: absolute;
  top: 0;
  left: 72vw;
  --cord-w: clamp(120px, 15vw, 190px);
  width: var(--cord-w);
  /* Hauteur = ratio du viewBox agrandi (90×220). La corde 1.5× plus longue est
     encodée directement dans le SVG (ligne, hit-spot, frames de morph) avec un
     preserveAspectRatio="meet" → mise à l'échelle uniforme : boule ronde. */
  height: calc(var(--cord-w) * (220 / 90));
  z-index: 5;
  pointer-events: none;
  /* Invisible tant que l'intro (ou une interaction) ne l'a pas révélée. */
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-quart);
}
.toggle-cord.is-revealed { opacity: 1; }

/* Pas de préhension tant que la corde est invisible. */
.toggle-cord:not(.is-revealed) .toggle-scene__hit-spot { pointer-events: none; }

.toggle-cord__input { position: absolute; opacity: 0; pointer-events: none; }

.toggle-scene {
  width: 100%;
  height: 100%;
  overflow: visible !important;
  pointer-events: none;
}

/* Couleur commune du fil (gris éteint → noir allumé, via --cord-color). */
.toggle-scene__cord-end {
  stroke: var(--cord-color);
  fill: var(--cord-color);
  transition: stroke 0.4s ease, fill 0.4s ease;
}
/* Les 5 paths du morph : cachés par défaut (le JS révèle le 1er pendant le swing). */
.toggle-scene__cord {
  fill: none;
  stroke: var(--cord-color);
  display: none;
  transition: stroke 0.4s ease;
}
/* Dummy cord — la ligne tirable (visible au repos). */
.toggle-scene__dummy-cord { transition: stroke 0.4s ease; }
.toggle-scene__dummy-cord line {
  stroke: var(--cord-color);
  stroke-width: 2;
  pointer-events: auto;
  cursor: grab;
  transition: stroke 0.4s ease;
}
.toggle-scene__dummy-cord:active line { cursor: grabbing; }
.toggle-scene__hit-spot { pointer-events: auto; cursor: grab; }
.toggle-scene__hit-spot:active { cursor: grabbing; }

/* ============================================================
   2. C'EST POUR TOI SI… (fond rose) — liste à puces (flèches feu)
   ============================================================ */
.diag-pourtoi {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
  min-height: 65vh;
  align-content: center;
}
.diag-pourtoi-inner { max-width: var(--max-width); margin: 0 auto; }
.diag-pourtoi-label { color: var(--noir); }
.diag-pourtoi-title { color: var(--noir); margin-bottom: var(--title-gap); }

/* Liste (pas de cartes) : chaque item = flèche feu + énoncé gras + description,
   séparés par un filet fin. */
.diag-pourtoi-list {
  list-style: none;
  max-width: 920px;
}
.diag-pourtoi-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.18);
}

.diag-pourtoi-arrow {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--feu);
}
.diag-pourtoi-desc  {
  font-family: var(--font-body);
  color: var(--noir);
  line-height: 1.1;
    text-wrap-style: balance;
    display: block;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 600;
}

/* ============================================================
   3. COMMENT ÇA SE PASSE (fond noir)
   ============================================================ */
.diag-process {
  background: var(--noir);
  padding: var(--section-pad) var(--gutter);
  color: var(--blanc);
}
.diag-process-inner { max-width: var(--max-width); margin: 0 auto; }
.diag-process-title { color: var(--blanc); margin-bottom: var(--title-gap); }

/* Flux : un grand numéro qui "voyage" à gauche + la liste des étapes. */
.diag-process-flow {
  position: relative;
  max-width: 960px;
  /* --num-size = taille du grand numéro (source unique). La gouttière en
     découle : largeur du numéro (~1.25em à 2 chiffres) + un petit écart
     proportionnel. → l'espacement suit DYNAMIQUEMENT la taille du texte,
     jamais de débordement ni de trou béant, à toutes les largeurs. */
  --num-size: clamp(2rem, 6vw, 6rem);
  padding-left: calc(var(--num-size) * 1.45 + 0.5rem);
}
/* Le numéro voyageur : suit l'étape active (JS) — change de valeur ET de position. */
.diag-process-num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--num-size);
  line-height: 0.8;
  /* Jamais de retour à la ligne ni de débordement sur le filet des étapes. */
  white-space: nowrap;
  color: var(--feu);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-quart), opacity 0.4s ease;
  pointer-events: none;
}
.diag-process-num.is-on { opacity: 1; }

.diag-process-steps {
  list-style: none;
  /* Reset du padding/marge par défaut du <ol> (sinon ~40px d'indent ajouté
     fausseraient l'espacement calculé via la gouttière). */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Étapes bien espacées → elles se révèlent l'une après l'autre au scroll.
     Plus l'écart est grand, plus chaque numéro reste "actif" longtemps au
     scroll (l'étape 2 ne passe plus inaperçue). */
  gap: clamp(2rem, 5vw, 5rem);
}
/* Chaque étape = filet vertical + titre + description. */
.diag-process-step {
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  transition: border-color 0.4s ease;
}
.diag-process-step.is-active { border-left-color: var(--feu); }

/* Reveal propre au process (piloté par js/diagnostic.js, plus tardif que les
   reveals globaux) : caché tant que l'étape n'est pas .is-shown. */
@media (prefers-reduced-motion: no-preference) {
  .diag-process-step {
    opacity: 0;
    /* Glissement d'entrée réduit (-16px) : à -30px, pendant le reveal, le filet
       passait brièvement sous le grand numéro sur écrans étroits. */
    transform: translateX(-16px);
    transition: border-color 0.4s ease,
                opacity 0.7s var(--ease-out-quart),
                transform 0.7s var(--ease-out-quart);
  }
  .diag-process-step.is-shown { opacity: 1; transform: none; }
}
.diag-process-step h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blanc);
  margin-bottom: 0.6rem;
}
.diag-process-step p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* min 16px → max 18px */
  color: var(--light-text);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .diag-process-num { transition: opacity 0.4s ease; }
}

/* ============================================================
   4. LE DIAGNOSTIC EN DEUX TEMPS (fond feu) — séquence épinglée
   ------------------------------------------------------------
   Par défaut (mobile / sans JS) : tout est empilé, lisible (fallback).
   .is-pinned (desktop, ajouté par le JS) : temps 1 et temps 2 se
   superposent dans le "stage", la box QUOI se coupe en 2 pour révéler
   le COMMENT derrière.
   ============================================================ */
.diag-deuxtemps {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}
.diag-deuxtemps-inner { max-width: var(--max-width); margin: 0 auto; }
.diag-deuxtemps-label { color: var(--noir); text-align:center; }
.diag-deuxtemps-title {
  color: var(--noir);
  text-align: center;
  margin-bottom: var(--title-gap);
  min-height: 1em; /* évite le saut de hauteur pendant le scramble */
}
/* 2e titre "Ce que le diagnostic dit" : sur desktop le titre unique MORPHE
   (séquence épinglée), donc ce doublon est masqué. Il n'existe que pour le
   mobile (cf. media query) où il sert de titre statique du Temps 2. */
.diag-deuxtemps-title--two { display: none; }

/* Wrapper titre 2 + QUOI : transparent à la mise en page par défaut/desktop
   (display:contents → ne génère aucune boîte). Sur mobile il devient un vrai
   bloc, épinglé d'un seul tenant pendant le split (cf. media query + JS). */
.diag-quoi-pinwrap { display: contents; }

/* ---------- TEMPS 1 : les 3 boxes ---------- */
.diag-regarde-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* .diag-regarde-card : structure portée par .card (.card--solid-dark). */
.diag-regarde-card-num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--feu);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.diag-regarde-card h4,
.diag-quoi h4 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--blanc);
  margin-bottom: 0.75rem;
}
/* Les boxes "Temps 1" gardent leur taille d'origine (la grande taille au-dessus
   est réservée aux box QUOI du temps 2). */
.diag-regarde-card h4 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}
.diag-regarde-card p,
.diag-quoi p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* min 16px → max 18px */
  color: var(--light-text);
  line-height: 1.45;
}
.diag-dit-card-label {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--feu);
  margin-bottom: 0.75rem;
}
/* "COMMENT" barré (ce que le diagnostic ne dit pas), trait feu. */
.diag-strike {
  text-decoration: line-through;
  text-decoration-color: var(--feu);
  text-decoration-thickness: 2px;
}

/* ---------- TEMPS 2 — RAPPEL GRAPHIQUE DES OFFRES ----------
   QUOI = l'offre "Diagnostic" → box ROSE pleine.
   COMMENT = l'offre "Devil's Touch" → box CONTOUR (bordure noire, transparente).
   (Texte inchangé ; on n'imite que l'habillage des offres.) */
.diag-quoi-box,
.diag-quoi-back {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  min-height: 17rem;                 /* même gabarit → la box rose couvre le contour avant le split */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* QUOI = box Diagnostic : rose pleine, texte noir, accent feu (.text-feu). */
.diag-quoi-box { background: var(--rose); }
.diag-quoi-box h4 { color: var(--noir); }
.diag-quoi-box p  { color: var(--noir); }

/* COMMENT = box Devil's Touch : contour 2px noir, fond transparent (sur le feu). */
.diag-quoi-back { background: transparent; border: 2px solid var(--noir); }
.diag-quoi-back .diag-dit-card-label {  /* "PAS" : petit label noir */
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  text-transform: inherit;
  letter-spacing: 0;
  color: var(--noir);
  margin-bottom: 0.6rem;
}
.diag-quoi-back h4 { color: var(--noir); }
.diag-quoi-back p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* min 16px → max 18px */
  color: var(--noir);
  line-height: 1.45;
}
.diag-quoi-back h4 + p { margin-top: 0.75rem; }
/* Lien "inline" noir vers le Devil's Touch (la box du COMMENT). */
.diag-quoi-back .btn--inline {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  align-self: center;
}
/* Les box QUOI sont des duplicatas décoratifs (aria-hidden) → elles ne doivent
   pas intercepter les clics du lien révélé derrière (COMMENT). */
.diag-quoi-box { pointer-events: none; }

/* ===== FALLBACK (par défaut, sans .is-pinned) : empilé/lisible ===== */
.diag-quoi {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.diag-quoi-box--bottom { display: none; } /* doublon de la box QUOI, inutile ici */

/* ===== MODE ÉPINGLÉ (.is-pinned) : superposition + split ===== */
.diag-deuxtemps.is-pinned { min-height: 100vh; display: flex; align-items: center; }
.diag-deuxtemps.is-pinned .diag-deuxtemps-inner { width: 100%; }
.diag-deuxtemps.is-pinned .diag-deuxtemps-stage { position: relative; min-height: inherit; }

/* Temps 2 superposé au temps 1, caché jusqu'à ce que le JS le révèle. */
.diag-deuxtemps.is-pinned .diag-quoi {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;   /* colonne pleine largeur… */
  justify-items: center;        /* …les box centrées horizontalement dedans */
  align-items: center;
  opacity: 0;
}
/* Les 3 calques (COMMENT + 2 moitiés QUOI) empilés dans la même cellule,
   centrés → pas de transform de centrage → le JS peut translater librement. */
.diag-deuxtemps.is-pinned .diag-quoi-back,
.diag-deuxtemps.is-pinned .diag-quoi-box {
  grid-area: 1 / 1;
  width: min(730px, 100%);
}
.diag-deuxtemps.is-pinned .diag-quoi-box--bottom { display: flex; }
.diag-deuxtemps.is-pinned .diag-quoi-back { z-index: 0; text-align: center; align-items: center;}
.diag-deuxtemps.is-pinned .diag-quoi-box { z-index: 1; }
/* Chaque moitié ne montre que sa part (haut / bas) → ensemble = une box.
   Les deux clips se chevauchent de ~1.5px à la jointure : sans ça, l'arrondi
   sous-pixel laisse passer un liseré du fond feu entre les deux moitiés. */
.diag-deuxtemps.is-pinned .diag-quoi-box--top    { clip-path: inset(0 0 calc(50% - 1.5px) 0); }
.diag-deuxtemps.is-pinned .diag-quoi-box--bottom { clip-path: inset(calc(50% - 1.5px) 0 0 0); }

/* ============================================================
   5. PRICING / RÉSERVE (fond noir, centré)
   ============================================================ */
.diag-pricing {
  background: var(--rose);
  padding: clamp(5rem, 6vw, 10rem) var(--gutter);
  text-align: center;
}
.diag-pricing-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diag-pricing-label {
  color: var(--noir);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.diag-pricing-title {
  color: var(--noir);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.diag-pricing-desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--noir);
  line-height: 1.5;
  max-width: 560px;
  margin-bottom: var(--title-gap);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .diag-regarde-grid,
  .diag-quoi {
    grid-template-columns: 1fr;
  }
.diag-quoi-box, .diag-quoi-back {
  padding: clamp(2rem, 2vw, 4rem) clamp(1rem, 1vw, 2rem);
  min-height: inherit;
}
  /* FALLBACK empilé (pas de GSAP, ou reduced-motion) : d'abord le QUOI (box
     rose), ensuite le COMMENT (box contour). Annulé en mode split (.is-split). */
  .diag-quoi-box--top { order: 1; }
  .diag-quoi-back     { order: 2; }

  /* Sur mobile, le wrapper redevient un vrai bloc → épinglable par ScrollTrigger
     avec le titre 2 + le QUOI ensemble (le titre reste visible pendant le split).
     Fond feu : la box COMMENT a un fond TRANSPARENT ; sans ça, au relâchement du
     pin, la section suivante (rose) apparaît une fraction de seconde DERRIÈRE la
     box → effet "bug". Le fond feu garantit toujours du feu derrière. */
  .diag-quoi-pinwrap {
    display: block;
    background: var(--feu);
    /* Coussin de feu sous la box : sans ça, le COMMENT touche pile la section
       suivante (rose). Avec cette marge, même un micro-soubresaut au relâchement
       du pin laisse la box sur du feu → elle ne chevauche jamais le rose. */
    padding-bottom: clamp(2.5rem, 9vw, 4.5rem);
  }

  /* 2e titre "Ce que le diagnostic dit", STATIQUE, juste avant le bloc Temps 2
     (le morph du titre unique reste réservé à la séquence épinglée desktop). */
  .diag-deuxtemps-title--two {
    display: block;
    margin-top: clamp(2.5rem, 7vw, 4rem);
  }

  /* ===== MODE SPLIT MOBILE (.is-split, ajouté par JS si GSAP dispo) =====
     Reproduit le split desktop, mais épinglé sur le SEUL bloc #diag-quoi :
     les 3 calques (COMMENT + 2 moitiés QUOI) sont superposés dans la même
     cellule grid ; QUOI couvre le COMMENT, puis le JS écarte les moitiés →
     révèle le COMMENT derrière. (cf. js/diagnostic.js, bloc mobile) */
  .diag-quoi.is-split {
    position: relative;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: stretch;     /* les 2 calques à la MÊME hauteur → QUOI couvre COMMENT */
  }
  .diag-quoi.is-split .diag-quoi-back,
  .diag-quoi.is-split .diag-quoi-box {
    grid-area: 1 / 1;
    width: 100%;
    order: 0;                 /* annule l'inversion : superposition pure */
  }
  .diag-quoi.is-split .diag-quoi-box--bottom { display: flex; }
  .diag-quoi.is-split .diag-quoi-back { z-index: 0; }
  .diag-quoi.is-split .diag-quoi-box { z-index: 1; }
  .diag-quoi.is-split .diag-quoi-box--top    { clip-path: inset(0 0 calc(50% - 1.5px) 0); }
  .diag-quoi.is-split .diag-quoi-box--bottom { clip-path: inset(calc(50% - 1.5px) 0 0 0); }
}

@media (max-width: 600px) {
  .diag-cta { gap: 1rem; }
  .diag-cta .btn:not(.is-docked) { width: 100%; justify-content: center; }
  /* Corde collée au bord droit (le couloir vide à droite du titre) et
     rallongée pour mieux occuper le hero.
     NB hauteur = largeur : la corde est mise à l'échelle UNIFORMÉMENT (pour
     garder la boule ronde), donc on l'allonge en augmentant --cord-w. Le surplus
     de largeur part hors écran à droite (coupé par overflow-x:hidden) — seul
     l'allongement se voit. `right` (négatif) recale le fil contre la marge. */
  .diag-hero {
    align-items: end;
  }
  .toggle-cord {
    left: auto;
    right: -2rem;
    --cord-w: clamp(120px, 32vw, 210px);
  }
}