/* Logicloop Studio, site vitrine. Les valeurs de marque viennent de charte.css (tokens et
   composants lls-) ; ce fichier ne fait que la mise en page du site. */

:root { --gutter: clamp(20px, 5.1vw, 96px); --content: 1440px; }

/* les hauteurs qui servent de décalage aux éléments collants tombent sur des pixels entiers : sinon le navigateur
   arrondit leur position à chaque image et ils tremblent au défilement */
:root { --nav-h: round(clamp(68px, 5.6vw, 84px), 1px); --logos-h: round(clamp(72px, 5.9vw, 90px), 1px); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); -webkit-text-size-adjust: 100%; }
body { font: var(--type-body-md); font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: 20; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font: var(--type-button-md); }
.skip:focus { top: var(--space-md); }

.band { position: relative; background: var(--bg); color: var(--ink); }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(var(--space-4xl), 8.4vw, var(--space-section)); }
.icon { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-arrow-right { --i: url("../assets/icons/arrow-right.svg"); }
.i-arrow-down { --i: url("../assets/icons/arrow-down.svg"); }
.i-arrow-up-right { --i: url("../assets/icons/arrow-up-right.svg"); }
.i-plus { --i: url("../assets/icons/plus.svg"); }
.i-x { --i: url("../assets/icons/x.svg"); }
.i-list { --i: url("../assets/icons/list.svg"); }


/* titres de section : libellé indexé, titre, chapô */
.head { display: flex; flex-direction: column; gap: var(--space-md); max-width: 900px; }
.head h2 { font: var(--type-display-md); font-size: clamp(34px, 3.6vw, 60px); line-height: 1; letter-spacing: var(--type-display-md-ls); text-wrap: balance; }
.head .lede { max-width: 620px; margin-top: var(--space-xs); font: var(--type-body-lg); color: var(--ink-muted); text-wrap: pretty; }
.kw { color: var(--accent-text); }
.eyebrow { display: flex; gap: 12px; font: 400 clamp(15px, 1.25vw, 19px)/1.2 var(--font-mono); letter-spacing: 0.01em; color: var(--ink-subtle); }
.case__head .eyebrow { font-size: clamp(16px, 1.35vw, 20px); color: var(--ink); }
[data-theme="dark"] .eyebrow { color: var(--ink); }
.eyebrow b { font-weight: 400; color: var(--accent-text); white-space: nowrap; }

/* après un défilement, les survols attendent un vrai mouvement de souris (html.no-hover, posé par le script) :
   sinon le navigateur les applique d'un coup sous le curseur à l'arrêt de l'inertie, ce qui se lit comme un à-coup */
/* --- barre de navigation ---------------------------------------------------------------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--nav-h); }
.nav .lls-logo { width: clamp(104px, 8.6vw, 136px); }
/* barre fixe : transparente sur le hero, fond plein dès qu'on défile ; le rendez-vous reste à portée */
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid transparent; background-color: transparent; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.topbar.is-solid { border-bottom-color: var(--line); background-color: var(--bg); }
.hero { padding-top: var(--nav-h); }
.nav__links { display: flex; align-items: center; gap: 0; font: 400 clamp(13px, 0.98vw, 15px)/1 var(--font-mono); letter-spacing: 0.02em; }
.nav__links li { display: flex; align-items: center; }
.nav__links li + li::before { content: "·"; margin: 0 clamp(16px, 1.8vw, 28px); color: var(--ink-faint); }
.nav__links a { color: var(--ink-muted); text-decoration: none; transition: color var(--duration-instant) var(--ease-out); }
html:not(.no-hover) .nav__links a:hover, .nav__links a[aria-current] { color: var(--accent-text); }
.nav__cta { height: 46px; font-size: 15px; gap: var(--space-lg); }
.nav__menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--edge-surface); cursor: pointer; }
.nav__menu .icon { width: 20px; height: 20px; }
.menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--space-2xl); padding: 20px var(--gutter) var(--space-2xl); background: var(--bg); }
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu ol { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu ol a { display: flex; gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0; font: var(--type-heading-lg); letter-spacing: var(--type-heading-lg-ls); text-decoration: none; }
.menu ol a span { font: var(--type-mono-label); color: var(--accent-text); }

/* --- hero ------------------------------------------------------------------------------------ */
.hero { overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 100% 100%, var(--bg-clear) 0%, var(--bg-clear) 22%, var(--bg) 80%), radial-gradient(circle at 1.5px 1.5px, var(--texture-dot) 1.1px, transparent 1.8px) 0 0 / 24px 24px; opacity: 0.55; pointer-events: none; }
.hero > .wrap { position: relative; }
/* matrice vivante : un canvas dessine la trame sous le texte (sa taille d'affichage est fixée, sinon il prend sa taille
   en pixels physiques sur écran Retina) */
