/* ============================================================
   WATTLIFT v10 - FEUILLE PRINCIPALE
   Ordre : primitives, navbar, hero, resultats, avis Google,
   methode, panneau CRM, preuve, equipe, FAQ, calendrier,
   footer, chatbot, pages secondaires, responsive.
   ============================================================ */

/* ==========================================================
   1. PRIMITIVES
   ========================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--wide { max-width: var(--wrap-wide); }

.section { padding-block: var(--sec-y); }
.section--alt { background: var(--paper-alt); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--or);
  border-radius: 2px;
}

.sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head h2 { font-size: var(--fs-4xl); margin-top: 14px; }
.sec-head p {
  margin-top: 14px;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

/* Mise en valeur partielle d'un titre : le degrade de marque, pose
   dans le texte. Il ne prend jamais le titre entier, seulement la
   partie qu'on veut faire ressortir. */
.grad {
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Meme usage que .grad, mais en APLAT : une partie de titre mise en
   valeur par l'orange de marque, sans degrade. Ajoutee le 03/09/2026
   pour « ce mois-ci » dans le titre du hero, ou la demande de Jules
   parle d'une couleur et non d'un fonde.
   La teinte est --or-deep, la declinaison de #FB8B39 que le design
   system reserve au texte sur fond clair : 4,53:1 sur blanc, donc AA
   en texte courant comme en grand titre. --or seul (#FB8B39) tombe a
   2,3:1 et n'aurait passe aucun seuil, y compris en grand texte. */
.hl-or { color: var(--or-deep); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 900;
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), background-color var(--t-fast),
              border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn .arw { transition: transform var(--t-fast); }
.btn:hover .arw { transform: translateX(3px); }

.btn--primary { background: var(--or); color: #fff; box-shadow: var(--sh-or); }
.btn--primary:hover { background: var(--or-dark); transform: translateY(-1px); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-alt); }

.btn--lg { padding: 17px 32px; font-size: var(--fs-base); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---- Revelations au scroll : entree en expo.out, sans rebond ---- */
.rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: .07s; }
.rv-2 { transition-delay: .14s; }
.rv-3 { transition-delay: .21s; }
.rv-4 { transition-delay: .28s; }
.rv-5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   2. NAVBAR
   Structure et comportement d'agenceshort.fr :
   barre fixe flottante, transparente en haut de page, qui
   gagne un fond opaque au scroll ; CTA en pilule ; bascule
   burger a 991 px ; panneau mobile en 400 ms, easing "ease".
   ========================================================== */

.nav {
  position: fixed;
  inset: 14px 0 auto;
  z-index: var(--z-nav);
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
  padding: 0 12px 0 18px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1.5px solid transparent;
  transition: background-color .4s ease, border-color .4s ease,
              box-shadow .4s ease, backdrop-filter .4s ease;
}
.nav.is-stuck .nav__inner {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: var(--line);
  box-shadow: var(--sh-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--ink);
  flex-shrink: 0;
}
.brand img { width: 32px; height: 32px; }
.brand span i { font-style: normal; color: var(--or-deep); }
/* Sur fond sombre, l'orange de marque est deja tres lisible. */
.foot .brand span i { color: var(--or-light); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav__link {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); background: var(--paper-3); }

.nav__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, .7);
}
.burger svg { width: 22px; height: 22px; }

/* Panneau mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 10);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 20px var(--pad) 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.menu__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.menu__close svg { width: 22px; height: 22px; }
.menu__links { display: flex; flex-direction: column; margin-top: 22px; }
.menu__link {
  padding: 18px 2px;
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  letter-spacing: -.02em;
}
.menu__foot { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; }
.menu__tel { text-align: center; font-weight: 700; color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 991px) {
  .nav__links { display: none; }
  .nav__inner .btn { display: none; }
  .burger { display: flex; }
  .nav__inner { margin-inline: auto; }
}
@media (min-width: 992px) {
  .menu { display: none; }
}

/* ==========================================================
   3. HERO  (structure Offbound)
   ========================================================== */

/* M20, retour 1 : tout le bloc de titre est resserre pour que la
   video passe au-dessus de la ligne de flottaison. Les valeurs
   ci-dessous sont celles verifiees aux captures en 1440x900 et en
   390x844, sans aucun scroll. */
.hero {
  position: relative;
  padding-top: clamp(6.25rem, 10vw, 7.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__glow {
  position: absolute;
  z-index: -1;
  top: -22%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 42%,
              rgba(251, 139, 57, .20) 0%,
              rgba(251, 139, 57, .07) 34%,
              rgba(251, 139, 57, 0) 66%);
  pointer-events: none;
}
.hero__inner { text-align: center; max-width: 62rem; margin-inline: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1.5px solid var(--or-line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: var(--sh-1);
}
.pill b { color: var(--or-deep); font-weight: 900; }
.pill__dot {
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pill__dot::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--or);
}

.hero h1 {
  margin-top: 16px;
  font-size: clamp(2.125rem, 1.65rem + 2.35vw, 3.5rem);
  line-height: 1.06;
}
/* .hero__sub a ete RETIREE le 03/09/2026 (M30). Le hero n'a plus de
   sous-titre, decision Jules/Yacine du 02/09, et cette regle ne servait
   que cette ligne-la : aucune autre page ne l'appelait (les fiches
   /cas/ ont leur propre .cs-hero__sub, qui reste en place). Elle est
   supprimee plutot que laissee morte dans la feuille. */

/* REEQUILIBRAGE DU HERO SANS SOUS-TITRE, 03/09/2026.
   Le paragraphe supprime posait 12 px au-dessus de lui puis sa propre
   hauteur de ligne entre le titre et les pastilles de secteurs. Sans
   lui, les 18 px de .proof-tags--hero collaient les pastilles au bas
   du titre. L'ecart est rendu ici, et UNIQUEMENT dans le cas ou les
   pastilles suivent directement le titre : tout autre emploi de
   .proof-tags--hero garde sa valeur d'origine. */
.hero h1 + .proof-tags--hero { margin-top: 28px; }
@media (max-width: 767px) {
  .hero h1 + .proof-tags--hero { margin-top: 22px; }
}
.hero__cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Preuve sociale sous les CTA */
.trust {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 18px 10px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.trust__faces { display: flex; }
/* Pastilles d'initiales : degrade de marque, comme toutes les autres
   pastilles du site. Ces initiales sont decoratives, elles portent
   aria-hidden et ne designent aucun nom qui ne soit pas ecrit en
   clair juste a cote. */
.trust__face {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: .625rem;
  font-weight: 900;
  color: #fff;
  background: var(--grad-or-soft);
  border: 2px solid var(--paper);
  margin-left: -9px;
  letter-spacing: .02em;
}
.trust__face:first-child { margin-left: 0; }
.trust__txt { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.trust__txt b { font-weight: 900; }

/* M23, retour Camille 3 (Loom 1:11-1:31) : LE BADGE D'AVIS DEVIENT
   DISCRET. Camille trouve le bandeau trop imposant. On lui retire ce
   qui en faisait un objet : la carte blanche, le liseré, l'ombre et
   la file de cinq pastilles d'initiales (retirees du HTML). Restent
   les etoiles, plus petites, et la ligne de note, en gris de texte
   secondaire. La note et le nombre d'avis ne sont pas touches.
   Les regles ci-dessous ne s'appliquent qu'a `.trust--mini` : si
   Camille veut revenir en arriere, il suffit de retirer le
   modificateur dans le HTML. */
.trust--mini {
  margin-top: 22px;
  gap: 9px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.trust--mini .gstars svg { width: 13px; height: 13px; }
.trust--mini .trust__txt {
  font-weight: 400;
  color: var(--muted);
}
.trust--mini .trust__txt b { font-weight: 900; color: var(--ink-2); }

/* Bandeau de chiffres du hero.
   M21, retour 4 : la carte des trois pays est retiree du HTML, ici comme
   sur la page des resultats clients. Le bandeau passe donc de quatre
   a TROIS colonnes : trois cartes dans une grille de quatre auraient
   laisse un quart de bandeau vide sur le cote. */
.stats {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--paper); padding: clamp(18px, 3vw, 30px) 16px; text-align: center; }
.stat__n {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
}
.stat__n em { font-style: normal; color: var(--or-deep); }
.stat__l {
  margin-top: 9px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
}

/* ==========================================================
   4. CARTES DE RESULTATS CLIENTS
   Defilement horizontal en CSS pur (scroll-snap), sans
   librairie. Facade YouTube : aucune iframe avant clic.
   ========================================================== */

.results__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.results__top .sec-head { margin-bottom: 0; }

/* Vignette video : facade, l'iframe n'existe pas encore */
.facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-3);
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
  overflow: hidden;
}
.facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.facade:hover img { transform: scale(1.03); }
.facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(20, 22, 26, 0) 38%, rgba(20, 22, 26, .38) 100%);
}
.facade__play span {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--or);
  box-shadow: var(--sh-or);
  display: grid;
  place-items: center;
  transition: transform var(--t-base), background-color var(--t-base);
}
/* Triangle de lecture, dessine en CSS : pas d'icone generique. */
.facade__play span::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.facade:hover .facade__play span { transform: scale(1.07); background: var(--or-dark); }
.facade__badge {
  position: absolute;
  left: 12px; top: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .6875rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.facade iframe { width: 100%; height: 100%; border: 0; }

.kpi {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
}
.kpi b {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--or-deep);
  letter-spacing: -.02em;
  line-height: 1;
}
.kpi span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }

.quote {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  flex: 1;
}
/* Chiffre surligne dans la citation */
.quote mark {
  background: linear-gradient(180deg, transparent 56%, rgba(251, 139, 57, .40) 56%);
  color: inherit;
  font-weight: 900;
  padding: 0 1px;
  border-radius: 2px;
}

.person { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: #fff;
  background: var(--grad-or-soft);
  letter-spacing: .02em;
}
.person__n { font-weight: 900; color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; }
.person__r { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* ==========================================================
   5. AVIS GOOGLE
   Version structuree et sobre. #FBBC05 est utilise ICI et
   NULLE PART AILLEURS, uniquement pour les etoiles Google.
   ========================================================== */

.gstars { display: inline-flex; gap: 2px; }
.gstars svg { width: 15px; height: 15px; fill: #FBBC05; }
.gstars--lg svg { width: 20px; height: 20px; }

/* ==========================================================
   6. LA METHODE  (frise verticale numerotee)
   Revelation au scroll, expo.out, aucun rebond ni rotation.
   ========================================================== */

.frise { position: relative; max-width: 62rem; margin-inline: auto; }
.osfact {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.osfact b { color: var(--or-light); font-weight: 900; }
/* Les videos du panneau sont des formats verticaux. On affiche la
   vignette 9:16 en entier sur un fond sombre, plutot que de la
   recadrer et de couper les visages. */
.ostep .facade {
  border-radius: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  background: var(--ink);
}
.cred {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 20px;
}
.cred__n {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--or-deep);
  letter-spacing: -.03em;
  line-height: 1;
}
.cred h3 { margin-top: 12px; font-size: var(--fs-lg); }
.cred p { margin-top: 7px; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }

.marquee {
  margin-top: clamp(2rem, 4vw, 3rem);
  position: relative;
}
/* M25b, recette du 24/08 : L'ECRETAGE ET LE FONDU PASSENT SUR UNE
   FENETRE INTERIEURE.
   Ils vivaient sur `.marquee`, donc le libelle du bandeau, qui en est
   un enfant, prenait le fondu lui aussi. En 1440 px la bande claire
   fait 1 030 px pour un libelle de 377 px, invisible. En 390 px elle
   tombe a 294 px pour un libelle de 352 px : « Ils developpent leur
   activite avec Wattlift » etait ronge a ses deux bouts. Le fondu ne
   concerne que les logos : il descend donc sur `.marquee__win`. */
.marquee__win {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(30px, 5vw, 56px);
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .58;
  /* Certains logos ont un fond blanc plein : le fondu multiplie
     evite le rectangle blanc au milieu du bandeau. */
  mix-blend-mode: multiply;
  transition: filter var(--t-base), opacity var(--t-base);
}
.marquee__track img:hover { filter: none; opacity: 1; }
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ==========================================================
   9. EQUIPE
   ========================================================== */

/* M21, retour 12 : l'equipe compte six personnes depuis le depart
   d'un membre. Trois colonnes donnent deux rangees pleines ; quatre
   colonnes auraient laisse deux cartes seules sur la seconde ligne. */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  transition: border-color var(--t-base), transform var(--t-base);
}
.tcard:hover { border-color: var(--or-line); transform: translateY(-2px); }
.tcard__ph {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--paper-3);
}
.tcard__ini {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: #fff;
  background: var(--grad-or-soft);
  letter-spacing: .02em;
}
.tcard h3 { font-size: var(--fs-base); }
.tcard p { margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
/* M21, retour 12 : les icones LinkedIn etaient gris --muted. Elles
   passent sur la couleur de la charte, #FB8B39 (--or), avec le cercle
   deja teinte au repos. Au survol on va chercher --or-dark : le
   contraste monte sans quitter la charte. */
.tcard__li {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-top: 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--or-line);
  color: var(--or);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.tcard__li:hover { color: #fff; border-color: var(--or-dark); background: var(--or-dark); }
.tcard__li svg { width: 15px; height: 15px; }

/* ==========================================================
   10. FAQ
   ========================================================== */

.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: 10px; }
.faq details {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.faq details[open] { border-color: var(--or-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  font-weight: 900;
  color: var(--ink);
  font-size: var(--fs-base);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq__ico {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  color: var(--or-deep);
}
.faq__ico::before, .faq__ico::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq__ico::before { width: 10px; height: 2px; }
.faq__ico::after  { width: 2px; height: 10px; }
.faq details[open] .faq__ico::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a { padding: 0 22px 21px; color: var(--muted); line-height: var(--lh-loose); font-size: var(--fs-sm); }
.faq__a p + p { margin-top: 11px; }
.faq__a b { color: var(--ink-2); font-weight: 900; }

/* ==========================================================
   11. CALENDRIER
   ========================================================== */

.book {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
/* M20, retour 7 : le panneau sombre etait etire sur toute la hauteur
   du calendrier et laissait un grand vide au milieu. Son contenu est
   desormais centre verticalement. */
.book__side {
  background: var(--ink);
  color: #fff;
  padding: clamp(26px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.book__side h2 { color: #fff; font-size: var(--fs-2xl); }
.book__side > p { color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.book__meta { display: grid; gap: 8px; }
.book__meta li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .86);
  font-weight: 700;
}
.book__meta svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--or-light); fill: none; stroke-width: 1.8; }
.book__proof {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .82);
  line-height: var(--lh-loose);
}
.book__proof b { color: var(--or-light); font-weight: 900; }
/* Hauteurs relevees sur le widget lui-meme : il reclame 1060 px en
   poste fixe et 856 px autour de 420 px de large. On sert donc
   1080 px et 920 px, avec de la marge. */
/* Au repos, le bloc reste compact : c'est la facade qui l'occupe.
   Au clic, l'iframe apporte sa propre hauteur (1080 px) et le bloc
   grandit avec elle. Le decalage se produit donc APRES une action
   explicite du visiteur, jamais pendant le chargement de la page. */
.book__embed {
  min-height: 520px;
  background: var(--paper);
  display: flex;
}
.book__embed iframe {
  width: 100%;
  height: 1080px;
  min-height: 1080px;
  border: 0;
  display: block;
}

/* La facade du calendrier : elle occupe exactement la place que
   prendra l'iframe, donc rien ne bouge au moment du clic. */
.book__fac {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  border: 0;
  background: var(--paper);
  cursor: pointer;
  text-align: center;
}
.book__fac__ico {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  border: 1.5px solid var(--or-line);
  color: var(--or-deep);
}
.book__fac__ico svg { width: 30px; height: 30px; }
.book__fac__t { font-size: var(--fs-2xl); font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.book__fac__s { font-size: var(--fs-base); color: var(--muted); max-width: 34ch; line-height: var(--lh-norm); }
.book__fac .btn { margin-top: 8px; pointer-events: none; }
.book__fac:hover .btn { background: var(--or-dark); }
.book__fac:hover .book__fac__ico { border-color: var(--or); }

@media (max-width: 1024px) {
  .book__embed { min-height: 460px; }
  .book__embed iframe { height: 920px; min-height: 920px; }
}

/* ==========================================================
   12. PIED DE PAGE
   ========================================================== */

.foot { background: var(--ink); color: rgba(255, 255, 255, .68); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.foot .brand { color: #fff; }
.foot__tag { margin-top: 14px; max-width: 34ch; font-size: var(--fs-sm); line-height: var(--lh-loose); }
.foot h2 { color: #fff; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; }
.foot ul { margin-top: 14px; display: grid; gap: 9px; }
.foot li a { font-size: var(--fs-sm); transition: color var(--t-fast); }
.foot li a:hover { color: var(--or-light); }
.foot__soc { display: flex; gap: 9px; margin-top: 18px; }
.foot__soc a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .78);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.foot__soc a:hover { color: var(--or-light); border-color: var(--or-light); }
.foot__soc svg { width: 17px; height: 17px; }
.foot__bar {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .11);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__bar a:hover { color: var(--or-light); }

/* ==========================================================
   13. CHATBOT ET CTA COLLANT MOBILE
   ========================================================== */

.chat { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-float); }
.chat__btn {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--or);
  color: #fff;
  box-shadow: var(--sh-or);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.chat__btn:hover { transform: translateY(-2px); background: var(--or-dark); }
.chat__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.chat__pop {
  position: absolute;
  right: 0; bottom: 68px;
  width: min(340px, calc(100vw - 36px));
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.chat.is-open .chat__pop { opacity: 1; visibility: visible; transform: none; }
.chat__head { padding: 18px 20px; background: var(--ink); color: #fff; position: relative; }
.chat__head h3 { color: #fff; font-size: var(--fs-base); }
.chat__head p { margin-top: 5px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); }
.chat__x { position: absolute; top: 12px; right: 12px; color: rgba(255, 255, 255, .8); font-size: 1.3rem; line-height: 1; width: 28px; height: 28px; }
.chat__form { padding: 18px 20px 20px; display: grid; gap: 10px; }
.chat__form input[type="text"], .chat__form input[type="tel"], .chat__form textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--paper-alt);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast);
}
.chat__form input:focus, .chat__form textarea:focus { border-color: var(--or); outline: none; }
.chat__form textarea { resize: vertical; min-height: 68px; }
.chat__rgpd { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.chat__rgpd input { margin-top: 2px; accent-color: var(--or); }
.chat__note { font-size: var(--fs-xs); color: var(--muted-2); text-align: center; }
.chat__ok { padding: 30px 22px; text-align: center; }
.chat__ok h3 { font-size: var(--fs-lg); }
.chat__ok p { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.chat__ok-i {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--or-soft);
  color: var(--or-deep);
  font-size: 1.4rem;
  font-weight: 900;
}

.mcta {
  display: none;
  position: fixed;
  left: 14px;
  right: 84px;
  bottom: 18px;
  z-index: calc(var(--z-float) - 1);
}
@media (max-width: 767px) { .mcta { display: flex; } }

/* ==========================================================
   14. PAGES SECONDAIRES
   ========================================================== */

.phero {
  padding-top: clamp(7rem, 14vw, 9.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% 0 auto;
  height: 150%;
  background: radial-gradient(ellipse at 50% 12%, rgba(251,139,57,.16), transparent 62%);
}
.phero h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); max-width: 20ch; }
.phero p { margin-top: 18px; max-width: 52ch; font-size: var(--fs-lg); color: var(--muted); line-height: var(--lh-loose); }

.crumb { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--muted-2); font-weight: 700; margin-bottom: 16px; }
.crumb a:hover { color: var(--or-deep); }
.case {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.case:hover { border-color: var(--or-line); transform: translateY(-2px); box-shadow: var(--sh-2); }
.case__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.case__body h2, .case__body h3 { font-size: var(--fs-xl); }
.case__body > p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }
/* Puce positionnee en absolu : le <b> de debut de ligne reste dans
   le meme flux que le texte qui suit. */
.case__list { display: grid; gap: 8px; margin-top: 2px; }
.case__list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-loose);
}
.case__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}
.case__list b { color: var(--ink); font-weight: 900; }
.case__src { margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); color: var(--muted-2); }

