/* =========================================================
   DETAIL'ART — Feuille de style
   Style : moderne épuré clair · accent bleu acier
   ========================================================= */

/* ---------- Polices auto-hébergées (perf + RGPD : aucune requête externe) ---------- */

/* Le site est pense en clair. Sans cette declaration, Samsung Internet
   et le mode sombre automatique de Chrome repeignent la page eux-memes. */
:root{color-scheme:light}

:root{
  /* Couleurs */
  /* Amplitude tonale large : du blanc pur au noir profond.
     (Les gris moyens rendaient l'ensemble fade.) */
  --ink:        #121317;   /* texte : quasi noir, franc */
  --ink-soft:   #3c3f46;
  --bg:         #f5f1e9;   /* sol : crème assombri pour que les cartes s'en détachent */
  --bg-alt:     #ece6da;   /* sections alternées : écart porté à 15 valeurs, visible */
  --bg-dark:    #1f2128;   /* aplats sombres */
  --bg-tint:    #e3dbcb;
  --line:       #ded6c6;   /* greige : chaud comme le fond, plus le gris bleuté d'avant */
  --muted:      #646b76;   /* ≥4.5:1 sur blanc (était #8a8f98, non conforme WCAG) */
  /* Palette monochrome : anthracite + blanc, aucune couleur d'accent.
     L'œil est guidé par le contraste (plein vs contour), pas par la teinte. */
  --accent:     #1b1c20;   /* « accent » = presque noir, sur fond clair */
  --accent-d:   #000000;   /* état survolé : noir franc */
  --accent-soft:#e8e1d3;   /* aplat discret, réchauffé lui aussi */
  --white:      #fbf9f5;   /* surfaces de cartes : plus de blanc pur */
  --paper:      #f0ebe0;   /* crème papier, un cran sous les cartes */
  --paper-line: #ddd4c2;

  /* Typo */
  /* Titres : serif éditorial (auto-hébergé, 2 fichiers) */
  --font-title:'Helvetica Neue', Helvetica, Arial, sans-serif;      /* tout en Helvetica : la grotesque du système */
  /* Interface (boutons, menu, étiquettes) : Helvetica, comme le corps de texte */
  --font-display:'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Helvetica = police système : aucun fichier à télécharger (rapide sur mobile).
     Repli Arial (Windows/Android) puis la police système. */
  --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-script:'Helvetica Neue', Helvetica, Arial, sans-serif;     /* mot accentué : porté par la couleur, plus par l'italique */
  --font-num:'Helvetica Neue', Helvetica, Arial, sans-serif;        /* chiffres : même grotesque, contraste par la graisse */

  /* Mesures */
  --container: 1200px;
  --radius:    22px;
  --radius-sm: 14px;
  --radius-xl: 40px;                  /* gros blocs arrondis */
  --shadow:    0 1px 2px rgba(74,62,44,.06), 0 10px 30px -14px rgba(74,62,44,.30);
  --shadow-lg: 0 2px 4px rgba(74,62,44,.07), 0 30px 64px -24px rgba(74,62,44,.40);
  --ease:      cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ---------- Finitions de marque : sélection & scrollbar ---------- */
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:#b8c0cf transparent}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:#c3c9d4;border-radius:99px;
    border:3px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}
}

/* ---------- Accessibilité : skip link + focus clavier ---------- */
.skip-link{
  position:fixed;top:-120px;left:16px;z-index:1100;
  background:var(--accent);color:#fff;padding:.7em 1.2em;border-radius:100px;
  font-family:var(--font-display);font-weight:600;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;outline:2px solid #fff;outline-offset:2px}
a:focus-visible,button:focus-visible,
.service-card:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;
}
/* sur surfaces bleues/sombres, anneau clair pour le contraste du focus */
.btn--primary:focus-visible,.nav__cta:focus-visible,.fab:focus-visible{outline-color:#fff}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  /* overflow-x:hidden forcerait overflow-y:auto (spéc CSS) → conteneur de défilement
     parasite qui casse la parallaxe au scroll et position:sticky. overflow-x:clip
     clippe l'horizontal SANS cet effet de bord. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a,button,input,select,textarea,[tabindex]{touch-action:manipulation} /* supprime le délai de tap 300ms */
::selection{background:var(--accent);color:#fff}

h1,h2,h3{font-family:var(--font-title);line-height:1.08;font-weight:700;letter-spacing:-.028em}
h4{font-family:var(--font-display);line-height:1.12;font-weight:700;letter-spacing:-.01em}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.text-accent{color:var(--accent)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:.85em 1.6em;border-radius:100px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform;white-space:nowrap;
}
.btn--lg{padding:1.05em 2em;font-size:1rem}
.btn--block{width:100%}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.btn--primary:hover{background:var(--accent-d);transform:translateY(-3px);box-shadow:0 14px 34px -8px rgba(0,0,0,.45)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn--glass{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--glass:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-3px)}

/* =========================================================
   PRELOADER
   ========================================================= */
/* Preloader désactivé : aucun voile blanc ne peut couvrir la page dans un aperçu
   statique. (Réactivable une fois l'affichage confirmé dans un vrai navigateur.) */
.preloader{display:none!important}
.preloader__logo img{width:90px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--accent),var(--accent-d));
  transition:width .1s linear;
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  padding:18px 0;
  transition:padding .4s var(--ease);
}
.header.is-scrolled{padding:12px 0;background:transparent;box-shadow:none}
/* Nav en pilule de verre flottante (style Mads Matters) */
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:calc(min(100%, var(--container)) - 2 * clamp(20px, 5vw, 40px));margin:0 auto;
  background:rgba(18,21,27,.6);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  padding:8px 8px 8px 24px;
  box-shadow:0 14px 36px -16px rgba(0,0,0,.6);
  transition:padding .4s var(--ease);
}
/* logo & liens toujours clairs (pilule sombre sur tout fond) */
.header__logo--light{opacity:1!important}
.header__logo--dark{opacity:0!important}
.header.is-scrolled .nav__link{color:rgba(255,255,255,.82)}
.header.is-scrolled .nav__link:hover{color:#fff}
.header.is-scrolled .burger span{background:#fff}
.header__brand{position:relative;display:flex;align-items:center;line-height:0}
.header__logo{height:46px;width:auto;transition:height .4s var(--ease),opacity .35s ease}
.header.is-scrolled .header__logo{height:38px}
/* Bascule logo clair (sur héro sombre) / foncé (header solidifié) */
.header__logo--dark{position:absolute;top:0;left:0;opacity:0}
.header.is-scrolled .header__logo--light{opacity:0}
.header.is-scrolled .header__logo--dark{opacity:1}

.nav{display:flex;align-items:center;gap:32px}
.nav__list{display:flex;gap:30px}
.nav__link{
  position:relative;font-family:var(--font-display);font-weight:500;font-size:.95rem;
  color:rgba(255,255,255,.82);transition:color .25s;
  padding:13px 6px;display:inline-flex;align-items:center;   /* zone tactile ≥44px (skill: touch-target-size) */
}
.nav__link::after{
  content:"";position:absolute;left:6px;right:6px;bottom:9px;width:auto;
  transform:scaleX(0);transform-origin:left;height:2px;
  background:var(--accent);transition:transform .3s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link:hover{color:#fff}
/* Une fois le header solidifié (fond clair), liens foncés */
.header.is-scrolled .nav__link{color:var(--ink-soft)}
.header.is-scrolled .nav__link:hover{color:var(--ink)}

/* Burger */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;z-index:950;min-width:44px;min-height:44px} /* cible tactile ≥44px */
.burger span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease), opacity .25s, background .3s}
/* Les trois traits restent blancs en toute circonstance : la pilule est
   sombre, qu on ait defile ou non. La regle .is-scrolled les passait en
   anthracite — anthracite sur anthracite, ils disparaissaient.
   Seule exception : le tiroir ouvert, dont le fond est creme. */
body.nav-open .burger span{background:var(--ink)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:140px;padding-bottom:80px;overflow:hidden;
}
.hero--dark{background:#181b21;color:#fff}





/* mot en script manuscrit (style Mads Matters) */
.script{font-family:var(--font-script);font-weight:400;color:var(--accent);
  font-size:1em;letter-spacing:-.028em;display:inline}


/* Atouts du héro (remplacent les compteurs) */


@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(12px)}}

/* =========================================================
   TRUST — bandeau défilant (marquee, esprit Awwwards)
   ========================================================= */


@keyframes trustScroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){
  /* Bandeau statique : la liste doit pouvoir rétrécir (flex:none la bloquait
     à sa largeur naturelle → items coupés hors écran). */
  
  
  
}

/* =========================================================
   SECTIONS génériques
   ========================================================= */
.section{padding:clamp(70px,10vw,120px) 0}
.section__head{max-width:720px;margin-bottom:clamp(40px,6vw,64px)}
/* Modificateur « tête centrée » retiré : il ne servait plus qu’à la FAQ et
   cassait à lui seul l’aplomb de la page. La règle reste, neutre, au cas où
   une future section voudrait vraiment être centrée. */
