/* ============================================================
   styles-app.css - compléments de production (hors maquette)
   • passerelle <image-slot> → <img class="imgslot"> / placeholders
   • bouton Calendly (réinitialisé pour matcher .btn)
   ============================================================ */

/* --- ImageSlot : mêmes contraintes que le web component du proto --- */
.imgslot { object-fit: cover; }
/* ============================================================
   Section « Les étapes de notre collaboration » :
   3 colonnes éditoriales séparées par de fins filets verticaux
   (style magazine). SANS chiffre, ni mot, ni picto, ni trait.
   ============================================================ */
/* Réduit l'espace au-dessus du titre (uniquement cette section). */
.section.process {
  padding-top: clamp(4px, 1.5vw, 24px);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 3.4vw, 52px) clamp(34px, 4vw, 64px);
  margin-top: clamp(34px, 4vw, 52px);
  align-items: start;
}
.pstep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(14px, 1.4vw, 20px);
  align-items: start;
}
/* Numérotation DISTINCTE des objectifs (01-04 verts, mono) : chiffre simple,
   gris, sans zéro initial → aucune confusion entre les deux systèmes. */
.pstep-n {
  font-family: var(--sans);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ink) 22%, #fff);
}
.pstep-body {
  max-width: none;
}
.pstep h3 {
  font-family: var(--sans);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
  transition: color 0.3s var(--ease);
}
.pstep:hover h3 {
  color: var(--coral);
}
.pstep p {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}
/* 4e étape - bloc test & learn (illustration concrète de l'amélioration continue). */
.pstep-tl {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
}
.pstep-tl li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pstep-tl b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.pstep-tl span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Ligne de bénéfice (verte) - p.ex. sur l'étape « Je mets en œuvre ». */
.pstep-benefit {
  margin: 12px 0 0;
  color: var(--coral);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.5;
}
/* CYCLE : la flèche de retour 04 → 01 transforme la grille en boucle. */
.cycle-wrap {
  position: relative;
  padding: 4px 0 clamp(54px, 6vw, 78px) clamp(26px, 3vw, 48px);
}
/* Tracé en L arrondi (bord gauche + bas) : part sous l'étape 04 (bas droit),
   longe le bas, remonte à gauche vers l'étape 01. Statique (pas d'animation). */
.cycle-loop {
  position: absolute;
  left: 0;
  right: 15%;
  top: clamp(46px, 6vw, 96px);
  bottom: clamp(24px, 2.8vw, 36px);
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  border-radius: 0 0 0 clamp(20px, 2.4vw, 30px);
  opacity: 0.5;
  pointer-events: none;
}
.cycle-loop::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--coral);
}
.cycle-return {
  position: absolute;
  left: 42%;
  bottom: clamp(8px, 1.4vw, 15px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--coral);
  white-space: nowrap;
}
.cycle-return svg {
  width: 15px;
  height: 15px;
  flex: none;
}
@media (max-width: 760px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .cycle-wrap {
    padding: 4px 0 46px;
  }
  /* En colonne, le L n'a plus de sens : on ne garde que le retour en bas. */
  .cycle-loop {
    display: none;
  }
  .cycle-return {
    left: 50%;
    bottom: 8px;
  }
}
/* ── Méthode : CYCLE RADIAL (4 étapes autour d'un moyeu + anneau fléché) ── */
.cycle {
  position: relative;
  max-width: 1040px;
  margin: clamp(34px, 4vw, 54px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto minmax(clamp(240px, 28vw, 310px), auto) auto;
  grid-template-areas: ".  s1  ." "s4 .   s2" ".  s3  .";
  align-items: center;
  justify-items: center;
  gap: clamp(34px, 4vw, 60px) clamp(16px, 2vw, 30px);
}
.cyc-1 { grid-area: s1; }
.cyc-2 { grid-area: s2; }
.cyc-3 { grid-area: s3; }
.cyc-4 { grid-area: s4; }
.cyc-step { max-width: 300px; text-align: left; }
/* Numérotation en pastilles rondes vertes (distincte des objectifs 01-04, plats). */
.cyc-n {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: 0 0 12px;
  border-radius: 50%; background: var(--coral); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--coral) 60%, transparent);
}
.cyc-step h3 {
  font-family: var(--sans); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0 0 8px;
}
.cyc-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.cyc-benefit {
  margin: 8px 0 0; color: var(--coral); font-weight: 600; font-size: 13.5px; line-height: 1.45;
}
/* Anneau directionnel (SVG carré centré → cercle net quel que soit le format). */
.cycle-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(42%, 352px); aspect-ratio: 1; pointer-events: none; overflow: visible;
}
.cyc-ring-c {
  fill: none; stroke: color-mix(in srgb, var(--coral) 42%, var(--line));
  stroke-width: 0.8; stroke-dasharray: 2.4 3.4;
}
.cyc-arrows polygon { fill: var(--coral); }
/* Moyeu central : le cœur du message. */
.cycle-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(30%, 172px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.35);
  display: grid; place-items: center; align-content: center; gap: 8px;
  padding: 16px; text-align: center;
}
.cyc-loop { width: 26px; height: 26px; color: var(--coral); }
.cycle-hub span {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
/* Bloc test & learn (sous le cercle). */
.cycle-tl {
  max-width: 820px; margin: clamp(30px, 3.6vw, 48px) auto 0;
  padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--line);
}
.ctl-eyebrow {
  display: block; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral);
  margin-bottom: clamp(16px, 2vw, 22px);
}
.ctl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 1040px) and (min-width: 861px) {
  .ctl-list { grid-template-columns: repeat(2, 1fr); }
}
.ctl-list li { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.ctl-list b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ctl-list span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 860px) {
  /* Cercle → colonne verticale ; le moyeu devient un rappel du cycle, en bas. */
  .cycle {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 26px; max-width: 460px;
  }
  .cycle-ring { display: none; }
  .cyc-step { max-width: none; }
  .cycle-hub {
    position: static; transform: none; order: 5; width: 100%;
    aspect-ratio: auto; border-radius: 14px;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    gap: 10px; padding: 15px 18px;
  }
  .ctl-list { grid-template-columns: 1fr; gap: 18px; }
}

.tcard-avatar .imgslot { width: 100%; height: 100%; }
.about-photo .imgslot,
.about-ambiance .imgslot { width: 100%; height: 100%; }
.real-media .imgslot { width: 100%; height: 100%; }
.ld-shot .imgslot {
  display: block; width: 100%; height: clamp(190px, 19vw, 280px);
  border-radius: 14px; overflow: hidden;
}

/* --- Placeholder (image définitive à venir) --- */
.img-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; background: var(--bg-warm); color: var(--ink-faint);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.4;
}

/* --- Tous les CTA (.btn, liens comme <button>) : police uniforme Archivo --- */
.btn {
  font-family: var(--sans);
}
/* Les <button> stylés en .btn (Calendly, diagnostic…) reprennent exactement la
   police de .btn - pas celle, variable, héritée de leur contexte. */
button.btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
button.btn:disabled { opacity: .6; cursor: progress; }

/* --- Harmonisation des boutons d'action : 2 types, une flèche pour chacun ---
   Principal = .btn-primary (vert plein) · Secondaire = .btn-ghost (bordure grise,
   fond blanc). Toute icône explicite dans un bouton est masquée et remplacée par
   une flèche unique en fin de bouton (animée au survol). */
.btn-ghost {
  background: var(--bg);
}
.btn .arrow,
.btn svg {
  display: none;
}
.btn::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.45s var(--ease);
}
.btn:hover::after {
  transform: translateX(5px);
}

/* --- Diagnostic : porte A (Calendly) + consentement RGPD (ajouts prod) --- */
.dgx-book-call {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 26px 0 4px; text-align: center;
}
.dgx-book-call .dgx-book { width: 100%; max-width: 360px; }
.dgx-book-or { font-size: 12.5px; color: var(--ink-faint); }

.dgx-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); cursor: pointer;
}
.dgx-consent input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--coral); }
.dgx-consent.has-err { color: var(--coral); }
.dgx-consent.has-err input { outline: 2px solid var(--coral); outline-offset: 1px; }

/* --- Hero : wrapper d'annotation (même repère que .fx) + mode calibrage --- */
.fx-annot { position: absolute; inset: 0; pointer-events: none; }

/* Mode calibrage (?calibrate) : nœuds saisissables + lisibles */
.hero.is-cal .fx-node {
  pointer-events: auto; cursor: grab;
  width: 16px; height: 16px;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px var(--coral);
  transform: translate(-50%, -50%) scale(1) !important;
  animation: none !important;
}
.hero.is-cal .fx-node:active { cursor: grabbing; }
.fx-cal-readout {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  background: rgba(17, 17, 17, .88); color: #fff; pointer-events: none;
  padding: 12px 14px; border-radius: 10px; max-width: 340px;
  font: 600 12px/1.6 var(--sans); letter-spacing: .01em;
}
.fx-cal-readout small { font-weight: 500; opacity: .75; }

/* ============================================================
   Pages services dédiées (/services, /services/<slug>)
   ============================================================ */
.svc { padding-top: 96px; }
.svc-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint); padding-top: 18px;
}
.svc-crumb a { color: var(--ink-soft); }
.svc-crumb a:hover { color: var(--coral); }
.svc-crumb b { color: var(--ink); font-weight: 600; }
.svc-hero { padding-top: 26px; }
.svc-hero .levier-ico {
  display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--coral-tint); color: var(--coral); margin-bottom: 18px;
}
.svc-hero .levier-ico svg { width: 26px; height: 26px; }
/* Hero 2 colonnes : texte + photo (équilibre + visage) */
.svc-hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.svc-hero-col { min-width: 0; }
.svc-hero-media { position: relative; margin: 0; }
.svc-hero-media img {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: top center;
  border-radius: 22px; display: block; box-shadow: 0 34px 70px -38px rgba(14, 14, 14, .45);
}
.svc-hero-media figcaption {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 9px 16px; border-radius: 999px; font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--coral); box-shadow: 0 12px 26px -16px rgba(14, 14, 14, .5);
}
.svc-h1 { text-align: left; max-width: 18ch; }
.svc-h2 { text-align: left; }
.svc-lead {
  max-width: 60ch; margin: 16px 0 26px; font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft); line-height: 1.6;
}
.svc-media { margin: 8px auto 0; }
.svc-media .imgslot {
  width: 100%; height: clamp(220px, 34vw, 440px); border-radius: 18px; object-fit: cover;
}
.svc-body-sec { padding-top: clamp(36px, 4vw, 56px); }
.svc-body { max-width: 70ch; }
.svc-body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }
.svc-body p b { color: var(--ink); }
.svc-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.svc-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); }
.svc-list li svg { width: 20px; height: 20px; flex: none; color: var(--coral); margin-top: 2px; }
.svc-cta {
  text-align: center; max-width: 640px; margin: 0 auto;
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(28px, 4vw, 48px);
}
.svc-cta h2 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; }
.svc-cta p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 22px; line-height: 1.6; }
.svc-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.svc-other {
  display: flex; flex-direction: column; gap: 8px; padding: 24px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.svc-other:hover {
  transform: translateY(-3px); border-color: var(--coral);
  box-shadow: 0 18px 40px -24px var(--coral);
}
.svc-other .levier-ico {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--coral-tint); color: var(--coral);
}
.svc-other .levier-ico svg { width: 22px; height: 22px; }
.svc-other-t { font-weight: 700; font-size: 17px; color: var(--ink); }
.svc-other-d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.svc-other .more { color: var(--coral); font-size: 14px; font-weight: 600; }

/* Leviers : actions du détail + lien vers toutes les expertises */
.ld-foot-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.levier-all { text-align: center; margin-top: 30px; }
.levier-all .more { color: var(--coral); font-weight: 600; font-size: 15px; }

/* ============================================================
   Hub /services enrichi (hero + chiffres + intro + grille + méthode + FAQ)
   ============================================================ */
/* Chiffres clés sous le hero */
.svc-facts {
  list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, auto); gap: 30px 48px; justify-content: start;
}
.svc-fact-n {
  display: block; font-family: var(--serif); font-size: clamp(26px, 3vw, 36px);
  font-weight: 500; color: var(--coral); line-height: 1;
}
.svc-fact-l { display: block; margin-top: 7px; font-size: 13.5px; color: var(--ink-soft); max-width: 22ch; }