.prose { max-width: 44rem; }
.prose h2 { font-size: var(--fs-2xl); margin-top: 2.25rem; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.75rem; }
.prose p { margin-top: .9rem; color: var(--ink-3); line-height: var(--lh-loose); }
.prose ul { margin-top: .9rem; display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 18px; color: var(--ink-3); line-height: var(--lh-loose); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}

.note {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-loose);
}
.note b { color: var(--or-deep); font-weight: 900; }

.cta-band {
  text-align: center;
  background: var(--paper-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
}
.cta-band h2 { font-size: var(--fs-3xl); max-width: 22ch; margin-inline: auto; }
.cta-band p { margin: 14px auto 0; max-width: 44ch; color: var(--muted); line-height: var(--lh-loose); }
.cta-band .btn { margin-top: 24px; }

/* ==========================================================
   15. RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
  .team  { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .book  { grid-template-columns: 1fr; }
  .gpanel { grid-template-columns: 1fr; }
  .gscore { position: static; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 84px; }
  .nav { inset: 10px 0 auto; }
  .nav__inner { height: 60px; padding: 0 10px 0 14px; }
  /* Trois cartes en deux colonnes : la derniere prend la largeur qui
     reste, plutot que de laisser une demi-case vide a cote d'elle. */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:last-child { grid-column: 1 / -1; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr; }

  /* Le CTA collant ne doit jamais masquer le pied de page. */
  .foot { padding-bottom: 6rem; }
}

@media (max-width: 400px) {
  .trust { gap: 10px; padding: 9px 14px 9px 10px; }
}

/* ============================================================
   ============================================================
   V10 - REPRISE SUR RETOURS CLIENT (M18)
   Tout ce qui suit s'ajoute ou surcharge la base v9.
   Rappel des regles : orange de marque #FB8B39 uniquement,
   #FBBC05 uniquement sur les etoiles d'avis Google.
   ============================================================
   ============================================================ */

/* ==========================================================
   V10-A. MARQUE : le vrai logo remplace le placeholder
   ========================================================== */

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.brand span { letter-spacing: -.015em; }
.foot .brand img { width: 32px; height: 32px; }

/* ==========================================================
   V10-B. HERO AVEC VIDEO AU MILIEU
   ----------------------------------------------------------
   Mise en page d'agenceshort.fr : bloc de texte centre
   (badge, titre, sous-titre, bouton, trois benefices), puis
   la video au milieu du hero, cadre 16/9 centre a la largeur
   du conteneur, puis la preuve chiffree.
   La video est une facade : le fichier n'est jamais charge
   avant un clic. Aucune requete video au chargement.
   ========================================================== */

.hero__bul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
}
.hero__bul span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
}
.hero__bul span::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--or);
  box-shadow: inset 0 0 0 4px var(--paper);
}

/* M20, retour 1 : la facade est bridee par la HAUTEUR de la fenetre,
   pas seulement par la largeur du conteneur. --hero-above est la
   place que prennent la navbar, la pilule, le titre, le sous-titre
   et les deux boutons ; ce qui reste est donne a la video, en 16/9.
   Consequence : quelle que soit la fenetre, la video et son bouton
   de lecture tiennent dans le premier ecran, sans scroll. */
/* M23, retour Camille 1 (Loom 0:20-0:43) : LA VIDEO EST AGRANDIE.
   Deux verrous la tenaient petite :
     1. `max-width: 62rem` (992 px), soit la largeur du bloc de titre ;
     2. `--hero-above: 472px`, la place reservee a tout ce qui la
        precede, qui la bridait a 761 px de large en 1440x900.
   Le premier passe a 76rem, le second descend a 356 px (les quatre
   pastilles de secteurs remontees dans le hero sont comptees dedans).
   Resultat mesure en 1440x900 : 761 px -> 967 px de large, soit 67 %
   de la largeur de fenetre au lieu de 53 %.
   Ce que la regle continue de garantir : le BOUTON DE LECTURE reste
   dans le premier ecran sans scroller. C'est le bas de l'affiche qui
   depasse maintenant, pas la commande. */
.hero__video {
  --hero-above: 356px;
  max-width: 76rem;
  margin: 24px auto 0;
}
.hero__video .vfacade {
  max-width: min(100%, calc((100svh - var(--hero-above)) * 16 / 9));
  margin-inline: auto;
}
/* ----------------------------------------------------------
   M21, retour 5 : EMBED CLEAN, PLUS DE BORDURE NOIRE
   ----------------------------------------------------------
   La facade du hero portait trois choses qui dessinaient un
   cadre sombre autour de l'affiche :
     1. un fond d'encre (--ink, #14161A) qui affleurait sur les
        bords pendant le rendu et pendant la lecture ;
     2. un liseré de 1,5 px ;
     3. un voile degrade en ::after, jusqu'a 42 % de noir en bas
        de l'image, qui grisait tout le bas de la video.
   Les trois sont retires ICI SEULEMENT, sur la video du hero.
   Les facades des temoignages clients gardent leur habillage :
   elles vivent dans des cartes blanches ou le liseré separe la
   vignette du fond, ce n'est pas le meme probleme.
   Le bouton de lecture et la pastille portent deja leur propre
   contraste (aplat orange, pastille sombre), la lisibilite ne
   dependait donc pas du voile.
   ---------------------------------------------------------- */
.hero__video .vfacade {
  background: transparent;
  border: 0;
  box-shadow: var(--sh-2);
}
.hero__video .vfacade::after { content: none; }
.vfacade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-3);
  cursor: pointer;
  isolation: isolate;
}
.vfacade img,
.vfacade video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vfacade img { transition: transform 1.1s var(--ease-expo); }
.vfacade:hover img { transform: scale(1.025); }
.vfacade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,22,26,.05) 0%, rgba(20,22,26,.42) 100%);
  transition: opacity var(--t-base);
}
.vfacade.is-live::after,
.vfacade.is-live .vplay,
.vfacade.is-live .vlabel { display: none; }
.vplay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: var(--r-pill);
  background: var(--or);
  box-shadow: 0 10px 30px rgba(20, 22, 26, .3);
  display: grid;
  place-items: center;
  transition: transform var(--t-base), background-color var(--t-base);
  z-index: 2;
}
.vplay::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 21px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.vfacade:hover .vplay { transform: scale(1.06); background: var(--or-dark); }
.vlabel {
  position: absolute;
  left: 16px;
  bottom: 15px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .02em;
}
.vlabel::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--or-light);
}
/* M29, 01/09/2026, demande A2 : la ligne .hero__vnote a ete retiree de
   l'accueil, sa regle part avec elle. Aucune autre page ne l'utilisait. */
@media (prefers-reduced-motion: reduce) {
  .vfacade img, .vplay { transition: none; }
}

/* Le CTA du hero repasse sous la video en mobile, comme la reference. */
.hero__cta--mob { display: none; }
@media (max-width: 767px) {
  .hero__cta { display: none; }
  .hero__cta--mob { display: flex; justify-content: center; margin-top: 20px; }
  .vplay { width: 62px; height: 62px; }
  .vplay::before { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
  /* En mobile les deux boutons sont sous la video : il reste donc
     plus de place au-dessus, la video peut etre plus grande. */
  .hero__video { --hero-above: 336px; margin-top: 20px; }

  /* M23, retour Camille 1, volet mobile.
     En 390 px la video etait deja a 358 px : c'est la largeur du
     conteneur, moins ses marges, qui la bridait, pas la hauteur de
     fenetre. Le seul gain reel est donc de sortir des marges et
     d'aller d'un bord a l'autre de l'ecran. On annule la gouttiere
     du conteneur (--pad) au lieu d'utiliser 100vw : aucune barre de
     defilement ne peut apparaitre. 358 px -> 390 px de large. */
  .hero__video {
    margin-inline: calc(var(--pad) * -1);
    max-width: none;
  }
  .hero__video .vfacade { border-radius: 0; }
}

/* ==========================================================
   V10-C. CAS CLIENTS, AGENCEMENT OFFBOUND
   ----------------------------------------------------------
   Agencement releve sur offbound.fr (rendu au navigateur, le
   site est une application JS : le HTML brut est vide).
   Ce que fait Offbound, et qui est reproduit ici :
     - un mur de cartes blanches en colonnes, de hauteurs
       inegales, pas une grille reguliere ;
     - en tete de carte, l'avatar rond, le nom, puis la
       societe en plus petit et en couleur d'accent ;
     - la citation, dans laquelle LE CHIFFRE est surligne :
       pastille de couleur claire et soulignement d'accent.
       C'est le chiffre qui domine la carte, pas un titre ;
     - la preuve en place, directement dans la carte, sous la
       citation : la vignette video avec son bouton de lecture.
   Ici la video se lance sur place, aucune iframe n'existe
   dans le document avant le clic.
   ========================================================== */

/* --- La carte mise en avant, au-dessus du mur --- */
.cas-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 24px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.cas-hero:hover { border-color: var(--or-line); box-shadow: var(--sh-2); }
.cas-hero__img { position: relative; min-height: 300px; background: var(--paper-3); }
.cas-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Facade video du cas mis en avant : elle occupe toute la moitie
   image de la carte. Reutilise .rc-tag et .rc-play de la grille. */
.cas-hero__fac {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.cas-hero__fac img,
.cas-hero__fac iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.cas-hero__fac img { transition: transform .9s var(--ease-expo); }
.cas-hero:hover .cas-hero__fac img { transform: scale(1.03); }
.cas-hero__fac::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .10), rgba(20, 22, 26, .34));
  pointer-events: none;
}
.cas-hero:hover .cas-hero__fac .rc-play { transform: scale(1.08); background: var(--or-dark); }
/* En grand format, la vignette montre le nom et le role de Lucas
   en haut : le badge passe en bas pour ne pas les recouvrir. */
.cas-hero__fac .rc-tag { top: auto; bottom: 12px; left: 12px; }
.cas-hero__fac.is-live::after,
.cas-hero__fac.is-live .rc-play,
.cas-hero__fac.is-live .rc-tag { display: none; }
.cas-hero__body {
  padding: clamp(24px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.cas-hero__logo { height: 52px; width: auto; object-fit: contain; align-self: flex-start; }
.cas-hero__n {
  font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--or-deep);
}
.cas-hero__n sup { font-size: .4em; vertical-align: .9em; margin-left: .06em; letter-spacing: 0; }
.cas-hero__lab { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-2); line-height: var(--lh-snug); max-width: 30ch; }
.cas-hero__q { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); max-width: 46ch; }
@media (max-width: 860px) {
  .cas-hero { grid-template-columns: 1fr; }
  .cas-hero__img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ----------------------------------------------------------
   M20, retour 2 : LA GRILLE STRICTE
   ----------------------------------------------------------
   L'ancien mur en `columns` produisait des colonnes de hauteurs
   inegales et des vignettes qui ne tombaient jamais au meme
   niveau. Il est remplace par une grille reglee :
     - 3 colonnes egales, gouttiere unique de 24 px (8 x 3) ;
     - `grid-auto-rows: 1fr` : toutes les rangees ont la meme
       hauteur, donc toutes les cartes aussi ;
     - dans la carte, seule la ligne du verbatim est en `1fr` :
       c'est elle qui absorbe les differences de longueur, si
       bien que la vignette et le lien sont alignes au pixel
       d'une carte a l'autre.
   Tous les espacements sont des multiples de 8.
   ---------------------------------------------------------- */

/* M23, retour Camille 4 : la grille passe de TROIS a DEUX colonnes.
   Elle portait six cartes ; les deux sans temoignage video sont
   parties, il en reste quatre. En trois colonnes, la quatrieme se
   retrouvait seule sur sa ligne avec deux cases vides a cote d'elle.
   En deux colonnes elle forme un carre plein, et la vignette video
   de chaque carte y gagne en taille. Aucun texte n'est ajoute pour
   combler : c'est la grille qui s'adapte au nombre de cartes. */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
}
@media (max-width: 700px)  { .rc-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } }

.rc-card {
  display: grid;
  /* chiffre | client | verbatim (elastique) | preuve | lien */
  grid-template-rows: auto auto 1fr auto auto;
  gap: 16px;
  padding: 24px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.rc-card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }

/* 1. LE CHIFFRE, le plus gros element de la carte */
.rc-fig { display: flex; flex-direction: column; gap: 4px; }
.rc-fig__n {
  font-size: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--or-deep);
  font-variant-numeric: tabular-nums;
}
.rc-fig__u {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--ink-2);
  line-height: 1.3;
}

/* 2. LE CLIENT */
.rc-client {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.rc-av {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  background: var(--grad-or-soft);
  letter-spacing: .02em;
}
.rc-client__id { min-width: 0; }
.rc-client__id b { display: block; font-size: var(--fs-sm); font-weight: 900; color: var(--ink); line-height: 1.3; }
.rc-client__id i { display: block; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-top: 2px; }

/* 3. LE DETAIL */
.rc-q {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.6;
}

/* 4. LA PREUVE : vignette video, ou tuile de source au meme format */
.rc-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
}
.rc-media img,
.rc-media iframe,
.rc-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.rc-media img { transition: transform .9s var(--ease-expo); }
.rc-card:hover .rc-media img,
.rc-band:hover .rc-media img { transform: scale(1.04); }
.rc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .10), rgba(20, 22, 26, .34));
  pointer-events: none;
  transition: opacity var(--t-base);
}
/* is-live retire le voile, le bouton et le badge une fois l'iframe
   posee : un pseudo element survit au vidage du bouton. */
