/* Lille Web, thème V2. Base + header + footer + composants transverses.
   Valeurs : voir tokens.css (relevé Figma). Mobile-first en dessous de 1024 px. */

/* ---------- Polices auto-hébergées (Google Fonts, sous-ensemble latin) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lw-white);
  color: var(--lw-black);
  font-family: var(--lw-font);
  font-weight: var(--lw-fw-medium);
  font-size: var(--lw-fs-body);
  line-height: var(--lw-lh-body);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lw-focus, var(--lw-black)); outline-offset: 3px; }
/* Audit 08/10 : l'anneau lime faisait 1,32:1 sur blanc. Noir par défaut, lime sur les fonds sombres, noir à nouveau sur les surfaces lime. */
.lw-realisations, .lw-studio, .lw-footer, .lw-xp-dark, .lw-card--dark, .lw-step--dark, .lw-nav__list, .lw-xp-etape--last .lw-xp-etape__card { --lw-focus: var(--lw-lime); }
.lw-card--lime, .lw-tile--lime, .lw-xp-feature--lime, .lw-st-col--lw { --lw-focus: var(--lw-black); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--lw-lime); padding: 8px 12px; border: var(--lw-border); border-radius: var(--lw-radius); }
.skip-link:focus { left: 8px; }

.lw-container {
  width: 100%;
  max-width: calc(var(--lw-container) + 2 * var(--lw-gutter));
  margin-inline: auto;
  padding-inline: var(--lw-gutter);
}

/* ---------- Titres et textes ---------- */
h1, h2, h3, .lw-h1, .lw-h2, .lw-h3, .lw-step__title, .lw-tile__label { text-wrap: pretty; } /* audit 08/10 : pas de mot seul en dernière ligne ; pretty plutôt que balance pour garder les coupes de la maquette */
.lw-h1 { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h1); line-height: var(--lw-lh-h1); }
.lw-h2 { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h2); line-height: var(--lw-lh-h2); }
.lw-h3 { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h3); line-height: var(--lw-lh-h3); }
.lw-lead { font-size: var(--lw-fs-lead); line-height: var(--lw-lh-lead); }
.lw-surtitle { font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; }

/* ---------- Boutons ---------- */
.lw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lw-btn-gap);
  padding: var(--lw-btn-pad);
  background: var(--lw-lime); color: var(--lw-black);
  border: var(--lw-border); border-radius: var(--lw-radius);
  box-shadow: var(--lw-shadow-btn);
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; white-space: nowrap;
  transition: transform .15s var(--lw-ease-out), box-shadow .15s var(--lw-ease-out);
}
.lw-btn:hover { transform: translate(1px, 2px); box-shadow: 1px 2px 0 0 var(--lw-shadow); }
.lw-btn:active { transform: translate(2px, 4px); box-shadow: none; }
.lw-btn .lw-btn__icon { width: 28px; height: 28px; flex: none; }
.lw-btn--dark { background: var(--lw-black); color: var(--lw-white); }
.lw-btn--dark.lw-btn--on-lime { box-shadow: var(--lw-shadow-btn-on-lime); }

/* Pastille (catégorie) */
.lw-pill {
  display: inline-flex; align-items: center; gap: var(--lw-pill-gap);
  padding: var(--lw-pill-pad);
  background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius-pill);
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; white-space: nowrap; /* « Plateforme sur mesure » passait sur deux lignes dans les cartes du mur (251 px) */
}
.lw-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lw-lime); }
/* Un produit, une surface (Pierre 25/09) : Site vitrine = pastille blanche, Site e-commerce = noire, Plateforme = lime.
   Même règle pour les cartes (.lw-card--dark / --lime / --grey). Classe donnée par lw_product_pill_class(). */
.lw-pill--dark { background: var(--lw-black); color: var(--lw-white); }
.lw-pill--lime { background: var(--lw-lime); color: var(--lw-black); }
.lw-pill--lime::before { background: var(--lw-black); }

/* Carte */
.lw-card {
  background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius);
  box-shadow: var(--lw-shadow-card);
}
.lw-card--dark { background: var(--lw-gradient-dark); color: var(--lw-white); box-shadow: 6px 8px 0 0 #d0d0d0; } /* même ombre grise que .lw-step--dark : une ombre noire sous une carte noire disparaît */
.lw-card--dark .lw-h3 { color: var(--lw-white); }
.lw-card--lime { background: var(--lw-lime); color: var(--lw-black); }
.lw-card--grey { background: var(--lw-off-white); }

/* ---------- Header ---------- */
/* Header « intelligent » (Pierre 28/09) : collant, il se cache quand on descend et revient quand on remonte
   d'au moins 120 px d'un coup (un petit mouvement vers le haut ne le fait pas réapparaître). Toujours visible
   en haut de page. Classes posées par nav.js : is-hidden, is-scrolled (filet bas quand détaché du haut). */
.lw-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--lw-header-h);
  background: var(--lw-white);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .2s var(--lw-ease-out);
}
.lw-header.is-hidden { transform: translateY(-100%); }
.lw-header.is-hidden:focus-within { transform: none; } /* lot P3 : le focus clavier (Maj+Tab) ne tombe jamais dans un header caché */
.lw-header.is-scrolled { box-shadow: 0 1px 0 0 rgb(0 0 0 / .08); }
@media (prefers-reduced-motion: reduce) { .lw-header { transition: none; } }
.lw-header__inner {
  height: 100%;
  display: flex; align-items: center; gap: 15px;
}
.lw-logo { display: block; width: 135px; height: 47px; position: relative; flex: none; }
.lw-logo__img { position: absolute; left: 1px; top: 0; width: 132px; height: 26px; }
.lw-logo__tag {
  position: absolute; left: 0; top: 26px; width: 135px; height: 21px;
  display: flex; align-items: center;
  font-family: var(--lw-font-tag); font-weight: 700; font-size: var(--lw-fs-tag);
  line-height: var(--lw-lh-tag); letter-spacing: var(--lw-ls-tag); color: var(--lw-ink); white-space: nowrap;
}

.lw-nav { margin-left: auto; }
.lw-nav__extra { display: none; }
.lw-nav__list {
  display: flex; align-items: center; gap: var(--lw-nav-gap);
  height: 34px; padding: var(--lw-nav-pad);
  background: var(--lw-black); color: var(--lw-white); border-radius: var(--lw-radius-nav);
}
.lw-nav__list a {
  display: block; font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: border-color .15s var(--lw-ease-out);
}
.lw-nav__list a:hover, .lw-nav__list .current-menu-item > a, .lw-nav__list .current_page_item > a { border-bottom-color: var(--lw-lime); }

.lw-header__cta {
  display: inline-flex; align-items: center; gap: var(--lw-btn-gap);
  height: 34px; padding: var(--lw-nav-pad);
  background: var(--lw-black); color: var(--lw-white); border-radius: var(--lw-radius-nav);
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; white-space: nowrap;
  transition: background-color .15s var(--lw-ease-out);
}
.lw-header__cta:hover { background: var(--lw-dark-top); }
.lw-header__cta svg { width: 24px; height: 24px; flex: none; }

.lw-burger { display: none; }

/* ---------- Footer ---------- */
.lw-footer {
  background: var(--lw-gradient-dark);
  color: var(--lw-white);
  padding: 130px 0 60px;
  overflow: hidden;
}
.lw-footer__wordmark { width: 868px; max-width: 100%; margin: 0 auto 135px; }
.lw-footer__wordmark svg { width: 100%; height: auto; }
.lw-footer__cols {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 40px;
} /* 13/10 (Pierre) : quatre colonnes égales laissaient la présentation à l'étroit et les liens perdus ; la première est large, les trois listes serrées à droite */
.lw-footer__title { font-weight: var(--lw-fw-medium); font-size: 1.25rem; line-height: 1.55; color: var(--lw-white); margin-bottom: 18px; }
.lw-footer__list { display: flex; flex-direction: column; gap: 8px; }
.lw-footer__list li, .lw-footer__text { font-size: var(--lw-fs-ui); line-height: 1.55; color: var(--lw-grey-text); }
.lw-footer__text { max-width: 380px; }
.lw-footer__list a:hover { color: var(--lw-white); }
.lw-footer__text p + p { margin-top: 10px; }
.lw-footer__bottom { margin-top: 70px; font-size: 0.875rem; line-height: 1.55; color: var(--lw-grey-text); }

/* ---------- Écriture manuscrite (annotations) ---------- */
/* La maquette utilise « Figma Hand Bold », police non distribuable : Caveat 700 en attendant l'arbitrage. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.lw-hand { font-family: "Caveat", "Figma Hand", cursive; font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: #6e6e6e; } /* 15/10 : #797979 → #6e6e6e, 4,5:1 aussi sur le blanc cassé */

/* ---------- Home : hero (7165:1624) ---------- */
.lw-main { overflow-x: clip; }
.lw-hero { position: relative; isolation: isolate; padding: 54px 0 47px; } /* 59 - 12 px de padding bas du carrousel (ombre) */
.lw-hero::before {
  content: ""; position: absolute; left: 50%; top: -334px; width: 1280px; height: 1280px;
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); z-index: -1;
}
.lw-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lw-hero__picto { width: 93px; height: 78px; position: relative; left: -25px; margin-bottom: 5px; } /* picto à y = 131 : 77 (header) + 54 */
.lw-hero__title { max-width: 563px; margin-bottom: 21px; }
.lw-hero__surtitle { display: block; margin-bottom: 16px; } /* audit SEO 12/10 : mot-clé dans le H1, même style et même écart que les autres surtitres */
.lw-hero__lead { max-width: 612px; margin-bottom: 30px; } /* boîte Figma 57 px pour 50 px de texte : l'écart est reporté ici */
.lw-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 38px; margin-bottom: 32px; }
.lw-hero__cta { min-width: 251px; }
.lw-hero__badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px;
  border: 2px solid var(--lw-black); border-radius: var(--lw-radius-pill); background: var(--lw-white); box-shadow: 2px 4px 0 0 var(--lw-shadow);
  font-size: 1rem; line-height: 1.25; color: var(--lw-black); text-decoration: none; transition: box-shadow .15s var(--lw-ease-out), transform .15s var(--lw-ease-out);
}
.lw-hero__badge:hover { box-shadow: 1px 2px 0 0 var(--lw-shadow); transform: translate(1px, 2px); }
.lw-hero__badge img { width: 20px; height: 20px; }
.lw-hero__badge-stars { color: var(--lw-star); letter-spacing: 1px; font-size: 0.9375rem; }
.lw-hero__badge-text strong { font-weight: var(--lw-fw-bold); }

/* ---------- Home : mur de logos clients (7165:1549…) ---------- */
/* Défilement continu vers la gauche (piste dupliquée, -50 %), pause au survol.
   Sans animation si l'utilisateur le demande : la piste redevient défilable au doigt. */
