/* =========================================================
   Foxonweb — feuille de style
   (les effets génériques sont dans assets/fx/effets.css)
   Formes : boutons en pilule, cartes 22px, champs 10px.
   ========================================================= */

:root {
  --accent: #A3E635;         /* vert citron Foxonweb */
  --accent-rgb: 163, 230, 53;
  --bg: #0F100E;             /* fond de page */
  --bg-2: #141512;           /* fond de section alternée */
  --surface: #191A17;        /* cartes, champs, modales */
  --surface-2: #20211D;
  --text: #F1F1EC;
  --text-rgb: 241, 241, 236;
  --text-dark: #141512;      /* texte sur fond vert */
  --muted: rgba(var(--text-rgb), 0.68);
  --faint: rgba(var(--text-rgb), 0.45);
  --line: rgba(var(--text-rgb), 0.08);
  --line-2: rgba(var(--text-rgb), 0.13);
  --line-3: rgba(var(--text-rgb), 0.2);
  --red: #E0665A;
  --green: #8BD66B;
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad-x: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --radius: 22px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3E635' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

  /* couleurs utilisées par la bibliothèque d'effets */
  --fx-accent: var(--accent);
  --fx-accent-2: #22D3EE;
  --fx-text: var(--text);
  --fx-surface: var(--surface);
  --fx-line: rgba(var(--text-rgb), 0.05);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }
.accent { color: var(--accent); }
/* Contenu centré sur 1240px max, avec une marge minimale sur les côtés */
.section-pad {
  padding-left: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
  padding-right: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--text-dark); font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Apparition au défilement (seulement si le JavaScript tourne) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer; text-align: center; white-space: nowrap;
  font-weight: 600; font-size: 15px; padding: 13px 24px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: var(--text-dark); }
.btn-primary:hover { background: #B4EE52; box-shadow: 0 12px 30px -12px rgba(var(--accent-rgb), .6); }
.btn-ghost { background: rgba(var(--text-rgb), .04); color: var(--text); border-color: rgba(var(--text-rgb), .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--line-3); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { font-size: 14px; padding: 9px 18px; }
.btn-lg { font-size: 16px; padding: 16px 28px; }
.btn[disabled] { opacity: .6; cursor: wait; }

.link-cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  color: var(--accent); font-weight: 600; font-size: 15px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.link-cta span { transition: transform .25s var(--ease-out); }
.link-cta:hover span { transform: translateX(4px); }
.link-cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 16px; padding-bottom: 16px;
  transition: background-color .5s ease, border-color .5s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(15, 16, 14, .78); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  padding-top: 11px; padding-bottom: 11px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.logo-mark { width: 38px; height: auto; display: block; }
.logo-word { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.navlink { position: relative; color: rgba(var(--text-rgb), .82); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .15s ease; }
.navlink:hover { color: var(--text); }
.nav-links .navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.nav-links .navlink:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Menu déroulant « Services » */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.nav-dd-btn svg { transition: transform .25s var(--ease-out); }
.nav-dd-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; width: 400px; z-index: 60;
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: rgba(25, 26, 23, .97); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .25s var(--ease-out), visibility .2s;
}
/* zone invisible entre le bouton et le panneau, pour ne pas le fermer en descendant la souris */
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel, .nav-dd.is-open .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dd:hover .nav-dd-btn svg, .nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
.dd-item { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; transition: background-color .2s ease; }
.dd-item:hover { background: rgba(var(--text-rgb), .06); }
.dd-item img { width: 76px; height: 52px; object-fit: cover; object-position: 70% 50%; border-radius: 8px; }
.dd-item strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.dd-item small { display: block; font-size: 13px; line-height: 1.4; color: var(--faint); margin-top: 2px; }
.dd-item:hover strong { color: var(--accent); }
.dd-all { display: flex; justify-content: space-between; padding: 10px 12px 6px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--accent); }
.mobile-menu-label { padding: 8px 14px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.mobile-menu .navlink-sub { padding-left: 22px; font-weight: 500; }

/* Sélecteur de langue FR | NL */
.lang-switch {
  display: inline-flex; align-items: center; padding: 3px; gap: 2px;
  border: 1px solid var(--line-2); background: rgba(var(--text-rgb), .03); border-radius: 999px;
}
.lang-switch a {
  font-size: 12.5px; font-weight: 700; letter-spacing: .5px; padding: 5px 11px; border-radius: 999px;
  color: rgba(var(--text-rgb), .6); transition: color .15s ease, background-color .15s ease;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="page"] { background: var(--text); color: var(--text-dark); }

.hamburger-btn {
  display: none; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(var(--text-rgb), .04);
  align-items: center; justify-content: center;
}
.mobile-menu {
  position: absolute; top: 100%; right: var(--pad-x); margin-top: 8px; width: 240px; z-index: 55;
  background: var(--surface); border-radius: 18px; border: 1px solid var(--line-2);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7);
  padding: 8px; display: flex; flex-direction: column;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.mobile-menu .navlink { padding: 11px 14px; border-radius: 10px; font-weight: 600; color: var(--text); }
.mobile-menu .navlink:hover { background: rgba(var(--text-rgb), .05); }
.mobile-menu-sep { height: 1px; background: var(--line); margin: 6px 6px; }
.mobile-menu .lang-switch { align-self: flex-start; margin: 6px 12px 8px; }

/* =========================================================
   HERO : photo du bureau + écrans animés
   La photo garde toujours ses proportions (3:2 ordinateur, 2:3 mobile)
   pour que les écrans superposés tombent pile sur ceux de l'image.
   ========================================================= */
.hero {
  position: relative; overflow: hidden; background: var(--bg);
  height: clamp(600px, 100vh, 980px);
  height: clamp(600px, 100svh, 980px);
  container-type: size;
  display: flex; align-items: center;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-stage {
  position: absolute; top: 50%; right: 0;
  width: max(100cqw, 150cqh); aspect-ratio: 3 / 2;
  transform: translateY(-50%);
}
.hero-stage picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-img { animation: hero-in 1.6s var(--ease-out) both; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(15,16,14,.8) 24%, rgba(15,16,14,.25) 46%, rgba(15,16,14,0) 60%),
    linear-gradient(to top, var(--bg) 0%, rgba(15,16,14,0) 20%),
    linear-gradient(to bottom, rgba(15,16,14,.55) 0%, rgba(15,16,14,0) 14%);
}

/* Écrans : positions mesurées sur la photo (en % de l'image) */
.scr { position: absolute; overflow: hidden; background: #0c0c0c; }
.scr-laptop { left: 53.84%; top: 33.2%; width: 27.15%; height: 25.2%; border-radius: 3px; }
.scr-phone { left: 84.375%; top: 44.34%; width: 6.45%; height: 18.75%; border-radius: 16% / 8%; }
.scr-laptop img, .scr-phone img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  opacity: 0; animation: scr-cycle 18s linear infinite;
}
.scr-laptop img:nth-of-type(2), .scr-phone img:nth-of-type(2) { animation-delay: -9s; }
/* chaque site s'affiche 9 s et défile doucement de haut en bas, puis on passe au suivant */
@keyframes scr-cycle {
  0%   { opacity: 0; object-position: 50% 0%; }
  4%   { opacity: 1; object-position: 50% 0%; }
  12%  { object-position: 50% 0%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  48%  { opacity: 1; object-position: 50% 100%; }
  54%  { opacity: 0; object-position: 50% 100%; }
  100% { opacity: 0; object-position: 50% 100%; }
}
.scr-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.45);
}
.scr-island { position: absolute; top: 2.6%; left: 50%; width: 30%; height: 3.6%; transform: translateX(-50%); background: #000; border-radius: 999px; }
.scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 12px rgba(0,0,0,.5); }

/* Hors écran : on met les animations du hero en pause */
.hero.is-off .scr img, .hero.is-off .scr *, .hero.is-off .hero-toast { animation-play-state: paused; }

/* Notification « nouvelle demande » qui apparaît pendant chaque site */
.hero-toast {
  position: absolute; left: 61%; top: 24.5%;
  display: flex; align-items: center; gap: 10px;
  padding: .7em 1em .7em .75em; border-radius: 14px;
  font-size: clamp(11px, .9cqw, 13.5px); line-height: 1.3; white-space: nowrap;
  background: rgba(25, 26, 23, .82); border: 1px solid rgba(var(--accent-rgb), .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8);
  opacity: 0; animation: toast 9s ease infinite 1s;
}
.hero-toast strong { display: block; font-weight: 600; }
.hero-toast small { display: block; color: var(--faint); font-size: .88em; }
.toast-ico { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: var(--text-dark); display: grid; place-items: center; flex-shrink: 0; }
@keyframes toast {
  0%, 46% { opacity: 0; transform: translateY(10px) scale(.97); }
  52%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-6px); }
}