/* Section éditoriale (corps de texte SEO + proposition de valeur) - 2 colonnes */
.svc-intro-sec { padding-top: clamp(40px, 5vw, 70px); }
.svc-intro-grid {
  display: grid; grid-template-columns: 1fr 0.72fr; gap: clamp(30px, 5vw, 64px); align-items: start;
}
.svc-intro { max-width: none; min-width: 0; }
.svc-intro-media { margin: 0; position: sticky; top: 104px; }
.svc-intro-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block;
  box-shadow: 0 26px 54px -34px rgba(14, 14, 14, .38);
}
.svc-intro-text { margin-top: 22px; }
.svc-intro-text p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 18px; }
.svc-intro-text p b { color: var(--ink); font-weight: 600; }
.svc-intro-text a { color: var(--coral); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* En-tête de section (titre + sous-titre) */
.svc-head-row { margin-bottom: 36px; }
.svc-sub { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.svc-sub-center { text-align: center; margin: 10px auto 40px; }

/* Grille des 6 expertises - cartes colorées (cohérence avec le one-page) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Grille « Des solutions concrètes » (accueil) : même cartes, marge sous l'en-tête */
.sol-grid { margin-top: clamp(40px, 5vw, 64px); }

/* Tarifs : objectif (sous-titre de l'offre, sous le nom) */
.pcard-objectif {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}
/* Tarifs : positionnement (« Pour les entreprises qui… ») sous le sous-titre */
.pcard-position {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--coral);
}
/* Tarifs : étiquette (badge promo avec emoji) sous le prix */
.pc-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--coral);
  background: var(--coral-tint);
  border-radius: 12px;
}
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 30px 26px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
  --lc: #2c5be0;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease), background .4s;
}
.svc-card:nth-child(6n+1) { --lc: #2c5be0; }
.svc-card:nth-child(6n+2) { --lc: #e8542b; }
.svc-card:nth-child(6n+3) { --lc: #16a06a; }
.svc-card:nth-child(6n+4) { --lc: #7a4fb0; }
.svc-card:nth-child(6n+5) { --lc: #e0902a; }
.svc-card:nth-child(6n+6) { --lc: #d63b7a; }
.svc-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--lc) 55%, var(--line));
  background: color-mix(in srgb, var(--lc) 5%, var(--bg));
  box-shadow: inset 0 0 0 1.4px var(--lc), 0 26px 50px -32px color-mix(in srgb, var(--lc) 60%, transparent);
}
.svc-card-num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--serif); font-size: 14px; color: var(--ink-faint); transition: color .35s;
}
.svc-card:hover .svc-card-num { color: var(--lc); }
.svc-card .levier-ico {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: transform .45s var(--ease), color .4s, border-color .4s, background .4s, box-shadow .4s;
}
.svc-card .levier-ico svg { width: 23px; height: 23px; }
.svc-card:hover .levier-ico {
  transform: translateY(-2px); color: var(--lc); border-color: var(--lc);
  background: color-mix(in srgb, var(--lc) 10%, #fff);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--lc) 60%, transparent);
}
.svc-card-t { font-weight: 700; font-size: 18px; color: var(--ink); margin-top: 4px; transition: color .35s; }
.svc-card:hover .svc-card-t { color: var(--lc); }
/* Objectif rattaché (petit, sous le titre) : relie la carte à la section objectifs.
   Une seule couleur discrète (gris moyen), en petites capitales → ne concurrence pas
   le titre et n'introduit pas de codage couleur hors charte. */
.svc-card-obj {
  margin-top: -6px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.svc-card-d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* Prestation « sur mesure » : pleine largeur, tuile verte distincte (projet plus lourd). */
.sol-custom {
  margin-top: 18px; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 38px) clamp(26px, 3.4vw, 44px); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--coral) 32%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--coral) 8%, var(--bg)), var(--bg) 62%);
}
.sol-custom-ico {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: var(--coral); color: #fff;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--coral) 60%, transparent);
}
.sol-custom-ico svg { width: 30px; height: 30px; }
.sol-custom-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 8px;
}
.sol-custom-body h3 {
  font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px;
}
.sol-custom-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 72ch; }
@media (max-width: 640px) {
  .sol-custom { flex-direction: column; align-items: flex-start; }
}
.svc-card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.svc-tag {
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 999px; background: var(--bg-warm); border: 1px solid var(--line);
  transition: color .35s, border-color .35s, background .35s;
}
.svc-card:hover .svc-tag {
  color: var(--lc); border-color: color-mix(in srgb, var(--lc) 35%, var(--line));
  background: color-mix(in srgb, var(--lc) 7%, var(--bg));
}
.svc-card .more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px;
  color: var(--ink); font-size: 13.5px; font-weight: 600; transition: color .35s;
}
.svc-card .more .arrow { transition: transform .45s var(--ease); }
.svc-card:hover .more { color: var(--lc); }
.svc-card:hover .more .arrow { transform: translateX(5px); }

/* Méthode - 3 étapes illustrées */
.svc-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.svc-step {
  position: relative; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-step:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -30px rgba(14, 14, 14, .4); }
.svc-step-media { position: relative; aspect-ratio: 1 / 1; background: var(--bg-warm); }
.svc-step-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.svc-step-n {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  font-family: var(--serif); font-size: 22px; font-weight: 500; color: #fff;
  background: var(--coral); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55);
}
.svc-step-body { padding: 22px 24px 26px; }
.svc-step-ico {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--coral-tint); color: var(--coral); margin-bottom: 12px;
}
.svc-step-ico svg { width: 20px; height: 20px; }
.svc-step-t { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.svc-step-d { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* Bandeau marques */
.svc-brands-sec { padding: clamp(30px, 4vw, 48px) 0; border-block: 1px solid var(--line); background: var(--bg-warm); }
.svc-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; justify-content: center; }
.svc-brands-label {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.svc-brands-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
}
.svc-brands-list li { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); color: var(--ink); opacity: .8; }

/* FAQ - 2 colonnes (titre/accroche à gauche, accordéon natif à droite) */
.svc-faq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 64px); align-items: start;
}
.svc-faq-head { position: sticky; top: 104px; }
.svc-faq-head .svc-sub { margin-top: 16px; max-width: 32ch; line-height: 1.6; }
.svc-faq-head .hero-link { display: inline-block; margin-top: 18px; }
.svc-faq { border-top: 1px solid var(--line); }
.svc-faq-item { border-bottom: 1px solid var(--line); }
.svc-faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 17px; font-weight: 600; color: var(--ink); transition: color .3s;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary:hover { color: var(--coral); }
.svc-faq-mark { position: absolute; right: 6px; top: 26px; width: 14px; height: 14px; }
.svc-faq-mark::before, .svc-faq-mark::after {
  content: ""; position: absolute; background: var(--coral); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s;
}
.svc-faq-mark::before { left: 0; top: 6px; width: 14px; height: 2px; }
.svc-faq-mark::after { left: 6px; top: 0; width: 2px; height: 14px; }
.svc-faq-item[open] .svc-faq-mark::after { transform: rotate(90deg); opacity: 0; }
.svc-faq-item p {
  margin: 0; padding: 0 44px 24px 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft);
}

/* Bande CTA finale (pleine largeur, fond chaud) */
.svc-final-sec {
  margin-top: clamp(40px, 6vw, 80px);
  background: var(--bg-warm); border-top: 1px solid var(--line);
  padding: clamp(50px, 7vw, 92px) 0;
}
.svc-final { max-width: 620px; margin: 0 auto; text-align: center; }
.svc-final h2 {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); color: var(--ink); margin-bottom: 12px;
}
.svc-final p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 26px; line-height: 1.6; }
.svc-final .ld-foot-actions { justify-content: center; }

/* Variantes hero centré (Réalisations, Tarifs) */
.svc-hero-center { max-width: 780px; margin: 0 auto; text-align: center; }
.svc-h1c { text-align: center; max-width: none; }
.svc-lead-c { margin-left: auto; margin-right: auto; }
/* opacity:1 → ces boutons ne sont pas pilotés par l'animation du hero d'accueil
   (.is-loaded .hero-actions) ; sans ça ils héritent d'opacity:0 et restent invisibles. */
.svc-actions-c { justify-content: center; opacity: 1; }
.svc-testi-sec { padding-top: clamp(20px, 3vw, 40px); }
.apropos-sec { padding-top: 16px; }

/* Page Contact */
.svc-contact-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 60px); align-items: start;
}
.contact-methods { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.contact-methods li { display: flex; gap: 14px; align-items: flex-start; }
.cm-ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--coral-tint); color: var(--coral);
}
.cm-ico svg { width: 20px; height: 20px; }
.contact-methods b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.cm-link {
  color: var(--coral); font-weight: 600; font-size: 15.5px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.cm-link:hover { text-decoration: underline; }
.contact-card {
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(26px, 3vw, 40px); position: sticky; top: 104px;
}
.contact-card h2 { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 12px; }
.contact-card p { color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.contact-card .btn { width: 100%; justify-content: center; margin-bottom: 10px; }

/* Hero accueil - titre éditorial multi-lignes (phrase plus longue que le titre
   d'origine « X à Y », qui était en nowrap 2 lignes). Entrée en fondu. */
.hero-title-wrap {
  white-space: normal;
  font-size: clamp(30px, 3.7vw, 48px);
  line-height: 1.1;
  opacity: 0;
}
/* Passage accentué du titre dans le vert de la marque.
   !important car styles-soul.css neutralise .accent en ink !important. */
.hero-title-wrap .accent {
  color: var(--coral) !important;
}
/* Touche de vert sur les accents de tous les titres de section (cohérence hero).
   !important pour surpasser la neutralisation de styles-soul.css. */
.section-title .accent {
  color: var(--coral) !important;
}
/* Remonte le bloc texte du hero (sinon centré verticalement → gros vide au-dessus).
   La flèche « Faites défiler » reste collée en bas. Desktop uniquement : le mobile
   garde son empilement d'origine. */
@media (min-width: 901px) {
  .hero {
    justify-content: flex-start;
  }
  .hero-col {
    margin-top: clamp(32px, 5.5vh, 68px);
  }
  .hero-scroll {
    margin-top: auto;
  }
}
.is-loaded .hero-title-wrap {
  animation: heroFadeUp 0.7s var(--ease) 0.16s both;
}
/* Promesse mise en avant dans l'accroche (gras + couleur foncée) */
.hero-lead b {
  color: var(--ink);
  font-weight: 600;
}
/* Section « Ma méthode » : 2ᵉ phrase (le bénéfice client) bien mise en avant -
   sur sa propre ligne, en vert de marque. */
.pstep p b,
.svc-step-d b {
  display: block;
  margin-top: 12px;
  color: var(--coral);
  font-weight: 600;
}

/* Réalisations remonté : on réduit le padding-haut de Réalisations ET le
   padding-bas de « Ma méthode » → l'espace entre les deux n'est plus doublé. */
#methode {
  padding-bottom: clamp(28px, 4vw, 60px);
}
#realisations {
  padding-top: clamp(12px, 2vw, 32px);
  padding-bottom: clamp(28px, 4vw, 60px);
}
#tarifs {
  padding-top: clamp(12px, 2vw, 32px);
  padding-bottom: clamp(28px, 4vw, 60px);
}
/* « Qui suis-je » remonté : on coupe le double-espace sous les Tarifs. */
#apropos {
  padding-top: clamp(12px, 2vw, 32px);
}

/* Réalisations (accueil) - mise en avant éditoriale : projets pleine largeur,
   image et texte alternés. Distinct des grilles de cartes, même charte. */
