/* ═══════════════════════════════════════════════════════════════════════
   theobaudry.fr — complement pour les pages de contenu

   Ce fichier ne redefinit RIEN de la charte : tout le design vient de
   assets/css/site.css, extrait d'index.html. On ajoute seulement ce que
   la page d'accueil ne fournit pas, parce qu'elle n'en a pas besoin :

     - le fil d'Ariane
     - une section sombre reutilisable (la home la code en dur sur
       #expertise et #comparison, on ne peut pas dupliquer ces id)
     - une grille statique pour les result-card (la home les met dans un
       carrousel, ces pages n'en ont pas)
     - un bloc de texte long au format lecture
     - .p-snapchat, absent de la home
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Section sombre reutilisable ───
   Reprend a l'identique le traitement de #expertise / #comparison de la
   home. Necessaire car une page peut en contenir plusieurs, et un id
   doit rester unique. */
.section-dark {
  background: var(--ink);
  color: white;
  position: relative;
  overflow: hidden;
}
.section-dark .section-header h2 { color: white; }
.section-dark .section-header p { color: rgba(255, 255, 255, 0.65); }
.section-dark .eyebrow {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
}

/* ─── Encart de transparence ─── */
.note-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-diffused);
}
.note-card p { font-size: 1rem; line-height: 1.65; color: var(--steel); margin: 0 0 1rem; }
.note-card p strong { color: var(--ink); font-weight: 600; }
.note-card p:last-child { margin-bottom: 0; }

/* ─── En-tete du tableau comparatif ─── */
.comparison-row.comparison-head .comparison-cell {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.comparison-row.comparison-head .comparison-cell.highlight { color: white; }

/* ─── Pastille Snapchat, absente de la home ─── */
.platform-pill.p-snapchat {
  background: rgba(255, 252, 0, 0.14);
  border-color: rgba(190, 180, 0, 0.35);
  color: #8A8200;
}

/* ─── Entree de nav active ─── */
.nav-links a.active { color: var(--ink); font-weight: 600; }

/* ─── Hero : grille de stats calee sur le nombre reel ───
   .hero-stats de la home suppose 3 colonnes. Une page qui n'a que 2 chiffres
   laissait une colonne vide et un bloc visuellement de travers. */
.hero-stats-2 { grid-template-columns: repeat(2, 1fr); }
.hero-stats-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) {
  .hero-stats-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Presentation de Theo ───
   Une page d'expertise est une porte d'entree : le visiteur arrive de Google
   sans etre passe par la home. Ce bloc repond a « qui me parle ? » avec un
   texte propre a la regie de la page. */
.section-author {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--canvas);
}
.author-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  box-shadow: var(--shadow-deep);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.author-aside { text-align: center; }
.author-portrait {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(79, 107, 255, 0.03) 100%);
  border: 1px solid var(--hairline);
}
.author-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.125rem 0 0.25rem;
}
.author-role {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--steel);
  margin: 0 0 1rem;
}
.author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: all 0.4s var(--smooth);
}
.author-link svg { width: 0.75rem; height: 0.75rem; }
.author-link:hover { background: var(--accent-soft); border-color: rgba(79, 107, 255, 0.25); }

.author-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 1rem 0 1.25rem;
}
.author-body h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
}
.author-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--steel);
  margin: 0 0 1.125rem;
}
.author-body p strong { color: var(--ink); font-weight: 600; }
.author-body p:last-of-type { margin-bottom: 0; }

.author-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.author-proof-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.author-proof-value em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.author-proof-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--steel);
  margin-top: 0.375rem;
  line-height: 1.4;
}

/* En dessous de 860px la carte passe sur une colonne. L'identite se replie
   en ligne : portrait a gauche, nom / role / lien empiles a droite. */
@media (max-width: 860px) {
  .author-card { grid-template-columns: 1fr; }
  /* Placement explicite : le portrait tient les trois lignes de la colonne
     de droite. En placement automatique, nom / role / lien se retrouvaient
     cote a cote au lieu d'etre empiles. */
  .author-aside {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 1.125rem;
    align-content: center;
    text-align: left;
  }
  .author-aside .author-portrait {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
    border-radius: 1rem;
  }
  .author-name { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 0.125rem; }
  .author-role { grid-column: 2; grid-row: 2; margin: 0 0 0.625rem; }
  .author-link { grid-column: 2; grid-row: 3; justify-self: start; align-self: start; }
  .author-proof { grid-template-columns: 1fr; gap: 1.125rem; }
}
@media (max-width: 420px) {
  .author-aside { gap: 0.875rem; }
  .author-aside { grid-template-columns: 68px minmax(0, 1fr); column-gap: 0.875rem; }
  .author-role { font-size: 0.75rem; }
}

