/* --------------------------------------------------------------------------
   Direction artistique : monochrome strict, verre dépoli, cartes qui flottent
   sur un fond gris flou. Aucune couleur d'accent : le noir et le blanc portent
   tout, comme le logo. Modes clair et sombre selon le réglage de l'appareil.
   -------------------------------------------------------------------------- */
:root{
  --bg:#ECECEE;
  --surface:#FFFFFF;
  --surface-2:#F4F4F6;
  --line:#E4E4E8;

  --ink:#121316;
  --ink-2:#3C3F45;
  --muted:#70747B;

  --hero-bg:#141517;
  --hero-fg:#F5F6F7;
  --hero-muted:#A4A8AF;
  --hero-line:rgba(245,246,247,.16);

  /* Verre dépoli */
  --vitre:rgba(255,255,255,.46);
  --vitre-bord:rgba(255,255,255,.7);
  --vitre-haut:rgba(255,255,255,.55);

  /* Voiles gris du fond : c'est eux qui rendent le verre visible */
  --nuage-1:rgba(255,255,255,.98);
  --nuage-2:rgba(126,131,140,.62);
  --nuage-3:rgba(16,17,20,.3);
  --nuage-4:rgba(255,255,255,.9);
  --voile-fond:linear-gradient(152deg,#F4F4F6 0%,#DEDEE2 42%,#C9CACF 72%,#EDEDEF 100%);

  --ombre-carte:0 1px 2px rgba(18,19,22,.04), 0 14px 34px -16px rgba(18,19,22,.18);
  --ombre-vitre:0 40px 90px -42px rgba(18,19,22,.34);
  --ombre-flottante:0 2px 4px rgba(18,19,22,.05), 0 22px 48px -20px rgba(18,19,22,.26);

  --logo-filter:invert(1);
  --font-display:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-card:26px; --r-bloc:20px; --r-pill:999px;
}

@media (prefers-color-scheme:dark){:root{
  --bg:#0A0B0C;
  --surface:#17181B;
  --surface-2:#1E1F23;
  --line:#2B2D32;

  --ink:#F1F2F4;
  --ink-2:#C7CAD0;
  --muted:#92969E;

  --hero-bg:#F1F2F4;
  --hero-fg:#121316;
  --hero-muted:#5C6068;
  --hero-line:rgba(18,19,22,.14);

  --vitre:rgba(36,38,42,.46);
  --vitre-bord:rgba(255,255,255,.1);
  --vitre-haut:rgba(255,255,255,.06);

  --nuage-1:rgba(112,117,126,.42);
  --nuage-2:rgba(52,55,62,.72);
  --nuage-3:rgba(0,0,0,.75);
  --nuage-4:rgba(86,91,100,.3);
  --voile-fond:linear-gradient(152deg,#15161A 0%,#0A0B0C 46%,#1B1D21 74%,#08090A 100%);

  --ombre-carte:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -18px rgba(0,0,0,.7);
  --ombre-vitre:0 40px 90px -42px rgba(0,0,0,.8);
  --ombre-flottante:0 2px 4px rgba(0,0,0,.4), 0 24px 50px -22px rgba(0,0,0,.75);

  --logo-filter:none;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}

/* ------------------- Fond : voiles gris flous, comme du tissu ------------------- */
.decor{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:var(--voile-fond);
}
.decor span{position:absolute; display:block; border-radius:50%; filter:blur(80px)}
/* Formes allongées et inclinées : l'effet « pli de tissu » de la référence. */
.decor .v1{width:86vw; height:46vw; top:-16vw; left:-18vw; background:var(--nuage-1); transform:rotate(-14deg)}
.decor .v2{width:70vw; height:34vw; top:14vw; right:-22vw; background:var(--nuage-2); transform:rotate(12deg)}
.decor .v3{width:96vw; height:40vw; bottom:-14vw; left:-10vw; background:var(--nuage-3); filter:blur(100px); transform:rotate(-7deg)}
.decor .v4{width:52vw; height:30vw; bottom:18vh; right:-8vw; background:var(--nuage-4); transform:rotate(18deg)}

.shell{max-width:1140px; margin:0 auto; padding:0 18px}
@media (min-width:900px){.shell{padding:0 28px}}

/* ------------------------------ Barre du haut ------------------------------ */
.top{position:sticky; top:14px; z-index:20; padding:14px 0 0}
.top-in{
  display:flex; align-items:center; gap:16px; padding:11px 12px 11px 20px;
  background:var(--vitre); border:1px solid var(--vitre-bord);
  border-radius:var(--r-pill); box-shadow:var(--ombre-flottante);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
}
.logo{display:flex; align-items:center; text-decoration:none; flex:none}
.logo img{height:26px; width:auto; filter:var(--logo-filter)}
.logo .marque{display:none; height:26px}
.menu{display:flex; gap:4px; margin-left:auto; align-items:center}
.menu a:not(.btn){
  padding:9px 15px; border-radius:var(--r-pill); text-decoration:none;
  color:var(--ink-2); font-weight:500; min-height:40px; display:inline-flex; align-items:center;
}
.menu a:not(.btn):hover{background:var(--vitre-haut); color:var(--ink)}
/* Page affichée : on la distingue des autres entrées du menu. */
.menu a:not(.btn)[aria-current="page"]{background:var(--vitre-haut); color:var(--ink); font-weight:600}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:var(--r-pill); padding:12px 22px; min-height:46px;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--hero-bg); color:var(--hero-fg); box-shadow:var(--ombre-carte)}
.btn-dark:hover{opacity:.9}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-clair{background:var(--hero-fg); color:var(--hero-bg)}
.btn-clair:hover{opacity:.9}
.btn-vide{background:transparent; color:var(--hero-fg); border:1px solid var(--hero-line)}
.btn-vide:hover{background:var(--hero-line)}
.btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* Bouton menu, visible seulement sur petit écran. */
.burger{
  display:none; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--vitre-bord); background:var(--surface); color:var(--ink);
}
.burger:hover{background:var(--surface-2)}
.burger svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.burger .fermer{display:none}
.burger[aria-expanded="true"] .ouvrir{display:none}
.burger[aria-expanded="true"] .fermer{display:block}