.rc-media.is-live::after,
.rc-media.is-live .rc-play,
.rc-media.is-live .rc-tag { display: none; }
.rc-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px; height: 48px;
  z-index: 2;
  border-radius: var(--r-pill);
  background: var(--or);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(20, 22, 26, .3);
  transition: transform var(--t-base), background-color var(--t-base);
}
.rc-play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.rc-card:hover .rc-play,
.rc-band:hover .rc-play { transform: scale(1.08); background: var(--or-dark); }
.rc-tag {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .64);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Tuile de source : meme format que la vignette, pour que la grille
   reste alignee quand le client n'a pas de video. Elle ne repete pas
   le chiffre, elle dit d'ou il vient. */
.rc-src {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.rc-src__k {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.rc-src__t { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); line-height: 1.4; }

/* 5. LE LIEN */
.rc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--or-deep);
}
.rc-link .arw { transition: transform var(--t-fast); }
.rc-card:hover .rc-link .arw { transform: translateX(4px); }

/* Le bandeau du 7e client, sans chiffre publie : pleine largeur,
   plutot qu'un trou dans la derniere rangee de la grille. */
.rc-band {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 24px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.rc-band:hover { border-color: var(--or-line); box-shadow: var(--sh-2); }
.rc-band__body { display: flex; flex-direction: column; gap: 16px; }
.rc-band__body .rc-client { padding-top: 0; border-top: 0; }
.rc-band__q {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 46ch;
}
.rc-band__n { font-size: var(--fs-xs); color: var(--muted-2); }
@media (max-width: 860px) {
  .rc-band { grid-template-columns: 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-media img, .rc-play, .rc-card, .rc-band, .cas-hero__fac img { transition: none; }
}


/* ==========================================================
   V10-D. AVIS VERIFIES
   ----------------------------------------------------------
   Plus de widget brut, plus de colonne de score massive :
   une ligne de resume sobre, puis les huit avis.
   M20, retour 3 : le defilement horizontal qui suivait cette
   ligne de resume a disparu, remplace par la grille ci-dessous.
   #FBBC05 uniquement sur les etoiles.
   ========================================================== */

.avis-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding: 18px 24px;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  width: fit-content;
  margin-inline: auto;
}
.avis-sum__g { display: inline-flex; align-items: center; gap: 10px; }
.avis-sum__g svg { width: 20px; height: 20px; }
.avis-sum__g b { font-weight: 900; color: var(--ink); font-size: var(--fs-sm); }
.avis-sum__n {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.03em;
}
.avis-sum__n small { font-size: .48em; color: var(--muted-2); font-weight: 900; }
.avis-sum__t { font-size: var(--fs-sm); color: var(--muted); }
.avis-sum__t b { color: var(--ink-2); font-weight: 900; }
.avis-sum__sep { width: 1px; height: 26px; background: var(--line); }
@media (max-width: 640px) {
  .avis-sum { border-radius: var(--r-lg); flex-direction: column; gap: 10px; }
  .avis-sum__sep { display: none; }
}

/* ----------------------------------------------------------
   M20, retour 3 : MOSAIQUE VERTICALE, ZERO SCROLL HORIZONTAL
   ----------------------------------------------------------
   `columns` empile les avis en colonnes de hauteur naturelle :
   aucun texte n'est tronque, aucune carte ne deborde, et il n'y
   a plus rien a faire defiler sur le cote. Le texte des avis est
   a 1rem (16 px) minimum, comme demande.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   M21, retour 9 : CARROUSEL
   ----------------------------------------------------------
   La grille stricte de huit cartes laisse la place a un rail qui
   defile. Trois garde-fous, pour ne pas revenir au defaut qui
   avait fait retirer le rail en M20 :
     1. `overflow-y: hidden` et `overscroll-behavior-x: contain` :
        le geste horizontal ne vole jamais le scroll vertical de
        la page, et arriver au bout du rail ne declenche pas le
        geste « page precedente » du navigateur ;
     2. le rail est focalisable (tabindex) et porte un nom : il
        se parcourt aux fleches du clavier, pas seulement a la
        souris ;
     3. les cartes gardent une largeur lisible et s'accrochent
        (scroll-snap), donc aucune carte coupee a l'arret.
   Sans JavaScript, le rail defile quand meme : les deux fleches
   ne sont qu'un raccourci.
   ---------------------------------------------------------- */
.avis-carr { position: relative; }
.avis-rail {
  /* Flexbox et non grille : une piste `minmax(0, ...)` accepte de se
     reduire a zero, les huit cartes se seraient donc tassees dans la
     largeur disponible et le rail n'aurait jamais rien eu a faire
     defiler. Avec `flex: 0 0 <largeur>` sur les cartes, la somme des
     largeurs depasse le conteneur : le debordement est garanti. */
  display: flex;
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  padding: 4px 2px 18px;
  /* la barre de defilement natice reste visible : elle est le seul
     indice fiable qu'il y a encore quelque chose a droite */
  scrollbar-width: thin;
  scrollbar-color: var(--or-line) transparent;
}
.avis-rail::-webkit-scrollbar { height: 8px; }
.avis-rail::-webkit-scrollbar-track { background: var(--line-2); border-radius: var(--r-pill); }
.avis-rail::-webkit-scrollbar-thumb { background: var(--or-line); border-radius: var(--r-pill); }
.avis-rail:hover::-webkit-scrollbar-thumb { background: var(--or); }
.avis-rail:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: var(--r-lg); }
/* Quatre cartes visibles, gouttiere de 24 px deduite : la cinquieme
   commence exactement au bord droit du rail, donc on voit qu'il y a
   une suite sans qu'une carte soit coupee en deux. */
.avis-rail > .avis-c {
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  scroll-snap-align: start;
}

@media (max-width: 1180px) {
  .avis-rail > .avis-c { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
  .avis-rail { gap: 16px; }
  /* 86 % : la carte suivante affleure, c'est ce bord qui dit au doigt
     qu'il y a quelque chose a faire glisser. */
  .avis-rail > .avis-c { flex-basis: 86%; }
}

/* Les fleches debordent legerement du rail, posees sur le fond de
   section. Elles disparaissent au doigt : en mobile le carrousel se
   manipule directement, une fleche de 40 px y serait un piege. */
.avis-nav {
  position: absolute;
  top: calc(50% - 9px);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--or-deep);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast),
              background-color var(--t-fast), opacity var(--t-fast);
}
.avis-nav svg { width: 19px; height: 19px; }
.avis-nav--prev { left: -14px; transform: translateY(-50%); }
.avis-nav--next { right: -14px; transform: translateY(-50%); }
.avis-nav:hover { background: var(--or); border-color: var(--or); color: #fff; }
.avis-nav:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* Bout de course : le bouton reste en place et garde sa taille de
   cible, il ne fait que s'effacer. Aucun saut de mise en page. */
.avis-nav[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.avis-nav[disabled]:hover { background: var(--paper); border-color: var(--line); color: var(--or-deep); }
@media (max-width: 860px) {
  .avis-nav { display: none; }
}

.avis-more {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  justify-content: center;
}

.avis-c {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
/* Micro-animation au survol : la carte se souleve de 2 px, l'ombre
   s'ouvre et les etoiles se reveillent. Rien de plus. */
.avis-c:hover { border-color: var(--or-line); transform: translateY(-2px); box-shadow: var(--sh-2); }
.avis-c__hd { display: flex; align-items: center; gap: 12px; }
.avis-c__av {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  background: var(--grad-or-soft);
  letter-spacing: .02em;
}
.avis-c__id { min-width: 0; }
.avis-c__n { display: block; font-weight: 900; color: var(--ink); font-size: var(--fs-base); line-height: 1.3; }
.avis-c__d { display: block; font-size: var(--fs-xs); color: var(--muted-2); margin-top: 2px; }
.avis-c p {
  font-size: 1rem;
  color: var(--ink-3);
  line-height: 1.65;
}
/* ----------------------------------------------------------
   M31, 03/09/2026, point 2 : LA LIGNE DE RELEVAGE ET LE
   BOUTON « AFFICHER PLUS ».
   ---------------------------------------------------------- */

/* La date de relevage, exigee par la lecon 23 : une note affichee
   sans sa date ne dit pas de quand elle date. Elle passe a la ligne
   sous le bandeau et reste discrete : c'est une mention, pas un
   argument. */
.avis-sum__maj {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted-2);
  font-weight: 400;
}

/* LE RACCOURCISSEMENT DES CARTES.
   Sans lui, la carte la plus longue (719 caracteres) imposait sa
   hauteur a TOUTES les autres : le rail est en align-items:stretch.
   Le texte complet n'est jamais retire du document : il est seulement
   masque, et le bouton le rend. Sans JavaScript, aucune classe n'est
   posee et le verbatim entier s'affiche : on ne peut donc pas se
   retrouver avec un avis coupe et aucun moyen de le lire. */
.avis-c p.is-clamp .avis-c__complet { display: none; }
.avis-c p:not(.is-clamp) .avis-c__court { display: none; }

.avis-c__plus {
  align-self: flex-start;
  margin-top: -6px;
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--or-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.avis-c__plus:hover { color: var(--ink); }
.avis-c__plus:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }

.avis-c__ft {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.avis-c .gstars svg { transition: transform var(--t-base); }
.avis-c:hover .gstars svg { transform: translateY(-1px); }
/* Badge Google discret : le G reste multicolore, le mot est en gris.
   Aucun aplat de couleur Google sur la carte. */
.gbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted-2);
  letter-spacing: .02em;
}
.gbadge svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .avis-c, .avis-c .gstars svg { transition: none; }
}

/* ==========================================================
   V10-E. LA METHODE, FRISE REPRISE DE LA REPLIQUE AGENCESHORT
   ----------------------------------------------------------
   Structure et comportement repris tels quels de
   site-v7-pixel / site-v8 : frise centrale alternee, barre de
   progression qui se remplit au scroll, pastille numerotee,
   etapes en retrait tant qu'elles ne sont pas atteintes.
   Habillage remis aux couleurs v10.
   ========================================================== */

.timeline { position: relative; max-width: 62rem; margin-inline: auto; }
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--line);
  transform: translateX(-50%);
  border-radius: 2px;
}
.tl-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--or-light), var(--or));
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 1;
}
.tl-item {
  position: relative;
  width: 50%;
  padding: 16px 48px;
  z-index: 2;
}
.tl-item.left  { left: 0;   text-align: right; }
.tl-item.right { left: 50%; text-align: left; }
/* M20, retour 4 : la mise en retrait des etapes pas encore atteintes
   passe de 30 % a 78 % d'opacite. L'effet de progression au scroll
   est conserve, mais une etape en attente reste PARFAITEMENT
   lisible : c'etait le principal defaut de lisibilite signale. */
.js .tl-item {
  opacity: .78;
  transition: opacity .5s var(--ease-out);
}
.js .tl-item.is-active { opacity: 1; }
/* M20, retour 4 : numeros nettement plus visibles.
   48 px au lieu de 40, chiffre a 16 px au lieu de 13, encre foncee
   au lieu de gris, et un cercle d'accent des le depart. */
.tl-node {
  position: absolute;
  top: 24px;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--or-line);
  box-shadow: 0 0 0 6px var(--paper-alt);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
  z-index: 3;
}
.tl-item.left  .tl-node { right: -24px; }
.tl-item.right .tl-node { left: -24px; }
.tl-item.is-active .tl-node {
  background: var(--or-deep);
  border-color: var(--or-deep);
  color: #fff;
}
.tl-card {
  display: inline-block;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 26rem;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.tl-item.is-active .tl-card { border-color: var(--or-line); box-shadow: var(--sh-2); }
.tl-card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
/* M20, retour 4 : contraste, taille et interlignage du texte.
   Le corps passe du gris --muted (#6A7078) a l'encre --ink-2
   (#2C3138, plus de 12:1 sur blanc), de --fs-sm a 1rem, et
   l'interlignage a 1,7. */
.tl-card h3 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.tl-card p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
}
.tl-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  color: var(--or-deep);
  font-size: var(--fs-sm);
  font-weight: 900;
  line-height: 1.4;
}
.tl-proof::before {
  content: "";
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--or);
}
@media (max-width: 860px) {
  .timeline::before, .tl-progress { left: 24px; }
  .tl-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding: 8px 0 8px 64px;
  }
  .tl-item .tl-node { left: 0 !important; right: auto !important; top: 16px; }
  .tl-card { max-width: 100%; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tl-item { opacity: 1 !important; }
  .tl-progress { display: none; }
}

/* ==========================================================
   V10-F. WATTLIFT OS
   ----------------------------------------------------------
   Quatre blocs, chacun avec une micro-demo d'interface
   dessinee en CSS. Aucune capture d'ecran, rien d'invente :
   ce sont des schemas stylises, pas des chiffres produits.
   ========================================================== */

.os-lead {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.os-lead p {
  margin-top: 8px;
  font-size: var(--fs-xl);
  color: var(--muted);
  line-height: var(--lh-snug);
}
.os-lead p b { color: var(--ink); font-weight: 900; }

.os-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.os-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.os-card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.mock, .mrow, .mcal div, .mauto div, .mfun em { transition: border-color var(--t-base), background-color var(--t-base); }
.os-card:hover .mock { border-color: var(--or-line); }
.os-card:hover .mrow { border-color: var(--or-line); }
.os-card__t { padding: 24px 24px 0; }
.os-card__k {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-deep);
}
/* M20, retour 5 : l'accroche gagne en presence (le pave de texte a
   disparu), et le benefice tient sur une ligne, en encre pleine. */
.os-card__t h3 { margin-top: 8px; font-size: var(--fs-2xl); letter-spacing: -.02em; }
.os-card__b {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
}

/* --- la maquette d'interface, entierement en CSS --- */
/* La maquette prend la place laissee par le texte : c'est elle qui
   montre, plutot que d'expliquer. */
.mock {
  margin: 24px 24px 24px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--paper-alt);
  overflow: hidden;
  font-size: 12px;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.mock__bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  display: block;
}
.mock__bar span {
  margin-left: 6px;
  font-weight: 900;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .04em;
}
.mock__body { padding: 12px; display: grid; gap: 8px; }

.mrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.mrow__d {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--or);
}
.mrow__d--off { background: var(--line); }
.mrow__l { flex: 1; min-width: 0; }
.mrow__l b { display: block; font-size: 12px; font-weight: 900; color: var(--ink-2); }
.mrow__l i { display: block; font-style: normal; font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.mrow__s {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--or-soft);
  color: var(--or-deep);
  border: 1px solid var(--or-line);
}
.mrow__s--mute { background: var(--paper-3); color: var(--muted-2); border-color: var(--line); }

/* Colonne d'agenda */
.mcal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mcal div {
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  padding: 7px 4px 9px;
  text-align: center;
}
.mcal b { display: block; font-size: 10px; color: var(--muted-2); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.mcal i { display: block; font-style: normal; margin-top: 6px; height: 5px; border-radius: 3px; background: var(--line); }
.mcal .on i { background: var(--or); }
.mcal .on { border-color: var(--or-line); background: var(--or-soft); }

/* Entonnoir de conversion */
.mfun { display: grid; gap: 7px; }
.mfun div { display: flex; align-items: center; gap: 10px; }
.mfun span:first-child {
  width: 74px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mfun em {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--or), var(--or-light));
}
.mfun span:last-child { flex: 1; }

/* Automatisations : petites cartes reliees */
.mauto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center; }
.mauto div {
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  padding: 10px 7px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 900;
  color: var(--ink-3);
  line-height: 1.3;
}
.mauto div.hi { border-color: var(--or-line); background: var(--or-soft); color: var(--or-deep); }
.mauto__ar { text-align: center; color: var(--line); font-weight: 900; }

.os-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
}
.os-note p { font-size: var(--fs-sm); line-height: var(--lh-loose); max-width: 58ch; }
.os-note p b { color: #fff; font-weight: 900; }
.os-note__cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* Le bouton fantome par defaut porte de l'encre foncee : illisible
   sur ce bandeau sombre. On l'inverse ici, et nulle part ailleurs. */
.os-note .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.os-note .btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 860px) {
  .os-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .os-card, .mock, .mrow, .mcal div, .mauto div, .mfun em { transition: none; }
}

/* ==========================================================
   V10-G. PASTILLES DE SECTEURS
   ----------------------------------------------------------
   M25, point 5 : LA RUBRIQUE « ILS NOUS FONT CONFIANCE » EST
   RETIREE JUSQU'A SA DERNIERE LIGNE.
   Son bandeau de chiffres avait quitte le HTML en M23 (retour
   Camille 5), mais sa feuille de style etait restee : environ
   soixante lignes de .proof-band et .proof-cell que plus aucune
   page n'utilisait, sous un titre de chapitre qui portait
   encore le nom de la rubrique. Le tout est supprime ici.
   Ce qui reste dans ce chapitre, ce sont les pastilles de
   secteurs (.proof-tags), qui n'ont jamais appartenu a cette
   rubrique et vivent dans le hero depuis M23.
   La formulation demandee au point 13 pour remplacer « ils
   nous font confiance » est posee sur le titre de la section
   d'avis Google : « Vos confreres nous font confiance ».
   ========================================================== */