/* ── Accueil : réalisations reformulées (besoin / décision / résultat) ── */
.reals-head { text-align: left; max-width: none; }
.reals-head .section-title,
.reals-head .section-lead { text-align: left; margin-left: 0; }
.reals-head .section-lead { max-width: 64ch; }
.real-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 14px;
}
/* Bloc Tookta - à plat (pas de carte), chiffres mis en avant. */
.real-tk {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4vw, 60px);
  align-items: center; margin-top: clamp(30px, 3.6vw, 50px);
}
.real-tk-lead { margin: 0 0 clamp(20px, 2.4vw, 28px); font-size: 15px; line-height: 1.62; color: var(--ink); }
.real-tk-stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 46px); margin-bottom: clamp(18px, 2vw, 24px); }
.rk-stat b { display: block; font-family: var(--sans); font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--coral); }
.rk-stat span { display: block; margin-top: 5px; font-size: 13px; color: var(--ink-soft); }
.real-tk-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-soft); font-style: italic; }
.real-tk-media { margin: 0; border-radius: 16px; overflow: hidden; }
.real-tk-media .imgslot { display: block; width: 100%; height: auto; }
/* Bloc Autosecuritas & A3S : à plat, séparé de Tookta par le filet. */
.real-as { margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(30px, 3.6vw, 48px); border-top: 1px solid var(--line); }
/* Statut, sous le badge (hors de la grille). */
.real-as-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 clamp(22px, 2.6vw, 30px); }
.real-as-status h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.real-as-status p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* Grille : un tiers « Le besoin », deux tiers « Ma décision ». */
.real-as-cols { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.real-as-col h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.real-as-col.is-decision h4 { color: var(--coral); }
.real-as-col p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* Ligne 1 : avant / après - deux captures identiques en proportion et cadrage. */
.real-ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); margin-top: clamp(28px, 3.2vw, 44px); }
.real-ba-item { margin: 0; }
.real-ba-frame { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-warm); }
.real-ba-frame .imgslot { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.real-ba-item figcaption { margin-top: 10px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
/* Ligne 2 : le site professionnel A3S (visuel réduit à gauche, explication à droite). */
.real-a3s { display: grid; grid-template-columns: minmax(0, 0.92fr) 1fr; gap: clamp(22px, 3vw, 44px); align-items: center; margin: clamp(18px, 2.2vw, 30px) 0 0; }
.real-a3s-media { max-width: 520px; }
.real-a3s-kicker { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.real-a3s-info p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
@media (max-width: 860px) {
  .real-tk { grid-template-columns: 1fr; }
  .real-tk-media { order: -1; }
  .real-as-cols { grid-template-columns: 1fr; gap: 22px; }
  .real-ba { grid-template-columns: 1fr; }
  .real-a3s { grid-template-columns: 1fr; }
  .real-a3s-media { max-width: none; }
}

.real-feature {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
}
.real-item {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}
.real-item:nth-child(even) .real-item-media {
  order: 2;
}
.real-item-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: 0 30px 62px -42px rgba(14, 14, 14, 0.42);
}
/* Page /realisations : même format 3:2 pour afficher les mockups en entier */
.real-media {
  aspect-ratio: 3 / 2;
}
.real-item-media .imgslot {
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease);
}
.real-item:hover .real-item-media .imgslot {
  transform: scale(1.04);
}
.real-item-body .real-tag {
  margin-top: 0;
}
.real-item-body h3 {
  font-family: var(--sans);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 0;
  color: var(--ink);
}
/* Tags de réalisation - chips verts (accueil éditorial + page /realisations) */
.real-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 20px 0 0;
}
.real-chip {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--coral);
  background: var(--coral-tint);
  border-radius: 999px;
  padding: 6px 13px;
}
.real-cta {
  margin-top: 24px;
}
/* Séparation projets / témoignages dans la section fusionnée */
.real-testi {
  margin-top: clamp(56px, 8vw, 104px);
}
.real-testi .testi-stars {
  margin-top: 0;
}
.real-testi .testi-grid {
  margin-top: clamp(28px, 4vw, 44px);
}
/* Page /realisations : titre de carte homogène */
.real h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.real-item-body p {
  color: var(--ink-soft);
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.65;
  margin-top: 14px;
  max-width: 46ch;
}
.real-item-body .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
}
.real-item-body .more .arrow {
  transition: transform 0.45s var(--ease);
}
.real-item-body .more:hover .arrow {
  transform: translateX(5px);
}
@media (max-width: 760px) {
  .real-item {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .real-item:nth-child(even) .real-item-media {
    order: 0;
  }
}

/* Annotations de la vidéo : libellés plus longs → 2 lignes possibles, tracking
   réduit et largeur bornée pour qu'ils restent dans le cadre. */
.fx-label {
  white-space: normal;
  max-width: 8.5em;
  line-height: 1.16;
  letter-spacing: 0.06em;
}
.fx-up {
  text-align: center;
}

/* Section fusionnée expertises/approche : en-tête + lien « toutes mes expertises » */
.diag-head {
  margin-bottom: clamp(26px, 5vh, 48px);
}
.diag-title {
  text-align: left;
  max-width: 22ch;
  margin-top: 8px;
}
/* CTA par objectif dans la carte de droite */
.ds-cta {
  margin-top: 26px;
}
.diag-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 5vh, 52px);
}
.diag-foot .diag-hint {
  margin-top: 0;
}
.diag-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--coral);
}
.diag-all .arrow {
  transition: transform 0.4s var(--ease);
}
.diag-all:hover .arrow {
  transform: translateX(5px);
}

/* Bandeau marques : remonté sous le hero + plus d'air en dessous (équilibre). */
.trust {
  padding-top: 45px;
  padding-bottom: clamp(46px, 6.5vh, 80px);
}

/* Bandeau marques : défilement continu (marquee) pour suggérer un long palmarès.
   La piste contient 2 copies identiques → translateX(-50%) reboucle sans couture. */
.trust-marquee {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.trust-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
  animation: trustScroll 34s linear infinite;
}
.trust-marquee:hover .trust-track {
  animation-play-state: paused;
}
@keyframes trustScroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track {
    animation: none;
  }
}

/* Pastilles mobiles (cachées sur desktop : l'overlay vidéo suffit) */
.hero-tags {
  display: none;
}
/* Mobile : l'overlay d'annotations déborde sur un petit cadre → on le masque et
   on affiche les mêmes intitulés en pastilles propres sous la vidéo. */
@media (max-width: 920px) {
  .hero .fx,
  .hero .hero-annots {
    display: none;
  }
  .hero-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    order: 4;
    list-style: none;
    margin: 16px auto 0;
    padding: 0;
    max-width: 540px;
  }
  .hero-tags li {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral);
    background: var(--coral-tint);
    border-radius: 999px;
    padding: 7px 14px;
  }
}

@media (max-width: 900px) {
  .svc-hero-grid, .svc-intro-grid, .svc-faq-grid, .svc-contact-grid { grid-template-columns: 1fr; }
  .svc-hero-media { max-width: 440px; }
  .svc-intro-media, .svc-faq-head, .contact-card { position: static; }
  .svc-intro-media { max-width: 460px; }
  .svc-faq-head { position: static; }
}
@media (max-width: 860px) {
  .svc-grid, .svc-steps { grid-template-columns: repeat(2, 1fr); }
  .svc-steps { gap: 16px; }
}
@media (max-width: 560px) {
  .svc-grid, .svc-steps { grid-template-columns: 1fr; }
  .svc-facts { grid-template-columns: 1fr; gap: 20px; }
}

/* Barre de nav identifiable dès le haut de page (sans scroll) ----------------
   D'origine, .nav est transparente tout en haut et ne devient une barre qu'au
   scroll (.nav.scrolled). On lui donne un léger fond + un filet bas dès le
   départ pour qu'on comprenne que c'est une barre de menu ; l'état scrollé
   (défini dans styles.css, spécificité supérieure) reste plus marqué. */
.nav {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--line);
  /* Ombre douce : la barre se « pose » sur la page même sur fond blanc. */
  box-shadow: 0 6px 24px -18px rgba(14, 14, 14, 0.35);
  /* Hauteur réduite. Contenu aligné sur la largeur du site (--maxw) - fond
     pleine largeur conservé - pour laisser de l'espace autour du logo. */
  padding-block: 12px;
  /* Gutter propre à la nav : plus serré que le gutter de contenu (--gut monte à
     64px) pour éviter que la barre déborde sur ~13" (le CTA « Contact » était
     coupé à droite). Sur très grand écran, on reste aligné sur --maxw. */
  padding-inline: max(clamp(16px, 3vw, 40px), calc((100% - var(--maxw)) / 2));
}
.nav.scrolled {
  padding-block: 9px;
}
/* Logo texte : présent mais discret, avec un peu d'air de part et d'autre */
.nav-brand {
  font-weight: 500;
  font-size: clamp(17px, 1.45vw, 20px);
  letter-spacing: 0.24em;
  padding-inline: clamp(10px, 2vw, 32px);
}
/* « Contact » est désormais un lien stylé en pilule → pas de soulignement */
.nav-btn {
  text-decoration: none;
}

/* --- Finitions nav : liens en pastille, paire de CTA soignée --- */
/* Liens du menu : pastille douce au survol / actif (au lieu du soulignement) */
.nav-left {
  gap: 4px;
}
.nav-left a {
  padding: 8px 12px;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Même noir que « Diagnostic express » et le mot-marque (au lieu du gris) :
     toute la nav est harmonisée, seul le bouton « Contact » reste blanc/vert. */
  color: var(--ink);
  transition:
    color 0.25s,
    background 0.25s;
}
.nav-left a::after {
  display: none;
}
.nav-left a:hover {
  color: var(--ink) !important;
  background: var(--bg-warm);
}
.nav-left a.active {
  color: var(--coral) !important;
  font-weight: 600;
  background: color-mix(in srgb, var(--coral) 9%, var(--bg));
}

/* Cluster de droite : « Diagnostic express » (ghost) + « Contact » (plein) */
.nav-right {
  gap: 12px;
}
/* Diagnostic express : pilule noire (texte + icône blancs), léger halo vert au survol. */
.nav-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  white-space: nowrap;
  transition:
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.nav-contact svg {
  width: 15px;
  height: 15px;
  color: #fff;
}
.nav-contact:hover {
  color: #fff !important;
  background: var(--ink);
  border-color: var(--coral);
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--coral) 55%, transparent);
}
/* « Contact » : pilule verte de la marque + flèche + relief */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  background: var(--coral);
  box-shadow: 0 10px 22px -12px var(--coral-glow);
}
.nav-btn .arrow {
  transition: transform 0.3s var(--ease);
}
.nav-btn:hover {
  background: var(--coral-deep);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px var(--coral-glow);
}
.nav-btn:hover .arrow {
  transform: translateX(3px);
}