/* Panneau déroulant sous la barre du haut. */
.menu-mobile{
  margin-top:8px; padding:10px; display:flex; flex-direction:column; gap:4px;
  background:var(--vitre); border:1px solid var(--vitre-bord);
  border-radius:var(--r-bloc); box-shadow:var(--ombre-flottante);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
}
.menu-mobile[hidden]{display:none}
.menu-mobile a{
  display:flex; align-items:center; min-height:48px; padding:0 16px;
  border-radius:var(--r-pill); text-decoration:none; color:var(--ink-2); font-weight:500;
}
.menu-mobile a:hover{background:var(--vitre-haut); color:var(--ink)}
.menu-mobile a[aria-current="page"]{background:var(--vitre-haut); color:var(--ink); font-weight:600}

@media (max-width:780px){
  .menu a:not(.btn){display:none}
  .logo img.complet{display:none}
  .logo img.marque{display:block}
  .top-in{padding-left:16px; gap:10px}
  .burger{display:inline-flex}
  /* Le bouton devis reste lisible même sur un écran étroit. */
  .menu .btn{padding:12px 16px; font-size:14.5px}
}
@media (min-width:781px){
  .menu-mobile{display:none}
}

/* --------------------- Panneau de verre autour du héros --------------------- */
.vitre{
  margin-top:20px; padding:16px;
  background:var(--vitre); border:1px solid var(--vitre-bord);
  border-radius:calc(var(--r-card) + 14px); box-shadow:var(--ombre-vitre);
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
}
@media (min-width:900px){.vitre{padding:20px; margin-top:26px}}

.hero{
  background:var(--hero-bg); color:var(--hero-fg); border-radius:var(--r-card);
  padding:48px 28px 52px;
  background-image:radial-gradient(118% 92% at 100% 0%, color-mix(in srgb, var(--hero-fg) 11%, transparent), transparent 62%);
}
@media (min-width:900px){.hero{padding:74px 62px 78px}}
.chip{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500;
  color:var(--hero-muted); border:1px solid var(--hero-line);
  border-radius:var(--r-pill); padding:7px 15px; margin-bottom:24px;
}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.hero h1{font-size:clamp(31px,5.8vw,56px); font-weight:700; line-height:1.05; max-width:17ch}
.hero .sous{margin-top:20px; font-size:clamp(16px,2vw,18.5px); color:var(--hero-muted); max-width:54ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:32px}