.section__head.section__head--center{margin-inline:auto;text-align:center}
.section__tag{
  display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:.45em 1em;border-radius:100px;margin-bottom:18px;
}
.section__title{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:18px}
.section__intro{font-size:1.08rem;color:var(--ink-soft)}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--bg)}
.services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(min-width:820px){.services__grid{gap:24px}}
@media(max-width:760px){.services__grid{grid-template-columns:1fr}}
/* Gros blocs bicolores arrondis (style Mads Matters) */
.service-card{
  /* Bordure transparente d'1 px : les cartes de prix en ont une, pas celles-ci.
     Sans elle, leur texte commençait 1 px plus à gauche que celui des cartes
     du dessus. Le fond déborde sous la bordure, donc elle reste invisible. */
  border:1px solid transparent;
  position:relative;color:#fff;overflow:hidden;min-height:340px;
  border-radius:var(--radius-xl);padding:28px 24px;display:flex;flex-direction:column;
  box-shadow:
    0 8px 16px -8px rgba(12,15,25,.38),
    0 32px 50px -14px rgba(12,15,25,.55),
    0 74px 100px -30px rgba(12,15,25,.52);

}
/* damier : anthracite / bleu acier */
.service-card:nth-child(4n+1),.service-card:nth-child(4n+4){background:linear-gradient(158deg,#242a35,#24272e)}
.service-card:nth-child(4n+2),.service-card:nth-child(4n+3){background:linear-gradient(158deg,var(--accent),var(--accent-d))}
/* Rien au survol : la carte reste à la hauteur où elle flotte. */
/* numéro fantôme éditorial (compteur CSS : suit automatiquement l'ordre,
   même si l'admin ajoute/retire des cartes via content.json) */
.service-card__badge{
  position:absolute;top:22px;right:22px;background:rgba(255,255,255,.16);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.04em;
  padding:.45em 1em;border-radius:100px;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.service-card__title{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:12px;color:#fff;letter-spacing:-.02em;line-height:1.1}
.service-card__desc{color:rgba(255,255,255,.78);font-size:1rem;margin-bottom:20px}
.service-card__list{margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.service-card__list li{position:relative;padding-left:26px;font-size:.95rem;color:rgba(255,255,255,.82)}
.service-card__list li::before{content:"";position:absolute;left:1px;top:.5em;
  width:8px;height:8px;border-radius:50%;border:1.4px solid currentColor;opacity:.8;
  box-shadow:7px -4px 0 -1.8px currentColor}  /* 2e bulle, plus petite et pleine */
.service-card__price{margin-top:auto;display:flex;flex-direction:column;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.service-card__price span{font-size:.8rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em}
.service-card__price strong{font-family:var(--font-num);font-size:2.6rem;color:#fff;font-weight:400;letter-spacing:-.02em;line-height:1}
/* « Demander un devis » était un simple texte blanc fléché : sur une carte
   sombre déjà pleine de blanc, rien ne disait que c'était cliquable. Il devient
   une vraie pastille, inverse de celle des cartes de prix (pastille sombre sur
   fond clair → pastille claire sur fond sombre). Pleine largeur : c'est le seul
   point de conversion de la carte, et 95 % des visiteurs le touchent au doigt. */
.service-card__cta{
  margin-top:28px;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 20px;border-radius:100px;
  background:#fff;color:#121317;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.22), 0 16px 32px -18px rgba(0,0,0,.65);
  transition:transform .14s ease, box-shadow .3s var(--ease), gap .3s var(--ease);
}
.service-card__cta:hover{gap:14px;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.26), 0 24px 44px -20px rgba(0,0,0,.75)}
.service-card__cta:active{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* =========================================================
   FORMULES — comparatif à étages (Signature / Excellence / Prestige)
   avec inclus (✓) / non inclus (✗) par niveau
   ========================================================= */
.formules{display:flex;flex-direction:column;gap:clamp(40px,6vw,64px)}
.formule__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.formule__ic{flex:none;display:grid;place-items:center;width:auto;height:auto;
  background:none;color:var(--accent);font-size:1rem;letter-spacing:1px}
.formule__title{font-size:clamp(1.3rem,2.4vw,1.7rem);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.formule__lieu{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:.3em .8em;border-radius:100px}
.formule__desc{color:var(--ink-soft);font-size:.98rem;margin-top:4px;max-width:640px}
.formule__tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}

.tier{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tier--pop{border-color:var(--accent);box-shadow:0 20px 50px -24px rgba(0,0,0,.45)}
.tier__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:.72rem;letter-spacing:.04em;padding:.35em 1em;border-radius:100px;white-space:nowrap}
.tier__name{font-family:var(--font-title);font-weight:700;font-size:1.45rem;letter-spacing:-.01em}
.tier__sub{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.tier__price{display:flex;align-items:baseline;gap:8px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tier__price span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tier__price strong{font-family:var(--font-num);font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink);letter-spacing:-.02em}
.tier__feats{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}
.feat{position:relative;padding-left:28px;font-size:.92rem;line-height:1.4}
.feat::before{position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:700}
.feat--in{color:var(--ink)}
.feat--in::before{content:"✓";background:var(--accent-soft);color:var(--accent)}
.feat--out{color:var(--muted);opacity:.7}
.feat--out::before{content:"✗";background:#f0f1f4;color:#aab0ba}
.tier__cta{margin-top:auto;display:block;text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:.95rem;padding:12px;border-radius:100px;background:var(--ink);color:#fff;transition:background .25s,transform .1s}
.tier__cta:hover{background:var(--accent)}
.tier--pop .tier__cta{background:var(--accent)}
.tier--pop .tier__cta:hover{background:var(--accent-d)}

.services__subhead{font-family:var(--font-title);font-weight:700;font-size:1.4rem;
  margin:clamp(48px,7vw,72px) 0 32px;padding-top:clamp(30px,4vw,40px);border-top:1px solid var(--line);
  color:var(--ink-soft)}
.services__grid--devis{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){
  /* MOBILE = 95 % des visiteurs : les 3 niveaux se font GLISSER du doigt
     au lieu de s'empiler (9 cartes empilées = 8,8 écrans de scroll). */
  .formule__tiers{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* le carrousel file jusqu'aux bords de l'écran : on sent qu'il continue */
    margin-inline:-24px;padding-inline:24px;
    /* overflow-x force le navigateur à rogner aussi en Y : on réserve
       la place du badge « Populaire », posé à top:-12px. */
    padding-top:18px;margin-top:-18px;padding-bottom:4px;
  }
  .formule__tiers::-webkit-scrollbar{display:none}
  .formule__tiers > .tier{
    flex:0 0 82%;            /* on aperçoit la carte suivante = indice de glissement */
    scroll-snap-align:center;
    min-width:0;
  }
  .tier--pop{order:-1} /* la formule populaire arrive en premier sous le doigt */

  /* Points indicateurs (créés par main.js) */
  .tier-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .tier-dots span{
    width:7px;height:7px;border-radius:50%;background:var(--line);
    transition:background .25s,transform .25s;
  }
  .tier-dots span.is-on{background:var(--spark);transform:scale(1.35)}
}
@media(max-width:760px){
  .services__grid--devis{grid-template-columns:1fr}
}

/* =========================================================
   GALLERY — Before/After + grid
   ========================================================= */
.gallery{background:var(--bg-alt)}


/* Avant / après — révélation au survol (balayage) */
/* Grille avant/après : 1 seul élément = centré ; 2+ = grille responsive */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
  max-width:900px;margin:0;align-items:start}
.ba-grid:has(.reveal-ba:only-child){max-width:560px}
.reveal-ba{
  --ba:100%;                     /* poignée à droite = on voit l AVANT en entier */
  position:relative;width:100%;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);aspect-ratio:3/4;background:#20222a;
  cursor:ew-resize;outline:none;isolation:isolate;
  touch-action:pan-y;            /* le scroll vertical passe, on ne capte que l horizontal */
  -webkit-user-select:none;user-select:none;
}
.reveal-ba img{display:block;width:100%;height:100%;object-fit:cover}
/* Les photos portent la signature de l outil qui a servi a les traiter,
   dans le coin bas-droit. On agrandit legerement et on decale le cadrage
   vers le haut et la gauche : la signature sort du cadre, qui est deja en
   overflow:hidden. Les DEUX calques recoivent exactement la meme valeur —
   un ecart ici et l avant ne se superposerait plus a l apres.
   scale/translate plutot que transform : ce sont des canaux independants,
   ils n ecrasent pas le transform utilise ailleurs sur ces calques. */
.reveal-ba img{scale:1.18;translate:-2% -3%}
/* base = AVANT (zoom léger au survol pour la vie) */
.reveal-ba__base{transform:none}
/* calque APRÈS révélé par clip-path (balayage gauche→droite) */
.reveal-ba__after{
  position:absolute;inset:0;z-index:2;
  clip-path:inset(0 0 0 var(--ba));
  transition:clip-path .45s cubic-bezier(.7,0,.2,1);
  will-change:clip-path;
}
/* Pendant le glissement, aucune transition : le rideau colle exactement au doigt. */
.reveal-ba.is-glisse .reveal-ba__after,
.reveal-ba.is-glisse .reveal-ba__line{transition:none}
/* ligne lumineuse qui suit le bord du balayage */
.reveal-ba__line{
  position:absolute;top:0;bottom:0;left:var(--ba);right:auto;width:2px;z-index:3;
  background:#fff;box-shadow:0 0 18px 2px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s var(--ease),clip-path .45s cubic-bezier(.7,0,.2,1);
}
/* la poignée ronde, pour qu on comprenne qu il y a quelque chose à glisser */
.reveal-ba__line::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7);
}
.reveal-ba:hover .reveal-ba__line,
.reveal-ba:focus-visible .reveal-ba__line{opacity:1}
/* Pendant le glissement, la poignée reste visible quel que soit le support. */
.reveal-ba.is-glisse .reveal-ba__line{opacity:1}
/* Au doigt il n y a pas de survol : la poignée doit être visible d emblée, et
   le rideau part au milieu pour que la comparaison soit lisible tout de suite. */
@media (hover:none){
  .reveal-ba{--ba:50%}
  .reveal-ba__line{opacity:1}
}
/* étiquettes */
.reveal-ba__tag{
  position:absolute;top:16px;z-index:4;font-family:var(--font-display);font-weight:600;
  font-size:.78rem;letter-spacing:.08em;color:#fff;padding:.4em .9em;border-radius:100px;
  backdrop-filter:blur(4px);transition:opacity .4s var(--ease);
}
.reveal-ba__tag--before{left:16px;background:rgba(0,0,0,.55)}
.reveal-ba__tag--after{right:16px;background:rgba(0,0,0,.55)}
/* indice « survolez » */
.reveal-ba__hint{
  /* Placé SOUS les étiquettes, et non en bas : en bas il recouvrait la légende
     du véhicule. Il disparaît dès la première manipulation. */
  position:absolute;left:50%;top:62px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;color:#fff;
  padding:.5em 1em;border-radius:100px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.reveal-ba__hint-ic{color:var(--accent)}
.reveal-ba:hover .reveal-ba__hint,
.reveal-ba:focus-visible .reveal-ba__hint,
.reveal-ba:hover .reveal-ba__hint{opacity:0;transform:translateX(-50%) translateY(-8px)}
/* Mode tactile : un appui ajoute .is-shown (révélation maintenue), car le
   survol n'existe pas sur téléphone. */
.reveal-ba.is-shown .reveal-ba__base{transform:none}
.reveal-ba.is-shown .reveal-ba__after{clip-path:inset(0 0 0 0)}
.reveal-ba.is-shown .reveal-ba__line{opacity:1}
.reveal-ba.is-shown .reveal-ba__tag--before{opacity:0}
.reveal-ba.is-shown .reveal-ba__tag--after{opacity:1}
.reveal-ba.is-glisse .reveal-ba__hint,
.reveal-ba.is-vu .reveal-ba__hint{opacity:0;transform:translateX(-50%) translateY(-8px)}
.reveal-ba__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  text-align:center;padding:42px 16px 16px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal-ba__after{transition:none}
  .reveal-ba__base{transition:none}
}
.gallery__note{text-align:start;color:var(--muted);font-size:.95rem;margin-top:32px}


/* =========================================================
   PROCESS — Section épinglée (sticky scroll)
   ========================================================= */
.section__tag--dark{background:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
.pinwrap{position:relative;height:300vh;background:#1c1e25;color:#fff}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
/* Fonds en fondu-enchaîné par étape (esprit hexpens « scrolling slideshow ») */
.pin__bgs{position:absolute;inset:0;pointer-events:none}
.pin__bg{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;
  transform:translateZ(0);transition:opacity 1.1s var(--ease)}
.pin__bg.is-on{opacity:.72}
.pin__bg--glow{background:
  radial-gradient(70% 90% at 70% 20%,rgba(255,255,255,.10),transparent 72%)}
.pin__bg--glow.is-on{opacity:.55}
.pin__bgveil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,11,15,.95) 0%,rgba(10,11,15,.86) 34%,
    rgba(10,11,15,.42) 62%,rgba(10,11,15,.22) 100%)}
.pin__inner{position:relative;z-index:1}
.pin__inner{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center;width:100%;position:relative;z-index:1}
.pin__title{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);margin:14px 0 28px}
.pin__progress{height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;margin-bottom:26px}
.pin__progress-bar{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--accent),#ffffff);border-radius:3px;transition:width .35s var(--ease)}
.pin__nav{display:flex;flex-direction:column;gap:6px}
.pin__nav li{font-family:var(--font-display);font-weight:600;font-size:1rem;color:rgba(255,255,255,.4);padding:8px 0;cursor:pointer;transition:color .3s,padding-left .3s}
.pin__nav li.is-active{color:#fff;padding-left:14px}
.pin__nav li.is-active::before{content:"";position:absolute;margin-left:-14px;margin-top:.6em;width:8px;height:2px;background:var(--accent)}
.pin__stage{position:relative;min-height:300px}
.pin__step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(40px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.pin__step.is-active{opacity:1;transform:none;pointer-events:auto}
.pin__num{font-family:var(--font-num);font-weight:700;font-size:clamp(4.4rem,13vw,10rem);line-height:.9;
  letter-spacing:-.02em;color:rgba(255,255,255,.20);-webkit-text-stroke:0;margin-bottom:10px}
.pin__step h3{font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;margin-bottom:14px}
.pin__step p{color:rgba(255,255,255,.7);font-size:1.1rem;max-width:520px}

/* =========================================================
   INTERLUDES ÉDITORIAUX — grandes phrases sur papier crème
   (esprit hexpens : respiration entre les sections)
   ========================================================= */


/* ---- Titres révélés par le scroll (esprit hexpens) ----
   Technique : le JS « arme » le titre (lettres invisibles) et superpose un clone
   plein découpé par clip-path selon --fill : les lettres APPARAISSENT de gauche
   à droite en défilant. Sans JS / reduced-motion, le titre reste plein et lisible. */

.fill-title--armed .script,.fill-title--armed .text-accent{color:transparent}

.fill-title__fill .script,.fill-title__fill .text-accent{color:var(--accent)}

/* =========================================================
   ENGAGEMENTS
   ========================================================= */
.engage{background:var(--bg-tint);position:relative;overflow:clip}   /* fond de section assombri : sans ça la carte du dessus, qui n'en recouvre aucune autre, ne se distinguait pas du fond */
.engage .container{position:relative;z-index:1}
.engage__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.engage__card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* Rien au survol non plus ici — seul le liseré d'accent se déploie. */
/* liseré accent qui se déploie au survol */
.engage__card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),#ffffff);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.engage__card:hover::after{transform:scaleX(1)}
.engage__ic{display:inline-grid;color:var(--accent);font-size:1.1rem;margin-bottom:14px}
.engage__card h3{font-size:1.25rem;margin-bottom:10px}
.engage__card p{color:var(--ink-soft);font-size:.96rem}
.engage__note{margin-top:32px;text-align:start;color:var(--ink-soft);font-size:.98rem;max-width:62ch}

/* =========================================================
   REVIEWS (conservé pour usage futur)
   ========================================================= */


/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--bg)}
/* .contact__inner n'est plus le conteneur de la section (la tête lui est
   passée au-dessus) : c'est désormais une simple grille à l'intérieur. */
.contact__inner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,72px);align-items:start}
.contact__lead{color:var(--ink-soft);margin:18px 0 30px;font-size:1.05rem}
.contact__details{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}
.contact__details li{display:flex;gap:16px;align-items:flex-start}
.contact__ic{display:grid;place-items:center;width:26px;height:26px;flex:none;color:var(--accent)}
.contact__ic svg{width:19px;height:19px;display:block}
.contact__details strong{display:block;font-family:var(--font-display);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:2px}
.contact__details a{color:var(--ink);font-weight:500;transition:color .25s}
.contact__details a:hover{color:var(--accent)}

.contact__form{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:var(--font-display);font-weight:500;font-size:.88rem;margin-bottom:8px;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink); /* 16px mini : évite le zoom auto iOS */
  padding:.85em 1em;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);transition:border-color .25s,box-shadow .25s;resize:vertical;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