/* --- Hamburger (mobile) --- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition:
    border-color 0.3s,
    background 0.3s;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.32s var(--ease),
    opacity 0.2s ease;
}
.nav.menu-open .nav-burger {
  border-color: var(--coral);
}
.nav.menu-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.menu-open .nav-burger span:nth-child(2) {
  opacity: 0;
}
.nav.menu-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Panneau de menu mobile (déroulant sous la barre) --- */
.nav-menu {
  display: none;
}
@media (max-width: 1200px) {
  .nav-btn,
  .nav-contact {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 14px var(--gut) 24px;
    background: var(--bg);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 26px 44px -30px rgba(14, 14, 14, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity 0.26s var(--ease),
      transform 0.26s var(--ease),
      visibility 0.26s;
  }
  .nav.menu-open .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav-menu-links {
    display: flex;
    flex-direction: column;
  }
  .nav-menu-links a {
    padding: 14px 4px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    transition: color 0.25s;
  }
  .nav-menu-links a:hover {
    color: var(--coral);
  }
  .nav-menu-cta {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }
}

/* Leviers : contour + picto à la couleur de la carte au survol -----------------
   Chaque carte porte sa couleur dans --lc (définie dans styles-sections.css).
   Le picto et les textes se coloraient déjà ; on ajoute ici le CONTOUR complet
   de la boîte + un halo doux, et on fait ressortir le picto, pour que le survol
   se lise comme une boîte colorée cohérente. */
.levier {
  border-radius: 6px;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.levier:hover {
  background: color-mix(in srgb, var(--lc) 6%, var(--bg));
  /* contour interne plein + halo coloré */
  box-shadow:
    inset 0 0 0 1.6px var(--lc),
    0 24px 50px -30px color-mix(in srgb, var(--lc) 55%, transparent);
  z-index: 1;
}
/* le filet supérieur d'origine ferait doublon avec le contour plein → masqué */
.levier:hover::after {
  transform: scaleX(0);
}
/* picto : en plus de la bordure et de la couleur déjà héritées, un fond teinté
   et une ombre portée légère pour le détacher joliment */
.levier:hover .levier-ico {
  background: color-mix(in srgb, var(--lc) 10%, #fff);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--lc) 60%, transparent);
}

/* - Bloc « chiffres » de la section Qui suis-je -
   Les libellés sont désormais des phrases (et non des nombres courts type ×3) :
   on empile chiffre + sous-titre et on réduit la taille pour que tout respire. */
.about-facts {
  gap: 14px;
  max-width: 252px;
}
.afact {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.afact-n {
  font-size: 17px;
  line-height: 1.18;
  min-width: 0;
}
.afact-l {
  font-size: 12px;
  max-width: 28ch;
}
@media (max-width: 520px) {
  .about-facts {
    max-width: none;
  }
  .afact {
    flex: 1 1 42%;
  }
}

/* - Tarifs : badge en haut de chaque carte (sur les 3 désormais) -
   On dégage un peu d'air sous la pastille flottante, et on style le préfixe
   « À partir de » au-dessus du montant. */
.price-grid .pcard {
  padding-top: 40px;
}
.pc-prefix {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* - Tarifs : les 3 cartes sont identiques (fond blanc, même bordure, même
   ombre, même hauteur). On neutralise complètement le modificateur « pop ». */
.price-grid .pcard.pop {
  background: #fff;
  border-color: var(--line);
  box-shadow: none;
}
.price-grid .pcard.pop:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 70px -46px rgba(0, 0, 0, 0.45);
}
/* Hauteur égale : la liste pousse le CTA en bas de chaque carte. */
.price-grid .pcard-feats {
  flex: 1;
}
.price-grid .pcard .btn {
  margin-top: 26px;
}
/* Espace resserré entre le montant et son unité (€ / €/mois).
   inline-flex : le whitespace entre les deux <span> est ignoré (insensible
   au reformatage Prettier) ; seul le `gap` règle l'écart. */
.pc-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.pc-unit {
  margin-left: 0;
}

/* - Tarifs : bande transversale au-dessus des 3 offres -
   Message commun (création de contenus) valable quelle que soit l'offre.
   Bande pleine largeur, vert clair, posée juste au-dessus de la grille pour
   bien signifier qu'elle « couvre » les 3 cartes. */
.offers-cross {
  margin-top: 30px;
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 4vw, 44px);
  text-align: center;
}
.ocx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--coral) 28%, transparent);
  border-radius: 999px;
}
.ocx-tag svg {
  width: 15px;
  height: 15px;
}
.ocx-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 29px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ocx-title .ocx-hl {
  color: var(--coral);
}
.ocx-lead {
  margin: 12px auto 0;
  max-width: 64ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ocx-lead b {
  color: var(--ink);
  font-weight: 600;
}
/* Même espace au-dessus et en dessous de la bande verte (séquence harmonisée
   intro → bande → offres). */
.offers-cross + .price-grid {
  margin-top: 30px;
}

/* - « Qui suis-je » - */
/* 2e ligne du titre en vert (bat le !important de styles-soul.css sur .accent). */
.about-title .accent {
  color: var(--coral) !important;
}
/* Rééquilibrage : la colonne texte (4 paragraphes + citation + bénéfices) est
   bien plus haute que la photo. On aligne les deux colonnes en haut et la photo
   devient « sticky » : elle suit la lecture au lieu de flotter au centre avec un
   grand vide au-dessus et en dessous. */
.about-wrap {
  align-items: start;
}
.about-media {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
}
@media (max-width: 860px) {
  /* En une colonne, on remet la photo dans le flux (pas de pin au scroll). */
  .about-media {
    position: static;
  }
}

/* « Qui suis-je » : étiquette de la photo plus visible (et non rognée, car
   elle est désormais hors du cadre photo en overflow:hidden).
   Les !important sont nécessaires pour battre styles-soul.css (qui ramène
   l'étiquette « hand » à 11px en libellé éditorial). */
.about-photo-tag {
  z-index: 4;
  /* Posée SUR la photo (left positif) au lieu de dépasser à gauche → jamais rognée. */
  top: 14px;
  left: 14px;
  font-size: 15px !important;
  padding: 9px 18px !important;
  white-space: nowrap;
  box-shadow: 0 18px 34px -14px var(--coral);
}

/* ============================================================
   Footer optimisé - dernière porte de conversion.
   Hiérarchie : Diagnostic (carte + CTA principal) > Contact (CTA ghost)
   > Solutions (liens) > sous-footer (nav secondaire · légal discrets).
   ============================================================ */
.footer-grid {
  grid-template-columns: 1.5fr 0.85fr 1.35fr 1.1fr;
  align-items: start;
  gap: clamp(26px, 3vw, 48px);
}

/* Col 3 - Diagnostic : carte vert clair pour la détacher des colonnes de liens. */
.footer-diag {
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 16%, transparent);
  border-radius: 16px;
  padding: 24px 22px;
}
.footer-diag h4,
.footer-contact h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-diag h4 {
  color: var(--coral);
}
.footer-contact h4 {
  color: var(--ink-faint);
}
.footer-diag p,
.footer-contact p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 18px;
}
.footer-contact {
  padding-top: 2px;
}
/* CTA pleine largeur dans les colonnes de conversion. */
.footer-cta {
  width: 100%;
  justify-content: center;
}

/* Sous-footer : 3 zones (nav secondaire · copyright centré · légal), séparées
   par un trait discret. */
.footer-sub {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
/* Ligne principale : copyright centré, obligations légales à droite
   (la colonne vide à gauche équilibre le centrage du copyright). */
.footer-sub-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
}
.footer-sub-spacer {
  justify-self: start;
}
.footer-copy {
  justify-self: center;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}
.footer-legal {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-legal a {
  font-size: 13px;
  color: var(--ink-faint);
  transition: color 0.3s;
}
.footer-legal a:hover {
  color: var(--coral);
}
/* Bande de réassurance - mise en avant, au-dessus du copyright.
   Texte plein, séparateurs verts, trait de séparation sous la bande. */
.footer-reassure {
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-reassure li {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.footer-reassure li:not(:last-child)::after {
  content: "•";
  margin: 0 18px;
  font-weight: 400;
  color: var(--coral);
}

/* Logo texte identique à la barre de navigation (cohérence de marque). */
.footer-logo {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Responsive (redéfini ici pour primer sur styles-sections.css). */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .footer-sub-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer-sub-spacer {
    display: none;
  }
  .footer-legal {
    justify-self: center;
    justify-content: center;
  }
}

/* ============================================================
   Pages Objectifs - éléments enrichis (hero « preuve », section contenus).
   ============================================================ */
/* Pastilles de preuve sous le hero (Google • IA • Réseaux • Fiche…). */
.obj-proof {
  list-style: none;
  margin: 2px 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.obj-proof li {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 16%, transparent);
  padding: 7px 14px;
  border-radius: 999px;
}
/* Section « contenus » : types de contenus en pastilles légères. */
.obj-chips {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.obj-chips li {
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
}
/* Phrase de transition avant « Les autres objectifs ». */
.svc-others-intro {
  margin: 10px 0 26px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   Pages Objectifs - parcours « méthode » premium (rythme varié).
   ============================================================ */
/* Hero */
.obj-hero {
  padding-top: clamp(20px, 3vw, 40px);
}
/* Finitions harmonisées avec la page « Attirer des clients » : chapô en serif
   éditorial, texte animé dominant (amorce réduite / phrase agrandie), et largeur
   qui laisse les phrases s'afficher sur 2 lignes (pas de vide sous le titre). */
.obj-hero .svc-lead-c {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 20px);
  max-width: 48ch;
}
.obj-hero .accompany {
  max-width: 30ch;
}
.obj-hero .accompany-lead {
  font-size: 0.64em;
}
.obj-hero .accompany-rotor {
  font-size: 1.1em;
}
.obj-hero-title {
  max-width: 16ch;
}
.obj-hero-meta {
  margin: 22px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Marqueur d'étape (grand chiffre de chapitre) + en-têtes */
.obj-step {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  color: var(--coral);
  opacity: 0.5;
  margin-bottom: 14px;
}
.obj-h2 {
  text-align: left;
}
.obj-h2c {
  text-align: center;
}
.obj-lead {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.obj-lead-c {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.obj-chead {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 28px);
}
.obj-chead .obj-step {
  margin-bottom: 0;
}
.obj-chead-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

/* 01 - deux colonnes aérées, aside sticky + checklist éditoriale */
.obj-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.obj-split-aside {
  position: sticky;
  top: 104px;
}
.obj-aside-note {
  margin: 18px 0 0;
  max-width: 30ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.obj-checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.obj-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.obj-checklist li:first-child {
  padding-top: 0;
}
.obj-checklist li:last-child {
  border-bottom: 0;
}
.obj-checklist li svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--coral);
}

/* Bande pleine largeur (fond chaud) pour casser le rythme */
.obj-band {
  background: var(--bg-warm);
  border-block: 1px solid var(--line);
}

/* 02 - liste « spine » numérotée (allure de diagnostic) */
.obj-spine {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  position: relative;
  max-width: 760px;
}
.obj-spine::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}
.obj-spine li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  padding: clamp(16px, 2vw, 24px) 0;
}
.obj-spine-num {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--coral);
}
.obj-spine-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  margin: 9px 0 6px;
  letter-spacing: -0.01em;
}
.obj-spine-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* 03 - lignes alternées (zigzag), sans mur de cartes */
.obj-rows {
  display: grid;
  gap: clamp(24px, 3.5vw, 52px);
  margin-top: clamp(34px, 4.5vw, 64px);
}
.obj-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}
.obj-row:nth-child(even) {
  flex-direction: row-reverse;
}
.obj-row-visual {
  flex: 0 0 clamp(200px, 28vw, 320px);
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.obj-row-ix {
  position: absolute;
  top: 8px;
  left: 18px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(60px, 9vw, 104px);
  line-height: 1;
  color: var(--coral);
  opacity: 0.1;
}
.obj-row-ico {
  position: relative;
  width: clamp(76px, 9vw, 96px);
  height: clamp(76px, 9vw, 96px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.obj-row-ico svg {
  width: 40%;
  height: 40%;
}
.obj-row-text {
  flex: 1;
  min-width: 0;
}
.obj-row-text h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.obj-row-text p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Schéma radial des leviers (« tout travaille ensemble ») */
.obj-system-head {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.obj-schema {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: clamp(360px, 46vw, 520px);
  margin: clamp(34px, 5vw, 64px) auto 0;
}
.obj-schema-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.obj-schema-lines line {
  stroke: var(--coral);
  stroke-width: 1;
  opacity: 0.28;
  vector-effect: non-scaling-stroke;
}
.obj-schema-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 150px;
  text-align: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--coral);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 22px 46px -22px var(--coral);
}
.obj-schema-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: 0 10px 26px -18px rgba(14, 14, 14, 0.5);
}
.obj-schema-flow {
  display: none;
}

/* CTA intermédiaire (au pic de conviction, après « ce que ça change ») */
.obj-cta-mid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  padding: clamp(30px, 4vw, 50px) clamp(28px, 4vw, 58px);
  border-radius: 26px;
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent);
}
.obj-cta-mid-text h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
.obj-cta-mid-text p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 44ch;
}
.obj-cta-mid .btn-primary {
  flex: none;
}
.obj-cta-mid .scan-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--coral) 40%, transparent);
}
.obj-cta-mid .scan-corner.tl {
  top: 16px;
  left: 16px;
  border-right: none;
  border-bottom: none;
}
.obj-cta-mid .scan-corner.tr {
  top: 16px;
  right: 16px;
  border-left: none;
  border-bottom: none;
}
.obj-cta-mid .scan-corner.bl {
  bottom: 16px;
  left: 16px;
  border-right: none;
  border-top: none;
}
.obj-cta-mid .scan-corner.br {
  bottom: 16px;
  right: 16px;
  border-left: none;
  border-top: none;
}