.proof-tags {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ptag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--ink-2);
  transition: border-color var(--t-base), transform var(--t-base);
}
.ptag:hover { border-color: var(--or-line); transform: translateY(-2px); }
.ptag--hi { background: var(--or-soft); border-color: var(--or-line); color: var(--or-deep); }

/* M23, retour Camille 5 : LES SECTEURS DANS LE HERO.
   Les memes pastilles, remontees au premier ecran. Elles y sont plus
   serrees que dans une section a part : elles s'intercalent entre le
   sous-titre et les boutons, et chaque pixel pris ici est un pixel
   retire a la video, qu'on vient justement d'agrandir. */
.proof-tags--hero {
  margin-top: 18px;
  gap: 8px;
}
.proof-tags--hero .ptag {
  padding: 7px 14px;
  font-size: var(--fs-xs);
  border-width: 1px;
}
@media (max-width: 767px) {
  .proof-tags--hero { margin-top: 14px; gap: 6px; }
  .proof-tags--hero .ptag { padding: 6px 11px; }
}
/* Le drapeau est un aplat de couleurs, dessine en CSS. */
.flag {
  width: 20px; height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .12);
}
.flag--fr { background: linear-gradient(90deg, #0d2a7a 0 33.33%, #fff 33.33% 66.66%, #c5192d 66.66%); }
.flag--ca { background: linear-gradient(90deg, #d52b1e 0 25%, #fff 25% 75%, #d52b1e 75%); position: relative; }
.flag--ca::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px; height: 5px;
  background: #d52b1e;
  clip-path: polygon(50% 0, 62% 38%, 100% 34%, 70% 60%, 82% 100%, 50% 78%, 18% 100%, 30% 60%, 0 34%, 38% 38%);
}
.flag--us { background: repeating-linear-gradient(180deg, #b22234 0 2px, #fff 2px 4px); position: relative; }
.flag--us::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 7px;
  background: #3c3b6e;
}

.marquee--credit { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.marquee--credit .marquee__track img { height: 44px; }

/* ==========================================================
   V10-H. EQUIPE : tout le rang sur le meme fond
   ----------------------------------------------------------
   M22 : les six portraits ont ete recomposes sur UN SEUL fond,
   celui deja majoritaire dans le rang (le degrade orange des
   photos de Jules, Camille et Ludovic). Aucune couleur
   n'a ete inventee. Le portrait d'Enzo a ete recadre pour que
   sa tete tombe sur la meme ligne que les autres et que ses
   epaules ne debordent plus du rond.
   Les fichiers etant desormais cadres a l'identique, le
   centrage ci-dessous suffit : aucun decalage au cas par cas.
   ========================================================== */

.tcard__ph {
  background: var(--or-soft);
  object-position: 50% 50%;
}

/* ==========================================================
   V10-I. PAGE ETUDE DE CAS
   ========================================================== */

.cs-hero {
  padding-top: clamp(7rem, 14vw, 9.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cs-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% 0 auto;
  height: 150%;
  background: radial-gradient(ellipse at 50% 12%, rgba(251, 139, 57, .16), transparent 62%);
}
.cs-hero__logo { height: 62px; width: auto; object-fit: contain; margin-bottom: 20px; }
.cs-hero h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); max-width: 22ch; }
.cs-hero__sub {
  margin-top: 20px;
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: var(--lh-loose);
}
.cs-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cs-fact {
  padding: 24px 22px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--paper);
}
.cs-fact b {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--or-deep);
}
.cs-fact span {
  display: block;
  margin-top: 11px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-loose);
}
@media (max-width: 767px) { .cs-facts { grid-template-columns: 1fr; } }

.cs-block { max-width: 50rem; margin-inline: auto; }
.cs-block + .cs-block { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cs-block__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.cs-block__k::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--or);
  border-radius: 2px;
}
.cs-block h2 { margin-top: 14px; font-size: var(--fs-3xl); line-height: var(--lh-snug); }
.cs-block p { margin-top: 16px; color: var(--ink-3); line-height: var(--lh-loose); }
.cs-block p b { color: var(--ink); font-weight: 900; }

.cs-quote {
  margin-top: 24px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
}
.cs-quote p {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: var(--lh-snug);
  font-weight: 700;
}
.cs-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--or-deep);
}

.cs-list { margin-top: 20px; display: grid; gap: 11px; }
.cs-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-3);
  line-height: var(--lh-loose);
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 4px var(--or-soft);
}
.cs-list b { color: var(--ink); font-weight: 900; }

.cs-shot {
  margin-top: 26px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--paper-3);
}
.cs-shot img { width: 100%; height: auto; display: block; }
.cs-shot figcaption {
  padding: 13px 18px;
  font-size: var(--fs-xs);
  color: var(--muted-2);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.cs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.cs-duo .cs-shot { margin-top: 0; display: flex; flex-direction: column; }
/* Les deux photos du client n'ont pas le meme format. On les cadre
   sur un meme rapport 4/3 pour que la paire tienne la ligne, et la
   legende occupe le reste de la hauteur. */
.cs-duo .cs-shot img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center; }
.cs-duo .cs-shot figcaption { flex: 1; }
@media (max-width: 767px) { .cs-duo { grid-template-columns: 1fr; } }

.cs-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.cs-two article {
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--paper);
}
.cs-two h3 { font-size: var(--fs-2xl); color: var(--or-deep); }
.cs-two p { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }
@media (max-width: 767px) { .cs-two { grid-template-columns: 1fr; } }

/* ==========================================================
   V10-M20. PASSE GENERALE
   ========================================================== */

/* 1. ANCRES : la navbar est fixe. Sans cette reserve, un clic sur
      « Résultats » ou « Méthode » amenait le titre de la section
      DERRIERE la barre. La valeur mobile existait deja, elle
      manquait en poste fixe. */
html { scroll-padding-top: 96px; }
@media (max-width: 767px) { html { scroll-padding-top: 84px; } }

/* 2. RENDU DIFFERE. Le navigateur ne calcule la mise en page et ne
      peint ces deux sections que lorsqu'elles approchent de l'ecran.
      `contain-intrinsic-size` reserve une hauteur plausible pour que
      la barre de defilement ne saute pas.
      ATTENTION, et c'est pour cela que la liste est aussi courte :
      une section sous `content-visibility` n'a PAS de mise en page
      tant qu'elle est loin de l'ecran. Tout ce qui se mesure en
      JavaScript (la frise, les compteurs) ou tout ce qui contient
      une iframe (le calendrier) doit en rester dehors, sinon le
      calcul se fait sur une boite vide. Le widget de reservation
      s'affichait ainsi dans une colonne de 175 px.
      Seules deux sections purement statiques sont concernees. */
#equipe, #faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* 3. FOCUS CLAVIER visible et homogene sur tout ce qui est
      actionnable, y compris les nouvelles facades. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--or-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 4. Le defilement des logos et les reveals ne doivent jamais
      declencher de barre horizontale. */
body { overflow-x: hidden; }

/* ============================================================
   ============================================================
   V10 - REPRISE SUR RETOURS CLIENT (M21)
   Trois blocs neufs, et rien d'autre : le bloc international
   remonte dans le hero (retour 13), la punchline de
   positionnement (retour 11), et le calage du bandeau de logos
   a sa nouvelle place (retour 14).
   Rappel des regles : orange de marque #FB8B39 uniquement,
   #FBBC05 reserve aux etoiles Google, aucun vert.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   M21, retour 13 : BLOC INTERNATIONAL
   ------------------------------------------------------------
   Il remplace, en haut de page, les trois pastilles pays grises
   qui vivaient en bas. Aplat d'orange de marque, drapeaux
   agrandis de 20x14 a 30x21 px, pays en gras sur pastille claire.

   POURQUOI LE TEXTE EST EN ENCRE ET NON EN BLANC. Le premier jet
   posait du blanc sur l'orange. Mesure faite : blanc sur #FB8B39
   ne donne que 2,37:1, sous le seuil de 3:1 du texte large et
   tres loin des 4,5:1 du texte courant. L'encre --ink sur
   l'orange de marque donne 7,64:1 : la couleur demandee est tenue
   au pixel, et le texte est lisible. Les pastilles pays sont en
   blanc a 55 % pour detacher les drapeaux du fond sans salir
   l'orange.
   ------------------------------------------------------------ */
.inter {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(20px, 3vw, 28px) clamp(16px, 3vw, 32px);
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--or-light) 0%, var(--or) 100%);
  box-shadow: var(--sh-or);
  text-align: center;
}
.inter__t {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.inter__grid {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.inter__c {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
}
.inter__c b {
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.1;
}
/* Le drapeau est le meme dessin CSS que dans les pastilles
   d'expertise, simplement agrandi. L'etoile canadienne et le
   canton americain sont remis a l'echelle avec lui, sinon ils
   flottent dans un coin du rectangle. */
.inter .flag {
  width: 30px; height: 21px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .22);
}
.inter .flag--ca::after { width: 8px; height: 8px; }
.inter .flag--us::after { width: 13px; height: 10px; }
.inter__s {
  margin-top: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  line-height: var(--lh-snug);
}
@media (max-width: 480px) {
  .inter__grid { flex-direction: column; align-items: stretch; }
  .inter__c { justify-content: center; }
}

/* ------------------------------------------------------------
   M21, retour 11 : PUNCHLINE
   ------------------------------------------------------------
   Une phrase, seule, entre le hero et la premiere preuve.

   COULEUR DE LA SECONDE LIGNE : --or-dark (#E8732A), un orange
   net. Contraste mesure : 3,04:1 sur blanc. Le seuil applicable
   ici est celui du TEXTE LARGE (3:1), et il l'est largement, la
   punchline faisant de 26 a 36 px en graisse 900, tres au-dessus
   des 18,66 px en gras qui declenchent ce seuil. La premiere
   ligne reste en --ink, a plus de 15:1 : le sens de la phrase ne
   repose jamais sur la partie orange seule.
   ------------------------------------------------------------ */
.punch { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.punch__t {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.18;
  text-wrap: balance;
}
.punch__t span { display: block; color: var(--or-dark); }

/* ------------------------------------------------------------
   M21, retour 14 : LE BANDEAU DE LOGOS A SA NOUVELLE PLACE
   ------------------------------------------------------------
   Il n'est plus le troisieme etage d'une section, il EST la
   section, juste avant la prise de rendez-vous. Il ne porte donc
   plus la marge haute qui le decollait des pastilles
   d'expertise : c'est le rembourrage de section qui s'en charge,
   en version resserree pour ne pas eloigner le calendrier.
   ------------------------------------------------------------ */
.section--logos { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--logos .marquee { margin-top: 0; }

/* ============================================================
   ============================================================
   V10 - REPRISE SUR RETOURS CLIENT (M22)
   Nouvelles pages Methode et Portfolio, mur de logos chiffres,
   rubriques « Ce que l'on fait » et « Pour qui on le fait »,
   bloc IA, fiches clients.
   Rappel des regles : famille orange #FB8B39 uniquement, aucun
   marron, aucun vert, #FBBC05 reserve aux etoiles Google, une
   seule police (--font-display).
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   M22-A. MUR DE LOGOS CHIFFRES
   ------------------------------------------------------------
   Chaque tuile porte le logo du client, SON chiffre publie et la
   ligne de resultat qui va avec, puis ouvre sa fiche. Ce n'est
   plus un bandeau decoratif : c'est une preuve cliquable.
   Le logo est pose en `contain`, jamais etire, et la tuile lui
   reserve une hauteur fixe pour que tous tombent sur la meme
   ligne quel que soit leur format d'origine.
   ------------------------------------------------------------ */
.mur {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .mur { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .mur { grid-template-columns: 1fr; } }

.mur__card {
  display: grid;
  grid-template-rows: 72px auto auto 1fr auto;
  gap: 14px;
  padding: 22px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.mur__card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }

/* Le logo garde son rapport d'origine : hauteur bridee, largeur
   libre, `contain`. Pas de logo etire, pas de logo recadre. */
.mur__logo {
  align-self: center;
  justify-self: start;
  max-height: 68px;
  max-width: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Quand aucun logo n'a ete fourni par le client, on ecrit son nom
   dans la police du site plutot que d'en fabriquer un. */
.mur__wordmark {
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.mur__n {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--or-deep);
  font-variant-numeric: tabular-nums;
}
.mur__l { font-size: var(--fs-sm); font-weight: 900; color: var(--ink-2); line-height: 1.35; }
.mur__s { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.mur__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--or-deep);
}
.mur__go .arw { transition: transform var(--t-fast); }
.mur__card:hover .mur__go .arw { transform: translateX(4px); }
.mur__foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  justify-content: center;
}

/* ------------------------------------------------------------
   M22-B. CE QUE L'ON FAIT : trois piliers
   ------------------------------------------------------------ */
.pil {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .pil { grid-template-columns: 1fr; } }
.pil__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pil__card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.pil__k {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--grad-or-soft);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
}
.pil__card h3 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.pil__card > p { color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.pil__list { display: grid; gap: 9px; margin-top: 2px; }
.pil__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
}
.pil__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 3px var(--or-soft);
}

/* La promesse ferme la rubrique : un bandeau orange, texte en
   encre (7,64:1), aucune couleur nouvelle. */
.promesse {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--grad-or-band);
  box-shadow: var(--sh-or);
  text-align: center;
}
.promesse p {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.02em;
  max-width: 44ch;
  margin-inline: auto;
}
.promesse span { display: block; margin-top: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); letter-spacing: 0; }

/* ------------------------------------------------------------
   M22-C. POUR QUI ON LE FAIT
   ------------------------------------------------------------ */
.cible {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
}
@media (max-width: 900px) { .cible { grid-template-columns: 1fr; } }
.cible h2 { font-size: var(--fs-3xl); }
.cible > div > p { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.6; }
.cible__crit { display: grid; gap: 12px; }

/* ----------------------------------------------------------
   M31, 03/09/2026, point 4.3 : « POUR QUI ON LE FAIT » PASSE
   EN GRAND TITRE, A LA TAILLE DU H2 DE « CE QU'ON FAIT ».
   ----------------------------------------------------------
   .cible sert aussi a methode.html, qui n'est pas dans le
   perimetre de cette mission : la regle est donc portee par
   #pour-qui et ne peut pas deborder. --fs-4xl est exactement
   la valeur de .sec-head h2, le titre jumeau.
   ---------------------------------------------------------- */
#pour-qui .cible h2 { font-size: var(--fs-4xl); }

/* Le sous-titre qui recueille « Les installateurs terrain. »,
   descendu du H2. Il joue le meme role que la ligne « Cinq
   etapes... » sous l'autre titre : memes valeurs que
   .sec-head p, sans en dependre (elles ne sont pas dans le
   meme conteneur). */
.pourqui__st {
  margin-top: 14px;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.cible__crit li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.5;
}
.cible__crit li::before {
  content: "";
  flex-shrink: 0;
  margin-top: .3em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 4px rgba(251, 139, 57, .18);
}

/* ------------------------------------------------------------
   M22-D. BLOC IA
   ------------------------------------------------------------
   Une position, posee seule, sur l'encre du site. Aucun chiffre,
   aucun bouton.
   ------------------------------------------------------------ */