.hero-content { position: relative; z-index: 1; width: 100%; padding-top: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero-content > * { max-width: min(620px, 44cqw); animation: rise .9s var(--ease-out) both; }
.hero-content > :nth-child(2) { animation-delay: .12s; }
.hero-content > :nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, min(5.6cqw, 8.4cqh), 88px);
  line-height: 1; letter-spacing: -.04em; text-wrap: balance;
}
.hero-sub { font-size: clamp(16px, 1.35cqw, 19px); line-height: 1.6; color: var(--muted); max-width: min(30em, 44cqw); text-wrap: pretty; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Portrait (mobile, tablette verticale) : photo verticale en haut, texte en dessous */
@media (max-aspect-ratio: 1/1) {
  .hero { height: auto; container-type: inline-size; display: block; padding-bottom: 64px; }
  .hero-stage { top: 0; right: auto; left: 0; width: 100%; aspect-ratio: 2 / 3; transform: none; }
  .scr-laptop { left: 28.61%; top: 15.1%; width: 43.07%; height: 17.58%; }
  .scr-phone { left: 79.98%; top: 21.48%; width: 9.77%; height: 13.35%; }
  .hero-toast { display: none; }
  .hero-media::after {
    background:
      linear-gradient(to bottom, rgba(15,16,14,.5) 0%, rgba(15,16,14,0) 10%, rgba(15,16,14,0) 30%, rgba(15,16,14,.6) 44%, var(--bg) 62%);
  }
  .hero-content { padding-top: 60cqw; gap: 20px; }
  .hero-content > *, .hero-sub { max-width: 640px; }
  .hero-h1 { font-size: clamp(38px, 10.4cqw, 72px); }
  .hero-sub { font-size: clamp(16px, 2.6cqw, 19px); }
}

/* ---------- Bande métiers ---------- */
.jobs-band { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; background: var(--bg-2); }
.jobs-band .fx-marquee-track { --fx-gap: 0px; --fx-speed: 75s; }
.jobs-band .fx-marquee { -webkit-mask-image: none; mask-image: none; }
.jobs-band::before, .jobs-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.jobs-band::before { left: 0; background: linear-gradient(to right, var(--bg-2), transparent); }
.jobs-band::after { right: 0; background: linear-gradient(to left, var(--bg-2), transparent); }
.job {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: rgba(var(--text-rgb), .5);
}
.job::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin: 0 30px; transform: rotate(45deg); }

/* ---------- Sections ---------- */
.section { position: relative; padding-top: clamp(80px, 10vw, 136px); padding-bottom: clamp(80px, 10vw, 136px); scroll-margin-top: 60px; }
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 20px 64px; }
.sec-head-split .lead { justify-self: end; max-width: 440px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;
}
.lead { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.brand { white-space: nowrap; }

/* ---------- Réalisations ---------- */
.case { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.case + .case { margin-top: clamp(72px, 9vw, 120px); }
.case-rev .case-media { order: 2; }
.case-media { position: relative; padding: 0 9% 7% 0; }
.case-rev .case-media { padding: 0 0 7% 9%; }
.browser {
  border-radius: 14px; overflow: hidden; background: #1b1c19; border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35);
}
.browser-bar { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--text-rgb), .14); }
.browser-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0c0c; }
.browser-screen img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0%;
  transition: object-position 9s cubic-bezier(.45, 0, .55, 1);
}
@media (hover: hover) { .case:hover .browser-screen img { object-position: 50% 100%; } }
@media (hover: none) { .case.is-in .browser-screen img { animation: case-scroll 14s cubic-bezier(.45, 0, .55, 1) 1.2s infinite alternate; } }
@keyframes case-scroll { 0%, 8% { object-position: 50% 0%; } 92%, 100% { object-position: 50% 100%; } }
.case-phone {
  position: absolute; right: 0; bottom: 0; width: 23%; aspect-ratio: 320 / 692;
  border-radius: 22px; border: 5px solid #2B2C28; background: #000; overflow: hidden;
  box-shadow: 0 40px 70px -24px rgba(0,0,0,.95);
}
.case-rev .case-phone { right: auto; left: 0; }
.case-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case-body { display: flex; flex-direction: column; gap: 14px; }
.case-num { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: .08em; }
.case-title { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.case-sector { font-weight: 500; color: rgba(var(--text-rgb), .85); }
.case-text { color: var(--muted); line-height: 1.65; max-width: 30em; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 0; }
.tags li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: rgba(var(--text-rgb), .8); }

