/* ==========================================================================
   France Dératisation — design system + homepage
   Tokens = source de vérité (voir docs/DESIGN-SYSTEM.md)
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

/* ---------- Poppins auto-hébergée (sous-ensemble latin, SIL OFL 1.1 : assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/poppins-200.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: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.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; }

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  [hidden]:not(.diag-back) { display: none !important; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* couleurs */
    --bg: #F6F8FA;
    --surface: #FFFFFF;
    --surface-2: #EEF2F6;
    --ice: #EAF4FF;
    --ice-2: #D7E9FF;
    --night: #07192E;
    --night-2: #0E2742;
    --night-line: rgba(255,255,255,.10);
    --blue: #1468D8;
    --blue-hover: #0F57B8;
    --ink: #111417;
    --ink-2: #5B6673;
    --ink-3: #8A94A0;
    --line: #E3E8EE;
    --ok: #1F8A5B;
    --ok-bg: #E6F4ED;
    --warn: #B26B00;
    --warn-bg: #FFF3E0;

    /* typo */
    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
    --fs-h1: clamp(2.125rem, 1.5rem + 2.9vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    --fs-h3: clamp(1.25rem, 1.15rem + .45vw, 1.625rem);
    --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
    --fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);
    --fs-small: .875rem;
    --fs-eyebrow: .78rem;

    /* espace (grille 4px) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 160px;
    --section-y: clamp(72px, 10vw, 160px);
    --gutter: clamp(16px, 4vw, 40px);
    --container: 1280px;
    --container-wide: 1440px;

    /* forme */
    --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(7,25,46,.04), 0 4px 16px rgba(7,25,46,.05);
    --shadow-2: 0 2px 6px rgba(7,25,46,.05), 0 18px 48px rgba(7,25,46,.10);
    --shadow-3: 0 8px 24px rgba(7,25,46,.08), 0 40px 100px rgba(7,25,46,.16);

    /* mouvement */
    --ease: cubic-bezier(.2,.7,.2,1);
    --t-micro: 160ms; --t-state: 280ms; --t-reveal: 520ms;

    --header-h: 72px;
    --tabbar-h: 0px;
  }
  @media (max-width: 899px) {
    :root { --header-h: 60px; --tabbar-h: 72px; }
  }
}

/* ---------- base ---------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
  body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: var(--tabbar-h);
  }
  h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: var(--ice-2); }
  .skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    background: var(--night); color: #fff; padding: 12px 16px; border-radius: var(--r-sm);
  }
  .skip-link:focus { top: 12px; }
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ---------- layout ---------- */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
  .section { padding-block: var(--section-y); }
  .section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
  .section-head p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-4); max-width: 60ch; }
}