/* Trois repères sous le héros, dans le panneau de verre */
.reperes{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:16px}
.repere{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-bloc);
  padding:18px 20px; box-shadow:var(--ombre-carte);
}
.repere .t{font-family:var(--font-display); font-weight:600; font-size:16px}
.repere p{color:var(--muted); font-size:14px; margin-top:5px}

/* -------------------------------- Sections -------------------------------- */
/* `scroll-margin-top` : sinon la barre collante masque le titre au clic d'un lien. */
section{padding:84px 0 0; scroll-margin-top:120px}
@media (min-width:900px){section{padding:116px 0 0}}
.titre{max-width:52ch; margin-bottom:32px}
.sur-titre{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.sur-titre::before{content:""; width:22px; height:1px; background:currentColor}
.titre h2{font-size:clamp(27px,3.7vw,40px); font-weight:600; line-height:1.12}
.titre p{margin-top:16px; color:var(--ink-2); font-size:17px}

.grille{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(246px,1fr))}
.carte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px 30px; box-shadow:var(--ombre-carte);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.carte:hover{transform:translateY(-3px); box-shadow:var(--ombre-flottante)}
.carte h3{font-size:19px; font-weight:600}
.carte p{color:var(--ink-2); font-size:15.5px}
.ico{
  width:44px; height:44px; border-radius:14px;
  background:var(--hero-bg); color:var(--hero-fg);
  display:grid; place-items:center; margin-bottom:8px;
}
.ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------------------------- Tarifs ---------------------------- */
.tarifs{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.tarif{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px 30px; box-shadow:var(--ombre-carte);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.tarif:hover{transform:translateY(-3px); box-shadow:var(--ombre-flottante)}
/* Hauteurs réservées : sans elles, un titre sur deux lignes décale le prix
   de sa carte et la ligne des montants n'est plus alignée. */
.tarif h3{font-size:18px; font-weight:600; line-height:1.3; min-height:2.6em}
.tarif .prix{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:34px; line-height:1; font-variant-numeric:tabular-nums;
}
.tarif .prix small{font-size:15px; font-weight:600; color:var(--muted); margin-left:5px; letter-spacing:0}
.tarif .pour{color:var(--muted); font-size:14px; line-height:1.45; min-height:2.9em; margin-top:-8px}
.tarif ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.tarif li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:15px}
.tarif li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%;
  background:var(--hero-bg);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}