.lw-clients { position: relative; margin-top: 35px; }
.lw-clients__viewport { overflow: hidden; padding: 118px 0 12px; } /* 88 px pour l'annotation + 30 px de carte relevée */
.lw-clients__track {
  --lw-card-step: calc(251px + 37px);
  display: flex; gap: 37px; align-items: flex-start; width: max-content;
  margin-left: calc((100% - var(--lw-container)) / 2 + 218px - 3 * var(--lw-card-step)); /* Fondation (4e carte) à x = 538 */
  animation: lw-marquee 70s linear infinite;
}
.lw-clients__viewport:hover .lw-clients__track, .lw-clients__viewport:focus-within .lw-clients__track { animation-play-state: paused; }
@keyframes lw-marquee { to { transform: translateX(-50%); } }
.lw-client {
  position: relative; flex: none; width: 251px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: var(--lw-card-pad-top) var(--lw-card-pad-x) var(--lw-card-pad-bottom);
}
.lw-client { transition: transform .25s var(--lw-ease-out); }
.lw-client:hover, .lw-client:focus-within { transform: translateY(-30px); } /* la carte remonte de 30 px au survol (décision Pierre 24/09), avec la phrase */
.lw-client__logo { width: 100%; height: 224px; border-radius: var(--lw-radius-inner); background: var(--lw-placeholder); display: grid; place-items: center; overflow: hidden; }
.lw-client__wordmark { padding: 0 16px; font-weight: var(--lw-fw-bold); font-size: 1.75rem; line-height: 1.1; text-align: center; opacity: .85; }
.lw-client__logo img { max-width: 176px; max-height: 170px; width: auto; height: auto; filter: grayscale(1) brightness(0); mix-blend-mode: multiply; } /* Noir plein (Pierre 28/09), après comparaison en ligne gris 55 % (maquette) / noir 85 % / noir 100 % / couleur ; variantes et interrupteur ?logos= retirés. multiply : fond blanc des PNG invisible. Cadre image Figma : logo 176×170 max */
.lw-client__name { font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* une ligne : la hauteur de carte (343) est fixe */
.lw-client__phrase {
  position: absolute; left: 60px; bottom: calc(100% + 8px); width: 320px; padding-left: 47px; /* annotation Figma à (613, 605), carte à (538, 693) ; agrandie le 25/09 (16 → 22 px, 257 → 320) : trop petite à lire */ font-size: 1.375rem; line-height: 1.15;
  opacity: 0; transform: translateY(4px); transition: opacity .2s var(--lw-ease-out), transform .2s var(--lw-ease-out); pointer-events: none;
}
.lw-client__arrow { position: absolute; left: 0; top: 31px; width: 43px; height: 34px; transform: rotate(-14.4deg); }
.lw-client:hover .lw-client__phrase, .lw-client:focus-within .lw-client__phrase { opacity: 1; transform: none; }

/* ---------- Home : Réalisations, fond noir (7170:1671, y = 1125, h = 1500) ---------- */
.lw-realisations { background: var(--lw-gradient-dark); color: var(--lw-white); padding: 72px var(--lw-gutter) 65px; }
.lw-realisations__inner { max-width: 1813px; margin-inline: auto; } /* largeur de la grille Figma (4 × 426 + 3 × 39), centrée quel que soit l'écran */
.lw-realisations__head { position: relative; min-height: 198px; } /* grille à y = 270 : 72 + 198 */
.lw-realisations__surtitle { color: var(--lw-lime); }
.lw-realisations__title { max-width: 656px; margin: 11px 0 0 -2px; } /* H2 Figma à (57, 107) */
.lw-realisations__quote { position: absolute; left: 1140px; top: 9px; width: 673px; display: flex; gap: 19px; align-items: flex-start; } /* picto à x = 1199, texte à 1311 */
.lw-realisations__picto { width: 93px; height: 78px; flex: none; }
.lw-realisations__quote p { width: 561px; font-size: 1.25rem; line-height: 1.55; }
.lw-realisations__grid { display: grid; grid-template-columns: repeat(4, 426px); column-gap: 39px; row-gap: 33px; }
/* 426 × 266 (16:10) depuis le 28/09, au lieu de 426 × 330 (Figma) : les mises en scène des réalisations sont en 16:10 et
   ne se recadrent pas sans couper les appareils. Les compteurs passent en flux (plus de positions absolues). */
.lw-tile { height: 266px; border-radius: var(--lw-radius-tile); overflow: hidden; }
.lw-tile--image a { display: block; height: 100%; }
.lw-tile--image { background: var(--lw-dark-top); }
.lw-tile--image img { width: 100%; height: 100%; object-fit: cover; }
.lw-tile--lime { display: flex; flex-direction: column; background: var(--lw-lime); color: var(--lw-black); padding: 24px 31px 22px; }
/* Un compteur sur trois en noir à chiffre lime (25/09) : casse la répétition des trois tuiles lime. */
.lw-tile--dark { background: var(--lw-black); color: var(--lw-white); border: 2px solid var(--lw-white); }
.lw-tile--dark .lw-tile__number { color: var(--lw-lime); }
.lw-tile--dark .lw-tile__text { color: rgb(255 255 255 / .85); }
.lw-tile--dark .lw-tile__icon [fill="black"] { fill: var(--lw-lime); }
.lw-tile--dark .lw-tile__icon [stroke="black"] { stroke: var(--lw-lime); }
.lw-tile--dark .lw-tile__icon [fill="white"] { fill: var(--lw-black); }
.lw-tile__icon { width: 32px; height: 32px; }
.lw-tile__number { margin-top: auto; font-weight: var(--lw-fw-bold); font-size: 3.25rem; line-height: 1; }
.lw-tile__label { margin-top: 10px; font-weight: var(--lw-fw-bold); font-size: 1.25rem; line-height: 1.05; }
.lw-tile__text { margin-top: 8px; font-size: 1.0625rem; line-height: 1.25; color: var(--lw-lime-ink); }
.lw-realisations__more { display: flex; justify-content: center; margin-top: 52px; }
.lw-btn--on-dark { box-shadow: 2px 4px 0 0 var(--lw-white); min-width: 328px; }
.lw-btn--on-dark:hover { box-shadow: 1px 2px 0 0 var(--lw-white); }

/* ---------- Home : Offre, fond clair (2625 → 3665 ; cartes 7170:1765 / 7170:1837) ---------- */
.lw-offre { padding: 63px 0 113px; text-align: center; }
.lw-offre__surtitle { margin-bottom: 16px; }
.lw-offre__title { max-width: 656px; margin: 0 auto 53px; } /* H2 à y = 2728, cartes à 2916 */
/* Trois produits (décision 25/09) : 3 × 409 + 2 × 26 = 1279 dans le conteneur 1280. Sous-grille : les quatre blocs
   (titre+promesse, phrase, liste, bouton) s'alignent d'une carte à l'autre quelle que soit la longueur des textes.
   Le bloc « preuve client » a existé (5e ligne) puis a été retiré par Pierre : ne pas le remettre. */
.lw-offre__cards { display: grid; grid-template-columns: repeat(3, 409px); gap: 26px; justify-content: center; text-align: left; }
.lw-offre__card {
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 20px;
  padding: 32px 31px;
}
.lw-offre__cards { grid-template-rows: auto auto auto auto; }
.lw-offre__card-tag { margin-bottom: 14px; }
.lw-offre__card > * { min-width: 0; } /* en sous-grille, un bouton nowrap plus large que la carte étirait toute la colonne de contenu hors de la carte */
.lw-offre__card-promise { margin-top: 8px; font-weight: var(--lw-fw-semibold); font-size: 1.125rem; line-height: 1.35; color: var(--lw-lime-ink); }
/* Carte noire : filets et icônes en lime, texte blanc ; carte lime : pastille blanche, bouton noir. Les icônes
   ont fill/stroke en attribut : le CSS l'emporte sur l'attribut, d'où les sélecteurs [fill="black"]. */
.lw-card--dark .lw-offre__list li { border-bottom-color: rgb(255 255 255 / .45); } /* 25 % donnait 2,2:1 ; 45 % = 4,6:1 sur #000, au-dessus du 3:1 des éléments graphiques */
.lw-card--dark .lw-offre__list svg [fill="black"] { fill: var(--lw-lime); }
.lw-card--dark .lw-offre__list svg [stroke="black"] { stroke: var(--lw-lime); }
.lw-card--dark .lw-offre__list svg [fill="white"] { fill: var(--lw-black); }
.lw-card--dark .lw-offre__card-tag { border-color: var(--lw-white); }
.lw-card--lime .lw-offre__card-tag { background: var(--lw-white); }
.lw-card--lime .lw-offre__card-tag::before { background: var(--lw-lime); } /* 20 → 18 (Pierre 25/09) : dans une carte de 409 px, le corps 20 px de la maquette (cartes de 627) est trop gros ; 18 = la taille des lignes de la liste */
.lw-offre__card-text { font-size: 1.125rem; line-height: 1.5; }
.lw-offre__list li { display: flex; align-items: center; gap: 15px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--lw-black); font-size: 1.125rem; line-height: 1.4; }
/* Quatrième carte « Et après la mise en ligne » : pleine largeur sous les trois produits, hors de la sous-grille.
   Deux colonnes : à gauche le même en-tête qu'une carte produit (titre, promesse, phrase, bouton) sur 409 px,
   à droite la même liste à icônes et filets que les cartes, une ligne par prestation. Le premier jet (quatre blocs
   gris, bouton pleine largeur, 584 px de haut) a été refusé par Pierre : rester dans le vocabulaire des trois cartes. */
.lw-offre__card--suivi { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 409px minmax(0, 1fr); column-gap: 64px; align-items: start; margin-top: 26px; padding: 32px 31px; text-align: left; }
.lw-offre__suivi-head { display: grid; row-gap: 20px; }
.lw-offre__suivi-head .lw-offre__card-promise { margin-top: -12px; }
.lw-offre__list--suivi li { min-height: 60px; }
.lw-offre__list--suivi li:last-child { border-bottom-color: transparent; }
.lw-offre__list--suivi strong { font-weight: var(--lw-fw-bold); }
.lw-offre__list-note { min-height: 0 !important; padding: 12px 0 0 !important; border-bottom: 0 !important; }
.lw-offre__list-note span { font-size: 1rem; color: var(--lw-grey-label); } /* 13/10 : texte courant, plus manuscrit */
.lw-offre__btn { width: 100%; }