/* ---------- components ---------- */
@layer components {

  /* eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: var(--s-4);
  }
  .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
  .on-night .eyebrow { color: #A9C7EE; }
  .on-night .eyebrow::before { background: #5AA2FF; }

  /* boutons */
  .btn {
    --h: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--h); padding: 0 24px; border-radius: var(--r-pill);
    font-weight: 500; font-size: 1rem; line-height: 1; white-space: nowrap;
    transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), color var(--t-micro);
  }
  .btn:active { transform: scale(.98); }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px rgba(20,104,216,.25); }
  .btn--primary:hover { background: var(--blue-hover); }
  .btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .btn--light { background: #fff; color: var(--night); }
  .btn--light:hover { background: var(--ice); }
  .btn--sm { --h: 44px; padding: 0 18px; font-size: .9375rem; }
  .btn--block { width: 100%; }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--blue);
  }
  .link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease); }
  .link-arrow:hover svg { transform: translateX(3px); }
  .on-night .link-arrow { color: #8CC0FF; }

  .call-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
  .call-link svg { width: 16px; height: 16px; color: var(--blue); }

  /* chips */
  .chip {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
    padding: 0 18px; border-radius: var(--r-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    font-weight: 500; font-size: .9375rem; text-align: left;
    transition: box-shadow var(--t-micro) var(--ease), background-color var(--t-micro), color var(--t-micro), transform var(--t-micro) var(--ease);
  }
  .chip:hover { box-shadow: inset 0 0 0 1px var(--blue); }
  .chip:active { transform: scale(.98); }
  .chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--ice); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue-hover); }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ice-2); flex: none; transition: background-color var(--t-micro); }
  .chip:hover .dot, .chip[aria-pressed="true"] .dot, .chip[aria-checked="true"] .dot { background: var(--blue); }

  /* status pill */
  .pill {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    border-radius: var(--r-pill); font-size: .75rem; font-weight: 500; letter-spacing: .01em;
    background: var(--surface-2); color: var(--ink-2);
  }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pill--blue { background: var(--ice); color: var(--blue); }
  .pill--ok { background: var(--ok-bg); color: var(--ok); }
  .pill--warn { background: var(--warn-bg); color: var(--warn); }
  .pill--plain::before { display: none; }

  /* carte */
  .card {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  }

  /* photo placeholder (remplacé par <picture> en prod) */
  .photo {
    position: relative; overflow: hidden; border-radius: inherit;
    background:
      radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.55), transparent 60%),
      linear-gradient(160deg, #DCE5EE 0%, #C9D5E1 55%, #B9C7D5 100%);
    isolation: isolate;
  }
  .photo--warm { background: radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.5), transparent 60%), linear-gradient(160deg, #E6E3DE, #D3CEC6 60%, #C2BBB1); }
  .photo--ice { background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.6), transparent 60%), linear-gradient(160deg, #E3EEF9, #C8DBEF 60%, #AFC8E3); }
  .photo--night { background: radial-gradient(90% 70% at 70% 20%, rgba(90,162,255,.18), transparent 60%), linear-gradient(160deg, #15304F, #0C2340 60%, #081B33); }
  .photo::before {
    /* lignes architecturales discrètes : évoquent un intérieur sans imagerie anxiogène */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background:
      linear-gradient(90deg, transparent 62%, rgba(255,255,255,.35) 62% 62.4%, transparent 62.4%),
      linear-gradient(0deg, transparent 28%, rgba(255,255,255,.3) 28% 28.4%, transparent 28.4%);
  }
  .photo[data-shot]::after {
    content: "Photo terrain · " attr(data-shot);
    position: absolute; left: 14px; bottom: 14px; right: 14px; max-width: max-content;
    font-size: .7rem; line-height: 1.35; color: rgba(17,20,23,.6);
    background: rgba(255,255,255,.7); padding: 6px 10px; border-radius: 10px;
    backdrop-filter: blur(6px);
  }
  .photo--night[data-shot]::after { color: rgba(255,255,255,.7); background: rgba(7,25,46,.55); }

  /* panneau d'interface flottant (langage app) */
  .float-card {
    background: rgba(255,255,255,.92); border-radius: var(--r-md);
    box-shadow: var(--shadow-2); padding: 14px 16px;
    display: grid; gap: 6px; font-size: .875rem; min-width: 220px;
  }
  .float-card .fc-label { font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
  .float-card .fc-value { font-weight: 600; letter-spacing: -0.01em; }
  .float-card .fc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .no-js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {

  /* ---------- header ---------- */
  .c-header {
    position: sticky; top: 0; z-index: 50; height: var(--header-h);
    transition: background-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
  }
  .c-header.is-scrolled { background: rgba(246,248,250,.82); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--line); }
  .c-header .container--wide { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
  .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
  .logo-mark {
    width: 32px; height: 32px; border-radius: 10px; background: var(--night); color: #fff;
    display: grid; place-items: center;
  }
  .logo-mark svg { width: 18px; height: 18px; }
  .logo-text { display: grid; line-height: 1.05; }
  .logo-text b { font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
  .logo-text small { font-size: .66rem; font-weight: 500; letter-spacing: .32em; color: var(--blue); }
  .nav { display: flex; gap: var(--s-1); margin-left: auto; }
  .nav a { padding: 10px 14px; border-radius: var(--r-pill); font-weight: 500; font-size: .9375rem; color: var(--ink-2); transition: color var(--t-micro), background-color var(--t-micro); }
  .nav a:hover { color: var(--ink); background: rgba(7,25,46,.04); }
  .header-actions { display: flex; align-items: center; gap: var(--s-5); }
  .menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; margin-left: auto; }
  .menu-btn svg { width: 22px; height: 22px; }
  @media (max-width: 899px) {
    .nav, .header-actions { display: none; }
    .menu-btn { display: grid; }
  }

  /* ---------- 1. hero ---------- */
  .c-hero { position: relative; padding-top: clamp(40px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 120px); overflow: clip; }
  .c-hero::before {
    content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
    background: radial-gradient(50% 45% at 50% 30%, #E4F0FF 0%, rgba(234,244,255,0) 70%);
  }
  .hero-inner { max-width: 880px; margin-inline: auto; text-align: center; }
  .hero-place { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-6); }
  .hero-place svg { width: 16px; height: 16px; color: var(--blue); }
  .c-hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.045em; }
  .c-hero h1 span { color: var(--ink-3); }
  .hero-lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 54ch; margin: var(--s-5) auto 0; }

  .c-launcher {
    margin: clamp(32px, 5vw, 56px) auto 0; max-width: 760px; text-align: left;
    background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
    padding: clamp(10px, 1.5vw, 14px);
  }
  .launcher-field {
    display: flex; align-items: center; gap: 12px; min-height: 64px;
    padding: 0 8px 0 20px; border-radius: calc(var(--r-xl) - 10px); background: var(--surface-2);
    transition: box-shadow var(--t-micro), background-color var(--t-micro);
  }
  .launcher-field:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--blue); }
  .launcher-field > svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
  .launcher-field input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.0625rem; height: 56px; outline: none; }
  .launcher-field input::placeholder { color: var(--ink-2); }
  .launcher-go { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; transition: background-color var(--t-micro); }
  .launcher-go:hover { background: var(--blue-hover); }
  .launcher-go svg { width: 20px; height: 20px; }
  .launcher-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 6px 6px; }
  .launcher-chips .chip { min-height: 44px; }
  @media (max-width: 599px) {
    .launcher-chips { gap: 6px; padding: 12px 4px 4px; }
    .launcher-chips .chip { padding: 0 12px; font-size: .8438rem; gap: 8px; min-height: 44px; }
    .launcher-field { padding-left: 14px; gap: 8px; }
    .launcher-field input { font-size: 1rem; }
  }
  .hero-secondary { margin-top: var(--s-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-6); color: var(--ink-2); font-size: .9375rem; }

  /* cartes flottantes décoratives du hero */
  .hero-float { position: absolute; z-index: 1; pointer-events: none; }
  .hero-float--a { left: max(var(--gutter), calc(50% - 720px)); top: 38%; transform: rotate(-2deg); }
  .hero-float--b { right: max(var(--gutter), calc(50% - 720px)); top: 22%; transform: rotate(1.5deg); }
  .hero-float--c { right: max(calc(var(--gutter) + 40px), calc(50% - 660px)); top: 66%; }
  .progress-mini { display: flex; gap: 4px; margin-top: 4px; }
  .progress-mini i { height: 4px; flex: 1; border-radius: 4px; background: var(--surface-2); }
  .progress-mini i.on { background: var(--blue); }
  @media (max-width: 1279px) { .hero-float { display: none; } }

  /* ---------- 2. problèmes (bento) ---------- */
  .c-pests .bento {
    display: grid; gap: clamp(12px, 1.4vw, 20px);
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
  }
  .c-pest-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1);
    transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
    min-height: 220px;
  }
  .c-pest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .c-pest-card .photo { position: absolute; inset: 0; border-radius: 0; }
  .c-pest-card .photo::after { top: 14px; bottom: auto; }
  .pest-body {
    position: relative; margin: 10px; padding: 18px 20px; border-radius: calc(var(--r-lg) - 8px);
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  }
  .pest-body h3 { font-size: var(--fs-h3); }
  .pest-body p { color: var(--ink-2); font-size: .9375rem; margin-top: 4px; line-height: 1.45; }
  .pest-go { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; transition: background-color var(--t-micro), color var(--t-micro); }
  .pest-go svg { width: 18px; height: 18px; }
  .c-pest-card:hover .pest-go { background: var(--blue); color: #fff; }
  .c-pest-card--xl { grid-column: span 7; grid-row: span 3; min-height: 440px; }
  .c-pest-card--lg { grid-column: span 5; grid-row: span 3; min-height: 440px; }
  .c-pest-card--sm { grid-column: span 3; grid-row: span 2; }
  .c-pest-card--sm .photo { display: none; }
  .c-pest-card--sm { background: var(--surface); justify-content: space-between; padding: 22px; }
  .c-pest-card--sm .pest-body { margin: 0; padding: 0; background: none; backdrop-filter: none; flex-direction: column; align-items: flex-start; height: 100%; justify-content: space-between; }
  .c-pest-card--sm .pest-go { align-self: flex-end; }
  .pest-tag { font-size: .75rem; color: var(--ink-3); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
  @media (max-width: 1023px) {
    .c-pest-card--xl, .c-pest-card--lg { grid-column: span 12; min-height: 340px; }
    .c-pest-card--sm { grid-column: span 6; min-height: 170px; }
  }
  @media (max-width: 599px) {
    .c-pest-card--xl, .c-pest-card--lg { min-height: 300px; }
  }

  /* ---------- 3. dératisation (spotlight nuit) ---------- */
  .c-spotlight { background: var(--night); color: #fff; border-radius: clamp(0px, 3vw, var(--r-xl)); margin-inline: clamp(0px, 1.5vw, 24px); overflow: hidden; }
  .spot-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  @media (min-width: 1024px) { .spot-grid { grid-template-columns: 1.05fr 1fr; min-height: 760px; } }
  .spot-copy { padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
  .spot-copy h2 { font-size: var(--fs-h1); letter-spacing: -0.04em; }
  .spot-copy > p { color: #B8C6D8; font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 46ch; }
  .spot-steps { margin: var(--s-7) 0; display: grid; gap: 2px; border-radius: var(--r-md); overflow: hidden; max-width: 520px; }
  .spot-step { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; background: var(--night-2); }
  .spot-step .n { font-size: .8rem; color: #7F95B0; font-variant-numeric: tabular-nums; }
  .spot-step b { font-weight: 500; display: block; }
  .spot-step span { color: #9FB0C5; font-size: .875rem; }
  .spot-step .tick { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #2D4A6C; }
  .spot-step.is-done .tick { background: #5AA2FF; box-shadow: none; display: grid; place-items: center; }
  .spot-step.is-done .tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--night); border-bottom: 2px solid var(--night); transform: rotate(-45deg) translate(1px,-1px); }
  .spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); }
  .spot-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
  .spot-links a { font-size: .875rem; color: #C9D6E6; padding: 8px 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--night-line); transition: box-shadow var(--t-micro), color var(--t-micro); }
  .spot-links a:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .spot-visual { position: relative; min-height: 420px; }
  .spot-visual .photo { position: absolute; inset: 0; border-radius: 0; }
  .spot-visual .float-card { position: absolute; color: var(--ink); }
  .spot-visual .fc-1 { left: clamp(16px, 6%, 56px); bottom: clamp(72px, 16%, 140px); }
  .spot-visual .fc-2 { right: clamp(16px, 6%, 56px); top: clamp(24px, 12%, 96px); }
  @media (max-width: 599px) { .spot-visual .fc-2 { display: none; } }

  /* ---------- 4. cafards ---------- */
  .c-cockroach .cockroach-grid { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
  @media (min-width: 1024px) { .c-cockroach .cockroach-grid { grid-template-columns: 1fr 1fr; } }
  .cockroach-copy h2 { font-size: var(--fs-h1); letter-spacing: -0.04em; }
  .cockroach-copy > p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 46ch; }
  .cockroach-copy .facts { margin: var(--s-6) 0 var(--s-7); display: grid; gap: 14px; }
  .cockroach-copy .facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink); }
  .cockroach-copy .facts svg { width: 20px; height: 20px; color: var(--blue); margin-top: 3px; }
  .c-activity {
    background: var(--ice); border-radius: var(--r-xl); padding: clamp(12px, 2vw, 20px);
    position: relative;
  }
  .activity-panel { background: var(--surface); border-radius: calc(var(--r-xl) - 12px); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-1); }
  .activity-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--s-5); }
  .activity-head h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
  .segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); position: relative; }
  .segmented button { position: relative; z-index: 1; height: 44px; border-radius: var(--r-pill); font-weight: 500; font-size: .9375rem; color: var(--ink-2); transition: color var(--t-state) var(--ease); }
  .segmented button[aria-checked="true"] { color: var(--ink); }
  .segmented .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--t-state) var(--ease); }
  .meter { display: flex; gap: 6px; margin: var(--s-6) 0 var(--s-5); }
  .meter i { flex: 1; height: 8px; border-radius: 8px; background: var(--surface-2); transition: background-color var(--t-state) var(--ease); }
  .meter[data-level="1"] i:nth-child(-n+2) { background: var(--ok); }
  .meter[data-level="2"] i:nth-child(-n+4) { background: var(--warn); }
  .meter[data-level="3"] i { background: var(--night); }
  .activity-out { min-height: 168px; }
  .activity-out h4 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 8px; }
  .activity-out p { color: var(--ink-2); }
  .activity-out .rec { margin-top: var(--s-4); padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); font-size: .9375rem; }
  .activity-out .rec b { font-weight: 600; }
  .activity-out [data-panel] { animation: fadeUp var(--t-state) var(--ease); }
  .activity-note { font-size: .75rem; color: var(--ink-3); margin-top: var(--s-4); }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---------- 5. autres nuisibles (rail) ---------- */
  .c-rail .rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: var(--s-7); }
  .rail-nav { display: flex; gap: 8px; }
  .rail-nav button { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: box-shadow var(--t-micro); }
  .rail-nav button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .rail-nav button:disabled { opacity: .35; cursor: default; }
  .rail-nav svg { width: 18px; height: 18px; }
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px var(--gutter) 24px; margin-inline: calc(-1 * var(--gutter));
    scroll-padding-inline: var(--gutter);
  }
  .rail::-webkit-scrollbar { display: none; }
  @media (min-width: 1280px) { .rail { grid-auto-columns: calc((100% - 2 * var(--gutter) - 48px) / 4); } }
  .rail-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); min-height: 230px; transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
  .rail-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .rail-card .season { align-self: flex-start; }
  .rail-card h3 { font-size: 1.375rem; margin-top: auto; }
  .rail-card p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
  .rail-card .link-arrow { font-size: .9375rem; }

  /* ---------- 6. comment ça marche ---------- */
  .c-process .process-grid { display: grid; gap: clamp(32px, 5vw, 80px); }
  @media (min-width: 1024px) {
    .c-process .process-grid { grid-template-columns: 5fr 7fr; }
    .process-sticky { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  }
  .process-sticky p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 40ch; }
  .process-track { position: relative; display: grid; gap: 16px; padding-left: 36px; }
  .process-track::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 28px; width: 2px; background: var(--line); border-radius: 2px; }
  .process-track .fill { position: absolute; left: 11px; top: 28px; width: 2px; height: calc(100% - 56px); background: var(--blue); border-radius: 2px; transform-origin: top; transform: scaleY(var(--p, 0)); }
  .step-card { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
  .step-card::before { content: ""; position: absolute; left: -31px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); transition: background-color var(--t-state), box-shadow var(--t-state); }
  .step-card.is-active { box-shadow: var(--shadow-2); }
  .step-card.is-active::before { background: var(--blue); box-shadow: 0 0 0 5px var(--ice); }
  .step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .step-num { font-size: .8125rem; font-weight: 500; color: var(--ink-3); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
  .step-card h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -0.03em; text-transform: none; }
  .step-card > p { color: var(--ink-2); margin-top: 8px; max-width: 56ch; }
  .step-out { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; font-size: .9375rem; }
  .step-out b { font-weight: 500; white-space: nowrap; }
  .step-out span { color: var(--ink-2); }

  /* ---------- 7. diagnostic ---------- */
  .c-diagnostic-section .diag-wrap {
    display: grid; gap: clamp(32px, 5vw, 72px); align-items: start;
  }
  @media (min-width: 1024px) { .c-diagnostic-section .diag-wrap { grid-template-columns: 5fr 7fr; } }
  .diag-intro h2 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
  .diag-intro > p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 42ch; }
  .diag-intro ol { margin-top: var(--s-6); display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: s; }
  .diag-intro ol li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; color: var(--ink); }
  .diag-intro ol li::before { content: counter(s, decimal-leading-zero); font-size: .8125rem; color: var(--blue); font-weight: 500; font-variant-numeric: tabular-nums; }
  .diag-intro .call-alt { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9375rem; display: grid; gap: 6px; }

  .c-diagnostic { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
  .diag-top { display: flex; align-items: center; gap: 16px; padding: 18px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
  .diag-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; transition: opacity var(--t-micro); }
  .diag-back[hidden] { display: grid; visibility: hidden; }
  .diag-back svg { width: 18px; height: 18px; }
  .diag-progress { flex: 1; }
  .diag-progress .meta { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ink-2); margin-bottom: 8px; }
  .diag-progress .bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
  .diag-progress .bar i { display: block; height: 100%; width: 100%; background: var(--blue); border-radius: 6px; transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform var(--t-state) var(--ease); }
  .diag-body { padding: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px); min-height: 460px; }
  .diag-step { animation: stepIn var(--t-state) var(--ease); }
  .diag-step[hidden] { display: none; }
  .diag-step h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); letter-spacing: -0.03em; outline: none; }
  .diag-step .hint { color: var(--ink-2); margin-top: 6px; }
  .diag-options { display: grid; gap: 10px; margin-top: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .diag-options .chip { min-height: 56px; border-radius: var(--r-md); padding: 0 18px; justify-content: flex-start; }
  .diag-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--s-6); flex-wrap: wrap; }
  .diag-actions .skip { color: var(--ink-2); font-weight: 500; font-size: .9375rem; padding: 10px 4px; }
  .diag-actions .skip:hover { color: var(--ink); }
  @keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

  .field { display: grid; gap: 8px; }
  .field label { font-weight: 500; font-size: .9375rem; }
  .field label .opt { color: var(--ink-3); font-weight: 400; }
  .field input, .field textarea {
    width: 100%; min-height: 56px; padding: 14px 16px; border-radius: var(--r-sm);
    border: 0; background: var(--surface-2); font-size: 1rem; outline: none;
    transition: box-shadow var(--t-micro), background-color var(--t-micro);
  }
  .field textarea { min-height: 96px; resize: vertical; }
  .field input:focus, .field textarea:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--blue); }
  .field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #C0392B; background: #FFF6F5; }
  .field .err { color: #B42318; font-size: .8125rem; min-height: 1em; }
  .field .note { color: var(--ink-2); font-size: .8125rem; }
  .zone-msg { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-size: .9375rem; }
  .zone-msg.ok { background: var(--ok-bg); color: #145C3D; }
  .zone-msg.out { background: var(--warn-bg); color: #7A4A00; }
  .form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: var(--s-5); }
  .form-grid .full { grid-column: 1 / -1; }
  @media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }
  .consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .8125rem; color: var(--ink-2); align-items: start; }
  .consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .result-card { border-radius: var(--r-md); background: var(--ice); padding: clamp(18px, 2.5vw, 24px); display: grid; gap: 14px; margin-top: var(--s-5); }
  .result-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; font-size: .9375rem; }
  .result-row dt { color: var(--ink-2); }
  .result-row dd { font-weight: 500; }
  .result-row dd a { color: var(--blue); }
  @media (max-width: 479px) { .result-row { grid-template-columns: 1fr; gap: 2px; } }
  .result-caveat { font-size: .8125rem; color: var(--ink-2); }
  .form-title { margin-top: var(--s-7); font-size: 1.25rem; letter-spacing: -0.02em; }
  .form-error { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: #FFF1F0; color: #8A1C12; font-size: .9375rem; }
  .done { text-align: center; padding: var(--s-7) 0; }
  .done .ok-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto var(--s-5); }
  .done .ok-badge svg { width: 28px; height: 28px; }
  .done p { color: var(--ink-2); max-width: 44ch; margin: 10px auto 0; }

  /* ---------- 8. zones ---------- */
  .c-area .area-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); display: grid; overflow: hidden; }
  @media (min-width: 1024px) { .c-area .area-card { grid-template-columns: 7fr 5fr; } }
  .area-map { position: relative; background: linear-gradient(180deg, #F2F7FD, #E8F1FB); }
  @media (min-width: 1024px) { .area-map { min-height: 520px; display: grid; place-items: center; } }
  .area-map svg { width: 100%; height: 100%; }
  .map-river { fill: none; stroke: #BCD6F2; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
  .map-river-label { font-size: 11px; fill: #7FA3CB; letter-spacing: .2em; text-transform: uppercase; font-family: var(--font); }
  .map-zone { fill: rgba(20,104,216,.05); stroke: rgba(20,104,216,.18); stroke-width: 1.5; stroke-dasharray: 4 6; }
  .map-pt { cursor: pointer; }
  .map-pt circle.core { fill: var(--surface); stroke: var(--blue); stroke-width: 2.5; transition: r var(--t-micro) var(--ease), fill var(--t-micro); }
  .map-pt circle.halo { fill: rgba(20,104,216,.14); opacity: 0; transition: opacity var(--t-state); }
  .map-pt text { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--ink-2); paint-order: stroke; stroke: #EEF5FC; stroke-width: 4px; stroke-linejoin: round; }
  .map-pt:hover circle.core, .map-pt.is-active circle.core { fill: var(--blue); }
  .map-pt.is-active circle.halo { opacity: 1; }
  .map-pt.is-active text { fill: var(--ink); font-weight: 600; }
  .map-pt--city circle.core { stroke-width: 3; }
  .map-pt--city text { font-size: 15px; font-weight: 600; fill: var(--ink); }
  .area-side { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--s-5); }
  .area-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .area-list .chip { min-height: 40px; padding: 0 14px; font-size: .875rem; }
  .c-location-card { border-radius: var(--r-md); background: var(--bg); padding: 22px; display: grid; gap: 10px; }
  .c-location-card h3 { font-size: 1.5rem; }
  .c-location-card p { color: var(--ink-2); font-size: .9375rem; }
  .c-location-card .btn { margin-top: 6px; justify-self: start; }
  .area-note { font-size: .8125rem; color: var(--ink-3); }

  /* ---------- 9. cas terrain ---------- */
  .c-case { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
  @media (min-width: 1024px) { .c-case { grid-template-columns: 4fr 8fr; } }
  .case-intro p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 40ch; }
  .c-intervention-case { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow: hidden; }
  .case-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
  .case-head h3 { font-size: 1.375rem; }
  .case-head .meta { display: flex; flex-wrap: wrap; gap: 8px; }
  .case-body { display: grid; }
  @media (min-width: 720px) { .case-body { grid-template-columns: 1fr 1fr; } }
  .case-item { padding: 22px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
  @media (min-width: 720px) { .case-item:nth-child(odd) { border-right: 1px solid var(--line); } .case-item:nth-last-child(-n+2) { border-bottom: 0; } }
  .case-item .k { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); font-weight: 500; }
  .case-item p { margin-top: 8px; }
  .case-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(20px, 3vw, 32px); background: var(--bg); font-size: .875rem; color: var(--ink-2); }

  /* ---------- 10. confiance ---------- */
  .c-trust { display: grid; gap: 16px; }
  @media (min-width: 1024px) { .c-trust { grid-template-columns: 4fr 8fr; } }
  .c-review-summary { border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; }
  .c-review-summary .score { font-size: clamp(3.5rem, 3rem + 2vw, 5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
  .c-review-summary .score small { font-size: .35em; color: var(--ink-3); letter-spacing: 0; font-weight: 500; }
  .stars { display: flex; gap: 3px; color: var(--blue); }
  .stars svg { width: 18px; height: 18px; }
  .c-review-summary p { color: var(--ink-2); font-size: .9375rem; }
  .c-review-summary .link-arrow { margin-top: auto; padding-top: 16px; }
  .trust-items { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .trust-item { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
  .trust-item .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ice); color: var(--blue); display: grid; place-items: center; margin-bottom: 8px; }
  .trust-item .ic svg { width: 20px; height: 20px; }
  .trust-item h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
  .trust-item p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }

  /* ---------- 11. CTA ---------- */
  .c-cta { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 96px); display: grid; gap: var(--s-6); align-items: center; position: relative; overflow: hidden; }
  @media (min-width: 1024px) { .c-cta { grid-template-columns: 1.3fr 1fr; } }
  .c-cta::after { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--ice), transparent); z-index: 0; pointer-events: none; }
  .c-cta > * { position: relative; z-index: 1; }
  .c-cta h2 { font-size: var(--fs-h1); letter-spacing: -0.04em; }
  .c-cta p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-4); }
  .cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  @media (min-width: 1024px) { .cta-actions { align-items: flex-end; } }

  /* ---------- footer ---------- */
  .c-footer { background: var(--night); color: #C3CFDD; margin-top: var(--section-y); padding: clamp(56px, 7vw, 96px) 0 calc(32px + var(--tabbar-h)); font-size: .9375rem; }
  .c-footer .logo { color: #fff; }
  .c-footer .logo-mark { background: #fff; color: var(--night); }
  .c-footer .logo-text small { color: #8CC0FF; }
  .foot-grid { display: grid; gap: 32px; }
  @media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .foot-brand p { margin-top: 16px; max-width: 32ch; color: #9FB0C5; }
  .foot-nap { margin-top: 20px; display: grid; gap: 4px; font-style: normal; }
  .foot-nap a { color: #fff; font-weight: 500; }
  .foot-col h3 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #7F95B0; margin-bottom: 14px; }
  .foot-col ul { display: grid; gap: 10px; }
  .foot-col a:hover { color: #fff; }
  .foot-col summary { list-style: none; }
  .foot-col summary::-webkit-details-marker { display: none; }
  @media (max-width: 899px) {
    .foot-col { border-top: 1px solid var(--night-line); }
    .foot-col summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; }
    .foot-col summary h3 { margin: 0; }
    .foot-col summary::after { content: "+"; font-size: 1.25rem; color: #7F95B0; }
    .foot-col details[open] summary::after { content: "–"; }
    .foot-col ul { padding-bottom: 16px; }
  }
  @media (min-width: 900px) {
    .foot-col summary { pointer-events: none; }
  }
  .foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8125rem; color: #7F95B0; }
  .foot-bottom nav { display: flex; gap: 20px; }

  /* ---------- tab bar mobile ---------- */
  .c-tabbar {
    position: fixed; z-index: 60; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    height: 62px; border-radius: 22px; display: none;
    background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 0 0 1px rgba(7,25,46,.06), var(--shadow-2);
    grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 6px;
    transition: transform var(--t-state) var(--ease), opacity var(--t-state);
  }
  .c-tabbar.is-hidden { transform: translateY(120%); opacity: 0; }
  .c-tabbar a, .c-tabbar button { display: grid; justify-items: center; gap: 3px; font-size: .6875rem; font-weight: 500; color: var(--ink-2); padding: 6px 0; }
  .c-tabbar svg { width: 22px; height: 22px; }
  .c-tabbar .is-current { color: var(--blue); }
  .c-tabbar .tab-primary span.ic { width: 44px; height: 32px; border-radius: 12px; background: var(--blue); color: #fff; display: grid; place-items: center; }
  .c-tabbar .tab-primary svg { width: 20px; height: 20px; }
  .c-tabbar .tab-primary { color: var(--ink); }
  @media (max-width: 899px) { .c-tabbar { display: grid; } }

  /* ---------- sheet (menu mobile / solutions) ---------- */
  .c-sheet { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 86vh; border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: var(--shadow-3); }
  .c-sheet::backdrop { background: rgba(7,25,46,.35); backdrop-filter: blur(2px); }
  .c-sheet[open] { animation: sheetUp var(--t-state) var(--ease); }
  .sheet-inner { padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); }
  .sheet-grab { width: 40px; height: 5px; border-radius: 5px; background: var(--line); margin: 0 auto 16px; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .sheet-head h2 { font-size: 1.375rem; }
  .sheet-close { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
  .sheet-close svg { width: 18px; height: 18px; }
  .sheet-group { margin-top: 18px; }
  .sheet-group h3 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
  .sheet-group a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
  .sheet-group a svg { width: 16px; height: 16px; color: var(--ink-3); }
  .sheet-cta { margin-top: 24px; display: grid; gap: 10px; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- utilities ---------- */
@layer utilities {
  .muted { color: var(--ink-2); }
  [data-verify] { /* donnée à valider par le client avant mise en ligne — repérable en staging */ }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   SECTION 3 — LIVE CARDS EN ARC (carrousel horizontal natif)
   ========================================================================== */
@layer sections {
  .c-feed {
    --cw: clamp(220px, 64vw, 300px);          /* largeur de carte */
    position: relative; padding: var(--section-y) 0 calc(var(--section-y) * .7); overflow: clip;
  }
  .c-feed::before { content: ""; position: absolute; left: 50%; top: 32%; width: min(1200px, 140vw); aspect-ratio: 2 / 1; transform: translateX(-50%); z-index: -1;
    background: radial-gradient(closest-side, rgba(20,104,216,.13), rgba(20,104,216,0)); pointer-events: none; }
  .feed-head { text-align: center; max-width: 820px; }
  .feed-head h2 { font-size: var(--fs-h1); letter-spacing: -0.045em; }

  /* piste : scroll horizontal natif + aimantation au centre */
  .arc { position: relative; margin-top: clamp(28px, 4vw, 48px); }
  .arc-track {
    display: flex; gap: clamp(10px, 2vw, 22px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 28px calc(50% - var(--cw) / 2) 130px; outline: none; cursor: grab;
  }
  .arc-track::-webkit-scrollbar { display: none; }
  .arc-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .arc-track:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); border-radius: var(--r-lg); }
  .fcard { flex: none; width: var(--cw); aspect-ratio: 4 / 5; scroll-snap-align: center; will-change: transform; transform-origin: 50% 100%; }

  /* ---------- carte ---------- */
  .fcard-inner {
    position: relative; height: 100%; border-radius: 28px; overflow: hidden; isolation: isolate;
    container-type: inline-size; color: #fff; background: #1b2230;
    box-shadow: 0 30px 60px -28px rgba(7,25,46,.5), 0 2px 8px rgba(7,25,46,.08);
  }
  .fcard-link { display: block; height: 100%; border-radius: 28px; -webkit-user-drag: none; }
  .fcard-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
  .fcard img { -webkit-user-drag: none; user-select: none; }
  .fcard-zoom { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
  .fcard-media { position: absolute; inset: -2%; }
  .fcard-media::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 13%; height: 12%; background: radial-gradient(closest-side, rgba(0,0,0,.38), transparent); filter: blur(4px); }
  [data-tone="rats"] .fcard-media { background: radial-gradient(70% 45% at 30% 16%, rgba(178,204,166,.55), transparent 62%), radial-gradient(90% 50% at 50% 100%, rgba(25,35,26,.9), transparent 70%), linear-gradient(170deg, #5B735B 0%, #33453A 55%, #1B241D 100%); }
  [data-tone="souris"] .fcard-media { background: radial-gradient(60% 45% at 72% 18%, rgba(255,218,168,.6), transparent 62%), radial-gradient(90% 50% at 50% 100%, rgba(50,32,20,.85), transparent 70%), linear-gradient(165deg, #BE936A 0%, #85603F 55%, #432F20 100%); }
  [data-tone="cafards"] .fcard-media { background: radial-gradient(70% 40% at 30% 14%, rgba(240,246,252,.65), transparent 62%), radial-gradient(90% 50% at 50% 100%, rgba(25,32,40,.85), transparent 70%), linear-gradient(170deg, #B4C1CC 0%, #74848F 55%, #333E49 100%); }
  [data-tone="punaises"] .fcard-media { background: radial-gradient(60% 45% at 65% 20%, rgba(255,248,236,.75), transparent 62%), radial-gradient(90% 50% at 50% 100%, rgba(80,64,50,.7), transparent 70%), linear-gradient(165deg, #E7DACA 0%, #BCA992 55%, #75644F 100%); }
  .fcard-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 30% 20%, rgba(255,255,255,.16), transparent 70%); opacity: .6; }
  .fcard-inner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,10,18,.3) 0%, rgba(5,10,18,0) 28%, rgba(5,10,18,0) 62%, rgba(5,10,18,.3) 100%); }
  .fcard-word { position: absolute; z-index: 2; left: 0; right: 0; bottom: -.12em; text-align: center; font-size: var(--fs); line-height: .86; letter-spacing: -0.055em; font-weight: 600; text-transform: uppercase; white-space: nowrap;
    background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .fcard-word--2l { line-height: .84; bottom: -.08em; }
  .fcard-word--2l span { display: block; }
  .fcard-subject { position: absolute; z-index: 3; left: 50%; bottom: var(--sb, 15%); width: var(--sw, 90%); height: auto; transform: translateX(-50%); filter: drop-shadow(0 18px 20px rgba(0,0,0,.35)); transition: transform 1.1s var(--ease); pointer-events: none; }
  .fcard-top { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 6cqw; }
  .fcard-badge { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .fcard-cta { display: inline-flex; align-items: center; }
  .fcard-cta > span { display: none; }
  .fcard-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--night); transition: transform var(--t-state) var(--ease); }
  .fcard-arrow svg { width: 15px; height: 15px; }
  .fcard-info { position: absolute; z-index: 4; left: 6cqw; right: 6cqw; top: calc(6cqw + 38px); font-size: clamp(.75rem, 4.2cqw, .875rem); color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.25); }
  .fcard-shade { position: absolute; inset: 0; z-index: 5; background: #0A1220; opacity: var(--shade, 0); pointer-events: none; transition: opacity .2s linear; }
  .fcard-link:hover .fcard-zoom { transform: scale(1.035); }
  .fcard-link:hover .fcard-subject { transform: translateX(-50%) translateY(-2%) scale(1.02); }
  .fcard-link:hover .fcard-arrow { transform: translateX(3px); }

  /* carte « autres nuisibles » (compacte) */
  .fcard--others .fcard-inner { background: radial-gradient(70% 50% at 80% 0%, rgba(20,104,216,.35), transparent 60%), linear-gradient(170deg, #0E2742, #07192E); }
  .fcard--others .fcard-inner::after { display: none; }
  .others-body { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 7cqw; gap: 4cqw; }
  .others-title { font-size: 14cqw; line-height: .9; letter-spacing: -0.05em; text-transform: uppercase; color: rgba(255,255,255,.95); }
  .others-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .others-list a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 500; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  .others-list a svg { width: 12px; height: 12px; opacity: .6; }
  .others-list a:hover { background: rgba(255,255,255,.18); }
  .others-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: .75rem; color: rgba(255,255,255,.75); }
  .others-cta span { color: #fff; font-weight: 500; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--blue); white-space: nowrap; }

  /* contrôles */
  .arc-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: -48px; position: relative; z-index: 2; }
  .arc-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--t-micro) var(--ease), opacity var(--t-micro); }
  .arc-btn svg { width: 18px; height: 18px; }
  .arc-btn:hover { transform: scale(1.06); }
  .arc-btn:disabled { opacity: .35; cursor: default; transform: none; }
  .arc-dots { display: flex; gap: 6px; }
  .arc-dots button { width: 8px; height: 8px; border-radius: 8px; background: var(--ink-3); opacity: .35; padding: 0; transition: width var(--t-state) var(--ease), opacity var(--t-state), background-color var(--t-state); }
  .arc-dots button[aria-current="true"] { width: 22px; opacity: 1; background: var(--blue); }
  .arc-dots button::after { content: ""; display: block; margin: -18px; height: 44px; } /* cible tactile */
  .arc-cta { display: flex; justify-content: center; margin-top: var(--s-6); }
  .arc-cta .btn span { font-weight: 600; }

  /* micro-mouvements (cartes visibles) */
  .motion-ok .fcard.is-live .fcard-media { animation: liveZoom 11s ease-in-out infinite alternate; }
  .motion-ok .fcard.is-live .fcard-word { animation: liveWord 10s ease-in-out infinite alternate; }
  .motion-ok .fcard.is-live .fcard-subject { animation: liveSubject 7s ease-in-out infinite alternate; }
  @keyframes liveZoom { from { transform: scale(1); } to { transform: scale(1.025) translate3d(-0.6%, -0.4%, 0); } }
  @keyframes liveWord { from { transform: translateY(0); } to { transform: translateY(-1.5%); } }
  @keyframes liveSubject { from { translate: 0 0; } to { translate: 0 -1.2%; } }

  @media (min-width: 900px) { .c-feed { --cw: clamp(260px, 22vw, 320px); } }
}

/* ==========================================================================
   v0.2 — homepage « Dératisation Lyon » : scènes 02 à 15
   ========================================================================== */
@layer sections {
  /* hero : H1 « Dératisation à Lyon » + 2 lignes */
  .hero-title .hero-eyebrow { font-size: var(--fs-eyebrow); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #fff; text-shadow: none; }
  .hero-title { font-size: clamp(2.3rem, .4rem + 3.9vw, 5.4rem); }
  .hero-text { max-width: 50vw; }
  .hero-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.85); }
  .hero-phone svg { width: 16px; height: 16px; }
  .hero-phone:hover { color: #fff; }
  @media (orientation: portrait) {
    .hero-title { font-size: clamp(1.9rem, .2rem + 7.6vw, 4rem); }
    .hero-text { max-width: none; }
    .hero-phone { align-self: center; margin-top: 12px; }
  }

  /* diagnostic : sous-libellé et rangée */
  .diag-sublabel { margin-top: var(--s-6); font-weight: 500; font-size: .9375rem; }
  .diag-options--row { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* ---------- 04 + 05 : dératisation à Lyon / rat vs souris ---------- */
  .c-derat { background: var(--night); color: #fff; margin: 0 clamp(0px, 1.5vw, 24px); border-radius: clamp(0px, 3vw, var(--r-xl)); padding: var(--section-y) 0; overflow: hidden; position: relative; isolation: isolate; }
  .c-derat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 80% 0%, rgba(20,104,216,.28), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(20,104,216,.14), transparent 60%); }
  .derat-head { max-width: 900px; }
  .derat-head h2 { font-size: var(--fs-h1); letter-spacing: -0.045em; }
  .derat-lead { font-size: var(--fs-lead); color: #B8C6D8; margin-top: var(--s-5); max-width: 62ch; }
  .derat-facts { display: grid; gap: 0; margin-top: var(--s-7); border-top: 1px solid var(--night-line); }
  .derat-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--night-line); }
  .derat-facts dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #8CC0FF; font-weight: 500; padding-top: 3px; }
  .derat-facts dd { color: #D5DFEB; }
  @media (min-width: 900px) { .derat-facts { grid-template-columns: repeat(3, 1fr); border-top: 0; } .derat-facts > div { grid-template-columns: 1fr; border-bottom: 0; border-left: 1px solid var(--night-line); padding: 4px 28px; } .derat-facts > div:first-child { border-left: 0; padding-left: 0; } }

  .c-versus { margin-top: clamp(64px, 9vw, 140px); }
  .versus-title { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); letter-spacing: -0.05em; text-align: center; line-height: .95; }
  .versus-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(8px, 3vw, 40px); margin: clamp(24px, 4vw, 48px) auto 0; max-width: 1000px; }
  .vs-animal { margin: 0; display: grid; justify-items: center; gap: 12px; }
  .vs-animal img { filter: drop-shadow(0 24px 24px rgba(0,0,0,.45)); }
  .vs-rat img { width: min(100%, 460px); }
  .vs-mouse img { width: min(46%, 200px); }
  .vs-animal figcaption { font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: #8CC0FF; font-weight: 500; }
  .vs-mark { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); font-weight: 500; color: #5F7A99; padding-bottom: 48px; font-style: italic; }
  .versus-table { width: 100%; max-width: 1000px; margin: clamp(32px, 5vw, 56px) auto 0; border-collapse: collapse; font-size: .9375rem; }
  .versus-table th, .versus-table td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--night-line); }
  .versus-table thead th { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #7F95B0; font-weight: 500; }
  .versus-table tbody th { color: #8CC0FF; font-weight: 500; width: 22%; }
  .versus-table td { color: #E3EAF3; width: 39%; }
  .versus-note { max-width: 1000px; margin: 14px auto 0; font-size: .8125rem; color: #7F95B0; }
  .versus-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-7); }
  .vs-choice { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: var(--r-pill); background: #fff; color: var(--night); font-weight: 500; transition: transform var(--t-micro) var(--ease), background-color var(--t-micro); }
  .vs-choice svg { width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease); }
  .vs-choice:hover { background: var(--ice); } .vs-choice:hover svg { transform: translateX(3px); }
  .vs-choice--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .vs-choice--ghost:hover { background: rgba(255,255,255,.08); }
  @media (max-width: 719px) {
    .versus-table thead { display: none; }
    .versus-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--night-line); padding: 12px 0; }
    .versus-table th, .versus-table td { border: 0; padding: 4px 6px; width: auto; }
    .versus-table tbody th { grid-column: 1 / -1; }
    .versus-table td::before { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #7F95B0; margin-bottom: 2px; }
    .versus-table td:nth-of-type(1)::before { content: "Rat"; } .versus-table td:nth-of-type(2)::before { content: "Souris"; }
    .vs-choice { width: 100%; justify-content: space-between; }
  }

  /* ---------- 06 : cheminements ---------- */
  .paths-grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
  @media (min-width: 1024px) { .paths-grid { grid-template-columns: 5fr 7fr; } }
  .paths-copy h2 { font-size: var(--fs-h1); letter-spacing: -0.045em; }
  .paths-lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: var(--s-5); max-width: 46ch; }
  .paths-note { margin-top: var(--s-6); padding: 20px 22px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); border-left: 3px solid var(--blue); }
  .paths-note b { display: block; font-weight: 600; letter-spacing: -0.01em; }
  .paths-note p { color: var(--ink-2); font-size: .9375rem; margin-top: 6px; }
  .paths-visual { margin: 0; }
  .paths-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); aspect-ratio: 600 / 520; }
  .paths-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .paths-reveal { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
  .motion-ok .paths-reveal { --draw: 1; }
  .paths-mouse { position: absolute; left: 33%; top: 70.5%; width: 13%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
  .ppt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  .ppt i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(255,75,85,.2), 0 0 12px rgba(255,75,85,.45); }
  .ppt span { position: absolute; left: 18px; top: 0; transform: translateY(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 10px; font-size: .75rem; font-weight: 500; color: #fff; background: rgba(7,18,32,.82); }
  .ppt--left span { left: auto; right: 18px; }
  .motion-ok .ppt { opacity: 0; transition: opacity .5s var(--ease); }
  .motion-ok .ppt.is-on { opacity: 1; }
  .paths-cap { font-size: .8125rem; color: var(--ink-3); margin-top: 12px; }
  @media (max-width: 599px) { .ppt span { font-size: .6875rem; padding: 5px 8px; } }

  /* ---------- 07 : indices ---------- */
  .c-clues { margin-top: clamp(72px, 9vw, 140px); }
  .clues-head h3 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
  .clues-head p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-4); max-width: 56ch; }
  .clues-ui { display: grid; gap: clamp(20px, 4vw, 56px); margin-top: var(--s-7); }
  @media (min-width: 900px) { .clues-ui { grid-template-columns: 320px 1fr; align-items: start; } }
  .clues-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .clues-tabs::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) { .clues-tabs { flex-direction: column; overflow: visible; gap: 2px; } }
  .clues-tabs [role="tab"] { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; padding: 14px 18px; border-radius: var(--r-sm); font-weight: 500; color: var(--ink-2); text-align: left; transition: background-color var(--t-micro), color var(--t-micro); }
  .clues-tabs [role="tab"] span { font-size: .75rem; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .clues-tabs [role="tab"]:hover { color: var(--ink); background: rgba(7,25,46,.04); }
  .clues-tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
  .clues-tabs [role="tab"][aria-selected="true"] span { color: var(--blue); }
  .clue-panel { position: relative; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: clamp(28px, 4vw, 56px); min-height: 300px; overflow: hidden; animation: fadeUp var(--t-state) var(--ease); }
  .clue-big { position: absolute; right: -0.06em; bottom: -0.22em; font-size: clamp(8rem, 6rem + 8vw, 16rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: var(--ice); pointer-events: none; }
  .clue-panel h4 { position: relative; font-size: var(--fs-h3); letter-spacing: -0.02em; }
  .clue-panel p:not(.clue-big) { position: relative; color: var(--ink-2); margin-top: 12px; max-width: 54ch; }
  .clue-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px !important; }

  /* ---------- 08 : méthode (photos de scène) ---------- */
  .step-photo { height: clamp(140px, 16vw, 200px); border-radius: var(--r-md); margin: -6px -6px 18px; }
  .step-photo[data-shot]::after { font-size: .6875rem; }

  /* ---------- 09 + 10 : pour qui ---------- */
  .aud-head { max-width: 760px; margin-bottom: var(--s-6); }
  .aud-head h2 { font-size: var(--fs-h1); letter-spacing: -0.045em; }
  .aud-switch { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); margin-bottom: var(--s-6); }
  .aud-switch [role="tab"] { height: 48px; padding: 0 26px; border-radius: var(--r-pill); font-weight: 500; color: var(--ink-2); transition: background-color var(--t-state), color var(--t-state), box-shadow var(--t-state); }
  .aud-switch [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
  .env-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
  .env-tabs::-webkit-scrollbar { display: none; }
  .env-tabs [role="tab"] { height: 42px; padding: 0 16px; border-radius: var(--r-pill); white-space: nowrap; font-size: .9375rem; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); transition: box-shadow var(--t-micro), color var(--t-micro), background-color var(--t-micro); }
  .env-tabs [role="tab"][aria-selected="true"] { background: var(--night); color: #fff; box-shadow: none; }
  .env-panel { position: relative; margin-top: var(--s-5); border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, #EEF3F8, #E2EAF3); padding: clamp(28px, 5vw, 64px); min-height: clamp(360px, 40vw, 460px); display: flex; align-items: flex-end; container-type: inline-size; animation: fadeUp var(--t-state) var(--ease); }
  .sector-panel { background: linear-gradient(160deg, #0E2742, #07192E); color: #fff; }
  .env-word { position: absolute; left: clamp(20px, 4vw, 48px); top: clamp(10px, 2vw, 24px); font-size: clamp(3.5rem, 13cqw, 10rem); font-weight: 600; letter-spacing: -0.055em; line-height: .9; text-transform: uppercase; color: rgba(7,25,46,.07); pointer-events: none; white-space: nowrap; }
  .sector-panel .env-word { color: rgba(255,255,255,.07); }
  .env-body { position: relative; max-width: 620px; }
  .env-body h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
  .env-body > p { color: var(--ink-2); margin-top: 12px; }
  .sector-panel .env-body > p { color: #B8C6D8; }
  .env-clues { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
  .env-clues li { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); font-size: .8125rem; font-weight: 500; }
  .sector-list { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .sector-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #E3EAF3; font-size: .9375rem; }
  .sector-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5AA2FF; margin-top: 9px; }
  .sector-panel .link-arrow { color: #8CC0FF; }
  .aud-cta { margin-top: var(--s-6); }

  /* ---------- 14 : guides ---------- */
  .guides-cols { display: grid; gap: clamp(28px, 4vw, 56px); }
  @media (min-width: 900px) { .guides-cols { grid-template-columns: repeat(3, 1fr); } }
  .guides-col h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.045em; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
  .guides-col ul { padding: 0; list-style: none; margin: 4px 0 18px; }
  .guides-col li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; transition: color var(--t-micro), padding var(--t-micro) var(--ease); }
  .guides-col li a:hover { color: var(--blue); padding-left: 6px; }

  /* ---------- 15 : FAQ ---------- */
  .faq-grid { display: grid; gap: clamp(28px, 5vw, 80px); }
  @media (min-width: 1024px) { .faq-grid { grid-template-columns: 4fr 8fr; } .faq-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
  .faq-head h2 { font-size: var(--fs-h2); letter-spacing: -0.04em; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23111417' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--t-state) var(--ease); }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-a { padding: 0 52px 24px 0; color: var(--ink-2); }
  .faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
}
@layer sections { .arc-track { position: relative; } }

/* ==========================================================================
   v0.4 — direction lumineuse · hero slider « technicien au centre »
   ========================================================================== */
@layer tokens {
  :root { --bg: #FFFFFF; --bg-2: #F7F9FB; --surface-blue: #F1F6FC; --ink-2: #667085; --hs-dur: 3600ms; --hs-tr: 1100ms; --hs-ease: cubic-bezier(.7, 0, .2, 1); }
}
@layer sections {
  /* ---------- header ---------- */
  .logo { display: inline-flex; align-items: center; }
  .logo-img { height: 45px; width: auto; }
  .logo.has-logo .logo-fallback { display: none; }
  .logo-fallback { display: grid; grid-template-columns: auto auto; column-gap: 5px; line-height: 1; letter-spacing: -0.02em; font-size: 1.125rem; }
  .lf-1 { font-weight: 400; } .lf-2 { font-weight: 600; }
  .lf-3 { grid-column: 2; justify-self: end; font-size: .5rem; letter-spacing: .32em; font-weight: 500; margin-top: 3px; opacity: .85; }
  .c-header.is-dark .logo-img { filter: brightness(0) invert(1); }
  .menu-btn { display: grid; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); margin-left: 0; }
  .header-actions { gap: 16px; }
  .header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9375rem; }
  .header-phone svg { width: 16px; height: 16px; color: var(--blue); }
  .header-diag { background: var(--blue); color: #fff; }
  .header-diag:hover { background: var(--blue-hover); }
  .c-header.is-dark { color: #fff; }
  .c-header.is-dark .nav a { color: rgba(255,255,255,.85); }
  .c-header.is-dark .nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
  .c-header.is-dark .header-phone svg { color: #fff; }
  .c-header.is-dark .header-diag { background: #fff; color: var(--night); box-shadow: none; }
  .c-header.is-dark .menu-btn { background: rgba(255,255,255,.92); color: var(--night); box-shadow: none; }
  .c-header.is-scrolled { background: rgba(255,255,255,.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 rgba(17,20,23,.06); }
  .c-header.is-dark.is-scrolled { background: rgba(7,18,32,.28); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  @media (max-width: 1099px) { .header-phone span { display: none; } }
  @media (max-width: 899px) { .menu-btn { width: 44px; height: 44px; margin-left: auto; } }

  /* ---------- hero slider ---------- */
  .c-hslider { --d: 1; position: relative; height: 100svh; min-height: 620px; margin-top: calc(-1 * var(--header-h)); overflow: hidden; isolation: isolate; color: #fff; background: #13202F; touch-action: pan-y; }
  .hs-slides { position: absolute; inset: 0; z-index: 0; }
  .hs-slides[data-dir="-1"] { --d: -1; }
  .hs-slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
  .hs-slide.is-active, .hs-slide.is-in, .hs-slide.is-out { visibility: visible; }
  .hs-slide.is-in { z-index: 2; }
  .hs-bg { position: absolute; inset: 0; will-change: transform; }
  .hs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); transform: scale(var(--s, 1)); transform-origin: var(--pos); filter: blur(var(--blur, 0)) brightness(var(--b, 1)); }
  .hs-pro-bg { position: absolute; inset: 0; background:
      radial-gradient(60% 50% at 70% 30%, rgba(24,119,242,.35), transparent 60%),
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px,
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px,
      linear-gradient(160deg, #0E2742, #07192E); }
  .hs-pest { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; transform: translateY(-100%); filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
  .hs-word { position: absolute; z-index: 1; left: 50%; top: 44%; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
    font-size: var(--fs); font-weight: 600; line-height: .84; letter-spacing: -0.055em; text-transform: uppercase; white-space: nowrap; text-align: center;
    color: rgba(255,255,255,.9); text-shadow: 0 12px 60px rgba(0,0,0,.22); }
  .hs-word--2l span { display: block; }

  /* transitions : la slide sort / entre, la caméra avance, le mot a sa propre vitesse */
  .hs-slide.is-active .hs-bg { animation: hsDrift calc(var(--hs-dur) + var(--hs-tr)) linear both; }
  .hs-slide.is-in { animation: hsIn var(--hs-tr) var(--hs-ease) both; }
  .hs-slide.is-out { animation: hsOut var(--hs-tr) var(--hs-ease) both; }
  .hs-slide.is-in .hs-bg { animation: hsBgIn var(--hs-tr) var(--hs-ease) both; }
  .hs-slide.is-out .hs-bg { animation: hsBgOut var(--hs-tr) var(--hs-ease) both; }
  .hs-slide.is-in .hs-word { animation: hsWordIn var(--hs-tr) 120ms var(--hs-ease) both; }
  .hs-slide.is-out .hs-word { animation: hsWordOut var(--hs-tr) var(--hs-ease) both; }
  @keyframes hsIn { from { transform: translateX(calc(var(--d) * 100%)); } to { transform: none; } }
  @keyframes hsOut { from { transform: none; } to { transform: translateX(calc(var(--d) * -100%)); } }
  @keyframes hsBgIn { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes hsBgOut { from { transform: scale(1.03); } to { transform: scale(1.08); } }
  @keyframes hsDrift { from { transform: scale(1); } to { transform: scale(1.03); } }
  @keyframes hsWordIn { from { translate: calc(var(--d) * 45%) 0; } to { translate: 0 0; } }
  @keyframes hsWordOut { from { translate: 0 0; } to { translate: calc(var(--d) * -40%) 0; } }

  .hs-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
      linear-gradient(90deg, rgba(5,12,22,.6) 0%, rgba(5,12,22,.2) 34%, rgba(5,12,22,0) 55%),
      linear-gradient(0deg, rgba(5,12,22,.55) 0%, rgba(5,12,22,0) 38%),
      linear-gradient(180deg, rgba(5,12,22,.35) 0%, rgba(5,12,22,0) 22%); }

  /* technicien : fixe, centré, ancré en bas */
  .hs-tech { position: absolute; z-index: 5; left: 50%; bottom: 0; transform: translateX(-50%); height: 82svh; aspect-ratio: 2 / 3; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
  .hs-tech-img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
  .hs-tech:has(.hs-tech-img) .hs-tech-ph { display: none; }
  .hs-tech-ph { position: relative; width: 100%; height: 100%; }
  .hs-tech-ph svg { width: 100%; height: 100%; }
  .hs-tech-ph svg > * { fill: rgba(255,255,255,.2); stroke: rgba(255,255,255,.8); stroke-width: 1.5; }
  .hs-tech-ph svg .arms { fill: rgba(255,255,255,.3); }
  .hs-tech-ph span { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.9); }
  .hs-tech-ph small { font-size: .6875rem; opacity: .7; font-weight: 400; }

  /* contenu SEO stable */
  .hs-content { position: absolute; z-index: 6; left: max(var(--gutter), 5vw); bottom: clamp(32px, 8svh, 84px); width: min(28vw, 440px); }
  .hs-eyebrow { display: flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: 14px; }
  .hs-eyebrow::after { content: ""; width: clamp(40px, 6vw, 110px); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
  .hs-title { font-size: clamp(2.5rem, 1rem + 3.3vw, 5rem); line-height: .98; letter-spacing: -0.045em; color: #fff; text-wrap: balance; }
  .hs-lead { font-size: var(--fs-lead); color: rgba(255,255,255,.88); margin-top: 14px; max-width: 34ch; }
  .hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .btn--glass { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .btn--glass:hover { background: rgba(255,255,255,.22); }
  .hs-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.85); }
  .hs-phone svg { width: 16px; height: 16px; }
  .hs-phone:hover { color: #fff; }

  /* contrôles */
  .hs-controls { position: absolute; z-index: 6; right: max(var(--gutter), 5vw); bottom: clamp(32px, 8svh, 84px); display: grid; justify-items: end; gap: 14px; }
  .hs-meta { display: grid; justify-items: end; gap: 4px; font-size: .8125rem; color: rgba(255,255,255,.85); text-align: right; }
  .hs-count { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-size: .75rem; opacity: .8; }
  .hs-nav { display: flex; align-items: center; gap: 10px; }
  .hs-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color var(--t-micro); }
  .hs-btn:hover { background: rgba(255,255,255,.24); }
  .hs-btn svg { width: 16px; height: 16px; }
  .hs-pause .i-play { display: none; }
  .hs-pause[aria-pressed="true"] .i-play { display: block; }
  .hs-pause[aria-pressed="true"] .i-pause { display: none; }
  .hs-dots { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
  .hs-dots button { position: relative; width: 8px; height: 8px; padding: 0; border-radius: 8px; background: rgba(255,255,255,.4); overflow: hidden; transition: width var(--t-state) var(--ease), background-color var(--t-state); }
  .hs-dots button::after { content: ""; position: absolute; inset: -18px -6px; }
  .hs-dots button[aria-current="true"] { width: 40px; background: rgba(255,255,255,.3); }
  .hs-dots i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
  .hs-dots button[aria-current="true"] i { animation: hsProgress var(--hs-dur) linear both; }
  .c-hslider.is-paused .hs-dots button[aria-current="true"] i, .c-hslider.is-static .hs-dots button[aria-current="true"] i { animation: none; transform: scaleX(1); }
  @keyframes hsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* entrée de page */
  .motion-ok .c-hslider .hs-content > * { animation: hsUp .8s var(--ease) both; }
  .motion-ok .c-hslider .hs-eyebrow { animation-delay: .35s; }
  .motion-ok .c-hslider .hs-title { animation-delay: .45s; }
  .motion-ok .c-hslider .hs-lead { animation-delay: .6s; }
  .motion-ok .c-hslider .hs-actions { animation-delay: .75s; }
  .motion-ok .c-hslider .hs-phone { animation-delay: .85s; }
  .motion-ok .c-hslider .hs-tech { animation: hsTech 1s .15s var(--ease) both; }
  @keyframes hsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hsTech { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

  /* mobile : H1 en haut, CTA en bas, technicien au centre */
  @media (max-width: 899px), (orientation: portrait) {
    .hs-img { object-position: var(--pos-m, var(--pos)); transform-origin: var(--pos-m, var(--pos)); }
    .hs-pest { left: var(--xm); top: var(--ym); width: var(--wm); }
    .hs-word { top: 35%; }
    .hs-tech { height: 60svh; }
    .hs-content { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 14px); bottom: calc(var(--tabbar-h) + 16px); width: auto; display: flex; flex-direction: column; }
    .hs-title { font-size: clamp(2.3rem, 1rem + 6vw, 3.6rem); }
    .hs-lead { font-size: 1rem; }
    .hs-actions { margin-top: auto; flex-direction: column; }
    .hs-actions .btn { justify-content: center; }
    .hs-phone { display: none; }
    .hs-controls { left: 0; right: 0; bottom: calc(var(--tabbar-h) + 136px); justify-items: center; }
    .hs-meta { display: none; }
    .hs-shade { background: linear-gradient(180deg, rgba(5,12,22,.55) 0%, rgba(5,12,22,.1) 38%, rgba(5,12,22,0) 55%, rgba(5,12,22,.6) 100%); }
  }
  @media (min-width: 900px) and (orientation: landscape) { .hs-slide--pro .hs-word { top: 42%; } }

  /* sans animation */
  @media (prefers-reduced-motion: reduce) {
    .hs-slide.is-in, .hs-slide.is-out, .hs-slide .hs-bg, .hs-slide .hs-word { animation: none !important; }
  }
  .c-hslider.is-static .hs-slide { transition: opacity .25s ease; }
}
@layer sections {
  .hs-word--2l { top: 33%; }
  .hs-slide--pro .hs-word { top: 38%; }
  @media (max-width: 899px), (orientation: portrait) { .hs-word--2l { top: 33%; } .hs-slide--pro .hs-word { top: 35%; } }
}
@layer sections {
  /* Noms du hero sur mobile : grotesque élargie très grasse, dégradé argenté */
  @media (max-width: 899px), (orientation: portrait) {
    .hs-word {
      font-family: var(--font); font-weight: 700;
      font-size: var(--fit, var(--fs)); letter-spacing: -0.01em; line-height: .9;
      background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 42%, #C9CFD7 78%, #AEB6C0 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
      filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
    }
  }
}
@layer sections {
  /* Hero plus compact sur mobile : le formulaire apparaît plus tôt */
  @media (max-width: 899px), (orientation: portrait) {
    .c-hslider { height: 80svh; min-height: 560px; }
    .hs-tech { height: 48svh; }
    .hs-content { bottom: 16px; }
    .hs-title { font-size: clamp(2rem, 1rem + 5vw, 3rem); }
    .hs-lead { font-size: .9375rem; margin-top: 10px; }
    .hs-actions .btn { --h: 46px; }
    .hs-controls { bottom: 128px; }
    .hs-word, .hs-word--2l, .hs-slide--pro .hs-word { top: 38%; }
  }
}

/* ==========================================================================
   HERO MOBILE — version épurée (publicité plein écran)
   Ordre de lecture : marque → Dératisation à Lyon → nuisible → technicien → diagnostic
   ========================================================================== */
@layer tokens { @media (max-width: 899px) { :root { --header-h: 54px; } } }
@layer sections {
  .hero-relay { display: none; }
  @media (max-width: 899px), (orientation: portrait) {
    /* plein écran, barre d'onglets masquée tant que le hero est à l'écran */
    .c-hslider { height: 100svh; min-height: 540px; }
    .hero-visible .c-tabbar { transform: translateY(130%); opacity: 0; pointer-events: none; }

    /* bloc SEO : eyebrow + H1 seulement */
    .hs-content { top: calc(var(--header-h) + 10px); bottom: calc(18px + env(safe-area-inset-bottom)); left: 20px; right: 20px; }
    .hs-lead, .hs-phone { display: none; }
    .hs-eyebrow { font-size: .6875rem; margin-bottom: 8px; }
    .hs-title { font-size: clamp(1.9rem, .9rem + 5.4vw, 2.6rem); }
    .hs-seo { transform-origin: 0 0; }
    .motion-ok .hs-seo { animation: hsQuiet .9s 1.6s var(--ease) forwards; }
    @keyframes hsQuiet { to { opacity: .8; transform: translateY(-4px) scale(.92); } }

    /* titre de slide : une seule ligne, derrière le technicien */
    .hs-word, .hs-word--2l, .hs-slide--pro .hs-word { top: 41%; }
    .hs-word--2l span { display: inline; }

    /* technicien : visage vers 55–60 % de la hauteur, tête + torse */
    .hs-tech { height: 52svh; }

    /* un seul CTA + action texte discrète */
    .hs-actions { gap: 4px; align-items: stretch; }
    .hs-actions .btn--primary { --h: 50px; }
    .hs-secondary { --h: 40px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.9); }
    .hs-secondary svg { width: 15px; height: 15px; }
    .hs-secondary:hover { background: none; color: #fff; }

    /* indicateur minimal juste au-dessus du CTA */
    .hs-controls { left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom) + 50px + 4px + 40px + 16px); justify-items: center; }
    .hs-meta, .hs-btn[data-hs] { display: none; }
    .hs-nav { gap: 0; }
    .hs-dots { gap: 6px; }
    .hs-dots button { width: 18px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); }
    .hs-dots button[aria-current="true"] { width: 40px; background: rgba(255,255,255,.3); }
    /* pause : retirée visuellement, conservée pour le clavier et les lecteurs d'écran */
    .hs-pause { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hs-pause:focus-visible { position: static; width: 32px; height: 32px; clip: auto; margin-left: 10px; }

    /* voiles : uniquement haut (marque, H1) et bas (CTA) */
    .hs-shade { background: linear-gradient(180deg, rgba(5,12,22,.55) 0%, rgba(5,12,22,0) 30%, rgba(5,12,22,0) 62%, rgba(5,12,22,.62) 100%); }
  }
  /* très petits écrans : on compacte encore */
  @media (max-width: 899px) and (max-height: 640px) {
    .hs-tech { height: 50svh; }
    .hs-title { font-size: 1.75rem; }
    .hs-word, .hs-word--2l, .hs-slide--pro .hs-word { top: 39%; }
  }
}
@layer sections {
  @media (max-width: 899px), (orientation: portrait) {
    .hero-relay { display: block; font-size: var(--fs-lead); color: var(--ink); font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--s-5); max-width: 32ch; }
  }
}
@layer sections {
  /* Hero mobile compact (≈ 68 % de l'écran) — proportions internes relatives au hero */
  @media (max-width: 899px), (orientation: portrait) {
    .c-hslider { height: 68svh; min-height: 480px; }
    .hs-tech { height: 58%; }
    .hs-word, .hs-word--2l, .hs-slide--pro .hs-word { top: 37%; }
  }
  @media (max-width: 899px) and (max-height: 640px) {
    .hs-tech { height: 56%; }
    .hs-word, .hs-word--2l, .hs-slide--pro .hs-word { top: 36%; }
  }
}

/* ==========================================================================
   v0.5 — HERO TRANSACTIONNEL (TransactionHero + DiagnosticFlow)
   ========================================================================== */
@layer sections {
  .c-thero { background: var(--bg); padding: clamp(8px, 2vw, 28px) 0 clamp(20px, 3vw, 40px); scroll-margin-top: var(--header-h); }
  .th-inner { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }

  /* en-tête : H1 stable, question */
  .th-head { margin-bottom: clamp(14px, 2vw, 28px); }
  .th-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
  .th-title { font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
  .th-question { margin-top: clamp(6px, 1vw, 12px); font-size: clamp(1.0625rem, .95rem + .55vw, 1.5rem); color: var(--ink-2); letter-spacing: -.01em; }
  [data-state="flow"] .th-question { display: none; }

  /* sélecteur de services */
  .svc { margin-inline: calc(-1 * var(--gutter)); }
  .svc-track {
    display: flex; gap: clamp(10px, 1.4vw, 20px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .svc-track::-webkit-scrollbar { display: none; }
  .svc-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .svc-track.is-dragging .svc-card { pointer-events: none; }
  .svc-card {
    position: relative; flex: 0 0 84%; height: clamp(300px, 54svh, 480px); scroll-snap-align: start;
    border-radius: var(--r-lg); overflow: hidden; background: var(--night); isolation: isolate;
    box-shadow: var(--shadow-1); user-select: none; -webkit-user-select: none;
  }
  .svc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); z-index: -2; transition: transform .8s var(--ease); -webkit-user-drag: none; }
  .svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,25,46,0) 35%, rgba(7,25,46,.55) 68%, rgba(7,25,46,.88) 100%); }
  .svc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; color: #fff; display: grid; gap: 4px; }
  .svc-num { font-size: .75rem; font-weight: 500; letter-spacing: .12em; opacity: .7; }
  .svc-title { font-size: clamp(1.75rem, 1.3rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
  .svc-desc { font-size: .9375rem; color: rgba(255,255,255,.8); margin-bottom: 12px; }
  .svc-cta {
    justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
    border-radius: var(--r-pill); background: #fff; color: var(--night); font-weight: 500; font-size: .9375rem;
    transition: background-color var(--t-micro), transform var(--t-micro) var(--ease);
  }
  .svc-cta svg { width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease); }
  .svc-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* carte entière cliquable */
  @media (hover: hover) { .svc-card:hover .svc-cta { background: var(--ice); } .svc-card:hover .svc-cta svg { transform: translateX(3px); } .svc-card:hover .svc-img { transform: scale(1.03); } }
  .svc-cta:focus-visible { outline: 3px solid #8CC0FF; outline-offset: 3px; }
  .svc-cta:active { transform: scale(.98); }

  .svc-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; min-height: 24px; }
  .svc-dots { display: flex; gap: 6px; }
  .svc-dots button { width: 6px; height: 6px; border-radius: 3px; background: var(--line); padding: 0; position: relative; transition: width var(--t-state) var(--ease), background-color var(--t-state); }
  .svc-dots button::after { content: ""; position: absolute; inset: -10px -4px; } /* zone tactile */
  .svc-dots button[aria-current="true"] { width: 22px; background: var(--ink); }
  .svc-nav { display: none; gap: 8px; }
  .svc-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); transition: box-shadow var(--t-micro); }
  .svc-nav button:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .svc-nav svg { width: 18px; height: 18px; }

  .th-unknown { margin-top: 14px; text-align: center; font-size: .9375rem; color: var(--ink-2); }
  .th-unknown a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 500; white-space: nowrap; }
  .th-unknown svg, .th-call svg { width: 14px; height: 14px; }
  .th-call { margin-top: 6px; text-align: center; font-size: .875rem; }
  .th-call a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
  .th-call a:hover { color: var(--ink); }
  .th-noscript { margin-top: 16px; text-align: center; }

  /* transitions d'état (sélection ↔ parcours) */
  .th-select, .th-flow { transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
  .th-select.is-leaving, .th-flow.is-leaving { opacity: 0; transform: translateY(8px); }
  .th-select.is-entering, .th-flow.is-entering { opacity: 0; transform: translateY(14px); transition: none; }

  /* parcours */
  .th-flow { display: grid; gap: 14px; max-width: 980px; }
  .flow-tech { display: flex; align-items: center; gap: 12px; }
  .flow-tech img { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: var(--surface-blue); box-shadow: inset 0 0 0 1px var(--line); }
  .flow-tech p { font-size: .875rem; color: var(--ink-2); line-height: 1.4; }
  .flow-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); padding: 16px 18px 22px; min-height: 360px; }
  .flow-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
  .flow-back { display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; padding: 8px; border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; color: var(--ink-2); }
  .flow-back:hover { color: var(--ink); background: var(--bg-2); }
  .flow-back svg { width: 16px; height: 16px; }
  .flow-pest { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--blue); background: var(--surface-blue); padding: 4px 10px; border-radius: var(--r-pill); }
  .flow-count { margin-left: auto; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .flow-bar { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin: 6px 0 4px; }
  .flow-bar i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); transition: transform 420ms var(--ease); }
  .motion-ok .flow-panel { animation: flowIn 360ms var(--ease) both; }
  @keyframes flowIn { from { opacity: 0; transform: translateX(18px); } }
  .flow-q { font-size: clamp(1.375rem, 1.15rem + .9vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 18px 0 16px; outline: none; }
  .flow-choices { display: grid; gap: 8px; }
  .flow-choice {
    position: relative; display: flex; align-items: center; min-height: 54px; padding: 12px 44px 12px 16px; text-align: left;
    border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    font-size: 1rem; font-weight: 500; color: var(--ink); transition: box-shadow var(--t-micro), background-color var(--t-micro);
  }
  .flow-choice::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow var(--t-micro); }
  @media (hover: hover) { .flow-choice:hover { box-shadow: inset 0 0 0 1px var(--ink-3); } }
  .flow-choice[aria-checked="true"] { background: var(--surface-blue); box-shadow: inset 0 0 0 2px var(--blue); }
  .flow-choice[aria-checked="true"]::after { box-shadow: inset 0 0 0 5px var(--blue); }
  .flow-choice:focus-visible { outline: 3px solid rgba(20,104,216,.35); outline-offset: 2px; }
  .flow-form { display: grid; gap: 12px; }
  .flow-fields { display: grid; gap: 12px; }
  .flow-zone { font-size: .875rem; color: var(--ink-2); min-height: 1.3em; }
  .flow-next { width: 100%; margin-top: 4px; }
  .flow-next[disabled] { opacity: .6; pointer-events: none; }
  .flow-summary { background: var(--bg-2); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; }
  .flow-summary span { font-size: .75rem; color: var(--ink-3); }
  .flow-summary p { font-size: .9375rem; font-weight: 500; }
  .flow-probable { background: var(--surface-blue); color: var(--blue); font-size: .875rem; font-weight: 500; border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; }
  .flow-note { background: var(--warn-bg); color: #6B4100; font-size: .875rem; border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; }
  .flow-legal { font-size: .8125rem; color: var(--ink-3); text-align: center; }
  .flow-done { text-align: center; padding: 24px 0 8px; display: grid; gap: 10px; justify-items: center; }
  .flow-done .ok-badge { width: 60px; height: 60px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
  .flow-done .ok-badge svg { width: 26px; height: 26px; }
  .flow-done .flow-q { margin: 6px 0 0; }
  .flow-done p { color: var(--ink-2); max-width: 44ch; }
  .flow-done a[href^="tel"] { color: var(--blue); font-weight: 500; }
  .flow-done .link-arrow { margin-top: 8px; }

  /* transition vers la suite */
  .th-after { border-top: 1px solid var(--line); padding: clamp(24px, 3vw, 40px) 0; }
  .th-after-inner { display: grid; gap: 12px; }
  .th-after-lead { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.01em; max-width: 36ch; }
  .th-after-text { max-width: 62ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
  .th-after-text a { color: var(--ink); text-underline-offset: 3px; }
  .th-after-points { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9375rem; color: var(--ink-2); }
  .th-after-points li { display: inline-flex; align-items: center; gap: 8px; }
  .th-after-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

  @media (min-width: 600px) {
    .flow-choices { grid-template-columns: 1fr 1fr; }
    .flow-fields { grid-template-columns: 1fr 1fr; }
    .flow-fields .full, .flow-fields .hp { grid-column: 1 / -1; }
    .flow-next { width: auto; justify-self: start; }
    .flow-legal { text-align: left; }
    .flow-card { padding: 20px 28px 28px; }
  }

  @media (min-width: 900px) {
    .th-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 24px; }
    .th-eyebrow { flex-basis: 100%; }
    .svc-card { flex-basis: min(72%, 1040px); height: clamp(400px, 58vh, 580px); }
    .svc-img { object-position: var(--pos, 50% 50%); }
    .svc-card::before { background: linear-gradient(90deg, rgba(7,25,46,.78) 0%, rgba(7,25,46,.35) 42%, rgba(7,25,46,0) 70%), linear-gradient(180deg, rgba(7,25,46,0) 60%, rgba(7,25,46,.35) 100%); }
    .svc-body { padding: 40px; max-width: 520px; }
    .svc-desc { font-size: 1.0625rem; margin-bottom: 18px; }
    .svc-cta { min-height: 52px; padding: 0 24px; font-size: 1rem; }
    .svc-foot { justify-content: space-between; margin-top: 16px; }
    .svc-nav { display: flex; }
    .svc-track { cursor: grab; }
    .th-unknown, .th-call { text-align: left; }
    .th-select { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; }
    .th-select .svc, .th-select .svc-foot { grid-column: 1 / -1; }
    .th-unknown { margin-top: 18px; }
    .th-call { margin-top: 18px; align-self: center; }

    .th-flow { grid-template-columns: 300px 1fr; gap: 24px; align-items: stretch; max-width: 1180px; }
    .flow-tech { position: relative; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-blue), var(--ice)); overflow: hidden; min-height: 420px; }
    .flow-tech img { width: 100%; height: auto; border-radius: 0; background: none; box-shadow: none; object-fit: contain; margin-top: auto; }
    .flow-tech p { position: absolute; left: 16px; right: 16px; top: 16px; font-size: .875rem; color: var(--ink); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 12px; border-radius: var(--r-sm); }
    .flow-card { padding: 24px 40px 40px; min-height: clamp(460px, 62vh, 620px); }
  }
  @media (hover: none) { .svc-nav { display: none; } }
  @media (max-width: 899px) and (max-height: 700px) {
    .svc-card { height: clamp(280px, 50svh, 400px); }
    .th-question { margin-top: 4px; }
  }
}

/* ==========================================================================
   v0.6 — TYPOGRAPHIE PREMIUM (capitales espacées, graisses fines)
   Référence : wordmark « FRANCE DÉRATISATION » + « MENU ═ ».
   ========================================================================== */
@layer tokens {
  :root { --track-caps: .16em; --track-caps-sm: .14em; --w-title: 500; }
}
@layer sections {
  /* wordmark provisoire (remplacé par le logo officiel dès qu'il est déposé) */
  .logo-fallback { display: block; font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--ink); }

  /* bouton MENU + deux traits */
  .menu-btn { display: inline-flex; align-items: center; gap: 14px; width: auto; height: 44px; padding: 0 2px 0 8px; border-radius: 0; background: none; box-shadow: none; margin-left: 0; color: var(--ink); }
  .menu-label { font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1; }
  .menu-lines { position: relative; width: 30px; height: 10px; }
  .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--t-state) var(--ease); }
  .menu-lines::before { top: 0; } .menu-lines::after { bottom: 0; }
  @media (hover: hover) { .menu-btn:hover .menu-lines::before { transform: translateX(-4px); } }
  @media (max-width: 899px) { .menu-btn { display: inline-flex; margin-left: auto; } }

  /* navigation & actions du header */
  .nav a { font-size: .75rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink); }
  .header-phone { font-size: .8125rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (max-width: 1139px) { .header-phone { display: none; } .nav a { padding-inline: 10px; } }

  /* titres : plus fins, plus serrés */
  h1, h2, h3, h4 { font-weight: var(--w-title); }
  .th-title { font-weight: var(--w-title); letter-spacing: -.035em; }
  .svc-title, .flow-q { font-weight: var(--w-title); }

  /* libellés en capitales espacées */
  .eyebrow, .th-eyebrow { font-weight: 500; letter-spacing: var(--track-caps); }
  .svc-num, .flow-count, .flow-pest, .flow-summary span { text-transform: uppercase; letter-spacing: var(--track-caps-sm); font-weight: 500; }
  .flow-pest { font-size: .6875rem; }
  .flow-count, .svc-num { font-size: .6875rem; }
  .flow-back { text-transform: uppercase; letter-spacing: var(--track-caps-sm); font-size: .75rem; }

  /* boutons */
  .btn { text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 500; }
  .svc-cta { white-space: nowrap; letter-spacing: 0; }
  .btn--sm { font-size: .75rem; }
  .link-arrow, .th-unknown a { letter-spacing: .01em; }
}

/* ==========================================================================
   v0.7 — POLICE DE MARQUE : Poppins (police du logo)
   ========================================================================== */
@layer tokens {
  :root {
    --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-body: clamp(.9375rem, .92rem + .1vw, 1rem);   /* Poppins est large : corps légèrement réduit */
    --track-caps: .14em; --track-caps-sm: .12em;
  }
}
@layer sections {
  body { font-family: var(--font); }
  /* titres : Poppins Medium resserrée */
  h1, h2, h3, h4, .th-title, .svc-title, .flow-q { font-weight: 500; letter-spacing: -.025em; }
  .th-title { letter-spacing: -.03em; }

  /* logo (reproduction typographique du logo officiel : Light + Bold) */
  .logo-fallback { display: inline-flex; align-items: flex-start; gap: .28em; font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem); letter-spacing: 0; text-transform: uppercase; line-height: 1; }
  .lf-light { font-weight: 300; }
  .lf-bold { font-weight: 700; margin-left: -.02em; }
  .lf-reg { font-size: .62em; font-weight: 500; margin-left: .15em; margin-top: -.12em; }

  /* libellés en capitales : Poppins Medium */
  .menu-label, .nav a, .eyebrow, .th-eyebrow, .btn { font-weight: 500; }
  .svc-desc, .th-question, .flow-tech p { font-weight: 400; }
}

/* logo officiel (PNG rogné 1920×169 ; ratio 11,4) */
@layer sections {
  .logo-img { display: block; height: clamp(22px, 1.5rem + .45vw, 31px); width: auto; } /* logo officiel « Groupe » (1437×189) : même largeur de mot-symbole qu'avant */
  .logo.has-logo .logo-fallback { display: none; }
  .logo:not(.has-logo) .logo-img { display: none; }
}
@layer sections { .foot-logo { display: block; height: 30px; width: auto; } }

/* ==========================================================================
   v0.8 — SECTIONS PREMIUM (références : Axioma, Porsche, applis voyage, iPhone)
   ========================================================================== */
@layer tokens {
  :root {
    --mist: #EEF1F4;          /* gris-bleu clair des panneaux */
    --mist-2: #DDE3E9;
    --steel: #4A5561;         /* bloc graphite (fiche rat/souris) */
    --r-frame: clamp(22px, 2.4vw, 36px);
    --sec-y: clamp(64px, 9vw, 140px);
  }
}
@layer sections {
  /* ---------- socle ---------- */
  .sec { padding-block: var(--sec-y) 0; }
  .wrap { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }

  /* sur-titre : trait fin + capitales espacées (remplace le point bleu) */
  .kicker, .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
  .kicker::before, .eyebrow::before { content: ""; width: 28px; height: 1px; border-radius: 0; background: currentColor; opacity: .6; }
  .kicker--light, .on-night .eyebrow, .on-night .kicker { color: rgba(255,255,255,.75); }
  .on-night .eyebrow::before { background: currentColor; }

  /* titres de section : grands, fins, serrés */
  .sec h2, .section h2, .section-head h2 { font-size: clamp(2rem, 1.25rem + 3vw, 4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }

  /* bouton pilule + pastille fléchée ↗ */
  .pill-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 22px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 24px rgba(7,25,46,.12); transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro); }
  .pc-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; transition: transform var(--t-state) var(--ease); }
  .pc-ic svg { width: 16px; height: 16px; transform: rotate(-45deg); }
  .pill-cta:hover .pc-ic { transform: rotate(45deg); }
  .pill-cta:active { transform: scale(.98); }
  .pill-cta--dark { background: var(--ink); color: #fff; box-shadow: none; }
  .pill-cta--dark .pc-ic { background: #fff; color: var(--ink); }

  /* verre dépoli */
  .glass { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #fff; border-radius: 20px; }

  /* mot géant translucide */
  .ghost-word { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; line-height: .8; white-space: nowrap; color: rgba(255,255,255,.22); pointer-events: none; user-select: none; }

  /* boutons ronds précédent / suivant */
  .round-nav { display: flex; gap: 10px; }
  .round-nav button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px currentColor; color: inherit; opacity: .8; transition: opacity var(--t-micro), background-color var(--t-micro); }
  .round-nav button:hover { opacity: 1; background: rgba(255,255,255,.08); }
  .round-nav svg { width: 18px; height: 18px; }

  /* ---------- 03 : bandeau après le hero ---------- */
  .th-after { border-top: 0; padding: clamp(28px, 4vw, 56px) 0 0; }
  .th-after-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
  .th-after-lead { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; max-width: 30ch; }
  .th-after-points { gap: 8px; }
  .th-after-points li { height: 38px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: var(--mist); color: var(--ink); font-size: .8125rem; font-weight: 500; }
  .th-after-points li::before { width: 18px; height: 18px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }

  /* ---------- 04 : Dératisation à Lyon (photo + verre) ---------- */
  .xd-frame { position: relative; isolation: isolate; border-radius: var(--r-frame); overflow: hidden; min-height: clamp(560px, 82svh, 780px); display: grid; align-content: space-between; gap: 24px; padding: clamp(22px, 3.4vw, 52px); color: #fff; background: var(--night); }
  .xd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
  .xd-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,25,46,.62) 0%, rgba(7,25,46,0) 62%), linear-gradient(180deg, rgba(7,25,46,.55) 0%, rgba(7,25,46,.1) 45%, rgba(7,25,46,.55) 100%); }
  .xd-frame .ghost-word { top: 50%; transform: translateY(-50%); font-size: clamp(3rem, 12.5vw, 13rem); z-index: -1; color: rgba(255,255,255,.16); }
  .xd-copy { max-width: 620px; display: grid; gap: 16px; justify-items: start; }
  .xd-copy h2 { color: #fff; }
  .xd-lead { color: rgba(255,255,255,.82); font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); max-width: 54ch; }
  .xd-copy .pill-cta { margin-top: 8px; }
  .xd-facts { display: grid; gap: 10px; margin: 0; }
  .xd-facts .glass { padding: 16px 18px; }
  .xd-facts dt { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; opacity: .75; }
  .xd-facts dd { margin: 6px 0 0; font-size: .9375rem; line-height: 1.45; }
  @media (min-width: 900px) {
    .xd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; justify-self: end; }
    .xd-facts .glass { padding: 20px 22px; }
  }

  /* ---------- 05 : Rat ou souris (mot géant, fiche graphite) ---------- */
  .xv { position: relative; background: linear-gradient(180deg, #DFE4EA, #CED6DE); border-radius: var(--r-frame); padding: clamp(22px, 3.4vw, 52px); overflow: hidden; }
  .xv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; position: relative; z-index: 2; }
  .xv-tabs { display: flex; gap: 28px; }
  .xv-tabs [role="tab"] { position: relative; padding: 10px 0; font-size: .8125rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
  .xv-tabs [role="tab"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-state) var(--ease); }
  .xv-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
  .xv-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
  .xv-panel { display: grid; gap: 22px; }
  .xv-stage { position: relative; display: grid; place-items: center; min-height: clamp(240px, 38vw, 470px); margin-top: 8px; }
  .xv-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -72%); font-size: clamp(5rem, 24vw, 24rem); font-weight: 200; letter-spacing: -.04em; line-height: .8; color: #fff; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
  .xv-animal { position: relative; width: min(82%, 760px); filter: drop-shadow(0 30px 30px rgba(7,25,46,.22)); }
  #vp-souris .xv-animal { width: min(56%, 520px); }
  .motion-ok .xv-panel:not([hidden]) .xv-animal { animation: xvIn .7s var(--ease) both; }
  .motion-ok .xv-panel:not([hidden]) .xv-word { animation: xvWord .9s var(--ease) both; }
  @keyframes xvIn { from { opacity: 0; transform: translateX(40px); } }
  @keyframes xvWord { from { opacity: 0; letter-spacing: .04em; } }
  .xv-count { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--ink); }
  .xv-count b { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 200; letter-spacing: -.04em; line-height: .8; }
  .xv-count span { font-size: .8125rem; color: var(--ink-2); margin-top: 4px; }
  .xv-specs { list-style: none; margin: 0; padding: 20px; display: grid; gap: 14px; border-radius: 20px; background: var(--steel); color: #fff; }
  .xv-specs li { display: grid; gap: 4px; }
  .xv-specs .k { font-size: .6875rem; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: rgba(255,255,255,.65); }
  .xv-specs b { font-weight: 500; font-size: 1rem; line-height: 1.3; }
  .xv-more { margin: 0; display: grid; gap: 12px; }
  .xv-more div { display: grid; gap: 2px; }
  .xv-more dt { font-size: .6875rem; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
  .xv-more dd { margin: 0; font-size: .9375rem; }
  .xv-panel .pill-cta { justify-self: start; }
  .xv-note { margin-top: 22px; font-size: .8125rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .xv-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mist-2); }
  .xv-note svg { width: 14px; height: 14px; }
  @media (min-width: 900px) {
    .xv-panel { grid-template-columns: 1fr 1.1fr auto; grid-template-areas: "stage stage stage" "more specs cta"; align-items: end; column-gap: 28px; }
    .xv-stage { grid-area: stage; }
    .xv-more { grid-area: more; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
    .xv-specs { grid-area: specs; grid-template-columns: repeat(3, 1fr); padding: 26px 28px; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); padding-left: calc(28px + 4%); }
    .xv-panel .pill-cta { grid-area: cta; }
  }

  /* ---------- 06 : cheminements + indices ---------- */
  .c-paths { padding-top: var(--sec-y); padding-bottom: 0; }
  .paths-frame { border-radius: var(--r-frame); box-shadow: none; background: var(--mist); }
  .paths-note { position: relative; background: #fff; border-radius: 20px; box-shadow: 0 18px 50px rgba(7,25,46,.10); border: 0; padding: 22px 24px; }
  .paths-note b { font-weight: 600; }
  .ppt span { background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: 7px 12px; font-weight: 500; box-shadow: 0 8px 24px rgba(7,25,46,.12); }
  .clues-tabs { gap: 10px; padding: 4px 2px 10px; }
  .clues-tabs [role="tab"] { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; width: 128px; min-height: 112px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: .9375rem; color: var(--ink); }
  .clues-tabs [role="tab"] span { font-size: 1.75rem; font-weight: 200; letter-spacing: -.03em; color: var(--ink-3); line-height: 1; }
  .clues-tabs [role="tab"]:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-3); }
  .clues-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(7,25,46,.18); }
  .clues-tabs [role="tab"][aria-selected="true"] span { color: rgba(255,255,255,.7); }
  .clue-panel { border-radius: var(--r-frame); box-shadow: none; background: var(--mist); }
  .clue-big { font-weight: 200; color: #fff; }
  .clues-head h3 { font-weight: 500; }

  /* ---------- 08 : méthode (sombre, pagination) ---------- */
  .x-method { margin-top: var(--sec-y); padding-block: clamp(56px, 7vw, 110px); background: #0B0D10; color: #fff; }
  .xm { display: grid; gap: clamp(28px, 4vw, 48px); }
  .xm-head h2 { color: #fff; margin-top: 14px; }
  .xm-panel { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
  .xm-text { display: grid; gap: 14px; align-content: start; justify-items: start; max-width: 520px; }
  .xm-pill { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
  .xm-text h3 { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); font-weight: 500; letter-spacing: -.03em; }
  .xm-text > p { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.6; }
  .xm-out { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 4px; color: #fff !important; }
  .xm-out b { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: rgba(255,255,255,.55); }
  .xm-media { margin: 0; border-radius: var(--r-frame); overflow: hidden; aspect-ratio: 4 / 3; background: #15191F; }
  .xm-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .xm-media--cut { background: transparent; border-radius: 0; display: grid; place-items: end center; }
  .xm-media--cut img { width: auto; height: 100%; object-fit: contain; }
  .motion-ok .xm-panel:not([hidden]) .xm-media img { animation: xmZoom 1.1s var(--ease) both; }
  .motion-ok .xm-panel:not([hidden]) .xm-text { animation: xmText .6s var(--ease) both; }
  @keyframes xmZoom { from { transform: scale(1.06); opacity: .4; } }
  @keyframes xmText { from { opacity: 0; transform: translateY(10px); } }
  .xm-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .xm-tabs { display: flex; gap: clamp(14px, 3vw, 36px); overflow-x: auto; scrollbar-width: none; }
  .xm-tabs [role="tab"] { position: relative; display: grid; gap: 4px; padding: 0 0 12px; text-align: left; color: rgba(255,255,255,.45); transition: color var(--t-micro); }
  .xm-tabs [role="tab"] b { font-weight: 500; font-size: .9375rem; font-variant-numeric: tabular-nums; }
  .xm-tabs [role="tab"] span { font-size: .75rem; letter-spacing: .04em; }
  .xm-tabs [role="tab"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform var(--t-state) var(--ease); }
  .xm-tabs [role="tab"][aria-selected="true"] { color: #fff; }
  .xm-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
  .xm-tabs [role="tab"]:hover { color: rgba(255,255,255,.85); }
  @media (max-width: 599px) { .xm-tabs [role="tab"] span { display: none; } .round-nav button { width: 44px; height: 44px; } }
  @media (min-width: 900px) {
    .xm { grid-template-columns: 1fr; }
    .xm-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .xm-media { aspect-ratio: 16 / 10; }
  }

  /* ---------- 09-10 : pour qui (photos + carte flottante) ---------- */
  .c-audience { padding-top: var(--sec-y); padding-bottom: 0; }
  .aud-switch { background: var(--mist); }
  .env-tabs { gap: 26px; border-bottom: 1px solid var(--line); padding: 0; margin-top: 8px; }
  .env-tabs [role="tab"] { position: relative; height: 46px; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--ink-3); font-size: .9375rem; }
  .env-tabs [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform var(--t-state) var(--ease); }
  .env-tabs [role="tab"][aria-selected="true"] { color: var(--ink) !important; }
  .env-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
  .env-panel, .sector-panel { display: grid; margin-top: 22px; padding: 0; border-radius: var(--r-frame); background: none; color: var(--ink); overflow: visible; }
  .env-media { grid-area: 1 / 1; margin: 0; border-radius: var(--r-frame); overflow: hidden; min-height: clamp(260px, 52vw, 560px); background: linear-gradient(150deg, #1B2B3F, #0B0D10); }
  .env-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .env-word, .sector-panel .env-word { grid-area: 1 / 1; position: relative; left: auto; top: auto; align-self: start; padding: 18px 22px; z-index: 1; font-size: clamp(2.5rem, 9vw, 8rem); font-weight: 600; letter-spacing: -.03em; color: rgba(255,255,255,.28); text-transform: uppercase; overflow: hidden; }
  .env-media--plain + .env-word { color: rgba(255,255,255,.1); }
  .env-body { position: relative; z-index: 2; max-width: none; margin: -56px 14px 0; padding: 22px; background: #fff; border-radius: 22px; box-shadow: 0 22px 60px rgba(7,25,46,.14); }
  .env-body > p, .sector-panel .env-body > p { color: var(--ink-2); }
  .env-clues li { background: var(--mist); box-shadow: none; color: var(--ink); }
  .sector-list li { color: var(--ink); }
  .sector-list li::before { background: var(--blue); }
  .sector-panel .link-arrow { color: var(--blue); }
  @media (min-width: 900px) {
    .env-panel, .sector-panel { grid-template-columns: 1fr; }
    .env-body { grid-area: 1 / 1; align-self: end; justify-self: end; width: min(460px, 46%); margin: 24px; }
  }

  /* ---------- 11 : cas réels ---------- */
  .c-intervention-case { border-radius: var(--r-frame); box-shadow: 0 22px 60px rgba(7,25,46,.10); }
  .case-body { counter-reset: case; }
  .case-item { position: relative; border-bottom: 0; }
  .case-item .k { color: var(--ink-2); }

  /* ---------- 12 : zones (radar) ---------- */
  .c-area .area-card { border-radius: var(--r-frame); box-shadow: none; background: var(--mist); }
  .area-map { background: radial-gradient(60% 70% at 32% 50%, #fff, var(--mist) 75%); }
  .map-zone { display: none; }
  .map-rings circle { fill: none; stroke: #B9C4D0; stroke-width: 1; }
  .map-rings circle:nth-child(1) { stroke-dasharray: none; }
  .map-river { stroke: #D3DCE6; stroke-width: 8; }
  .map-pt circle.core { fill: #fff; stroke: var(--ink); stroke-width: 2; }
  .map-pt:hover circle.core, .map-pt.is-active circle.core { fill: var(--ink); }
  .map-pt circle.halo { fill: rgba(7,25,46,.08); }
  .map-pt text { stroke: #F3F5F8; }
  .map-pt--city circle.core { fill: var(--blue); stroke: #fff; stroke-width: 3; }
  .area-side { background: transparent; }
  .area-list .chip { background: #fff; box-shadow: none; border-radius: var(--r-pill); }
  .area-list .chip[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
  .c-location-card { background: #fff; border-radius: 22px; box-shadow: 0 18px 50px rgba(7,25,46,.10); }

  /* ---------- 13 : preuves ---------- */
  .c-review-summary { border-radius: var(--r-frame); box-shadow: none; background: var(--ink); color: #fff; }
  .c-review-summary .score { font-weight: 200; font-size: clamp(4rem, 3rem + 4vw, 7.5rem); }
  .c-review-summary .score small { color: rgba(255,255,255,.55); font-weight: 300; }
  .c-review-summary p { color: rgba(255,255,255,.7); }
  .c-review-summary .link-arrow { color: #fff; }
  .c-review-summary .stars { color: #fff; }
  .trust-item { border-radius: 22px; box-shadow: none; background: var(--mist); }
  .trust-item .ic { border-radius: 50%; background: #fff; color: var(--ink); }

  /* ---------- 14 : guides (cartes photo) ---------- */
  .guides-col { display: flex; flex-direction: column; }
  .guide-media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 8px; isolation: isolate; }
  .guide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; transition: transform .8s var(--ease); }
  .guide-media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,25,46,0) 40%, rgba(7,25,46,.7)); }
  .guides-col:hover .guide-media img { transform: scale(1.04); }
  .guide-media h3, .guides-col .guide-media h3 { position: absolute; left: 20px; bottom: 16px; border: 0; padding: 0; color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 500; }
  .guides-col li a { font-weight: 400; }

  /* ---------- 15 : FAQ ---------- */
  .faq-item summary { font-weight: 500; }
  .faq-item summary::after { background-color: var(--mist); box-shadow: none; }

  /* ---------- 16 : CTA (bannière photo) ---------- */
  .x-cta { padding-bottom: 0; }
  .xc { position: relative; isolation: isolate; border-radius: var(--r-frame); overflow: hidden; min-height: clamp(420px, 60svh, 600px); display: grid; align-items: end; padding: clamp(22px, 3.4vw, 52px); color: #fff; background: var(--night); }
  .xc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
  .xc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,25,46,.15), rgba(7,25,46,.78)); }
  .xc .ghost-word { top: 12%; font-size: clamp(3rem, 13vw, 13rem); z-index: -1; }
  .xc-copy { display: grid; gap: 14px; max-width: 640px; }
  .xc-copy h2 { color: #fff; }
  .xc-copy > p { color: rgba(255,255,255,.8); }
  .xc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; }
  .xc-call { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: .9375rem; }
  .xc-call svg { width: 16px; height: 16px; }
  .pill-cta--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); backdrop-filter: blur(6px); }
  .pill-cta--ghost .pc-ic { background: #fff; color: var(--ink); }

  /* rythme : sections conservées */
  .section { padding-block: var(--sec-y) 0; }
  .c-footer { margin-top: var(--sec-y); }
}
@layer sections {
  /* indices : rangée de tuiles au-dessus du panneau (toutes tailles) */
  @media (min-width: 900px) {
    .clues-ui { grid-template-columns: 1fr; gap: 18px; }
    .clues-tabs { flex-direction: row; overflow-x: auto; gap: 10px; }
    .clues-tabs [role="tab"] { flex: 1 1 0; width: auto; min-width: 130px; }
  }
  .clue-panel { min-height: 200px; }
}
@layer sections { @media (min-width: 700px) { .trust-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
@layer sections { .faq-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } }
@layer sections {
  @media (max-width: 899px) {
    .xv-stage { min-height: 300px; align-content: end; padding-bottom: 40px; }
    .xv-word { top: 0; transform: translateX(-50%); font-size: clamp(6rem, 34vw, 11rem); }
    .motion-ok .xv-panel:not([hidden]) .xv-word { animation: none; }
    .xv-animal { width: 92%; }
    #vp-souris .xv-animal { width: 64%; }
  }
}
@layer sections { .env-media { position: relative; } .env-media img { position: absolute; inset: 0; } }

/* ==========================================================================
   v0.9 — HERO : titre centré + sélecteur en arc de cercle
   ========================================================================== */
@layer sections {
  .th-head { text-align: center; display: block; margin-inline: auto; max-width: 820px; margin-bottom: clamp(6px, 1vw, 12px); }
  .th-eyebrow { justify-content: center; }
  .th-title { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.5rem); letter-spacing: -.04em; }
  .th-question { margin-top: clamp(6px, 1vw, 14px); }

  /* piste : chaque carte peut venir au centre ; marge verticale pour l'arc */
  .th-select { display: block; }
  .svc { margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .svc-track {
    --cw: min(66vw, 290px);
    gap: clamp(8px, 1.2vw, 18px); scroll-snap-type: x mandatory; scroll-padding-inline: 0;
    padding: 18px calc(50% - var(--cw) / 2) 64px;
  }
  .svc-card {
    flex: 0 0 var(--cw); height: auto; aspect-ratio: 3 / 4.1; scroll-snap-align: center;
    border-radius: 26px; transform-origin: 50% 100%; will-change: transform;
    box-shadow: 0 24px 60px rgba(7,25,46,.18);
  }
  .svc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.55); opacity: calc(var(--dim, 0) * .55); pointer-events: none; transition: opacity .2s; }
  .svc-card::before { background: linear-gradient(180deg, rgba(7,25,46,0) 38%, rgba(7,25,46,.6) 66%, rgba(7,25,46,.9) 100%); }
  .svc-img, .svc-card .svc-img { object-position: var(--pos-m, 50% 50%); }
  .svc-body { padding: 18px; gap: 3px; }
  .svc-title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
  .svc-desc { font-size: .8125rem; margin-bottom: 10px; }
  .svc-cta { white-space: normal; min-height: 44px; padding: 10px 16px; font-size: .8125rem; line-height: 1.2; }
  /* les cartes latérales restent visibles mais en retrait ; leur bouton n'est pas mis en avant */
  .svc-card:not(.is-active) .svc-cta { background: rgba(255,255,255,.85); }

  .svc-foot { justify-content: center; gap: 18px; margin-top: -30px; position: relative; z-index: 12; }
  .svc-nav { display: contents; }
  .svc-nav button:first-child { order: -1; }
  .th-unknown, .th-call { text-align: center !important; }
  .th-unknown { margin-top: 14px; }
  .th-call { margin-top: 6px; }
  .th-flow { margin-inline: auto; }

  @media (min-width: 900px) {
    .svc-track { --cw: clamp(280px, 24vw, 360px); padding-bottom: 164px; cursor: grab; }
    .svc-card { aspect-ratio: 3 / 4; }
    .svc-body { padding: 22px; max-width: none; }
    .svc-card::before { background: linear-gradient(180deg, rgba(7,25,46,0) 40%, rgba(7,25,46,.6) 68%, rgba(7,25,46,.9) 100%); }
    .svc-img { object-position: var(--pos-m, 50% 50%); }
    .svc-cta { min-height: 46px; font-size: .875rem; }
    .svc-foot { margin-top: -130px; }
    .svc-nav button { display: grid; }
  }
  @media (hover: none) { .svc-nav button { display: none; } }
  @media (max-width: 899px) and (max-height: 700px) { .svc-track { --cw: min(66vw, 260px); } }
}
@layer sections { @media (max-width: 899px) { .svc-card { box-shadow: 0 12px 28px rgba(7,25,46,.16); } .svc-track { padding-bottom: 56px; } .svc-foot { margin-top: -22px; } } }
@layer sections { @media (max-width: 899px) { .svc-body { padding: 14px; } .svc-cta { padding: 10px 14px; font-size: .78rem; gap: 8px; } } }
@layer sections {
  /* la piste ne défile qu'horizontalement : les cartes de l'arc ne peuvent plus remonter sous le titre */
  .svc-track { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* v0.9.1 — H1 discret (style sur-titre) ; la question devient le titre visuel */
@layer sections {
  .th-head .th-title { font-size: .8125rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blue); line-height: 1.3; margin-bottom: 10px; }
  .th-head .th-question { margin-top: 0; font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); text-wrap: balance; }
}
@layer sections { .c-thero { padding-top: clamp(18px, 3vw, 44px); } }
@layer sections { .svc-track.is-jumping { scroll-snap-type: none; scroll-behavior: auto; } }
@layer sections { .guides-all { margin-top: clamp(28px, 4vw, 48px); } }

/* ==========================================================================
   v1.0 — Phase B : menu Solutions, sections Cafards / Autres nuisibles, preuves
   ========================================================================== */
@layer sections {
  /* menu Solutions */
  .nav { align-items: center; }
  .nav-dd { position: relative; }
  .nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink); }
  .nav-dd-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-micro); }
  .nav-dd-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .nav-dd-btn:hover { background: rgba(7,25,46,.04); }
  .nav-dd-panel { position: absolute; top: calc(100% + 10px); left: -12px; width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(7,25,46,.16), inset 0 0 0 1px var(--line); z-index: 60; }
  .nav-dd-panel a { display: grid; gap: 2px; padding: 12px 14px !important; border-radius: 14px; text-transform: none !important; letter-spacing: 0 !important; }
  .nav-dd-panel a b { font-size: .9375rem; font-weight: 500; color: var(--ink); }
  .nav-dd-panel a span { font-size: .8125rem; color: var(--ink-2); font-weight: 400; }
  .nav-dd-panel a:hover { background: var(--mist); }
  .motion-ok .nav-dd-panel:not([hidden]) { animation: ddIn .22s var(--ease) both; }
  @keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } }

  /* 10 — Cafards */
  .xr { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
  .xr-media { margin: 0; border-radius: var(--r-frame); overflow: hidden; aspect-ratio: 4 / 3.4; }
  .xr-media img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
  .xr-copy { display: grid; gap: 16px; justify-items: start; max-width: 600px; }
  .xr-lead { color: var(--ink-2); font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.65; }
  .xr-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--line); }
  .xr-points li { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
  .xr-points b { font-weight: 500; }
  .xr-points span { color: var(--ink-2); }
  .xr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
  @media (min-width: 900px) { .xr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

  /* 11 — Autres nuisibles */
  .xo-head { margin-bottom: clamp(22px, 3vw, 40px); }
  .xo-head h2 { margin-top: 14px; max-width: 18ch; }
  .xo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .xo-card { position: relative; display: grid; gap: 6px; align-content: start; min-height: 168px; padding: 20px 22px; border-radius: 22px; background: var(--mist); transition: background-color var(--t-micro), transform var(--t-micro) var(--ease); }
  .xo-card:hover { background: var(--mist-2); }
  .xo-card:active { transform: scale(.99); }
  .xo-n { font-size: 1.5rem; font-weight: 200; color: var(--ink-3); letter-spacing: -.02em; margin-bottom: 18px; }
  .xo-card b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
  .xo-card > span:not(.xo-n) { color: var(--ink-2); font-size: .9375rem; }
  .xo-card i { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform var(--t-state) var(--ease); }
  .xo-card i svg { width: 15px; height: 15px; transform: rotate(-45deg); }
  .xo-card:hover i { transform: rotate(45deg); }
  .xo-more { margin-top: 22px; }

  /* preuves : 3 colonnes sur grand écran */
  @media (min-width: 1100px) { .trust-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@layer sections { @media (min-width: 560px) { .xo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .xo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } }
@layer sections { @media (max-width: 559px) { .xo-card { min-height: 0; padding: 16px 56px 16px 18px; gap: 2px; } .xo-n { font-size: 1rem; margin-bottom: 4px; } .xo-card b { font-size: 1.125rem; } } }

/* ==========================================================================
   v1.1 — PAGES DE SERVICE (ServiceHero, À retenir, Signes, Tableaux, Méthode,
   Contexte, Pour qui, Prix, Zone, Diagnostic) — préfixe sp-
   ========================================================================== */
@layer sections {
  .sp .sec { padding-top: clamp(56px, 7vw, 112px); }
  .sp-head { display: grid; gap: 12px; margin-bottom: clamp(22px, 3vw, 40px); max-width: 720px; }
  .sp-head h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
  .sp-lead { color: var(--ink-2); font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.65; }

  /* fil d'Ariane */
  .sp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .8125rem; color: var(--ink-2); }
  .sp-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); }
  .sp-crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  .sp-crumbs a:hover { color: var(--ink); }
  .sp-crumbs [aria-current] { color: var(--ink); }

  /* hero */
  .sp-hero { padding: clamp(18px, 3vw, 44px) 0 0; }
  .sp-hero-grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
  .sp-hero-copy { display: grid; gap: 14px; justify-items: start; }
  .sp-hero-copy h1 { font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
  .sp-answer-first { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--ink); max-width: 58ch; }
  .sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
  .sp-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9375rem; color: var(--ink); }
  .sp-call svg { width: 16px; height: 16px; color: var(--blue); }
  .sp-proof { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .sp-proof li { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--mist); font-size: .8125rem; font-weight: 500; }
  .sp-proof li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
  .sp-hero-media { margin: 0; border-radius: var(--r-frame); overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--mist); }
  .sp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
  @media (min-width: 900px) { .sp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .sp-hero-media { aspect-ratio: 4 / 4.2; } }

  /* à retenir */
  .sp-keybox { border-radius: var(--r-frame); background: var(--mist); padding: clamp(22px, 3.4vw, 48px); display: grid; gap: 18px; }
  .sp-keybox-title { font-size: .75rem !important; font-weight: 500 !important; letter-spacing: var(--track-caps) !important; text-transform: uppercase; color: var(--ink-2); line-height: 1.3 !important; }
  .sp-keybox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .sp-keybox li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
  .sp-keybox li::before { content: ""; width: 8px; height: 8px; margin: 9px 0 0 6px; border-radius: 50%; background: var(--blue); }
  .sp-keybox b { color: var(--ink); font-weight: 500; }
  @media (min-width: 900px) { .sp-keybox { grid-template-columns: 200px 1fr; } .sp-keybox ul { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

  /* signes */
  .sp-signs-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .sp-signs-grid li { padding: 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; align-content: start; }
  .sp-signs-grid .n { font-size: 1.5rem; font-weight: 200; color: var(--ink-3); }
  .sp-signs-grid h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.02em; }
  .sp-signs-grid p { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }

  /* blocs en deux colonnes + tableaux HTML */
  .sp-split { display: grid; gap: clamp(20px, 4vw, 56px); align-items: start; }
  @media (min-width: 1000px) { .sp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .sp-split .sp-head { margin-bottom: 0; } }
  .sp-table-wrap { overflow-x: auto; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
  .sp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 520px; }
  .sp-table th, .sp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .sp-table thead th { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-2); background: var(--mist); }
  .sp-table tbody th { font-weight: 500; white-space: nowrap; }
  .sp-table tbody tr:last-child > * { border-bottom: 0; }
  .sp-table td { color: var(--ink-2); }

  /* méthode (sur fond sombre) */
  .sp-method { margin-top: clamp(56px, 7vw, 112px); }
  .sp-method .xm-head { margin-bottom: clamp(24px, 3vw, 44px); }
  .sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255,255,255,.12); border-radius: 22px; overflow: hidden; }
  .sp-steps li { background: #0B0D10; padding: 24px; display: grid; gap: 10px; align-content: start; }
  .sp-steps .n { font-size: 2rem; font-weight: 200; color: rgba(255,255,255,.5); }
  .sp-steps h3 { font-size: 1.375rem; font-weight: 500; color: #fff; }
  .sp-steps p { color: rgba(255,255,255,.7); font-size: .9375rem; line-height: 1.6; }
  @media (min-width: 800px) { .sp-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .sp-steps { grid-template-columns: repeat(4, 1fr); } }
  .sp-tip { margin-top: 18px; padding: 20px 24px; border-radius: 22px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.82); display: grid; gap: 6px; max-width: 860px; }
  .sp-tip-k { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: #FFB86B; }

  /* contexte bâtiment */
  .sp-places-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .sp-places-grid li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .sp-places-grid h3 { font-size: 1.125rem; font-weight: 500; }
  .sp-places-grid p { color: var(--ink-2); font-size: .9375rem; }
  @media (min-width: 800px) { .sp-places-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; } .sp-places-grid li { grid-template-columns: 240px 1fr; gap: 20px; } }

  /* pour qui */
  .sp-aud-grid { display: grid; gap: 10px; }
  .sp-aud { padding: 24px; border-radius: 22px; background: var(--mist); display: grid; gap: 10px; align-content: start; }
  .sp-aud h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
  .sp-aud p { color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
  .sp-aud a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  @media (min-width: 900px) { .sp-aud-grid { grid-template-columns: repeat(3, 1fr); } }

  /* prix */
  .sp-price-card { display: grid; gap: 18px; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-frame); background: var(--ink); color: #fff; }
  .sp-price-card h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 500; letter-spacing: -.03em; margin-top: 12px; }
  .sp-price-card .kicker { color: rgba(255,255,255,.7); }
  .sp-price-body { display: grid; gap: 14px; color: rgba(255,255,255,.78); line-height: 1.65; }
  .sp-price-body .link-arrow { color: #fff; }
  @media (min-width: 900px) { .sp-price-card { grid-template-columns: 1fr 1fr; align-items: end; } }

  /* zone */
  .sp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .sp-chips li { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--r-pill); background: var(--mist); font-size: .875rem; font-weight: 500; }

  /* diagnostic intégré */
  .sp-diag { margin-top: clamp(56px, 7vw, 112px); padding: clamp(32px, 5vw, 72px) 0; background: var(--mist); }
  .sp-diag-intro { display: grid !important; justify-items: center; text-align: center; gap: 12px; max-width: 640px; margin: 0 auto; }
  .sp-diag-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
  .sp-diag-lead { color: var(--ink-2); }
  .sp-diag .pill-cta { margin-top: 8px; }
  .sp-diag .flow-card { background: #fff; }
  .sp-related .xo-n { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps-sm); text-transform: uppercase; }
}
@layer sections {
  .sp-keybox li { display: block; position: relative; padding-left: 22px; }
  .sp-keybox li::before { position: absolute; left: 0; top: 0; margin: 9px 0 0 2px; }
}
@layer sections { @media (min-width: 560px) { .sp-signs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .sp-signs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } }
@layer sections {
  /* titres des cartes du hero : majuscules grasses */
  .svc-title { font-weight: 700 !important; text-transform: uppercase; letter-spacing: .01em !important; line-height: .98; font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem); text-wrap: balance; }
  .svc-num { margin-bottom: 2px; }
  .svc-title + .svc-cta { margin-top: 12px; }
}

/* ==========================================================================
   v1.2 — GUIDES (articles answer-first) — préfixe gd-
   ========================================================================== */
@layer sections {
  .gd-wrap { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }
  .gd-head { padding: clamp(18px, 3vw, 44px) 0 0; }
  .gd-head h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; margin-top: 12px; }
  .gd-meta { margin-top: 14px; font-size: .8125rem; color: var(--ink-2); }
  .gd-answer { margin-top: 22px; padding: 22px 24px; border-radius: 22px; background: var(--mist); border-left: 3px solid var(--blue); }
  .gd-answer p { font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.65; color: var(--ink); }
  .gd-body { padding-top: clamp(28px, 4vw, 48px); font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
  .gd-body > * + * { margin-top: 1em; }
  .gd-body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin-top: 2em; }
  .gd-body ul, .gd-body ol { padding-left: 1.3em; }
  .gd-body li + li { margin-top: .45em; }
  .gd-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .gd-body strong { font-weight: 600; }
  .gd-body .sp-table-wrap { margin-top: 1.2em; }
  .gd-body .sp-table { min-width: 480px; }
  .gd-tip { margin-top: 1.6em !important; padding: 18px 22px; border-radius: 20px; background: var(--surface-blue, #F1F6FC); display: grid; gap: 6px; }
  .gd-tip p { font-size: 1rem; line-height: 1.6; }
  .gd-tip-k { font-size: .6875rem !important; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blue); }
  .gd-tip--warn { background: var(--warn-bg); }
  .gd-tip--warn .gd-tip-k { color: var(--warn); }
  .gd-cta { margin-top: 1.4em !important; padding: 20px 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
  .gd-cta p { font-size: 1rem; color: var(--ink-2); }
  .gd-cta .link-arrow { text-decoration: none; }
}
@layer sections { @media (min-width: 1100px) { .x-others .xo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } }
@layer sections { .gd-placeholder { padding: 28px; border-radius: 20px; border: 1px dashed var(--ink-3); color: var(--ink-2); text-align: center; } .sp-legacy .gd-body { padding-top: 0; } }
@layer sections {
  /* tuiles « indices » : largeur identique, libellé sur deux lignes si besoin, jamais tronqué */
  .clues-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; }
  .clues-tabs [role="tab"] { width: auto !important; min-width: 0 !important; flex: none !important; min-height: 118px; padding: 16px; white-space: normal !important; text-align: left; line-height: 1.25; scroll-snap-align: start; justify-content: space-between; align-items: flex-start; }
  .clues-tabs [role="tab"] span { font-size: 1.625rem; }
  @media (min-width: 900px) {
    .clues-tabs { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  }
}
@layer sections { .sp-hero-copy, .sp-hero-grid > * { min-width: 0; } @media (max-width: 599px) { .pill-cta { white-space: normal; text-align: left; line-height: 1.25; } } }
@layer sections { .sp-signs-grid p a, .sp-places-grid p a, .sp-keybox a, .faq-a a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .sp-signs-grid p a { display: table; margin-top: 8px; } }

/* ==========================================================================
   v1.3 — PAGE DEVIS (/contact/) — préfixe qf-
   ========================================================================== */
@layer sections {
  .qf-page { padding: clamp(18px, 3vw, 44px) 0 clamp(48px, 6vw, 96px); }
  .qf-grid { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
  .qf-intro { display: grid; gap: 14px; align-content: start; }
  .qf-intro h1 { font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
  .qf-lead { color: var(--ink-2); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; max-width: 46ch; }
  .qf-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
  .qf-steps li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
  .qf-steps b { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .8125rem; font-weight: 500; }
  .qf-contact { margin-top: 10px; padding: 20px 22px; border-radius: 22px; background: var(--mist); display: grid; gap: 8px; }
  .qf-contact-k { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
  .qf-phone { display: inline-flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
  .qf-phone svg { width: 20px; height: 20px; color: var(--blue); }
  .qf-nap { font-size: .875rem; color: var(--ink-2); line-height: 1.5; }

  .qf-form, .qf-done { padding: clamp(20px, 3vw, 40px); border-radius: var(--r-frame); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(7,25,46,.08); display: grid; gap: 18px; }
  .qf-field { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
  .qf-field legend { font-weight: 500; font-size: .9375rem; margin-bottom: 10px; padding: 0; }
  .qf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .qf-chips label { position: relative; cursor: pointer; }
  .qf-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .qf-chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: var(--r-pill); background: var(--mist); font-size: .875rem; font-weight: 500; transition: background-color var(--t-micro), color var(--t-micro), box-shadow var(--t-micro); }
  .qf-chips label:hover span { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .qf-chips input:checked + span { background: var(--ink); color: #fff; }
  .qf-chips input:focus-visible + span { outline: 3px solid rgba(20,104,216,.35); outline-offset: 2px; }
  .qf-row { display: grid; gap: 14px; }
  .qf-form .field select { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 0; background: var(--bg-2, #F7F9FB); box-shadow: inset 0 0 0 1px var(--line); font: inherit; color: var(--ink); }
  .qf-form .field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); background: #fff; }
  .qf-form .err:empty { display: none; }
  .qf-form > .err { color: #B42318; font-size: .8125rem; }
  .qf-submit { justify-self: start; }
  .qf-submit[disabled] { opacity: .6; pointer-events: none; }
  .qf-legal { font-size: .8125rem; color: var(--ink-3); }
  .qf-done { justify-items: center; text-align: center; padding-block: clamp(36px, 5vw, 64px); outline: none; }
  .qf-done .ok-badge { width: 60px; height: 60px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
  .qf-done .ok-badge svg { width: 26px; height: 26px; }
  .qf-done h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; }
  .qf-done p { color: var(--ink-2); max-width: 44ch; }
  .qf-done a[href^="tel"] { color: var(--blue); font-weight: 500; }
  @media (min-width: 640px) { .qf-row { grid-template-columns: 1.4fr .8fr 1.2fr; } .qf-row--2 { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .qf-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .qf-intro { position: sticky; top: calc(var(--header-h) + 24px); } }
}
@layer sections {
  .qf-dyn:empty { display: none; }
  .qf-dyn { padding: 18px; border-radius: 20px; background: var(--mist); display: grid; gap: 12px; }
  .qf-dyn-k { font-weight: 500; font-size: .9375rem; }
  .qf-dyn .field select { background: #fff; }
  @media (min-width: 640px) { .qf-row--place { grid-template-columns: 1.4fr .8fr 1fr; } }

  /* ---------- v1.4 — Page diagnostic (/diagnostic/) + bandeau des pages services ---------- */
  .dx-page { padding: clamp(18px, 3vw, 44px) 0 clamp(40px, 5vw, 80px); background: linear-gradient(180deg, var(--mist) 0%, var(--surface) 100%); }
  .dx-wrap { max-width: 860px; display: grid; gap: 18px; }
  .dx-intro { display: grid; gap: 16px; justify-items: start; }
  .dx-intro h1 { font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
  .dx-lead { color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; max-width: 56ch; }
  .dx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .dx-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; }
  .dx-facts svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
  .dx-call { font-size: .9375rem; color: var(--ink-2); }
  .dx-call a { color: var(--blue); font-weight: 500; }
  .dx-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(7,25,46,.08); padding: clamp(16px, 3vw, 32px); min-height: 380px; }
  .dx-hint { color: var(--ink-2); margin: -6px 0 14px; font-size: .9375rem; }
  .dx-card .flow-choice { min-width: 0; white-space: normal; }
  .dx-result { display: grid; gap: 20px; }
  .dx-res-grid { display: grid; gap: 12px; }
  .dx-res { padding: 18px 20px; border-radius: var(--r-md); background: var(--mist); display: grid; gap: 4px; }
  .dx-res span { font-size: .6875rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
  .dx-res b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
  .dx-res em { font-style: normal; color: var(--blue); font-weight: 500; font-size: .9375rem; }
  .dx-k { font-size: .8125rem; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; margin-bottom: 8px; }
  .dx-why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .dx-why li { position: relative; padding-left: 26px; line-height: 1.5; }
  .dx-why li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
  .dx-orient { display: grid; gap: 8px; line-height: 1.6; }
  .dx-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .dx-note { font-size: .875rem; color: var(--ink-2); line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--line); }
  .dx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  .dx-restart { border: 0; background: none; padding: 0; font: inherit; font-size: .9375rem; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
  .dx-form { box-shadow: none; padding: 0; background: none; }
  .dx-info { padding-top: clamp(32px, 4vw, 56px); }
  @media (min-width: 640px) { .dx-res-grid { grid-template-columns: 1fr 1fr; } .dx-card .qf-row--2 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 599px) { .dx-actions .pill-cta { width: 100%; justify-content: space-between; white-space: normal; } }

  .sp-diagband { padding: clamp(28px, 4vw, 56px) 0; }
  .sp-diagband-in { display: grid; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--ink); color: #fff; }
  .sp-diagband .kicker { color: rgba(255,255,255,.7); }
  .sp-diagband h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 12px; }
  .sp-diagband p { color: rgba(255,255,255,.8); line-height: 1.6; max-width: 60ch; }
  .sp-diagband-cta { display: grid; gap: 12px; justify-items: start; }
  .sp-diagband-tel { color: rgba(255,255,255,.85); font-size: .9375rem; text-decoration: underline; }
  @media (min-width: 900px) { .sp-diagband-in { grid-template-columns: 1fr auto; } }
  .dx-switch { margin-top: 16px; font-size: .875rem; color: var(--ink-2); }
  .dx-switch button { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }

/* ---------- v1.5 — Photos facultatives, description libre ---------- */
.ph-field { display: grid; gap: 8px; }
.ph-k { font-size: .875rem; font-weight: 500; }
.ph-help { font-size: .8125rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.ph-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ph-list:empty { display: none; }
.ph-list li { position: relative; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ph-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-list button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(17,20,23,.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.field .ph-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.ph-add { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: box-shadow var(--t-micro); }
.ph-add svg { width: 20px; height: 20px; color: var(--blue); }
.ph-add:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ph-add[hidden] { display: none; }
.field .ph-input:focus-visible + .ph-add { outline: 3px solid rgba(20,104,216,.35); outline-offset: 2px; }
.ph-err { margin: 0; font-size: .8125rem; color: #B42318; }
.ph-err:empty { display: none; }
.flow-hint { color: var(--ink-2); font-size: .9375rem; margin: -6px 0 10px; }
.flow-form textarea, .dx-textform textarea, .qf-dyn textarea { width: 100%; min-height: 120px; padding: 14px; border: 0; border-radius: 14px; background: var(--bg-2, #F7F9FB); box-shadow: inset 0 0 0 1px var(--line); font: inherit; color: var(--ink); resize: vertical; }
.qf-dyn textarea { background: #fff; }
.flow-form textarea:focus, .dx-textform textarea:focus, .qf-dyn textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); background: #fff; }
.dx-textform { display: grid; gap: 12px; justify-items: start; }
.dx-textform .err, .flow-form [data-text] .err { color: #B42318; font-size: .8125rem; }
.dx-textform .err:empty { display: none; }

  /* ---------- v1.6 — Bibliothèque /conseils/, page /professionnels/ ---------- */
  .lib-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .lib-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--mist); font-size: .875rem; font-weight: 500; color: var(--ink); transition: box-shadow var(--t-micro); }
  .lib-nav a:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .lib .gd-head { padding-bottom: 8px; }
  .lib-group { scroll-margin-top: 90px; padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }
  .lib-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
  .pro-list { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
  .pro-sector { display: grid; gap: 18px; align-items: center; scroll-margin-top: 90px; }
  .pro-sector figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--mist); }
  .pro-sector img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pro-sector h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; }
  .pro-sector p { color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
  .sp-places-grid h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  .sp-places-grid p a { color: var(--blue); }
  @media (min-width: 900px) { .pro-sector { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); } .pro-sector:nth-child(even) figure { order: 2; } }

  /* ---------- v1.7 — choix multiples, devis : encadré d'appel sous le formulaire ---------- */
  .flow-multi { margin: -6px 0 12px; font-size: .8125rem; font-weight: 500; color: var(--blue); }
  .flow-choice[role="checkbox"]::after { border-radius: 6px; }
  .flow-choice[role="checkbox"][aria-checked="true"]::after { box-shadow: none; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
  [data-flow-continue], .dx-continue { margin-top: 16px; }
  [data-flow-continue][disabled], .dx-continue[disabled] { opacity: .45; pointer-events: none; }
  .qf-dyn-block { display: grid; gap: 14px; }
  .qf-dyn-block + .qf-dyn-block { padding-top: 14px; border-top: 1px solid rgba(17,20,23,.08); }
  .qf-dyn .qf-chips span { background: #fff; }
  .qf-dyn .qf-field legend { margin-bottom: 8px; }
  .qf-field legend .opt { font-weight: 400; color: var(--ink-3); font-size: .8125rem; margin-left: 4px; }
  .qf-main { display: grid; gap: 18px; min-width: 0; }
  .qf-main .qf-contact { margin-top: 0; }

  /* ---------- v1.9 — Cheminements : bâtiment éclaté en 3D (CSS 3D) ---------- */
  .paths-frame.p3-on { aspect-ratio: 1 / 1; background: radial-gradient(90% 70% at 50% 35%, #FFFFFF 0%, #EEF2F6 70%, #E6EBF1 100%); }
  .no-js .paths-frame { display: none; }
  .p3 { position: absolute; inset: 0; perspective: 2200px; perspective-origin: 50% 30%; overflow: hidden; }
  .p3-stage { --rx: 62deg; --rz: 34deg; --s: 1; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(var(--rx)) rotateZ(var(--rz)) translate3d(-150px, -110px, -170px); }
  .p3-stage > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
  /* matériaux */
  .p3-slab.p3-top { background: #FBFCFD; box-shadow: inset 0 0 0 1px rgba(7,25,46,.28); }
  .p3-slab.p3-front, .p3-slab.p3-side, .p3-slab.p3-back { background: #0B1F38; }
  .p3-glass { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(236,241,247,.5)); box-shadow: inset 0 0 0 1px rgba(7,25,46,.32); }
  .p3-shaft { background: rgba(20,104,216,.07); box-shadow: inset 0 0 0 1px rgba(20,104,216,.45); }
  .p3-shaft.p3-top { background: rgba(20,104,216,.14); }
  .p3-pipe { background: #8C9BAA; } .p3-pipe.p3-side { background: #6F7F8F; }
  .p3-sewer { background: linear-gradient(180deg, #A9B5C1, #6F7F8F); } .p3-sewer.p3-top { background: #B9C4CE; } .p3-sewer.p3-side { background: #5E6E7E; }
  .p3-branch { background: #7D8D9D; } .p3-branch.p3-side { background: #66778A; }
  .p3-crate { background: #D9C7A6; } .p3-crate.p3-side { background: #C7B289; } .p3-crate.p3-top { background: #E6D8BD; }
  .p3-partition { background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(7,25,46,.25); }
  .p3-cab { background: #C9A47C; } .p3-cab.p3-side { background: #B48E66; } .p3-cab.p3-top { background: #D9BE9C; }
  .p3-cab.p3-front { background: linear-gradient(90deg, transparent 32.9%, rgba(90,62,35,.4) 33% 33.6%, transparent 33.7% 66.3%, rgba(90,62,35,.4) 66.4% 67%, transparent 67.1%), #C9A47C; }
  .p3-worktop { background: #F4F1EC; } .p3-worktop.p3-front, .p3-worktop.p3-side { background: #D8D2C8; }
  .p3-dev { background: #1A5FD0; } .p3-dev.p3-top { background: #3F82EC; } .p3-dev.p3-side { background: #144DA8; }
  /* trajet : pointillés discrets + traînée rouge animée */
  .p3-seg { border-radius: 3px; }
  .p3-seg--ghost { background: repeating-linear-gradient(var(--sd), rgba(7,25,46,.35) 0 3px, transparent 3px 9px); }
  .p3-seg--trail { background: repeating-linear-gradient(var(--sd), #E5484D 0 9px, rgba(229,72,77,.15) 9px 15px); background-size: var(--bs); filter: drop-shadow(0 0 4px rgba(229,72,77,.6)); }
  .p3-ax0 { --sd: 90deg; --bs: 30px 100%; } .p3-ax1, .p3-ax2 { --sd: 180deg; --bs: 100% 30px; }
  .motion-ok .p3-seg--trail.p3-ax0 { animation: p3FlowX .6s linear infinite; } .motion-ok .p3-seg--trail:not(.p3-ax0) { animation: p3FlowY .6s linear infinite; }
  @keyframes p3FlowX { to { background-position: 30px 0; } } @keyframes p3FlowY { to { background-position: 0 30px; } }
  /* rat */
  .p3-bb { width: 0; height: 0; }
  .p3-rat img { position: absolute; max-width: none; width: 92px; height: auto; left: -46px; top: -46px; filter: drop-shadow(0 6px 5px rgba(0,0,0,.3)); }
  .p3-rat i { position: absolute; left: -26px; top: -14px; width: 52px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(229,72,77,.45), rgba(229,72,77,0)); }
  .motion-ok .p3-rat i { animation: p3Halo 1.2s ease-in-out infinite; }
  @keyframes p3Halo { 50% { transform: scale(1.35); opacity: .6; } }
  /* repères au premier plan */
  .p3-tags { position: absolute; inset: 0; pointer-events: none; }
  .p3-tags > * { position: absolute; left: 0; top: 0; }
  .p3-step { display: flex; align-items: center; gap: 8px; opacity: .0; transition: opacity .4s var(--ease); }
  .p3-step b { display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 0 0 1.5px var(--ink), 0 6px 16px rgba(7,25,46,.18); }
  .p3-step span { margin-top: -15px; padding: 6px 11px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 22px rgba(7,25,46,.14); }
  .p3-step.is-flip { flex-direction: row-reverse; } .p3-step.is-flip b { margin: -15px -15px 0 0; } .p3-step.is-flip { transform-origin: 0 0; } .p3-step.is-flip span { position: absolute; right: 22px; top: 0; }
  .p3-level i { font-style: normal; } .p3-short { display: none; }
  @media (max-width: 599px) { .p3-full:has(+ .p3-short) { display: none; } .p3-short { display: inline; } }
  .p3-step.is-on { opacity: .55; } .p3-step.is-active { opacity: 1; }
  .p3-step.is-active b { background: #E5484D; color: #fff; box-shadow: 0 0 0 4px rgba(229,72,77,.25), 0 6px 16px rgba(7,25,46,.18); }
  .p3-level { width: 0; height: 0; }
  .p3-level span { position: absolute; right: 14px; top: -7px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
  .p3-level span::after { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; width: 8px; height: 1px; background: var(--ink-3); }
  .p3-rattag { margin: -58px 0 0 -18px; padding: 3px 9px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(229,72,77,.4); }
  /* légende pédagogique */
  .p3-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
  .p3-legend li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--t-micro), transform var(--t-micro); }
  .p3-legend b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12px; font-weight: 600; }
  .p3-legend h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 6px 0 4px; }
  .p3-legend p { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
  .p3-legend li.is-active { box-shadow: inset 0 0 0 2px #E5484D, 0 10px 30px rgba(229,72,77,.12); }
  .p3-legend li.is-active b { background: #E5484D; color: #fff; box-shadow: none; }
  .p3-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .8125rem; color: var(--ink-2); line-height: 1.5; }
  .p3-note-dev { flex: none; width: 16px; height: 10px; margin-top: 4px; border-radius: 2px; background: #1A5FD0; box-shadow: 0 2px 0 #144DA8; }
  @media (min-width: 700px) { .p3-legend { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 599px) { .p3-step span { font-size: 11px; padding: 5px 9px; } .p3-level span { font-size: 9px; letter-spacing: .1em; } }

  /* ---------- v2.0 — Références clients (bandeau de logos) ---------- */
  .x-refs { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); overflow: hidden; }
  .refs-head { margin-bottom: clamp(22px, 3vw, 36px); }
  .refs-head h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin-top: 8px; }
  .refs-marquee { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .refs-track { list-style: none; margin: 0; padding: 0 clamp(18px, 2.5vw, 32px) 0 0; display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); flex: none; }
  .refs-track li { flex: none; display: grid; place-items: center; height: 64px; }
  .refs-track img { height: 52px; width: auto; max-width: 190px; object-fit: contain; transition: transform var(--t-state) var(--ease); }
  .refs-track li:hover img { transform: scale(1.06); }
  .motion-ok .refs-marquee { animation: refsScroll 48s linear infinite; }
  .motion-ok .refs-marquee:hover { animation-play-state: paused; }
  @keyframes refsScroll { to { transform: translateX(-50%); } }
  html:not(.motion-ok) .refs-marquee { width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; padding: 0 16px; }
  html:not(.motion-ok) .refs-track[aria-hidden="true"] { display: none; }
  html:not(.motion-ok) .refs-track { flex-wrap: wrap; justify-content: center; padding: 0; }
  @media (max-width: 599px) { .refs-track img { height: 40px; max-width: 140px; } .refs-track li { height: 52px; } }

  /* ---------- v2.1 — Pages services : « En savoir plus » ---------- */
  .sp-more-body { max-width: 780px; padding-top: 0; }
  .sp-more-body h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-top: 1.8em; }
  .sp-more-body > h3:first-child { margin-top: 0; }
  .gd-body h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin-top: 1.6em; }
  .gd-body h2 + h3 { margin-top: .9em; }
}

/* Pastilles cliquables (secteurs desservis, pages d'une même ville) */
@layer sections {
  .sp-chips--links a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; height: 100%; }
  .sp-chips--links li { transition: background-color .2s ease; }
  .sp-chips--links li:hover, .sp-chips--links li:focus-within { background: color-mix(in srgb, var(--blue) 14%, var(--mist)); }
  .sp-chips--links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
}