.tarif .btn{margin-top:auto}
.suivi{
  margin-top:14px; display:grid; gap:22px 36px; align-items:center;
  grid-template-columns:1fr; padding:30px 28px;
  background:var(--hero-bg); color:var(--hero-fg); border-radius:var(--r-card);
  box-shadow:var(--ombre-vitre);
  background-image:radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--hero-fg) 10%, transparent), transparent 62%);
}
@media (min-width:820px){.suivi{grid-template-columns:minmax(0,1fr) auto; padding:34px 40px}}
.suivi h3{font-size:21px; font-weight:600; margin-bottom:8px}
.suivi p{color:var(--hero-muted); font-size:15.5px; max-width:56ch}
.suivi ul{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.suivi li{display:flex; gap:9px; align-items:center; font-size:14.5px; color:var(--hero-fg)}
.suivi li::before{
  content:""; flex:none; width:15px; height:15px; border-radius:50%; background:var(--hero-fg);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
}
.suivi .montant{text-align:left}
@media (min-width:820px){.suivi .montant{text-align:right}}
.suivi .montant .prix{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:40px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.suivi .montant .prix small{font-size:16px; font-weight:600; color:var(--hero-muted); margin-left:6px; letter-spacing:0}
.suivi .montant .periode{color:var(--hero-muted); font-size:14px; margin-top:7px}

.note-tarifs{
  margin-top:14px; padding:20px 24px; border-radius:var(--r-bloc);
  background:var(--vitre); border:1px solid var(--vitre-bord);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  color:var(--ink-2); font-size:15px;
}

/* -------------------------------- Déroulé --------------------------------- */
.etapes{display:flex; flex-direction:column; gap:10px}
.etape{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-bloc);
  padding:20px 24px; box-shadow:var(--ombre-carte);
  display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:baseline;
  transition:transform .22s ease, box-shadow .22s ease;
}
.etape:hover{transform:translateY(-2px); box-shadow:var(--ombre-flottante)}
@media (min-width:780px){.etape{grid-template-columns:auto 226px 1fr; gap:4px 26px; align-items:center}}
.etape .n{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.etape h3{font-size:18px; font-weight:600}
.etape p{color:var(--ink-2); font-size:15.5px; grid-column:2/-1}
@media (min-width:780px){.etape p{grid-column:auto}}

/* -------------------------------- Contact --------------------------------- */
.contact{
  background:var(--hero-bg); color:var(--hero-fg); border-radius:var(--r-card);
  padding:46px 26px 50px; text-align:center; box-shadow:var(--ombre-vitre);
  background-image:radial-gradient(108% 78% at 50% 0%, color-mix(in srgb, var(--hero-fg) 10%, transparent), transparent 60%);
}
@media (min-width:900px){.contact{padding:72px 60px 76px}}
.contact h2{font-size:clamp(27px,3.8vw,42px); font-weight:600; line-height:1.12; max-width:19ch; margin:0 auto}
.contact p{margin:20px auto 0; color:var(--hero-muted); max-width:52ch; font-size:17px}
.contact .actions{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px}
.coord{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--hero-line);
  display:flex; flex-wrap:wrap; gap:14px 44px; justify-content:center; text-align:left;
}
.coord div{min-width:150px}
.coord .lbl{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--hero-muted)}
.coord .val{font-weight:600; margin-top:5px; word-break:break-word}
.coord a{text-decoration:none}
.coord a:hover{text-decoration:underline}

/* --------------------------------- Pied ----------------------------------- */
footer{padding:40px 0 52px; margin-top:84px}
.pied{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  color:var(--muted); font-size:14px;
  padding:20px 24px; border-radius:var(--r-bloc);
  background:var(--vitre); border:1px solid var(--vitre-bord);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.pied img{height:20px; width:auto; filter:var(--logo-filter); opacity:.8}
.pied .logo{flex:none}
.pied .droite{margin-left:auto}

/* ------------------------------- Animation -------------------------------- */
.monte{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.monte.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .monte{opacity:1; transform:none; transition:none}
  .btn:hover,.carte:hover,.etape:hover{transform:none}
  *{animation:none!important}
}

/* ------------------------------ Formulaire ------------------------------ */
.form-carte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:30px 26px 32px; box-shadow:var(--ombre-carte);
}
@media (min-width:820px){.form-carte{padding:40px 44px 44px}}
.champs{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:700px){.champs{grid-template-columns:1fr 1fr}}
.champ{display:flex; flex-direction:column; gap:7px; min-width:0}
.champ.large{grid-column:1/-1}
.champ label{font-size:13.5px; font-weight:600; color:var(--ink)}
.champ .aide{font-size:12.5px; color:var(--muted)}
.champ input, .champ select, .champ textarea{
  font:inherit; color:var(--ink); width:100%;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; min-height:50px;
}
.champ textarea{min-height:150px; resize:vertical; line-height:1.55}
.champ input::placeholder, .champ textarea::placeholder{color:var(--muted)}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--ink); background:var(--surface);
}
.champ input:user-invalid, .champ textarea:user-invalid{border-color:var(--ink); background:var(--surface)}
.obligatoire{color:var(--muted); font-weight:500}

/* Champ piège : invisible pour les visiteurs, rempli par les robots. */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-pied{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; margin-top:26px}
.form-pied .mention{font-size:13px; color:var(--muted); max-width:42ch}

/* Messages après envoi */
.reponse{
  margin-top:20px; padding:20px 22px; border-radius:var(--r-bloc);
  display:flex; gap:14px; align-items:flex-start;
}
.reponse[hidden]{display:none}
.reponse .titre-rep{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:5px}
.reponse p{font-size:15px}
.reponse.ok{background:var(--hero-bg); color:var(--hero-fg)}
.reponse.ok p{color:var(--hero-muted)}
.reponse.ko{background:var(--surface-2); border:1px solid var(--line)}
.reponse.ko p{color:var(--ink-2)}
.reponse a{color:inherit}