/* ─── Hero mobile : laisser le titre respirer ───
   Le <br> des h1 est cale pour une lecture en deux lignes sur large. En
   dessous de 700px il produit une coupure parasite et un mot orphelin :
   on laisse le texte se replier tout seul. */
@media (max-width: 700px) {
  #hero h1 br { display: none; }
}

/* ─── Raccords du haut de page ───
   1. Le padding bas du hero de la home (9rem) est cale sur un hero dense.
      Ici il laissait ~280px de vide avant la section suivante.
   2. Le degrade du hero demarrait sous le fil d'Ariane, ce qui creait une
      couture horizontale visible. On le fait remonter derriere lui. */
.breadcrumbs + #hero { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.breadcrumbs + #hero .hero-bg { top: -7.5rem; }
@media (max-width: 768px) {
  .breadcrumbs + #hero .hero-bg { top: -6rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   BLOCS DE CONTENU

   Trois principes, pour que la page ne soit pas une pile de cartes :
     - un rythme clair / teinte / sombre, jamais trois sections plates
       de suite ;
     - de la profondeur (ombres etagees, filets d'accent, degrades tres
       legers) plutot que du texte pose sur du blanc ;
     - de l'interaction la ou elle apporte une reponse au visiteur, pas
       pour l'effet.
   ═══════════════════════════════════════════════════════════════════════ */

.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;
}

/* ─────────────────────────────────────────────────────────────────────
   Symptomes : accordeon.
   Chaque ligne se deplie sur ce que j'en fais. Le visiteur ne lit que ce
   qui le concerne et repart avec une reponse, pas avec un constat.
   ───────────────────────────────────────────────────────────────────── */
.section-pains {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(79, 107, 255, 0.05), transparent 62%),
    var(--surface);
}
.pain-acc {
  max-width: 54rem;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.pain-row + .pain-row { border-top: 1px solid var(--hairline); }
.pain-head {
  width: 100%;
  display: grid;
  grid-template-columns: 3.25rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
  padding: 1.15rem 1.6rem 1.15rem 1.35rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  transition: background 0.3s var(--smooth);
}
.pain-head:hover { background: var(--canvas); }
.pain-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pain-idx {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--slate);
  transition: color 0.3s var(--smooth);
}
.pain-q {
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pain-q strong { font-weight: 650; }
.pain-chev {
  justify-self: end;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--steel);
  transition: all 0.4s var(--spring);
}
.pain-chev svg { width: 0.7rem; height: 0.7rem; }
.pain-row.is-open .pain-idx { color: var(--accent); }
.pain-row.is-open .pain-chev {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(135deg);
}
.pain-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--smooth);
}
.pain-body-in { padding: 0 1.6rem 1.5rem 4.6rem; }
.pain-answer-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}
.pain-body-in p { font-size: 1rem; line-height: 1.68; color: var(--steel); margin: 0; }
.pain-body-in p strong { color: var(--ink); font-weight: 600; }
.pain-note {
  max-width: 54rem;
  margin: 1.6rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--steel);
}
@media (max-width: 640px) {
  .pain-head { grid-template-columns: 2.25rem 1fr 1.75rem; padding: 1rem 1.1rem 1rem 0.9rem; }
  .pain-q { font-size: 1rem; }
  .pain-body-in { padding: 0 1.1rem 1.35rem 3.15rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Grille de pertinence, manipulable.
   Le visiteur coche, le verdict se met a jour. Panneau clair a gauche,
   verdict sombre a droite : le contraste porte l'attention sur la reponse.
   ───────────────────────────────────────────────────────────────────── */
.section-fit { padding: clamp(2.75rem, 5vw, 4.25rem) 0; background: var(--canvas); }
.fit-app {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 66rem;
  margin: 0 auto;
}
.fit-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.75rem;
  padding: 1.6rem 1.75rem 1.85rem;
  box-shadow: var(--shadow-deep);
}
.fit-lead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1.35rem;
}
.fit-lead-dot {
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fit-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.fit-col h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hairline);
}
.fit-col-mark {
  width: 1.15rem; height: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
}
.fit-yes .fit-col-mark { background: var(--accent-soft); color: var(--accent); }
.fit-no .fit-col-mark { background: rgba(148, 163, 184, 0.18); color: var(--steel); }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fit-check label {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.55rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 0.7rem;
  cursor: pointer;
  transition: background 0.25s var(--smooth);
}
.fit-check label:hover { background: var(--canvas); }
.fit-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fit-box {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--hairline);
  border-radius: 0.375rem;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.25s var(--spring);
}
.fit-box svg { width: 0.65rem; height: 0.65rem; opacity: 0; transform: scale(0.6); transition: all 0.25s var(--spring); }
.fit-yes .fit-check input:checked + .fit-box { background: var(--accent); border-color: var(--accent); }
.fit-no .fit-check input:checked + .fit-box { background: var(--steel); border-color: var(--steel); }
.fit-check input:checked + .fit-box svg { opacity: 1; transform: scale(1); }
.fit-check input:focus-visible + .fit-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.fit-text { font-size: 0.9375rem; line-height: 1.55; color: var(--steel); }
.fit-text strong { color: var(--ink); font-weight: 600; }
.fit-check input:checked ~ .fit-text { color: var(--ink); }