/* ---------- Services (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .3s ease, opacity .8s ease, transform .9s var(--ease-out);
}
.tile:hover { border-color: rgba(var(--accent-rgb), .3); }
.tile-body { display: flex; flex-direction: column; gap: 12px; }
.tile-title { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.tile-text { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 36em; }

.tile-create { grid-column: 1 / 5; grid-row: 1; padding: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; }
.tile-create .tile-media { position: relative; min-height: 320px; overflow: hidden; }
.tile-create .tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.tile-create:hover .tile-media img { transform: scale(1.04); }
.tile-create .tile-body { padding: clamp(24px, 2.6vw, 36px); justify-content: flex-end; }
.tile-create .link-cta { margin-top: 6px; }

.tile-modern { grid-column: 5 / 7; grid-row: 1 / 3; }
.tile-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ba-slider {
  --pct: 50%;
  position: relative; flex: 1; min-height: 280px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: #0c0c0c;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pct)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pct); width: 0; pointer-events: none; }
.ba-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,0.4); }
.ba-knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--text-dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 4px rgba(var(--accent-rgb), .35);
  display: flex; align-items: center; justify-content: center;
}
.ba-tag { position: absolute; top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 5px 10px; border-radius: 6px; pointer-events: none; color: var(--text-dark); }
.ba-tag-before { left: 12px; background: rgba(var(--text-rgb), .75); }
.ba-tag-after { right: 12px; background: var(--accent); }
.ba-hint { font-size: 12.5px; color: var(--faint); }

.tile-google { grid-column: 1 / 3; grid-row: 2; }
.tile-lang { grid-column: 3 / 5; grid-row: 2; }
.mini-serp { margin-bottom: 8px; }
.serp-bar {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-2); font-size: 13.5px; color: rgba(var(--text-rgb), .85);
}
.serp-card {
  margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .35);
}
.tile-google.is-in .serp-card { animation: rank-up 1s var(--ease-out) .5s both; }
@keyframes rank-up { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.serp-pin { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--text-dark); font-weight: 700; font-size: 14px; display: grid; place-items: center; flex-shrink: 0; }
.serp-lines b { display: block; font-size: 14px; font-weight: 600; }
.stars { color: var(--accent); font-size: 13px; letter-spacing: 1px; }
.stars em { font-style: normal; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.lang-demo {
  align-self: flex-start; display: inline-flex; padding: 4px; gap: 2px; margin-bottom: 8px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg);
}
.lang-demo span { padding: 9px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--faint); transition: background-color .4s ease, color .4s ease; }
.lang-demo .is-on { background: var(--accent); color: var(--text-dark); }

.tile-care { grid-column: 1 / 7; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px 56px; }
.care-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.care-list li, .plan-list li, .assure li { position: relative; padding-left: 28px; line-height: 1.5; }
.care-list li::before, .plan-list li::before, .assure li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: var(--check) center / 12px no-repeat; border-radius: 50%; background-color: rgba(var(--accent-rgb), .12);
}

/* ---------- Tarifs ---------- */
.tarifs { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s ease, opacity .8s ease, transform .9s var(--ease-out);
}
.plan:hover { border-color: var(--line-3); }
.plan-featured {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .11), rgba(var(--accent-rgb), .02) 55%), var(--surface);
  border-color: rgba(var(--accent-rgb), .5);
  box-shadow: 0 50px 90px -60px rgba(var(--accent-rgb), .5);
}
.plan-featured:hover { border-color: var(--accent); }
.plan-badge {
  position: absolute; top: -12px; left: clamp(26px, 2.6vw, 36px);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px;
  background: var(--accent); color: var(--text-dark);
}
.plan-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.plan-for { color: var(--muted); font-size: 15px; line-height: 1.5; min-height: 3em; }
.plan-price { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan-price > span { font-size: 13.5px; color: var(--faint); }
.plan-price strong { font-family: var(--font-display); font-size: clamp(42px, 4vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; font-size: 15px; color: rgba(var(--text-rgb), .88); }
.plan .btn { margin-top: 10px; width: 100%; }
.plans-note { margin-top: 22px; color: var(--faint); font-size: 14px; line-height: 1.6; }
.care { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 24px 64px; }
.care-head { display: flex; flex-direction: column; gap: 12px; }
.care-head p { color: var(--muted); line-height: 1.6; }
.care-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.care-plan { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr); gap: 6px 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.care-plan:first-child { padding-top: 4px; }
.care-name { font-weight: 600; font-size: 16px; }
.care-price { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.care-price small { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--faint); margin-left: 3px; }
.care-desc { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ---------- Méthode : frise ---------- */
.proc-wrap { --p: 0; position: relative; }
.proc-line { position: absolute; background: var(--line-3); border-radius: 2px; pointer-events: none; }
.proc-line-fill { position: absolute; inset: 0; background: var(--accent); border-radius: inherit; box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); transform-origin: left top; }
.proc-wrap[data-dir="h"] .proc-line { height: 2px; }
.proc-wrap[data-dir="h"] .proc-line-fill { transform: scaleX(var(--p)); }
.proc-wrap[data-dir="v"] .proc-line { width: 2px; }
.proc-wrap[data-dir="v"] .proc-line-fill { transform: scaleY(var(--p)); }
.proc-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 34px; }
.step-dot {
  position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-3); transition: all .4s ease;
}
.step-num { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: rgba(var(--text-rgb), .18); transition: color .4s ease; }
.step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.step p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.step.is-lit .step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18); }
.step.is-lit .step-num { color: var(--accent); }

