/* ═══════════════════════════════════════════════════════════════════════
   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);
}

/* En dessous de 860px la carte passe sur une colonne, et l'identite se
   replie en ligne : portrait a gauche, nom / role / certifications a
   droite, carte en dessous sur toute la largeur.

   La version precedente placait chaque element par `grid-row` explicite.
   Elle a tenu tant que la colonne contenait trois enfants ; l'ajout des
   certifications puis de la carte a suffi a envoyer le nom au-dessus du
   portrait. Un flex sur un conteneur d'identite ne depend plus du nombre
   d'enfants. */
@media (max-width: 860px) {
}
@media (max-width: 420px) {
}

/* ─── 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-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-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-q { font-size: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   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); }
@media (max-width: 900px) {
}
@media (max-width: 560px) {
}

/* ─────────────────────────────────────────────────────────────────────
   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; }
/* Meme parti pris que l'accueil : grise au repos, couleur au survol.
   Attention, cette feuille est chargee APRES site.css et gagne donc sur
   la regle de la home : les deux doivent etre modifiees ensemble, sans
   quoi seule la page d'accueil change. */
.clients-section .marquee-track img {
  height: 2.6rem;
  max-width: 9rem;
  filter: grayscale(1) opacity(0.55);
}
.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.
   ───────────────────────────────────────────────────────────────────── */
/* Regles desormais non prefixees : le fil d'Ariane sert aussi hors du
   hero, en tete de la premiere section des pages qui n'en ont pas.
   Un seul selecteur pour tous les contextes : en dupliquant la regle avec une
   virgule, j'avais casse les selecteurs composes. « .hero-content >
   .breadcrumbs ol » etait devenu « .hero-content > .breadcrumbs, ... ol »,
   ce qui appliquait les styles de la liste au conteneur et laissait la
   liste brute, numerotee, par-dessus le titre. */
.breadcrumbs {
  padding: 0;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
}

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

.breadcrumbs li { display: inline-flex; align-items: center; }

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

.breadcrumbs a {
  color: var(--steel);
  text-decoration: none;
  transition: color 0.3s var(--smooth);
}

.breadcrumbs a:hover { color: var(--accent); }
.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)); }

/* 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; }
@media (max-width: 760px) {
}

/* 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;
}
@media (max-width: 1100px) {
}
@media (max-width: 720px) {
}
@media (max-width: 760px) {
}

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

/* ═══ En-tete compact ═══
   Fil d'Ariane, titre, accroche. Rien d'autre : ni portrait, ni
   chiffres, ni badges. Ces regles venaient d'outils.css, ou elles ne
   servaient qu'aux pages utilitaires. References et Secteurs les
   utilisent maintenant aussi, et ces pages ne chargent pas outils.css.
   ═══════════════════════════════════════════════════════════════ */
#hero.hero-lite { padding: 8.5rem 0 0; min-height: 0; }

.hero-lite-inner { max-width: 46rem; }

.hero-lite h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0.85rem 0 0.75rem;
}

.hero-lite .hero-sub {
  font-size: 1.0313rem;
  line-height: 1.65;
  max-width: 42rem;
  margin: 0;
}

@media (max-width: 768px) { #hero.hero-lite { padding: 7rem 0 0; } }

/* ═══ Premiere section d'une page sans hero ═══
   La barre de navigation est fixe : sans reserve en haut, le fil d'Ariane
   passe dessous. Le hero assurait ce degagement avec ses 11rem ; une page
   qui commence directement par une section doit le reprendre a son compte.
   ═══════════════════════════════════════════════════════════════ */
.section-premiere { padding-top: 9.5rem; }

/* Le titre de cette section est centre : un fil d'Ariane cale a gauche
   restait seul dans le coin, sans rattachement au reste. Il se centre
   avec lui. */
.section-premiere .breadcrumbs {
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-premiere .section-header h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

@media (max-width: 768px) { .section-premiere { padding-top: 7.5rem; } }

/* ═══ Tuile de maillage a icone ═══
   Les regies ont un logo de marque, coloré et reconnaissable. Les secteurs
   n'en ont pas : ils portent une icone de trait, qu'on pose sur une
   pastille teintee pour qu'elle ait le meme poids visuel qu'un logo.
   ═══════════════════════════════════════════════════════════════ */
.mesh-card-icone .mesh-logo {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 0.7rem;
}

.mesh-card-icone .mesh-logo svg { width: 1.15rem; height: 1.15rem; }

/* ═══ Leviers par regie ═══
   Onglets de regies, puis la grille de ce qu'elle permet. Le premier
   panneau est visible sans JavaScript : le script ne fait que basculer.
   ═══════════════════════════════════════════════════════════════ */
.section-leviers { background: var(--canvas); }

.lev-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.lev-onglet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--steel);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s var(--smooth);
}