.ia {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: var(--ink);
}
.ia__ico {
  width: 64px; height: 64px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--grad-or-soft);
  color: #fff;
}
.ia__ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ia p {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: -.01em;
  max-width: 56ch;
}
.ia p b { font-weight: 900; color: var(--or-light); }
@media (max-width: 640px) {
  .ia { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   M22-E. METHODE EN BREF, sur la page d'accueil
   ------------------------------------------------------------ */
.brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) { .brief { grid-template-columns: 1fr; } }
.brief__card {
  padding: 26px 24px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), transform var(--t-base);
}
.brief__card:hover { border-color: var(--or-line); transform: translateY(-2px); }
.brief__k {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.brief__k::before { content: ""; width: 18px; height: 2px; background: var(--or); border-radius: 2px; }
.brief__card h3 { margin-top: 12px; font-size: var(--fs-xl); }
.brief__card p { margin-top: 9px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.65; }
.brief__foot { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; justify-content: center; }

/* ------------------------------------------------------------
   M22-F. PAGE METHODE : emplacement video et landing pages
   ------------------------------------------------------------ */

/* Emplacement reserve : tant que la video de la methode n'est pas
   tournee, le bloc annonce clairement qu'il est vide plutot que
   d'afficher une image d'illustration qui ferait croire a une
   video existante. */
.slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 2px dashed var(--or-line);
  background: var(--or-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.slot__ico {
  width: 62px; height: 62px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--or);
  color: #fff;
  box-shadow: var(--sh-or);
}
.slot__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.slot__t { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.slot__s { font-size: var(--fs-sm); color: var(--ink-3); max-width: 48ch; line-height: 1.6; }

/* Exemples de landing pages : des schemas dessines en CSS, jamais
   des captures. Ils montrent l'ossature d'une page, pas un rendu
   client qui n'aurait pas ete valide. */
.lp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .lp { grid-template-columns: 1fr; } }
.lp__card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.lp__card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.lp__hd { padding: 22px 22px 0; }
.lp__k {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.lp__hd h3 { margin-top: 8px; font-size: var(--fs-xl); }
.lp__hd p { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }

/* Les trois cartes ont des ossatures de longueurs differentes. Le
   schema prend la hauteur qui reste dans sa carte, si bien que les
   trois mentions « schema, pas une capture » tombent sur la meme
   ligne d'une carte a l'autre. */
.lpm {
  margin: 20px 22px 22px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--paper-alt);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lpm__body { flex: 1; align-content: start; }
.lpm__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.lpm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.lpm__bar span { margin-left: 6px; font-size: 11px; font-weight: 900; color: var(--muted-2); letter-spacing: .04em; }
.lpm__body { padding: 12px; display: grid; gap: 8px; }
.lpm__t { height: 12px; border-radius: 3px; background: var(--ink-2); width: 82%; }
.lpm__t--s { height: 8px; background: var(--line); width: 62%; }
.lpm__v {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.lpm__v::after {
  content: "";
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 14px solid var(--or);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.lpm__f { display: grid; gap: 6px; padding: 10px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-2); }
.lpm__f i { display: block; height: 9px; border-radius: 3px; background: var(--line-2); border: 1px solid var(--line); }
.lpm__cta { height: 22px; border-radius: var(--r-pill); background: var(--or); box-shadow: var(--sh-or); }
.lpm__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lpm__row span {
  height: 26px;
  border-radius: 5px;
  background: var(--or-soft);
  border: 1px solid var(--or-line);
}
.lpm__note {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: center;
}

/* ------------------------------------------------------------
   M22-G. PORTFOLIO : liste de cas, puis une fiche par client
   ------------------------------------------------------------ */
.pf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) { .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pf { grid-template-columns: 1fr; } }

.pf__card {
  display: grid;
  grid-template-rows: 60px auto auto 1fr auto;
  gap: 14px;
  padding: 24px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pf__card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.pf__logo {
  align-self: center;
  justify-self: start;
  max-height: 52px;
  max-width: 76%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pf__meta { font-size: var(--fs-xs); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--or-deep); }
.pf__card h2, .pf__card h3 { font-size: var(--fs-xl); }
.pf__fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf__fig b {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--or-deep);
}
.pf__fig span { font-size: var(--fs-sm); font-weight: 900; color: var(--ink-2); }
.pf__card > p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.65; }

/* Fiche client : bandeau de tete, chiffre, et le fil contexte,
   actions, resultat. Elle reutilise .cs-* de la page etude de cas
   pour que les deux gabarits restent identiques. */
.fiche__hd {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.fiche__logo { max-height: 66px; max-width: 240px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.fiche__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
}
.fiche__nolog {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  font-weight: 700;
}

/* Rangee de fiches voisines en bas de page */
.voisins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
@media (max-width: 767px) { .voisins { grid-template-columns: 1fr; } }
.voisin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--paper);
  transition: border-color var(--t-base), transform var(--t-base);
}
.voisin:hover { border-color: var(--or-line); transform: translateY(-2px); }
.voisin b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 900; color: var(--or-deep); letter-spacing: -.03em; }
.voisin span { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.voisin i { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mur__card, .pil__card, .brief__card, .lp__card, .pf__card, .voisin { transition: none; }
}

/* Le chiffre de tete d'une fiche client. Un seul chiffre, celui
   publie par l'entreprise, et la ligne qui dit ce qu'il mesure. */
.fiche__kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
}
.fiche__kpi b {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--or-deep);
  font-variant-numeric: tabular-nums;
}
.fiche__kpi span { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-2); line-height: 1.4; max-width: 40ch; }
.fiche__kpi i { font-style: normal; font-size: var(--fs-xs); color: var(--muted-2); }
/* Variante sans chiffre : pour les clients dont aucun resultat
   chiffre n'est publie. On ne comble jamais le trou avec un
   nombre invente. */
.fiche__kpi--none { background: var(--paper-alt); border-color: var(--line); }
.fiche__kpi--none b { font-size: var(--fs-2xl); color: var(--ink); letter-spacing: -.02em; }

/* Carte de portfolio sans logo : on annonce l'absence plutot que de
   repeter le nom, qui est deja le titre juste en dessous. */
.pf__nologo {
  align-self: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted-2);
  font-style: italic;
}

/* ==========================================================
   M23 - LE TRAVAIL PRODUIT  (retour Camille 6, Loom 4:58-5:36)
   ----------------------------------------------------------
   Une section, deux sous-groupes independants : les videos
   publicitaires (cartes verticales 9/16) et les landing pages
   (cartes horizontales posees dans une fenetre de navigateur
   dessinee en CSS). Aucun composant existant ne convenait : le
   site n'avait que du 16/9 et des cartes de texte.
   Les deux sous-groupes partagent la meme carte `.tw__card` et
   la meme legende `.tw__cap` : retirer un des deux blocs du
   HTML ne casse rien de l'autre.
   ========================================================== */

.tw + .tw { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.tw__t {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
}
.tw__grid {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}
/* Les videos sont verticales : trois colonnes etroites, centrees,
   sinon une crea 9/16 etiree sur un tiers de 1320 px ferait deux
   fois la hauteur du reste de la page. */
.tw__grid--v {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 58rem;
  margin-inline: auto;
}
.tw__grid--lp { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tw__card { margin: 0; }

/* Facade verticale : meme mecanique que la video du hero (rien
   n'est telecharge avant le clic), seul le rapport change. */
.vfacade--tall { aspect-ratio: 9 / 16; }
.vfacade--tall .vplay { width: 56px; height: 56px; }
.vfacade--tall .vplay::before {
  border-left-width: 16px;
  border-top-width: 10px;
  border-bottom-width: 10px;
}

/* Fenetre de navigateur dessinee : elle dit « ceci est une page »
   sans qu'on ait a l'ecrire. La capture est cadree sur son premier
   ecran, elle n'est ni etiree ni deformee. */
.tw__win {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-2);
}
.tw__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 12px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.tw__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.tw__win img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 1000;
  object-fit: cover;
  object-position: top center;
}

.tw__cap {
  margin-top: 12px;
  text-align: center;
}
.tw__cap b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--ink);
}
.tw__cap span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-snug);
}

@media (max-width: 860px) {
  .tw__grid--lp { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 560px) {
  /* Trois videos verticales cote a cote sous 560 px donneraient des
     vignettes de 100 px de large : on passe a deux colonnes, la
     troisieme prenant la largeur restante. */
  .tw__grid--v { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La troisieme carte se centre a la LARGEUR D'UNE COLONNE, pas a
     62 % : sinon la vignette du bas est une fois et demie plus grande
     que les deux du haut, et le rang ne se lit plus comme une serie. */
  .tw__grid--v .tw__card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 8px);
    margin-inline: auto;
  }
}

/* ============================================================
   M24. LE SCHEMA DE LA METHODE, SUR L'ACCUEIL
   ------------------------------------------------------------
   Demande de Jules : « qu'une grand-mere comprenne exactement ce
   qu'on fait ». La section se lit donc SANS LIRE : cinq
   pictogrammes, cinq titres courts, une fleche qui donne le sens
   de lecture, et une pastille qui dit a chaque etape qui tient le
   stylo. Aucun mur de texte, aucun chiffre.
   Les cinq etapes sont la contraction des six etapes detaillees
   sur methode.html, dans le meme ordre : rien de neuf n'y est
   promis.
   ============================================================ */
.flow {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 26px 18px 22px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--paper);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.flow__step:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }

/* La fleche entre deux etapes. Purement decorative : le sens de
   lecture est deja porte par le mot « Etape n ». */
.flow__step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -12px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-top: 2.5px solid var(--or);
  border-right: 2.5px solid var(--or);
  transform: rotate(45deg);
}
.flow__step:last-child::after { display: none; }

.flow__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  border: 1.5px solid var(--or-line);
  color: var(--or-deep);
}
.flow__ico svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow__num {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.flow__step h3 {
  font-size: var(--fs-lg);
  line-height: 1.18;
  letter-spacing: -.015em;
  /* Deux lignes a peu pres egales plutot qu'une longue et un mot
     seul : un titre de trois mots doit se lire d'un coup d'oeil. */
  text-wrap: balance;
}
.flow__step p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}
/* Qui tient le stylo a cette etape. Gris quand c'est nous,
   orange quand le client est dans la boucle : la couleur seule
   ne porte rien, le mot est ecrit en toutes lettres. */
.flow__who {
  margin-top: auto;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 900;
  background: var(--paper-3);
  color: var(--ink-3);
}
.flow__who--you { background: var(--or-soft); color: var(--or-deep); }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* Fin de rang : la fleche pointerait dans le vide. */
  .flow__step:nth-child(3)::after { display: none; }
}
@media (max-width: 700px) {
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .flow__step::after,
  .flow__step:nth-child(3)::after {
    display: block;
    top: auto;
    bottom: -20px;
    right: 50%;
    margin: 0 -5px 0 0;
    transform: rotate(135deg);
  }
  .flow__step:last-child::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__step { transition: none; }
}

/* ============================================================
   M24. LES TROIS CHIFFRES EXACTS
   ------------------------------------------------------------
   M.R. Energies, Auver Sol Avenir et Les Compagnons de l'Energie
   publient desormais leur montant COMPLET, au centime. Trois
   regles, posees ici une seule fois pour tout le site :

   1. LE DEGRADE. C'est --grad-or, le degrade de marque deja
      declare dans variables.css et deja utilise par `.grad` sur
      les grands titres. Aucun degrade n'est cree pour l'occasion.
      La declaration est repetee ici plutot que d'ajouter la
      classe `.grad` sur ces elements : `.rc-fig__n`, `.pf__fig b`
      et consorts posent un `color` plus loin dans la feuille et
      l'emporteraient sur elle.
   2. LA TAILLE. `.figx` releve le corps dans chaque contexte.
      Les chiffres des autres clients ne portent pas la classe :
      ils ne bougent donc pas d'un pixel.
   3. LA MENTION ACCOLEE. `.figx-note`, la plus petite graisse du
      site, juste sous le chiffre. Elle precise d'ou vient le
      montant sans jamais lui disputer la place.
   ============================================================ */
.figx,
.pf__fig b.figx,
.kpi b.figx,
.cs-fact b.figx,
.fiche__kpi b.figx,
.voisin b.figx {
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Les bornes ci-dessous sont calees sur la largeur reelle de la
   carte la plus etroite de chaque grille : un montant complet fait
   environ 5,8 fois le corps du texte, insecable. Il ne doit
   deborder a AUCUNE largeur, pas seulement en 1440 et en 390. */
.rc-fig__n.figx     { font-size: clamp(2.20rem, 1.30rem + 3.00vw, 3.40rem); }
.cas-hero__n.figx   { font-size: clamp(2.60rem, 1.80rem + 3.60vw, 4.30rem); }
.pf__fig b.figx     { font-size: clamp(1.75rem, 1.20rem + 1.60vw, 2.55rem); }
.kpi b.figx         { font-size: var(--fs-3xl); }
.cs-fact b.figx     { font-size: clamp(1.90rem, 1.20rem + 2.10vw, 3.00rem); }
.fiche__kpi b.figx  { font-size: clamp(2.80rem, 1.90rem + 3.90vw, 4.40rem); }
.cred__n.figx       { font-size: var(--fs-3xl); }
.voisin b.figx      { font-size: var(--fs-xl); }

.figx-note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: normal;
  color: var(--muted-2);
  line-height: 1.4;
}
/* Le montant complet ne tient plus a cote de sa legende dans une
   pastille : la pastille passe donc sur deux lignes. */
.kpi--x { flex-wrap: wrap; row-gap: 2px; }
.kpi + .figx-note { margin-top: 8px; }

/* Le rang de faits d'une etude de cas qui porte un montant complet :
   la carte du montant prend le rang entier, les deux autres se
   partagent celui du dessous. Sans cela, le chiffre de tete de la
   fiche serait plafonne a la largeur d'un tiers de colonne, donc
   plus petit que celui de la carte portefeuille qui y renvoie. */
.cs-facts--x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-facts--x .cs-fact--x { grid-column: 1 / -1; }
.cs-facts--x .cs-fact--x b.figx { font-size: clamp(2.80rem, 1.90rem + 3.90vw, 4.40rem); }
@media (max-width: 767px) { .cs-facts--x { grid-template-columns: 1fr; } }

/* Carte portefeuille avec mention : c'est le paragraphe de bas de
   carte qui absorbe la hauteur restante, pas le chiffre. Sans cette
   ligne, la mention se retrouvait poussee loin sous son montant. */
.pf__card--x { grid-template-rows: 60px auto auto auto auto 1fr auto; }


/* ==========================================================
   M25 (vague 2, 24/08/2026). Complement de la feuille, pose en
   fin de fichier pour ne deplacer aucune regle existante.
   Aucune police n'est ajoutee, aucune couleur n'est creee : tout
   ce qui suit n'utilise que les variables deja declarees dans
   variables.css.
   ========================================================== */

/* ----------------------------------------------------------
   M25, point 8 : LE MARRON QUITTE LA PAGE
   ----------------------------------------------------------
   --or-deep (#C85107) est une terre de Sienne. Sur du TEXTE, il
   est la pour une raison mesurable : 4,53:1 sur blanc, donc AA.
   Il y reste, sans quoi la moitie des libelles du site passerait
   sous le seuil de contraste.
   En APLAT, en revanche, il n'a aucune justification et c'est la
   qu'on le lit comme du brun : un disque de 48 px de cette
   couleur est marron, pas orange. Les pastilles d'avatars et le
   badge d'avis avaient deja ete rebasculees sur l'orange de
   marque en M21 ; il restait les pastilles numerotees de la frise
   de methode, seules a garder un aplat de --or-deep dans toute la
   feuille. Elles passent sur le meme degrade orange que toutes
   les autres pastilles du site. Elles portent aria-hidden et leur
   numero est repete dans le titre de l'etape juste a cote : la
   couleur n'y porte jamais seule une information.
   ---------------------------------------------------------- */
.tl-item.is-active .tl-node {
  background: var(--grad-or-soft);
  border-color: var(--or);
}

/* ----------------------------------------------------------
   M25, points 4 et 22 : LES ONGLETS DE LA NAVIGATION
   ----------------------------------------------------------
   Point 4, reference agenceshort.fr : sa nav est deja celle de
   Wattlift (barre flottante detachee du haut, fond transparent
   qui se givre au defilement, logo a gauche, liens au centre,
   CTA en pilule a droite, bascule burger a 991 px). Ce qui lui
   manquait, c'etait l'entree « Avis clients » : elle est ajoutee
   dans le HTML.
   Point 22, reference coudac.com : les onglets doivent SE VOIR
   comme des onglets separes. Ils sont donc poses dans une piste
   commune, chacun dans sa pilule, la page courante prenant un
   fond blanc plein et une ombre : on lit d'un coup d'oeil ou on
   se trouve et combien il y a d'onglets. Rien n'est ajoute a la
   hauteur de la barre.
   ---------------------------------------------------------- */
.nav__links {
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  background: transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
.nav.is-stuck .nav__links {
  background: var(--paper-3);
  border-color: var(--line-2);
}
.nav__link {
  padding: 8px 13px;
  transition: color var(--t-fast), background-color var(--t-fast),
              box-shadow var(--t-fast);
}
.nav__link:hover {
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sh-1);
}
/* L'onglet courant : fond plein, encre pleine, une ombre courte.
   C'est le seul qui porte les trois a la fois. */
.nav__link[aria-current="page"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-2);
}
.nav.is-stuck .nav__link[aria-current="page"] { box-shadow: var(--sh-1); }
/* Sept entrees au lieu de six : la barre reste large mais ne doit
   jamais toucher le CTA. Entre 992 et 1150 px, les onglets se
   resserrent plutot que de pousser le bouton hors de la barre. */
@media (min-width: 992px) and (max-width: 1150px) {
  .nav__link { padding-inline: 9px; font-size: var(--fs-xs); }
}

/* ----------------------------------------------------------
   M25, point 15 : LE RAIL DES TEMOIGNAGES
   ----------------------------------------------------------
   Memes garde-fous que le rail d'avis, pour la meme raison : le
   geste horizontal ne doit jamais voler le defilement vertical de
   la page, le rail doit se parcourir au clavier, et aucune carte
   ne doit s'arreter coupee en deux.
   Deux cartes visibles en grand ecran : les cartes de temoignage
   portent un chiffre, un verbatim et une video, elles ne se
   lisent pas a un quart de largeur.
   ---------------------------------------------------------- */