/* ==========================================================================
   COUCHE PREMIUM
   Ajoutée par-dessus la base : typographie plus fine, grain, reflets du verre,
   détails au survol, visuel du héros, frise des étapes, pied de page riche.
   Tout ce bloc peut être retiré d'un coup sans casser le reste.
   ========================================================================== */

:root{
  --reflet:rgba(255,255,255,.78);          /* liseré lumineux en haut du verre et des cartes */
  --ligne-forte:rgba(18,19,22,.16);        /* trait de la frise */
  --bord-survol:rgba(18,19,22,.22);
}
@media (prefers-color-scheme:dark){:root{
  --reflet:rgba(255,255,255,.07);
  --ligne-forte:rgba(241,242,244,.2);
  --bord-survol:rgba(241,242,244,.28);
}}

/* --- Grain très léger sur le fond : de la matière, comme un beau papier --- */
.decor::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .85 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
@media (prefers-color-scheme:dark){ .decor::after{ filter:invert(1); mix-blend-mode:screen; opacity:.05 } }

/* --- Typographie : plus grande, plus serrée, plus fine en très grand --- */
.hero h1{font-size:clamp(34px,5.2vw,62px); font-weight:600; letter-spacing:-.045em; line-height:1.02}
.hero .sous{font-size:clamp(16px,1.6vw,18.5px); line-height:1.6}
.titre h2{font-size:clamp(28px,3.7vw,46px); font-weight:500; letter-spacing:-.04em; line-height:1.06}
.contact h2{font-size:clamp(30px,4.4vw,54px); font-weight:500; letter-spacing:-.045em; line-height:1.04}
.sur-titre{letter-spacing:.14em}
.sur-titre .num{font-variant-numeric:tabular-nums; color:var(--ink); margin-right:2px}

/* --- Verre : un liseré lumineux en haut, comme une vraie plaque de verre --- */
.top-in{box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-flottante)}
.vitre{box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-vitre)}
.menu-mobile{box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-flottante)}
.note-tarifs{box-shadow:inset 0 1px 0 var(--reflet)}

/* --- Cartes : même liseré, bord qui se précise au survol --- */
.carte,.tarif,.etape,.repere,.form-carte{box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-carte)}
.carte,.tarif,.etape{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease}
.carte:hover,.tarif:hover,.etape:hover{border-color:var(--bord-survol); box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-flottante)}

/* --- Boutons : léger dégradé, flèche qui avance au survol --- */
.btn{letter-spacing:-.01em}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-dark{
  background:linear-gradient(180deg, color-mix(in srgb, var(--hero-bg) 86%, var(--hero-fg)) 0%, var(--hero-bg) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hero-fg) 18%, transparent), var(--ombre-carte);
}
.btn-clair{box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}

/* ------------------------- Héros avec visuel ------------------------- */
.hero.avec-visuel{display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center}
@media (min-width:1000px){
  .hero.avec-visuel{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:12px; padding-right:32px}
  .hero.avec-visuel h1{max-width:none; font-size:clamp(34px,4.9vw,60px)}
}
.visuel{position:relative; height:440px; display:none}
@media (min-width:600px){ .visuel{display:block} }