.fit-verdict {
  position: sticky;
  top: 7.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: 1.75rem;
  padding: 1.75rem 1.7rem;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.fit-verdict::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(79, 107, 255, 0.32), transparent 62%);
  opacity: 0.55;
  transition: opacity 0.6s var(--smooth);
}
.fit-app[data-level="mid"] .fit-verdict::before { opacity: 0.8; }
.fit-app[data-level="high"] .fit-verdict::before { opacity: 1; }
.fit-verdict > * { position: relative; }
.fit-verdict-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.1rem;
}
.fit-gauge { margin-bottom: 1.1rem; }
.fit-score {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fit-meter {
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 0.85rem;
  overflow: hidden;
}
.fit-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, #8FA2FF 100%);
  transition: width 0.6s var(--smooth);
}
.fit-verdict-label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.4rem;
}
.fit-verdict-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 1.35rem;
}
.fit-verdict-cta { width: 100%; justify-content: center; background: #fff; color: var(--ink); }
.fit-verdict-cta:hover { background: var(--accent); color: #fff; }
.fit-verdict-foot {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
  margin: 1.1rem 0 0;
}
@media (max-width: 900px) {
  .fit-app { grid-template-columns: 1fr; }
  .fit-verdict { position: static; }
}
@media (max-width: 560px) {
  .fit-cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .fit-panel { padding: 1.35rem 1.25rem 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Audit : colonne fixe a gauche, liste qui defile a droite.
   Traitement editorial, volontairement different de l'accordeon et de la
   grille sombre des cartes.
   ───────────────────────────────────────────────────────────────────── */
.section-audit { padding: clamp(2.75rem, 5vw, 4.25rem) 0; background: var(--surface); }
.audit-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* `start` reduirait la colonne de gauche a la hauteur de son contenu et
     `sticky` n'aurait alors aucune course : elle defilerait hors champ. */
  align-items: stretch;
}
.audit-aside { height: 100%; }
.audit-sticky { position: sticky; top: 7.5rem; }
.audit-sticky h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 1rem 0 1.1rem;
}
.audit-sticky h2 em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: var(--accent); }
.audit-intro { font-size: 1rem; line-height: 1.7; color: var(--steel); margin: 0 0 1.1rem; }
.audit-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 0 1.35rem;
  padding: 0.85rem 1rem;
  background: var(--canvas);
  border-left: 2px solid var(--accent);
  border-radius: 0 0.6rem 0.6rem 0;
}
.audit-cta { display: inline-flex; }
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.1rem;
  padding: 1.15rem 0 1.35rem 0;
}
.audit-item + .audit-item { border-top: 1px solid var(--hairline); }
.audit-item::after {
  content: "";
  position: absolute;
  left: 0.87rem;
  top: 3rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--hairline), transparent);
}
.audit-item:last-child::after { display: none; }
.audit-num {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border: 1px solid rgba(79, 107, 255, 0.18);
}
.audit-body h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.audit-body p { font-size: 0.9688rem; line-height: 1.68; color: var(--steel); margin: 0; }
.audit-body p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .audit-split { grid-template-columns: 1fr; gap: 2rem; }
  .audit-sticky { position: static; }
}

/* ─────────────────────────────────────────────────────────────────────
   « A retenir »
   ───────────────────────────────────────────────────────────────────── */
.section-tldr { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.tldr {
  max-width: 54rem;
  margin-inline: auto;
  background: linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%);
  border: 1px solid var(--hairline);
  border-radius: 1.5rem;
  padding: 1.85rem 2rem 1.95rem;
  box-shadow: var(--shadow-deep);
  position: relative;
  overflow: hidden;
}
.tldr::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(79, 107, 255, 0.15));
}
.tldr-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: tldr; }
.tldr li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--steel);
  counter-increment: tldr;
}
.tldr li::before {
  content: counter(tldr, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--accent);
  opacity: 0.75;
}
.tldr li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .tldr { padding: 1.5rem 1.35rem; } }

/* ─────────────────────────────────────────────────────────────────────
   Parcours
   ───────────────────────────────────────────────────────────────────── */
.section-timeline { padding: clamp(2.75rem, 5vw, 4.25rem) 0; background: var(--canvas); }

/* ─────────────────────────────────────────────────────────────────────
   Relance au milieu de page
   ───────────────────────────────────────────────────────────────────── */