.lev-onglet-logo {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lev-onglet-logo svg { width: 100%; height: 100%; }

.lev-onglet:hover { border-color: rgba(79, 107, 255, 0.3); color: var(--ink); }

.lev-onglet.actif {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.lev-panneau { display: none; }
.lev-panneau.actif { display: block; }

.lev-intro {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--steel);
  max-width: 44rem;
  margin: 0 0 1.5rem;
}

.lev-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.lev-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  text-decoration: none;
}

.lev-item-lien {
  transition: transform 0.35s var(--smooth), border-color 0.35s var(--smooth),
    box-shadow 0.35s var(--smooth);
}

.lev-item-lien:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 107, 255, 0.3);
  box-shadow: var(--shadow-soft);
}

.lev-nom {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding-right: 1.1rem;
}

.lev-texte { font-size: 0.8125rem; line-height: 1.5; color: var(--steel); }

.lev-fleche {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.lev-fleche svg { width: 0.55rem; height: 0.55rem; }

.lev-item-lien:hover .lev-fleche { background: var(--accent); color: #fff; }

.lev-page {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.lev-page svg { width: 0.625rem; height: 0.625rem; }
.lev-page:hover { text-decoration: underline; }

@media (max-width: 900px) { .lev-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .lev-grille { grid-template-columns: 1fr; }
  .lev-onglet { font-size: 0.75rem; padding: 0.45rem 0.8rem 0.45rem 0.5rem; }
}

/* ═══ Perimetre, variante claire ═══
   Le rendu par defaut des cartes est un pave sombre. Sur une page de
   sommaire, deja dense en liens, il tombait comme un mur de texte sans
   aucun point d'entree. Ici chaque carte porte une icone et un numero, sur
   fond clair, avec un survol : on distingue trois briques au lieu de lire
   trois paragraphes.
   ═══════════════════════════════════════════════════════════════ */
.section-perimetre { background: var(--canvas); }

/* Theo : « les fiches, c'est vraiment simple, meme trop simple. J'aime pas
   du tout comment c'est dispose, ca ne donne pas envie de lire. »

   Trois defauts. Une grille figee a trois colonnes, qui laissait la
   quatrieme carte seule sur sa ligne. Une hierarchie plate : icone, numero,
   titre et texte avaient presque le meme poids, donc rien n'accrochait
   l'oeil. Et des puces grises en bas de carte qu'on ne lisait pas.

   La grille s'adapte au nombre de fiches. Le numero devient un reperage
   discret en filigrane, l'icone prend de la presence, le titre passe devant
   le reste, et les puces se rangent sous un filet qui les separe du propos. */
.perim-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}

.perim-carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--smooth), border-color 0.4s var(--smooth),
    box-shadow 0.4s var(--smooth);
}

.perim-carte:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 107, 255, 0.3);
  box-shadow: var(--shadow-diffused);
}

/* Un liséré d'accent qui se decouvre au survol : la carte repond sans
   qu'on ait a la surligner en permanence. */
.perim-carte::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--smooth);
}

.perim-carte:hover::after { transform: scaleY(1); }

.perim-icone {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1rem;
  transition: background 0.4s var(--smooth);
}

.perim-carte:hover .perim-icone { background: rgba(79, 107, 255, 0.14); }

.perim-icone svg { width: 1.3rem; height: 1.3rem; }

/* Le numero ne sert qu'a situer la fiche dans la serie : en filigrane,
   assez gros pour donner du rythme, assez pale pour ne rien disputer. */
.perim-num {
  position: absolute;
  top: 0.55rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: rgba(24, 24, 27, 0.045);
  pointer-events: none;
}

.perim-carte h3 {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.perim-carte p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--steel);
  margin: 0 0 1.1rem;
  flex: 1 1 auto;
}