.telephone{
  position:absolute; left:50%; top:50%; width:218px; height:436px;
  transform:translate(-50%,-50%) rotate(-5deg);
  border-radius:40px; padding:9px;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--hero-fg) 26%, transparent),
    color-mix(in srgb, var(--hero-fg) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--hero-fg) 22%, transparent);
  box-shadow:0 50px 90px -34px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--hero-fg) 35%, transparent);
}
.ecran{
  width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:var(--surface); color:var(--ink);
  padding:16px 14px; display:flex; flex-direction:column; gap:11px;
}
.e-barre{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600}
.e-logo{width:16px; height:16px; border-radius:6px; background:var(--ink); flex:none}
.e-menu{margin-left:auto; width:16px; height:9px; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); position:relative}
.e-menu::after{content:""; position:absolute; left:0; right:0; top:2.5px; border-top:1.5px solid var(--ink)}
.e-image{
  height:122px; border-radius:16px; flex:none;
  background:
    radial-gradient(80% 70% at 75% 25%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--ink) 16%, var(--surface)), color-mix(in srgb, var(--ink) 42%, var(--surface)));
}
.e-titre{font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.12; letter-spacing:-.03em}
.e-lignes{display:flex; flex-direction:column; gap:5px}
.e-lignes span{height:5px; border-radius:3px; background:var(--surface-2)}
.e-lignes span.court{width:62%}
.e-bouton{
  align-self:flex-start; background:var(--hero-bg); color:var(--hero-fg);
  font-size:10px; font-weight:600; padding:7px 13px; border-radius:999px;
}
.e-infos{margin-top:auto; display:flex; flex-direction:column; gap:6px}
.e-infos div{display:flex; align-items:center; gap:8px; font-size:10px; font-weight:500;
  background:var(--surface-2); border-radius:10px; padding:8px 10px}
.e-infos i{width:9px; height:9px; border-radius:50%; background:var(--ink); opacity:.75; flex:none}

.flotte{
  position:absolute; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 15px 10px 12px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--hero-fg);
  background:color-mix(in srgb, var(--hero-fg) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--hero-fg) 22%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--hero-fg) 25%, transparent);
  animation:flotter 7s ease-in-out infinite;
}
.flotte svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.flotte .pastille{width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, var(--hero-fg) 18%, transparent)}
.flotte.f1{top:15%; right:calc(50% + 88px)}
.flotte.f2{top:47%; left:calc(50% + 88px); animation-delay:-2.4s}
.flotte.f3{bottom:13%; right:calc(50% + 72px); animation-delay:-4.6s}
@keyframes flotter{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* --------------------- Titres de section sur deux colonnes --------------------- */
@media (min-width:900px){
  .titre-duo{
    max-width:none; display:grid; gap:20px 72px; align-items:end;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  }
  .titre-duo .sur-titre{grid-column:1/-1; margin-bottom:0}
  .titre-duo p{margin-top:0; padding-bottom:7px; color:var(--ink-2)}
}

/* ------------------------------ Services ------------------------------ */
.carte{position:relative; padding:30px 28px 32px; gap:12px}
.carte .ico{width:52px; height:52px; border-radius:16px; margin-bottom:10px;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hero-fg) 18%, transparent)}
.carte .ico svg{width:23px; height:23px}
.carte h3{font-size:20px; line-height:1.25; letter-spacing:-.025em}
@media (min-width:700px){ .carte h3{min-height:2.5em} }
.carte .rang{
  position:absolute; top:28px; right:28px;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}

/* ------------------------- Frise des étapes ------------------------- */
.frise{list-style:none; margin:0; padding:0; position:relative; display:grid}
.frise::before{
  content:""; position:absolute; left:22px; top:22px; bottom:40px; width:1px;
  background:linear-gradient(180deg, var(--ligne-forte), var(--ligne-forte) 85%, transparent);
}
.pas{position:relative; padding:0 0 30px 68px}
.pas .pt{
  position:absolute; left:0; top:0; width:45px; height:45px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-carte);
  font-family:var(--font-display); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;
}
.pas:last-child .pt{background:var(--hero-bg); color:var(--hero-fg); border-color:var(--hero-bg)}
.pas h3{font-size:19px; font-weight:600; letter-spacing:-.025em; padding-top:11px}
.pas p{color:var(--ink-2); font-size:15.5px; margin-top:7px; max-width:42ch}

@media (min-width:900px){
  .frise{grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px}
  .frise::before{
    left:22px; top:22px; bottom:auto; width:auto; height:1px;
    right:calc((100% - 88px) / 5 - 22px);
    background:var(--ligne-forte);
  }
  .pas{padding:0}
  .pas .pt{position:relative}
  .pas h3{padding-top:24px}
  .pas p{font-size:15px}
}