.section-ctaband { padding: clamp(2rem, 4vw, 3rem) 0; }
.ctaband {
  background: var(--ink);
  color: #fff;
  border-radius: 1.75rem;
  padding: clamp(1.85rem, 3.6vw, 2.75rem) clamp(1.6rem, 3.6vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 120% at 85% 0%, rgba(79, 107, 255, 0.3), transparent 60%);
}
.ctaband-text { position: relative; flex: 1 1 22rem; }
.ctaband h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.ctaband h2 em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: #fff; }
.ctaband p {
  font-size: 0.9688rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0.6rem 0 0;
  max-width: 34rem;
}
.ctaband-btn { position: relative; flex: 0 0 auto; background: #fff; color: var(--ink); }
.ctaband-btn:hover { background: var(--accent); color: #fff; }
@media (max-width: 720px) {
  .ctaband { flex-direction: column; align-items: flex-start; }
  .ctaband-btn { width: 100%; justify-content: center; }
}


/* ─────────────────────────────────────────────────────────────────────
   Bandeau de logos : remonte en taille.
   Il etait trop discret apres la premiere correction. Il porte la preuve
   sociale juste apres le hero, il doit se voir.
   ───────────────────────────────────────────────────────────────────── */
.clients-section {
  padding: 3rem 0 3.25rem;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.clients-section .clients-label { margin-bottom: 1.6rem; }
.clients-section .marquee-track img {
  height: 2.6rem;
  max-width: 9rem;
  filter: grayscale(1) opacity(0.5);
}
.clients-section .marquee-track,
.clients-section .marquee-wrapper { gap: 4rem; }
.clients-section .marquee-track img:hover { filter: grayscale(0) opacity(1); }
@media (max-width: 720px) {
  .clients-section { padding: 2.25rem 0 2.5rem; }
  .clients-section .marquee-track img { height: 2.1rem; max-width: 7rem; }
  .clients-section .marquee-track,
  .clients-section .marquee-wrapper { gap: 2.75rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Tableau comparatif, reprise.
   Celui de la home est un bloc dense de trois colonnes de texte a 14px.
   Ici chaque ligne devient une bande autonome : filet d'accent sur le
   critere, colonne mise en avant teintee, et vraie pile sur mobile ou
   chaque valeur retrouve son intitule.
   ───────────────────────────────────────────────────────────────────── */
.comparison-table.cmp-v2 {
  max-width: 62rem;
  background: transparent;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  display: grid;
  gap: 0.5rem;
}
.cmp-v2 .comparison-row {
  grid-template-columns: 1.1fr 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  transition: border-color 0.35s var(--smooth), background 0.35s var(--smooth);
}
.cmp-v2 .comparison-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
}

/* En-tete : pas de carte, des intitules. */
.cmp-v2 .comparison-row.comparison-head {
  border: 0;
  background: none;
  border-radius: 0;
  margin-bottom: 0.15rem;
}
.cmp-v2 .comparison-row.comparison-head:hover { background: none; }
.cmp-v2 .comparison-head .comparison-cell {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.35rem 1.35rem 0.6rem;
  background: none;
}
.cmp-v2 .comparison-head .comparison-cell.highlight {
  color: var(--accent);
  background: none;
}
.cmp-v2 .comparison-head .comparison-cell.highlight::before { display: none; }

.cmp-v2 .comparison-cell {
  padding: 1.15rem 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  align-items: flex-start;
  gap: 0.6rem;
}
.cmp-v2 .comparison-cell.criterion {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}
.cmp-v2 .comparison-row:not(.comparison-head) .comparison-cell.criterion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.cmp-v2 .comparison-cell.highlight {
  background: rgba(79, 107, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.cmp-v2 .comparison-cell.highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.cmp-v2 .comparison-icon { margin-top: 0.15rem; }

/* Mobile : chaque ligne devient une carte, chaque valeur retrouve son
   intitule. Sans ca, deux colonnes de texte sans en-tete sont illisibles. */
@media (max-width: 820px) {
  .cmp-v2 .comparison-row.comparison-head { display: none; }
  .cmp-v2 .comparison-row {
    display: block;
    padding: 0.35rem 0 0.6rem;
  }
  .cmp-v2 .comparison-cell {
    display: block;
    padding: 0.7rem 1.15rem;
    background: none;
  }
  .cmp-v2 .comparison-cell.criterion {
    font-size: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.35rem;
    background: none;
  }
  .cmp-v2 .comparison-row:not(.comparison-head) .comparison-cell.criterion::before { display: none; }
  .cmp-v2 .comparison-cell.highlight { background: none; }
  .cmp-v2 .comparison-cell.highlight::before {
    left: 1.15rem;
    top: auto;
    bottom: auto;
    height: 100%;
    width: 2px;
  }
  .cmp-v2 .comparison-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5938rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 0.3rem;
  }
  .cmp-v2 .comparison-cell.highlight[data-label]::before {
    color: var(--accent);
    position: static;
    width: auto;
    background: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Bloc « eclairage » : une donnee marquante face a son explication.
   Sert aux passages ou un pave de texte defendait en realite deux ou
   trois idees chiffrables. Les lignes alternent de cote.
   ───────────────────────────────────────────────────────────────────── */
.section-insight {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-insight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 12% 0%, rgba(79, 107, 255, 0.22), transparent 62%);
}
.section-insight > .container { position: relative; }
.section-insight .section-header h2 { color: #fff; }
.section-insight .section-header p { color: rgba(255, 255, 255, 0.62); }
.section-insight .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
/* L'en-tete de ces deux sections est aligne a gauche (choix editorial) mais
   il occupait TOUTE la largeur du conteneur, alors que le contenu en dessous
   est borne et centre. Resultat : le titre commencait a 84px et la liste a
   208px, les deux ne s'alignaient plus. On borne l'en-tete a la meme largeur
   que son contenu : le titre reste a gauche, mais a gauche DE SON BLOC. */
.section-insight .section-header:not(.centered) { max-width: 64rem; margin-inline: auto; }
.section-steps .section-header:not(.centered) { max-width: 56rem; margin-inline: auto; }
.section-prose .section-header:not(.centered) { max-width: 46rem; margin-inline: auto; }

.insight-list { display: grid; gap: 1rem; max-width: 64rem; margin-inline: auto; }
.insight-row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding: 1.6rem 1.75rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.5rem;
  transition: border-color 0.4s var(--smooth), background 0.4s var(--smooth);
}
.insight-row:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(79, 107, 255, 0.35);
}
/* Une ligne sur deux inverse la donnee et le texte : le regard ne
   s'endort pas sur une colonne unique. */
.insight-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 15rem; }
.insight-row:nth-child(even) .insight-figure { order: 2; }
.insight-figure {
  text-align: center;
  padding: 1.1rem 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(160deg, rgba(79, 107, 255, 0.22), rgba(79, 107, 255, 0.05));
  border: 1px solid rgba(79, 107, 255, 0.28);
}
.insight-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
}
.insight-kicker em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: #A8B6FF;
}
.insight-figure-label {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.5rem;
}
.insight-body h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.5rem;
}
.insight-body h3 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: #A8B6FF;
}
.insight-body p {
  font-size: 1rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}