.field input.invalid,.field textarea.invalid{border-color:#e0413e;box-shadow:0 0 0 4px #fdeaea}
.form-note{margin-top:14px;font-size:.92rem;text-align:center;min-height:1.2em}
.form-note.ok{color:#1f9d55}
.form-note.err{color:#e0413e}

/* Honeypot : retiré du flux, invisible et inaccessible au clavier */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   RÉSERVATION EN LIGNE — assistant multi-étapes (modal)
   ========================================================= */
.bk{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px}
.bk[hidden]{display:none}
.bk__backdrop{position:absolute;inset:0;background:rgba(6,7,10,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bk__panel{position:relative;width:min(560px,100%);max-height:min(88vh,860px);
  display:flex;flex-direction:column;background:#25282f;color:#e9ebf0;
  border:1px solid #2a2e3a;border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:bkIn .3s var(--ease) both}
@keyframes bkIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bk__panel{animation:none}}

.bk__top{display:flex;align-items:center;gap:16px;padding:18px 20px 0}
.bk__prog{flex:1;display:flex;flex-direction:column;gap:7px}
.bk__step{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;
  font-family:var(--font-display);font-weight:600}
.bk__bar{height:4px;border-radius:4px;background:#2a2e3a;overflow:hidden}
.bk__bar-fill{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);
  transition:width .35s var(--ease)}
.bk__close{flex:none;width:34px;height:34px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:#9aa1ad;font-size:1.1rem;line-height:1;transition:background .2s,color .2s}
.bk__close:hover{background:#1c1f28;color:#fff}

.bk__body{flex:1;overflow-y:auto;padding:20px 24px 8px}
.bk__h{font-family:var(--font-title);font-weight:700;font-size:1.35rem;margin-bottom:6px;color:#fff}
.bk__sub{color:#9aa1ad;font-size:.94rem;margin-bottom:18px;line-height:1.5}

/* Cartes de choix */
.bk__opts{display:flex;flex-direction:column;gap:10px}
.bk__opts--grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.bk__opts--grid{grid-template-columns:1fr}}
.bk__opt{position:relative;text-align:left;width:100%;cursor:pointer;
  background:#1c1f28;border:1.5px solid #2a2e3a;border-radius:12px;padding:14px 16px;
  color:#e9ebf0;font:inherit;transition:border-color .2s,background .2s,transform .1s}
.bk__opt:hover{border-color:#3d4351;background:#20242e}
.bk__opt:active{transform:scale(.995)}
.bk__opt.is-sel{border-color:var(--accent);background:rgba(0,0,0,.45)}
.bk__opt__t{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem}
.bk__opt__d{display:block;color:#9aa1ad;font-size:.86rem;margin-top:2px;line-height:1.45}
.bk__opt__p{display:block;color:var(--accent);font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;margin-top:8px}
.bk__opt__p--sm{font-size:.92rem}
.bk__opt.is-sel .bk__opt__p{color:#ffffff}
/* « Rien à ajouter » : plus sobre, séparée des options payantes */
.bk__opt--none{border-style:dashed;margin-bottom:4px}
.bk__opt--none.is-sel{border-style:solid}

/* Champs */
.bk__f{margin-bottom:12px}
.bk__f label{display:block;font-size:.85rem;color:#9aa1ad;margin-bottom:6px}
.bk__f input,.bk__f textarea{width:100%;background:#1c1f28;border:1.5px solid #2a2e3a;color:#e9ebf0;
  border-radius:10px;padding:12px 14px;font:inherit;font-size:1rem;transition:border-color .2s}
.bk__f input:focus,.bk__f textarea:focus{outline:none;border-color:var(--accent)}
.bk__f input::placeholder,.bk__f textarea::placeholder{color:#6b7280}
.bk__f textarea{resize:vertical;min-height:76px}
.bk__note{color:#9aa1ad;font-size:.85rem;line-height:1.5;background:#1c1f28;border:1px solid #2a2e3a;
  border-radius:10px;padding:12px 14px;margin-top:12px}

/* Calendrier */
.bk__cal{background:#1c1f28;border:1px solid #2a2e3a;border-radius:12px;padding:14px;margin-bottom:16px}
.bk__cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk__cal-head strong{font-family:var(--font-display);font-size:1rem;text-transform:capitalize}
.bk__cal-nav{width:32px;height:32px;border:1px solid #2a2e3a;background:transparent;color:#e9ebf0;
  border-radius:8px;cursor:pointer;font-size:.9rem}
.bk__cal-nav:hover:not(:disabled){background:#20242e}
.bk__cal-nav:disabled{opacity:.3;cursor:not-allowed}
.bk__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.bk__dow{font-size:.75rem;color:#6b7280;padding:4px 0}
.bk__day{aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;
  background:transparent;color:#e9ebf0;cursor:pointer;font:inherit;font-size:.9rem;transition:all .15s}
.bk__day:hover:not(:disabled){background:#20242e;border-color:#3d4351}
.bk__day:disabled{color:#4b5563;text-decoration:line-through;cursor:not-allowed}
.bk__day.is-sel{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.bk__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.bk__slot{padding:10px 6px;border:1px solid #2a2e3a;background:#1c1f28;color:#e9ebf0;border-radius:8px;
  cursor:pointer;font:inherit;font-weight:600;font-size:.9rem;transition:all .15s}
.bk__slot:hover{border-color:#3d4351}
.bk__slot.is-sel{background:var(--accent);border-color:var(--accent);color:#fff}

/* Récapitulatif */
.bk__sum{background:#1c1f28;border:1px solid #2a2e3a;border-radius:12px;padding:18px;margin-top:14px}
.bk__sum h4{font-family:var(--font-display);font-size:1.1rem;margin-bottom:14px;color:#fff}
.bk__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #2a2e3a;
  font-size:.92rem}
.bk__row span{color:#9aa1ad;flex:none}
.bk__row strong{text-align:right;font-weight:600}
.bk__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;
  border-top:1px solid #3d4351}
.bk__total span{font-family:var(--font-display);font-weight:700;font-size:1rem}
.bk__total strong{font-family:var(--font-num);font-weight:700;font-size:2rem;color:#fff;letter-spacing:-.02em}

/* Pied : estimation en direct + navigation */
.bk__foot{border-top:1px solid #2a2e3a}
.bk__live{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 24px 0;animation:bkFade .3s var(--ease) both}
.bk__live[hidden]{display:none}
.bk__live span{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;
  font-family:var(--font-display);font-weight:600}
.bk__live strong{font-family:var(--font-num);font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:-.02em}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
/* Navigation bas */
.bk__nav{display:flex;gap:10px;padding:14px 24px 20px}
.bk__btn{flex:1;padding:13px;border:0;border-radius:10px;cursor:pointer;font:inherit;font-weight:600;
  font-size:.98rem;transition:background .2s,opacity .2s}
.bk__btn--ghost{background:#1c1f28;color:#e9ebf0}
.bk__btn--ghost:hover{background:#242833}
.bk__btn--main{background:var(--accent);color:#fff;flex:2}
.bk__btn--main:hover{background:var(--accent-d)}
.bk__btn[disabled]{opacity:.45;cursor:not-allowed}
.bk__err{color:#f0a39d;font-size:.88rem;margin-top:10px}
.bk__ok{text-align:center;padding:20px 0}
.bk__ok-ic{font-size:3rem;line-height:1;margin-bottom:14px}

/* =========================================================
   FAQ — accordéon (questions fréquentes)
   ========================================================= */
.faq{background:var(--bg-alt)}
/* la colonne de lecture est portée par la liste, pas par le conteneur */
.faq__list{max-width:820px}
.faq__list{display:flex;flex-direction:column;gap:16px}
.faq__item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.faq__item[open]{border-color:var(--accent);box-shadow:var(--shadow)}
.faq__q{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--accent);flex:none;line-height:1;
  transition:transform .3s var(--ease)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 24px 22px;color:var(--ink-soft);font-size:1rem;line-height:1.6;max-width:70ch}
@media (prefers-reduced-motion:reduce){.faq__q::after{transition:none}}

.footer__credits a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.footer__credits a:hover{color:#fff}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);color:#cfd2d8;overflow:hidden;position:relative}
/* Le pied de page prend le même retrait que les sections (clamp 20→40 px)
   au lieu de son propre clamp 20→24 : ses colonnes commençaient 16 px à
   gauche de la ligne que suit tout le reste de la page. */
.footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:clamp(50px,7vw,80px) clamp(20px,5vw,40px) 50px}
/* Titre géant qui déborde (style Mads Matters) */
.footer__giant{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(5rem,26vw,22rem);line-height:.82;letter-spacing:-.05em;
  text-align:center;white-space:nowrap;color:rgba(255,255,255,.1);
  margin:30px 0 -1.2%;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);
  mask-image:linear-gradient(180deg,#000 58%,transparent);
}
.footer__logo{height:48px;width:auto;margin-bottom:18px}
.footer__brand p{color:#9aa0aa;max-width:280px;font-size:.95rem}
.footer__col h4{font-family:var(--font-display);color:#fff;font-size:1rem;margin-bottom:18px}
.footer__col a{display:block;color:#9aa0aa;padding:6px 0;font-size:.94rem;transition:color .25s,padding-left .25s}
.footer__col a:hover{color:#fff;padding-left:6px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1)}
/* padding:24px 0 écrasait le retrait horizontal du conteneur : la dernière
   ligne du site commençait 40 px à gauche de tout le reste. */
.footer__bottom-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:24px;font-size:.85rem;color:#7c828d}

/* ---------- FAB ---------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:800;
  background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:600;
  padding:.9em 1.4em;border-radius:100px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
  font-size:.92rem;transform:translateY(120px);transition:transform .5s var(--ease),background .3s;
}
.fab.is-visible{transform:translateY(0)}
.fab:hover{background:var(--accent-d)}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
/* Base : TOUJOURS visible (sûr pour aperçu figé / instantané → jamais blanc).
   En navigateur réel, l'IntersectionObserver ajoute « .is-visible » qui REJOUE
   une entrée en fondu-montée. Si l'IO est gelé, la classe n'est jamais ajoutée
   → le contenu reste simplement visible. Le seul état caché vit DANS l'animation,
   qui ne se déclenche que lorsque l'IO fonctionne vraiment. */
.reveal{opacity:1;transform:none}
.js .reveal.is-visible{animation:revealUp .8s cubic-bezier(.22,.61,.36,1) both}
@keyframes revealUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.js .reveal[data-reveal-delay="1"].is-visible{animation-delay:.09s}
.js .reveal[data-reveal-delay="2"].is-visible{animation-delay:.18s}
.js .reveal[data-reveal-delay="3"].is-visible{animation-delay:.27s}
.js .reveal[data-reveal-delay="4"].is-visible{animation-delay:.36s}

/* =========================================================
   BANDEAU PARALLAXE — image plein écran, profondeur au scroll
   Parallaxe 100% CSS (background-attachment:fixed) : aucun JS, snapshot-safe.
   ========================================================= */

/* Calque image plus grand que le bandeau : marge pour la translation au scroll */


/* iOS/Safari ignore background-attachment:fixed → repli propre (défilement normal) */
/* Révélation de titre par masque — les titres surgissent au scroll (style Mads Matters).
   Base visible (snapshot-safe) ; l'animation ne se joue qu'au passage à l'écran. */

.reveal-mask .line__in{display:block;will-change:transform}
.reveal-mask.is-revealed .line__in{animation:lineRise .5s var(--ease) both}
@keyframes lineRise{from{transform:translateY(105%)}to{transform:translateY(0)}}

/* Alternance de fonds — lisibilité de l'entonnoir (preuve → bénéfices → services) */
.gallery{background:var(--bg)}


/* Micro-interactions fluides (inspiration billchien.net) — 100% CSS, sûres */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .contact__inner{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:820px){
  /* Rogne le débordement horizontal (menu hors-écran, marquee…).
     Sûr ici : la section épinglée est désactivée sur mobile. */
  /* ⚠️ overflow-x:hidden ferait du body un conteneur de défilement et tuerait
     position:sticky — or le héro EST collant sur mobile depuis la refonte.
     clip coupe pareil, sans cet effet de bord. */
  html,body{overflow-x:clip}
  /* Le backdrop-filter de la pilule « capture » le position:fixed du menu
     (il devient relatif à la pilule). On le retire sur mobile pour que le
     menu se positionne par rapport à l'écran. */
  /* Sans le flou, un fond à 60 % laissait lire le texte de la page au travers
     de la pilule : on l opacifie pour que le menu reste lisible. */
  .header__inner{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(18,21,27,.94);
  }
  /* Menu mobile = panneau latéral PLEIN ÉCRAN au-dessus de tout. */
  .nav{
    position:fixed;top:0;right:0;left:auto;bottom:auto;
    width:min(84vw,360px);height:100vh;height:100dvh;z-index:1100;
    flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;
    background:var(--bg);padding:90px 34px 40px;overflow-y:auto;
    box-shadow:-20px 0 60px -20px rgba(0,0,0,.35);
    transform:translateX(110%);transition:transform .45s var(--ease);
  }
  /* Ouvert : glisse en place + fond assombri plein écran (via grande ombre,
     pas d'élément séparé → aucune complication de superposition). */
  .nav.is-open{transform:translateX(0);
    box-shadow:-20px 0 60px -20px rgba(0,0,0,.35), 0 0 0 100vmax rgba(8,9,13,.55)}
  .nav__list{flex-direction:column;gap:4px;width:100%}
  .nav__link{display:block;font-size:1.3rem;padding:12px 0;color:var(--ink-soft)}
  .nav__link:hover{color:var(--ink)}
  .nav__cta{margin-top:20px;width:100%}
  .burger{display:flex;position:relative;z-index:1200} /* au-dessus du drawer pour rester cliquable (croix) */
  body.nav-open{overflow:hidden}

}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:32px}
  /* empilé sur téléphone, mais aligné à gauche comme tout le reste */
  .footer__bottom-inner{flex-direction:column;text-align:start;align-items:flex-start}
  /* Titre géant : plus mesuré sur mobile pour ne pas paraître « coupé » */
  /* plus de taille par palier ici : le titre se calcule sur la largeur (fin de feuille) */
  
  
  
  .fab{right:14px;bottom:14px;padding:.8em 1.1em;font-size:.85rem}
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.js .reveal{opacity:1;transform:none;animation:none}
}

/* =========================================================
   AMBIANCE — bande visuel d'illustration (band sombre)
   ========================================================= */


/* Le comparateur avant/après est interactif → curseur explicite */
.reveal-ba{cursor:pointer}

/* =========================================================
   LOGO « MÉDAILLE » — inclinaison douce + reflet au scroll
   (remplace la rotation complète : un PNG plat qui passait
   « par la tranche » à 90°. Ici : tilt ±15° avec inertie via
   transition CSS, et balayage lumineux masqué à la forme du logo)
   ========================================================= */


/* reflet : bande lumineuse qui traverse le monogramme, découpée par mask */


/* =========================================================
   OPTIMISATION SMARTPHONE
   Sur petit écran on coupe les animations décoratives :
   le texte s'affiche directement, le défilement reste fluide
   et la batterie est préservée. Le desktop garde tous les effets.
   ========================================================= */
@media (max-width:820px){
  /* 1. Textes : plus d'apparition au scroll, tout est lisible d'emblée */
  .js .reveal,
  .js .reveal.is-visible{animation:none !important;opacity:1 !important;transform:none !important}
  
  .reveal-mask .line__in,
  .reveal-mask.is-revealed .line__in{animation:none !important;transform:none !important;will-change:auto}
  /* Titres « qui se remplissent » : affichés pleins directement */
  .fill-title--armed .script,.fill-title--armed .text-accent{color:var(--ink)}
  .fill-title--armed .script{color:var(--accent)}
  

  /* 2. Animations en boucle (coûteuses en batterie) */
  
  /* Bandeau statique : la liste doit pouvoir rétrécir (flex:none la bloquait
     à sa largeur naturelle → items coupés hors écran). */
  
  
  

  /* 3. Logo « médaille » : statique (plus de calcul au défilement) */
  
  

  /* 4. Moins de compositing inutile */
  
}

/* Tout le site est en Helvetica. En grand, une grotesque a besoin de graisse
   et d'un crénage serré — l'inverse de ce que demandait le serif. */
h1,h2,h3,.section__title,.pin__title,.pin__step h3,.footer__giant,.bk__h,.tier__name,.engage__card h3{font-weight:700;letter-spacing:-.028em}

/* =========================================================
   SÉCURITÉ TYPOGRAPHIQUE
   Garantit qu'aucun texte ne déborde, ne se chevauche
   ni ne colle — quelle que soit la largeur d'écran.
   ========================================================= */
/* 1. Un mot trop long (ex. « Décontamination », une adresse email)
      se coupe au lieu de déborder de sa boîte. */
h1,h2,h3,h4,p,li,a,span,strong,em,label,button,summary,figcaption,td,th,
.bk__opt__t,.bk__opt__d,.tier__name,.feat,.faq__q,.faq__a{
  overflow-wrap:break-word;
  word-break:normal;
}
/* 2. Titres : lignes équilibrées, jamais un mot seul sur la dernière ligne. */
h1,h2,h3,.section__title,.pin__title,.bk__h{
  text-wrap:balance;
}
/* 3. Paragraphes : évite les lignes orphelines. */
p,.section__intro,.formule__desc,.bk__sub,.faq__a{
  text-wrap:pretty;
}
/* 4. Un enfant de grille/flex ne doit jamais imposer sa largeur au parent
      (cause n°1 des débordements horizontaux). */
.formule__tiers > *,.engage__grid > *,.services__grid > *,.ba-grid > *,.bk__opts > *,.footer__inner > *,.contact__inner > *,.pin__inner > *{min-width:0}
/* 5. Le titre géant du pied de page ne crée jamais de défilement latéral. */
.footer__giant{max-width:100%;overflow:hidden}
/* 6. Les liens longs (email, adresse) se coupent proprement. */
.contact__details a,.footer__col a,.legal a{overflow-wrap:anywhere}

/* Sur petit écran, Helvetica supporte le serrage — on le garde, juste un cran
   plus doux que sur grand écran. */
@media (max-width:560px){
  h1,h2,h3,.section__title{letter-spacing:-.022em}
}

/* =========================================================
   MONOCHROME — inversion automatique sur fond sombre
   Dans ces zones, « accent » devient blanc : toutes les règles
   existantes qui utilisent var(--accent) suivent sans modification.
   ========================================================= */
.hero,.pin,.pinwrap,.footer,.bk__panel{
  --accent:#ffffff;
  --accent-d:#e6e7ea;
  --accent-soft:rgba(255,255,255,.12);
  /* Sur fond sombre, une ombre chaude ne se verrait pas : elle passe au noir
     et s'appuie davantage, sinon le blanc reste plat. */
  --ombre-titre:
    0 .035em .04em rgba(0,0,0,.42),
    0 .105em .13em rgba(0,0,0,.58),
    0 .24em  .30em rgba(0,0,0,.58);
}
/* Bouton flottant (hors de ces conteneurs) */
.fab{background:#1b1c20}
.fab:hover{background:#24272e}

/* =========================================================
   ICÔNE « BULLES DE SAVON » — remplace les losanges ✦
   Deux bulles avec un reflet, dessinées en SVG (nettes à toute taille).
   ========================================================= */
.ic-bub{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;
  color:currentColor;flex:none}
.usp__ic .ic-bub,.engage__ic .ic-bub{width:1.25em;height:1.25em}
/* pictos metier des engagements : plus grands que les bulles, meme graisse */
.ic-mt{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;color:currentColor;flex:none}
.engage__ic .ic-mt{width:1.9em;height:1.9em}
.formule__ic .ic-bub{width:1.5em;height:1.5em}


/* Sur fond sombre, « accent » = blanc : le bouton plein doit donc
   passer son texte en anthracite (sinon blanc sur blanc). */
.hero .btn--primary,.pin .btn--primary,.pinwrap .btn--primary,
.footer .btn--primary,.parallax .btn--primary,.ambiance .btn--primary,
.bk__panel .bk__btn--main{color:#14151a}
.hero .btn--primary:hover,.pin .btn--primary:hover,.pinwrap .btn--primary:hover,
.footer .btn--primary:hover,.parallax .btn--primary:hover,.ambiance .btn--primary:hover,
.bk__panel .bk__btn--main:hover{color:#000}
/* Le badge « Populaire » et les pastilles sombres suivent la même logique */
.bk__panel .tier__badge,.pin .tier__badge{color:#14151a}

/* =========================================================
   CONTRASTE & RELIEF — le monochrome ne doit pas être fade
   On joue sur : aplats noirs francs, dégradés subtils,
   inversions et ombres plus présentes.
   ========================================================= */

/* 1. La formule mise en avant s'INVERSE : noir plein sur fond blanc.
      C'est le plus fort repère visuel de la page. */
.tier--pop{
  background:linear-gradient(165deg,#2b2e35,#1c1e25);
  border-color:#0c0d11;color:#fff;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.75);
}
.tier--pop .tier__name{color:#fff}
.tier--pop .tier__sub{color:rgba(255,255,255,.6)}
.tier--pop .tier__price{border-bottom-color:rgba(255,255,255,.18)}
.tier--pop .tier__price span{color:rgba(255,255,255,.6)}
.tier--pop .tier__price strong{color:#fff}
.tier--pop .feat--in{color:#fff}
.tier--pop .feat--in::before{background:rgba(255,255,255,.16);color:#fff}
.tier--pop .feat--out{color:rgba(255,255,255,.52)}
.tier--pop .feat--out::before{background:rgba(255,255,255,.07);color:rgba(255,255,255,.45)}
.tier--pop .tier__badge{background:#fff;color:#14151a}
.tier--pop .tier__cta{background:#fff;color:#14151a}
.tier--pop .tier__cta:hover{background:#e6e7ea}

/* 2. Sections sombres : dégradé au lieu d'un aplat plat */
.pinwrap{background:linear-gradient(180deg,#1a1c22 0%,#24272e 55%,#1a1c22 100%)}
.footer{background:linear-gradient(180deg,#24272e,#1a1c22)}


/* 3. Cartes claires : relief plus marqué */
.engage__card,.service-card,.tier,.faq__item{border-color:var(--line)}
.tier{box-shadow:0 2px 0 rgba(18,19,23,.04)}
.tier:hover{box-shadow:0 20px 44px -22px rgba(18,19,23,.45)}

/* 4. Étiquettes : contour net plutôt qu'aplat gris terne */
.section__tag{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.formule__lieu{background:var(--ink);color:#fff}

/* 5. Prix : plus gros et vraiment noirs */
.tier__price strong{font-size:2.8rem;color:var(--ink)}

/* 6. Bandeau de confiance : inversé en noir → rythme blanc/noir/blanc */


/* 7. Séparateur franc entre sections claires */
.gallery{border-bottom:1px solid var(--line)}

/* Grain très fin sur toute la page : enlève l'effet « feuille blanche »
   sans alourdir (texture générée, aucun fichier à charger). */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:820px){body::after{opacity:.028}}

/* La galerie respire davantage (la preuve par l'image mérite de la place) */
.ba-grid:has(.reveal-ba:only-child){max-width:680px}

/* Sur fond sombre : étiquettes en blanc (la règle claire les rendait noires
   donc invisibles), et texte renforcé pour rester net par-dessus une photo. */
.hero .section__tag,.pin .section__tag,.pinwrap .section__tag,
.ambiance .section__tag,.parallax .section__tag,.section__tag--dark{
  border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)
}
.pin__nav li{color:rgba(255,255,255,.55)}
.pin__step p{color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* Les titres d'étape vivent sur des cartes crème depuis la refonte du deck :
   une ombre noire dessous les salissait. Seul le grand titre la garde. */
.pin__title{text-shadow:var(--ombre-titre)}

/* =========================================================
   PONCTUATION COULEUR  —  bleu pétrole
   La base reste anthracite + blanc. La couleur n'apparaît que sur
   quelques micro-signes (mot manuscrit, ✓, bulles, barre de progression)
   afin d'animer la page sans jamais devenir la dominante.
   ========================================================= */
:root{
  --spark:      #1858E0;            /* 5,3:1 sur le creme */
  --spark-soft: #E4EBFB;
}
/* Contextes sombres : la même teinte, éclaircie (9,7:1 sur l'anthracite) */
.hero,.pin,.pinwrap,.footer,.bk__panel{
  --spark:      #1858E0;
  --spark-soft: rgba(24,88,224,.15);
}

.script{color:var(--spark)}
.feat--in::before{background:var(--spark-soft);color:var(--spark)}
.tier__badge{background:var(--spark)}
.tier--pop{border-color:var(--spark)}
.bk__bar-fill{background:var(--spark)}
.engage__ic,.formule__ic{color:var(--spark)}

/* Sur fond sombre, le badge et les pastilles reprennent un texte foncé
   pour rester lisibles sur la teinte claire. */
.pin .tier__badge,.bk__panel .tier__badge{color:#fff}
.tier--pop .feat--in::before{background:rgba(24,88,224,.18);color:#5B8DEF}

/* .usp span (0,1,1) l'emportait sur .usp__ic : on remonte la spécificité. */

/* La carte mise en avant est sombre : elle prend la teinte éclaircie. */
.tier--pop{--spark:#1858E0;--spark-soft:rgba(24,88,224,.15)}
.tier--pop .tier__badge{background:var(--spark);color:#fff}

/* =========================================================
   RETOUR AU CLIC / AU TAP
   :hover n'existe pas au doigt (et reste « collé » après un tap sur mobile).
   L'état universel est :active — il se déclenche au clic ET au toucher.
   Couche 1 : enfoncement en CSS pur, fonctionne même si le JS ne charge pas.
   ========================================================= */

/* Android/iOS peignent un rectangle gris au tap : on le remplace par nos effets. */
.btn,.tier__cta,.fab,.bk__btn,.nav__cta,.faq__q,.bk__opt{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  -webkit-touch-callout:none;      /* pas de menu « copier l'image » au appui long */
}

/* L'enfoncement doit être IMMÉDIAT (.4s héritée de .btn = trop mou au clic),
   puis le relâchement reprend la transition longue et souple. */
.btn:active,.tier__cta:active,.nav__cta:active,.bk__btn:active,.fab:active{
  transform:scale(.955);
  transition-duration:.08s;
}
.btn--lg:active{transform:scale(.97)}         /* gros bouton = course plus courte */
.faq__q:active{transform:scale(.99);transition-duration:.08s}
.bk__opt:active{transform:scale(.985);transition-duration:.08s}

/* Couche 2 : l'onde part du point touché (variables posées par le JS).
   Forme de bulle — cohérent avec les pictos savon — et non un rond Material. */
.btn,.fab,.bk__btn,.bk__route,.nav__cta,
.presta__cta,.service-card__cta,.insta-ligne{position:relative;overflow:hidden;isolation:isolate}
/* ⚠️ Le bouton flottant est en position:fixed — la règle ci-dessus le repassait
   en relative, il retombait donc dans le flux (en bas du pied de page) et
   débordait de 14 px à gauche. On lui rend sa position, en gardant overflow
   et isolation pour que l onde reste contenue dans sa pastille. */
.fab{position:fixed}
.tap-bulle{
  /* L'onde doit contraster avec le FOND DU BOUTON, qui s'inverse selon la section.
     --bulle = teinte en canaux RVB bruts, redéfinie par les règles ci-dessous. */
  --bulle:255,255,255;
  position:absolute;left:var(--rx);top:var(--ry);
  width:var(--rs);height:var(--rs);margin:calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,
    rgba(var(--bulle),.42) 0%,
    rgba(var(--bulle),.22) 55%,
    rgba(var(--bulle),0)   70%);
  box-shadow:inset 0 0 0 1px rgba(var(--bulle),.30);   /* la paroi de la bulle */
  transform:scale(0);opacity:.9;
  animation:tapBulle .52s cubic-bezier(.22,.61,.36,1) forwards;
}
/* Fond CLAIR sous l'onde -> bulle foncée.
   Sections claires : les boutons pleins sont anthracite (bulle blanche, par défaut),
   les boutons contour sont transparents sur blanc -> il leur faut une bulle foncée. */
.btn--ghost .tap-bulle,.btn--glass .tap-bulle,.faq__q .tap-bulle{--bulle:24,88,224}

/* Sections SOMBRES : tout s'inverse. Le bouton plein y devient blanc
   (--accent passe à #fff) et le bouton contour se pose sur du noir. */
.hero .btn--primary .tap-bulle,.pin .btn--primary .tap-bulle,
.pinwrap .btn--primary .tap-bulle,.footer .btn--primary .tap-bulle,
.parallax .btn--primary .tap-bulle,.ambiance .btn--primary .tap-bulle,
.bk__panel .bk__btn--main .tap-bulle,.tier--pop .tier__cta .tap-bulle{--bulle:9,20,23}

.hero .btn--ghost .tap-bulle,.hero .btn--glass .tap-bulle,
.pin .btn--ghost .tap-bulle,.footer .btn--ghost .tap-bulle,
.parallax .btn--ghost .tap-bulle{--bulle:255,255,255}
@keyframes tapBulle{
  0%  {transform:scale(0);opacity:.95}
  70% {opacity:.55}
  100%{transform:scale(1);opacity:0}
}


@media (prefers-reduced-motion:reduce){
  .tap-bulle{display:none}
  .btn:active,.tier__cta:active,.nav__cta:active,.bk__btn:active,.fab:active,.btn--lg:active,.faq__q:active,.bk__opt:active{transform:none}
}

/* =========================================================
   ZONES TACTILES — 95 % des visiteurs touchent l'écran au doigt.
   Sous 44 px (recommandation Apple et Google), on rate la cible.
   On agrandit la ZONE, jamais la taille du texte.
   ========================================================= */
@media (max-width:820px){
  /* Liens de la section contact : 17 px de haut à l'origine.
     Ce sont les points de conversion — un tap raté coûte un client. */
  .contact__details a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Liens des colonnes du pied de page : 37 px à l origine.
     ATTENTION : ces liens sont des <a> DIRECTS en display:block (pas des <li>).
     Les passer en inline-flex les alignait horizontalement et collait les
     libellés entre eux (« Lavage ExtérieurLavage Intérieur »). On garde donc
     un flex de niveau bloc, qui reste dans le flux vertical. */
  .footer__col a{
    display:flex;align-items:center;min-height:44px;
  }

  /* Bouton flottant « Devis gratuit » : 37 px. */
  /* .fab est un <a> : inline par defaut, ou min-height reste inerte. */
  .fab{display:inline-flex;align-items:center;min-height:44px;padding-block:.7em}

  /* Flèche de défilement du héro : 26 px de large. */
  

  /* Logo de l'en-tête : il rétrécit quand le bandeau se compacte au scroll.
     On agrandit la zone touchable, pas l'image. */
  .header__brand{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}

/* =========================================================
   RETOURS D'INTERACTION — les deux manques relevés à l'audit.
   Rien de décoratif : uniquement ce qui aide à comprendre l'état.
   ========================================================= */

/* 1. Ouverture de la FAQ.
   <details> n'anime rien nativement : le texte surgissait d'un bloc.
   On fait glisser le contenu à l'ouverture — l'œil suit le mouvement
   au lieu de subir un saut. (La fermeture reste instantanée : c'est le
   comportement natif, et une fermeture nette se lit comme de la vivacité.) */
.faq__item[open] .faq__a{animation:faqOuvre .3s var(--ease) both}
@keyframes faqOuvre{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:none}
}
/* Le « + » qui devient « × » : la rotation manquait de transition ici. */
.faq__q::after{transition:transform .3s var(--ease)}

/* 2. Halo des champs de saisie.
   Il utilisait --accent-soft (#eceef1, contraste 1,1 sur blanc) = invisible.
   Sur mobile le clavier masque la moitié de l'écran : le champ actif doit
   se repérer d'un coup d'œil. */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--spark);
  box-shadow:0 0 0 4px rgba(29,91,107,.16);
}
.bk__f input:focus,.bk__f textarea:focus{
  border-color:var(--spark);
  box-shadow:0 0 0 4px rgba(24,88,224,.18);
}
/* L'erreur doit rester plus forte que le focus : on la repose après. */
.field input.invalid,.field textarea.invalid{
  border-color:#e0413e;box-shadow:0 0 0 4px #fdeaea;
}

@media (prefers-reduced-motion:reduce){
  .faq__item[open] .faq__a{animation:none}
}


/* =========================================================
   HÉRO « LOGO DÉCOUPÉ » — remplace l ancien héro vidéo plein cadre.
   ========================================================= */
/* ---- APERÇU : héro « logo découpé ». Rien d'autre du site n'est touché. ---- */
/*  sur body fait du body un conteneur de défilement, ce qui
   désactive TOUT position:sticky à l'intérieur.  coupe de la même façon
   mais sans créer ce conteneur — le sticky refonctionne. */
html,body{overflow-x:clip}
/* Le héro dure 165svh mais son contenu reste COLLÉ à l'écran :
   le logo ne bouge pas pendant qu'on descend, ce qui laisse le temps
   de voir le séchage en entier au lieu de le rater en 340 px. */
/* .hero du site porte overflow:hidden + display:flex — les deux cassent le
   sticky de l'enfant. On les neutralise ici ; le débordement du logo reste
   coupé par .heroc__stick, qui garde son propre overflow:hidden. */
.hero--cut{
  height:185svh;background:#1b1d23;position:relative;display:block;overflow:visible;
  /* .hero du site impose padding-top:140px : le bloc collant démarrait donc à
     140 px du haut et ne se collait qu APRES les avoir parcourus — la page
     bougeait, puis se figeait, puis repartait. On repart de zéro. */
  padding:0;
}
.heroc__stick{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:96px 0 28px;overflow:hidden;   /* 96 px = on passe sous le bandeau de navigation */
}
.heroc{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}

/* le masque : logo-mask.webp est recadré sur le dessin, donc il remplit
   exactement le cadre — pas de marge transparente à compenser. */
.heroc__cut{
  width:calc(100% + 12px);margin-inline:-6px;    /* déborde à peine : ~14 px d air de chaque côté */
  max-width:none;aspect-ratio:900/1058;position:relative;overflow:hidden;
  -webkit-mask-image:url('../assets/logo-mask.webp');mask-image:url('../assets/logo-mask.webp');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  /* Le masque + la vidéo + la couche de séchage vivent dans ce conteneur : on le
     promeut sur sa propre couche graphique, pour que le masquage soit calculé une
     fois et non à chaque image. On passe par will-change et NON par
     transform:translateZ(0), car ce conteneur porte aussi la classe .reveal,
     dont la règle .reveal.is-visible{transform:none} écraserait la promotion. */
  will-change:transform;
  backface-visibility:hidden;
}
.heroc__video{width:100%;height:100%;object-fit:cover;display:block}

/* « La mousse se retire » — un aplat clair posé SUR la vidéo, révélé du haut
   vers le bas à mesure qu'on descend : le niveau baisse, le logo sèche.
   --dry va de 0 % (logo plein de mousse) à 114 % (logo net). */
/* Animer mask-image obligeait le téléphone à redessiner le masque à chaque
   image — d'où le scroll qui accroche. On déplace maintenant un simple bloc
   en transform : c'est la carte graphique qui s'en charge, sans redessin.
   Le bloc fait 2 fois la hauteur du logo et se termine par un dégradé :
   en glissant vers le bas, sa partie opaque recouvre le logo. */
.heroc__dry{
  /* Un bloc de la HAUTEUR EXACTE du logo, rangé juste au-dessus de lui.
     En descendant il recouvre le logo : le niveau de mousse baisse.
     Piège corrigé : translateY en % se calcule sur la hauteur de L ELEMENT.
     Avec un bloc de 200 % il partait deux fois trop loin et ressortait en bas,
     ce qui inversait l effet. Le bloc fait 130 % : a course pleine, sa partie
     opaque couvre le logo de 0 a 100 % et le degrade sort par le bas. */
  position:absolute;left:0;right:0;top:-130%;height:130%;
  display:block;pointer-events:none;
  background:linear-gradient(to bottom,
    #fbf9f5 0%, #fbf9f5 66%, #f0ece4 77%, rgba(240,236,228,0) 100%);
  transform:translate3d(0,var(--dry,0%),0);
  will-change:transform;
}
/* Sans JS, ou si le visiteur limite les animations : logo net, jamais à moitié. */
@media (prefers-reduced-motion:reduce){
  .heroc__dry{transform:translate3d(0,100%,0)}
}
/* le titre existe pour Google et les lecteurs d'écran, sans s'afficher */
.heroc__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.heroc__lead{
  color:rgba(255,255,255,.78);font-family:var(--font-display);
  font-size:clamp(.74rem,2.8vw,.95rem);letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;max-width:none;margin:18px auto 0;text-wrap:balance;
}
.heroc__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}

/* Entre 620 et 900 px (tablettes), le logo restait en PLEINE LARGEUR : il
   remplissait tout l écran et venait toucher l indicateur du bas.
   On le borne dès 620 px. */
@media (min-width:620px){
  .heroc__cut{width:min(100%,400px);margin-inline:0}
}

@media (min-width:900px){
  .heroc__stick{padding:100px 0 80px}
  
  .heroc__cut{width:min(100%,510px);margin-inline:0}
  .heroc__lead{font-size:1.12rem;max-width:44ch}
}
/* Le héro remplit exactement l écran : la flèche de défilement viendrait
   chevaucher le bouton du bas. Sur mobile elle n apporte rien — on la retire. */
.hero--cut .hero__scroll{display:none}
@media (min-width:900px){.hero--cut .hero__scroll{display:inline-flex}}

/* très petits écrans : on rend un peu de hauteur au texte */
@media (max-width:360px){
  .heroc__cut{width:calc(100% + 8px);margin-inline:-4px}
  .heroc__lead{margin-top:20px}
}


/* =========================================================
   HÉRO ÉPURÉ — premier écran : le logo, rien d autre.
   Le menu, le descripteur et les boutons n apparaissent qu une fois
   le séchage terminé. Piloté par la classe .hero-sec posée sur <html>.
   ========================================================= */

/* Le bandeau de navigation est masqué tant que le logo n est pas sec. */
html.js-hero:not(.hero-sec) .header{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}
.header{
  transition:padding .4s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
/* Sur les autres pages (mentions légales, 404) la classe .js-hero n est jamais
   posée : le bandeau reste donc visible, sans règle supplémentaire. Et si le JS
   ne s exécute pas du tout, le menu reste visible lui aussi — jamais bloqué. */

/* Descripteur + boutons : même apparition. */
/* Sorti du flux : sans lui, le logo est SEUL dans le bloc et donc réellement
   centré à l écran. Et comme il ne reprend jamais de place, le logo ne bouge
   pas d un pixel au moment où le texte apparaît. */
.heroc{position:relative}
.heroc__apres{
  /* DANS LE FLUX (et non plus en absolu) : il réserve ainsi sa place sous le
     logo, ce qui rend tout chevauchement IMPOSSIBLE quelle que soit la hauteur
     d écran. Une position absolue calée sur le bas du bloc ne tenait pas compte
     de la taille du logo : sur un écran allongé, le descripteur passait par-
     dessus le mot du logo. */
  margin-top:22px;
  text-align:center;padding-inline:20px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
html.hero-sec .heroc__apres{opacity:1;transform:none;pointer-events:auto}

/* Au départ le logo est centré dans un écran vide. Quand le menu et le texte
   apparaissent, il se recale vers le haut pour leur laisser la place : c est
   une transition douce déclenchée UNE fois, pas un à-coup lié au scroll. */
/* Au départ, le bloc texte est invisible mais occupe déjà sa place : sans rien,
   le logo paraîtrait trop haut. On descend donc l ensemble de la moitié de cette
   place, ce qui centre optiquement le logo dans l écran vide ; à la révélation
   on annule le décalage et tout se remet en ordre. */
/* ⚠️ Le décalage porte sur .heroc et NON sur .heroc__stick : un transform sur
   un élément position:sticky perturbe son ancrage. */
.heroc{transition:transform .5s var(--ease);transform:translateY(52px)}
html.hero-sec .heroc{transform:none}

/* Plus de menu au-dessus : le logo peut être vraiment centré. */
.heroc__stick{padding:34px 0 28px}

/* Indicateur : une souris qui respire, discrète, en bas de l écran.
   Elle disparaît dès que le séchage commence. */
.heroc__hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:rgba(255,255,255,.5);pointer-events:none;
  transition:opacity .35s var(--ease);
}
.heroc__hint-txt{
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
}
.heroc__hint-mouse{
  width:22px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.42);
  display:block;position:relative;
}
.heroc__hint-mouse span{
  position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:rgba(255,255,255,.85);transform:translateX(-50%);
  animation:hintDot 1.9s var(--ease) infinite;
}
@keyframes hintDot{
  0%,100%{opacity:0;transform:translate(-50%,0)}
  30%    {opacity:1}
  70%    {opacity:0;transform:translate(-50%,11px)}
}
/* Dès qu on commence à descendre, l invitation n a plus lieu d être. */
html.hero-bouge .heroc__hint{opacity:0}

@media (prefers-reduced-motion:reduce){
  .heroc__hint-mouse span{animation:none;opacity:1}
  .header,.heroc__apres{transition:none}
}
@media (min-width:900px){
  .heroc__stick{padding:40px 0 40px}
}

/* =========================================================
   CARTES DE LA MÉTHODE — couleurs du texte (mobile)
   Une règle de renfort déclarée plus haut (.pin__step p en blanc 86 %, pensée
   pour du texte posé sur photo) écrasait celle du paquet de cartes. Comme les
   cartes sont en papier clair, on repose les couleurs ici, en fin de feuille.
   ========================================================= */
@media (max-width:820px){
  .pin__step h3{color:var(--ink);text-shadow:none}
  .pin__step p{color:var(--ink-soft);text-shadow:none}
  .pin__step .pin__num{color:rgba(18,19,23,.15);-webkit-text-stroke:0}
}

/* La carte reste un repère de positionnement (badge « Populaire » en absolu). */
.tier{position:relative}

/* =========================================================
   « CE QUI NE CHANGE JAMAIS » — MÊME PAQUET DE CARTES (mobile)
   Les 4 engagements se superposent et tournent comme les étapes de la méthode.
   Ici les cartes sont crème sur un fond crème : c est l OMBRE qui rend
   l empilement lisible, pas le contraste de couleur.
   ========================================================= */
@media (max-width:820px){
  .engage__grid{display:block;position:relative;padding-bottom:12vh}
  .engage__card{
    inset:auto;
    position:sticky;top:104px;
    margin-bottom:24px;
    min-height:200px;
    display:flex;flex-direction:column;justify-content:center;
    box-shadow:0 22px 50px -22px rgba(18,19,23,.45);
    transform-origin:50% 120%;
    transform:rotate(var(--rot,0deg));
    will-change:transform;
    transition:none;                 /* le survol ne doit pas contrarier la rotation */
  }
  .engage__card:nth-child(1){--rot:-2deg}
  .engage__card:nth-child(2){--rot:1.5deg}
  .engage__card:nth-child(3){--rot:-1.2deg}
  .engage__card:nth-child(4){--rot:1.9deg}
  .engage__card:last-child{margin-bottom:0}
  .engage__card:hover{transform:rotate(var(--rot,0deg))}

  @media (prefers-reduced-motion:reduce){
    .engage__card{position:relative;top:auto;transform:none}
  }
}

/* =========================================================
   CASE « CONDITIONS GÉNÉRALES » — dernière étape de la réservation
   ========================================================= */
.bk__cgv{
  display:flex;gap:12px;align-items:flex-start;
  margin:16px 0 4px;padding:14px 16px;
  background:#1c1f28;border:1px solid #2a2e3a;border-radius:12px;
  color:#c3c8d2;font-size:.84rem;line-height:1.5;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bk__cgv input{
  flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--spark-l);cursor:pointer;
}
.bk__cgv a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bk__cgv:has(input:checked){border-color:var(--spark-l);background:#1e232c}

/* =========================================================
   SÉLECTEUR DE GABARIT — ajuste la grille tarifaire en direct
   Menu natif : sur téléphone, c'est la roulette d'iOS/Android
   qui s'ouvre. Rien à coder, zone tactile parfaite.
   ========================================================= */
.taille-sel{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:0 0 32px;text-align:start;align-items:flex-start;
}
.taille-sel__line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;margin:0;
  font-family:var(--font-display);font-size:1.02rem;
}
.taille-sel__line label{color:var(--muted);letter-spacing:.01em}
.taille-sel select{
  -webkit-appearance:none;appearance:none;
  font:inherit;font-weight:600;color:var(--accent);
  background-color:var(--bg-alt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231b1c20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  min-height:44px;padding:0 40px 0 16px;
  cursor:pointer;max-width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.taille-sel select:hover{border-color:var(--spark)}
.taille-sel select:focus-visible{
  outline:none;border-color:var(--spark);
  box-shadow:0 0 0 3px var(--spark-soft);
}
.taille-sel__note{
  margin:0;font-size:.86rem;color:var(--muted);
  max-width:38ch;line-height:1.45;min-height:1.3em;
}
@media (min-width:820px){
  .taille-sel{margin-bottom:32px}
  .taille-sel__line{font-size:1.12rem}
}

/* Fond animé de la section Méthode : la vidéo remplace l'image fixe sous le
   voile. Elle est décorative — le voile et les images d'étape passent dessus. */
.pin__bgvid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.42;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .pin__bgvid{display:none} }

/* ---- Section Méthode sur téléphone : rendre la vidéo lisible ----
   La section fait plusieurs milliers de pixels de haut ; un 16/9 en
   object-fit:cover n'y montrait qu'une lamelle verticale de l'image, où
   l'on ne reconnaissait rien. On lui rend donc son cadrage d'origine et
   on la fixe en sticky : elle reste derrière les cartes pendant tout le
   défilement, au lieu de remplir la section. Le paquet de cartes n'est
   pas touché. */
.pin__bgs{overflow:hidden}
.pin__bgvid{
  display:block;
  inset:auto;                 /* doit précéder top, sinon top est réinitialisé */
  position:sticky;
  top:34vh;
  width:100%;height:auto;
  aspect-ratio:16/9;
  opacity:.9;
  /* fondu haut et bas : aucune arête, la vidéo se dissout dans le fond
     au lieu de s'arrêter sur une ligne noire */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
}
/* Voile redessiné en vertical : sombre sous le titre, clair au milieu
   pour laisser voir la microfibre, sombre à nouveau à la sortie. */
.pin__bgveil{
  background:linear-gradient(180deg,
    rgba(10,11,15,.90) 0%,
    rgba(10,11,15,.55) 22%,
    rgba(10,11,15,.32) 50%,
    rgba(10,11,15,.40) 76%,
    rgba(10,11,15,.52) 100%);
}

/* Section Méthode : plus d'épinglage — les étapes forment un paquet de cartes,
   sur téléphone comme sur ordinateur. */
.pinwrap{height:auto}
.pin{position:static;height:auto;display:block;padding:clamp(60px,10vw,90px) 0}
.pin__inner{grid-template-columns:1fr;gap:36px}
.pin__nav{display:none}
/* ⚠️ .pin garde overflow:hidden de la version desktop : il tuerait le sticky
   des cartes ci-dessous. */
.pin{overflow:visible}

/* ================= LE PAQUET DE CARTES =================
   Les 4 étapes se superposent AU MÊME endroit, légèrement pivotées comme des
   cartes posées à la main. Au défilement, celle du dessus recule dans le
   paquet pendant que la suivante vient se poser par-dessus.
   Cartes blanc papier sur le fond anthracite : l effet « jeu de cartes »
   devient évident, et le --paper est déjà une couleur du site. */
.pin__stage{min-height:0;display:block;position:relative;padding-bottom:14vh}
.pin__step{
  /* ⚠️ inset:auto DOIT précéder top, sinon il le remet à auto et la carte
     ne colle plus du tout. */
  inset:auto;
  position:sticky;top:104px;
  opacity:1;pointer-events:auto;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:22px;
  padding:26px 24px 30px;
  margin-bottom:26px;
  min-height:230px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85);
  display:flex;flex-direction:column;justify-content:center;
  transform-origin:50% 120%;                 /* pivot bas : la carte bascule comme sur une table */
  transform:rotate(var(--rot,0deg));
  will-change:transform;
}
/* inclinaisons de départ : un paquet posé à la main n est jamais aligné */
.pin__step:nth-child(1){--rot:-2.2deg}
.pin__step:nth-child(2){--rot:1.6deg}
.pin__step:nth-child(3){--rot:-1.3deg}
.pin__step:nth-child(4){--rot:2deg}
.pin__step:last-child{margin-bottom:0}

/* texte en anthracite sur le papier */
.pin__step h3{color:var(--ink)}
/* Même raison : le paragraphe traînait encore l'ombre noire prévue pour du
   texte posé sur photo, devenue une bavure sur le papier de la carte. */
.pin__step p{color:var(--ink-soft);text-shadow:none}
.pin__num{
  font-size:clamp(3rem,16vw,5rem);
  color:rgba(18,19,23,.15);-webkit-text-stroke:0;
}

@media (prefers-reduced-motion:reduce){
  .pin__step{position:relative;top:auto;transform:none}
}

/* Sans mouvement demandé, on retire l empilement : simple liste. */
@media (prefers-reduced-motion:reduce){
  .pin__step{position:relative;top:auto}
}

/* Ordinateur : mêmes cartes, simplement plus grandes et centrées. */
@media (min-width:821px){
  .pin{padding:clamp(90px,12vh,140px) 0}
  /* Le conteneur garde la largeur de la page (donc le même bord gauche que
     les autres sections) ; c'est la COLONNE qui est bornée à 780 px. Caler le
     conteneur lui-même à 780 le décrochait de 35 px du reste de la page. */
  .pin__inner{grid-template-columns:minmax(0,780px);max-width:1200px;margin-inline:auto;gap:48px}
  .pin__step{
    top:118px;min-height:300px;
    padding:40px 44px 46px;border-radius:26px;margin-bottom:34px;
  }
  .pin__step h3{font-size:2rem}
  .pin__step p{font-size:1.12rem;max-width:none}
  .pin__num{font-size:5.4rem}
  .pin__bgvid{top:30vh}
}

/* .pin__step.is-active vient de l'ancienne mise en page épinglée et posait
   transform:none — ce qui redressait la carte active avant que le JS ne
   reprenne la main. On lui rend son inclinaison. */
.pin__step.is-active{transform:rotate(var(--rot,0deg))}

/* La dernière carte du paquet ne recouvre aucune autre : sans contraste de
   fond ni bordure marquée, elle ne se lisait pas comme une carte. */
.engage__card{border-color:rgba(18,19,23,.14)}

/* =========================================================
   ENTREPRISES — parcs de véhicules
   Bandeau sobre entre les tarifs et la méthode : une autre
   clientèle, donc un bloc à part, mais sans rupture de ton.
   ========================================================= */
.pro{background:var(--paper);border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.pro__inner{text-align:start}
.pro__inner .section__title{margin:0 0 24px}
.pro__lead{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin-bottom:16px;text-wrap:pretty;max-width:62ch}
.pro__inner .btn{margin-top:16px}
@media (min-width:820px){
  .pro__lead{font-size:1.08rem}
}

/* =========================================================
   TITRES DE SECTION — plus présents
   1. Les mots « accentués » des titres étaient en --accent (#1b1c20) sur un
      titre en --ink (#121317) : 9 points d'écart, donc strictement invisibles.
      Ils reprennent le traitement du mot accentué du site — italique + teal —
      qui existe déjà pour .script et fonctionne sur fond clair comme sombre.
   2. Titres agrandis, d'abord pour le téléphone.
   ========================================================= */
.section__title{
  font-size:clamp(2.15rem,6vw,3.4rem);
  line-height:1.1;
  margin-bottom:20px;
}
.section__title .text-accent{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--spark);
}
.section__tag{margin-bottom:20px}
.section__head{margin-bottom:clamp(44px,7vw,72px)}
.section__intro{font-size:1.1rem;line-height:1.62}

/* Titre de la section Méthode : même échelle, sur fond sombre */
.pin__title{font-size:clamp(2rem,5.4vw,3rem)}

/* =========================================================
   STICKER MOUSSE — deux plans en parallaxe
   Le PNG détouré a été coupé en deux calques superposés qui se
   décalent verticalement au défilement : l'homme, au premier plan,
   bouge plus que la voiture. La coupe est adoucie, donc invisible.
   Calé à fond à gauche : la découpe du personnage tombe alors sur
   le bord de l'écran et se lit comme volontaire.
   ========================================================= */
.sticker{
  position:relative;
  margin:clamp(30px,6vw,46px) 0 calc(-1 * clamp(30px,6vw,46px));
  margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;
  aspect-ratio:1069/721;
  overflow:hidden;
  pointer-events:none;
}
.sticker__plan{
  position:absolute;left:0;top:0;
  width:100%;height:100%;
  object-fit:contain;object-position:left bottom;
  will-change:transform;
}
/* Pas de cadre sur grand écran : la carrosserie est tronquée dans le PNG
   d'origine. Centrée dans une carte, la coupe se voyait comme une amputation.
   En pleine largeur, elle tombe sur le bord de l'écran et la voiture semble
   simplement continuer hors champ. */
@media (prefers-reduced-motion:reduce){
  .sticker__plan{transform:none !important}
}

/* Les habillages du comparateur avant/après ne doivent jamais intercepter le
   geste : sur téléphone, un appui qui démarre sur l'invitation, une étiquette
   ou la poignée doit piloter le rideau comme un appui sur l'image. */
.reveal-ba__hint,
.reveal-ba__tag,
.reveal-ba__cap,
.reveal-ba__line{pointer-events:none}

/* =========================================================
   TRAME TOPOGRAPHIQUE — assets/topographie-couches-gris.svg
   Remplace depuis le 2026-09-16 l'ancienne image plate topo-flat.webp,
   qui reste dans assets/ au cas où. Treize couches qui montent au
   chargement puis dérivent lentement, chacune avec son propre retard.
   Trois emplacements : fond plein de « Ce qui ne change jamais »,
   rappel en coin haut-droit sur la FAQ, rappel en coin bas-gauche sur
   Entreprises. Plus la 404, qui a sa propre feuille.
   ========================================================= */
/* Le motif n'est plus une image de fond mais un <object> : une
   background-image ne joue pas l'animation que porte le fichier. Les
   réglages d'usage — opacité, masque, plan — restent ici, à l'extérieur ;
   le SVG lui-même n'est pas touché. */
.topo{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;z-index:0;
  pointer-events:none;   /* sans ça, l'objet capterait clics et survol */
  user-select:none;
}
/* Fond plein de la section « Ce qui ne change jamais » : les cartes crème,
   opaques, passent par-dessus sans perdre une once de lisibilité. */
.topo--plein{opacity:.38}
/* Rappel en coin : le motif naît dans un angle et s'éteint avant le texte,
   révélé par un masque radial très étalé — ni bord, ni rectangle. */
.topo--coin{
  opacity:.42;
  -webkit-mask-image:radial-gradient(135% 155% at 100% 0%,
    #000 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.38) 56%, rgba(0,0,0,.12) 74%, transparent 90%);
  mask-image:radial-gradient(135% 155% at 100% 0%,
    #000 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.38) 56%, rgba(0,0,0,.12) 74%, transparent 90%);
}
/* Le coin alterne d'une section à l'autre : le rappel ne se répète jamais
   à l'identique. */
.topo--coin-bg{
  -webkit-mask-image:radial-gradient(135% 155% at 0% 100%,
    #000 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.38) 56%, rgba(0,0,0,.12) 74%, transparent 90%);
  mask-image:radial-gradient(135% 155% at 0% 100%,
    #000 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.38) 56%, rgba(0,0,0,.12) 74%, transparent 90%);
}
.engage{position:relative;overflow:clip}
.engage .container{position:relative;z-index:1}

/* =========================================================
   TRAME EN COIN — rappel discret, réutilisable
   Même image que le fond plein, mais révélée dans le coin
   haut-droit par un masque radial très étalé : la trame naît
   du fond et y retourne, sans bord ni rectangle. Elle est au
   plus fort là où il n'y a rien, éteinte sous le texte.
   À poser en ajoutant .topo-coin sur n'importe quelle section.
   ========================================================= */
.topo-coin{position:relative;overflow:clip}
/* le contenu passe toujours au-dessus */
.topo-coin > .container,
.topo-coin > .container > *,
.topo-coin > .sticker{position:relative;z-index:1}

/* Alterne le coin d'une section à l'autre, pour que le rappel ne se répète
   pas à l'identique. */


/* =========================================================
   PRESTATIONS — une carte, un prix
   Remplace la grille à trois étages : la comparaison se fait
   entre quatre cartes, pas dans un tableau de ✓/✗.
   Mobile d'abord : une colonne, puis deux au-delà de 820 px.
   ========================================================= */
.formules{display:grid;gap:20px;grid-template-columns:1fr}
.presta{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;
}
.presta--pop{border-color:var(--spark);box-shadow:0 24px 60px -30px rgba(18,19,23,.4)}
.presta__badge{
  position:absolute;top:-12px;left:24px;z-index:1;
  background:var(--spark);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.45em 1em;border-radius:100px;
}
.presta__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.presta__ic{display:inline-grid;color:var(--spark);font-size:1.1rem}
.presta__titre{font-size:1.35rem;margin:0;flex:none;min-width:0}
.presta__duree{
  flex:none;font-family:var(--font-display);font-weight:600;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:.35em .8em;
}
.presta__desc{color:var(--ink-soft);font-size:.97rem;line-height:1.55;margin-bottom:20px}
.presta__prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.presta__prix strong{font-family:var(--font-num);font-weight:700;font-size:2.6rem;
  line-height:1;color:var(--ink);letter-spacing:-.02em}
.presta__lieu{
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.presta__inclus{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.presta__inclus li{position:relative;padding-left:26px;font-size:.95rem;color:var(--ink-soft);line-height:1.45}
.presta__inclus li::before{
  content:"";position:absolute;left:1px;top:.45em;
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--spark);background:var(--spark-soft);
  /* la 2e bulle, plus petite et pleine, posée en haut à droite */
  box-shadow:8px -4px 0 -2px var(--spark);
  transform-origin:60% 60%;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
/* Le repli de départ n'est posé que si le script tourne (la classe js est
   ajoutée en tête de page) : sans lui, personne ne viendrait le lever. */
.js .presta__inclus li::before{transform:scale(0)}
/* Le .reveal de la carte pose .is-visible en entrant dans l'écran : les puces
   se déplient alors dans l'ordre, à 60 ms d'intervalle. Une seule fois, au
   passage — aucune animation ne tourne en boucle sur la page. */
.presta.is-visible .presta__inclus li::before{transform:scale(1)}
.presta__inclus li:nth-child(1)::before{transition-delay:.06s}
.presta__inclus li:nth-child(2)::before{transition-delay:.12s}
.presta__inclus li:nth-child(3)::before{transition-delay:.18s}
.presta__inclus li:nth-child(4)::before{transition-delay:.24s}
.presta__inclus li:nth-child(5)::before{transition-delay:.30s}
.presta__inclus li:nth-child(6)::before{transition-delay:.36s}
.presta__inclus li:nth-child(7)::before{transition-delay:.42s}
.presta__inclus li:nth-child(8)::before{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .js .presta__inclus li::before{transform:scale(1);transition:none}
}
.presta__options{
  background:var(--bg-alt);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;
}
.presta__options > span{
  display:block;font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.presta__options ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.presta__options li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-soft)}
.presta__options b{flex:none;color:var(--ink);font-weight:700}
.presta__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;
  min-height:48px;border-radius:100px;
  background:var(--accent);color:var(--bg);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  text-decoration:none;transition:transform .12s ease,opacity .2s ease;
}
.presta__cta:hover{opacity:.9}
.formules__note{
  margin:32px 0 0;max-width:62ch;text-align:start;
  font-size:.88rem;line-height:1.5;color:var(--muted);text-wrap:pretty;
}
@media (min-width:820px){
  .formules{grid-template-columns:repeat(2,1fr);gap:24px}
  .presta,
  .service-card{padding:36px 32px}
  .presta__prix strong{font-size:3rem}
}

/* =========================================================
   SUPPLÉMENTS — un seul bloc pour les quatre forfaits
   Répéter les mêmes options dans chaque carte les alourdit
   et donne l'impression d'un catalogue. Ici, une liste unique
   posée sous la grille, en fond sourd.
   ========================================================= */
.supp{
  margin-top:26px;padding:24px 22px;
  background:var(--bg-tint);border-radius:var(--radius);
}
.supp__titre{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-family:var(--font-display);
}
.supp__liste{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.supp__liste li{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;
  padding-bottom:14px;border-bottom:1px solid var(--paper-line);
}
.supp__liste li:last-child{padding-bottom:0;border-bottom:0}
.supp__nom{font-weight:700;color:var(--ink);font-size:.98rem}
.supp__note{grid-column:1;font-size:.86rem;color:var(--muted);line-height:1.4}
.supp__prix{grid-column:2;grid-row:1;font-weight:700;color:var(--ink);white-space:nowrap}
/* la durée devient une phrase en bas de carte, plus une pastille */
.presta__duree{
  margin:0 0 20px;font-size:.86rem;color:var(--muted);
  border:0;padding:0;letter-spacing:normal;text-transform:none;font-weight:400;
}
.presta__titre{font-size:1.5rem;margin:0 0 8px}
@media (min-width:820px){
  .supp{padding:30px 28px}
  .supp__liste{grid-template-columns:repeat(2,1fr);gap:18px 34px}
}

/* Périmètre : ce que la prestation couvre réellement. Le nom dit la
   situation, cette ligne dit l'intérieur ou l'extérieur — sinon on ne
   sait pas ce qu'on achète. */
.presta__perimetre{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--spark);
  margin:0 0 12px;
}

/* =========================================================
   RELIEF — sortir de la feuille blanche
   Le sol a été assombri ; les cartes restent claires et
   reçoivent une ombre douce pour s'en décoller vraiment.
   Aucune couleur nouvelle : uniquement des écarts de valeur.
   ========================================================= */
.presta,
.service-card,
.engage__card,
.faq__item{box-shadow:var(--ombre-pose)}
.presta--pop{box-shadow:var(--ombre-detache)}
/* Le grain était presque invisible : on le monte d'un cran, il fait
   le plus gros du travail contre l'effet « écran ». */
body::after{opacity:.055}
@media (max-width:820px){body::after{opacity:.045}}

/* =========================================================
   PROFONDEUR — ce qui flotte doit porter une ombre
   Trois hauteurs seulement, toutes de base brune : posé,
   détaché, au-dessus. Au-delà, la page devient molle.
   ========================================================= */
:root{
  /* Trois couches par niveau : le contact, qui pose l'objet sur la page ;
     la portée, qui donne la hauteur ; la lointaine, qui installe le bloc
     dans la pièce. L'étalement négatif reste, mais assez faible pour que
     le flou serve à quelque chose. */
  --ombre-pose:
    0 6px 12px -6px rgba(74,62,44,.16),
    0 20px 32px -12px rgba(74,62,44,.30),
    0 46px 64px -24px rgba(74,62,44,.30);
  --ombre-detache:
    0 8px 16px -8px rgba(74,62,44,.18),
    0 30px 46px -14px rgba(74,62,44,.34),
    0 68px 94px -30px rgba(74,62,44,.34);
  --ombre-dessus:
    0 12px 22px -10px rgba(74,62,44,.20),
    0 44px 64px -18px rgba(74,62,44,.38),
    0 96px 136px -38px rgba(74,62,44,.38);
  /* Ombre des grands titres. Exprimée en em et non en pixels : le même jeton
     sert à 34 px sur téléphone et à 134 px sur grand écran, et le rapport
     entre la lettre et son ombre ne bouge pas. Deux couches — une serrée qui
     décolle la lettre du papier, une diffuse qui porte le bloc. */
  --ombre-titre:
    0 .035em .035em rgba(74,62,44,.24),
    0 .105em .11em  rgba(74,62,44,.36),
    0 .22em  .26em  rgba(74,62,44,.32);
}
/* La pilule du menu flotte au-dessus du contenu : sans ombre, elle
   paraissait collée au texte qui défile dessous. */
.header__inner{box-shadow:var(--ombre-detache)}
/* Le bouton sombre d'une carte : il doit sembler pressable. */
.presta__cta{box-shadow:var(--ombre-pose)}
.presta__cta:active{box-shadow:0 1px 2px rgba(74,62,44,.22)}
/* Le sélecteur de gabarit au repos */
.taille-sel select{box-shadow:0 1px 2px rgba(74,62,44,.12), 0 5px 12px -5px rgba(74,62,44,.22)}
/* La preuve par l'image mérite d'être la plus détachée de la page */
.reveal-ba{box-shadow:var(--ombre-dessus)}
/* Le bouton flottant et la modale : au-dessus de tout */
.fab{box-shadow:var(--ombre-detache)}
.bk__panel{box-shadow:var(--ombre-dessus)}

/* ==========================================================================
   ══ TYPOGRAPHIE — seul apport conservé de l'étude filmbot.com ══
   Trois choses seulement : une échelle qui occupe l'écran, un interligne
   sous 1 qui fait tenir le titre en bloc, et une monospace pour tout ce
   qui relève de la mesure. Aucune couleur, aucune animation, aucune
   structure ne change.
   ========================================================================== */
:root{
  /* Monospace système : aucun téléchargement */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* --- Le titre de section devient un bloc --- */
.section__title{
  font-size:clamp(var(--tkmin, 1.9rem), calc(var(--tk, 13.2) * 1cqw), 8.4rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-wrap:balance;
  margin-bottom:1.6rem;
}
.section__title .text-accent{font-family:inherit;font-weight:700}
.section__head{max-width:none}

/* --- Le titre se mesure sur SA colonne, pas sur l’écran ---
       Mesuré en 1440 px : la même taille de 134 px tombait dans des
       colonnes de 1120, 740, 720, 700 et 499 px. Résultat, « Vos véhicules
       de société… » partait sur 7 lignes dans 640 px et « Choisissez votre
       créneau » sur 5. On déclare donc chaque colonne comme conteneur et on
       exprime le corps en cqw : le rapport texte/colonne devient constant,
       les coupures de lignes sont les mêmes à 375 px qu’en 1440 px.
       --tk = corps en centièmes de la largeur de colonne, réglé titre par
       titre sur le remplissage de ligne mesuré à 375 px. Le plafond de
       8.4rem empêche les colonnes larges de grossir au-delà de l’existant. */
.section__head,
.pin__aside,
.contact__info,
.pro__inner{container-type:inline-size}

/* --tkmin : le plancher de 1.9rem servait de garde-fou, mais sur les deux
       titres ramenés à deux lignes il reprenait la main sous 360 px et les
       recassait en trois. Abaissé à 1.7rem pour ces deux-là : le rapport
       texte/colonne reste constant jusqu'aux plus petits écrans. */
#faq     .section__title{--tk:15.3}  /* « Les points à connaître » — 2 lignes */
#services .section__title{--tk:10.0;--tkmin:1.7rem} /* « Dites-nous où en est… » — 2 lignes */
#gallery .section__title{--tk:12.5}  /* « Avant, après… » — 2 lignes */
#process .section__title{--tk:11.9}  /* « Du premier clic… » — 3 lignes */
#reviews .section__title{--tk:8.9;--tkmin:1.5rem}   /* « Quatre choses… » — 2 lignes */
#contact .section__title{--tk:12.5}  /* « Choisissez votre créneau » — 2 lignes */
#pro     .section__title{--tk:13.1}  /* « Vos véhicules… » — 4 lignes */
.section__intro{
  font-size:clamp(1.05rem, 3.4vw, 1.45rem);
  line-height:1.45;max-width:44ch;
}

/* --- La monospace prend ce qui relève de la mesure : étiquettes,
       périmètres, durées, prix, chiffres. --- */
.section__tag,
.presta__perimetre,
.presta__duree,
.presta__lieu,
.supp__prix,
.taille-sel__note,
.formules__note,
.reveal-ba__tag{
  font-family:var(--font-mono);
  letter-spacing:.06em;
}
.presta__prix strong,
.service-card__price strong,
.bk__total strong,
.bk__live strong{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:-.03em;
}

/* ==========================================================================
   ANCRAGE — l'en-tête ne doit plus recouvrir le début des sections
   La barre collante occupe 74 px : sans marge de rattrapage, chaque clic
   du menu enterrait l'étiquette et la première ligne du titre dessous.
   ========================================================================== */
section[id]{scroll-margin-top:92px}
@media (min-width:820px){section[id]{scroll-margin-top:120px}}
/* Le héro est en pleine hauteur : il n'a rien à rattraper. */
#hero{scroll-margin-top:0}

/* --- CAPITALES ACCENTUÉES : mesuré au canvas dans Helvetica/Arial, une
       capitale nue monte à .72 em au-dessus de la ligne de base, mais un À,
       un É ou un Ù monte à .90 em. Le jeu entre deux lignes vaut donc
       (interligne − .90) : à .82 il manquait 4 px, l'accent de la ligne du
       bas cognait la ligne du dessus. .94 laisse 2 px d'air à 51 px de corps
       et reste serré. Le reste du débord (haut et bas de la boîte) est
       rendu en em, donc valable à toutes les tailles. --- */
.section__title{
  padding-top:.11em;
  padding-bottom:.15em;
  margin-bottom:24px;
  /* Le titre cesse d'être une découpe posée à plat sur le papier. */
  text-shadow:var(--ombre-titre);
}

/* =========================================================
   ALIGNEMENT DES CARTES DE PRESTATION
   Les quatre cartes n'ont ni le même nombre de lignes de titre,
   ni la même description, ni le même nombre de points inclus.
   En flex, chaque carte empilait donc ses blocs à sa hauteur :
   « Extérieur + habitacle aspiré » et son prix flottaient 24 px
   plus haut que la carte d'à côté, et les boutons se décalaient.

   Correctif : les huit blocs de la carte ne sont plus empilés
   dans la carte, ils sont posés sur les rangées de la grille des
   formules (subgrid). Titre, périmètre, description, prix, gabarit,
   liste, durée et bouton partagent donc la même rangée d'une carte à
   l'autre — la rangée prend la hauteur du plus grand, les autres
   s'y rangent. Aucune hauteur n'est écrite en dur : si un texte
   change dans le portail, l'alignement suit.

   row-gap:0 est indispensable — sans lui, la carte hériterait de
   l'écart de 24 px de la grille parente entre chacun de ses huit
   blocs. L'écart entre les deux rangées de cartes, lui, reste
   celui de la grille parente.
   ========================================================= */
@media (min-width:820px){
  @supports (grid-template-rows:subgrid){
    .presta{
      display:grid;
      grid-template-rows:subgrid;
      grid-row:span 8;
      row-gap:0;
    }
    /* Les marges basses des blocs servent déjà d'espacement interne. */
    .presta > *{min-width:0}
    /* Le bouton occupe la dernière rangée : il touche le bas de la
       carte sans avoir besoin de margin-top:auto. */
    .presta__cta{margin-top:0;align-self:end}
  }
}

/* Même traitement pour les deux cartes « sur devis » : icône, titre,
   description, liste, prix et bouton se posent sur les mêmes rangées.
   Le prix y était déjà au même niveau (margin-top:auto), mais les
   descriptions et les listes, elles, se décalaient de 36 px. */
@media (min-width:761px){
  @supports (grid-template-rows:subgrid){
    .service-card{
      display:grid;
      grid-template-rows:subgrid;
      grid-row:span 5;
      row-gap:0;
    }
    .service-card__price{margin-top:0;align-self:end}
    /* On ne remet PAS la marge du bouton à zéro : c'est elle qui sépare
       « Sur devis » de la pastille. Sans elle, la subgrid les collait. */
    .service-card__cta{align-self:end}
  }
}

/* Une grille masquée doit vraiment disparaître : display:grid l'emporte sur
   l'attribut hidden, sinon un groupe « sur devis » vidé depuis le portail
   laisserait une bande vide sous son sous-titre. */
.services__grid[hidden]{display:none}

/* =========================================================
   RENVOI INSTAGRAM — une pastille, pas une case
   Trois essais : la bannière et la tuile faisaient une grosse
   case pour dire une phrase courte ; la ligne nue, elle, ne se
   voyait plus. Réglage final : la forme et la hauteur d'un
   bouton du site, mais en contour teal sur fond de page — donc
   large de son texte seulement, haute de 50 px, et impossible
   à manquer. Elle se remplit au survol.
   ========================================================= */
.insta-ligne{
  display:flex;width:fit-content;max-width:100%;
  align-items:center;justify-content:center;gap:11px;
  margin:32px 0 0;padding:0 26px;min-height:50px;
  border:1.5px solid var(--spark);border-radius:100px;
  background:var(--white);color:var(--spark);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  text-decoration:none;
  box-shadow:var(--ombre-pose);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.insta-ligne:hover{background:var(--spark);color:var(--white)}
.insta-ligne__ic{flex:none;width:22px;height:22px}
.insta-ligne__ic svg{width:100%;height:100%}
/* Sous 400 px la phrase passe sur deux lignes : balance coupe avant « sur »
   plutôt qu'après, et les deux lignes font la même longueur. */
.insta-ligne__txt{min-width:0;text-wrap:balance}
/* le nom du compte garde la monospace des mesures du site */
.insta-ligne__nom{font-family:var(--font-mono);font-weight:600;letter-spacing:.03em}
.insta-ligne__fleche{flex:none;font-size:1.15rem;transition:transform .3s var(--ease)}
.insta-ligne:hover .insta-ligne__fleche{transform:translateX(5px)}
@media (max-width:480px){
  .insta-ligne{font-size:.93rem;gap:9px;padding:0 20px}
  .insta-ligne__ic{width:20px;height:20px}
}

/* =========================================================
   LE TITRE GÉANT DU PIED DE PAGE TIENT LA LARGEUR EXACTE
   Il était réglé en 26vw : à 1280 px, « DETAIL'ART » mesurait
   1847 px dans une boîte de 1270, donc 577 px partaient hors
   champ, rognés par overflow:hidden — le D et le T étaient
   coupés. Et en dessous de 820 px, une seconde règle le
   ramenait à 15vw, où il flottait au milieu avec du vide de
   chaque côté.

   Mesuré au navigateur : dans cette graisse et ce crénage, la
   largeur du mot vaut TOUJOURS 5,5496 × le corps, quelle que
   soit la taille (vérifié à 80, 160, 240 et 320 px — le
   crénage est en em, donc le rapport ne bouge pas). Le corps
   qui remplit exactement la largeur vaut donc 100 / 5,5496 =
   18,02 cqw. On prend 18,01 pour garder un cheveu de marge et
   ne jamais déclencher le rognage.

   En cqw et non en vw : vw compte la barre de défilement, ce
   qui aurait fait déborder de 10 à 17 px selon le navigateur.
   ========================================================= */
.footer{container-type:inline-size}
.footer__giant{font-size:18.01cqw}
/* Navigateur sans requêtes de conteneur : on retombe sur l'ancien réglage,
   sûr parce qu'il laisse de la marge, au prix d'un titre plus petit. */
@supports not (container-type:inline-size){
  .footer__giant{font-size:clamp(2.6rem,17vw,22rem)}
}

/* =========================================================
   TOUT EST CENTRÉ
   L'axe unique construit à gauche est repris sur l'axe du
   milieu : mêmes règles, même gamme d'espacement, seul le
   point d'ancrage change. Déclaré en fin de feuille pour
   l'emporter sur les alignements posés plus haut, section
   par section.

   Ce qui NE se centre pas, volontairement :
   — le texte À L'INTÉRIEUR des cartes de prix et des cartes
     sur devis. Une liste à puces centrée n'a pas de bord pour
     accrocher l'œil et devient illisible ; les cartes, elles,
     sont centrées en tant que blocs.
   — les questions de la FAQ, pour la même raison. Le bloc de
     questions est centré, leur texte reste calé à gauche.
   — les colonnes du pied de page, qui sont une grille de
     listes et non un bloc de texte.
   ========================================================= */
.section__head{margin-inline:auto;text-align:center}
.section__intro{margin-inline:auto}
.services__subhead{text-align:center}
.taille-sel{margin-inline:auto;text-align:center;align-items:center}
.formules__note{margin-inline:auto;text-align:center}
.ba-grid{margin-inline:auto}
.gallery__note{text-align:center}
.insta-ligne{margin-inline:auto}
.engage__note{margin-inline:auto;text-align:center}
.faq__list{margin-inline:auto}
.pro__inner{text-align:center}
.pro__lead{margin-inline:auto}
@media (min-width:821px){
  /* la colonne de la Méthode revient au milieu de la page */
  .pin__inner{justify-content:center}
  .pin__aside{text-align:center}
}

/* =========================================================
   BULLES DE SAVON — comparateur et envoi de la demande
   Créées par js/main.js, retirées d'elles-mêmes à la fin de
   leur montée. Elles n'animent que transform et opacity :
   c'est la carte graphique qui travaille, jamais la mise en
   page. L'ombre portée les garde visibles sur la moitié
   claire de la photo, où du blanc sur blanc disparaîtrait.
   ========================================================= */
.bulle{
  position:absolute;pointer-events:none;
  width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);
  z-index:2;                      /* derrière le trait (3) et les étiquettes (4) */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38));
  animation:bulleMonte var(--t) cubic-bezier(.34,.1,.5,1) forwards;
  will-change:transform,opacity;
}
.bulle svg{width:100%;height:100%;display:block}
/* Elle naît minuscule, monte en dérivant, puis éclate : un dernier
   agrandissement bref pendant que l'opacité tombe à zéro. */
@keyframes bulleMonte{
  0%  {transform:translate(0,0) scale(.3);opacity:0}
  10% {opacity:1}
  72% {opacity:1}
  90% {transform:translate(var(--dx), calc(var(--h) * -1)) scale(1);opacity:.85}
  100%{transform:translate(var(--dx), calc(var(--h) * -1.05)) scale(1.55);opacity:0}
}
/* Le formulaire contient sa volée : sans ça les bulles sortiraient
   par le haut du cadre et flotteraient au-dessus de la page. */
.contact__form{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .bulle{display:none}
}

/* =========================================================
   LISIBILITÉ SUR MOTIF
   Trois paragraphes sont posés à même le fond, sans carte
   opaque pour les protéger : l’accroche de la FAQ, la note des
   engagements, le texte d’Entreprises. En gris doux ils
   plafonnaient le motif à 48 % d’opacité ; en encre pleine ils
   tiennent encore 7:1 à 62 %. C’est ce seul changement qui a
   permis de rendre le fond franchement plus visible.
   Les textes dans les cartes, eux, ne changent pas : leurs cartes
   sont opaques, le motif ne passe jamais dessous.
   ========================================================= */
#faq .section__intro,
#reviews .engage__note,
#pro .pro__lead{color:var(--ink)}

/* =========================================================
   CONTRASTE ENTRE LES COUCHES
   Monter l’opacité rendait la section plus GRISE sans séparer
   les couches davantage : la rampe du fichier garde le même pas,
   on la voyait juste plus fort, uniformément.

   filter:contrast écarte les valeurs de part et d’autre du gris
   moyen : les bandes claires remontent vers le blanc, les sombres
   descendent. L’écart entre deux couches voisines passe d’environ
   11 à 19 unités, sans que la surface générale s’assombrisse —
   la majorité de la rampe est au-dessus du gris moyen, donc elle
   s’éclaircit.

   Le filtre s’applique AVANT l’opacité, qui reprend ses valeurs
   d’origine. Le fichier lui-même n’est pas retouché.
   ========================================================= */
.topo{filter:contrast(1.75)}

/* =========================================================
   PRESTATION PAS ENCORE PROPOSÉE
   Le bouton cesse d'être un bouton : ce n'est plus un lien mais
   un <span>, donc ni cliquable, ni atteignable au clavier. Ici
   on lui retire aussi ce qui le faisait ressembler à une cible —
   l'aplat blanc, l'ombre, le mouvement au survol — et il ne
   garde que son contour. Le visiteur comprend qu'il y a quelque
   chose là, et qu'il ne sert à rien d'appuyer.
   ========================================================= */
.service-card__cta--inerte{
  background:transparent;
  color:rgba(255,255,255,.72);
  border:1.5px solid rgba(255,255,255,.3);
  box-shadow:none;
  cursor:default;
  font-weight:600;
  letter-spacing:.02em;
}
.service-card__cta--inerte:hover{
  transform:none;box-shadow:none;gap:8px;   /* rien ne bouge : il n'y a rien à attendre */
  background:transparent;color:rgba(255,255,255,.72);
}

/* L'adresse du pied de page n'est pas un lien : elle se présente comme les
   autres lignes de la colonne Contact, sans en promettre le comportement. */
.footer__col span{display:block;color:#9aa0aa;padding:6px 0;font-size:.94rem}

/* =========================================================
   TEINTE DE L’ONDE SUR LES BOUTONS AJOUTÉS
   L’onde doit contraster avec le fond du bouton, pas avec la
   page. « Demander ce forfait » est un aplat sombre : onde
   claire, la valeur par défaut. « Demander un devis » est une
   pastille blanche sur carte sombre, et la pastille Instagram
   est claire à contour pétrole : les deux réclament une onde
   foncée, sinon elle est invisible.
   ========================================================= */
.service-card__cta .tap-bulle{--bulle:9,20,23}
.insta-ligne .tap-bulle{--bulle:24,88,224}


/* =========================================================
   IDÉE 3 — LES TRACES D'ASPIRATEUR
   Sous la grille des tarifs, des bandes parallèles très
   douces : la trace que laisse la brosse d'un aspirateur sur
   une moquette. Rien de plus qu'un dégradé répété, donc zéro
   octet ajouté et zéro calcul au scroll. Le voile vertical
   l'efface en haut et en bas pour qu'aucune bande ne vienne
   buter sur la frontière de section.
   ========================================================= */
.services{position:relative;isolation:isolate}
.services::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-12deg,
    rgba(74,62,44,0)    0px,
    rgba(74,62,44,.050) 15px,
    rgba(74,62,44,.050) 35px,
    rgba(74,62,44,0)    50px,
    rgba(74,62,44,0)    64px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
}
.services > .container{position:relative;z-index:1}


/* =========================================================
   IDÉE 4 — L'ESSUYAGE QUI RÉVÈLE
   « Avant, après » n'apparaît pas : on l'essuie. Un voile
   couleur page part vers la droite, précédé d'un fin trait
   clair — la raclette. Uniquement du transform, donc rien à
   repeindre pendant l'animation.

   La fenêtre est une boîte posée PAR-DESSUS le titre, pas
   autour : le texte et son ombre ne sont jamais rognés. Le
   voile part hors champ par défaut — sans JS, le titre est
   simplement là.
   ========================================================= */
.essuyage{position:relative}
.essuyage.est-armee{text-shadow:none}   /* l'ombre ne doit pas dépasser du voile */
.essuyage__fenetre{
  position:absolute;inset:-.10em -.34em;display:block;
  overflow:hidden;pointer-events:none;z-index:3;
}
.essuyage__voile{
  position:absolute;top:-40%;bottom:-40%;left:-8%;right:-10%;display:block;
  transform:skewX(-9deg) translateX(118%);
  background:
    linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.9) .05em,rgba(255,255,255,0) .40em),
    linear-gradient(90deg,transparent 0,var(--voile,var(--bg)) .26em,var(--voile,var(--bg)) 100%);
  will-change:transform;
}
.essuyage.est-armee .essuyage__voile{transform:skewX(-9deg) translateX(0)}
@keyframes essuie{
  from{transform:skewX(-9deg) translateX(0)}
  to  {transform:skewX(-9deg) translateX(118%)}
}
.essuyage.est-essuyee .essuyage__voile{
  animation:essuie 1s cubic-bezier(.32,.06,.18,1) .18s forwards;
}
@media (prefers-reduced-motion:reduce){ .essuyage__fenetre{display:none} }

/* =========================================================
   L'ÉCLAT DE BULLES SUR LES PUCES DE TARIF
   Choisir un forfait est LE geste de cette page : il méritait
   mieux qu'une onde. Les bulles partent du point touché,
   s'écartent en éventail vers le haut — une bulle ne tombe
   pas — et éclatent en grossissant.

   Deux réglages qui ne vont pas de soi. Elles sont posées sur
   la CARTE et non sur le bouton : le bouton porte un
   overflow:hidden pour contenir l'onde, il les aurait rognées
   net au premier pixel. Et elles ont leur propre dessin, à
   l'encre : la bulle blanche du comparateur est faite pour une
   photo sombre, sur une carte crème elle est invisible.
   ========================================================= */
@keyframes bulleEclat{
  0%  {transform:translate(0,0) scale(.25);opacity:0}
  14% {opacity:1}
  68% {opacity:1}
  100%{transform:translate(var(--ex),var(--ey)) scale(1.35);opacity:0}
}
.bulle--eclat{
  animation-name:bulleEclat;
  animation-timing-function:cubic-bezier(.14,.7,.34,1);
  margin-top:calc(var(--d) / -2);   /* centrée sur le doigt, pas posée dessous */
}

/* =========================================================
   LES RACCORDS DE SECTION
   Deux sections de teintes différentes se rencontraient sur
   un trait droit, parfaitement net, en plein milieu de la
   trame topographique. La réponse tient en deux gestes :

   1. la trame s'éteint AVANT le bord de sa section — il n'y
      a donc plus de motif à couper net ;
   2. la section du dessous démarre avec la teinte de celle
      du dessus et la dissout sur quelques centaines de
      pixels.

   Le dégradé est posé dans le FOND de la section, pas dans
   un ::before en surimpression : tout le contenu reste au-
   dessus sans un seul z-index, et rien ne se retrouve voilé.
   La dernière couche du raccourci `background` porte la
   couleur de fond, qui reprend la main passé le dégradé.
   ========================================================= */
.topo--plein{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.48) 89%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.48) 89%,transparent 100%);
}
/* sous la FAQ (ecru) */
.services{background:linear-gradient(180deg,var(--bg-alt) 0,var(--bg) 260px) no-repeat,var(--bg)}
/* sous « Ce qui ne change jamais » (le plus marqué : 18 valeurs d'écart) */
.contact{background:linear-gradient(180deg,var(--bg-tint) 0,var(--bg) 320px) no-repeat,var(--bg)}
/* sous la prise de rendez-vous ; le filet de 1 px disparaît avec */
.pro{background:linear-gradient(180deg,var(--bg) 0,var(--paper) 240px) no-repeat,var(--paper);border-top:0}

/* =========================================================
   LE COIN DOIT MOURIR AVANT LE BORD
   La trame en coin gardait encore 10 % de force sur le bord
   opposé de sa section : coupée net par la section suivante,
   c'est elle qui redessinait le trait que le raccord venait
   d'effacer. Le masque radial s'éteint donc AVANT d'atteindre
   ce bord.

   Les arrêts gardent exactement les proportions d'origine
   (0 / 28 / 56 / 74 / 90) ramenées à 64 %, et le rayon monte
   de 135 % à 165 % pour compenser : la tache garde son
   étalement horizontal et tombe pile à zéro sur le bord bas.
   Deux masques superposés auraient été plus simples, mais
   mask-composite reste mal tenu par Safari.
   ========================================================= */
.topo--coin{
  -webkit-mask-image:radial-gradient(165% 155% at 100% 0%,
    #000 0%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.12) 53%, transparent 64%);
          mask-image:radial-gradient(165% 155% at 100% 0%,
    #000 0%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.12) 53%, transparent 64%);
}
.topo--coin-bg{
  -webkit-mask-image:radial-gradient(165% 155% at 0% 100%,
    #000 0%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.12) 53%, transparent 64%);
          mask-image:radial-gradient(165% 155% at 0% 100%,
    #000 0%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.12) 53%, transparent 64%);
}

/* =========================================================
   LA MOUSSE DU PANNEAU DE RÉSERVATION
   L'éclat de bulles ne part plus de la pastille cliquée : il
   accueille le visiteur DANS l'assistant, au moment où celui-
   ci apparaît. Cette couche existe pour ça et rien d'autre —
   elle ne capte aucun clic, et son overflow retient les bulles
   à l'intérieur des coins arrondis du panneau.
   ========================================================= */
.bk__mousse{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;overflow:clip;border-radius:inherit;
}
@media (prefers-reduced-motion:reduce){ .bk__mousse{display:none} }

/* =========================================================
   L'ANCRE « AU-DELÀ DE LA VOITURE »
   Camping-cars, caravanes et mobilier vivent au bas de la
   section des tarifs, là où personne ne descend. Le menu y
   mène directement.

   scroll-margin-top n'était posé que sur les sections : la
   cible est ici un sous-titre, il lui faut le sien, un peu
   plus généreux pour que le titre ne soit pas collé sous la
   barre de navigation.
   ========================================================= */
#autres{scroll-margin-top:110px}
@media (min-width:820px){ #autres{scroll-margin-top:140px} }

/* Une entrée de menu ne se coupe jamais en deux : à 900 px, « Camping-cars
   & sofas » se pliait en trois lignes et faisait grossir la pilule d'autant. */
.nav__link{white-space:nowrap}

/* Entre la bascule vers le menu mobile et les grands écrans, la barre porte
   sept entrées au lieu de six : elle se resserre un peu plutôt que de pousser
   « Réserver » hors de la pilule. */
@media (min-width:821px) and (max-width:1160px){
  .nav__list{gap:18px}
  .nav__link{font-size:.88rem;padding-left:2px;padding-right:2px}
}


/* =========================================================
   LA SECTION DES TARIFS PASSE AU SOMBRE
   Toute la page tenait dans neuf valeurs de crème. Plutôt
   qu'un palier de gris clair de plus, c'est le gris foncé de
   la maison — celui du héros et des titres — qui prend la
   section la plus importante du site. Les quatre cartes de
   prix, elles, restent crème : elles ressortent enfin.

   ⚠️ On N'AJOUTE PAS .services au bloc d'inversion des fonds
   sombres : celui-ci force --accent à #ffffff, or les cartes
   « sur devis » se peignent avec `linear-gradient(var(--accent),
   var(--accent-d))` et deviendraient blanches, et la pastille
   « Demander ce forfait » aussi. Seuls --spark (le mot en
   couleur du titre) et l'ombre des titres basculent.
   ========================================================= */
.services{
  background:var(--bg-dark);
  color:#fff;
  --spark:#1858E0;
  --spark-soft:rgba(24,88,224,.15);
  --ombre-titre:
    0 .035em .04em rgba(0,0,0,.42),
    0 .105em .13em rgba(0,0,0,.58),
    0 .24em  .30em rgba(0,0,0,.58);
}
/* Les cartes de prix sont claires : leur texte reprend l'encre de la page,
   sinon il hériterait du blanc de la section et disparaîtrait. */
.services .presta{color:var(--ink)}

/* Les traces d'aspirateur : mêmes bandes, mêmes angles, en clair. */
.services::before{
  background:repeating-linear-gradient(-12deg,
    rgba(255,255,255,0)    0px,
    rgba(255,255,255,.055) 15px,
    rgba(255,255,255,.055) 35px,
    rgba(255,255,255,0)    50px,
    rgba(255,255,255,0)    64px);
}

/* Textes posés directement sur le sombre */
.services .section__tag{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.services .section__intro{color:rgba(255,255,255,.78)}
.services .services__subhead{color:rgba(255,255,255,.74);border-top-color:rgba(255,255,255,.14)}
.services .formules__note{color:rgba(255,255,255,.62)}
.services .taille-sel__line label,
.services .taille-sel__note{color:rgba(255,255,255,.62)}
.services .taille-sel select{
  color:#fff;background-color:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Le bloc des suppléments était un aplat beige : il crevait le fond. */
.services .supp{background:rgba(255,255,255,.055)}
.services .supp__titre{color:rgba(255,255,255,.6)}
.services .supp__liste li{border-bottom-color:rgba(255,255,255,.13)}
.services .supp__nom,
.services .supp__prix{color:#fff}
.services .supp__note{color:rgba(255,255,255,.64)}

/* Les cartes « sur devis » sont sombres elles aussi : sur un fond sombre,
   leurs ombres chaudes ne portent plus rien. On les décolle en les
   éclaircissant d'un cran et en rendant leur bordure visible. */
.services .service-card:nth-child(4n+1),
.services .service-card:nth-child(4n+4){background:linear-gradient(158deg,#2f3540,#2a2e37)}
.services .service-card:nth-child(4n+2),
.services .service-card:nth-child(4n+3){background:linear-gradient(158deg,#262a33,#20232a)}
.services .service-card{border-color:rgba(255,255,255,.13)}

/* Le filet de 1 px sous les réalisations reste supprimé : il était crème
   contre le sombre de la Méthode, et se voyait comme une couture. */
.gallery{border-bottom:0}

/* =========================================================
   LES TROIS CANAUX DE LA DERNIÈRE ÉTAPE
   Aucun créneau n'est publié : il n'y a donc rien à réserver,
   seulement une demande à faire parvenir. Choisir le canal EST
   l'action — le bouton du pied se retire à cette étape, sinon
   deux boutons se disputeraient le même geste.

   Les boutons restent monochromes malgré la tentation du vert
   WhatsApp : la charte n'a aucune couleur d'accent, et un seul
   aplat vert au fond du tunnel casserait tout le reste.
   ========================================================= */
.bk__routes{margin:20px 0 4px;display:grid;gap:10px}
.bk__routes__t{margin:0 0 2px;color:#9aa1ad;font-size:.94rem}
.bk__route{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;text-align:start;padding:14px 18px;min-height:56px;
  border-radius:14px;border:0;cursor:pointer;
  background:#fff;color:#12151b;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  transition:opacity .2s ease,transform .12s ease,border-color .2s ease;
}
.bk__route__d{font-weight:500;font-size:.86rem;opacity:.68;line-height:1.35}
.bk__route:active{transform:translateY(1px)}
.bk__route:disabled{opacity:.45;cursor:not-allowed}
.bk__route--sec{background:transparent;color:#e9ebf0;border:1.5px solid #333846}
.bk__route--sec:hover{border-color:#4a5162}
/* onde de clic : foncée sur la pastille blanche, claire sur les contours */
.bk__route .tap-bulle{--bulle:9,20,23}
.bk__route--sec .tap-bulle{--bulle:255,255,255}

/* =========================================================
   « À PARTIR DE » AU-DESSUS DU PRIX
   Le gabarit et les suppléments font bouger le montant, et
   les poils d'animaux sont désormais chiffrés au devis : un
   nombre nu se lirait comme un prix ferme. La mention passe
   au-dessus du chiffre, pas à côté — flex-basis:100% la met
   seule sur sa ligne sans toucher à la ligne de base du prix.

   Elle est sur les quatre cartes, donc la zone de prix grandit
   d'autant partout : l'alignement en subgrid tient sans rien
   changer.
   ========================================================= */
.presta__des{
  flex:0 0 100%;margin:0 0 5px;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* =========================================================
   LE BANDEAU DE LA FORMULE PHARE, SUR SECTION SOMBRE
   La section des tarifs bascule --spark en bleu clair pour le
   mot en couleur du titre. Le bandeau, lui, se peint AVEC
   --spark et écrit en blanc dessus : blanc sur bleu clair,
   1,95:1, illisible. Le fond garde la couleur — c'est le seul
   accent de la page — et c'est le texte qui passe au foncé.

   Le liseré de la carte phare, lui, fait l'inverse : il court
   sur un aplat crème, où le bleu clair ne se voit pas. Il
   reprend donc le pétrole des fonds clairs.
   ========================================================= */
.services .presta__badge{color:#fff}          /* 5,98:1 sur #1858E0 */
.services .presta--pop{border-color:#1858E0}     /* bleu du logo, visible sur la carte crème */

/* =========================================================
   LES POLICES DU SITE, EMBARQUÉES
   Jusqu'ici tout était en police système : « Helvetica Neue,
   Helvetica, Arial ». Résultat, la page ne s'affichait pas
   pareil sur deux appareils — Helvetica Neue sur iPhone,
   Arial sur Windows et Android, et pour les chasses fixes
   Consolas ici, autre chose ailleurs. Les prix et les numéros
   de la section Méthode, dessinés en contour, rendaient
   l'écart évident.

   Deux fichiers réglent ça définitivement :

   • Arimo remplace la grotesque. Elle est **métriquement
     compatible avec Arial** : mêmes chasses, mêmes approches.
     Aucune ligne ne se recoupe ailleurs, aucun titre ne change
     de nombre de lignes — ce qui compte, vu que les tailles de
     titre sont réglées section par section (--tk).
   • Inconsolata remplace la chasse fixe. Elle a été dessinée
     comme alternative libre à Consolas, celle que Windows
     servait jusqu'ici.

   Les deux sont des fontes variables : un seul fichier couvre
   les graisses 400 à 700. Les variantes latin-ext ne sont
   téléchargées que si un caractère les réclame — jamais en
   français. Coût réel pour un visiteur belge : 128 Ko, une
   fois, puis un an de cache.

   font-display:swap — le texte s'affiche tout de suite dans
   Arial, puis bascule. Comme Arimo a les métriques d'Arial,
   la bascule ne décale rien.
   ========================================================= */
@font-face{font-family:'Arimo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../assets/fonts/arimo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../assets/fonts/arimo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inconsolata';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../assets/fonts/inconsolata-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inconsolata';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../assets/fonts/inconsolata-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Les replis restent : si les fichiers ne partent pas, la page garde
   exactement l'allure qu'elle a aujourd'hui. */
:root{
  --font-title:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-script:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-num:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Inconsolata',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}

/* =========================================================
   DEUX GROUPES DANS LA SECTION DES TARIFS
   Les quatre cartes se suivaient : 75 → 120 → 210 → 275. On y
   lisait une échelle à quatre marches, alors que les textiles
   n'en sont pas une — ils se prennent à part, et le rattrapage
   les contient déjà. La grille affirmait l'inverse de ce que
   dit le contenu.

   Trois lavages qui se contiennent, puis ce qui se prend à la
   carte. Le premier sous-titre se passe de filet : il ouvre la
   section, il ne la coupe pas en deux.
   ========================================================= */
.services__subhead--premier{border-top:0;padding-top:0;margin-top:clamp(36px,5vw,48px)}

/* Trois lavages côte à côte : la progression se lit de gauche à droite.
   En dessous de 1100 px la troisième carte serait trop étroite pour son
   prix, on retombe sur deux colonnes. */
@media (min-width:1100px){
  .formules--lavage{grid-template-columns:repeat(3,1fr)}
}

/* La zone d’intervention est le seul item du bloc contact qui ne soit
   pas un lien : sans cette regle elle heritait du gris de <strong> et
   paraissait desactivee a cote des autres. */
.contact__details #zone{color:var(--ink);font-weight:500}

/* =========================================================
   BULLES ET ETINCELLES  —  le motif de la carte, en rappel
   L'etincelle est celle du .ai, sans redessin : ses deux
   sous-traces servent ici de masque, ce qui permet de la
   colorer et de la rendre transparente sans toucher au dessin.

   Elle ne meuble plus le fond : elle n'apparait qu'au moment ou
   le visiteur agit — un appui sur un bouton, l’ouverture du
   panneau de demande. Une marque qui se montre quand on la
   sollicite se remarque plus qu’une marque posee en decor.

   position:fixed : les etincelles doivent pouvoir sortir du
   bouton, qui est souvent en overflow:hidden. Elles sont hors
   du flux, hors du clavier, hors des lecteurs d’ecran.
   ========================================================= */
.etincelle-clic{
  position:fixed;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  background:#205FB3;opacity:0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.06 20.73C17.37 18.75 18.92 17.25 20.8 15.99 18.86 14.72 17.33 13.17 16.05 11.25 14.78 13.17 13.3 14.68 11.33 15.99 13.23 17.27 14.75 18.79 16.06 20.73ZM31.93 15.11 31.93 16.9C31.4 17.98 30.47 18.55 29.25 18.57 23.29 18.67 18.6 23.57 18.6 29.48 18.6 30.94 17.35 32 15.99 31.97 14.67 31.94 13.51 30.88 13.51 29.48 13.5 23.44 8.66 18.56 2.61 18.55 1.17 18.54.08 17.37.08 16 .07 14.63 1.17 13.45 2.61 13.45 8.65 13.43 13.5 8.56 13.51 2.52 13.51 1.09 14.72 0 16.09.02 17.41.04 18.6 1.1 18.6 2.51 18.6 8.48 23.38 13.38 29.36 13.43 30.54 13.44 31.42 14.08 31.93 15.11Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.06 20.73C17.37 18.75 18.92 17.25 20.8 15.99 18.86 14.72 17.33 13.17 16.05 11.25 14.78 13.17 13.3 14.68 11.33 15.99 13.23 17.27 14.75 18.79 16.06 20.73ZM31.93 15.11 31.93 16.9C31.4 17.98 30.47 18.55 29.25 18.57 23.29 18.67 18.6 23.57 18.6 29.48 18.6 30.94 17.35 32 15.99 31.97 14.67 31.94 13.51 30.88 13.51 29.48 13.5 23.44 8.66 18.56 2.61 18.55 1.17 18.54.08 17.37.08 16 .07 14.63 1.17 13.45 2.61 13.45 8.65 13.43 13.5 8.56 13.51 2.52 13.51 1.09 14.72 0 16.09.02 17.41.04 18.6 1.1 18.6 2.51 18.6 8.48 23.38 13.38 29.36 13.43 30.54 13.44 31.42 14.08 31.93 15.11Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  pointer-events:none;z-index:9999;
  animation:etincelleClic .72s cubic-bezier(.2,.7,.3,1) forwards;
}
/* Sur fond sombre le bleu du logo s’eteint : on passe au bleu clair. */
.etincelle-clic--clair{background:#7FB6F0}
@keyframes etincelleClic{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-25deg);opacity:0}
  22%{opacity:var(--o,.6)}
  100%{transform:translate(calc(-50% + var(--ex)),calc(-50% + var(--ey))) scale(1) rotate(35deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .etincelle-clic{display:none}
}

/* =========================================================
   LE GABARIT, ANNONCE SUR LA CARTE
   Une phrase et non un tableau : a 375 px, quatre colonnes se
   tassent en quatre colonnes de deux mots. La taille de base
   est en gras parce que c est elle qui correspond au prix
   affiche juste au-dessus ; le reste est un ecart.
   ========================================================= */
.presta__gab{
  margin:-4px 0 14px;font-size:.78rem;line-height:1.55;
  color:var(--muted);
}
.presta__gab strong{font-weight:600;color:var(--ink-soft)}

/* =========================================================
   « UNE DEMANDE SPECIALE ? »
   Volontairement differente des cartes de formule : pas de
   fond creme, pas de prix, pas de liste. Elle ne se compare
   pas aux forfaits, elle ramasse ce qui en sort.
   ========================================================= */
.special{
  margin-top:clamp(30px,4.5vw,46px);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(20px,3vw,34px);
  padding:clamp(22px,3.2vw,30px) clamp(22px,3.2vw,32px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  background:rgba(255,255,255,.04);
}
.special__txt{flex:1 1 300px;min-width:0}
.special__t{font-family:var(--font-display);font-size:1.16rem;margin:0 0 6px}
.special__d{margin:0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.74);max-width:58ch}
.special__cta{flex:0 0 auto}
@media (max-width:560px){
  .special__cta{flex:1 1 100%;text-align:center}
}

/* =========================================================
   CARTES DE FORMULE — VERSION TELEPHONE
   On resserre les marges : la densite d un telephone n est pas
   celle d un ecran large, ou les cartes sont cote a cote.
   ========================================================= */
@media (max-width:819px){
  .formules{gap:16px}
  .presta{padding:20px 18px;cursor:pointer}
  .presta.is-ouvert{cursor:default}
  .presta__inclus{margin-bottom:14px;gap:7px}

  /* Fermee, la carte montre ce qui sert a choisir : ce que c est, pour
     quel perimetre, a quel prix, pour combien de temps. Le reste attend. */
  .presta__titre{order:1}
  .presta__perimetre{order:2}
  .presta__prix{order:3;margin-bottom:6px}
  .presta__duree{order:4;margin:0}
  .presta__desc{order:5;margin-top:14px}
  .presta__gab{order:6}
  .presta__inclus{order:7}
  .presta__cta{order:8}
  .presta__voir{order:9}

  .presta:not(.is-ouvert) .presta__desc,
  .presta:not(.is-ouvert) .presta__gab,
  .presta:not(.is-ouvert) .presta__inclus,
  .presta:not(.is-ouvert) .presta__cta{display:none}

  .presta__voir{
    margin:14px 0 0;padding:10px 0 0;width:100%;
    background:none;border:0;border-top:1px solid var(--line);
    text-align:left;cursor:pointer;
    font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--spark);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  /* Le chevron tourne : c est lui qui dit si la carte est ouverte, sans
     que le libelle ait besoin de crier. */
  .presta__voir::after{
    content:"";width:8px;height:8px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    rotate:45deg;translate:0 -2px;transition:rotate .3s var(--ease)
  }
  .presta.is-ouvert .presta__voir::after{rotate:-135deg;translate:0 2px}
  .presta__voir:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
}
/* Sur grand ecran la carte est entiere. display:none et non visibility :
   un bouton seulement invisible resterait une rangee de la sous-grille et
   decalerait toutes les cartes entre elles. */
@media (min-width:820px){
  .presta__voir{display:none}
}

/* =========================================================
   LES OPTIONS DES MENUS NATIFS
   La liste deroulante d un <select> est dessinee par le systeme,
   pas par la page : elle ignore le fond sombre de la section des
   tarifs. Les options y heritaient du blanc du select, et le
   systeme ouvrait la liste sur un fond clair — blanc sur blanc,
   on ne lisait plus rien. On leur donne donc leurs propres
   couleurs, independantes du contexte.
   ========================================================= */
select option{color:#12151b;background:#fff}