.rc-carr { position: relative; }
.rc-rail {
  display: flex;
  align-items: stretch;
  grid-auto-rows: initial;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--or-line) transparent;
}
.rc-rail::-webkit-scrollbar { height: 8px; }
.rc-rail::-webkit-scrollbar-track { background: var(--line-2); border-radius: var(--r-pill); }
.rc-rail::-webkit-scrollbar-thumb { background: var(--or-line); border-radius: var(--r-pill); }
.rc-rail:hover::-webkit-scrollbar-thumb { background: var(--or); }
.rc-rail:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: var(--r-lg); }
.rc-rail > .rc-card {
  flex: 0 0 calc((100% - 24px) / 2);
  scroll-snap-align: start;
}
@media (max-width: 700px) {
  .rc-rail { gap: 16px; }
  /* 88 % : la carte suivante affleure, c'est ce bord qui dit au
     doigt qu'il y a quelque chose a faire glisser. */
  .rc-rail > .rc-card { flex-basis: 88%; }
}
/* Les fleches du rail d'avis servent aussi ici, sans etre
   redecrites : elles sont deja stylees plus haut (.avis-nav). */

/* ----------------------------------------------------------
   M25, point 20 : deux boutons en bas de la section Methode
   ---------------------------------------------------------- */
.brief__foot { flex-wrap: wrap; gap: 12px; }

/* ----------------------------------------------------------
   M25, point 12 : « Et bien plus. »
   ----------------------------------------------------------
   Elle ferme l'enumeration des services : elle se lit comme la
   derniere ligne de la liste, pas comme un nouveau titre.
   ---------------------------------------------------------- */
.etplus {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--or-deep);
}

/* ----------------------------------------------------------
   M25, point 21 : LA PAGE RESULTATS PREND LA MISE EN PAGE DU
   RESTE DU SITE
   ----------------------------------------------------------
   Les sept etudes de cas s'empilaient sur toute la largeur, avec
   une vignette video de 742 px de haut par carte : la page
   faisait 8 800 px et ne ressemblait a aucune autre. Elles
   passent en deux colonnes de cartes, exactement comme le mur de
   resultats de l'accueil (.rc-grid) et le mur du portfolio
   (.pf). Aucun texte n'est touche, aucune carte n'est retiree.
   ---------------------------------------------------------- */
.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------------------------------------------------------
   M25b, recette visuelle du 24/08 : DEUX CORRECTIONS VUES SUR
   LES CAPTURES PLEINE PAGE.
   ---------------------------------------------------------- */

/* 1. LES EMPLACEMENTS DE VIDEO RESERVES NE PRENNENT PLUS TOUT
      L'ECRAN.
      `.slot` gardait le format 16/9 sur toute la largeur du
      conteneur : 1320 px de large, donc 742 px de haut, pour
      trois lignes de texte au centre. Sur la capture pleine page
      de l'accueil comme de la page Methode, cela se lit comme un
      grand bloc vide. Le format 16/9 est conserve, parce qu'il
      dit bien quelle place la video prendra, mais il est CADRE :
      la hauteur est plafonnee et le bloc se recentre.
      Aucune couleur, aucune police touchee. */
.slot {
  max-width: 676px;
  max-height: 380px;
  margin-inline: auto;
}

/* 2. LE BANDEAU DE LOGOS, EN MOUVEMENT REDUIT.
      Le rail contient DEUX copies des 21 logos : la seconde ne
      sert qu'a fermer la boucle du defilement sans raccord, et
      elle porte deja aria-hidden. Quand l'animation est coupee
      (reglage systeme « reduire les animations »), le rail passe
      en grille et ces 21 doublons deviennent visibles : chaque
      client apparaissait deux fois. Les doublons sont donc
      retires dans ce mode, ou ils n'ont plus aucune raison
      d'exister. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track img[aria-hidden="true"] { display: none; }
}


/* ============================================================
   M26, 26/08/2026. LA METHODE PASSE A QUATRE ETAPES
   ------------------------------------------------------------
   Aucune regle existante n'est retiree : la grille de base reste
   a cinq colonnes pour toute page qui utiliserait encore .flow.
   Le modificateur .flow--4, pose sur la liste de l'accueil,
   redessine la grille : 4 colonnes en desktop, 2 en tablette,
   1 en mobile, avec la fleche de sens de lecture recalee sur les
   fins de rang.
   ============================================================ */
.flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* L'etape 1 a droit a une illustration un peu plus grande. La
   marge negative compense l'agrandissement du medaillon : la
   hauteur occupee reste celle des trois autres, donc les numeros,
   les titres et les phrases des quatre etapes restent alignes. */
.flow__ico--lg {
  width: 74px;
  height: 74px;
  margin: -8px 0;
}
.flow__ico--lg svg { width: 36px; height: 36px; }

@media (max-width: 1100px) {
  .flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Deux cartes par rang : la fleche disparait en fin de rang
     (2e et 4e), et revient sur la 3e que la grille a cinq
     colonnes avait neutralisee. */
  .flow--4 .flow__step:nth-child(3)::after { display: block; }
  .flow--4 .flow__step:nth-child(2n)::after { display: none; }
}
@media (max-width: 700px) {
  .flow--4 { grid-template-columns: 1fr; }
  /* Une colonne : la fleche redevient verticale entre chaque
     carte, sauf apres la derniere. La geometrie verticale vient
     de la regle de base .flow__step::after. */
  .flow--4 .flow__step:nth-child(2n)::after { display: block; }
  .flow--4 .flow__step:last-child::after { display: none; }
}

/* ==========================================================
   V10-L. CORRECTIONS DE LA HOME, PASSE 2 DU 26/08/2026
   ----------------------------------------------------------
   Ajouts purs, demandes C1, C3 et C5. Aucune regle existante
   n'est supprimee : ces classes ne sont posees que sur les
   elements de l'accueil qui les portent explicitement.
   ========================================================== */

/* ----------------------------------------------------------
   C1. LE BLOC DE TROIS CHIFFRES ET « RESULTATS CLIENTS »
   SE LISENT COMME UN SEUL ENCHAINEMENT
   ----------------------------------------------------------
   Les deux valeurs sont exactement la moitie des valeurs
   d'origine, aux deux bornes de chaque clamp, donc la moitie
   en 1440 comme en 390 :
     hero  padding-bottom : clamp(3rem, 6vw, 5rem)
                         -> clamp(1.5rem, 3vw, 2.5rem)
       1440 px : 80 px -> 40 px    390 px : 48 px -> 24 px
     #resultats padding-top : var(--sec-y), soit
                            clamp(4rem, 9vw, 7.5rem)
                         -> clamp(2rem, 4.5vw, 3.75rem)
       1440 px : 120 px -> 60 px   390 px : 64 px -> 32 px
   Aucune autre section n'est touchee : .section garde son
   --sec-y, et le padding-bottom de #resultats reste entier.
   ---------------------------------------------------------- */
.hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
#resultats { padding-top: clamp(2rem, 4.5vw, 3.75rem); }

/* ----------------------------------------------------------
   C2. L'ACCROCHE DE « POUR QUI ON LE FAIT »
   ----------------------------------------------------------
   La phrase vient de l'ancienne section .punch, qui n'existe
   plus. Elle garde sa graisse et sa seconde ligne en orange
   sombre, a l'echelle d'une accroche de section et non plus
   d'une pleine largeur.
   ---------------------------------------------------------- */