/* ---------- Home : Méthode, fond gris (7170:1940, 3665 → 4735) ---------- */
.lw-methode { background: var(--lw-off-white); padding: 63px 0 0; text-align: center; }
.lw-methode > .lw-container { position: relative; } /* 1070 - 63 : tout le contenu de la frise est posé en absolu */
.lw-methode__surtitle { margin-bottom: 16px; }
.lw-methode__title { max-width: 1140px; margin: 0 auto; text-wrap: balance; } /* H2 de Pierre sur deux lignes : à 656 px (largeur des autres H2) il en faisait trois ; 1140 = deux lignes équilibrées à 1920 */
.lw-methode__lead { max-width: 656px; margin: 16px auto 0; }
/* Frise dans le flux, pas en absolu : le H2 de Pierre fait deux lignes à 1920 et trois en dessous, et un `top` fixe
   (essayé : 40 px puis 116 px) faisait chevaucher les pastilles et les colonnes dès que le titre changeait de hauteur.
   Le margin-top négatif garde les pastilles (top: 164 px dans la frise) à 74 px sous le sous-titre. */
.lw-methode__board { position: relative; margin-top: -90px; height: 967px; text-align: left; } /* pastilles à 164 px dans la frise = 74 px sous le sous-titre, quelle que soit la hauteur du H2 */
.lw-methode__note { position: absolute; left: 1070px; top: 176px; width: 195px; font-size: 1rem; line-height: 1.15; text-align: center; text-wrap: balance; } /* 13/10 (Pierre) : hors du tableau, au-dessus de l'en-tête « Mise en ligne » ; la flèche part de la fin du texte, à droite, et crochète vers l'en-tête (croquis de Pierre) */
.lw-methode__note-arrow { position: absolute; right: -14px; top: 28px; width: 56px; height: 42px; transform: rotate(50deg) scaleX(-1); } /* dessin naturel : queue en haut à droite, pointe en bas à gauche, bombé vers le haut-gauche ; miroir + 50° : queue au bout du texte, bombé à droite, pointe qui redescend vers l'en-tête */
.lw-methode__chips { position: absolute; left: 271px; top: 164px; width: 736px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 21px; } /* bloc Figma 7170:1965 : 3 × 231,33 + 2 × 21 = 736 ; la dernière pastille occupe deux colonnes (483,67) */
.lw-methode__chips li:last-child { grid-column: span 2; }
.lw-methode__chips li {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 5px 12px;
  background: #5e5e5e; color: var(--lw-white); font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; white-space: nowrap;
}
.lw-methode__chips li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lw-lime); flex: none; }
.lw-methode__cols { position: absolute; left: 0; top: 295px; width: 1274px; height: 669px; display: flex; gap: 0; } /* têtes à y = 4063, filets jusqu'à 4732 */
.lw-methode__cols li {
  height: 34px; padding: 5px 0; text-align: center; background: #d0d0d0;
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px;
  position: relative;
}
.lw-methode__cols li::after { content: ""; position: absolute; right: -1px; top: 0; width: 2px; height: 669px; background: #d0d0d0; }
.lw-methode__cols li:nth-child(1) { width: 251px; margin-right: 17px; }
.lw-methode__cols li:nth-child(2) { width: 251px; margin-right: 19px; }
.lw-methode__cols li:nth-child(3) { width: 251px; margin-right: 21px; }
.lw-methode__cols li:nth-child(4) { width: 251px; margin-right: 20px; }
.lw-methode__cols li:nth-child(5) { width: 193px; }
.lw-methode__steps { position: absolute; inset: 0; }
.lw-step {
  position: absolute; left: var(--x); top: calc(var(--y) - 103px); width: var(--w);
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--lw-card-pad-top) var(--lw-card-pad-x) var(--lw-card-pad-bottom);
  background: var(--lw-lime); border: var(--lw-border); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card); /* 13/10 (Maxence) : étapes vertes comme la maquette Figma, la dernière noire */
}
.lw-step__col { display: none; }
.lw-step__head { display: flex; align-items: center; gap: 10px; }
.lw-step__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 37px; padding: 7px 12px 6px;
  border-radius: var(--lw-radius-pill); background: var(--lw-black); color: var(--lw-white);
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px;
}
.lw-step__title { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-ui); line-height: 24px; }
.lw-step__text { font-size: var(--lw-fs-ui); line-height: 24px; color: var(--lw-lime-ink); }
/* Vous / nous (25/09) : les étapes où le client agit sont blanches (2 Design : il tranche ; 5 : il teste), celles où
   on travaille restent lime, la mise en ligne reste noire. La frise raconte le partage des rôles sans le dire. */
.lw-step--light { background: var(--lw-white); }
.lw-step--light .lw-step__text { color: var(--lw-black); }
.lw-step--dark { background: var(--lw-black); color: var(--lw-white); box-shadow: 6px 8px 0 0 #d0d0d0; min-height: 341px; padding-bottom: 108px; } /* 08/10 : texte plus long, le picto ne doit pas le recouvrir */
.lw-step--dark .lw-step__head { flex-direction: column; align-items: flex-start; }
.lw-step--dark .lw-step__num { background: var(--lw-lime); color: var(--lw-black); }
.lw-step--dark .lw-step__text { color: var(--lw-white); }
.lw-step__picto { position: absolute; right: 18px; bottom: 16px; width: 93px; height: 78px; }

/* ---------- Home : Le studio + avis, fond noir (7170:2136, 4735 → 5525) ---------- */
.lw-studio { background: var(--lw-gradient-dark); color: var(--lw-white); padding: 77px 0 120px; overflow: hidden; }
.lw-studio__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; min-height: 328px; } /* bande à y = 405 */
.lw-studio__intro { display: flex; gap: 25px; align-items: flex-start; width: 656px; margin-top: 4px; } /* photo et H2 à y = 81 */
.lw-studio__portrait { width: 128px; height: 128px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--lw-lime); filter: grayscale(1); margin-left: -2px; }
.lw-studio__title { flex: 1; }
.lw-studio__text { width: 427px; font-size: 1.25rem; line-height: 1.55; }
.lw-avis-band__viewport { overflow: hidden; }
.lw-avis-band__track { display: flex; gap: 24px; width: max-content; margin-left: -37px; animation: lw-marquee 80s linear infinite; }
.lw-avis-band:hover .lw-avis-band__track, .lw-avis-band:focus-within .lw-avis-band__track { animation-play-state: paused; }

/* Bouton pause des défilements (audit 08/10, WCAG 2.2.2 : le survol n'existe pas au doigt). nav.js l'affiche et pose .is-paused. */
.lw-pause {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--lw-white); color: var(--lw-black); border: var(--lw-border);
  vertical-align: middle;
}
.lw-pause::before { content: ""; position: absolute; inset: -5px; } /* zone de toucher de 46 px */
.lw-pause .lw-pause__play, .lw-pause[aria-pressed="true"] .lw-pause__pause { display: none; }
.lw-pause[aria-pressed="true"] .lw-pause__play { display: block; }
.lw-pause[hidden] { display: none; }
.lw-avis-band__pause { margin-left: 10px; }
.lw-clients__pause { position: absolute; top: 60px; right: max(var(--lw-gutter), calc((100% - var(--lw-container)) / 2)); z-index: 2; }
.lw-clients.is-paused .lw-clients__track, .lw-avis-band.is-paused .lw-avis-band__track { animation-play-state: paused; }
.lw-avis {
  position: relative; flex: none; width: 441px; min-height: 265px; padding: 24px; /* min-height : les vrais avis Google font parfois cinq lignes */
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--lw-card-light); color: var(--lw-black); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card);
}
.lw-avis__avatar {
  width: 47px; height: 47px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lw-white); box-shadow: 0 0 0 1px var(--lw-lime); font-weight: var(--lw-fw-bold); font-size: 1.25rem;
}
.lw-avis__head { display: flex; align-items: center; gap: 12px; }
.lw-avis__stars { color: var(--lw-star); font-size: 1.25rem; /* 20, +25 % (01/10) */ letter-spacing: 1px; }
img.lw-avis__avatar { object-fit: cover; }
.lw-avis__google { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 0.875rem; color: var(--lw-black); text-decoration: underline; text-underline-offset: 3px; }
.lw-avis__google img { width: 14px; height: 14px; }
.lw-avis-band__head { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 28px; font-size: 1rem; line-height: 1.25; color: var(--lw-white); }
.lw-avis-band__head a { color: var(--lw-lime); }
.lw-avis__mark { position: absolute; right: 29px; top: 13px; font-weight: var(--lw-fw-bold); font-size: 4.375rem; line-height: 73px; }
.lw-avis__body { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lw-avis__quote { font-weight: var(--lw-fw-bold); font-size: 1.75rem; line-height: normal; }
.lw-avis__author { font-size: var(--lw-fs-ui); line-height: normal; }

/* ---------- Home : FAQ + bureaux + CTA final (remplace le formulaire de la maquette, 5525 → …) ---------- */
.lw-contact { position: relative; isolation: isolate; padding: 100px 0 120px; overflow: hidden; }
.lw-contact::before {
  content: ""; position: absolute; left: 50%; top: -364px; width: 1280px; height: 1280px; /* ellipse 7170:4026 : (318, 5161) */
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); z-index: -1;
}
/* 15/10 : le passage des ronds en blanc cassé plein (socle 043e657) rendait les bords de celui-ci visibles, à ras du texte et de la carte.
   Retour à l'état validé par Maxence le 14/10 : dégradé blanc → #f4f4f4, presque invisible en haut. */
.lw-contact::before { background: linear-gradient(180deg, var(--lw-white) 0%, var(--lw-blob) 100%); }
.lw-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 60px; align-items: start; }
.lw-contact__surtitle { margin-bottom: 16px; }
.lw-contact__title { max-width: 656px; margin-bottom: 40px; }
.lw-faq__item { border-top: 1px solid var(--lw-black); }
.lw-faq__item:last-child { border-bottom: 1px solid var(--lw-black); }
.lw-faq__q {
  position: relative; list-style: none; cursor: pointer; padding: 22px 56px 22px 0;
  font-weight: var(--lw-fw-bold); font-size: 1.25rem; line-height: 1.25;
}
.lw-faq__q::-webkit-details-marker { display: none; }
.lw-faq__q::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -9px;
  border-right: 2px solid var(--lw-black); border-bottom: 2px solid var(--lw-black); transform: rotate(45deg);
  transition: transform .2s var(--lw-ease-out);
}
.lw-faq__item[open] .lw-faq__q::after { transform: translateY(6px) rotate(225deg); } /* audit 08/10 : décalage dans le transform (margin-top sautait de 6 px) */
.lw-faq__q:hover { color: var(--lw-lime-ink); }
.lw-faq__panel { overflow: hidden; }
.lw-faq__r { padding: 0 56px 26px 0; font-size: 1.25rem; line-height: 1.55; }
/* Ouverture animée (details::details-content, Chrome 131+ / Safari 18.4+ ; ailleurs : ouverture directe) */
.lw-faq__item::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size .3s var(--lw-ease-out), content-visibility .3s allow-discrete, opacity .3s var(--lw-ease-out);
}
.lw-faq__item[open]::details-content { block-size: auto; block-size: calc-size(auto, size); opacity: 1; }
.lw-faq__q:focus-visible { outline-offset: -3px; }
/* Arbitrage du 12/10 : même indicateur que la FAQ des pages Expertises (carré bordé, + / −, lime une fois ouvert). */
.lw-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-right: 0; }
.lw-faq__q::after { content: none; }
.lw-faq__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--lw-radius); box-shadow: inset 0 0 0 2px var(--lw-black); color: var(--lw-black); transition: background-color .2s var(--lw-ease-out); }
.lw-faq__minus, .lw-faq__item[open] .lw-faq__plus { display: none; }
.lw-faq__item[open] .lw-faq__minus { display: block; }
.lw-faq__item[open] .lw-faq__icon { background: var(--lw-lime); }
.lw-faq__q:hover { color: inherit; }
.lw-faq__q:hover .lw-faq__icon { background: var(--lw-lime); }