/* ---------- Pourquoi ---------- */
#pourquoi { padding-top: 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.why-head { display: flex; flex-direction: column; gap: 18px; }
.why-head .h2 { font-size: clamp(32px, 3.6vw, 52px); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-col { border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.why-col-them { background: rgba(var(--text-rgb), .025); border: 1px solid var(--line); }
.why-col-us { background: rgba(var(--accent-rgb), .05); border: 1px solid rgba(var(--accent-rgb), .35); }
.why-col-title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.why-col-them .why-col-title { color: var(--faint); }
.why-col-us .why-col-title { color: var(--accent); }
.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.why-list li {
  position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s var(--ease-out); transition-delay: calc(var(--i) * 110ms + 150ms);
}
.why-col.is-in li { opacity: 1; transform: none; }
.why-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; }
.why-list-no li { color: rgba(var(--text-rgb), .55); }
.why-list-no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0665A' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); }
.why-list-yes li { color: var(--text); }
.why-list-yes li::before { background-image: var(--check); }

/* ---------- Avis (carrousel, masqué pour l'instant) ---------- */
.avis-row { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 860px; }
.round-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); display: flex; align-items: center; justify-content: center; }
.avis-track { position: relative; flex: 1; height: 260px; cursor: grab; touch-action: pan-y; }
.avis-card { position: absolute; top: 50%; left: 50%; width: 300px; height: 225px; transition: transform .35s ease, opacity .35s ease; }
.avis-dots { display: flex; gap: 8px; }
.avis-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(var(--text-rgb), .22); }
.avis-dots button.is-active { background: var(--accent); }

/* ---------- Contact / formulaire ---------- */
.contact { background: var(--bg-2); border-top: 1px solid var(--line); overflow: hidden; }
.contact::before {
  content: ""; position: absolute; width: 640px; height: 640px; left: -220px; top: -160px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .10), transparent 65%);
}
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.contact-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.assure { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: rgba(var(--text-rgb), .88); }
.contact-mail { color: var(--faint); font-size: 15px; }
.contact-mail a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .6); text-underline-offset: 4px; }
.quote-form {
  scroll-margin-top: 90px;
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,0.9);
}
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; border: 0; margin: 0; padding: 0; }
fieldset.field { gap: 9px; }
.field > label, .field-label, .label-row label { font-size: 13.5px; font-weight: 600; color: rgba(var(--text-rgb), .78); padding: 0; }
.label-row { display: flex; align-items: center; gap: 8px; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-3);
  font-size: 15px; font-family: inherit; background: var(--bg); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(var(--text-rgb), .33); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.helper { font-size: 12px; color: var(--faint); }