.hero__fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
.fx-aimant .hero::before { opacity: 0; }
/* hero ample (par défaut à partir de 1024 px ; ?hero=compact pour comparer) : le hero et la bande de logos remplissent
   le premier écran, le titre et le sommaire prennent l'échelle de l'affiche */
@media (min-width: 1024px) {
  html:not(.hero-compact) .hero { box-sizing: border-box; display: flex; flex-direction: column; min-height: 100svh; }
  html:not(.hero-compact) .hero > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  html:not(.hero-compact) .hero__body { align-items: center; padding-block: clamp(32px, 4vh, 56px); }
  html:not(.hero-compact) .hero__title { font-size: clamp(44px, 6.3vw, 100px); }
  html:not(.hero-compact) .hero__lede { margin-top: clamp(18px, 1.6vw, 28px); font-size: clamp(18px, 1.65vw, 27px); }
  html:not(.hero-compact) .hero__cta { margin-top: clamp(22px, 2vw, 34px); }
  /* la méthode passe en bande horizontale au pied du hero : cinq colonnes, de l'audit au suivi ; le titre prend la largeur */
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .hero__body { flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: clamp(32px, 5vh, 64px); padding-block: clamp(24px, 4vh, 48px) 0; }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .hero__body > div { align-self: center; }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .hero__title { font-size: clamp(46px, 8vw, 132px); }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-left: 0; border-top: 1px solid var(--toc-line); }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc li + li { border-top: 0; border-left: 1px solid var(--toc-line); }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; row-gap: 14px; min-height: 0; padding: clamp(18px, 2.4vh, 28px) clamp(16px, 1.4vw, 24px) clamp(20px, 2.8vh, 32px); }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc li:first-child a { padding-left: 0; }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc li:last-child a { padding-right: 0; }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc__i { grid-column: 1; grid-row: 1; }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc__n { grid-column: 1; grid-row: 2; font-size: clamp(20px, 1.9vw, 30px); }
  html:not(.hero-compact):not(.hero-sans):not(.methode-alt) .toc .icon { grid-column: 2; grid-row: 2; }
  /* pistes ?methode=boucle et ?methode=circuit : la méthode est dessinée dans la matrice (canvas) ; les cinq liens sont
     posés par le script sur les nœuds du tracé, le titre garde la colonne de gauche */
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .hero__body,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .hero__body,
  html.methode-flottant:not(.hero-compact):not(.hero-sans) .hero__body { flex: 1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-block: clamp(32px, 4vh, 56px); }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .hero__title,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .hero__title,
  html.methode-flottant:not(.hero-compact):not(.hero-sans) .hero__title { font-size: clamp(46px, 6.6vw, 104px); }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .hero__body > nav,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .hero__body > nav { position: absolute; inset: 0; pointer-events: none; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc { position: static; margin: 0; padding: 0; border: 0; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc li,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc li { position: absolute; border: 0; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc li:not([data-side]),
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc li:not([data-side]) { visibility: hidden; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc a,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 0; padding: 6px 0; white-space: nowrap; pointer-events: auto; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc .icon,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc .icon { display: none; }
  html.methode-boucle:not(.hero-compact):not(.hero-sans) .toc__n,
  html.methode-circuit:not(.hero-compact):not(.hero-sans) .toc__n { font-size: clamp(18px, 1.6vw, 26px); }
  html.methode-boucle .toc li[data-side="right"], html.methode-circuit .toc li[data-side="right"] { translate: 18px -50%; }
  html.methode-boucle .toc li[data-side="left"] { translate: calc(-100% - 18px) -50%; }
  html.methode-boucle .toc li[data-side="top"] { translate: -50% calc(-100% - 12px); }

  /* piste ?methode=fil : la méthode devient une ligne compacte entre le chapô et le bouton */
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__body { flex: 1; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(32px, 4vh, 56px); }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__body > div { display: contents; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__title { font-size: clamp(46px, 8vw, 132px); }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__lede { order: 1; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__body > nav { order: 2; margin-top: clamp(22px, 3vh, 34px); }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .hero__cta { order: 3; justify-self: start; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin: 0; padding: 0; border: 0; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc li { display: flex; align-items: center; border: 0; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc li + li::before { content: ""; width: clamp(20px, 2.2vw, 36px); height: 1px; margin-inline: 14px; background: var(--toc-line); }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 0; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc .icon { display: none; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc__i { font-size: 13px; }
  html.methode-fil:not(.hero-compact):not(.hero-sans) .toc__n { font-size: clamp(18px, 1.5vw, 24px); }

  /* piste ?methode=flottant : le sommaire flotte au milieu à droite, sans fond ; la matrice s'éclaire derrière lui (script) */
  html.methode-flottant:not(.hero-compact):not(.hero-sans) .hero__body > nav { justify-self: end; width: min(100%, 420px); padding: 10px clamp(18px, 1.8vw, 26px); }
  html.methode-flottant:not(.hero-compact):not(.hero-sans) .toc { --toc-line: rgba(255, 255, 255, 0.18); margin: 0; padding: 0; border: 0; }
  html.flot-c.methode-flottant:not(.hero-compact):not(.hero-sans) .toc { --toc-line: transparent; }

  /* variante ?methode=coin : la méthode garde sa taille compacte, posée en bas à droite sur la bande de logos ;
     le titre se centre à gauche */
  html.methode-coin:not(.hero-compact):not(.hero-sans) .hero__body { flex: 1; align-items: stretch; padding-block: 0; }
  html.methode-coin:not(.hero-compact):not(.hero-sans) .hero__body > div { align-self: center; padding-block: clamp(32px, 4vh, 56px); }
  html.methode-coin:not(.hero-compact):not(.hero-sans) .hero__body > nav { align-self: end; }
  html.methode-coin:not(.hero-compact):not(.hero-sans) .toc { margin-top: 0; padding-top: clamp(12px, 2vh, 24px); }
  html.hero-sans:not(.hero-compact) .hero__title { font-size: clamp(48px, 7.4vw, 124px); }
}

/* version sans sommaire (?hero=sans) : le titre prend la largeur, la lumière occupe la droite */
.hero-sans .hero .toc { display: none; }
.hero-sans .hero__body { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(56px, 5vw, 88px); }
.hero-sans .hero__title { font-size: clamp(46px, 7.6vw, 132px); }
.hero-sans .hero__lede { max-width: 34ch; }
.hero__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr); gap: var(--space-2xl); align-items: start; padding: clamp(32px, 1.9vw, 36px) 0 clamp(36px, 2.4vw, 44px); }
.hero__title { display: flex; flex-direction: column; align-items: flex-start; font: 700 clamp(46px, 5.55vw, 96px)/0.89 var(--font-sans); letter-spacing: -0.055em; }
.hero__title .line { display: block; }
.hero__title .hl { display: inline-block; white-space: nowrap; margin: 0.06em 0 0 -0.08em; padding: 0.01em 0.08em 0.1em; border-radius: var(--radius-md); background: var(--accent); box-shadow: var(--edge-accent); color: var(--on-accent); }
.hero__lede { max-width: 30ch; margin-top: clamp(14px, 1vw, 18px); font: 400 clamp(18px, 1.45vw, 24px)/1.36 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.hero__cta { margin-top: clamp(18px, 1.3vw, 24px); height: clamp(48px, 3.4vw, 54px); padding-left: 24px; font-size: clamp(15px, 1.12vw, 17px); gap: var(--space-xl); }
.hero__cta .lls-btn__action { width: 38px; height: 38px; }
/* le carré de la flèche garde sa taille quel que soit l'espace laissé au bouton */
.lls-btn__action { flex: none; }
.toc { --toc-line: rgba(255, 255, 255, 0.34); position: relative; padding-left: clamp(24px, 2.3vw, 36px); border-left: 1px solid var(--toc-line); margin-top: -6px; }
.toc li + li { border-top: 1px solid var(--toc-line); }
.toc a { display: grid; grid-template-columns: clamp(64px, 6.3vw, 98px) minmax(0, 1fr) auto; align-items: center; min-height: clamp(54px, 4.8vw, 75px); text-decoration: none; transition: color var(--duration-instant) var(--ease-out); }
.toc__i { font: 400 clamp(14px, 1.2vw, 19px)/1 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-subtle); transition: color var(--duration-instant) var(--ease-out); }
.toc__n { font: 600 clamp(20px, 1.85vw, 29px)/1 var(--font-sans); letter-spacing: -0.035em; }
.toc .icon { width: 20px; height: 20px; color: var(--ink); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-instant) var(--ease-out); }
html:not(.no-hover) .toc a:hover .toc__i, html:not(.no-hover) .toc a:hover .icon { color: var(--accent-text); }

/* --- bande de logos ------------------------------------------------------------------------- */
.logos { border-block: 1px solid var(--line); background: var(--surface); }
.logos__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 1.8vw, 28px); min-height: var(--logos-h); }
.logos__label { max-width: 16ch; padding-right: clamp(20px, 1.8vw, 28px); border-right: 1px solid var(--line-strong); font: var(--type-mono-label); letter-spacing: var(--type-mono-label-ls); color: var(--ink-subtle); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; animation: defile 46s linear infinite; }
html:not(.no-hover) .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; gap: clamp(40px, 4vw, 64px); padding-right: clamp(40px, 4vw, 64px); }
.logo-client { display: flex; align-items: center; height: 28px; white-space: nowrap; font: 600 clamp(19px, 1.55vw, 24px)/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink-muted); }
.logo-client img { height: 28px; width: auto; }
.logo-client img[src$="the-spray-spa.webp"] { height: 22px; filter: brightness(0); } /* seul logo officiel disponible : blanc ; passé en noir sur fond clair */
@keyframes defile { to { transform: translateX(-50%); } }
.badge { display: inline-flex; flex-direction: column; justify-content: center; padding: 6px 0 6px clamp(20px, 1.8vw, 28px); border-left: 1px solid var(--line-strong); font: 400 12px/1.35 var(--font-mono); color: var(--ink-subtle); text-decoration: none; }
.badge b { font-weight: 400; color: var(--ink); }
.badge span { display: block; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }

/* --- offre ----------------------------------------------------------------------------------- */
.offre { padding-top: clamp(28px, 2.5vw, 40px); }
.offre__title { margin-bottom: 20px; }
.offre__group { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); gap: var(--space-2xl); }
.offre__group + .offre__group { margin-top: clamp(var(--space-2xl), 3vw, var(--space-3xl)); }
.offre__label { position: relative; }
.offre__label h3 { position: sticky; top: calc(var(--nav-h) + var(--space-md)); display: inline-block; margin-top: 6px; padding: 0.02em 0.14em 0.1em; border-radius: var(--radius-md); background: var(--accent); box-shadow: var(--edge-accent); font: 700 clamp(40px, 4.4vw, 74px)/1 var(--font-sans); letter-spacing: -0.055em; color: var(--on-accent); }
/* cartes empilées : chaque brique colle sous les titres des précédentes, la suivante la recouvre */
.stack { --head: round(clamp(54px, 4vw, 62px), 1px); --top: calc(var(--nav-h) + var(--space-md)); --card: round(clamp(176px, 12.5vw, 196px), 1px); }
/* la pile se libère d'un bloc à la fin du groupe : chaque carte porte sous elle une marge qui aligne les bas,
   et la suivante la reprend en marge négative, si bien que le flux reste compact */