.lw-contact__card {
  position: sticky; top: calc(var(--lw-header-h) + 24px); /* lot P3 : sous le header quand il réapparaît */
  /* audit responsive 12/10 : la carte fait 871 px ; sous 980 px de haut, elle n'est plus collante (bouton hors champ sinon) */
  display: flex; flex-direction: column; gap: 18px;
  padding: 40px; background: var(--lw-lime); border: var(--lw-border); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card);
}
.lw-contact__photo { width: calc(100% + 80px); margin: -40px 0 6px -40px; max-width: none; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 20%; border-bottom: var(--lw-border); border-radius: 10px 10px 0 0; } /* 3:2 → 21:9 (Pierre 25/09) : la carte lime s'aligne sur la hauteur de la FAQ */
.lw-contact__card-text { font-size: var(--lw-fs-ui); line-height: 1.55; color: var(--lw-lime-ink); }
.lw-contact__map { position: relative; display: block; border: var(--lw-border); border-radius: var(--lw-radius-inner); overflow: hidden; background: var(--lw-white); }
.lw-contact__map img { width: 100%; height: auto; aspect-ratio: 673 / 320; object-fit: cover; transition: transform .3s var(--lw-ease-out); }
.lw-contact__map:hover img { transform: scale(1.03); }
.lw-contact__map--plan img { aspect-ratio: 2 / 1; object-fit: contain; }
.lw-contact__map--plan:hover img { transform: none; } /* le repère est posé en HTML : l'image ne doit pas bouger sous lui */
.lw-contact__map-credit { position: absolute; right: 6px; bottom: 4px; font-size: 0.75rem; line-height: 1; color: #666; background: rgba(255,255,255,.7); padding: 2px 4px; border-radius: 3px; }
.lw-contact__address { font-style: normal; font-size: var(--lw-fs-ui); line-height: 1.55; }
.lw-contact__address a:hover { text-decoration: underline; }
.lw-contact__note { position: relative; padding-left: 60px; min-height: 43px; display: flex; align-items: center; font-size: 1rem; line-height: 1.25; color: var(--lw-lime-ink); }
/* 13/10 : plus de rotation (elle décrochait la flèche du texte). La queue part juste avant le texte, à mi-hauteur de la ligne ; la pointe arrive 6 px au-dessus du bouton, 20 px à l'intérieur de son bord gauche. SVG en preserveAspectRatio none : la boîte fixe le tracé. */
.lw-contact__note-arrow { position: absolute; left: 16px; top: 21px; width: 38px; height: 35px; }
.lw-contact__btn { width: 100%; }
.lw-situations { margin-top: 110px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
/* Deux rangées de deux (choix Pierre 25/09, option A) : colonnes `max-content` (des colonnes fixes à 530 px faisaient
   passer les pastilles sur deux lignes à 1920), pastille centrée dans sa cellule, seconde rangée décalée de 40 px par
   `left` (pas par transform : la chute animée utilise déjà transform), rotations alternées. Le flex-wrap donnait un
   2 + 1 + 1 accidentel. Sous 1280 px, une colonne : 1173 px de pastilles + 40 px de décalage ne tiennent plus. */
.lw-situations__list { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 56px; justify-content: center; }
.lw-situations__list li { position: relative; justify-self: center; }
.lw-situations__list li:nth-child(n+3) { left: 40px; }
.lw-situations__list li {
  padding: 12px 20px; background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius-pill); box-shadow: var(--lw-shadow-btn);
  font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-lead); line-height: 1.25;
}
.lw-situations__list li:nth-child(odd) { --r: -1deg; }
.lw-situations__list li:nth-child(even) { --r: 1deg; }
.lw-situations__list li { transform: rotate(var(--r)); }
/* Retour Maxence : les pastilles « tombent du ciel » à l'arrivée dans l'écran (classe posée par nav.js). */
@media (prefers-reduced-motion: no-preference) {
  [data-drop].is-armed:not(.is-dropped) li { opacity: 0; transform: translateY(-340px) rotate(calc(var(--r) * 8)); }
  /* 15/10 (Pierre) : chute plus lente et de plus haut, puis flottement continu, durée différente par pastille pour qu'elles ne bougent pas en bloc */
  [data-drop].is-dropped li {
    animation: lw-drop 1.15s cubic-bezier(.3, 0, .2, 1) both, lw-float calc(4.6s + var(--i) * .45s) ease-in-out infinite;
    animation-delay: calc(var(--i) * .16s), calc(var(--i) * .16s + 1.15s);
  }
}
@keyframes lw-drop {
  0% { opacity: 0; transform: translateY(-340px) rotate(calc(var(--r) * 8)); }
  25% { opacity: 1; }
  70% { transform: translateY(10px) rotate(calc(var(--r) * -1.5)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)); }
}
@keyframes lw-float {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-6px) rotate(calc(var(--r) + .6deg)); }
}
.lw-situations__note { font-size: 1.375rem; }
.lw-situations__closing { max-width: 656px; margin-top: 12px; }
.lw-situations__btn { min-width: 251px; }

/* Filets sur les cellules, pas sur la ligne : ils ne traversent pas la carte lime. */
/* La colonne Lille Web est une carte lime posée par-dessus la grille : bordure, ombre décalée, coins arrondis. */
.lw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) {
}

/* ---------- Page Contact (page-contact.php) ---------- */
.lw-page-contact { position: relative; isolation: isolate; padding: 60px 0 120px; overflow: hidden; }
.lw-page-contact::before {
  content: ""; position: absolute; left: 50%; top: -700px; width: 1280px; height: 1280px;
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); z-index: -1;
}
.lw-page-contact__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 64px; }
.lw-page-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) 673px; gap: 60px; align-items: start; } /* 8/10 : portrait réduit et carte 2:1 sous « Se voir », pour finir à hauteur du formulaire */
.lw-page-contact__aside { display: flex; flex-direction: column; gap: 40px; }
.lw-page-contact__portrait { position: relative; margin: 0; width: min(100%, 340px); }
.lw-page-contact__portrait img { width: 100%; height: auto; border-radius: var(--lw-radius-tile); border: var(--lw-border); box-shadow: var(--lw-shadow-card); }
.lw-page-contact__portrait figcaption { position: absolute; right: -8px; bottom: 24px; padding: 8px 14px; background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius-pill); box-shadow: var(--lw-shadow-btn); transform: rotate(-3deg); font-size: 0.9375rem; font-weight: var(--lw-fw-semibold); color: var(--lw-black); } /* 15/10 : étiquette blanche (plus d'aplat vert ni de manuscrit sans flèche) */
.lw-page-contact__infos { display: flex; flex-direction: column; gap: 20px; }
.lw-page-contact__ways { display: flex; flex-direction: column; gap: 12px; font-size: var(--lw-fs-ui); line-height: 1.55; }
.lw-page-contact__ways li { display: flex; gap: 12px; align-items: flex-start; }
.lw-page-contact__ways svg { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.lw-page-contact__pin { position: absolute; left: 49.67%; top: 50.42%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lw-lime); border: 3px solid var(--lw-black); box-shadow: 0 0 0 6px rgb(197 241 53 / .45); } /* position du 46 rue Négrier dans le viewBox du SVG */
.lw-page-contact__ways a { text-decoration: underline; text-underline-offset: 3px; }
.lw-page-contact__ways a:hover { color: var(--lw-lime-ink); }
.lw-page-contact__map { position: relative; display: block; width: min(100%, 480px); margin-top: 8px; border: var(--lw-border); border-radius: var(--lw-radius-inner); overflow: hidden; box-shadow: var(--lw-shadow-card); }
.lw-page-contact__map img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }

.lw-page-contact__card {
  display: flex; flex-direction: column; gap: 22px; padding: 40px;
  background: var(--lw-lime); border: var(--lw-border); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card);
} /* carte 7170:4094 : 673 px, padding 40, gap 22 */
.lw-form { display: flex; flex-direction: column; gap: 22px; }
.lw-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lw-form__field { display: flex; flex-direction: column; gap: 8px; }
.lw-form__label { font-weight: var(--lw-fw-semibold); font-size: var(--lw-fs-ui); line-height: 24px; }
.lw-form__input {
  width: 100%; min-height: 62px; padding: 19px 20px; font: inherit; font-size: var(--lw-fs-ui); line-height: 20px; color: var(--lw-black);
  background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card);
  transition: box-shadow .15s var(--lw-ease-out), transform .15s var(--lw-ease-out);
} /* champ 7170:4103 : 62 px, padding 20, bordure 2, ombre 6/8 */
.lw-form__input::placeholder { color: var(--lw-grey-label); }
.lw-form__input:focus { outline: 3px solid var(--lw-black); outline-offset: 2px; box-shadow: var(--lw-shadow-btn); } /* audit 08/10 : contour visible, translation retirée (mouvement à chaque Tab) */
.lw-form__input--area { min-height: 176px; resize: vertical; }
.is-invalid .lw-form__input { border-color: #b3261e; }
.lw-form__error { font-size: 0.9375rem; line-height: 1.4; font-weight: var(--lw-fw-semibold); color: #7a1a12; }
.lw-form__error--global { padding: 14px 16px; background: var(--lw-white); border: 2px solid #b3261e; border-radius: var(--lw-radius); }
.lw-form__check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.lw-form__check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lw-black); }
.lw-form__check a { text-decoration: underline; text-underline-offset: 3px; }
.lw-form__submit { width: 100%; min-height: 56px; }
.lw-form__submit[disabled] { opacity: .6; cursor: progress; }
/* 13/10 : la flèche part du début du texte, file à gauche et monte : la pointe (8 px sous le haut du SVG) arrive 6 px sous le bouton, ombre comprise. Même tracé que .lw-xp-note et .lw-st-note. */
.lw-form__note { display: flex; align-items: flex-start; gap: 2px; margin: -24px 0 0 16px; font-size: 1.125rem; line-height: 1.25; color: var(--lw-lime-ink); }
.lw-form__note span { padding-top: 34px; }
.lw-form__note-arrow { width: 64px; height: 64px; flex: none; }
.lw-form__success { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.lw-form__success-title { font-weight: var(--lw-fw-bold); font-size: 1.75rem; line-height: 1.25; }
.lw-form__success-sign { font-family: "Caveat", cursive; font-size: 1.75rem; color: var(--lw-lime-ink); }
.lw-form__success-more { font-size: var(--lw-fs-ui); line-height: 1.55; margin-top: 12px; }
.lw-form__success-more a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1919px) {
  .lw-realisations__head { display: flex; flex-direction: column; gap: 24px; min-height: 0; margin-bottom: 40px; }
  .lw-realisations__quote { position: static; width: auto; }
  .lw-realisations__quote p { width: auto; max-width: 561px; }
  .lw-realisations__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; }
  .lw-tile { height: auto; aspect-ratio: 16 / 10; }
  .lw-tile--lime { aspect-ratio: auto; min-height: 100%; } /* audit 08/10 : le texte décide de la hauteur de la rangée */
  .lw-tile--image { align-self: stretch; width: 100%; min-width: 0; } /* audit responsive 12/10 : avec aspect-ratio + stretch, la largeur se recalculait depuis la hauteur de la rangée (tuiles de 474 px dans des colonnes de 295) */
}
@media (max-width: 1319px) {
  .lw-page-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .lw-page-contact__card { max-width: 673px; }
  .lw-page-contact__aside { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .lw-page-contact__portrait { width: 300px; }
  .lw-page-contact__infos { flex: 1; min-width: 300px; }
  .lw-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .lw-contact__card { position: static; max-width: 673px; }
  .lw-studio__head { flex-direction: column; min-height: 0; margin-bottom: 48px; }
  .lw-studio__intro, .lw-studio__text { width: auto; max-width: 656px; }
  .lw-methode { padding-bottom: 64px; }
  .lw-methode__board { position: static; height: auto; margin-top: 32px; }
  .lw-methode__note { display: none; }
  .lw-methode__chips { position: static; width: auto; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
  .lw-methode__chips li { white-space: normal; height: auto; }
  .lw-methode__cols { display: none; }
  .lw-methode__steps { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .lw-step { position: static; width: auto; }
  .lw-step__col { display: block; font-weight: var(--lw-fw-semibold); font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lw-lime-ink); }
  .lw-step--dark .lw-step__col { color: var(--lw-lime); }
  .lw-step--dark { min-height: 0; padding-bottom: 100px; }
  .lw-offre__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lw-offre__card { padding: 28px 24px; }
  .lw-offre__card--suivi { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .lw-offre__suivi-head { display: contents; } /* en colonne, le bouton passe sous la liste, comme dans les trois cartes */
  .lw-offre__suivi-head .lw-offre__card-promise { margin-top: -8px; }
  .lw-offre__card--suivi .lw-offre__btn { order: 3; }
  .lw-offre__list--suivi { order: 2; }
}
@media (max-width: 1279px) {
  .lw-situations__list { grid-template-columns: minmax(0, max-content); }
  .lw-situations__list li:nth-child(n+3) { left: 0; }
  .lw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-realisations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .lw-offre__cards { grid-template-columns: minmax(0, 627px); grid-template-rows: none; }
  .lw-offre__card { grid-template-rows: auto; grid-row: auto; }
  .lw-offre__card--suivi { margin-top: 0; }
  :root { --lw-fs-h1: 40px; --lw-fs-h2: 28px; --lw-fs-h3: 22px; --lw-fs-body: 18px; }
  .lw-hero { padding-bottom: 40px; }
  .lw-hero::before { width: 200vw; height: 200vw; top: -40%; }
  .lw-realisations { position: relative; z-index: 0; } /* audit 08/10 : à 768 le disque du hero passait sur la section noire et coupait « Réalisations » */
  .lw-hero__picto { width: 62px; height: 52px; left: -16px; }
  .lw-hero__pills { gap: 12px; }
  .lw-clients__viewport { padding-top: 100px; }
  .lw-clients__track { --lw-card-step: calc(251px + 20px); gap: 20px; margin-left: calc(var(--lw-gutter) - 3 * var(--lw-card-step)); animation-duration: 50s; }
  .lw-client__phrase { left: 0; }
  .lw-realisations { padding-top: 48px; padding-bottom: 48px; }
  .lw-studio { padding: 48px 0 64px; }
  .lw-contact { padding: 56px 0 64px; }
  .lw-page-contact { padding: 40px 0 64px; }
  .lw-page-contact__head { margin-bottom: 40px; }
  .lw-page-contact__aside { flex-direction: column; }
  .lw-page-contact__portrait { width: min(100%, 320px); }
  .lw-page-contact__card { padding: 24px; }
  .lw-form__input { box-shadow: var(--lw-shadow-btn); }
  .lw-contact::before { width: 200vw; height: 200vw; top: -40%; }
  .lw-contact__card { padding: 24px; }
  .lw-contact__photo { width: calc(100% + 48px); margin: -24px 0 4px -24px; }
  .lw-faq__q, .lw-faq__r { font-size: 1.125rem; }
  .lw-faq__q { padding-right: 0; gap: 16px; }
  .lw-faq__icon { width: 36px; height: 36px; }
  .lw-situations { margin-top: 56px; gap: 20px; }
  .lw-situations__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lw-situations__list li:nth-child(n+3) { left: 0; }
  .lw-situations__list li { font-size: 1rem; padding: 10px 14px; transform: none; }
  .lw-studio__intro { flex-direction: column; gap: 16px; }
  .lw-studio__portrait { width: 96px; height: 96px; }
  .lw-studio__text { font-size: 1.125rem; }
  .lw-avis-band__track { margin-left: var(--lw-gutter); gap: 16px; animation-duration: 60s; }
  .lw-avis { width: 300px; height: auto; min-height: 240px; gap: 24px; }
  .lw-avis__quote { font-size: 1.375rem; }
  .lw-offre { padding: 48px 0 64px; }
  .lw-offre__title { margin-bottom: 32px; }
  .lw-offre__cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lw-offre__card { grid-template-rows: auto; grid-row: auto; padding: 28px 20px; }
  .lw-offre__card-text, .lw-offre__list li { font-size: 1.125rem; }
  .lw-offre__list li { height: auto; padding: 12px 0; }
  .lw-offre__btn { white-space: normal; text-align: center; line-height: 1.3; } /* « Découvrir l’offre Plateforme sur mesure » dépasse une carte de 350 px : deux lignes acceptées sur mobile seulement */
  .lw-tile--lime { padding: 24px; }
  .lw-tile__number { font-size: 2.75rem; }
  .lw-tile__label { font-size: 1.125rem; }
  .lw-tile__text { font-size: 1rem; }
  .lw-btn--on-dark { min-width: 0; }
  .lw-footer { padding: 70px 0 40px; }
  .lw-footer__wordmark { margin-bottom: 60px; }
}
/* Header : menu burger jusqu'à 1079 px (13/10 : cinq liens produit + CTA ne tiennent pas entre 1024 et 1060). Les autres
   règles de mise en page gardent leur seuil à 1023. nav.js suit (matchMedia 1080). */
@media (max-width: 1079px) {
  .lw-header__inner { gap: 12px; }
  .lw-nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--lw-header-h);
    background: var(--lw-black); padding: 12px var(--lw-gutter) 20px;
    border-bottom: 2px solid var(--lw-lime);
  }
  .lw-nav.is-open { display: block; }
  .lw-nav__list { flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0; border-radius: 0; }
  .lw-nav__list a { padding: 12px 0; font-size: 1.125rem; border-bottom: 1px solid #333; }
  .lw-nav__list .current-menu-item > a { color: var(--lw-lime); border-bottom-color: #333; }
  .lw-nav__list li:last-child a { border-bottom: 0; }
  /* Menu mobile modal (arbitrage du 12/10) : voile sur la page, défilement bloqué, appel en toutes lettres */
  .lw-nav__extra { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
  .lw-nav__cta { width: 100%; }
  .lw-nav__direct { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 1rem; }
  .lw-nav__direct a { color: var(--lw-white); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
  html.lw-menu-open { overflow: hidden; }
  html.lw-menu-open body::after { content: ""; position: fixed; inset: 0; z-index: 99; background: rgb(0 0 0 / .5); }
  .lw-nav { max-height: calc(100dvh - var(--lw-header-h)); overflow-y: auto; overscroll-behavior: contain; }
  .lw-header__cta span { display: none; }
  .lw-header__cta { padding: 5px; }
  .lw-burger {
    display: inline-flex; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px;
    width: 34px; height: 34px; padding: 6px;
    border: var(--lw-border); border-radius: var(--lw-radius-nav);
  }
  .lw-burger span { display: block; height: 2px; background: var(--lw-black); transition: transform .2s var(--lw-ease-out), opacity .2s var(--lw-ease-out); }
  .lw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .lw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 599px) {
  .lw-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .lw-methode__steps { grid-template-columns: minmax(0, 1fr); }
  .lw-realisations__grid { grid-template-columns: minmax(0, 1fr); }
  .lw-tile--lime { aspect-ratio: auto; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .lw-clients__viewport { overflow-x: auto; scrollbar-width: none; }
  .lw-clients__track { animation: none; margin-left: var(--lw-gutter); }
  .lw-clients__track > [aria-hidden="true"] { display: none; }
  .lw-avis-band__viewport { overflow-x: auto; scrollbar-width: none; }
  .lw-avis-band__track { animation: none; margin-left: var(--lw-gutter); }
  .lw-avis-band__track > [aria-hidden="true"] { display: none; }
  .lw-pause { display: none; } /* rien ne bouge : rien à mettre en pause */
  .lw-faq__item::details-content, .lw-xp-faq__item::details-content { transition: none; } /* audit 08/10 : le sélecteur * ne visait pas ce pseudo-élément */
}

/* ---------- Écrans tactiles (audit 08/10) ---------- */
@media (hover: none) {
  /* Un survol « collé » après le tap laissait boutons et cartes enfoncés. La carte client garde son effet : au doigt, c'est ce qui montre la phrase. */
  html .lw-btn:hover, html .lw-hero__badge:hover, html .lw-ra-filtre:hover, html .lw-xp-pill-link:hover { transform: none; }
  html .lw-btn:hover { box-shadow: var(--lw-shadow-btn); }
  html .lw-hero__badge:hover { box-shadow: none; }
  html a.lw-ra-carte:hover, html a.lw-ra-carte:hover .lw-ra-carte__visuel img { transform: none; }
}
@media (pointer: coarse) {
  /* Zones de toucher de 44 px sans changer le dessin : burger et CTA du header (34 px), fil d'Ariane, pied de page, liens d'avis. */
  html .lw-burger, html .lw-header__cta, html .lw-xp-crumbs a, html .lw-footer__list a, html .lw-avis__google { position: relative; }
  html .lw-burger::after, html .lw-header__cta::after { content: ""; position: absolute; inset: -5px; }
  html .lw-xp-crumbs a::after, html .lw-avis__google::after { content: ""; position: absolute; inset: -12px -4px; }
  html .lw-footer__list a::after { content: ""; position: absolute; inset: -6px -4px; } /* liens espacés de 33 px (25 + 8) : zone de 37 px sans chevauchement */
}

/* ---------- Lot P3 de l'audit (12/10) ---------- */
:root { color-scheme: light; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lw-main [id] { scroll-margin-top: var(--lw-header-h); } /* ancres de la home : le titre ne passe pas sous le header */
.lw-tile__number { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .lw-hero__pills a { transition: transform .15s var(--lw-ease-out), box-shadow .15s var(--lw-ease-out); }
  .lw-hero__pills a:hover { transform: translateY(-1px); box-shadow: var(--lw-shadow-btn); }
}
@media (prefers-reduced-motion: reduce) {
  .lw-clients__viewport, .lw-avis-band__viewport { scrollbar-width: thin; } /* la bande défile au doigt ou au clavier : on montre qu'elle défile */
}
.lw-clients.is-offscreen .lw-clients__track, .lw-avis-band.is-offscreen .lw-avis-band__track { animation-play-state: paused; } /* lot P3 : pas de défilement hors écran */
.lw-methode__note { color: #6e6e6e; } /* lot P3 : 4,8:1 sur le fond #f8f8f8 de la méthode (4,1:1 en #797979) */
.lw-contact__map-credit { font-size: 0.8125rem; }
.lw-matomo-optout input[type="checkbox"] { width: 24px; height: 24px; } /* cible minimale WCAG 2.5.8 */

/* ---------- Animations et interactions (Pierre 12/10 : « le site manque d'animations », inspiré de projectone.website) ----------
   Trois mécaniques, un seul timing : boutons qui s'inversent au survol, apparition au scroll (fondu + 16 px), cartes qui se soulèvent.
   Tout est coupé par prefers-reduced-motion (règle générale plus haut : transition none, et ci-dessous pour les animations). */

/* 1. Boutons : inversion noir/lime, flèche qui glisse de 3 px. Le header passe par la même règle. */
.lw-btn, .lw-header__cta { transition: background-color .2s var(--lw-ease-out), color .2s var(--lw-ease-out), transform .15s var(--lw-ease-out), box-shadow .15s var(--lw-ease-out); }
.lw-btn .lw-btn__icon, .lw-header__cta svg { transition: transform .2s var(--lw-ease-out); }
.lw-btn .lw-btn__icon path, .lw-header__cta svg path { transition: fill .2s var(--lw-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lw-btn:hover { transform: none; box-shadow: var(--lw-shadow-btn); background: var(--lw-black); color: var(--lw-white); }
  .lw-btn:hover .lw-btn__icon [fill="black"] { fill: var(--lw-white); }
  .lw-btn--dark:hover { background: var(--lw-lime); color: var(--lw-black); }
  .lw-btn--dark:hover .lw-btn__icon [fill="white"] { fill: var(--lw-black); }
  .lw-btn--on-dark:hover, .lw-card--dark .lw-btn:hover, .lw-tile--dark .lw-btn:hover { background: var(--lw-white); color: var(--lw-black); } /* sur fond noir : blanc, pas noir */
  .lw-btn--on-dark:hover { box-shadow: 2px 4px 0 0 var(--lw-white); }
  .lw-card--dark .lw-btn:hover .lw-btn__icon [fill="black"] { fill: var(--lw-black); }
  .lw-btn:hover .lw-btn__icon, .lw-header__cta:hover svg { transform: translateX(3px); }
  .lw-btn:active { transform: translate(2px, 4px); box-shadow: none; }
  .lw-header__cta:hover { background: var(--lw-lime); color: var(--lw-black); }
  .lw-header__cta:hover svg [fill="#C6F03C"] { fill: var(--lw-black); }
  .lw-form__submit:hover { background: var(--lw-white); color: var(--lw-black); } /* bouton noir sur carte lime : le lime ne se verrait pas */
  .lw-form__submit:hover .lw-btn__icon [fill="white"] { fill: var(--lw-black); }
}

/* 2. Menu : le soulignement lime monte depuis la gauche (le filet existait, il apparaissait d'un coup). */
@media (min-width: 1080px) {
  .lw-nav__list a { position: relative; border-bottom-color: transparent !important; }
  .lw-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--lw-lime); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--lw-ease-out); }
  .lw-nav__list a:hover::after, .lw-nav__list .current-menu-item > a::after, .lw-nav__list .current_page_item > a::after { transform: scaleX(1); }
}

/* 3. Apparition au scroll. nav.js pose .lw-reveal sur les blocs listés (sans JS : rien n'est masqué), puis .is-in quand
   le bloc entre dans l'écran ; --i décale les éléments d'une même grille de 60 ms. Les deux classes sont retirées à la
   fin de l'animation pour rendre la main aux survols (une animation en fill-mode garderait son transform). */
.lw-reveal { opacity: 0; }
.lw-reveal.is-in { animation: lw-reveal .55s var(--lw-ease-out) both; animation-delay: calc(var(--lw-ri, 0) * 60ms); } /* --lw-ri et pas --i : --i sert déjà aux étapes Expertises et aux pastilles */
@keyframes lw-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 4. Cartes : elles se soulèvent de 2 px et l'ombre s'allonge ; tuiles Réalisations : zoom léger de l'image. */
.lw-offre__card { transition: transform .2s var(--lw-ease-out), box-shadow .2s var(--lw-ease-out); }
.lw-tile--image img { transition: transform .4s var(--lw-ease-out); }
.lw-step__num { transition: background-color .2s var(--lw-ease-out), color .2s var(--lw-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lw-offre__card:hover { transform: translate(-2px, -2px); box-shadow: 8px 10px 0 0 var(--lw-shadow); }
  .lw-offre__card.lw-card--dark:hover { box-shadow: 8px 10px 0 0 #d0d0d0; }
  .lw-tile--image a:hover img { transform: scale(1.04); }
}

/* 5. Compteurs : nav.js fait monter le chiffre de 0 à sa valeur à l'entrée dans l'écran (le texte reste dans le HTML). */

/* 6. Bandes de logos et d'avis (Pierre 12/10 : « on ne peut pas les faire défiler nous-même ») : la piste n'est plus animée
   en CSS, c'est un vrai conteneur qui défile (molette, glisser, doigt), poussé par nav.js quand personne n'y touche.
   Barre de défilement masquée, curseur main. Les flèches de la bande d'avis tournent les avis un par un. */
.lw-clients__viewport, .lw-avis-band__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.lw-clients__viewport::-webkit-scrollbar, .lw-avis-band__viewport::-webkit-scrollbar { display: none; }
.lw-clients__viewport.is-dragging, .lw-avis-band__viewport.is-dragging { cursor: grabbing; user-select: none; }
.lw-clients__viewport.is-dragging .lw-client, .lw-avis-band__viewport.is-dragging .lw-avis { pointer-events: none; }
.lw-clients__track, .lw-avis-band__track { animation: none; }
.lw-avis-band__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.lw-band-arrow {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--lw-white); color: var(--lw-black); border: var(--lw-border); vertical-align: middle; position: relative;
  transition: background-color .2s var(--lw-ease-out), color .2s var(--lw-ease-out);
}
.lw-band-arrow::before { content: ""; position: absolute; inset: -5px; }
.lw-band-arrow:hover { background: var(--lw-lime); }
.lw-band-arrow[hidden] { display: none; }
.lw-avis-band__pause { margin-left: 0; }
.lw-avis-band__arrows { display: inline-flex; gap: 8px; margin-left: 10px; }
@media (prefers-reduced-motion: reduce) {
  .lw-reveal { opacity: 1; animation: none !important; }
  .lw-clients__viewport, .lw-avis-band__viewport { scrollbar-width: thin; }
}

/* Sous-menu Expertises (12/10) : les trois pages produit, chacune avec sa pastille (un produit, une surface).
   Le lien « Expertises » mène toujours à la page de choix ; le chevron (bouton) ouvre la liste au clavier et au doigt. */
.lw-nav__sub { list-style: none; margin: 0; padding: 0; }
.lw-nav__sub a::after { display: none !important; } /* pas de soulignement lime animé dans la liste */
.lw-nav__sub-pill { font-size: 0.9375rem; line-height: 22px; }
.lw-nav__sub-pill.lw-pill--dark { border-color: var(--lw-black); }
.lw-nav__list .lw-nav__sub-pill { color: var(--lw-black); } /* sinon la couleur du lien (blanc, lime si page courante) passe dans la pastille blanche */
.lw-nav__list .lw-nav__sub-pill.lw-pill--dark { color: var(--lw-white); }
.lw-nav__toggle { display: none; }
@media (min-width: 1080px) {
  .lw-nav__has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
  .lw-nav__toggle { display: grid; place-items: center; width: 22px; height: 24px; margin-right: -6px; padding: 0; border: 0; background: none; color: var(--lw-white); cursor: pointer; }
  .lw-nav__toggle { position: relative; }
  .lw-nav__toggle::after { content: ""; position: absolute; inset: -5px -5px -5px -1px; } /* 13/10 : zone cliquable 28 × 34 (toute la hauteur de la barre), sans empiéter sur « Expertises » à gauche ni « Réalisations » à droite ; le chevron ne bouge pas */
  .lw-nav__toggle svg { transition: transform .2s var(--lw-ease-out); }
  .lw-nav__has-sub:hover .lw-nav__toggle svg, .lw-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .lw-nav__sub {
    position: absolute; top: calc(100% + 16px); right: -20px; z-index: 20; width: 300px; padding: 8px;
    border-radius: var(--lw-radius); background: var(--lw-white); color: var(--lw-black);
    box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--lw-ease-out), transform .18s var(--lw-ease-out), visibility 0s .18s;
  }
  .lw-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* pont : le survol ne se perd pas entre le menu et la liste */
  /* Pas de :focus-within : au clavier, c'est le bouton qui ouvre (motif « disclosure »), sinon Échap ne pouvait pas refermer. */
  .lw-nav__has-sub:hover > .lw-nav__sub, .lw-nav__toggle[aria-expanded="true"] + .lw-nav__sub {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .lw-nav__sub a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: var(--lw-radius-inner); white-space: normal; color: var(--lw-black); transition: background-color .15s var(--lw-ease-out); }
  .lw-nav__sub a:hover, .lw-nav__sub .current-menu-item > a { background: var(--lw-off-white); }
  .lw-nav__sub-desc { font-weight: var(--lw-fw-medium); font-size: 0.9375rem; line-height: 1.3; color: var(--lw-grey-label); }
}
@media (max-width: 1079px) {
  /* Menu mobile : les trois pages toujours visibles sous « Expertises », en retrait, sans accordéon (un tap de moins). */
  .lw-nav__sub { margin: 0 0 6px; padding-left: 14px; }
  .lw-nav__list .lw-nav__sub a { display: flex; align-items: center; padding: 8px 0; border-bottom: 0; }
  .lw-nav__sub-pill.lw-pill--dark { border-color: var(--lw-white); }
  .lw-nav__sub-desc { display: none; }
  .lw-nav__sub .current-menu-item .lw-nav__sub-pill { box-shadow: 0 0 0 3px var(--lw-lime); } /* page courante : anneau lime, comme le texte lime des autres entrées */
}

/* ---------- Audit responsive 12/10 (AUDIT-RESPONSIVE-1210.md) ---------- */
/* 3. Bouton « Voir l'offre Plateforme sur mesure » : le texte débordait du bouton de 24 px à 1024 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .lw-offre__btn { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.3; }
}
/* 7. Téléphone et email ne se coupent plus (« bonjour@lille- / web.fr ») ; seul le point médian peut passer à la ligne */
.lw-contact__address a, .lw-footer__text a, .lw-nav__direct a { white-space: nowrap; }
/* P3 : carte contact de la home collante seulement si l'écran est assez haut pour la montrer en entier */
@media (max-height: 979px) { .lw-contact__card { position: static; } }
/* P3 : cartes d'avis, la citation suit les étoiles, l'auteur reste en bas (plus de blanc entre les deux) */
.lw-avis { justify-content: flex-start; }
.lw-avis__body { flex: 1; }
.lw-avis__author { margin-top: auto; padding-top: 12px; }
/* P3 : petits liens texte, zone tactile agrandie sans changer la mise en page */
@media (pointer: coarse) {
  .lw-avis-band__head a, .lw-xp-link--small { padding-block: 12px; margin-block: -12px; }
  .lw-rf-fiche dd a { padding-block: 4px; margin-block: -4px; } /* 27 px : au-dessus de 24 sans déborder sur le libellé « Produit » */
}
/* 4. Contact de 1024 à 1319 : formulaire et colonne « Trois façons » côte à côte (avant : formulaire seul à gauche, moitié droite vide) */
@media (min-width: 1024px) and (max-width: 1319px) {
  .lw-page-contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; }
  .lw-page-contact__card { max-width: none; }
  .lw-page-contact__aside { flex-direction: column; gap: 32px; }
  .lw-page-contact__portrait { width: min(100%, 300px); }
  .lw-page-contact__infos { flex: none; min-width: 0; }
}

/* ---------- Revue de charte de Maxence (13/10) ----------
   Blanc = fond de base ; noir = alternance de sections entières, jamais une carte ni une étiquette ; lime = boutons
   d'action, points des étiquettes, chiffres clés. Police manuscrite : toujours avec une flèche, hors des blocs, une
   seule taille (18 px, --lw-fs-hand). Tag git avant-revue-maxence-1310. */
.lw-hand, .lw-hand > span { font-size: var(--lw-fs-hand) !important; line-height: 1.15 !important; } /* !important : une dizaine de règles de taille par note et par écran, la charte en impose une seule */
.lw-situations__note { display: inline-flex; align-items: flex-start; gap: 6px; }
.lw-situations__note-arrow { width: 44px; height: 34px; flex: none; margin: 25px 0 0 -14px; transform: rotate(50deg) scaleX(-1); } /* départ mesuré à hauteur du milieu des minuscules (Pierre : la flèche démarrait au-dessus de la ligne) */ /* même geste que la méthode : part de la fin du texte, bombe à droite, redescend vers la phrase dessous */

/* CTA (13/10, Maxence + Pierre) : plus d'ombre portée, boutons homogènes. Au survol : le bouton s'enfonce de 2 px (le geste
   du badge Google du hero) et s'inverse (vert → noir, noir → vert) ; la flèche est verte dès que le bouton est noir. */
html .lw-btn, html .lw-btn:hover, html .lw-btn:active, html .lw-btn--on-dark, html .lw-btn--on-dark:hover, html .lw-btn--dark.lw-btn--on-lime { box-shadow: none; }
.lw-btn--dark .lw-btn__icon [fill="white"], .lw-btn--dark .lw-btn__icon [fill="black"] { fill: var(--lw-lime); }
@media (hover: hover) and (pointer: fine) {
  html .lw-btn:hover { transform: translate(1px, 2px); }
  html .lw-btn:active { transform: translate(1px, 3px); }
  .lw-btn:hover .lw-btn__icon [fill="black"], .lw-btn:hover .lw-btn__icon [fill="white"] { fill: var(--lw-lime); }
  .lw-btn--dark:hover .lw-btn__icon [fill], .lw-btn--on-dark:hover .lw-btn__icon [fill], .lw-form__submit:hover .lw-btn__icon [fill] { fill: var(--lw-black); } /* le bouton passe en clair : flèche noire */
  .lw-btn:hover .lw-btn__icon, .lw-header__cta:hover svg { transform: none; } /* le bouton bouge déjà : la flèche ne glisse plus en plus */
}

/* Studio, en-tête (13/10, Maxence : « on aligne verticalement center ») : portrait, titre et texte centrés sur un même axe,
   et le bloc centré dans la bande entre le haut de la section et la ligne des avis (405 px, comme avant). Ordinateur seulement. */
@media (min-width: 1320px) {
  .lw-studio { padding-top: 0; }
  .lw-studio__head { align-items: center; min-height: 405px; }
  .lw-studio__intro { align-items: center; margin-top: 0; }
}

/* Habillage inspiré de projectone.website (13/10, Maxence) : blanc cassé (--lw-cream), grand rond plein derrière le hero,
   vignettes de réalisations inclinées autour du titre. Retour arrière : git tag avant-habillage-po-1310. */
.lw-hero::before { background: var(--lw-cream); }
.lw-hero__vignettes { display: none; }
@media (min-width: 1360px) { /* sous 1360, les vignettes touchaient les étiquettes */
  .lw-hero__vignettes { display: block; position: absolute; inset: 0 0 auto 0; height: 700px; max-width: 1440px; margin-inline: auto; pointer-events: none; z-index: 0; }
  .lw-hero__vignette { position: absolute; width: 220px; margin: 0; padding: 8px 8px 10px; background: var(--lw-white); border: var(--lw-border); border-radius: var(--lw-radius); box-shadow: var(--lw-shadow-card); }
  .lw-hero__vignette img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
  .lw-hero__vignette figcaption { margin-top: 8px; font-size: 0.8125rem; font-weight: var(--lw-fw-semibold); line-height: 1.2; }
  .lw-hero__vignette--g1 { left: 4%;  top: 70px;  transform: rotate(-7deg); }
  .lw-hero__vignette--g2 { left: 9%;  top: 390px; transform: rotate(5deg); }
  .lw-hero__vignette--d1 { right: 5%; top: 110px; transform: rotate(6deg); }
  .lw-hero__vignette--d2 { right: 8%; top: 420px; transform: rotate(-5deg); }
}

/* Dômes (13/10, Maxence, sur le modèle de projectone.website) : une section noire ne s'arrête pas à plat, la section claire
   suivante monte dedans en grand arc. Le fond de la section est noir, un très grand rond blanc posé sur son bord haut dessine
   l'arc ; le noir reste sur les côtés et prolonge la section du dessus. Home : Réalisations → Offre seulement (Pierre : le second dôme, Studio → Contact, faisait trop sur une section déjà pleine). */
.lw-dome { position: relative; isolation: isolate; overflow: hidden; background: var(--lw-black); padding-top: 96px; }
.lw-dome::before { content: ""; position: absolute; left: 50%; top: 0; width: max(2600px, 190vw); height: auto; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--lw-white); z-index: -1; }
.lw-dome--creme::before { background: var(--lw-cream); }
/* La méthode passe du gris #f8f8f8 au blanc cassé (Maxence : casser le blanc-gris-noir), même teinte que le rond du hero */
.lw-methode { background: var(--lw-white); } /* 13/10 (Maxence) : blanc, pour se distinguer du dôme blanc cassé de l'offre juste au-dessus */


/* Header transparent à l'arrivée (13/10, Pierre) : en haut de page, pas d'aplat blanc, le rond du hero passe dessous.
   Dès qu'on défile (nav.js pose .is-scrolled au-delà de 8 px), il reprend son fond blanc, y compris quand il réapparaît. */
.lw-header { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .2s var(--lw-ease-out), background-color .2s var(--lw-ease-out); }
.lw-header:not(.is-scrolled) { background: transparent; }
html.lw-menu-open .lw-header { background: var(--lw-white); } /* menu mobile ouvert : fond plein */

/* « Ça vous parle ? » (13/10, Pierre) : huit pastilles au lieu de quatre, posées en vrac comme des autocollants
   (rotations et décalages variés) au lieu d'une grille 2 × 2. La chute à l'arrivée (lw-drop) garde chaque rotation. */
.lw-situations__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 28px; max-width: 1240px; margin-inline: auto; padding-block: 8px; }
.lw-situations__list li { left: 0 !important; }
.lw-situations__list li:nth-child(1) { --r: -2.5deg; top: 4px;  left: -30px !important; }
.lw-situations__list li:nth-child(2) { --r: 2deg;    top: -6px; left: 20px !important; }
.lw-situations__list li:nth-child(3) { --r: 1.5deg;  top: 6px;  left: -10px !important; }
.lw-situations__list li:nth-child(4) { --r: -3deg;   top: -4px; left: 30px !important; }
.lw-situations__list li:nth-child(5) { --r: -1.5deg; top: 2px;  left: -60px !important; }
.lw-situations__list li:nth-child(6) { --r: 3deg;    top: -6px; left: 10px !important; }
.lw-situations__list li:nth-child(7) { --r: 2.5deg;  top: 4px;  left: 90px !important; }
.lw-situations__list li:nth-child(8) { --r: -2deg;   top: -2px; left: -110px !important; }
@media (max-width: 819px) { .lw-situations__list li:nth-child(n) { top: 0 !important; left: 0 !important; } } /* :nth-child(n) : sinon les décalages ci-dessus gagnent et coupent les pastilles sur mobile */
.lw-step--light { background: var(--lw-lime); } /* 13/10 : plus de cartes blanches « vous » dans la frise, toutes vertes (maquette) */

/* Icône au-dessus de « Ça vous parle ? » (13/10) : mégaphone Lucide dans une tuile blanche à filet et ombre de carte,
   inclinée comme le picto du hero. Remplace le dessin de mégaphone (abandonné). */
.lw-situations { gap: 18px; }
.lw-situations__icone { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 4px; border: var(--lw-border); border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: var(--lw-shadow-card); transform: rotate(-8deg); }

/* Listes de l'offre (13/10, Pierre) : pas de filet sous le dernier élément, il ne sépare de rien (bouton ou note dessous). */
.lw-offre__list li:last-child, .lw-offre__list--suivi li:nth-last-child(2) { border-bottom: 0; }

/* Hero (13/10, Pierre : espaces pas homogènes) : même écart étiquettes → bouton et bouton → badge Google. */
.lw-hero__pills { margin-bottom: 24px; }
.lw-hero__badge { margin-top: 24px; }

/* Arrivée du hero (13/10, Maxence), en séquence : 1. les vignettes entrent depuis les bords de l'écran en tournant
   légèrement, 2. le texte et les boutons du centre apparaissent, 3. le mur de logos apparaît, 4. il se met à défiler
   (nav.js retarde le départ du défilement). Une fois, au chargement ; rien sous prefers-reduced-motion. */
@media (min-width: 1360px) {
  /* le calque des vignettes prend toute la largeur de l'écran : elles viennent du vrai bord, pas d'un bord invisible */
  .lw-hero__vignettes { max-width: none; overflow: clip; }
  .lw-hero__vignette--g1 { left: calc(50% - 720px + 58px);  --rot: -7deg; --dx: -62vw; --dy: -40px; --drot: -40deg; --delai: 0s; }
  .lw-hero__vignette--g2 { left: calc(50% - 720px + 130px); --rot: 5deg;  --dx: -62vw; --dy: 60px;  --drot: 36deg;  --delai: .5s; }
  .lw-hero__vignette--d1 { right: calc(50% - 720px + 72px); --rot: 6deg;  --dx: 62vw;  --dy: -50px; --drot: 40deg;  --delai: .25s; }
  .lw-hero__vignette--d2 { right: calc(50% - 720px + 115px);--rot: -5deg; --dx: 62vw;  --dy: 70px;  --drot: -36deg; --delai: .75s; }
}
@media (prefers-reduced-motion: no-preference) {
  .lw-hero__inner > * { animation: lw-hero-texte .6s var(--lw-ease-out) both; animation-delay: calc(var(--lw-hero-t0, 0s) + var(--k, 0) * 70ms); }
  .lw-hero__inner > :nth-child(2) { --k: 1; } .lw-hero__inner > :nth-child(3) { --k: 2; } .lw-hero__inner > :nth-child(4) { --k: 3; }
  .lw-hero__inner > :nth-child(5) { --k: 4; } .lw-hero__inner > :nth-child(6) { --k: 5; }
  .lw-hero .lw-clients { animation: lw-hero-texte .7s var(--lw-ease-out) both; animation-delay: var(--lw-hero-t1, .5s); }
}
@media (min-width: 1360px) and (prefers-reduced-motion: no-preference) {
  .lw-hero { --lw-hero-t0: 1.3s; --lw-hero-t1: 1.95s; } /* le texte attend que les vignettes soient posées */
  .lw-hero__vignette { animation: lw-vignette-entree 1s cubic-bezier(.16, 1, .3, 1) var(--delai) both; }
}
@keyframes lw-vignette-entree {
  from { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + var(--drot))); }
  to   { transform: rotate(var(--rot)); }
}
@keyframes lw-hero-texte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Mur de logos (15/10, Pierre) : La Redoute, première de la liste, est centrée à l'écran à l'arrivée ; cinq cartes à sa
   gauche (les dernières de la boucle). 125.5 px = moitié d'une carte de 251 px. */
.lw-clients__track { margin-left: calc(50% - 125.5px - 5 * var(--lw-card-step)); }

/* Pastilles cliquables : un seul état de survol partout (15/10, Pierre : la pastille du hero se soulevait avec ombre,
   celle des pages produit seulement de 1 px). Concerne les pastilles-liens du hero de la home, les liens produit des
   pages Expertises (.lw-xp-pill-link) et les filtres de la page Réalisations. Souris seulement (tactile : rien). */
@media (hover: hover) and (pointer: fine) {
  a.lw-pill, button.lw-pill { transition: transform .15s var(--lw-ease-out), box-shadow .15s var(--lw-ease-out); }
  a.lw-pill:hover, button.lw-pill:hover { transform: translateY(-1px); box-shadow: var(--lw-shadow-btn); }
}

/* Note Google (15/10, Maxence : trop d'éléments en forme de bouton au même endroit) : le badge perd son allure de bouton
   (plus de contour, d'ombre ni de fond) et devient une ligne de texte cliquable sous le bouton. Il reste au même endroit,
   au moment de la décision. Même traitement partout où il apparaît (home, heros Expertises et Studio). */
html .lw-hero__badge { padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html .lw-hero__badge:hover { box-shadow: none; transform: none; }
html .lw-hero__badge .lw-hero__badge-text { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s var(--lw-ease-out); }
html .lw-hero__badge:hover .lw-hero__badge-text { text-decoration-color: currentColor; }
.lw-hero__badge { margin-top: 18px; }

/* « Ça vous parle ? » (15/10, Pierre : le vrac ne se lit pas, on voit deux colonnes puis deux pastilles seules).
   Les pastilles font 450 à 700 px : en flex, elles se rangent toujours deux par ligne. Grille de 12 colonnes avec des
   lignes alternées de 1, 2, 1, 2, 2 pastilles (ordre visuel 1 à 5, 8, 6, 7 pour que chaque paire tienne), chacune décalée différemment : plus de colonne lisible. Ordinateur seulement. */
@media (min-width: 1280px) {
  .lw-situations__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 16px; max-width: 1240px; justify-content: stretch; }
  .lw-situations__list li:nth-child(n) { top: 0 !important; left: 0 !important; width: max-content; } /* :nth-child(n) pour passer devant les décalages left/top de l'essai précédent */
  /* largeurs mesurées : 534, 511, 579, 576, 611, 439, 707, 519 px ; lignes : 1 | 2+3 | 4 | 5+8 | 6+7 */
  .lw-situations__list li:nth-child(1) { grid-area: 1 / 2 / 2 / 8;  justify-self: start;  --r: -2.5deg; }
  .lw-situations__list li:nth-child(2) { grid-area: 2 / 1 / 3 / 7;  justify-self: start;  --r: 2deg; }
  .lw-situations__list li:nth-child(3) { grid-area: 2 / 7 / 3 / 13; justify-self: end;    --r: -1.5deg; }
  .lw-situations__list li:nth-child(4) { grid-area: 3 / 5 / 4 / 12; justify-self: center; --r: 3deg; }
  .lw-situations__list li:nth-child(5) { grid-area: 4 / 1 / 5 / 7;  justify-self: start;  --r: -2deg; }
  .lw-situations__list li:nth-child(8) { grid-area: 4 / 7 / 5 / 13; justify-self: end;    --r: 2.5deg; }
  .lw-situations__list li:nth-child(6) { grid-area: 5 / 1 / 6 / 6;  justify-self: start;  --r: 1.5deg; }
  .lw-situations__list li:nth-child(7) { grid-area: 5 / 6 / 6 / 13; justify-self: end;    --r: -3deg; }
}
/* Bords gauche et droit décalés d'une pastille à l'autre (sinon on relit deux colonnes) */
@media (min-width: 1280px) {
  .lw-situations__list li:nth-child(1) { margin-left: 190px; }
  .lw-situations__list li:nth-child(2) { margin-left: 30px; }
  .lw-situations__list li:nth-child(3) { margin-right: 70px; }
  .lw-situations__list li:nth-child(8) { margin-right: 40px; }
  .lw-situations__list li:nth-child(6) { margin-left: 50px; }
}

/* 15/10 : FAQ home sans rond de fond. Option 1 testée (rond crème centré derrière la carte « On se voit ? ») : la carte fait 871 px de haut,
   le rond ne dépasse qu'en croissants, déborde de l'écran à droite et ne suit pas la carte collante. Option 2 retenue avec Pierre. */
.lw-contact::before { display: none; }

/* 15/10 (essai, à juger par Pierre) : « Ça vous parle ? » sur une bande crème pleine largeur, la FAQ au-dessus reste blanche
   (alternance blanc / crème). La bande descend jusqu'au bas de la section (padding-bottom de .lw-contact : 120 px, 64 px en mobile). */
.lw-situations { position: relative; }
.lw-situations::before { content: ""; position: absolute; left: 50%; top: -96px; bottom: -120px; width: 100vw; transform: translateX(-50%); background: var(--lw-cream); z-index: -1; pointer-events: none; }
.lw-contact { padding-bottom: 120px; }
.lw-situations { margin-top: 206px; }
@media (max-width: 1319px) { .lw-situations { margin-top: 152px; } .lw-situations::before { top: -72px; } }
@media (max-width: 767px) { .lw-contact { padding-bottom: 64px; } .lw-situations::before { top: -48px; bottom: -64px; } .lw-situations { margin-top: 104px; } }

/* 15/10 : home allégée. La pastille porte le titre (h3) : on neutralise les marges de titre ; carte Suivi : bloc de gauche centré verticalement face à la liste (sinon grand vide sous le bouton). */
.lw-offre__card-head h3.lw-offre__card-tag { margin: 0 0 6px; }
@media (min-width: 1320px) { .lw-offre__card--suivi { align-items: center; } }
.lw-offre__suivi-head .lw-offre__card-tag { justify-self: start; margin: 0 0 -4px; }
.lw-offre__list li > svg { flex: 0 0 28px; width: 28px; height: 28px; } /* 15/10 : icônes Lucide ; sans ça une ligne longue écrase l'icône */
/* 15/10 : six points par carte (repris des pages produit) : corps 1rem, lignes resserrées */
.lw-offre__list--6 li, .lw-offre__list--suivi li { font-size: 1rem; min-height: 52px; padding: 6px 0; gap: 12px; } /* Suivi aligné (Pierre) : même composant, même corps */
.lw-offre__list--6 li > svg, .lw-offre__list--suivi li > svg { flex-basis: 24px; width: 24px; height: 24px; }
/* 15/10 : liste Suivi en caractéristiques, deux colonnes à droite sur grand écran (une colonne en dessous de 1320) */
.lw-offre__list--suivi li:nth-last-child(2) { border-bottom: 1px solid var(--lw-black); }
.lw-offre__list--suivi li:last-child { border-bottom: 0; }
@media (min-width: 1320px) {
  .lw-offre__list--suivi { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-self: center; }
  .lw-offre__list--suivi li:nth-last-child(2) { border-bottom: 0; }
}