/* Responsive */
@media (max-width: 860px) {
  .obj-split {
    grid-template-columns: 1fr;
  }
  .obj-split-aside {
    position: static;
  }
}
@media (max-width: 720px) {
  .obj-row,
  .obj-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .obj-row-visual {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 7;
  }
  .obj-schema {
    display: none;
  }
  .obj-schema-flow {
    display: grid;
    gap: 0;
    margin: clamp(30px, 6vw, 44px) auto 0;
    max-width: 320px;
    list-style: none;
    padding: 0;
  }
  .obj-schema-flow li {
    position: relative;
    text-align: center;
    padding: 13px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
  }
  .obj-schema-flow li:not(:last-child) {
    margin-bottom: 34px;
  }
  .obj-schema-flow li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 2px;
    height: 26px;
    background: var(--coral);
    opacity: 0.4;
  }
  .obj-cta-mid {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* « Ce que cela peut changer » - avant / après, deux panneaux + flèche. */
.obj-ba {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(14px, 2.5vw, 30px);
}
.obj-ba-col {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
}
.obj-ba-before {
  background: var(--bg-warm);
}
.obj-ba-after {
  background: #fff;
  border-color: color-mix(in srgb, var(--coral) 30%, transparent);
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--coral) 60%, transparent);
}
.obj-ba-head {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink-soft);
}
.obj-ba-after .obj-ba-head {
  color: var(--coral);
}
.obj-ba-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.obj-ba-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.5;
}
.obj-ba-before .obj-ba-list li {
  color: var(--ink-soft);
}
.obj-ba-before .obj-ba-list li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 2px;
  margin-top: 11px;
  border-radius: 2px;
  background: var(--ink-soft);
  opacity: 0.45;
}
.obj-ba-after .obj-ba-list li {
  color: var(--ink);
}
.obj-ba-after .obj-ba-list li::before {
  content: '✓';
  flex: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: var(--coral);
}
.obj-ba-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--coral);
}
.obj-ba-arrow svg {
  width: 30px;
  height: 30px;
}
@media (max-width: 720px) {
  .obj-foryou {
    grid-template-columns: 1fr;
  }
  .obj-ba {
    grid-template-columns: 1fr;
  }
  .obj-ba-arrow {
    transform: rotate(90deg);
  }
}

/* En-tête de mise en valeur au-dessus du bloc noir du diagnostic (accueil). */
.dgx-intro {
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.dgx-intro .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* « À la fin du diagnostic » - pied INTÉGRÉ dans la carte noire du diagnostic
   (un seul bloc) : simple filet de séparation, pas de second panneau. */
.dgx-outcome {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dgx-outcome-h {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.dgx-outcome ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 36px;
}
.dgx-outcome li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.dgx-outcome li svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--coral-tint);
  margin-top: 2px;
}
@media (max-width: 560px) {
  .dgx-outcome ul {
    grid-template-columns: 1fr;
  }
}

/* Résultat profilé du diagnostic : paragraphes + actions prioritaires (carte sombre). */
.dgx-paras {
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
}
.dgx-paras p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 10px;
}
.dgx-paras p:first-child {
  margin-top: 0;
}
.dgx-actions {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 26px;
}
.dgx-actions li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.dgx-actions li svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--coral-tint);
  margin-top: 2px;
}
@media (max-width: 560px) {
  .dgx-actions {
    grid-template-columns: 1fr;
  }
}

/* Étape 4 du diagnostic - champ URL + rapport d'analyse du site (carte sombre). */
.dgx-siteform {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}
.dgx-site-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.25s;
}
.dgx-site-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.dgx-site-input:focus {
  border-color: var(--coral-tint);
}
.dgx-site-report {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  padding: 22px clamp(18px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.dgx-site-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.dgx-site-head svg {
  width: 16px;
  height: 16px;
  color: var(--coral-tint);
}
.dgx-site-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.dgx-site-col-h {
  display: block;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.dgx-site-col-h.good {
  color: var(--coral-tint);
}
.dgx-site-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dgx-site-col li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.dgx-site-col li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.dgx-site-col:first-child li svg {
  color: var(--coral-tint);
}
.dgx-site-col:last-child li svg {
  color: #e8b04b;
}
@media (max-width: 560px) {
  .dgx-site-cols {
    grid-template-columns: 1fr;
  }
}

/* Capture d'écran réelle du site analysé (étape 4). */
.dgx-site-shot {
  position: relative;
  display: block;
  margin: 0 0 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.dgx-site-shot img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: top center;
}
.dgx-site-shot-cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ligne de crédibilité discrète sous le titre du résultat. */
.dgx-source-note {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
}
.dgx-source-note svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--coral-tint);
}

/* ============================================================
   Résultat du diagnostic - structure « diagnostic stratégique »
   (sections rythmées, offre reléguée plus bas, prix secondaire).
   ============================================================ */
.dgx-result .dgx-sec {
  position: relative;
  z-index: 2;
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dgx-sec-h {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* Listes à coches (constats, bénéfices). */
.dgx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.dgx-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.dgx-checks li svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--coral-tint);
  margin-top: 2px;
}
/* Actions prioritaires : liste numérotée. */
.dgx-actions-num {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dgx-actions-num li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
}
.dgx-act-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--coral-tint);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Analyse de site - pièce maîtresse. */
.dgx-site-report-main {
  margin-top: clamp(26px, 3vw, 36px);
}
.dgx-site-report .dgx-site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.dgx-site-report .dgx-site-head .dgx-sec-h {
  margin-bottom: 0;
}
.dgx-site-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--coral-tint);
  text-transform: none;
  letter-spacing: normal;
}
.dgx-site-status svg {
  width: 14px;
  height: 14px;
}
.dgx-site-col-h.warn {
  color: #e8b04b;
}