/* ------------------------- Pied de page riche ------------------------- */
.pied.pied-riche{
  display:grid; grid-template-columns:minmax(0,1fr); gap:28px;
  padding:32px 26px 22px; align-items:start;
  box-shadow:inset 0 1px 0 var(--reflet);
}
@media (min-width:760px){
  .pied.pied-riche{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); padding:40px 40px 24px}
}
.pied-marque img{height:24px}
.pied-marque p{margin-top:14px; max-width:34ch; color:var(--muted); font-size:14px; line-height:1.55}
.pied-col{display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--ink-2)}
.pied-col a{color:var(--ink-2); text-decoration:none; width:fit-content}
.pied-col a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.pied-titre{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:2px}
.pied-bas{
  grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px;
}

@media (prefers-reduced-motion:reduce){
  .flotte{animation:none}
  .btn:hover svg{transform:none}
}

/* Coordonnées sur téléphone : empilées et centrées, au lieu de décalées. */
@media (max-width:600px){
  .coord{flex-direction:column; align-items:center; text-align:center; gap:16px}
  .coord div{min-width:0}
}

/* ------------------------- Héros sur téléphone -------------------------
   Sous 600 px : moins de marges empilées (le titre gagne 30 px), boutons
   pleine largeur, et le téléphone de l'illustration émerge du bas de la
   carte noire — on n'en voit que le haut, le héros reste compact. */
@media (max-width:599px){
  .vitre{padding:8px; border-radius:34px}
  .hero{padding-left:22px; padding-right:22px}
  .hero h1{font-size:clamp(30px,8.6vw,36px); letter-spacing:-.04em; line-height:1.04}
  .hero .sous{font-size:15.5px; margin-top:16px}
  .hero .actions{flex-direction:column; align-items:stretch; gap:10px; margin-top:26px}
  .hero .actions .btn{width:100%; min-height:50px}

  .hero.avec-visuel{padding-bottom:0; overflow:hidden; gap:26px}
  /* La coupe tombe dans les lignes grises du faux site, jamais au milieu d'un texte. */
  .hero.avec-visuel .visuel{display:block; height:246px; margin:0 -22px}
  .hero.avec-visuel .telephone{
    top:auto; bottom:-148px; width:196px; height:392px;
    transform:translateX(-50%) rotate(-4deg);
  }
  /* Une seule pastille sur téléphone : « Appeler », la plus utile sur mobile. */
  .hero.avec-visuel .flotte.f2,
  .hero.avec-visuel .flotte.f3{display:none}
  .hero.avec-visuel .flotte.f1{top:74px; right:auto; left:calc(50% + 46px)}

  /* Halo derrière le téléphone, pour la profondeur. */
  .hero.avec-visuel .visuel::before{
    content:""; position:absolute; left:50%; bottom:-70px; width:340px; height:280px;
    transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(closest-side, color-mix(in srgb, var(--hero-fg) 18%, transparent), transparent);
  }
}

/* ---------------------- Accueil plus court sur téléphone ----------------------
   Mesuré à 375 x 812 : l'en-tête prenait 758 px et les trois repères 358 px,
   soit 1 254 px avant la première section. On resserre. */
@media (max-width:599px){
  .hero.avec-visuel{padding-top:34px !important; gap:18px}
  .hero.avec-visuel .chip{margin-bottom:18px}
  .hero.avec-visuel .actions{margin-top:22px}
  /* Un seul bouton : la section « Comment ça se passe » suit juste en dessous. */
  .hero.avec-visuel .actions .btn-vide{display:none}

  /* On ne montre que le haut du téléphone : barre et image. */
  .hero.avec-visuel .visuel{height:160px}
  .hero.avec-visuel .telephone{bottom:-232px}
  .hero.avec-visuel .flotte.f1{top:52px}
  .hero.avec-visuel .visuel::before{bottom:-120px}

  /* Les trois repères deviennent une seule carte à trois lignes. */
  .reperes{
    gap:0; margin-top:8px; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:26px;
    box-shadow:inset 0 1px 0 var(--reflet), var(--ombre-carte);
  }
  .repere{border:0; border-radius:0; box-shadow:none; background:transparent; padding:14px 20px}
  .repere + .repere{border-top:1px solid var(--line)}
  .repere .t{font-size:15px}
  .repere p{font-size:13.5px; margin-top:2px}
}