.perim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 560px) {
  .perim-grille { grid-template-columns: 1fr; }
  .perim-num { font-size: 2.5rem; }
}

@media (max-width: 900px) { .perim-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .perim-grille { grid-template-columns: 1fr; } }

/* ═══ Tuile de maillage a logos clients ═══
   Les secteurs n'ont pas de logo de marque. Une icone de trait generique
   ne prouvait rien ; trois pastilles rondes de 30px etaient illisibles,
   parce que ces logos sont des signatures larges en 400x200. Deux
   vignettes rectangulaires, au gabarit du logo de regie, laissent la
   marque se lire tout en apportant la preuve.
   ═══════════════════════════════════════════════════════════════ */
.mesh-card-clients { grid-template-columns: 4.8rem minmax(0, 1fr) 1.5rem; }

.mesh-clients {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mesh-clients img {
  width: 2.7rem;
  height: 2.2rem;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0.6rem;
  padding: 0.25rem;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s var(--spring);
}

/* Les deux vignettes se chevauchent, la premiere par-dessus.
   `z-index: -1` sur la seconde la faisait passer derriere le fond de la
   carte, donc disparaitre entierement : la carte est opaque et n'ouvre pas
   de contexte d'empilement. On empile par valeurs positives. */
.mesh-clients img { position: relative; }
.mesh-clients img:first-child { z-index: 2; }
.mesh-clients img:last-child { margin-left: -0.5rem; z-index: 1; }

.mesh-card-clients:hover .mesh-clients img:last-child { transform: translateX(3px); }

/* La premiere section d'un sommaire doit degager la barre de navigation
   fixe, et respirer avant la grille. */
.section-mesh.section-premiere { padding-top: 9.5rem; }

@media (max-width: 768px) { .section-mesh.section-premiere { padding-top: 7.5rem; } }

/* ═══ Respirations entre sections ═══ */

/* `#hero.hero-lite` n'avait aucun rembourrage bas : sur une page de secteur,
   le bandeau de logos venait coller sous l'accroche, sans respiration. */
#hero.hero-lite { padding-bottom: 3.5rem; }

/* Deux sections claires qui se suivent cumulaient leurs rembourrages :
   pres de vingt rem de vide entre les leviers et le perimetre. Elles
   partagent le meme fond, autant les faire couler l'une dans l'autre. */
.section-leviers { padding-bottom: clamp(3rem, 5vw, 4rem); }
.section-perimetre { padding-top: clamp(3rem, 5vw, 4rem); }

@media (max-width: 900px) { }
@media (max-width: 600px) { }

/* ─── Rangee de clients fixe ──────────────────────────────────────────
   Employee par le bloc `logos` quand un secteur compte moins de cinq
   references. Le bandeau defilant y repasserait sur les memes marques
   toutes les deux secondes, et le procede se verrait : deux references
   assumees valent mieux que deux references qu'on fait tourner pour
   faire nombre. Les regles reprennent celles de la piste, sans
   l'animation ni le debordement. */
.clients-rangee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
    padding: 0 1.5rem;
}

.clients-rangee img {
    height: 3.25rem;
    max-width: 10rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.4s var(--smooth), transform 0.4s var(--spring);
}

.clients-rangee img:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .clients-rangee {
        gap: 2.5rem;
    }
}

/* `.tool-chip` est defini pour le bloc sombre de la home : texte blanc a
   80 % et bordure blanche a 10 %. Repris tel quel dans la variante claire
   du bloc « Perimetre », il donnait des puces blanches sur carte blanche.
   Elles etaient bien dans le HTML, et parfaitement invisibles. */
.perim-chips .tool-chip {
    background: rgba(79, 107, 255, 0.06);
    border-color: rgba(79, 107, 255, 0.18);
    color: var(--steel);
}

@keyframes au-halo {
    0%   { transform: scale(0.35); opacity: 0.32; }
    70%  { transform: scale(1);    opacity: 0; }
    100% { transform: scale(1);    opacity: 0; }
}