/* Solution recommandée - nom dominant, prix secondaire. */
.dgx-offer-card {
  margin-top: 2px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.dgx-offer-name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.dgx-offer-why {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.dgx-offer-why b {
  color: var(--coral-tint);
  font-weight: 600;
}
.dgx-offer-feats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dgx-offer-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}
.dgx-offer-feats li svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--coral-tint);
  margin-top: 2px;
}
.dgx-offer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dgx-offer-price {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}
.dgx-offer-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--coral-tint);
}
.dgx-offer-go svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 560px) {
  .dgx-checks {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Audit premium - score, sous-scores, code couleur, projection, plan.
   Vert = fort · Orange = à améliorer · Rouge = priorité.
   ============================================================ */
/* Recap personnalisé (reprend les réponses). */
.dgx-recap {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  padding: 11px 0 11px 16px;
  border-left: 2px solid var(--coral-tint);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Score global. */
.dgx-score {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dgx-score-sec .dgx-score-ring {
  width: 108px;
  height: 108px;
  flex: none;
}
.dgx-score-ring .ring-fg {
  transition: stroke-dashoffset 1.1s var(--ease);
}
.dgx-score-ring.good .ring-fg {
  stroke: var(--coral-tint);
}
.dgx-score-ring.warn .ring-fg {
  stroke: #e8b04b;
}
.dgx-score-ring.bad .ring-fg {
  stroke: #e0654d;
}
.dgx-score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  color: #fff;
}
.dgx-score-num small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 1px;
}
.dgx-score-meta {
  flex: 1;
  min-width: 200px;
}
.dgx-score-label {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
}
.dgx-score-label.good {
  color: var(--coral-tint);
}
.dgx-score-label.warn {
  color: #e8b04b;
}
.dgx-score-label.bad {
  color: #e0654d;
}
.dgx-score-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* Sous-scores (4 dimensions). */
.dgx-subscores {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.dgx-subscore {
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.dgx-subscore-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.dgx-subscore-l {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.dgx-subscore-v {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}
.dgx-subscore-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.dgx-subscore-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 1s var(--ease);
}
.dgx-subscore.good .dgx-subscore-v,
.dgx-subscore.good .dgx-cat-h {
  color: var(--coral-tint);
}
.dgx-subscore.good .dgx-subscore-bar i {
  background: var(--coral-tint);
}
.dgx-subscore.warn .dgx-subscore-v {
  color: #e8b04b;
}
.dgx-subscore.warn .dgx-subscore-bar i {
  background: #e8b04b;
}
.dgx-subscore.bad .dgx-subscore-v {
  color: #e0654d;
}
.dgx-subscore.bad .dgx-subscore-bar i {
  background: #e0654d;
}

/* Repères ①②③ sur la capture. */
.dgx-shot-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.dgx-shot-marker.m1 {
  top: 14%;
  left: 12%;
}
.dgx-shot-marker.m2 {
  top: 46%;
  right: 14%;
}
.dgx-shot-marker.m3 {
  bottom: 16%;
  left: 22%;
}

/* Analyse de site / diagnostic - 3 catégories couleur. */
.dgx-site-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}
.dgx-cat-h {
  display: block;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 700;
}
.dgx-site-cat.good .dgx-cat-h {
  color: var(--coral-tint);
}
.dgx-site-cat.warn .dgx-cat-h {
  color: #e8b04b;
}
.dgx-site-cat.bad .dgx-cat-h {
  color: #e0654d;
}
.dgx-site-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dgx-site-cat li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.dgx-site-cat li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.dgx-site-cat.good li svg {
  color: var(--coral-tint);
}
.dgx-site-cat.warn li svg {
  color: #e8b04b;
}
.dgx-site-cat.bad li svg {
  color: #e0654d;
}
.dgx-cat-n {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #e0654d;
  margin-top: 1px;
}

/* Présence réseaux sociaux (détectée depuis le site : présence, pas engagement). */
.dgx-social {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dgx-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dgx-social-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
}
.dgx-social-list li svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.dgx-social-list li.on {
  border-color: color-mix(in srgb, var(--coral-tint) 45%, transparent);
}
.dgx-social-list li.on svg {
  color: var(--coral-tint);
}
.dgx-social-list li.off {
  color: rgba(255, 255, 255, 0.55);
}
.dgx-social-list li.off svg {
  color: #e0654d;
}
.dgx-social-list li em {
  font-style: normal;
  font-weight: 500;
  font-size: 11.5px;
  opacity: 0.6;
}
.dgx-social-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Projection Aujourd'hui vs Demain. */
.dgx-proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dgx-proj-col {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.dgx-proj-col.today {
  background: rgba(255, 255, 255, 0.02);
}
.dgx-proj-col.tomorrow {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  border-color: color-mix(in srgb, var(--coral) 24%, transparent);
}
.dgx-proj-h {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.dgx-proj-col.tomorrow .dgx-proj-h {
  color: var(--coral-tint);
}
.dgx-proj-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dgx-proj-col li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.dgx-proj-col.today li {
  color: rgba(255, 255, 255, 0.6);
}
.dgx-proj-col.today li::before {
  content: '–';
  color: rgba(255, 255, 255, 0.4);
}
.dgx-proj-col.tomorrow li {
  color: rgba(255, 255, 255, 0.9);
}
.dgx-proj-col.tomorrow li svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--coral-tint);
  margin-top: 2px;
}

/* Plan d'action - étapes. */
.dgx-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dgx-plan li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.dgx-plan-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--coral-tint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.dgx-plan-b {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dgx-plan-t {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.dgx-plan-d {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 620px) {
  .dgx-subscores,
  .dgx-site-cats,
  .dgx-proj-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Audit - passe d'impact visuel : score héros, cartes, vert de marque.
   ============================================================ */
.dgx {
  --dgx-good: #57c08a; /* vert de marque lisible sur fond noir (positif/élevé) */
}

/* Score global en héros (centré, grand, identifiable en < 1 s). */
.dgx-score-hero {
  position: relative;
  z-index: 2;
  margin-top: clamp(24px, 3.4vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dgx-score-ring.big {
  width: clamp(154px, 22vw, 188px);
  height: clamp(154px, 22vw, 188px);
}
.dgx-score-ring.big .ring-bg,
.dgx-score-ring.big .ring-fg {
  stroke-width: 7;
}
.dgx-score-hero .dgx-score-num {
  font-size: clamp(46px, 7vw, 58px);
}
.dgx-score-hero .dgx-score-num small {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.45);
}
.dgx-score-eyebrow {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.dgx-score-hero .dgx-score-label {
  margin-top: 8px;
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 700;
}
.dgx-score-desc {
  margin: 11px auto 0;
  max-width: 48ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
/* Vert de marque sur les éléments positifs/élevés (gauge incluse). */
.dgx-score-ring.good .ring-fg {
  stroke: var(--dgx-good);
}
.dgx-score-label.good {
  color: var(--dgx-good);
}

/* Sous-scores : vraies cartes d'analyse (pastille + accent latéral). */
.dgx-subscore {
  border-left-width: 3px;
}
.dgx-subscore.good {
  border-left-color: var(--dgx-good);
}
.dgx-subscore.warn {
  border-left-color: #e8b04b;
}
.dgx-subscore.bad {
  border-left-color: #e0654d;
}
.dgx-subscore-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dgx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.dgx-subscore.good .dgx-dot {
  background: var(--dgx-good);
}
.dgx-subscore.warn .dgx-dot {
  background: #e8b04b;
}
.dgx-subscore.bad .dgx-dot {
  background: #e0654d;
}
.dgx-subscore.good .dgx-subscore-v {
  color: var(--dgx-good);
}
.dgx-subscore.good .dgx-subscore-bar i {
  background: var(--dgx-good);
}
.dgx-subscore-v small {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 1px;
}

/* Coches / en-têtes « Ce qui fonctionne » : vert foncé officiel (décoratif, pas du scoring). */
.dgx-checks li svg,
.dgx-proj-col.tomorrow li svg,
.dgx-site-cat.good li svg,
.dgx-site-cat.good .dgx-cat-h,
.dgx-subscore.good .dgx-cat-h {
  color: var(--coral);
}
.dgx-proj-col.tomorrow .dgx-proj-h {
  color: var(--dgx-good);
}
.dgx-proj-col.tomorrow {
  background: color-mix(in srgb, var(--dgx-good) 11%, transparent);
  border-color: color-mix(in srgb, var(--dgx-good) 24%, transparent);
}

/* Capture agrandie + repères plus contrastés. */
.dgx-site-shot img {
  max-height: 400px;
}
.dgx-shot-marker {
  width: 30px;
  height: 30px;
  font-size: 14px;
  border-width: 2.5px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 8px 20px -4px rgba(0, 0, 0, 0.7);
}

/* Plan d'action : étapes alignées à gauche + vert officiel du site. */
.dgx-plan li {
  text-align: left;
}
.dgx-plan-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
}
/* Numéro en pastille pleine, vert officiel (#16624a) + chiffre blanc (lisible sur noir). */
.dgx-plan-n {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral);
}

/* Plan d'action - mise en page « timeline » : nœuds numérotés reliés par un
   trait, plus d'air, moins de boîtes, hiérarchie claire (peaufinage sombre). */
.dgx-plan {
  gap: 0;
}
.dgx-plan li {
  position: relative;
  padding: 0 0 26px 0;
  border: none;
  background: none;
  gap: 16px;
}
.dgx-plan li:last-child {
  padding-bottom: 0;
}
.dgx-plan li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05));
}
.dgx-plan-n {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
}
.dgx-plan-b {
  gap: 5px;
  padding-top: 5px;
}
.dgx-plan-t {
  font-size: 15.5px;
  line-height: 1.3;
}
.dgx-plan-d {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

/* 3 axes en niveaux (sans chiffre) - montre « où ça pêche » sans tout révéler. */
.dgx-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
  margin: clamp(20px, 3vw, 30px) 0 0;
}
.dgx-axis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dgx-axis-l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.dgx-axis-bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.dgx-axis-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--dgx-good);
}
.dgx-axis-fill.warn {
  background: #e0a458;
}
.dgx-axis-fill.bad {
  background: #e0654d;
}
@media (max-width: 560px) {
  .dgx-axes {
    grid-template-columns: 1fr;
  }
}

/* Colonne « à corriger » VERROUILLÉE : le manque bien placé qui amène l'appel. */
.dgx-site-cat.bad.locked {
  display: flex;
  flex-direction: column;
}
.dgx-locked {
  margin-top: 6px;
  padding: 22px 18px;
  border: 1px dashed rgba(224, 101, 77, 0.5);
  border-radius: 14px;
  background: rgba(224, 101, 77, 0.06);
  text-align: center;
}
.dgx-locked-n {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  background: #e0654d;
}
.dgx-locked-t {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.dgx-locked-sub {
  margin: 6px auto 16px;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.dgx-locked-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 12px;
  background: var(--dgx-good);
  color: #08120d;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.dgx-locked-cta:hover {
  filter: brightness(1.06);
}

/* Plan d'action : 1re étape en clair, la suite verrouillée (se dit au tel). */
.dgx-plan li.dgx-plan-locked {
  border: 1px dashed rgba(224, 101, 77, 0.5);
  border-radius: 14px;
  background: rgba(224, 101, 77, 0.06);
  padding: 16px 18px;
}
.dgx-plan-locked .dgx-plan-n {
  background: #e0654d;
  color: #fff;
}
.dgx-plan-locked .dgx-plan-t {
  color: #fff;
}
.dgx-plan-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  background: var(--dgx-good);
  color: #08120d;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.dgx-plan-cta:hover {
  filter: brightness(1.06);
}

/* Offre : raisonnement avant la carte + étiquette « formule recommandée ». */
.dgx-offer-reason {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.dgx-offer-tag {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}
.dgx-offer-feats li svg {
  color: var(--coral);
}

/* ============================================================
   Diagnostic - passe « audit stratégique » :
   capture remontée, sous-scores plus lisibles, repères reliés
   aux priorités, moins de blocs mais plus utiles.
   ============================================================ */

/* Interprétation : phrase de lecture du site, mise en avant. */
.dgx-interpret-site {
  margin-top: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--coral);
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
}

/* Capture = pièce maîtresse : plus grande + repères rouges (= priorités). */
.dgx-site-report-main .dgx-site-shot img {
  max-height: 460px;
}
.dgx-shot-marker {
  width: 34px;
  height: 34px;
  font-size: 15px;
  background: #e0654d;
  border-width: 3px;
  box-shadow:
    0 0 0 5px rgba(224, 101, 77, 0.22),
    0 8px 22px -4px rgba(0, 0, 0, 0.75);
}
.dgx-shot-legend {
  margin: 12px 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Observations : 2 colonnes claires (forces / priorités numérotées). */
.dgx-site-cats.two {
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
@media (max-width: 640px) {
  .dgx-site-cats.two {
    grid-template-columns: 1fr;
  }
}

/* Sous-scores : chiffres plus gros, pastille plus marquée, plus de contraste. */
.dgx-subscore {
  padding: 15px 17px;
  background: rgba(255, 255, 255, 0.045);
}
.dgx-subscore-l {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.dgx-subscore-v {
  font-size: 26px;
  line-height: 1;
}
.dgx-dot {
  width: 11px;
  height: 11px;
}
.dgx-subscore-bar {
  height: 6px;
}

/* Plan : liaison « conséquence de l'analyse ». */
.dgx-plan-lead {
  margin: -2px 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* Offre : conclusion du diagnostic, plus visible. */
.dgx-offer .dgx-sec-h {
  font-size: 15px;
  color: var(--coral);
}
.dgx-offer-reason {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   Page /diagnostic - hero resserré + chips de réassurance,
   pour remonter le bloc noir au-dessus de la ligne de flottaison.
   ============================================================ */
.diag-page.svc {
  padding-top: 88px;
}
.diag-hero {
  padding-top: 18px;
  padding-bottom: clamp(24px, 3vw, 36px);
}
/* Eyebrow + titre alignés sur le langage éditorial de la home (pas de picto). */
.diag-eyebrow {
  display: inline-block;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.diag-h1 {
  margin-top: 16px;
}
.diag-h1 .accent {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  color: var(--coral);
}
/* Chips « 2 min · IA · gratuit » sous l'accroche. */
.diag-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.diag-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line, rgba(14, 14, 14, 0.12));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font: 600 13.5px/1 var(--sans);
  color: var(--ink);
  white-space: nowrap;
}
.diag-trust li svg {
  width: 16px;
  height: 16px;
  color: var(--coral);
}
/* Le bloc noir remonte : moins de respiration au-dessus. */
.diag-page .dgx-wrap {
  padding-top: clamp(20px, 2.4vw, 32px);
}

/* Interprétation du site : désormais en tête du bloc « Analyse de votre site ». */
.dgx-site-report-main .dgx-interpret-site {
  margin: 6px 0 18px;
}

/* ============================================================
   Résultat du diagnostic - en-tête réorganisé :
   priorité (texte) à gauche, score (jauge) à droite.
   ============================================================ */
.dgx-result-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  text-align: left;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.dgx-result-head-l {
  min-width: 0;
}
.dgx-result-head .dgx-tag {
  display: inline-block;
}
.dgx-result-head .dgx-diag {
  margin: 12px 0 0;
  max-width: 20ch;
  text-align: left;
}
/* Sous-titre aligné à GAUCHE sous le titre (le proto le centrait via margin auto). */
.dgx-result-head-l .dgx-diag-sub {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.dgx-result-head-l .dgx-score-desc {
  margin: 14px 0 0;
  max-width: 44ch;
  text-align: left;
}
.dgx-result-head-l .dgx-source-note {
  margin: 16px 0 0;
}
/* La jauge ne pousse plus depuis le haut : elle s'aligne sur le texte. */
.dgx-result-head .dgx-score-hero {
  margin-top: 0;
}
/* Note centrée dans le rond + collée à « /100 » (pile verticale serrée). */
.dgx-score-hero .dgx-score-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.86;
}
.dgx-score-hero .dgx-score-num small {
  margin-top: 2px;
}
/* % d'analyse : vraiment centré dans le rond (place-items tassait en haut). */
.dgx-scan-pct {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.86;
}
.dgx-scan-pct small {
  margin-top: 2px;
}
@media (max-width: 760px) {
  .dgx-result-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .dgx-result-head .dgx-diag,
  .dgx-result-head-l .dgx-score-desc {
    max-width: none;
    text-align: center;
  }
  .dgx-result-head-l .dgx-source-note {
    justify-content: center;
  }
}

/* Site injoignable : statut « off » + message clair (pas de capture blanche). */
.dgx-site-status.off {
  color: #e8b04b;
}
.dgx-site-inaccessible {
  margin: 4px 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #e8b04b 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #e8b04b 8%, transparent);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.dgx-site-inaccessible strong {
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   Écran d'analyse (étape 4) - jauge premium :
   tracé en dégradé de marque + halo vert + chiffre épuré.
   ============================================================ */
.dgx-scanning .dgx-scan-ring {
  width: clamp(156px, 21vw, 176px);
  height: clamp(156px, 21vw, 176px);
}
.dgx-scanning .dgx-scan-ring .ring-bg {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 4.5;
}
.dgx-scanning .dgx-scan-ring .ring-fg {
  stroke: url(#dgxScanGrad);
  stroke-width: 4.5;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--dgx-good) 50%, transparent));
  transition: stroke-dashoffset 0.4s var(--ease);
}
/* Chiffre épuré : grand, fin, unité « % » discrète et verte. */
.dgx-scanning .dgx-scan-pct {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(42px, 6vw, 50px);
  letter-spacing: -0.02em;
  color: #fff;
}
.dgx-scanning .dgx-scan-pct small {
  font-size: 15px;
  font-weight: 600;
  color: var(--dgx-good);
  opacity: 0.95;
}

/* ============================================================
   /objectifs/attirer-des-clients - page « Méthode Visible »
   Présentation de méthode premium, visuels SVG/CSS maison.
   ============================================================ */
.mv .wrap {
  max-width: 1120px;
}
.mv-band {
  background: var(--bg-warm);
  border-block: 1px solid var(--line);
}
.mv-h2 {
  text-align: left;
}
.mv-h2c {
  text-align: center;
}
.mv-lead {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.mv-lead-c {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* Chapô centrés en serif éditorial (comme la citation) : plus élégant que le
     sans-serif brut sous les grands titres. */
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 19px);
}

/* ── HERO ───────────────────────────────────────────────── */
.mv-hero {
  padding-top: clamp(24px, 4vw, 52px);
  padding-bottom: clamp(32px, 4.5vw, 60px);
}
.mv-hero-in {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.mv-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.mv-hero-sub {
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  max-width: 40ch;
  /* Serif éditorial (Newsreader) : cohérent avec la citation, plus premium. */
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Hiérarchie du hero : l'amorce fixe « Je vous accompagne pour » est réduite pour
   que le texte animé (le message clé) devienne l'élément dominant. Scopé à ce hero. */
.mv-hero .accompany-lead {
  font-size: 0.64em;
}
.mv-hero .accompany-rotor {
  font-size: 1.12em;
}
/* Phrase de transition (pont entre le hero et la carte d'identification) */
.mv-transition {
  max-width: 46ch;
  margin: clamp(28px, 4vw, 44px) auto clamp(24px, 3vw, 34px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.mv-hero-actions {
  justify-content: center;
  margin-top: clamp(26px, 3vw, 38px);
  /* Ces boutons ne sont pas pilotés par l'animation du hero d'accueil
     (.is-loaded .hero-actions) : on annule l'opacity:0 hérité de .hero-actions,
     sinon ils restent invisibles et laissent un grand vide. */
  opacity: 1;
}
/* Teaser des 4 temps (fil + points) */
.mv-teaser {
  list-style: none;
  margin: clamp(46px, 6vw, 76px) auto 0;
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.mv-teaser::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--line);
}
.mv-teaser li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.mv-teaser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--coral);
  position: relative;
  z-index: 1;
}
.mv-teaser-n {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--coral);
  margin-top: 2px;
}
.mv-teaser-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

/* ── CONVICTION ─────────────────────────────────────────── */
.mv-conviction {
  padding-block: clamp(70px, 10vw, 150px);
}
.mv-conviction-in {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.mv-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.mv-quote-author {
  margin: clamp(20px, 3vw, 32px) 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── LA MÉTHODE EN UN COUP D'ŒIL ────────────────────────── */
.mv-overview-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.mv-map {
  list-style: none;
  margin: clamp(40px, 5vw, 68px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  position: relative;
}
.mv-map::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--coral) 0,
    color-mix(in srgb, var(--coral) 35%, transparent) 100%
  );
  opacity: 0.5;
}
.mv-map-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}
.mv-map-n {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  font-family: var(--serif);
  font-size: 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 26px -16px var(--coral);
}
.mv-band .mv-map-n {
  box-shadow: 0 10px 26px -14px var(--coral);
}
.mv-map-name {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink);
}
.mv-map-sub {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 18ch;
}

/* ── MOUVEMENTS (texte ↔ visuel, alternés) ──────────────── */
.mv-move-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.mv-move--rev .mv-move-visual {
  order: -1;
}
.mv-move-kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mv-move-kicker b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--coral);
}
.mv-move .mv-h2 {
  margin-top: 14px;
}
.mv-tags {
  list-style: none;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.mv-tags li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--coral);
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 14%, transparent);
  padding: 8px 14px;
  border-radius: 999px;
}