.choice-row { display: flex; gap: 10px; }
.choice-btn { padding: 10px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--line-3); transition: all .15s ease; }
.choice-btn:hover { border-color: rgba(var(--accent-rgb), .6); }
.choice-btn[aria-pressed="true"] { background: var(--accent); color: var(--text-dark); border-color: var(--accent); }
.choice-row.has-error .choice-btn { border-color: var(--red); }
.options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(var(--text-rgb), .02); transition: border-color .15s ease; }
.option:has(input:checked) { border-color: rgba(var(--accent-rgb), .5); }
.option-main { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px; font-size: 14px; color: var(--text); }
.option-main input, .sub-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check { width: 18px; height: 18px; min-width: 18px; border-radius: 5px; border: 1.5px solid rgba(var(--text-rgb), .35); background: transparent; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease; }
.check-sm { width: 15px; height: 15px; min-width: 15px; border-radius: 4px; }
input:checked + .check {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141512' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
  border-color: var(--accent);
}
input:focus-visible + .check { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-btn { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(var(--text-rgb), .3); background: transparent; color: rgba(var(--text-rgb), .65); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0; }
.info-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.option-info { flex-basis: 100%; padding: 0 2px 2px; font-size: 13px; line-height: 1.55; color: rgba(var(--text-rgb), .62); }
.option-info-flat { padding: 0; }
.sub-options { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 12px 10px 40px; }
.sub-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; font-size: 13px; color: rgba(var(--text-rgb), .85); position: relative; }
.btn-submit { font-size: 16px; padding: 16px 24px; margin-top: 4px; white-space: normal; }
.form-status { font-size: 14px; line-height: 1.5; text-align: center; padding: 10px 12px; border-radius: 10px; }
.form-status.is-ok { background: rgba(139, 214, 107, .12); color: var(--green); }
.form-status.is-error { background: rgba(224, 102, 90, .12); color: var(--red); }
.privacy-note { font-size: 12px; line-height: 1.5; color: var(--faint); text-align: center; }
.privacy-note-sm { font-size: 11px; }
.privacy-note a { color: rgba(var(--text-rgb), .65); text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.faq-head { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 17px; font-weight: 600; color: var(--text); transition: color .15s ease; }
.faq-q:hover { color: var(--accent); }
.faq-q svg { flex-shrink: 0; transition: transform .3s var(--ease-out); }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent); }
/* ouverture fluide : la hauteur passe de 0 à auto */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { padding: 0 4px 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 46em; }

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--line); padding-top: 64px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand p { color: var(--faint); font-size: 14.5px; line-height: 1.6; max-width: 26em; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.footer-col a, .footer-col button { color: var(--muted); font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: color .15s ease; }
.footer-col a:hover, .footer-col button:hover { color: var(--text); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 22px 0 26px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13.5px; }

/* ---------- Modales ---------- */
.modal { position: fixed; inset: 0; z-index: 70; padding: 24px; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; animation: fade-in .2s ease; }
.modal-legal { z-index: 75; padding: 20px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-box { position: relative; width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); text-align: left; max-height: calc(100vh - 48px); overflow-y: auto; animation: pop-in .25s var(--ease-out); }
@keyframes pop-in { from { transform: translateY(10px) scale(.98); } to { transform: none; } }
.modal-sm { max-width: 360px; }
.modal-md { max-width: 400px; }
.modal-lg { max-width: 580px; max-height: 80vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(var(--text-rgb), .08); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close-static { position: static; flex-shrink: 0; }
.modal-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.modal-q { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-right: 20px; }
.modal-a { font-size: 15px; line-height: 1.6; color: rgba(var(--text-rgb), .8); }
.modal-intro { font-size: 14px; line-height: 1.55; color: rgba(var(--text-rgb), .75); margin-bottom: 16px; padding-right: 16px; }
.support-form { display: flex; flex-direction: column; gap: 12px; }
.field-sm { gap: 5px; }
.field-sm > label { font-size: 12.5px; }
.field-sm input, .field-sm textarea { padding: 10px 12px; }
.btn-support { font-size: 14.5px; font-weight: 700; padding: 12px 20px; margin-top: 4px; }
.legal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.legal-title { font-size: 17px; font-weight: 700; }
.legal-updated { font-size: 12px; color: var(--faint); margin-top: 4px; }
.legal-body { padding: 14px 24px 24px; overflow-y: auto; }
.legal-nl-note { background: rgba(var(--text-rgb), .04); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; color: rgba(var(--text-rgb), .65); }
.legal-content h4 { font-size: 14.5px; font-weight: 700; margin: 18px 0 6px; display: flex; align-items: center; gap: 8px; }
.legal-content h4:first-child { margin-top: 0; }
.legal-content h4::before { content: ""; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.legal-content p, .legal-content li { font-size: 14px; line-height: 1.6; color: rgba(var(--text-rgb), .75); }
.legal-content p { margin: 0 0 10px; }
.legal-content ul { margin: 0 0 10px; padding-left: 18px; }
.legal-content li { margin-bottom: 4px; }

/* =========================================================
   Responsive
   ========================================================= */
/* Menu complet trop large : menu burger */
@media (max-width: 1100px) {
  .nav-links, .lang-switch-desktop { display: none; }
  .hamburger-btn { display: flex; }
}

@media (max-width: 1024px) {
  .sec-head-split { grid-template-columns: 1fr; }
  .sec-head-split .lead { justify-self: start; }
  .case { grid-template-columns: 1fr; }
  .case-rev .case-media { order: 0; }
  .case-media { max-width: 760px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-create { grid-column: 1 / -1; grid-row: auto; }
  .tile-modern { grid-column: 1; grid-row: 2 / 4; }
  .tile-google { grid-column: 2; grid-row: 2; }
  .tile-lang { grid-column: 2; grid-row: 3; }
  .tile-care { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .plan-featured { grid-column: 1 / -1; }
  .plan-for { min-height: 0; }
  .care { grid-template-columns: 1fr; }
  .why-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .contact-aside, .faq-head { position: static; }
  .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 640px) {
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .logo-mark { width: 32px; }
  .logo-word { font-size: 20px; }
  .cta-row { width: 100%; flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .job { font-size: 18px; }
  .job::after { margin: 0 20px; }
  .case-media, .case-rev .case-media { padding: 0 6% 9% 0; }
  .case-rev .case-phone { left: auto; right: 0; }
  .case-phone { width: 27%; border-width: 4px; border-radius: 16px; }
  .bento { grid-template-columns: 1fr; }
  .tile-create, .tile-modern, .tile-google, .tile-lang, .tile-care { grid-column: 1; grid-row: auto; }
  .tile-create { grid-template-columns: 1fr; }
  .tile-create .tile-media { min-height: 0; aspect-ratio: 16 / 10; }
  .ba-slider { flex: none; min-height: 0; aspect-ratio: 4 / 5; }
  .care-list { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan-featured { grid-column: auto; }
  .care-plan { grid-template-columns: minmax(0, 1fr) auto; }
  .care-desc { grid-column: 1 / -1; }
  .compare-row { grid-template-columns: 1fr; }
  .why-col { padding: 24px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .faq-q { font-size: 16px; padding: 18px 2px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* frise verticale */
  .proc-grid { grid-template-columns: 1fr; gap: 30px; }
  .step { padding-top: 0; padding-left: 36px; }
  .step-dot { top: 12px; }
  /* sur mobile, la réponse FAQ s'ouvre dans une modale */
  .faq-a { display: none; }
}
@media (max-width: 420px) {
  .nav-right { gap: 8px; }
  .nav-cta { font-size: 13px; padding: 8px 14px; }
  .logo-word { font-size: 18px; }
}
@media (min-width: 641px) {
  #faqModal { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rv, .why-list li { opacity: 1; transform: none; }
  /* écrans du hero : un seul site, affiché en haut */
  .scr-laptop img:first-of-type, .scr-phone img:first-of-type { opacity: 1; }
}

/* =========================================================
   Liens vers les pages de service (accueil)
   ========================================================= */
.more-link { align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
.more-link:hover { color: var(--text); text-decoration-color: var(--accent); }
.tile-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 6px; }
.tile-create .tile-links .link-cta { margin-top: 0; }

/* =========================================================
   PAGES DE SERVICE
   ========================================================= */
/* Hero : même principe que l'accueil (photo 3:2, écrans animés par-dessus) */
.svc-hero .hero-media { transform: translateY(calc(var(--p, 0) * 14%)); }
.svc-hero .hero-content { opacity: calc(1 - var(--p, 0) * 1.6); transform: translateY(calc(var(--p, 0) * -50px)); }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: rgba(var(--text-rgb), .85); }
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scr-tag { position: absolute; top: 6%; left: 5%; font-size: clamp(7px, .62cqw, 11px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35em .7em; border-radius: 4px; background: rgba(var(--text-rgb), .8); color: var(--text-dark); }
.scr-tag-new { left: auto; right: 5%; background: var(--accent); }

/* --- Création : un site qui se construit tout seul --- */
.bld { left: 56.05%; top: 34.86%; width: 24.74%; height: 21.78%; border-radius: 2px; container-type: size;
  background: #111210 linear-gradient(rgba(var(--text-rgb), .05) 1px, transparent 1px) 0 0 / 100% 12.5%,
              linear-gradient(90deg, rgba(var(--text-rgb), .05) 1px, transparent 1px) 0 0 / 8.33% 100%; }
.bld-site {
  position: absolute; inset: 7% 6%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 9% 12% 12% 7% 11% 1fr;
  column-gap: 6%; row-gap: 4%;
}
.b {
  --fill: rgba(var(--text-rgb), .85);
  display: block; border: 1px dashed rgba(var(--text-rgb), .55); border-radius: 2cqw;
  opacity: 0; animation: bld 9s cubic-bezier(.3, .7, .3, 1) infinite; animation-delay: calc(var(--d) * .14s);
}
.b-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 4%; padding: 0 3%; --fill: rgba(var(--text-rgb), .06); }
.b-nav i { height: 28%; flex: 0 0 9%; border-radius: 9cqw; background: rgba(var(--text-rgb), .35); }
.b-nav i:first-child { flex-basis: 16%; background: rgba(var(--text-rgb), .75); margin-right: auto; }
.b-nav .b-dot { flex-basis: 13%; height: 46%; background: var(--accent); }
.b-title { grid-column: 1; }
.b-title2 { width: 78%; }
.b-text { grid-column: 1; width: 90%; --fill: rgba(var(--text-rgb), .3); }
.b-cta { grid-column: 1; width: 46%; --fill: var(--accent); animation-name: bld, cta-click; }
.b-img { grid-column: 2; grid-row: 2 / 6; position: relative; overflow: hidden; --fill: #2A3420; }
.b-img i { position: absolute; inset: 0; background: linear-gradient(160deg, transparent 55%, rgba(var(--accent-rgb), .55) 56%, rgba(var(--accent-rgb), .2)), radial-gradient(circle at 74% 28%, rgba(var(--accent-rgb), .8) 0 7%, transparent 7.5%); opacity: 0; animation: bld-img 9s ease infinite; animation-delay: .28s; }
.b-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.b-cards .b { --fill: rgba(var(--text-rgb), .1); }
@keyframes bld {
  0%   { opacity: 0; transform: translateY(14%) scale(.96); background-color: transparent; border-color: rgba(var(--text-rgb), 0); }
  7%   { opacity: 1; transform: none; background-color: transparent; border-color: rgba(var(--text-rgb), .55); }
  38%  { background-color: transparent; border-color: rgba(var(--text-rgb), .55); }
  48%  { background-color: var(--fill); border-color: transparent; }
  90%  { opacity: 1; background-color: var(--fill); border-color: transparent; }
  97%, 100% { opacity: 0; background-color: var(--fill); border-color: transparent; }
}
@keyframes bld-img { 0%, 42% { opacity: 0; } 52%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cta-click { 0%, 64% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7); } 66% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .8); } 74%, 100% { box-shadow: 0 0 0 3cqw rgba(var(--accent-rgb), 0); } }
.bld-cursor { position: absolute; width: 4.5%; left: 0; top: 0; opacity: 0; animation: bld-cursor 9s cubic-bezier(.45, 0, .2, 1) infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@keyframes bld-cursor {
  0%, 50% { opacity: 0; transform: translate(1800%, 720%); }
  54% { opacity: 1; transform: translate(1800%, 720%); }
  64% { opacity: 1; transform: translate(330%, 495%); }
  66% { transform: translate(330%, 495%) scale(.85); }
  68% { transform: translate(330%, 495%) scale(1); }
  86% { opacity: 1; transform: translate(480%, 470%); }
  92%, 100% { opacity: 0; transform: translate(480%, 470%); }
}

/* --- Modernisation : ancien écran, nouveau portable, balayage rénovation --- */
.crt { left: 47.2%; top: 39.45%; width: 18.42%; height: 20.7%; border-radius: 7% / 9%; container-type: size; }
.crt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: sepia(.55) saturate(.7) contrast(.85) brightness(.8) blur(.3px); animation: crt-flicker 5s steps(1) infinite; }
.crt-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.crt::before { content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 1; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08), transparent); animation: crt-roll 4s linear infinite; }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 43% { opacity: 1; } 77% { opacity: .9; } 78% { opacity: 1; } }
@keyframes crt-roll { from { top: -18%; } to { top: 100%; } }
.lap { left: 71.81%; top: 48.24%; width: 19.01%; height: 17.87%; border-radius: 2px; container-type: size; }
.lap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; animation: lap-scroll 12s cubic-bezier(.45, 0, .55, 1) 2.6s infinite alternate; }
@keyframes lap-scroll { 0%, 12% { object-position: 50% 0%; } 88%, 100% { object-position: 50% 100%; } }
.transfer-line { animation: dash-move 1.2s linear infinite; }
@keyframes dash-move { to { stroke-dashoffset: -32; } }
.hero-img-old { filter: grayscale(1) sepia(.35) brightness(.75) contrast(.9); clip-path: inset(0 0 0 0); animation: reno-sweep 2.4s cubic-bezier(.65, 0, .35, 1) .6s forwards; }
.sweep-line { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent); box-shadow: 0 0 24px 6px rgba(var(--accent-rgb), .55); opacity: 0; animation: reno-line 2.4s cubic-bezier(.65, 0, .35, 1) .6s forwards; }
@keyframes reno-sweep { to { clip-path: inset(0 0 0 100%); } }
@keyframes reno-line { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* --- Entretien : tableau de bord sur le téléphone, ondes, étiquettes --- */
.phone-ui { left: 59.57%; top: 29.49%; width: 10.74%; height: 33.69%; border-radius: 14% / 6.6%; container-type: size; background: #101110; }
.pu { position: absolute; inset: 13% 7% 6%; display: flex; flex-direction: column; gap: 3cqh; font-size: 6.6cqw; line-height: 1.25; color: var(--text); }
.pu-status { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; padding: .45em .8em; border-radius: 99px; background: rgba(var(--accent-rgb), .14); color: var(--accent); font-weight: 600; }
.pu-status i { width: .6em; height: .6em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7); animation: live 1.6s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 .7em rgba(var(--accent-rgb), 0); } }
.pu-list { display: flex; flex-direction: column; gap: 2cqh; }
.pu-n { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .9em; background: #1D1E1B; border: 1px solid rgba(var(--text-rgb), .08); opacity: 0; animation: pu-in 10s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: calc(var(--n) * 1.1s); }
.pu-n b { width: 1.8em; height: 1.8em; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text-dark); font-size: .85em; }
.pu-n span { display: flex; flex-direction: column; font-weight: 600; }
.pu-n small { font-weight: 400; color: var(--faint); font-size: .85em; }
@keyframes pu-in { 0% { opacity: 0; transform: translateX(30%); } 6% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-20%); } }
.pu-map { position: relative; flex: 1; border-radius: .9em; overflow: hidden; background: #1A1F17 linear-gradient(32deg, transparent 46%, rgba(var(--text-rgb), .12) 47% 50%, transparent 51%), linear-gradient(-58deg, transparent 60%, rgba(var(--text-rgb), .1) 61% 63%, transparent 64%); }
.pu-pin { position: absolute; left: 50%; top: 46%; width: 1.4em; height: 1.4em; margin: -1.4em 0 0 -.7em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); animation: pin-drop 10s cubic-bezier(.3, 1.6, .5, 1) infinite 4.6s; opacity: 0; }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-160%) rotate(-45deg); } 6% { opacity: 1; transform: rotate(-45deg); } 78% { opacity: 1; } 86%, 100% { opacity: 0; transform: rotate(-45deg); } }
.radar { transform-box: fill-box; transform-origin: center; opacity: 0; animation: radar 3.9s ease-out infinite; }
@keyframes radar { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.3); opacity: 0; } }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: .55em;
  padding: .5em .9em; border-radius: 99px; font-size: clamp(9px, .85cqw, 13px); font-weight: 600; white-space: nowrap;
  background: rgba(25, 26, 23, .82); border: 1px solid rgba(var(--accent-rgb), .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8);
  animation: bob 6s ease-in-out infinite;
}
.chip i { width: .55em; height: .55em; border-radius: 50%; background: var(--accent); }
.chip-1 { left: 47%; top: 31%; }
.chip-2 { left: 45.5%; top: 47%; animation-delay: -2s; }
.chip-3 { left: 73%; top: 25%; animation-delay: -4s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Portrait : la photo est agrandie et calée à droite pour garder l'appareil visible */
@media (max-aspect-ratio: 1/1) {
  .svc-hero .hero-stage { left: auto; right: 0; width: 170%; aspect-ratio: 3 / 2; top: 54px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
  .svc-hero .hero-content { padding-top: calc(54px + 80cqw); }
  .svc-hero .hero-media::after {
    background: linear-gradient(to bottom, rgba(15,16,14,.4) 0%, rgba(15,16,14,0) 12%, rgba(15,16,14,0) 52%, rgba(15,16,14,.75) 70%, var(--bg) 86%);
  }
  .chip { font-size: clamp(8px, 1.5cqw, 12px); }
  .chip-1 { left: 45%; } .chip-2 { left: 44%; }
}

/* --- Pour qui : titre collant + avantages qui s'allument --- */
.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 80px; align-items: start; }
.intro-head { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 18px; }
.benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.benefit {
  --hl: clamp(0, calc(1 - (var(--p, .5) - .5) * (var(--p, .5) - .5) * 9), 1);
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 34px 0; border-top: 1px solid var(--line);
  opacity: calc(.3 + var(--hl) * .7); transition: opacity .15s linear;
}
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: rgba(var(--accent-rgb), calc(.25 + var(--hl) * .75)); }
.benefit h3 { font-family: var(--font-display); font-size: clamp(21px, 2vw, 27px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.benefit p { color: var(--muted); line-height: 1.6; max-width: 32em; }

/* --- Création : de l'esquisse au site (défilement collant) --- */
.sketch-scroll { position: relative; height: 260vh; }
.sketch-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding-top: 70px; }
.sketch-copy { display: flex; flex-direction: column; gap: 18px; }
.sketch-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sketch-steps li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--faint); transition: color .3s ease; }
.sketch-steps li span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 1px solid var(--line-3); transition: all .3s ease; }
.sketch-scroll[data-step="0"] [data-i="0"], .sketch-scroll[data-step="1"] [data-i="1"], .sketch-scroll[data-step="2"] [data-i="2"] { color: var(--text); }
.sketch-scroll[data-step="0"] [data-i="0"] span, .sketch-scroll[data-step="1"] [data-i="1"] span, .sketch-scroll[data-step="2"] [data-i="2"] span { background: var(--accent); border-color: var(--accent); color: var(--text-dark); }
.sketch-note { font-size: 13.5px; color: var(--faint); }
.sketch-frame { container-type: inline-size; }
.sketch-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #F3F1EA; }
.wire {
  --draw: clamp(0, calc(var(--p, 0) * 3.4), 1);
  --paint: clamp(0, calc((var(--p, 0) - .34) * 3.4), 1);
  position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 8% 1fr 22%; gap: 4%;
  background-color: rgba(23, 24, 21, var(--paint));
}
.sketch-screen::before { content: ""; position: absolute; inset: 0; background: #17181A; opacity: var(--paint, 0); opacity: clamp(0, calc((var(--p, 0) - .34) * 3.4), 1); }
.w { position: relative; border: 2px solid rgba(40, 40, 40, calc(var(--draw) * (1 - var(--paint)))); border-radius: 6px; clip-path: inset(0 calc((1 - var(--draw)) * 100%) 0 0); background: rgba(var(--text-rgb), calc(var(--paint) * .08)); }
.w-nav { grid-column: 1 / -1; }
.w-nav::after { content: ""; position: absolute; right: 2%; top: 22%; bottom: 22%; width: 12%; border-radius: 99px; background: rgba(var(--accent-rgb), var(--paint)); }
.w-hero { grid-column: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: 8%; padding: 0 6%; }
.w-hero i { height: 12%; width: 80%; border-radius: 4px; background: rgba(40, 40, 40, calc(.25 * (1 - var(--paint)))); background-color: color-mix(in srgb, #F1F1EC calc(var(--paint) * 100%), rgba(40,40,40,.25)); }
.w-hero i:nth-child(2) { width: 60%; }
.w-hero i:nth-child(3) { width: 30%; height: 16%; border-radius: 99px; background-color: color-mix(in srgb, #A3E635 calc(var(--paint) * 100%), rgba(40,40,40,.25)); }
.w-img { grid-column: 3; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(40,40,40, calc(.6 * (1 - var(--paint)))) 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), rgba(40,40,40, calc(.6 * (1 - var(--paint)))) 50%, transparent calc(50% + 1px)), rgba(var(--accent-rgb), calc(var(--paint) * .35)); }
.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; clip-path: inset(0 0 calc((1 - clamp(0, calc((var(--p, 0) - .68) * 3.6), 1)) * 100%) 0); }
.sketch-screen .wire, .sketch-screen::before { z-index: 0; }
.sketch-screen .real { z-index: 1; }

/* --- Ce qui est compris --- */
.inc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.inc-grid li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 28px 34px 0; border-bottom: 1px solid var(--line); }
.inc-grid li::before { content: ""; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 8px; background: var(--check) center / 16px no-repeat, rgba(var(--accent-rgb), .12); }
.inc-grid b { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.inc-grid span { color: var(--muted); line-height: 1.55; }
.inc-grid li:nth-child(3n+2) { transition-delay: .08s; }
.inc-grid li:nth-child(3n+3) { transition-delay: .16s; }

/* --- Modernisation : grand comparateur --- */
.show-ba-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px 72px; align-items: center; }
.show-ba-copy { display: flex; flex-direction: column; gap: 18px; }
.keep { margin-top: 10px; padding: 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.keep-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.show-ba-media { display: flex; flex-direction: column; gap: 10px; transform: perspective(1200px) rotateY(calc((.5 - var(--p, .5)) * 10deg)); }
.ba-big { flex: none; aspect-ratio: 4 / 5; max-height: 78vh; margin-left: auto; width: 100%; max-width: 560px; }
.show-ba-media .ba-hint { text-align: right; }
.price-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.price-solo-head { display: flex; flex-direction: column; gap: 18px; }
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.plan-price strong small { font-family: var(--font-sans); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--faint); margin-left: 4px; }

/* --- Entretien : carte Google --- */
.gmap-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: center; }
.gmap-copy { display: flex; flex-direction: column; gap: 18px; }
.gmap { --drop: clamp(0, calc((var(--p, 0) - .2) * 3), 1); position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: #161A14; }
.gmap-roads { position: absolute; inset: -10%; background:
  linear-gradient(28deg, transparent 47%, rgba(var(--text-rgb), .13) 47.5% 49.5%, transparent 50%),
  linear-gradient(-62deg, transparent 38%, rgba(var(--text-rgb), .09) 38.5% 40%, transparent 40.5%),
  linear-gradient(95deg, transparent 70%, rgba(var(--text-rgb), .08) 70.5% 71.5%, transparent 72%),
  radial-gradient(circle at 22% 78%, rgba(var(--accent-rgb), .08) 0 12%, transparent 12.5%),
  linear-gradient(rgba(var(--text-rgb), .035) 1px, transparent 1px) 0 0 / 100% 7%,
  linear-gradient(90deg, rgba(var(--text-rgb), .035) 1px, transparent 1px) 0 0 / 7% 100%;
  transform: scale(calc(1.12 - var(--p, 0) * .12)); }
.gpin { position: absolute; width: 20px; height: 20px; margin: -20px 0 0 -10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: rgba(var(--text-rgb), .35); }
.gpin-a { left: 22%; top: 30%; } .gpin-b { left: 76%; top: 26%; } .gpin-c { left: 30%; top: 72%; }
.gpin-you { left: 56%; top: 48%; width: 34px; height: 34px; margin: -34px 0 0 -17px; background: var(--accent); box-shadow: 0 0 0 calc(var(--drop) * 14px) rgba(var(--accent-rgb), .15); opacity: var(--drop); transform: translateY(calc((1 - var(--drop)) * -120px)) rotate(-45deg); }
.gcard { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, calc((1 - var(--drop)) * 40px)); opacity: var(--drop); min-width: 62%; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 16px; background: rgba(25, 26, 23, .92); border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
.gcard b { font-size: 16px; }
.gcard small { color: var(--faint); font-size: 12.5px; }

/* --- Autres services --- */
.svc-related .h2 { margin-bottom: 36px; font-size: clamp(30px, 3.4vw, 46px); }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svc-creation .rel-creation, .svc-modernisation .rel-modernisation, .svc-entretien .rel-entretien { display: none; }
.related { position: relative; display: flex; align-items: flex-end; min-height: 280px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); isolation: isolate; }
.related img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; transition: transform 1s var(--ease-out); }
.related::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,16,14,.95) 10%, rgba(15,16,14,.2) 70%); }
.related:hover img { transform: scale(1.05); }
.related-body { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.related-body strong { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.related-body span { color: var(--muted); }
.related-arrow { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text-dark); font-size: 20px; transition: transform .3s var(--ease-out); }
.related:hover .related-arrow { transform: rotate(-45deg); }

/* --- Appel final --- */
.final-cta { padding-top: 0; }
.final-box {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: clamp(36px, 6vw, 80px); border-radius: 28px; border: 1px solid rgba(var(--accent-rgb), .35);
  background: radial-gradient(circle at calc(20% + var(--p, .5) * 60%) 0%, rgba(var(--accent-rgb), .22), transparent 55%), var(--surface);
}
.final-box .h2 { max-width: 16em; }

@media (max-width: 1024px) {
  .intro-grid, .show-ba-grid, .gmap-grid, .price-solo { grid-template-columns: 1fr; }
  .intro-head { position: static; }
  .sketch-sticky { grid-template-columns: 1fr; align-content: center; gap: 28px; height: 100vh; height: 100svh; }
  .sketch-frame { max-width: 640px; }
  .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-ba-media { transform: none; }
  .ba-big { margin: 0 auto; }
}
@media (max-width: 640px) {
  .benefit { grid-template-columns: 1fr; gap: 6px; padding: 26px 0; }
  .benefit-num { font-size: 28px; }
  .inc-grid { grid-template-columns: 1fr; }
  .plans-2, .related-grid { grid-template-columns: 1fr; }
  .related { min-height: 220px; }
  .sketch-copy .lead, .sketch-note { display: none; }
  .sketch-copy { gap: 12px; }
  .sketch-steps { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-img-old, .sweep-line { display: none; }
  .b, .b-img i, .pu-n, .pu-pin { opacity: 1; }
  .b { background-color: var(--fill); border-color: transparent; }
  .sketch-scroll { height: auto; }
  .sketch-sticky { position: static; height: auto; }
  .sketch-screen { --p: 1; }
}