/* ═══ « Qui je suis » ═══
   Cinquieme version. Les quatre precedentes disposaient les memes elements
   sur une ligne : portrait, nom, lieu, chiffres. Chacun y perdait sa
   taille — le badge Google Partner faisait 2,6 rem de large, la carte de
   France la taille d'une icone — et il restait au milieu un tiers de
   largeur vide que rien ne justifiait.

   Deux panneaux, donc. A gauche l'identite, de haut en bas : qui parle,
   ce qu'il a fait, ce qui le certifie. A droite, sur toute la hauteur, la
   carte en grand : elle repond a la question que pose un visiteur qui
   cherche un prestataire — ou est-il, et est-ce que ca me concerne. */
.section-author {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--canvas);
}

.au-carte {
    max-width: 58rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    border: 1px solid var(--hairline);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-deep);
    background: var(--surface);
    overflow: hidden;
}

/* ─── Panneau de gauche : qui parle ───────────────────────────── */
.au-identite {
    padding: clamp(1.75rem, 3.5vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.au-tete {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.au-portrait {
    width: 5.5rem;
    height: 5.5rem;
    flex: 0 0 5.5rem;
    border-radius: 1.25rem;
    padding: 0.25rem;
    background: linear-gradient(140deg, rgba(79, 107, 255, 0.4), rgba(79, 107, 255, 0.08));
}

.au-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--accent-soft);
}

.au-nom {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 0.3rem;
}

.au-role {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--steel);
    margin: 0;
}

/* ─── Les chiffres, en colonne plutot qu'en bandeau ───────────── */
.au-faits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.9rem;
}

.au-fait {
    padding-left: 0.85rem;
    border-left: 2px solid var(--accent);
    min-width: 0;
}

.au-fait-v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ink);
}

.au-fait-v em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.au-fait-l {
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--steel);
    margin-top: 0.2rem;
}

/* ─── Les preuves exterieures, en pied de panneau ─────────────── */
.au-liens {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.4rem;
    border-top: 1px solid var(--hairline);
}

.au-lien {
    display: inline-flex;
    align-items: center;
    /* Le soulignement des liens de contenu rendait « Partenaire certifie
       Google » illisible : deux lignes barrees dans un encart de 0,75 rem. */
    text-decoration: none;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--smooth);
}

.au-lien:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.2);
}

/* Le badge officiel ne se lit pas en dessous de 3,5 rem : il est accompagne
   d'une mention en clair, qui dit ce que le visiteur ne dechiffrerait pas. */
.au-lien-google {
    gap: 0.6rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.85rem;
}

.au-lien-google img { width: 3.4rem; height: auto; display: block; }

.au-lien-google span {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--steel);
}

.au-lien-google b { display: block; color: var(--ink); font-weight: 600; }

/* Le carre bleu ne disait pas ou il menait : meme pastille que Google,
   avec la marque en vignette et la destination ecrite a cote. */
.au-lien-linkedin {
    gap: 0.6rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.85rem;
}

.au-lien-marque {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: #0A66C2;
    color: #fff;
}

.au-lien-marque svg { width: 1.25rem; height: 1.25rem; display: block; }

.au-lien-linkedin span:last-child {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--steel);
}

.au-lien-linkedin b { display: block; color: var(--ink); font-weight: 600; }

/* ─── Panneau de droite : d'ou je travaille ───────────────────── */
.au-lieu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
    padding: clamp(1.75rem, 3.5vw, 2.4rem) 1.25rem;
    border-left: 1px solid var(--hairline);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(79, 107, 255, 0.09) 0%, transparent 70%),
        rgba(24, 24, 27, 0.015);
}

.au-carte-fr { width: 8.5rem; height: auto; margin-bottom: 0.7rem; }

.au-contour {
    fill: rgba(79, 107, 255, 0.08);
    stroke: rgba(79, 107, 255, 0.5);
    stroke-width: 5;
    stroke-linejoin: round;
}

/* Une punaise plutot qu'un point. Un disque de deux pixels sur une France
   de sept rem se lit comme un defaut d'impression, pas comme une adresse ;
   le nom ecrit a cote leve le dernier doute. */
.au-punaise {
    fill: var(--accent);
    stroke: var(--surface);
    stroke-width: 6;
    stroke-linejoin: round;
}

.au-punaise-oeil { fill: var(--surface); }

/* transform-box: fill-box rapporte l'origine a la forme : sans lui,
   l'echelle part du coin du viewBox et le halo derive a travers la carte. */