.insight-body p strong { color: #fff; font-weight: 600; }
.insight-note {
  max-width: 64rem;
  margin: 1.6rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 780px) {
  .insight-row,
  .insight-row:nth-child(even) { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.35rem 1.25rem; }
  .insight-row:nth-child(even) .insight-figure { order: 0; }
  .insight-figure { padding: 0.9rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REPRISE V3
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   Fil d'Ariane, desormais dans le hero.
   En bande autonome sous la pilule de navigation, il flottait sans
   rattachement visuel. Aligne sur le H1, il devient une amorce de page.
   ───────────────────────────────────────────────────────────────────── */
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs {
  padding: 0;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
}
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs li { display: inline-flex; align-items: center; }
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs li:not(:last-child)::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--slate);
  opacity: 0.5;
  margin-left: 0.4rem;
}
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs a {
  color: var(--steel);
  text-decoration: none;
  transition: color 0.3s var(--smooth);
}
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs a:hover { color: var(--accent); }
.hero-content > .breadcrumbs,
.hero-lite-inner > .breadcrumbs [aria-current] { color: var(--ink); font-weight: 550; }

/* La bande autonome n'existe plus : on remet au hero son espacement propre. */
.breadcrumbs + #hero,
#hero {
  padding-top: clamp(8rem, 12vw, 10.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
#hero .hero-bg { top: 0; }
@media (max-width: 768px) {
  #hero { padding-top: 7.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Maillage : fond clair, logos vectoriels a la taille du calculateur.
   ───────────────────────────────────────────────────────────────────── */
.section-mesh {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background: var(--canvas);
}
.mesh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1rem;
}
.mesh-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: all 0.35s var(--smooth);
}
.mesh-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 107, 255, 0.3);
  box-shadow: var(--shadow-deep);
}
.mesh-logo {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition: background 0.35s var(--smooth);
}
.mesh-card:hover .mesh-logo { background: var(--surface); }
/* Meme gabarit que dans le calculateur : le logo doit se lire. */
.mesh-logo svg { width: 1.75rem; height: 1.75rem; display: block; }
.mesh-card-all .mesh-logo { color: var(--accent); background: var(--accent-soft); border-color: rgba(79, 107, 255, 0.18); }
.mesh-body { display: block; min-width: 0; }
.mesh-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mesh-desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--steel);
  margin-top: 0.2rem;
}
.mesh-go {
  justify-self: end;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--steel);
  transition: all 0.35s var(--spring);
}
.mesh-go svg { width: 0.65rem; height: 0.65rem; }
.mesh-card:hover .mesh-go {
  background: var(--accent);
  color: #fff;
  transform: translateX(2px) translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────
   Etapes : chemin numerote sur fond clair.
   Auparavant la grille sombre des cartes, ce qui faisait deux sections
   sombres de suite sur plusieurs pages.
   ───────────────────────────────────────────────────────────────────── */
.section-steps { padding: clamp(2.75rem, 5vw, 4.25rem) 0; background: var(--surface); }
.steps-path { list-style: none; margin-inline: auto; padding: 0; display: grid; gap: 0; max-width: 56rem; }
.step-node {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.35rem;
  position: relative;
  padding-bottom: 1.1rem;
}
.step-node:last-child { padding-bottom: 0; }
.step-marker { display: flex; flex-direction: column; align-items: center; }
.step-num {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transition: all 0.35s var(--smooth);
  z-index: 1;
}
/* Le trait qui relie les etapes : c'est lui qui fait un chemin plutot
   qu'une pile de cartes. */
.step-node:not(:last-child) .step-marker::after {
  content: "";
  flex: 1;
  width: 2px;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(79, 107, 255, 0.35), var(--hairline));
}
.step-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem 1.35rem;
  transition: all 0.35s var(--smooth);
}
.step-node:hover .step-card { border-color: rgba(79, 107, 255, 0.28); background: var(--surface); box-shadow: var(--shadow-soft); }
.step-node:hover .step-num { border-color: var(--accent); background: var(--accent); color: #fff; }
.step-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.step-card p { font-size: 0.9688rem; line-height: 1.66; color: var(--steel); margin: 0; }
.step-card p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .step-node { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; }
  .step-num { width: 2.1rem; height: 2.1rem; font-size: 0.6875rem; }
  .step-card { padding: 1.05rem 1.15rem 1.15rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Compléments
   ───────────────────────────────────────────────────────────────────── */

/* Trois chiffres : c'est la valeur de base de la home, on l'explicite pour
   que la classe existe et qu'aucune page ne se retrouve sans regle. */
.hero-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.author-proof-item { min-width: 0; }

/* Un cas seul dans une grille de trois colonnes paraissait isole : il prend
   toute la largeur, en mise en page horizontale. */
.cases-static.cases-single { max-width: 56rem; margin: 0 auto; }
.cases-single > .result-card {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem 2.25rem;
  align-items: start;
}
.cases-single > .result-card .result-head { grid-column: 1; }
.cases-single > .result-card .result-platforms { grid-column: 1; }
.cases-single > .result-card .result-metrics-grid { grid-column: 2; grid-row: 1 / span 2; }
.cases-single > .result-card .result-context { grid-column: 1 / -1; margin-top: 0.25rem; }
@media (max-width: 760px) {
  .cases-single > .result-card { grid-template-columns: 1fr; }
  .cases-single > .result-card .result-metrics-grid { grid-column: 1; grid-row: auto; }
}

/* Le logo client identifie la marque : le nom en toutes lettres a cote
   faisait doublon et se retrouvait tronque une fois le logo agrandi.
   La pastille de secteur reprend donc toute la largeur restante. */
.cases-static .result-head { gap: 0.85rem; }
.cases-static .result-sector { margin-left: auto; }

/* Note sous le comparatif.
   Elle porte la concession honnete (« ce qu'une agence fait mieux »), qui
   etait une ligne du tableau : elle y recevait une croix rouge sur les
   points forts de l'agence, ce qui se retournait contre l'auteur. */
.cmp-note {
  max-width: 62rem;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: 0 0.9rem 0.9rem 0;
}

/* Comparatif : plus d'air, en-tete plus lisible, colonne mise en avant
   clairement identifiee. Le tableau precedent etait dense et se lisait
   comme un argumentaire bon marche. */
.cmp-v2 .comparison-cell { padding: 1.35rem 1.5rem; font-size: 0.9688rem; }
.cmp-v2 .comparison-cell.criterion { font-size: 0.9688rem; }
.cmp-v2 .comparison-head .comparison-cell {
  font-size: 0.6875rem;
  padding: 0.4rem 1.5rem 0.7rem;
}
.cmp-v2 .comparison-head .comparison-cell.highlight {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
}
/* Un point d'accent signale la colonne mise en avant sans crier. */
.cmp-v2 .comparison-head .comparison-cell.highlight::after {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.cmp-v2 .comparison-row { border-radius: 1.25rem; }

/* ─────────────────────────────────────────────────────────────────────
   Hero : le logo de la regie en ligne de flottaison.
   Le visiteur qui arrive de Google doit savoir de quelle plateforme on
   parle avant meme de lire le titre.
   ───────────────────────────────────────────────────────────────────── */
.eyebrow.eyebrow-platform {
  gap: 0.55rem;
  padding-left: 0.4rem;
}
.eyebrow-logo {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  flex: 0 0 auto;
}
.eyebrow-logo svg { width: 0.95rem; height: 0.95rem; display: block; }

/* Le maillage ferme la page, apres le formulaire : il se fait plus discret. */
.section-mesh { background: var(--canvas); border-top: 1px solid var(--hairline); }

/* ═══════════════════════════════════════════════════════════════════════
   LE MECANISME

   Ce bloc etait un pave de texte, puis un pave de texte numerote. Il est
   desormais construit autour d'un schema : la chaine que suit l'argument,
   avec le maillon qui casse signale. Le texte vient apres, en deux
   colonnes, et une citation ferme.

   Composition volontairement differente de l'audit (colonne fixe + liste
   verticale) et de l'eclairage (sombre, lignes alternees).
   ═══════════════════════════════════════════════════════════════════════ */
.section-mecha {
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(79, 107, 255, 0.05), transparent 60%),
    var(--canvas);
}
.mecha-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.mecha-head .eyebrow { margin-bottom: 1.1rem; }
.mecha-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.mecha-head h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.mecha-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--steel);
  margin: 0 0 0.85rem;
}
.mecha-lead:last-child { margin-bottom: 0; }
.mecha-lead strong { color: var(--ink); font-weight: 600; }