.pourqui__punch {
  margin: 14px 0 18px;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pourqui__punch span { display: block; color: var(--or-dark); }

/* ----------------------------------------------------------
   C3. LA GRILLE D'EQUIPE PASSE A CINQ CARTES
   ----------------------------------------------------------
   Six colonnes de base, chaque carte en occupe deux : trois
   cartes sur le premier rang, deux CENTREES sur le second,
   sans case vide a droite. La grille .team d'origine (trois
   colonnes) n'est pas modifiee, seul le conteneur qui porte
   aussi .team--5 change de comportement.
   ---------------------------------------------------------- */
.team--5 { grid-template-columns: repeat(6, 1fr); }
.team--5 > .tcard { grid-column: span 2; }
.team--5 > .tcard:nth-child(4) { grid-column: 2 / span 2; }

@media (max-width: 1024px) {
  .team--5 { grid-template-columns: repeat(6, 1fr); }
  .team--5 > .tcard { grid-column: span 2; }
  .team--5 > .tcard:nth-child(4) { grid-column: 2 / span 2; }
}

/* Une seule colonne en mobile, comme demande. */
@media (max-width: 767px) {
  .team--5 { grid-template-columns: 1fr; }
  .team--5 > .tcard,
  .team--5 > .tcard:nth-child(4) { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------
   C5. LE LOGO REEL DU CLIENT A LA PLACE DES INITIALES
   ----------------------------------------------------------
   Meme hauteur que la pastille d'initiales qu'il remplace
   (40 px), donc meme rythme de ligne dans la carte. La
   largeur respire jusqu'a 92 px : un logo large reste
   lisible, la ou un carre de 40 px l'aurait reduit a une
   tache. Fond neutre, jamais de couleur de marque ajoutee.
   ---------------------------------------------------------- */
.rc-av--logo {
  width: auto;
  min-width: 40px;
  max-width: 92px;
  height: 40px;
  padding: 5px 8px;
  background: var(--paper-alt);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
}

/* ==========================================================
   V10-M27. MISSION SITE DU 30/08/2026
   ----------------------------------------------------------
   Trois ajouts, aucune regle existante n'est supprimee ni
   modifiee. Les classes ne sont posees que sur les elements
   de l'accueil et de methode.html qui les portent.
   Aucune couleur nouvelle : tout vient de la famille de
   #FB8B39 declaree dans variables.css. #FBBC05 n'apparait
   nulle part ici, il reste reserve aux etoiles d'avis.
   ========================================================== */

/* ----------------------------------------------------------
   1.5. LE LIEN VERS LE PORTFOLIO, SOUS LES CINQ CAS
   ---------------------------------------------------------- */
.rc-foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  justify-content: center;
}

/* ----------------------------------------------------------
   SECTION 2. LE PARCOURS A SIX CASES
   ----------------------------------------------------------
   Six etapes ne tiennent pas sur une ligne lisible en 1440 :
   a six colonnes, chaque carte ferait moins de 200 px et les
   titres passeraient a quatre lignes. La grille tient donc
   sur DEUX RANGS DE TROIS, ce qui garde la lecture d'un seul
   coup d'oeil sans reduire le corps de texte.
   La fleche de sens de lecture disparait en fin de rang, comme
   le fait deja .flow--4.
   ---------------------------------------------------------- */
.flow--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow--6 .flow__step:nth-child(3n)::after { display: none; }

@media (max-width: 1100px) {
  .flow--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Deux par rang : la fleche revient sur la 3e et la 5e, que la
     grille a trois colonnes avait neutralisees, et disparait sur
     les fins de rang paires. */
  .flow--6 .flow__step:nth-child(3n)::after { display: block; }
  .flow--6 .flow__step:nth-child(2n)::after { display: none; }
}
@media (max-width: 700px) {
  .flow--6 { grid-template-columns: 1fr; }
  /* Une colonne : la fleche redevient verticale entre chaque carte,
     sauf apres la derniere. La geometrie verticale vient de la
     regle de base .flow__step::after. */
  .flow--6 .flow__step:nth-child(2n)::after,
  .flow--6 .flow__step:nth-child(3n)::after { display: block; }
  .flow--6 .flow__step:last-child::after { display: none; }
}

/* ----------------------------------------------------------
   SECTION 3. LA BANNIERE « TERMINUS : CASH COLLECTE »
   ----------------------------------------------------------
   Elle prend la place exacte de l'ancienne bande .promesse :
   meme aplat --grad-or-band, meme rayon, meme ombre, meme
   largeur. Le texte reste en encre sur l'orange, comme la
   bande qu'elle remplace, pour garder le contraste mesure a
   7,64:1.
   ---------------------------------------------------------- */
.terminus {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(24px, 3.4vw, 34px) clamp(18px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--grad-or-band);
  box-shadow: var(--sh-or);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.terminus__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  color: var(--or-deep);
}
.terminus__ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.terminus__t {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.02em;
}
/* Le blanc n'est pas une couleur nouvelle : c'est le papier du
   site, pose ici sur l'aplat de marque. */
.terminus__hi { color: #fff; }
.terminus__s {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-2);
  max-width: 42ch;
}

/* Les deux chiffres du brief, et aucun autre. */
.terminus__kpi {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.terminus__kpi li {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .88);
}
.terminus__kpi b {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--or-deep);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.terminus__kpi span {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
}
.terminus__f {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
}

@media (max-width: 520px) {
  .terminus__kpi li { flex: 1 1 100%; }
  /* Marge de securite en 390 px : le titre du terminus tient sur
     une ligne a 22 px, mais il arrive a 6 px du bord. Un cran de
     corps en dessous, et il respire. */
  .terminus__t { font-size: var(--fs-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .terminus { transition: none; }
}

/* ----------------------------------------------------------
   SECTION 2, VERSION DETAILLEE : LE PARCOURS AVEC SES
   BRANCHES DE RELANCE  (methode.html, et prototype du 30/08)
   ----------------------------------------------------------
   Le modele est celui de la maquette a etapes avec branches :
   une ligne principale, ce qui SORT du parcours a droite, ce
   que les relances RAMENENT a gauche. La maquette d'origine
   etait bleue ; la couleur n'est pas reprise, parce que le
   systeme de design du site n'a qu'un accent, l'orange
   #FB8B39, et qu'y ajouter une teinte serait une couleur
   nouvelle. Seule la STRUCTURE est reprise.
   Cette version ne vit PAS sur l'accueil : l'accueil garde la
   version simple a six cases (.flow--6), parce que 80 % des
   visiteurs n'en sortent jamais.
   ---------------------------------------------------------- */
.pcours {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pcours__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
/* La carte d'etape, la ligne principale. */
.pcours__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--paper);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pcours__card:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
/* Le segment de ligne qui relie une etape a la suivante. */
.pcours__row:not(:last-child) .pcours__card::after {
  content: '';
  position: absolute;
  left: 43px;
  bottom: -19px;
  width: 2.5px;
  height: 19px;
  background: var(--or-line);
}
.pcours__ico {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--or-soft);
  border: 1.5px solid var(--or-line);
  color: var(--or-deep);
  align-self: start;
}
.pcours__ico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.pcours__num {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-deep);
}
.pcours__card h3 {
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.pcours__card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}
/* Les branches. A droite ce qui sort du parcours, a gauche ce
   que la relance ramene. Le mot dit toujours de quoi il s'agit :
   la couleur ne porte aucune information a elle seule. */
.pcours__br {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcours__br--out { align-items: flex-start; }
.pcours__br--back { align-items: flex-end; text-align: right; }
.pcours__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  border: 1.5px dashed var(--line);
  background: var(--paper-alt);
  color: var(--ink-3);
}
.pcours__chip--back {
  border-style: solid;
  border-color: var(--or-line);
  background: var(--or-soft);
  color: var(--or-deep);
}
.pcours__chip svg {
  flex: none;
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pcours__leg {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.pcours__leg span { display: inline-flex; align-items: center; gap: 8px; }
.pcours__leg i {
  width: 22px; height: 0;
  border-top: 2.5px solid var(--or);
}
.pcours__leg i.is-back { border-top-style: solid; border-top-color: var(--or-line); }
.pcours__leg i.is-out  { border-top-style: dashed; border-top-color: var(--line); }

@media (max-width: 900px) {
  /* Une seule colonne : la carte d'abord, puis ses branches,
     dans l'ordre de lecture. La ligne verticale se recale sur
     le bord gauche de la carte. */
  .pcours__row { grid-template-columns: 1fr; gap: 10px; }
  .pcours__card { order: 1; }
  .pcours__br--out { order: 2; align-items: stretch; }
  .pcours__br--back { order: 3; align-items: stretch; text-align: left; }
  .pcours__row:not(:last-child) .pcours__card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcours__card { transition: none; }
}


/* ==========================================================
   M28. ADDENDUM DU 30/08/2026, FICHE NOTION « SITE WATTLIFT 2 »
   ==========================================================
   Trois regles seulement, chacune adossee a une demande ecrite.
   Aucune couleur nouvelle n'est introduite : tout vient des
   variables de marque deja en place.
   ========================================================== */

/* ----------------------------------------------------------
   A5. LE BLOC DE CHIFFRES PASSE A DEUX CASES
   ----------------------------------------------------------
   .stats etait cable en trois colonnes fixes. A deux enfants,
   la troisieme colonne serait restee vide et le fond de la
   grille (var(--line)) s'y serait vu comme une bande grise.
   Le modificateur ne touche pas la regle de base : les autres
   pages qui portent encore trois chiffres ne bougent pas.
   Le mot « installations » du second chiffre est pose un cran
   en dessous du nombre : il reste gros, mais il ne pousse pas
   la case a deborder en petite largeur.
   ---------------------------------------------------------- */
.stats--2 { grid-template-columns: repeat(2, 1fr); }

/* M30, 02/09/2026, V1 : LE BLOC DE CHIFFRES PASSE A UNE CASE.
   Le chiffre en euros retire de la page des resultats clients y
   laissait une rangee a un seul enfant. Sous .stats--2, la case
   restante n'aurait occupe que la moitie gauche du bandeau et le
   fond de grille (var(--line)) se serait vu comme une bande grise
   sur toute la moitie droite. Une colonne unique, la case remplit
   le bandeau. Comme .stats--2, ce modificateur ne touche pas la
   regle de base : les pages qui portent encore deux ou trois
   chiffres ne bougent pas. Aucune media query n'est necessaire,
   une colonne se comporte deja bien en petite largeur. */
.stats--1 { grid-template-columns: 1fr; }

.stat__w {
  font-size: .52em;
  font-weight: 900;
  letter-spacing: -.01em;
}
@media (max-width: 767px) {
  /* Une seule colonne en mobile : deux cases cote a cote y
     reduiraient chaque nombre a une ligne de quatre caracteres.
     La regle generique .stats .stat:last-child { grid-column:
     1 / -1 } de la meme largeur ne suffit pas ici, elle laisse
     la premiere case a moitie de largeur. */
  .stats--2 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   A2. LES BULLES DU PARCOURS SONT ENLEVEES
   ----------------------------------------------------------
   « Enlever les bulles », fiche Notion. Le rond orange de
   58 px qui portait chaque pictogramme disparait. Le dessin,
   lui, reste et grandit : sans son fond, un trace de 27 px se
   serait lu comme une poussiere. Le trait passe legerement
   plus fin pour compenser l'agrandissement, sinon un dessin
   de 44 px a 1,9 px de trait devient un pate.
   Le modificateur est pose sur la liste : .flow__ico garde sa
   bulle partout ailleurs.
   ---------------------------------------------------------- */
.flow--nu .flow__ico {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--or-deep);
}
.flow--nu .flow__ico svg { width: 44px; height: 44px; stroke-width: 1.6; }
.flow--nu .flow__ico--lg svg { width: 54px; height: 54px; }
/* L'etape 1 n'a plus de sous-texte : son contenu se centre dans la
   case plutot que de laisser un blanc en bas. Les cinq autres cases
   sont pleines, la regle ne les bouge pas. */
.flow--nu .flow__step { justify-content: center; }

/* ----------------------------------------------------------
   A4. « CHANTIER EXCLUSIF » EN ORANGE, DANS LA FAQ
   ----------------------------------------------------------
   --or-deep est la declinaison reservee au texte : mesuree a
   4,53:1 sur blanc, donc AA. L'orange de fond (--or) aurait
   ete a 2,4:1 et illisible en corps de texte.
   Aucun jaune n'entre ici : #FBBC05 reste reserve aux etoiles
   d'avis Google.
   ---------------------------------------------------------- */
.or-t,
.faq__a b.or-t { color: var(--or-deep); font-weight: 900; }

/* ----------------------------------------------------------
   M29, 01/09/2026, demande A3 : LE SOUS-BLOC .rc-more N'EXISTE
   PLUS. Les trois cartes qu'il portait (Pro West Solar, Sud
   Solaire Expert, Solar Solution Invest) ont quitte l'accueil.
   Ses deux regles (.rc-more, .rc-more__t) n'etaient utilisees
   que la : elles partent avec le bloc. Le gabarit .pf, lui,
   sert toujours portfolio.html et n'est pas touche.
   ---------------------------------------------------------- */

/* ==========================================================
   BANDEAU COOKIES - M30, 02/09/2026, decision Jules (V3)
   ----------------------------------------------------------
   « Requis mais non encombrant » : le bandeau est une petite
   carte posee en bas A GAUCHE, pas une barre pleine largeur
   et surtout pas une modale. Trois raisons de le mettre a
   gauche : le bouton de chat occupe deja le bas droit, le
   CTA mobile occupe deja le bas pleine largeur, et une carte
   etroite se lit comme une notification plutot que comme un
   peage.
   Le plan est volontairement SOUS le chat (--z-float) : si
   le visiteur ouvre le formulaire, c'est le formulaire qui
   passe devant. Le bandeau ne dispute jamais un clic utile.
   Aucune couleur nouvelle : papier, ligne, encre, et l'orange
   de marque sur le seul bouton Accepter.
   ---------------------------------------------------------- */
.ckb {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: calc(var(--z-float) - 2);
  width: min(400px, calc(100vw - 36px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  /* Etat de depart : la carte est deja dans le document mais
     hors de vue. .is-in, pose au cadre suivant par
     cookies.js, joue la montee. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.ckb.is-in { opacity: 1; transform: none; }

.ckb__txt {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-norm);
  color: var(--ink-3);
}
.ckb__lnk {
  color: var(--or-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ckb__lnk:hover { color: var(--or-dark); }

.ckb__act {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ckb__b {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Les deux boutons ont le meme poids visuel : meme taille,
   meme graisse, meme rayon. Refuser n'est pas grise ni
   rapetisse pour pousser au clic sur Accepter. */
.ckb__b--no {
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.ckb__b--no:hover { background: var(--paper-3); border-color: var(--muted); }
.ckb__b--ok {
  background: var(--or);
  color: #fff;
  border: 1px solid var(--or);
}
.ckb__b--ok:hover { background: var(--or-dark); border-color: var(--or-dark); }
.ckb__b:focus-visible { outline: 2px solid var(--or-deep); outline-offset: 2px; }

@media (max-width: 767px) {
  /* Le CTA mobile (.mcta) est colle en bas a 18px et fait une
     cinquantaine de pixels de haut. Le bandeau passe au-dessus
     de lui, sinon il le recouvre et coute une prise de
     rendez-vous pour une question de cookies. */
  .ckb {
    left: 14px;
    right: 14px;
    bottom: 84px;
    width: auto;
  }
}

/* ============================================================
   PAGE MERCI - M30, 03/09/2026, mission SITE 3, volet 4.
   Une page a un seul ecran : la confirmation, le delai, et deux
   suites possibles. Elle ne reprend ni la barre de navigation ni
   le grand pied de page du site : a ce moment precis, le visiteur
   vient d'agir, on ne lui redonne pas vingt liens. Les liens
   utiles (accueil, pages legales) sont dans la carte.
   Aucune couleur, aucun rayon, aucune ombre nouvelle : tout vient
   des variables du design system.
   ============================================================ */
.merci {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 7vw, 5rem) 0;
  background: var(--paper-alt);
}
.merci__card {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.25rem);
}
.merci__brand { margin-bottom: 22px; }

/* La coche est dessinee, pas posee en image : une page de
   confirmation ne doit pas dependre d'un fichier a telecharger. */
.merci__ico {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  color: var(--or-deep);
}
.merci__ico svg { width: 30px; height: 30px; }

.merci h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  margin: 0;
}
.merci__lead {
  margin: 14px auto 0;
  max-width: 30rem;
  font-size: var(--fs-lg);
  color: var(--ink-3);
  line-height: var(--lh-norm);
  text-wrap: pretty;
}
.merci__lead b { color: var(--ink); font-weight: 900; }

.merci__next {
  margin: 26px auto 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: var(--fs-base);
}
.merci__cta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.merci__note {
  margin: 22px auto 0;
  max-width: 32rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-norm);
}
.merci__note a { color: var(--or-deep); font-weight: 700; }

/* ----------------------------------------------------------
   M31, 03/09/2026, point 3 : LA GRILLE DE LOGOS CLIENTS DE
   LA PAGE MERCI APRES RENDEZ-VOUS (/merci-rdv).
   ----------------------------------------------------------
   La carte est plus large que celle de /merci : dix logos ne
   tiennent pas dans 40 rem sans devenir illisibles.

   POURQUOI UNE HAUTEUR DE CASE ET NON UNE HAUTEUR D'IMAGE.
   Egaliser la hauteur des IMAGES ne suffit pas : a hauteur
   egale, un logo qui n'occupe que 40 % de son fichier parait
   deux fois plus petit que son voisin detoure. Les dix logos
   du parc n'ont pas le meme cadrage, et deux sont empiles
   (picto au-dessus du nom) la ou les autres sont en ligne.
   Chaque case porte donc une hauteur fixe, et l'image s'y
   inscrit en object-fit: contain : aucun logo n'est etire,
   aucun n'est rogne, et le plus grand cadre ne mange pas les
   autres. Le rendu se controle a l'oeil sur la capture, pas
   au nombre de pixels.
   ---------------------------------------------------------- */
.merci__card--large { max-width: 52rem; }

.merci__clients-t {
  margin: 30px auto 0;
  max-width: 30rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.merci__clients {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.merci__clients li {
  min-width: 0;
  display: grid;
  place-items: center;
  height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper);
}
/* LA HAUTEUR MAXIMALE EST EN PIXELS, PAS EN POURCENTAGE.
   Mesure faite sur la production le 03/09/2026 : dans une case de
   grille alignee par place-items:center, Chromium ne resout PAS un
   pourcentage de hauteur (la hauteur de la case est indefinie pour
   l item), et height:100% comme max-height:100% sont traites comme
   auto. Resultat a l ecran : le logo RR Energy sortait a 151 px de
   haut dans une case de 74 px et recouvrait le paragraphe suivant,
   pendant que les logos larges, eux, se comportaient bien. Le piege
   ne se voit donc que sur les logos hauts.
   54 px = 74 px de case moins les 2 x 10 px de retrait interne.
   Une valeur en pixels se resout toujours. */
.merci__clients img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 820px) {
  .merci__clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .merci__clients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .merci__clients li { height: 66px; }
  .merci__clients img { max-height: 46px; }   /* 66 - 2 x 10 */
}

.merci__foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.merci__foot nav { display: flex; flex-wrap: wrap; gap: 14px; }
.merci__foot a { color: var(--muted); }
.merci__foot a:hover { color: var(--or-deep); }
.merci__back { font-weight: 700; }

@media (max-width: 560px) {
  .merci__foot { justify-content: center; text-align: center; }
  .merci__cta .btn { width: 100%; }
}

/* ============================================================
   M31, 07/09/2026. LA PAGE METHODE, SIX ETAPES
   ------------------------------------------------------------
   Refonte demandee par Jules dans le Loom du 07/09 : la page
   Methode est le NIVEAU DE DETAIL du parcours client. Une etape
   du parcours, un bloc, dans l'ordre, sans jamais redire deux
   fois la meme chose.
   Structure constante de chaque bloc : surtitre « Etape N »,
   titre repris mot pour mot du parcours, deux a trois lignes de
   texte, puis le visuel. Rien entre les blocs.
   Tous les composants ci-dessous n'existent que sur cette page :
   les retirer ne touche aucune autre page.
   Aucune marque tierce n'est dessinee : les inserts CRM, agenda
   et formation sont des maquettes maison, sans logo, sans chiffre.
   ============================================================ */

/* ---------- 1. LA GRILLE D'AUDIT (etape 1) -----------------
   Etape 1 est la seule sans visuel : Jules la veut « juste du
   texte, un peu plus de details ». Elle prend donc toute la
   largeur et se lit comme un sommaire de ce que l'on regarde. */
.aud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.aud__i {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: clamp(16px, 1.8vw, 22px);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.aud__i:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.aud__k {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--or-deep);
}
.aud__i b { font-size: var(--fs-base); font-weight: 900; color: var(--ink); line-height: var(--lh-snug); }
.aud__i span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 1020px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .aud { grid-template-columns: 1fr; } }

/* ---------- 2. LE RAIL QUI DEFILE (etapes 2 et 3) ----------
   « Il faut qu'on les voie defiler un peu. » Defilement natif du
   navigateur, avec accroche par carte : la molette, le doigt, le
   clavier et les deux fleches font tous la meme chose, et la page
   reste lisible sans JavaScript.
   Les fleches disparaissent en bout de course. */
.rail {
  position: relative;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.rail__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 4px 4px 18px;
  margin-inline: -4px;
  /* Le rail a 4 px de rembourrage a gauche, pour ne pas rogner
     l'ombre de la premiere carte. Sans cette ligne, l'accroche se
     calerait sur le debut de la carte et le rail se reposerait a
     scrollLeft 4 : la fleche « precedent » resterait allumee au
     repos, alors que main.js l'eteint a 2 px pres. */
  scroll-padding-left: 4px;
}
.rail__track::-webkit-scrollbar { height: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.rail__track::-webkit-scrollbar-track { background: transparent; }
.rail__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}
/* Pages : format paysage, une page et demie visible a 1440 px,
   ce qui dit sans un mot qu'il y en a d'autres derriere. */
.rail__item--lp { width: min(30rem, 78vw); }
/* Publicites : format vertical 9/16. La largeur est choisie pour
   que les cinq creas DEPASSENT la largeur du rail a 1440 px :
   sans depassement il n'y aurait rien a faire defiler, et c'est
   le defilement qui est demande. */
.rail__item--v  { width: min(17rem, 62vw); }

.rail__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: opacity var(--t-base), border-color var(--t-base), background var(--t-base);
}
.rail__nav:hover { border-color: var(--or-line); background: var(--or-soft); }
.rail__nav[disabled] { opacity: 0; pointer-events: none; }
.rail__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail__nav--prev { left: -14px; }
.rail__nav--next { right: -14px; }
@media (max-width: 900px) { .rail__nav { display: none; } }

.rail__hint {
  margin-top: 2px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- 3. CE QUI SORT DU PARCOURS ---------------------
   Les pastilles arbitrees le 30/08 avec Jules : elles disaient
   ce qui sort du parcours et ce que les relances ramenent. Elles
   ne vivent plus dans un schema separe, elles sont posees dans
   l'etape ou la chose se produit. Aucune information perdue,
   aucune section de plus. */
.mout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}
.mout__c {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
}
.mout__c svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mout__c--back { border-color: var(--or-line); background: var(--or-soft); color: var(--or-deep); }

/* ---------- 4. L'INSERT CRM (etape 4) ----------------------
   « Un peu en mode style, une petite vignette ou tu peux passer
   ta souris. » Pipeline ultra simplifie, quatre colonnes, la
   largeur du site. Maquette maison : aucun logo d'outil, aucun
   montant. Les prenoms et les villes sont fictifs, et la page le
   dit en toutes lettres sous la maquette. */
.crm {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.crm__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.crm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.crm__bar span { margin-left: 6px; }
.crm__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
}
.crm__col { background: var(--paper-alt); padding: 16px 14px 20px; display: grid; gap: 10px; align-content: start; }
.crm__ct {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.crm__ct i { width: 9px; height: 9px; border-radius: 50%; background: var(--or-light); flex: 0 0 auto; }
.crm__col--2 .crm__ct i { background: var(--or); }
.crm__col--3 .crm__ct i { background: var(--or-dark); }
.crm__col--4 .crm__ct i { background: var(--or-deep); }
.crm__card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  display: grid;
  gap: 5px;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.crm__card:hover,
.crm__card:focus-within {
  border-color: var(--or-line);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  outline: none;
}
.crm__n { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.crm__m { font-size: var(--fs-xs); color: var(--muted); }
/* Le detail n'apparait qu'au survol ou au clavier : c'est la
   projection que Jules demande, sans alourdir la maquette. */
.crm__d {
  display: grid;
  gap: 3px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-base), opacity var(--t-base);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
}
.crm__card:hover .crm__d,
.crm__card:focus-within .crm__d { max-height: 8rem; opacity: 1; }
@media (max-width: 900px) { .crm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .crm__cols { grid-template-columns: 1fr; } }

/* ---------- 5. L'ENCART CHATBOT (etape 4) ------------------
   « Bien mettre en avant la partie AI, c'est important. » Angle
   assume : la relance continue quand vous ne travaillez pas. */
.bot {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2.5vw, 32px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--or-line);
  background: var(--or-soft);
}
.bot h3 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.bot__x > p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-base); line-height: 1.7; }
.bot__k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1.5px solid var(--or-line);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--or-deep);
  margin-bottom: 12px;
}
.bot__k svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bot__win {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: var(--sh-2);
}
.bot__msg {
  font-size: var(--fs-sm);
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: var(--r-md);
  max-width: 88%;
}
.bot__msg--in  { background: var(--paper-3); color: var(--ink-2); border-bottom-left-radius: 4px; }
.bot__msg--out { background: var(--grad-or-soft); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bot__t { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 860px) { .bot { grid-template-columns: 1fr; } }

/* ---------- 6. L'INSERT AGENDA (etape 5) -------------------
   Vue semaine, creneaux places, survol pour le detail. Maquette
   maison, sans marque ni logo d'aucun editeur d'agenda. */
.agd {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.agd__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.agd__ttl { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.agd__sub { font-size: var(--fs-xs); color: var(--muted); }
.agd__grid {
  display: grid;
  grid-template-columns: 3.5rem repeat(5, minmax(0, 1fr));
}
.agd__cell {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  min-height: 54px;
  padding: 5px;
}
.agd__h {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--muted-2);
  text-transform: uppercase;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
}
.agd__t {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
  background: var(--paper-alt);
}
.agd__ev {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  height: 100%;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: var(--grad-or-soft);
  color: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.agd__ev:hover, .agd__ev:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-or); outline: none; }
.agd__ev b { font-size: 11px; font-weight: 900; line-height: 1.25; }
.agd__ev span { font-size: 10px; opacity: .92; line-height: 1.25; }
.agd__ev i {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 14rem;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 3;
}
.agd__ev:hover i, .agd__ev:focus-visible i { opacity: 1; transform: translateX(-50%) translateY(0); }
.agd__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.agd__foot svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--or-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  /* Cinq jours sous 760 px donneraient des colonnes de 50 px : on
     garde les trois premiers. Les cases masquees le sont pour tout
     le monde, lecteurs d'ecran compris. */
  .agd__grid { grid-template-columns: 3rem repeat(3, minmax(0, 1fr)); }
  .agd__cell--d4, .agd__cell--d5 { display: none; }
}