.au-halo {
    fill: var(--accent);
    transform-box: fill-box;
    transform-origin: center;
    animation: au-halo 3.2s ease-out infinite;
}

@keyframes au-halo {
    0%   { transform: scale(0.35); opacity: 0.32; }
    70%  { transform: scale(1);    opacity: 0; }
    100% { transform: scale(1);    opacity: 0; }
}

.au-lieu-v {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.15;
}

.au-lieu-l {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--steel);
}

/* Sous 720px la carte passe sous l'identite, a plat : une colonne de
   15 rem coincee a cote du portrait ne laisse plus lire ni l'un ni l'autre. */
@media (max-width: 720px) {
    .au-carte { grid-template-columns: 1fr; }

    /* La carte tient la colonne de gauche sur les deux lignes de texte :
       en simple rangee, « Bordeaux » et sa legende se retrouvaient cote a
       cote au lieu d'etre l'un sous l'autre. */
    .au-lieu {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-content: center;
        justify-items: start;
        text-align: left;
        column-gap: 1rem;
        border-left: 0;
        border-top: 1px solid var(--hairline);
        padding: 1.25rem clamp(1.25rem, 5vw, 1.75rem);
    }

    .au-carte-fr {
        width: 5rem;
        grid-row: 1 / 3;
        align-self: center;
        margin-bottom: 0;
    }

    .au-lieu-v { align-self: end; }
    .au-lieu-l { align-self: start; margin-top: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .au-halo { animation: none; opacity: 0.14; }
}

/* Sous 520px, le portrait cede de la place au nom : « Consultant paid media
   freelance » tombait sinon sur trois lignes. */
@media (max-width: 520px) {
    .au-portrait { width: 4.5rem; height: 4.5rem; flex: 0 0 4.5rem; border-radius: 1.1rem; }
    .au-faits { gap: 0.75rem; }
}

/* ═══ La marque de regie dans le hero ═══
   Les pastilles d'intitule ont disparu de tout le site. Celle-ci reste,
   parce qu'elle ne repete pas un nom de section : elle dit sur quelle
   regie porte la page, avec son logo, ce que le titre ne montre pas. */
.hero-regie {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.375rem 0.875rem 0.375rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink);
    box-shadow: var(--shadow-diffused);
    margin-bottom: 1.1rem;
}

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

.hero-regie-logo svg { width: 0.95rem; height: 0.95rem; display: block; }

/* Lien sous la frise de clients. Sur un secteur qui ne compte que deux ou
   trois references, montrer ces deux-la et rien d'autre dessert : le lien
   ouvre le reste du portefeuille sans gonfler artificiellement la frise. */
/* Lien vers le portefeuille complet, sous la frise d'un secteur.

   La premiere version etait une pastille grise avec un texte souligne et
   une fleche minuscule : elle ressemblait a une note de bas de page plus
   qu'a une invitation. Elle reprend la facture des boutons du site, et met
   le chiffre en avant — c'est lui qui donne envie de cliquer.

   Un alignement de texte ne suffisait pas a la centrer : la section de
   logos n'a pas de conteneur, et le bloc se calait sur une largeur qui
   n'est pas celle de l'ecran. Un flex centre ne depend que de sa boite. */
.clients-lien {
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
    padding: 0 1.5rem;
}

.clients-lien a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    box-shadow: var(--shadow-diffused);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    /* Les liens de contenu sont soulignes par defaut sur les pages
       generees : ce bouton n en est pas un. */
    text-decoration: none;
    transition: transform 0.4s var(--spring), border-color 0.4s var(--smooth),
        box-shadow 0.4s var(--smooth);
}

.clients-lien a:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 107, 255, 0.3);
    box-shadow: var(--shadow-deep);
}

.clients-lien-nb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.clients-lien-txt { padding-right: 0.15rem; }

.clients-lien-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    flex: 0 0 auto;
    transition: transform 0.4s var(--spring);
}

.clients-lien a:hover .clients-lien-fleche { transform: rotate(45deg); }

.clients-lien-fleche svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 480px) {
    .clients-lien a { font-size: 0.875rem; gap: 0.6rem; }
    .clients-lien-txt { max-width: 11rem; line-height: 1.3; }
}