.stack { display: flex; flex-direction: column; }
.svc + .svc { margin-top: calc((var(--i) - var(--n)) * var(--head)); }
/* temps d'arrêt en fin de groupe : la dernière carte se pose sur la pile, la pile complète tient un moment, puis repart */
.stack::after { content: ""; flex: none; height: clamp(32px, 6vh, 64px); }
.svc { position: sticky; top: calc(var(--top) + var(--i) * var(--head)); min-height: var(--card); margin-bottom: calc((var(--n) - 1 - var(--i)) * var(--head)); border-top: 1px solid var(--line-strong); background: var(--bg); }
.svc__head button { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: 100%; min-height: var(--head); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.svc__t { font: 700 clamp(24px, 2.5vw, 40px)/1 var(--font-sans); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.svc__head button:disabled { cursor: default; color: inherit; opacity: 1; }
.svc__body { display: flex; flex-direction: column; gap: 6px; padding: 0 0 var(--space-lg); }
.svc__body > p { max-width: 60ch; font: 400 17px/1.4 var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.svc__tech { font: var(--type-mono-caption); color: var(--ink-subtle); }
.svc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-xl); margin-top: 4px; }
.svc__tools { font: var(--type-mono-label); letter-spacing: var(--type-mono-label-ls); color: var(--ink-subtle); }
.svc__more { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ink-subtle); font: 400 13px/1 var(--font-mono); color: var(--ink); text-decoration: none; white-space: nowrap; transition: border-color var(--duration-instant) var(--ease-out); }
.svc__more .icon { width: 13px; height: 13px; transition: transform var(--duration-instant) var(--ease-out); }
html:not(.no-hover) .svc__more:hover { border-color: var(--ink); }
.svc__stat { font: var(--type-mono-label); color: var(--ink-muted); white-space: nowrap; }
.svc__stat b { margin-right: 6px; font: 600 22px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); }
.case.is-target { border-color: var(--accent); }