/* ─── La chaine ───
   Le coeur visuel du bloc : on voit le trajet, et on voit ou il casse. */
.chain-wrap {
  max-width: 62rem;
  margin: 0 auto 2.5rem;
  padding: 1.85rem 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-deep);
}
.chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.chain-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 0.5rem;
}
/* Le trait de liaison part du centre de chaque pastille vers la suivante. */
.chain-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: calc(50% + 1.35rem);
  right: calc(-50% + 1.35rem);
  height: 2px;
  border-radius: 999px;
  background: var(--hairline);
}
.chain-index {
  position: relative;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--canvas);
  border: 1.5px solid var(--hairline);
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  transition: all 0.35s var(--smooth);
}
.chain-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
}

/* Le maillon faible : c'est lui qui porte l'argument du bloc. */
.chain-node.is-weak .chain-index {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.chain-node.is-weak .chain-label { color: var(--accent); }
.chain-flag {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(79, 107, 255, 0.2);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.chain-note {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--steel);
  text-align: center;
}
.chain-note strong { color: var(--ink); font-weight: 600; }

/* En dessous de 760px la chaine se redresse : les libelles ne tiennent
   plus cote a cote, et une chaine illisible ne vaut rien. */
@media (max-width: 760px) {
  .chain { flex-direction: column; gap: 0.85rem; align-items: stretch; }
  .chain-node {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.85rem;
    align-items: center;
    text-align: left;
    padding: 0;
  }
  .chain-node:not(:last-child)::after {
    top: 2.2rem;
    left: 1.1rem;
    right: auto;
    bottom: -0.85rem;
    width: 2px;
    height: auto;
  }
  .chain-index { margin: 0; }
  .chain-flag { grid-column: 2; margin-top: 0.3rem; }
}

/* ─── Le texte, en deux colonnes ─── */
.mecha-grid {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.mecha-point {
  position: relative;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.35s var(--smooth);
}
.mecha-point:hover {
  border-color: rgba(79, 107, 255, 0.28);
  box-shadow: var(--shadow-deep);
  transform: translateY(-2px);
}
.mecha-point-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.75rem;
}
.mecha-point h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.mecha-point p { font-size: 0.9688rem; line-height: 1.66; color: var(--steel); margin: 0; }
.mecha-point p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .mecha-grid { grid-template-columns: 1fr; } }