/* La section des cas sur les pages generees ; l'accueil a la sienne. */
.section-cas {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--canvas);
}

/* ═══ Questionnaire de pertinence ═══
   Une etape a l'ecran, une barre de progression, un score a la fin. Toutes
   les etapes sont dans le HTML : sans JavaScript elles s'affichent a la
   suite et le bloc reste lisible. C'est l'attribut data-actif, pose par le
   script, qui declenche le masquage — rien n'est donc cache a un robot ni
   a un lecteur d'ecran prive de script. */
.section-quiz {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--canvas);
}

.quiz {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-deep);
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(79, 107, 255, 0.08) 0%, transparent 55%),
        var(--surface);
}

.quiz[data-actif] .quiz-ecran { display: none; }
.quiz[data-actif] .quiz-ecran[data-courant] { display: block; }

.quiz-ecran {
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
    animation: quiz-entree 0.45s var(--smooth) both;
}

@keyframes quiz-entree {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Ecran d'accueil ─────────────────────────────────────────── */
.quiz-intro { text-align: center; }

.quiz-marque {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.35rem;
}

.quiz-marque svg { width: 1.7rem; height: 1.7rem; display: block; }

.quiz-intro h2 {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 0.85rem;
}

.quiz-intro h2 em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.quiz-chapo {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--steel);
    max-width: 32rem;
    margin: 0 auto 1.75rem;
}

.quiz-depart { border: 0; cursor: pointer; }

.quiz-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 1.1rem 0 0;
}

/* ─── Une question ────────────────────────────────────────────── */
.quiz-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.quiz-etape {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}

.quiz-etape b { color: var(--accent); font-weight: 600; }

.quiz-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.25rem 0.1rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--steel);
    cursor: pointer;
    transition: color 0.3s var(--smooth);
}

.quiz-retour:hover { color: var(--ink); }
.quiz-retour svg { width: 0.8rem; height: 0.8rem; }

.quiz-q {
    font-size: clamp(1.25rem, 2.8vw, 1.625rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 1.5rem;
}

.quiz-reponses { display: grid; gap: 0.75rem; }

.quiz-rep {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 1.05rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 1rem;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: border-color 0.3s var(--smooth), transform 0.3s var(--spring),
        box-shadow 0.3s var(--smooth);
}

.quiz-rep:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 107, 255, 0.35);
    box-shadow: var(--shadow-diffused);
}

.quiz-rep-ico {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 0.05rem;
}

.quiz-rep-ico svg { width: 0.8rem; height: 0.8rem; }

.quiz-rep[data-quiz-rep="oui"] .quiz-rep-ico {
    background: rgba(34, 160, 106, 0.12);
    color: #1f9c66;
}

.quiz-rep[data-quiz-rep="non"] .quiz-rep-ico {
    background: rgba(24, 24, 27, 0.06);
    color: var(--steel);
}

.quiz-rep-txt { font-size: 0.9375rem; line-height: 1.55; }
.quiz-rep-txt strong { font-weight: 600; }

/* ─── Resultat ────────────────────────────────────────────────── */
.quiz-fin { text-align: center; }

.quiz-jauge {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto 1.35rem;
}

.quiz-jauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.quiz-jauge circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.quiz-jauge-fond { stroke: var(--hairline); }

/* 2 x pi x 52 = 326.7 : la circonference sert d'unite au trace. */
.quiz-jauge-arc {
    stroke: var(--accent);
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 0.9s var(--smooth);
}

.quiz-jauge-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.quiz-jauge-val i {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    font-size: 1.25rem;
    margin-left: 0.1rem;
}

.quiz-verdict {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 0.6rem;
}

.quiz-verdict-txt {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--steel);
    max-width: 30rem;
    margin: 0 auto 1.6rem;
}

.quiz-refaire {
    display: block;
    margin: 1rem auto 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--steel);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.quiz-refaire:hover { color: var(--ink); }

.quiz-recap {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--hairline);
    display: grid;
    gap: 0.5rem;
    text-align: left;
}

.quiz-recap li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    color: var(--steel);
}

.quiz-recap b {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
}