/* --- méthode --------------------------------------------------------------------------------- */
.methode__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--space-2xl), 5vw, var(--space-5xl)); align-items: start; }
.methode .head { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
/* le fil : une ligne continue relie les étapes, se remplit au défilement et finit en boucle ;
   le libellé posé dessus dit ce qui accompagne toutes les étapes */
.flow { --rail: 44px; --p: 1; position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.flow__rail { grid-column: 1; grid-row: 1; position: relative; }
.flow__rail::before, .flow__fill { content: ""; position: absolute; left: calc(50% - 1px); top: calc(var(--space-xl) + 12px); width: 2px; border-radius: var(--radius-full); }
.flow__rail::before { bottom: 0; background: var(--line-strong); }
.flow__fill { height: calc(var(--p) * (100% - var(--space-xl) - 14px)); background: var(--accent); box-shadow: 0 0 12px rgba(233, 255, 3, 0.35); }
.flow__fill::after { content: ""; position: absolute; opacity: clamp(0, calc(var(--p) * 30 - 0.5), 1); left: -4px; bottom: 0; width: 10px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.flow .step summary { padding-block: var(--space-xl); }
.flow__steps { grid-column: 2; grid-row: 1; }
.flow__steps > li { position: relative; }
.flow__steps > li::before { content: ""; box-sizing: border-box; position: absolute; left: calc(var(--rail) / -2 - 9px); top: calc(var(--space-xl) + 3px); width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.flow__steps > li.is-reached::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(233, 255, 3, 0.12); }
.flow .step:last-child { border-bottom: 0; }
.flow__steps > li:last-child .step { border-bottom: 1px solid var(--line); }
.step { border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step summary { display: grid; grid-template-columns: clamp(52px, 5vw, 72px) minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: var(--space-lg) 0; list-style: none; cursor: pointer; }
.step summary::-webkit-details-marker { display: none; }
.step__i { padding-top: 6px; font: var(--type-mono-label); color: var(--accent-text); }
.step__t { display: block; transition: transform var(--duration-fast) var(--ease-out); font: 600 clamp(22px, 1.9vw, 30px)/1.15 var(--font-sans); letter-spacing: -0.025em; }
.step__s { display: block; margin-top: 6px; font: var(--type-body-sm); color: var(--ink-muted); }
.step summary .icon { width: 20px; height: 20px; margin-top: 6px; color: var(--ink-subtle); transition: transform var(--duration-base) var(--ease-out), color var(--duration-instant) var(--ease-out); }
.step[open] summary .icon { transform: rotate(45deg); color: var(--accent-text); }
html:not(.no-hover) .step summary:hover .icon, html:not(.no-hover) .faq .lls-accordion summary:hover .icon { color: var(--accent-text); }
.step__body { display: grid; grid-template-columns: clamp(52px, 5vw, 72px) minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-xl); }
.step__body ul { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.step__body li { display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--raised); box-shadow: var(--edge-surface); font: var(--type-mono-label); color: var(--ink-muted); }
.step__body p { grid-column: 2; max-width: 56ch; margin-bottom: var(--space-md); font: var(--type-body-md); color: var(--ink-muted); }

/* --- cas clients ------------------------------------------------------------------------------ */
.cas { border-top: 1px solid var(--line); }
.cases__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: clamp(var(--space-2xl), 4vw, var(--space-4xl)); }
.cases__count { font: var(--type-mono-label); letter-spacing: var(--type-mono-label-ls); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.cases__count span:first-child { color: var(--ink); }
.cases__nav { display: flex; gap: var(--space-xs); }
.cases__btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--raised); box-shadow: var(--edge-surface); color: var(--ink); cursor: pointer; transition: background-color var(--duration-instant) var(--ease-out), opacity var(--duration-instant) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.cases__btn:first-child .icon { transform: rotate(180deg); }
.cases__btn:disabled { opacity: 0.35; cursor: default; }
.cases__btn:active:enabled { transform: scale(0.97); }
/* carrousel : deux cas par vue, défilement libre au geste ; les flèches calent les cartes */
.cases { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--space-lg)) / 2); gap: var(--space-lg); margin-top: var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.cases::-webkit-scrollbar { display: none; }
/* sous les cas : une jauge dit où l'on est dans la rangée */
.cases__scroll { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-lg); }
.cases__track { position: relative; flex: 1; height: 1px; background: var(--line-strong); }
.cases__thumb { position: absolute; inset: -1px auto -1px 0; border-radius: var(--radius-full); width: calc(var(--view, 0.5) * 100%); background: var(--ink-muted); transform: translateX(calc(var(--pos, 0) * (1 / var(--view, 0.5) - 1) * 100%)); }
.cases:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.case { position: relative; display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xl) clamp(var(--space-lg), 2.4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--edge-surface); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.case:active { transform: scale(0.99); }
.case__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--line); }
.case__head .icon { color: var(--ink-subtle); transition: color var(--duration-instant) var(--ease-out); }
.case:has(.case__open:focus-visible) .case__head .icon { color: var(--accent-text); }
.case__num { font: var(--type-display-lg); font-size: clamp(52px, 4.9vw, 78px); letter-spacing: var(--type-display-lg-ls); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.case__unit { display: block; margin-top: 8px; font: var(--type-heading-md); letter-spacing: var(--type-heading-md-ls); }
.case__text { max-width: 44ch; margin-top: var(--space-md); font: var(--type-body-md); color: var(--ink-muted); text-wrap: pretty; }
.case__foot { display: flex; flex-direction: column; gap: var(--space-md); margin-top: auto; }
/* étapes menées : une échelle de cinq segments, le nom sous chacun ; dans une carte étroite, une ligne par étape */
.case__foot, .sheet section > div { container-type: inline-size; }
.chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.chain li { display: flex; flex-direction: column; gap: 8px; min-width: 0; font: var(--type-mono-caption); color: var(--ink-subtle); }
.chain li::before { content: ""; height: 4px; border-radius: var(--radius-full); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chain li.on { color: var(--ink); }
.chain li.on::before { background: var(--accent); box-shadow: var(--edge-accent); }
@container (max-width: 450px) {
  .chain { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .chain li { flex-direction: row; align-items: center; gap: 12px; }
  .chain li::before { flex: none; width: 32px; }
}
.chain__label { font: var(--type-mono-caption); color: var(--ink-subtle); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.case__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: none; border: 0; cursor: pointer; }
.case__open:focus-visible { outline-offset: -2px; }

/* --- fiches des cas (modales) ----------------------------------------------------------------- */
dialog.sheet { box-sizing: border-box; width: min(760px, calc(100vw - 2 * var(--space-md))); max-height: calc(100dvh - 2 * var(--space-md)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--edge-surface); color: var(--ink); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
dialog.sheet::-webkit-scrollbar { display: none; }
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet[open] { animation: monte var(--duration-base) var(--ease-out); }
dialog.sheet[open]::backdrop { animation: fondu var(--duration-base) var(--ease-out); }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
@keyframes fondu { from { opacity: 0; } }
/* là où la fiche peut rester dans la couche du dessus pendant sa sortie, elle repart en fondu, plus vite qu'elle n'entre */
@supports (overlay: auto) {
  dialog.sheet, dialog.sheet::backdrop { transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; }
  dialog.sheet { opacity: 0; transform: translateY(4px); }
  dialog.sheet::backdrop { opacity: 0; }
  dialog.sheet[open], dialog.sheet[open]::backdrop { animation: none; opacity: 1; transform: none; transition-duration: var(--duration-base); }
  @starting-style {
    dialog.sheet[open] { opacity: 0; transform: translateY(8px); }
    dialog.sheet[open]::backdrop { opacity: 0; }
  }
}
.sheet__in { display: flex; flex-direction: column; gap: var(--space-xl); padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.sheet__close { position: sticky; top: var(--space-md); float: right; margin: var(--space-md) var(--space-md) 0 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--raised); box-shadow: var(--edge-surface); color: var(--ink-muted); cursor: pointer; }
html:not(.no-hover) .sheet__close:hover { background: var(--raised-hover); color: var(--ink); }
.nav__menu, .sheet__close { transition: transform var(--duration-instant) var(--ease-out); }
.nav__menu:active, .sheet__close:active { transform: scale(0.97); }
.sheet h2 { font: var(--type-heading-lg); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: var(--type-heading-lg-ls); text-wrap: balance; }
.sheet__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-block: var(--space-lg); border-block: 1px solid var(--line); }
.sheet__fig b { font: var(--type-display-md); letter-spacing: var(--type-display-md-ls); font-variant-numeric: tabular-nums; color: var(--accent-text); white-space: nowrap; }
.sheet__fig span { font: var(--type-body-md); color: var(--ink-muted); }
.sheet section { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-md); }
.sheet section h3 { font: var(--type-mono-label); color: var(--ink-subtle); padding-top: 3px; }
.sheet section p, .sheet section li { font: var(--type-body-md); color: var(--ink-muted); text-wrap: pretty; }
.sheet section p + p { margin-top: var(--space-sm); }
.sheet section ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.sheet section li { padding-left: 18px; position: relative; }
.sheet section li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.sheet .chain { margin-top: 2px; }
/* dans la fiche, l'échelle ne prend pas le style des listes à puces */
.sheet section .chain li { position: static; padding-left: 0; font: var(--type-mono-caption); color: var(--ink-subtle); }
.sheet section .chain li.on { color: var(--ink); }
.sheet section .chain li::before { position: static; width: auto; height: 4px; border-radius: var(--radius-full); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sheet section .chain li.on::before { background: var(--accent); box-shadow: var(--edge-accent); }
@container (max-width: 450px) { .sheet section .chain li::before { width: 32px; } }
.sheet__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.sheet__cta p { font: var(--type-body-sm); color: var(--ink-muted); }

/* --- témoignages -------------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: clamp(var(--space-2xl), 4vw, var(--space-4xl)); }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.quote--lead { grid-row: span 1; }
.quote blockquote p { font: var(--type-body-lg); color: var(--ink); text-wrap: pretty; }
.quote blockquote p + p { margin-top: var(--space-sm); }

.quote figcaption { display: flex; align-items: center; gap: 12px; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--raised); }
.quote figcaption b { display: block; font: var(--type-title); }
.quote figcaption span { display: block; font: var(--type-mono-label); color: var(--ink-subtle); }
.quote__lang { font: var(--type-mono-caption); color: var(--ink-subtle); }

/* --- équipe ------------------------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: clamp(var(--space-2xl), 4vw, var(--space-4xl)); }
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius-lg); background: var(--raised); }
.person h3 { font: var(--type-heading-lg); letter-spacing: var(--type-heading-lg-ls); }
.person__role { margin-top: 6px; font: var(--type-mono-label); color: var(--ink-subtle); }
.person p { margin-top: var(--space-md); font: var(--type-body-md); color: var(--ink-muted); text-wrap: pretty; }

/* --- faq ------------------------------------------------------------------------------------------ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(var(--space-2xl), 5vw, var(--space-5xl)); align-items: start; }
.faq .lls-accordion summary { padding-block: 22px; }
.faq .lls-accordion summary .icon { width: 20px; height: 20px; flex: none; color: var(--ink-subtle); transition: transform var(--duration-base) var(--ease-out), color var(--duration-instant) var(--ease-out); }
.faq .lls-accordion[open] summary .icon { transform: rotate(45deg); color: var(--ink); }
.faq .lls-accordion p { padding-right: var(--space-2xl); }

/* --- appel final et pied de page ------------------------------------------------------------------- */
.final { overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 95% at 100% 100%, var(--bg-clear) 0%, var(--bg-clear) 18%, var(--bg) 78%), radial-gradient(circle at 1.5px 1.5px, var(--texture-dot) 1.1px, transparent 1.8px) 0 0 / 24px 24px; pointer-events: none; }
.final .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.final h2 { font: 700 clamp(44px, 6vw, 92px)/0.96 var(--font-sans); letter-spacing: -0.055em; text-wrap: balance; }
.final__side { display: flex; flex-direction: column; gap: var(--space-lg); }
.final__side p { font: var(--type-body-lg); color: var(--ink-muted); text-wrap: pretty; }
.final__side .lls-btn { width: 100%; }
.footer { border-top: 1px solid var(--line); }
.footer__in { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--space-xl); padding-block: var(--space-4xl) var(--space-xl); }
.footer .lls-logo { width: 140px; }
.footer__base { margin-top: var(--space-md); max-width: 36ch; font: var(--type-body-sm); color: var(--ink-muted); }
.footer__col { display: flex; flex-direction: column; gap: 10px; font: var(--type-body-sm); }
.footer__col h2 { margin-bottom: 4px; font: var(--type-mono-label); color: var(--ink-subtle); }
.footer__col a, .footer__col button { padding: 0; border: 0; background: none; color: var(--ink-muted); text-align: left; text-decoration: none; cursor: pointer; }
html:not(.no-hover) .footer__col a:hover, html:not(.no-hover) .footer__col button:hover { color: var(--ink); }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--line); font: var(--type-mono-caption); color: var(--ink-subtle); }
.legal .sheet__in h3 { font: var(--type-title); color: var(--ink); }
.legal .sheet__in p { font: var(--type-body-sm); color: var(--ink-muted); }
.legal .sheet__in > div { display: flex; flex-direction: column; gap: 6px; }