/* ─── La citation ferme le bloc ─── */
.mecha-quote {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  text-align: center;
}
.mecha-quote p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.mecha-quote p::before,
.mecha-quote p::after { content: "\201C"; color: var(--accent); opacity: 0.45; }
.mecha-quote p::after { content: "\201D"; }

/* ─────────────────────────────────────────────────────────────────────
   Encart de transparence.
   Il reutilise `.section-prose` et `.prose-narrow`, que le bloc de texte
   long n'utilise plus depuis son passage en « mecanisme ». On garde donc
   ici le strict necessaire a son affichage.
   ───────────────────────────────────────────────────────────────────── */
.section-prose { padding: clamp(2.5rem, 4.5vw, 3.5rem) 0; }
.prose-narrow { max-width: 46rem; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   RAIL DE PROGRESSION

   Sur une page longue, le visiteur doit pouvoir se situer. Desktop large
   uniquement : sur mobile un rail lateral empiete sur la lecture, et le
   bandeau de conversion occupe deja le bas de l'ecran.
   ═══════════════════════════════════════════════════════════════════════ */
.rail {
  position: fixed;
  left: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  align-items: stretch;
  gap: 0.85rem;
  opacity: 1;
  transition: opacity 0.4s var(--smooth);
}
.rail.is-hidden { opacity: 0; pointer-events: none; }

.rail-track {
  position: relative;
  width: 2px;
  border-radius: 999px;
  background: var(--hairline);
  flex: 0 0 2px;
}
.rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), rgba(79, 107, 255, 0.35));
  transition: height 0.2s linear;
}