.quiz-recap .oui { background: rgba(34, 160, 106, 0.14); color: #1f9c66; }
.quiz-recap .non { background: rgba(24, 24, 27, 0.07); color: var(--steel); }

/* ─── Barre de progression ────────────────────────────────────── */
/* En tete de carte plutot qu'en pied : c'est la que l'oeil la cherche
   quand il repond a une question, et elle disparait sur l'ecran d'accueil
   ou elle n'aurait rien a mesurer. */
.quiz-progres {
    height: 4px;
    background: var(--hairline);
    transition: opacity 0.35s var(--smooth);
}

/* La barre est le premier enfant : aucun selecteur de voisinage ne peut
   remonter jusqu'a elle depuis l'ecran courant. C'est donc le script qui
   nomme l'etape sur le conteneur. */
.quiz[data-etape="intro"] .quiz-progres,
.quiz:not([data-actif]) .quiz-progres { opacity: 0; }

.quiz-progres-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.45s var(--smooth);
}

.quiz-note {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--steel);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-ecran { animation: none; }
    .quiz-jauge-arc { transition: none; }
}

/* ═══ Diagnostic : une liste, plus un accordeon ═══
   Le bloc depliait chaque symptome sur un encart « Ce que j'en fais ».
   Theo : « ca ne sert a rien, juste les differents points suffisent ».
   La liste se lit donc d'un coup, sans clic et sans chevron. */
.pain-liste {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 48rem;
    display: grid;
    gap: 0.6rem;
}

.pain-point {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.35s var(--smooth), transform 0.35s var(--spring);
}

.pain-point:hover {
    border-color: rgba(79, 107, 255, 0.25);
    transform: translateX(3px);
}

.pain-idx {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding-top: 0.2rem;
    flex: 0 0 auto;
}

.pain-q {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
}

.pain-q strong { font-weight: 600; }

@media (max-width: 480px) {
    .pain-point { padding: 1rem 1.1rem; gap: 0.75rem; }
    .pain-q { font-size: 0.875rem; }
}

/* ═══ Budget en bref ═══
   Le simulateur de budget ramene a un encart : trois champs, trois
   chiffres. Il n'emprunte pas la feuille des outils, qui ne serait chargee
   que pour lui sur seize pages de contenu ; les quelques regles utiles
   sont donc ecrites ici, a la facture du reste des pages. */
.section-bmini { padding: clamp(2rem, 4vw, 3rem) 0; }

.bmini {
    max-width: 58rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--hairline);
    border-radius: 1.5rem;
    background:
        radial-gradient(110% 130% at 100% 0%, rgba(79, 107, 255, 0.07) 0%, transparent 55%),
        var(--surface);
    box-shadow: var(--shadow-diffused);
}

.bmini-tete {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.35rem;
}

.bmini-logo {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.bmini-logo svg { width: 1.3rem; height: 1.3rem; display: block; }

.bmini-titre {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 620;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 0.3rem;
}

.bmini-titre em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.bmini-sous {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--steel);
    margin: 0;
}

.bmini-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.bmini-champ { display: grid; gap: 0.35rem; min-width: 0; }

.bmini-champ > span {
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--steel);
}

/* Le secteur est le plus long des quatre champs : « Services aux
   entreprises » y tient tout juste. Un cran de moins qu'un nombre. */
.bmini-champ select { font-size: 0.875rem; }

.bmini-champ input,
.bmini-champ select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 0.65rem;
    transition: border-color 0.25s var(--smooth), box-shadow 0.25s var(--smooth);
}

.bmini-champ input:focus,
.bmini-champ select:focus {
    outline: none;
    border-color: rgba(79, 107, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.14);
}

.bmini-sorties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.bmini-sortie {
    padding: 0.85rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 0.9rem;
    background: var(--canvas);
    min-width: 0;
}

.bmini-sortie.is-cle {
    background: var(--accent-soft);
    border-color: rgba(79, 107, 255, 0.22);
}

.bmini-v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.bmini-sortie.is-cle .bmini-v { color: var(--accent); }

.bmini-l {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--steel);
    margin-top: 0.25rem;
}

.bmini-etat {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--steel);
    margin: 0.9rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid var(--hairline);
}

.bmini-etat.is-tendu { border-left-color: #C2410C; color: var(--ink); }
.bmini-etat[hidden] { display: none; }

.bmini-pied {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--slate);
    margin: 0.9rem 0 0;
}

.bmini-pied a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}