/* ---------- 7. L'ESPACE DE FORMATION (bonus) ---------------
   « Un visuel un peu sympa, un peu appealing. » Maquette maison
   d'un espace de modules : aucun editeur tiers n'est represente. */
.frm {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.frm__win {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.frm__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.frm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.frm__bar span { margin-left: 6px; }
.frm__list { display: grid; }
.frm__mod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t-base);
}
.frm__mod:last-child { border-bottom: 0; }
.frm__mod:hover { background: var(--or-soft); }
.frm__pl {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--or-soft);
  color: var(--or-deep);
}
.frm__pl svg { width: 15px; height: 15px; fill: currentColor; }
.frm__mod > div { display: grid; gap: 2px; min-width: 0; }
.frm__mod b { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.frm__mod span { font-size: var(--fs-xs); color: var(--muted); }
.frm__side { display: grid; gap: 14px; align-content: start; }
.frm__pt {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.frm__pt svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--or-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.frm__pt div { display: grid; gap: 3px; }
.frm__pt b { font-size: var(--fs-base); font-weight: 900; color: var(--ink); }
.frm__pt span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 860px) { .frm { grid-template-columns: 1fr; } }

/* ---------- 8. LA MENTION SOUS UNE MAQUETTE ----------------
   Une maquette maison se declare comme telle, sous elle, en
   toutes lettres. Meme regle que les ossatures de landing pages :
   on ne laisse jamais croire a une capture. */
.mth__mock {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
}

/* ==========================================================
   M32, 08/09/2026 : LE PARCOURS A SIX CASES PASSE EN SERPENTIN
   ----------------------------------------------------------
   Demande : les six etapes se lisent en « snake ». Rang 1 de
   gauche a droite (1, 2, 3), une fleche descend a droite, rang 2
   dans la continuite (4, 5, Bonus).

   POURQUOI LE RANG 2 EST INVERSE, ET PAS RENDU AVEC UNE FLECHE
   DE RETOUR. Le brief laissait le choix. Le serpentin vrai est
   retenu pour trois raisons :
     1. l'etape 4 se retrouve juste SOUS l'etape 3 : le changement
        de ligne devient une simple descente, sans retour a la
        ligne a traverser. C'est le trajet le plus court possible
        entre deux etapes consecutives ;
     2. une fleche de retour serait la seule du schema a pointer
        vers la gauche tout en signifiant « on avance ». Elle
        dirait le contraire de ce que disent les cinq autres.
        C'est exactement l'ambiguite que le serpentin supprime ;
     3. l'oeil ne repart jamais de zero : il descend sur place.
   Le risque du serpentin (un lecteur qui balaye le rang 2 de
   gauche a droite par habitude lirait Bonus, 5, 4) est couvert :
   chaque carte porte son rang ECRIT, « Etape 4 », « Etape 5 »,
   « Bonus », et les fleches du rang 2 pointent vers la gauche.
   L'ORDRE DU CODE N'EST PAS TOUCHE : les cartes restent 1 a 6
   dans le HTML, seule la grille les replace. Lecteurs d'ecran et
   navigation au clavier suivent donc l'ordre des etapes.

   L'ECART GAP, ET POURQUOI IL DEPASSE + 30 %. La consigne chiffree
   etait « gap + 30 % », soit 14 px -> 18 px. Elle a ete essayee et
   rendue : dans une gouttiere de 18 px, la fleche fait 18 px de
   long sur des cartes de 380 px. Elle se lit comme un tiret, pas
   comme une fleche, et la courbe de changement de ligne ne peut
   pas exister du tout. Les deux consignes de la meme phrase se
   contredisent : « des fleches tres nettes et tres jolies » ne
   tient pas dans « + 30 % ». C'est la fleche qui est gardee, elle
   est le sujet de la demande ; l'espace va donc plus loin que
   + 30 %, jamais moins. Colonnes 40 px, rangs 52 px pour la
   courbe. Pour revenir a la lettre du brief, il suffit de
   remettre --flow-gap-x a 18px ci-dessous.
   ========================================================== */
.flow--snake {
  --flow-gap-x: 40px;   /* 18px pour la lettre du brief (+ 30 %) */
  --flow-gap-y: 52px;   /* loge la courbe de changement de ligne */
  column-gap: var(--flow-gap-x);
  row-gap: var(--flow-gap-y);
}

/* Le placement du serpentin. Rang 2 a l'envers : l'etape 4 tombe
   sous l'etape 3, et le rang se lit vers la gauche. */
.flow--snake > .flow__step:nth-child(1) { grid-area: 1 / 1; }
.flow--snake > .flow__step:nth-child(2) { grid-area: 1 / 2; }
.flow--snake > .flow__step:nth-child(3) { grid-area: 1 / 3; }
.flow--snake > .flow__step:nth-child(4) { grid-area: 2 / 3; }
.flow--snake > .flow__step:nth-child(5) { grid-area: 2 / 2; }
.flow--snake > .flow__step:nth-child(6) { grid-area: 2 / 1; }

/* L'ancien chevron CSS (.flow__step::after) est remplace par les
   fleches SVG. Il est neutralise ICI SEULEMENT : les autres
   listes .flow du site gardent le leur. */
.flow--snake > .flow__step::after { content: none; }

/* ---------- Le trait ----------
   Epaisseur fixee en pixels par vector-effect : une meme fleche
   rendue sur 18 px de large ou sur 52 px de haut garde exactement
   le meme trait. C'est ce qui la garde nette partout. */
.flow__arw {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  color: var(--or);
}
.flow__arw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flow__arw path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.flow__arw--turn .flow__arw-line { display: none; }

/* ---------- Le placement des fleches ----------
   Chaque fleche est ancree a SA carte et occupe la gouttiere
   voisine : elle reste centree sur la carte quelle que soit la
   largeur, sans aucun calcul en JS. */
.flow--snake > .flow__step:nth-child(1) > .flow__arw,
.flow--snake > .flow__step:nth-child(2) > .flow__arw {
  top: 50%;
  right: calc(var(--flow-gap-x) * -1);
  width: var(--flow-gap-x);
  height: calc(var(--flow-gap-x) * 16 / 34);
  transform: translateY(-50%);
}
/* Rang 2 : la fleche est prise a GAUCHE de la carte et retournee.
   L'etape 4 pointe vers l'etape 5, l'etape 5 vers le Bonus. */
.flow--snake > .flow__step:nth-child(4) > .flow__arw,
.flow--snake > .flow__step:nth-child(5) > .flow__arw {
  top: 50%;
  left: calc(var(--flow-gap-x) * -1);
  width: var(--flow-gap-x);
  height: calc(var(--flow-gap-x) * 16 / 34);
  transform: translateY(-50%) rotate(180deg);
}
/* Le changement de ligne, sous l'etape 3. */
.flow--snake > .flow__step:nth-child(3) > .flow__arw--turn {
  top: 100%;
  left: 50%;
  height: var(--flow-gap-y);
  width: calc(var(--flow-gap-y) * 24 / 56);
  transform: translateX(-50%);
}
.flow--snake > .flow__step:nth-child(6) > .flow__arw { display: none; }

/* ---------- Le trace au defilement ----------
   La fleche se dessine quand SA carte est revelee : elle arrive
   donc apres la carte de depart et avant celle d'arrivee, ce qui
   fait lire le schema dans l'ordre. pathLength n'est pas utilise :
   une longueur de tiret largement superieure a la plus longue des
   deux fleches (environ 60 unites) suffit et ne coute aucun
   calcul. */
.flow__arw path {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset .7s var(--ease-expo) .18s;
}
.flow__arw .flow__arw-head { transition-delay: .42s; }
.flow__step.rv.in > .flow__arw path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .flow__arw path { transition: none; stroke-dashoffset: 0; }
}

/* ---------- Deux colonnes ----------
   Le serpentin tient encore : 1 2 / 4 3 / 5 Bonus. Mais la
   descente ne tombe alors plus sous la meme carte a chaque rang,
   et il faudrait une courbe par rang. On revient donc a la grille
   simple, avec les memes fleches droites que le reste du site. */
@media (max-width: 1100px) {
  .flow--snake { --flow-gap-y: 32px; }
  .flow--snake > .flow__step:nth-child(n) { grid-area: auto; }
  .flow--snake > .flow__step:nth-child(4) > .flow__arw,
  .flow--snake > .flow__step:nth-child(5) > .flow__arw {
    left: auto;
    right: calc(var(--flow-gap-x) * -1);
    transform: translateY(-50%);
  }
  /* Fin de rang : la fleche pointerait dans le vide. */
  .flow--snake > .flow__step:nth-child(2n) > .flow__arw { display: none; }
  /* L'etape 3 reprend la fleche droite, comme les autres. */
  .flow--snake > .flow__step:nth-child(3) > .flow__arw--turn {
    top: 50%;
    left: auto;
    right: calc(var(--flow-gap-x) * -1);
    width: var(--flow-gap-x);
    height: calc(var(--flow-gap-x) * 16 / 34);
    transform: translateY(-50%);
  }
  .flow--snake .flow__arw--turn .flow__arw-curve { display: none; }
  .flow--snake .flow__arw--turn .flow__arw-line { display: block; }
}

/* ---------- Colonne unique (390 px) ----------
   Une courte fleche verticale entre chaque carte, meme trait,
   meme orange, meme trace au defilement. */
@media (max-width: 700px) {
  .flow--snake { --flow-gap-x: 18px; --flow-gap-y: 34px; }
  /* La fleche droite est pivotee d'un quart de tour. Le pivot est
     pris sur le coin haut-gauche, pose au milieu du bord bas de la
     carte : apres rotation, la fleche descend exactement de la
     hauteur de la gouttiere, sans jamais mordre sur les cartes.
     translateY(50%) la recentre sur son epaisseur. */
  .flow--snake > .flow__step:nth-child(1) > .flow__arw,
  .flow--snake > .flow__step:nth-child(2) > .flow__arw,
  .flow--snake > .flow__step:nth-child(3) > .flow__arw--turn,
  .flow--snake > .flow__step:nth-child(4) > .flow__arw,
  .flow--snake > .flow__step:nth-child(5) > .flow__arw {
    display: block;
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: var(--flow-gap-y);
    height: calc(var(--flow-gap-y) * 16 / 34);
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(50%);
  }
  .flow--snake > .flow__step:nth-child(6) > .flow__arw { display: none; }
}

/* ==========================================================
   M32, 08/09/2026 : LE LECTEUR DE LA VSL, ET SA BARRE
   ----------------------------------------------------------
   La facade cliquable est remplacee par un vrai <video>. Le
   cadre, la pastille orange et le badge « Wattlift en 2
   minutes » sont repris de .vfacade sans y toucher : le bloc
   ne change pas d'aspect tant que la video n'est pas lancee.
   ========================================================== */
.vsl {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--sh-2);
  isolation: isolate;
}
.vsl__v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}
/* Le bouton couvre la video. Transparent : ce qui se voit, c'est
   la pastille orange au centre, exactement comme avant. */
.vsl__btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(20,22,26,.05) 0%, rgba(20,22,26,.42) 100%);
  cursor: pointer;
  transition: background-color var(--t-base), opacity var(--t-base);
}
.vsl__btn:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }
.vsl .vplay { position: static; margin: 0; }
/* Le carre de pause, deux barres. Il ne sert que pendant la
   lecture, au survol : le reste du temps la video est nue. */
.vpause {
  display: none;
  width: 76px;
  height: 76px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .58);
  backdrop-filter: blur(6px);
  position: relative;
}
.vpause::before,
.vpause::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 26px;
  margin-top: -13px;
  border-radius: 2px;
  background: #fff;
}
.vpause::before { left: 50%; margin-left: -11px; }
.vpause::after  { left: 50%; margin-left: 5px; }

/* Pendant la lecture : plus de voile, plus de pastille, plus de
   badge. La pause n'apparait qu'au survol ou au focus clavier. */
.vsl.is-playing .vsl__btn { background: transparent; }
.vsl.is-playing .vplay,
.vsl.is-playing .vlabel { display: none; }
.vsl.is-playing .vpause { display: block; opacity: 0; transition: opacity var(--t-base); }
.vsl.is-playing .vsl__btn:hover .vpause,
.vsl.is-playing .vsl__btn:focus-visible .vpause { opacity: 1; }
/* Une fois la video demarree, le badge ne revient pas en pause :
   il annonce une duree, il n'a plus rien a dire ensuite. */
.vsl.is-started .vlabel { display: none; }

/* ---------- Son et plein ecran ----------
   Les commandes natives sont coupees (leur barre ferait doublon
   avec celle demandee sous la video) : ces deux boutons
   reprennent ce qu'elles portaient et qu'on ne peut pas perdre. */
.vsl__tools {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--t-base);
}
.vsl.is-started .vsl__tools { opacity: 0; }
.vsl.is-started:hover .vsl__tools,
.vsl__tools:focus-within { opacity: 1; }
.vsl__tool {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--t-base);
}
.vsl__tool:hover { background: var(--or); }
.vsl__tool:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.vsl__tool svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vsl__tool .vsl__ico-off { display: none; }
.vsl__tool[aria-pressed="true"] .vsl__ico-on { display: none; }
.vsl__tool[aria-pressed="true"] .vsl__ico-off { display: block; }

/* ==========================================================
   LA BARRE DE PROGRESSION
   ----------------------------------------------------------
   Fine (4 px), orange sur fond clair, collee sous la video.
   Sa zone cliquable fait 20 px de haut (::before) : on la
   saisit au doigt sans l'epaissir a l'oeil.
   ========================================================== */
.vsl__bar {
  position: relative;
  margin: 10px 0 0;
  height: 4px;
  border-radius: 999px;
  background: var(--paper-3, #EFEDE9);
  cursor: pointer;
  touch-action: none;
}
.vsl__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}
.vsl__bar:focus-visible { outline: 3px solid var(--or); outline-offset: 6px; }
.vsl__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--or);
  /* Aucune transition : la barre doit coller a la lecture, pas la
     poursuivre. Le lissage vient de requestAnimationFrame. */
}
.vsl__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 1px 4px rgba(20, 22, 26, .28);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.vsl__bar:hover .vsl__knob,
.vsl__bar:focus-visible .vsl__knob,
.vsl__bar.is-grab .vsl__knob { opacity: 1; }

/* ---------- La bride en hauteur du bloc d'accueil ----------
   Reprise telle quelle de .hero__video .vfacade : la video est
   bornee par la hauteur de fenetre pour que la pastille de
   lecture reste atteignable sans le moindre defilement, en
   1440x900 comme en 390x844. La barre est bornee pareil, sinon
   elle deborderait la video quand la fenetre est basse.
   --hero-above passe de 356 a 436 px. La valeur est MESUREE, pas
   estimee : en 1440x900 la barre finissait 61 px sous la ligne de
   flottaison, et une barre de progression qu'il faut aller
   chercher au defilement pendant qu'on regarde la video ne sert a
   rien. 372 + 61, arrondi a 436, met le bas de la barre juste
   au-dessus du pli. La video passe de 939 a 825 px de large en
   1440 : c'est le prix, et il est paye volontairement. */
.hero__video { --hero-above: 436px; }
.hero__video .vsl,
.hero__video .vsl__bar {
  max-width: min(100%, calc((100svh - var(--hero-above)) * 16 / 9));
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .vsl__btn, .vsl__tools, .vsl__tool, .vsl__knob, .vsl.is-playing .vpause { transition: none; }
}

@media (max-width: 767px) {
  .hero__video { --hero-above: 352px; }
  .vsl .vplay, .vpause { width: 62px; height: 62px; }
  .vpause::before, .vpause::after { height: 22px; margin-top: -11px; }
  /* Le bloc video va d'un bord a l'autre en mobile : la barre, elle,
     reste dans la gouttiere du texte, sinon elle touche l'ecran. */
  .hero__video .vsl { border-radius: 0; }
  .hero__video .vsl__bar { margin-inline: var(--pad); }
  .vsl__tools { right: 10px; bottom: 10px; }
}