/* --- entrée du hero : le seul moment orchestré de la page ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line, .js .hero__lede, .js .hero__cta, .js .toc li { animation: entre var(--duration-slow) var(--ease-out) both; }
  .js .hero__title .line:nth-child(2) { animation-delay: 60ms; }
  .js .hero__title .line:nth-child(3) { animation-delay: 120ms; }
  .js .hero__lede { animation-delay: 420ms; }
  .js .hero__cta { animation-delay: 500ms; }
  .js .toc li { animation-delay: calc(240ms + var(--n) * 70ms); }
  /* le surligneur : un calque du mot, sur l'aplat et à l'encre sombre, se dévoile de gauche à droite ;
     chaque lettre change de couleur au passage du trait */
  .js .hero__title .hl { position: relative; background: none; box-shadow: none; color: var(--ink); }
  .js .hero__title .hl::before { content: attr(data-text); position: absolute; inset: 0; padding: inherit; border-radius: inherit; background: var(--accent); box-shadow: var(--edge-accent); color: var(--on-accent); white-space: nowrap; animation: aplat 480ms 360ms cubic-bezier(0.45, 0, 0.2, 1) both; }
  @keyframes entre { from { opacity: 0.4; transform: translateY(8px); } }
  /* le calque déborde en haut et en bas pour recouvrir les jambages du mot (q, accents) */
  @keyframes aplat { from { clip-path: inset(-0.3em 100% -0.3em 0); } to { clip-path: inset(-0.3em -0.1em -0.3em 0); } }

  /* dépliants : le contenu descend de son titre */
  .step[open] .step__body, .lls-accordion[open] > p { animation: deplie var(--duration-base) var(--ease-out); }
  @keyframes deplie { from { opacity: 0; transform: translateY(-4px); } }
  /* menu mobile : un fondu, la liste suit de 8 px */
  .menu:not([hidden]) { animation: fondu var(--duration-fast) var(--ease-out); }
  .menu:not([hidden]) ol { animation: entre var(--duration-fast) var(--ease-out); }
}
/* survols : seulement sous un vrai pointeur, pour qu'un tap ne laisse pas d'état accroché */
@media (hover: hover) and (pointer: fine) {
  /* prise de rendez-vous : le bouton se soulève, la flèche avance */
  .lls-btn--primary { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .lls-btn--primary .lls-btn__action .icon { transition: transform var(--duration-fast) var(--ease-out); }
  html:not(.no-hover) .lls-btn--primary:hover { transform: translateY(-2px); }
  html:not(.no-hover) .lls-btn--primary:hover .lls-btn__action .icon { transform: translateX(3px); }
  html:not(.no-hover) .lls-btn--primary:hover:active { transform: translateY(0) scale(0.97); }
  html:not(.no-hover) .toc a:hover .icon { transform: translateY(3px); }
  html:not(.no-hover) .svc__more:hover .icon { transform: translateY(2px); }
  html:not(.no-hover) .case:hover { border-color: var(--line-strong); background: var(--raised); }
  html:not(.no-hover) .case:hover .case__head .icon { color: var(--accent-text); }
  /* méthode : le titre glisse d'un cran vers le +, sans changer de couleur */
  html:not(.no-hover) .step summary:hover .step__t { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-hover) .step summary:hover .step__t { transform: none; }
  html { scroll-behavior: auto; }
  .marquee { mask-image: none; }
  .marquee__track { width: auto; animation: none; }
  .marquee__track ul { flex-wrap: wrap; row-gap: var(--space-md); }
  .marquee__track ul[aria-hidden] { display: none; }
  dialog.sheet[open], dialog.sheet[open]::backdrop { animation-duration: 120ms; }
  dialog.sheet, dialog.sheet[open], dialog.sheet::backdrop, dialog.sheet[open]::backdrop { transform: none; transition-duration: var(--duration-instant); }
  @starting-style { dialog.sheet[open] { transform: none; } }
  .step[open] .step__body, .lls-accordion[open] > p { animation: fondu var(--duration-instant) linear; }
  .case, .nav__menu, .sheet__close { transition-duration: 0.01ms; }
}

/* --- adaptation ------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__right { display: flex; align-items: center; gap: var(--space-xs); }
}
@media (max-width: 1023px) {
  .hero__body { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .toc { margin-top: 0; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .toc li:last-child { border-bottom: 1px solid var(--line); }
  .offre__group, .methode__grid, .faq__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .flow { --rail: 40px; }
  /* le libellé sort de sa colonne pour coller sur toute la hauteur du groupe, en compact au-dessus des cartes */
  .offre__label { display: contents; }
  .offre__label h3 { justify-self: start; top: calc(var(--nav-h) + 8px); z-index: 2; margin-top: 0; font-size: clamp(30px, 7vw, 44px); box-shadow: var(--edge-accent), 0 0 0 100vmax var(--bg); clip-path: inset(-12px -100vmax -12px -100vmax); }
  .svc, .svc + .svc { position: static; min-height: 0; margin: 0; }
  .stack::after { display: none; }
  .methode .head { position: static; }
  .quotes, .team { grid-template-columns: 1fr; }
  .cases { grid-auto-columns: 86%; }
  .final .wrap { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr 1fr; }
  .footer__in > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .nav__cta { display: none; }
  .logos__in { grid-template-columns: 1fr; gap: var(--space-sm); padding-block: var(--space-md); }
  .logos__label { max-width: none; padding-right: 0; border-right: 0; }
  .badge { justify-self: start; padding-left: 0; border-left: 0; }
  .svc__head button { padding-block: var(--space-md); }
  .person { grid-template-columns: 1fr; }
  .person img { max-width: 320px; }
  .sheet section { grid-template-columns: 1fr; gap: 6px; }
  .faq .lls-accordion p { padding-right: 0; }
}
@media (max-width: 479px) {
  .person img { max-width: none; }
  .hero__title, .hero-sans .hero__title { font-size: clamp(34px, 12.2vw, 46px); }
  .footer__in { grid-template-columns: 1fr; }
}

/* --- diagnostic de défilement (?diag=…, à retirer avant la mise en ligne) ---------------------------------- */
html.diag-sans-smooth { scroll-behavior: auto; }
.diag-sans-colle .svc, .diag-sans-colle .offre__label h3, .diag-sans-colle .methode .head { position: static !important; }
.diag-sans-colle .topbar { position: absolute !important; }
.diag-sans-bande .marquee__track { animation: none !important; }