/* Cadre commun des visuels */
.mv-move-visual figure {
  margin: 0;
}
.mv-search,
.mv-browser,
.mv-growth,
.mv-funnel {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 40px 80px -50px rgba(14, 14, 14, 0.5);
}
.mv-band .mv-search,
.mv-band .mv-browser,
.mv-band .mv-growth,
.mv-band .mv-funnel {
  box-shadow: 0 40px 80px -46px rgba(14, 14, 14, 0.55);
}

/* Visuel 01 - recherche */
.mv-search {
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 16px;
}
.mv-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}
.mv-search-bar svg {
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  flex: none;
}
.mv-search-res {
  display: grid;
  gap: 10px;
  padding: 4px 4px 0;
}
.mv-res-line {
  height: 9px;
  border-radius: 5px;
  background: var(--line);
}
.mv-res-line.w70 {
  width: 70%;
}
.mv-res-line.w90 {
  width: 90%;
}
.mv-res-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #e0902a;
  font-size: 12.5px;
}
.mv-res-stars svg {
  width: 15px;
  height: 15px;
}
.mv-res-stars em {
  margin-left: 6px;
  font-style: normal;
  color: var(--ink-faint);
}
.mv-search-ai {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 16%, transparent);
}
.mv-ai-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: #fff;
}
.mv-ai-ico svg {
  width: 18px;
  height: 18px;
}
.mv-ai-txt {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--coral-deep);
}

/* Visuel 02 - navigateur */
.mv-browser {
  overflow: hidden;
}
.mv-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-warm);
}
.mv-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
}
.mv-dot:nth-child(1) {
  background: #e6b0a2;
}
.mv-dot:nth-child(2) {
  background: #e6d3a2;
}
.mv-dot:nth-child(3) {
  background: #a2ccb6;
}
.mv-url {
  margin-left: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mv-browser-body {
  padding: clamp(22px, 3vw, 34px);
}
.mv-site-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: clamp(20px, 3vw, 28px);
}
.mv-site-h1 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink);
}
.mv-site-p {
  width: 78%;
  height: 9px;
  border-radius: 5px;
  background: var(--line);
}
.mv-site-btn {
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}
.mv-site-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mv-site-card {
  height: clamp(64px, 9vw, 92px);
  border-radius: 14px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}

/* Visuel 03 - courbe de visibilité */
.mv-growth {
  padding: clamp(22px, 3vw, 32px);
}
.mv-growth-svg {
  display: block;
  width: 100%;
  height: clamp(180px, 24vw, 240px);
}
.mv-grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mv-growth-area {
  fill: var(--coral);
  opacity: 0.08;
}
.mv-growth-line {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.mv-growth-dot {
  fill: #fff;
  stroke: var(--coral);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.mv-growth-legend {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mv-growth-legend li {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 999px;
}
.mv-band .mv-growth-legend li {
  background: #fff;
}

/* Visuel 04 - funnel + demande */
.mv-funnel {
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  gap: 11px;
  justify-items: center;
}
.mv-funnel-bar {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background: var(--coral);
}
.mv-funnel-bar i {
  font-style: normal;
}
.mv-funnel-bar.w100 {
  width: 100%;
  opacity: 0.9;
}
.mv-funnel-bar.w68 {
  width: 68%;
  opacity: 0.8;
}
.mv-funnel-bar.w42 {
  width: 42%;
  opacity: 1;
}
.mv-lead-card {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 34px -24px rgba(14, 14, 14, 0.5);
}
.mv-lead-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.mv-lead-ico svg {
  width: 20px;
  height: 20px;
}
.mv-lead-body {
  display: grid;
  gap: 3px;
}
.mv-lead-body b {
  font-size: 14.5px;
  color: var(--ink);
}
.mv-lead-body em {
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ── RÉSULTAT ───────────────────────────────────────────── */
.mv-result-in {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.mv-result-title {
  margin-top: 14px;
}
.mv-notestack {
  position: relative;
  max-width: 420px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  height: 120px;
}
.mv-note {
  position: absolute;
  left: 50%;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.mv-note.n3 {
  top: 0;
  width: 74%;
  height: 46px;
  transform: translateX(-50%) scale(0.9);
  opacity: 0.5;
}
.mv-note.n2 {
  top: 20px;
  width: 86%;
  height: 50px;
  transform: translateX(-50%) scale(0.95);
  opacity: 0.75;
}
.mv-note.n1 {
  top: 44px;
  width: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 24px 46px -28px rgba(14, 14, 14, 0.5);
}

/* ── DIAGNOSTIC · POINT DE DÉPART ───────────────────────── */
.mv-start-sec {
  padding-block: clamp(40px, 6vw, 90px);
}
.mv-start {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(44px, 6vw, 76px) clamp(28px, 5vw, 60px);
  border-radius: 30px;
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 20%, transparent);
  overflow: hidden;
}
.mv-start-step {
  display: block;
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 104px);
  line-height: 0.9;
  color: var(--coral);
  opacity: 0.18;
  margin-bottom: 6px;
}
.mv-start .eyebrow-hand {
  color: var(--coral);
}
.mv-start-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px auto 0;
  max-width: 20ch;
  text-wrap: balance;
}
.mv-start-text {
  margin: 16px auto clamp(26px, 3vw, 32px);
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mv-start .scan-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--coral) 38%, transparent);
}
.mv-start .scan-corner.tl {
  top: 20px;
  left: 20px;
  border-right: none;
  border-bottom: none;
}
.mv-start .scan-corner.tr {
  top: 20px;
  right: 20px;
  border-left: none;
  border-bottom: none;
}
.mv-start .scan-corner.bl {
  bottom: 20px;
  left: 20px;
  border-right: none;
  border-top: none;
}
.mv-start .scan-corner.br {
  bottom: 20px;
  right: 20px;
  border-left: none;
  border-top: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 820px) {
  .mv-move-in {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
  .mv-move--rev .mv-move-visual {
    order: 0;
  }
  .mv-move-visual {
    max-width: 480px;
  }
}
@media (max-width: 640px) {
  .mv-teaser,
  .mv-map {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 16px;
  }
  .mv-teaser::before,
  .mv-map::before {
    display: none;
  }
}

/* ============================================================
   Méthode Visible - finition premium (v2) : signature, identité
   par étape, schéma de marque (MethodFlow), mini-mocks concrets.
   ============================================================ */

/* Hero explicite + signature de marque */
.mv-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--coral-tint);
  border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent);
  color: var(--coral-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.mv-badge-mark {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  background: var(--coral);
  transform: rotate(45deg);
}
.mv-hero-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 20px auto 0;
  max-width: 20ch;
  text-wrap: balance;
}
.mv-hero-flow {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mv-hero-flow i {
  font-style: normal;
  color: var(--coral);
  margin: 0 4px;
}

/* ── MethodFlow - repère de marque réutilisable ─────────── */
.mflow {
  list-style: none;
}
.mflow--row {
  position: relative;
  margin: clamp(38px, 5vw, 62px) auto 0;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 22px);
}
.mflow--row::before {
  content: '';
  position: absolute;
  top: 31px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--coral),
    color-mix(in srgb, var(--coral) 35%, transparent)
  );
  opacity: 0.5;
}
.mflow--row .mflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 6px;
}
.mflow--row .mflow-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 28px -16px var(--coral);
}
.mflow--row .mflow-ico svg {
  width: 26px;
  height: 26px;
}
.mflow--row .mflow-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--ink);
}
.mflow--row .mflow-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mflow--row .mflow-cap {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 18ch;
}
.mflow--row .is-active .mflow-ico {
  background: var(--coral);
  color: #fff;
}

/* Variante compacte (diagnostic, offres, présentations…) */
.mflow--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 4px;
  margin: 0;
  padding: 0;
}
.mflow--compact .mflow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mflow--compact .mflow-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent);
  color: var(--coral);
}
.mflow--compact .mflow-ico svg {
  width: 15px;
  height: 15px;
}
.mflow--compact .mflow-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.mflow--compact .mflow-step:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
  color: var(--coral);
  opacity: 0.55;
  font-size: 16px;
}

/* ── Identité par étape (badge + libellé + progression) ── */
.mv-step-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.mv-step-badge {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.mv-step-badge svg {
  width: 22px;
  height: 22px;
}
.mv-step-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.mv-step-label b {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--coral);
  margin-right: 8px;
}

/* ── Pourquoi cet ordre (incarnation) ───────────────────── */
.mv-order {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 46px);
  border-radius: 24px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
}
.mv-order-body p {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.mv-order-body p b {
  color: var(--ink);
  font-weight: 600;
}
.mv-order-sign {
  margin: 6px 0 0 !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--coral) !important;
}

/* ── Étape 01 · recherche locale ────────────────────────── */
.mv-local {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}
.mv-pin {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.mv-pin svg {
  width: 18px;
  height: 18px;
}
.mv-local-body {
  display: grid;
  gap: 3px;
}
.mv-local-body b {
  font-size: 14.5px;
  color: var(--ink);
}
.mv-local-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.mv-intent {
  display: inline-block;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  padding-left: 14px;
  position: relative;
}
.mv-intent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}