.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rail-item a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.1rem 0;
}
.rail-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--slate);
  opacity: 0.4;
  flex: 0 0 auto;
  transition: all 0.35s var(--spring);
}
/* L'intitule est une pastille opaque, affichee seulement pour l'element
   survole ou actif. Affiches tous en meme temps et sans fond, ils se
   superposaient au texte de la page. */
.rail-name {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: all 0.3s var(--smooth);
}
.rail-item:hover .rail-name { opacity: 1; transform: translateX(0); }
.rail-item:hover .rail-dot { opacity: 1; background: var(--accent); }
.rail-item.is-done .rail-dot { opacity: 0.75; background: var(--accent); }
.rail-item.is-on .rail-dot {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.45);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.rail-item.is-on .rail-name {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
  border-color: rgba(79, 107, 255, 0.3);
}

/* Le rail n'apparait que s'il y a la place a sa gauche sans empieter.

   Deux seuils, parce que les pastilles et les etiquettes n'ont pas le meme
   encombrement. Le conteneur fait 1400px avec 4rem de gouttiere : en
   dessous de 1400px de fenetre le contenu commence a 64px, et l'etiquette
   du rail y arrive jusqu'a 145px. Elle passait donc sur les eyebrows des
   sections alignees a gauche (« PARCOURS » couvert par « QUI JE SUIS »).
   Les pastilles seules tiennent des 1400px ; les etiquettes attendent
   1680px, largeur a laquelle la gouttiere fait 204px. */
@media (min-width: 1400px) { .rail { display: flex; } }
@media (max-width: 1679px) { .rail-name { display: none; } }
@media (min-width: 1600px) { .rail { left: 2.75rem; } }

/* ═══════════════════════════════════════════════════════════════════════
   CAS CLIENTS — carousel  [DORMANT depuis le 27/08/2026]

   Aucune page ne rend plus ce bloc : les exemples ont ete retires en
   attendant les vrais cas pratiques (donnees conservees sous la cle
   `casesArchive` de chaque JSON). Le style et le JS restent en place pour
   que la restauration soit un simple re-ajout du bloc dans `blocks[]`.

   La grille statique empilait les cartes sur deux rangees : la section
   pesait pres de mille pixels et ne donnait rien a faire au visiteur.
   Ici une piste qui defile, avec accroche par carte, plus les memes
   controles que la carousel de la home (compteur, barre, fleches).

   Le defilement est natif : sans JavaScript la piste reste utilisable au
   doigt et au trackpad, le JS n'ajoute que les fleches et le compteur.
   ═══════════════════════════════════════════════════════════════════════ */
.cases-deck {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* de la place pour les ombres des cartes, sans rogner */
  padding: 0.5rem 0.5rem 1rem;
  margin: -0.5rem -0.5rem 0;
}
.cases-deck::-webkit-scrollbar { display: none; }
.cases-deck > .result-card {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 1100px) {
  .cases-deck > .result-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
}
@media (max-width: 720px) {
  .cases-deck > .result-card { flex: 0 0 88%; }
}

/* Un cas seul ne defile pas : il prend toute la largeur. */
.cases-deck.cases-single { overflow: visible; max-width: 56rem; margin: 0 auto; }
.cases-single > .result-card {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem 2.25rem;
  align-items: start;
}
.cases-single > .result-card .result-head { grid-column: 1; }
.cases-single > .result-card .result-platforms { grid-column: 1; }
.cases-single > .result-card .result-metrics-grid { grid-column: 2; grid-row: 1 / span 2; }
.cases-single > .result-card .result-context { grid-column: 1 / -1; margin-top: 0.25rem; }
@media (max-width: 760px) {
  .cases-single > .result-card { grid-template-columns: 1fr; }
  .cases-single > .result-card .result-metrics-grid { grid-column: 1; grid-row: auto; }
}

.cases-controls { margin-top: 1.5rem; }
.cases-controls .carousel-btn[disabled] { opacity: 0.35; cursor: not-allowed; }