/* ── Étape 02 · site + fiche Google + identité ──────────── */
.mv-stack {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: 14px;
}
.mv-stack .mv-browser {
  grid-column: 1 / -1;
}
.mv-gbp {
  margin: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 15px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -24px rgba(14, 14, 14, 0.5);
}
.mv-gbp > b {
  font-size: 14px;
  color: var(--ink);
}
.mv-gbp-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.mv-gbp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mv-gbp-actions i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
  background: var(--coral-tint);
  padding: 5px 9px;
  border-radius: 999px;
}
.mv-swatches {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.mv-swatches .sw {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.mv-swatches .sw.s1 {
  background: var(--coral);
}
.mv-swatches .sw.s2 {
  background: var(--ink);
}
.mv-swatches .sw.s3 {
  background: #d8b24a;
}
.mv-swatches b {
  margin-left: 4px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

/* ── Étape 03 · tableau de bord ─────────────────────────── */
.mv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mv-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
}
.mv-band .mv-stat {
  background: #fff;
}
.mv-stat svg {
  width: 15px;
  height: 15px;
  color: var(--coral);
}
.mv-stat i {
  font-style: normal;
  color: var(--coral);
  font-weight: 700;
}

/* ── Étape 04 · demandes, rendez-vous, appels ───────────── */
.mv-feed {
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  display: grid;
  gap: 10px;
}
.mv-feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}
.mv-band .mv-feed-row {
  background: #fff;
}
.mv-feed-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.mv-feed-ico svg {
  width: 19px;
  height: 19px;
}
.mv-feed-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mv-feed-body b {
  font-size: 14px;
  color: var(--ink);
}
.mv-feed-body em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-feed-time {
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.mv-feed-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--coral);
  padding: 7px 13px;
  border-radius: 999px;
}
.mv-feed-badge svg {
  width: 14px;
  height: 14px;
}

/* ── Résultat · présence active ─────────────────────────── */
.mv-presence {
  max-width: 380px;
  margin: clamp(38px, 5vw, 56px) auto 0;
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(14, 14, 14, 0.5);
  text-align: left;
}
.mv-presence-head {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.mv-presence-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.mv-presence-row i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-glow);
}
.mv-presence-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ── « Cette solution est faite pour vous si… » (identification) ── */
.mv-foryou-sec {
  padding-block: clamp(8px, 2vw, 20px);
}
.mv-foryou {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 34px 70px -52px rgba(14, 14, 14, 0.4);
}
.mv-foryou-title {
  font-family: var(--sans);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
}
.mv-foryou-list {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 26px;
}
.mv-foryou-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.mv-foryou-list li svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--coral);
  margin-top: 2px;
}
@media (max-width: 620px) {
  .mv-foryou-list {
    grid-template-columns: 1fr;
  }
}

/* ── Temps fort : citation en bande sombre (rupture de rythme) ── */
.mv-pull-sec {
  padding-block: clamp(24px, 4vw, 48px);
}
.mv-pull {
  background: var(--ink);
  border-radius: 28px;
  padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px);
  text-align: center;
}
.mv-pull-q {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

/* ── Avant / Après (section résultat) ── */
.mv-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(14px, 2vw, 24px);
  max-width: 720px;
  margin: clamp(38px, 5vw, 56px) auto 0;
  text-align: left;
}
.mv-ba-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 30px 60px -44px rgba(14, 14, 14, 0.5);
}
.mv-ba-head {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.mv-ba-after .mv-ba-head {
  color: var(--coral);
}
.mv-ba-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mv-ba-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
.mv-ba-before li {
  color: var(--ink-soft);
}
.mv-ba-x {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: var(--line-soft);
  color: var(--ink-faint);
}
.mv-ba-ck {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral-deep);
}
.mv-ba-ck svg {
  width: 12px;
  height: 12px;
}
.mv-ba-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--coral);
}
.mv-ba-arrow svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 640px) {
  .mv-ba {
    grid-template-columns: 1fr;
  }
  .mv-ba-arrow {
    transform: rotate(90deg);
  }
}


/* ── Diagnostic · schéma + points de réassurance ────────── */
.mv-start-flow {
  margin: clamp(22px, 3vw, 30px) auto 4px;
  max-width: 560px;
}
.mv-diag-points {
  list-style: none;
  margin: 20px 0 clamp(26px, 3vw, 32px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.mv-diag-points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--coral-deep);
}
.mv-diag-points svg {
  width: 16px;
  height: 16px;
  color: var(--coral);
}

/* Responsive v2 */
@media (max-width: 820px) {
  .mv-order {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .mflow--row {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 14px;
  }
  .mflow--row::before {
    display: none;
  }
  .mv-stack {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   AccompanyRotator - « Je vous accompagne pour… » (4 pages objectifs)
   Titre de hero unifié + fin de phrase animée (fondu + glissement).
   Hauteur figée sur 2 lignes → aucun décalage (CLS). Sobre & premium.
   ============================================================ */
.accompany {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 18px auto 0;
  max-width: 21ch;
  text-wrap: balance;
  color: var(--ink);
}
.accompany-lead {
  display: block;
}
.accompany-rotor {
  position: relative;
  display: block;
  height: 2.3em; /* réserve 2 lignes : la mise en page ne bouge jamais */
  margin-top: 0.1em;
}
.accompany-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 0 4px;
  color: var(--coral);
  font-style: italic;
  opacity: 0;
  transform: translateY(0.32em);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.accompany-item.is-in {
  opacity: 1;
  transform: translateY(0);
}
.accompany-item.is-out {
  opacity: 0;
  transform: translateY(-0.32em);
}
@media (prefers-reduced-motion: reduce) {
  .accompany-item {
    transition: none;
  }
}

/* ============================================================
   TechWatch - « veille technologique » (accueil) + réutilisé page IA.
   L'IA comme fil rouge discret : sobre, sélectif, jamais démonstratif.
   ============================================================ */
.tw-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(38px, 5vw, 60px);
}
.tw-pillar {
  display: grid;
  gap: 10px;
  align-content: start;
}
.tw-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
  margin-bottom: 4px;
}
.tw-ico svg {
  width: 22px;
  height: 22px;
}
.tw-pillar b {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tw-pillar p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Message fort */
/* Section technologies : hauteur resserrée (demi-écran). */
.section.tw {
  padding-block: clamp(30px, 3.4vw, 50px);
}
.tw-message {
  position: relative;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  max-width: 820px;
  text-align: center;
  padding: clamp(22px, 2.6vw, 34px) clamp(26px, 5vw, 56px);
  border-radius: 22px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}
/* Bande de logos compacte : ligne unique, petits noms gris clair, discrète. */
.tw-logos {
  list-style: none;
  margin: clamp(22px, 2.6vw, 34px) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px 22px;
  max-width: 880px;
}
.tw-logos li {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tw-message-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
}
.tw-message-text {
  margin: 12px auto 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Bénéfices : ligne compacte (pas de pastilles) pour resserrer la hauteur. */
.tw-benefits {
  list-style: none;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.tw-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--coral-deep);
}
.tw-benefits svg {
  width: 14px;
  height: 14px;
  color: var(--coral);
}
.tw-message .scan-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--coral) 34%, transparent);
}
.tw-message .scan-corner.tl {
  top: 18px;
  left: 18px;
  border-right: none;
  border-bottom: none;
}
.tw-message .scan-corner.tr {
  top: 18px;
  right: 18px;
  border-left: none;
  border-bottom: none;
}
.tw-message .scan-corner.bl {
  bottom: 18px;
  left: 18px;
  border-right: none;
  border-top: none;
}
.tw-message .scan-corner.br {
  bottom: 18px;
  right: 18px;
  border-left: none;
  border-top: none;
}

/* Écosystème d'outils - pastilles sobres (wordmarks, pas de logos criards) */
.tw-tools {
  margin-top: clamp(38px, 5vw, 60px);
  text-align: center;
}
.tw-tools-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tw-tools-intro {
  margin: 12px auto 26px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.tw-tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.tw-tool {
  position: relative;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: default;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.tw-tool:hover {
  border-color: var(--coral);
  color: var(--coral);
  transform: translateY(-2px);
}
/* Rôle de l'outil : révélé au survol (info-bulle sobre, sans alourdir) */
.tw-tool-role {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 3;
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.tw-tool-role::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.tw-tool:hover .tw-tool-role,
.tw-tool:focus-within .tw-tool-role {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Tactile OU petit écran : rôle en libellé statique sous le nom (le tooltip
   absolu en nowrap déborderait sinon horizontalement sur mobile). */
@media (hover: none), (max-width: 700px) {
  .tw-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .tw-tool-role {
    position: static;
    transform: none;
    opacity: 1;
    background: none;
    color: var(--ink-faint);
    font-size: 11px;
    padding: 0;
    white-space: normal;
  }
  .tw-tool-role::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .tw-pillars {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ============================================================
   Page IA & Automatisation - situations concrètes (usages).
   ============================================================ */
.ia-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.5vw, 26px);
  margin-top: clamp(38px, 5vw, 60px);
}
.ia-case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  transition:
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.ia-case:hover {
  border-color: color-mix(in srgb, var(--coral) 40%, transparent);
  box-shadow: 0 30px 60px -40px rgba(14, 14, 14, 0.5);
  transform: translateY(-3px);
}
.ia-case-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral);
}
.ia-case-ico svg {
  width: 24px;
  height: 24px;
}
.ia-case-obj {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 0;
}
.ia-case-promise {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ia-case-uses {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  width: 100%;
}
.ia-case-uses li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.ia-case-uses svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--coral);
}
.ia-case-link {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
}
.ia-case-link .arrow {
  transition: transform 0.4s var(--ease);
}
.ia-case:hover .ia-case-link .arrow {
  transform: translateX(5px);
}
/* Séparation douce avant la section « veille » sur la page IA */
.ia-tw {
  border-top: 1px solid var(--line);
  background: var(--bg-warm);
}
@media (max-width: 720px) {
  .ia-cases {
    grid-template-columns: 1fr;
  }
}

/* ── Note IA discrète sur chaque offre (Pricing) ────────── */
.pcard-ai {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--coral);
  background: var(--coral-tint);
  border-radius: 999px;
  padding: 6px 12px;
}
.pcard-ai svg {
  width: 14px;
  height: 14px;
}

/* ── Mention « propulsé par l'IA » sous le diagnostic (accueil) ── */
.dgx-ai {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.dgx-ai li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.dgx-ai svg {
  width: 16px;
  height: 16px;
  color: var(--coral);
}

/* ============================================================
   Home - montée en puissance : micro-preuves, décision (offres),
   preuve de valeur (réalisations). Sobre, sans nouvelle section.
   ============================================================ */
/* Micro-preuves sous certains en-têtes de section */
.proof-row {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
/* Repères déplacés sous la grille des étapes (pied de section, centré) */
.process-proof {
  margin-top: clamp(40px, 5vw, 60px);
  display: flex;
  justify-content: center;
}
.process-proof .proof-row {
  margin-top: 0;
  justify-content: center;
}
.proof-row li {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 6px 13px 6px 25px;
  border-radius: 999px;
}
.proof-row li::before {
  content: '✓';
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Offres - ligne « à qui / quand » (aide à la décision) */
.pcard-when {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}
.pcard-when svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--coral);
}

/* Réalisations - problème → résultat (démonstration de valeur) */
.real-problem {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-faint);
}
.real-result {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.real-result-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral);
  background: var(--coral-tint);
  padding: 5px 11px;
  border-radius: 999px;
}
.real-result-tag svg {
  width: 13px;
  height: 13px;
}
/* Étiquette de contexte (ex. « Mon projet ») en tête de carte */
.real-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: var(--coral-tint);
  padding: 5px 12px;
  border-radius: 999px;
}
/* Chiffre clé de crédibilité (ex. 450 centres) */
.real-item-body .real-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 22px 0 0;
  max-width: none;
}
.real-stat-n {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--coral);
}
.real-stat-l {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
  max-width: 16ch;
}
/* Points forts d'une réalisation (3 faits clés, coche corail) */
.real-highlights {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.real-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.real-highlights li svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--coral);
  margin-top: 2px;
}