/* =========================================================================
   Distriserv Piscines — styles.css
   Source de vérité du design. Tokens en haut, puis base, layout, composants.
   ========================================================================= */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2");}

/* ---------- Tokens ---------- */
:root{
  --accent:#2371de;
  --accent-dark:#1a58bd;
  --accent-soft:#eaf1fd;
  --navy:#0f172a;
  --navy-2:#1e293b;
  --bg-soft:#f5f7f8;
  --white:#ffffff;
  --text:#333333;
  --muted:#64748b;
  --line:#e6eaee;
  --green:#22c55e;
  --gold:#f0ad4e;

  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);

  --container:1180px;
  --gutter:clamp(18px,4vw,40px);

  --grad-accent:linear-gradient(135deg,#2371de 0%,#1a58bd 100%);
  --grad-hero:linear-gradient(120deg,rgba(15,23,42,.82) 0%,rgba(15,23,42,.55) 45%,rgba(35,113,222,.45) 100%);
}

/* ---------- Reset léger ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);color:var(--text);line-height:1.65;
  font-size:clamp(15px,1.05vw,17px);background:var(--bg-soft);-webkit-font-smoothing:antialiased;}
body.bg-soft{background:var(--bg-soft);}
img{max-width:100%;height:auto;display:block;}
picture{display:contents;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.15;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(56px,8vw,110px);}
.section--white{background:transparent;}
.section--pale{background:var(--white);}
.section--deep{background:var(--navy);color:#e2e8f0;}
.section--deep h1,.section--deep h2,.section--deep h3{color:#fff;}
.center{text-align:center;}
.stack-lg{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);}

.eyebrow{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:.4rem .9rem;border-radius:999px;margin-bottom:1rem;}
.section--deep .eyebrow{background:rgba(35,113,222,.2);color:#93b8f0;}

.section-title{font-size:clamp(1.7rem,3.6vw,2.6rem);}
.section-lead{color:var(--muted);max-width:640px;margin-inline:auto;font-size:1.05rem;}
.section-head{margin-bottom:clamp(32px,5vw,56px);}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:.98rem;line-height:1;padding:.95rem 1.6rem;border-radius:999px;
  border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn--accent{background:var(--grad-accent);color:#fff;box-shadow:0 10px 24px rgba(35,113,222,.35);}
.btn--accent:hover{box-shadow:0 16px 32px rgba(35,113,222,.45);}
.btn--dark{background:var(--navy);color:#fff;}
.btn--dark:hover{background:var(--navy-2);}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--navy);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn--white{background:#fff;color:var(--navy);}
.btn--whatsapp{background:#25d366;color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.32);}
.btn--lg{padding:1.1rem 2rem;font-size:1.05rem;}
.btn--block{width:100%;}

.icon{width:1.2em;height:1.2em;flex:none;stroke-width:2;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
.header__inner{display:flex;align-items:center;gap:1.5rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--navy);font-size:1.15rem;
  white-space:nowrap;}
/* Pictogramme seul (logo-mark) : le fichier logo complet a le nom incrusté, illisible
   à cette taille → le nom est rendu en texte à côté. */
.brand__logo{height:42px;width:auto;}
.brand__text b{color:var(--accent);}
@media(max-width:520px){
  .brand__logo{height:34px;}
  .brand{font-size:.95rem;gap:.45rem;}
  /* Sans cela, brand + burger + CTA dépassent la gouttière et le bouton
     « Appeler » se colle au bord de l'écran. */
  .header__inner{gap:.6rem;}
  .header__cta .btn{padding:.8rem 1.1rem;}
}
.nav{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav a{padding:.6rem .95rem;border-radius:999px;font-weight:600;color:var(--navy);transition:background .15s,color .15s;}
.nav a:hover{background:var(--accent-soft);color:var(--accent);}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);}
.header__cta{display:flex;align-items:center;gap:1rem;}
.rating{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.85rem;color:var(--navy);}
.rating .stars{color:var(--gold);letter-spacing:1px;}
.rating small{color:var(--muted);font-weight:500;}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;color:var(--navy);}
.nav-toggle svg{width:28px;height:28px;}

@media(max-width:960px){
  .nav-toggle{display:inline-flex;margin-left:auto;}
  .header__cta .rating{display:none;}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.2rem;
    box-shadow:var(--shadow);transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease;margin-left:0;}
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav a{padding:.9rem .4rem;border-radius:8px;border-bottom:1px solid var(--line);}
  .nav a:last-of-type{border-bottom:0;}
  .header__cta{margin-left:auto;}
}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:-2;}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hero);}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center;
  padding-block:clamp(60px,9vw,120px);}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);padding:.45rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem;
  backdrop-filter:blur(6px);margin-bottom:1.4rem;}
.hero__badge .stars{color:var(--gold);}
.hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;}
.hero__lead{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:52ch;margin-block:1.2rem 1.8rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.8rem;}
.hero__trust li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.92);}
.hero__trust .icon{color:var(--green);}
@media(max-width:900px){.hero__inner{grid-template-columns:1fr;}}

/* ---------- Carte formulaire (devis) ---------- */
.quote-card{background:#fff;color:var(--text);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:clamp(22px,3vw,34px);}
.quote-card h2,.quote-card h4{color:var(--navy);font-size:1.35rem;margin-bottom:.3rem;}
.quote-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem;}
.steps-dots{display:flex;gap:.5rem;margin-bottom:1.4rem;}
.steps-dots span{flex:1;height:6px;border-radius:999px;background:var(--line);transition:background .25s;}
.steps-dots span.done{background:var(--accent);}
.step{display:none;animation:fade .3s ease;}
.step.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.step > label,.field > label{display:block;font-weight:700;color:var(--navy);margin-bottom:.7rem;}
/* Deux groupes de questions par étape : espace le second du précédent */
.step .choice-grid + label{margin-top:1.15rem;}
.step label em,.field label em{font-style:normal;font-weight:500;color:var(--muted);font-size:.85em;}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.choice{position:relative;}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.choice span{display:flex;flex-direction:column;gap:.2rem;text-align:center;padding:1rem .8rem;border:2px solid var(--line);
  border-radius:var(--radius-sm);font-weight:600;transition:border-color .15s,background .15s;}
.choice input:checked + span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.field{margin-bottom:1rem;}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;color:var(--text);background:#fff;transition:border-color .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{min-height:120px;resize:vertical;}
.form-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.3rem;}
.form-nav .btn{flex:1;}
.form-note{display:flex;align-items:center;gap:.5rem;justify-content:center;color:var(--muted);font-size:.85rem;margin-top:1rem;}
.form-note .icon{color:var(--green);width:1em;height:1em;}
.form-status{margin-top:1rem;font-weight:600;text-align:center;border-radius:var(--radius-sm);padding:.7rem;display:none;}
.form-status.ok{display:block;background:#dcfce7;color:#166534;}
.form-status.err{display:block;background:#fee2e2;color:#991b1b;}
/* Repli sans EmailJS : boutons WhatsApp / email proposés dans le bandeau de statut */
.form-fallback{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.9rem;}
.form-fallback .btn{font-size:.9rem;padding:.7rem 1.1rem;}

/* ---------- Grille services ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,28px);}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;height:100%;}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.card__icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--accent-soft);color:var(--accent);}
.card__icon .icon{width:28px;height:28px;}
.card h3{font-size:1.2rem;margin-bottom:.6rem;}
.card p{color:var(--muted);margin-bottom:1rem;}
.card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--accent);}
.card__link .icon{width:1em;height:1em;transition:transform .15s;}
.card__link:hover .icon{transform:translateX(3px);}

/* ---------- Section "à propos / maintenance" ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.split__media img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.split h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:1rem;}
.split p{color:var(--muted);font-size:1.05rem;}
.checklist{display:flex;flex-direction:column;gap:.8rem;margin:1.4rem 0;}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;font-weight:500;color:var(--text);}
.checklist .icon{color:var(--green);flex:none;margin-top:.15rem;}
@media(max-width:820px){.split{grid-template-columns:1fr;}.split__media{order:-1;}}

/* ---------- Pourquoi nous choisir (bandeau) ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,26px);}
.why__item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);text-align:center;}
.section--deep .why__item{backdrop-filter:blur(4px);}
.why__ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin:0 auto 1rem;
  background:var(--grad-accent);color:#fff;}
.why__ic .icon{width:30px;height:30px;}
.why__item h3{font-size:1.25rem;margin-bottom:.4rem;}
.why__item p{color:#94a3b8;margin:0;}
@media(max-width:760px){.why{grid-template-columns:1fr;}}

/* ---------- Avis clients ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,26px);}
/* 4 avis : en auto-fit on obtenait 3 colonnes + 1 carte orpheline. Grille 2x2
   au-dessus de 900px — plus lisible pour les avis longs. */
@media(min-width:900px){.reviews{grid-template-columns:repeat(2,1fr);}}
/* Les avis réels ont des longueurs très inégales : la carte est une colonne flex
   et le bloc auteur est poussé en bas, pour aligner les signatures entre cartes. */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.review__who{margin-top:auto;}
.review__stars{color:var(--gold);letter-spacing:2px;margin-bottom:.7rem;}
.review p{color:var(--text);font-style:italic;margin-bottom:1.2rem;}
.review__who{display:flex;align-items:center;gap:.8rem;}
.review__avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-accent);color:#fff;
  display:grid;place-items:center;font-weight:800;}
.review__who b{color:var(--navy);display:block;}
.review__who small{color:var(--muted);}
.rating-summary{display:inline-flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.6rem 1.3rem;box-shadow:var(--shadow-sm);font-weight:700;color:var(--navy);}
.rating-summary .big{font-size:1.6rem;color:var(--accent);}
.rating-summary .stars{color:var(--gold);}

/* ---------- Cartes contact / info ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,24px);}
.info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow-sm);text-align:center;}
.info__ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;
  background:var(--accent-soft);color:var(--accent);}
.info h3{font-size:1.1rem;margin-bottom:.4rem;}
.info p,.info a{color:var(--muted);}
.info a{color:var(--accent);font-weight:600;}
.zone-bar{margin-top:1.8rem;text-align:center;font-weight:600;color:var(--navy);}
.zone-bar .icon{color:var(--accent);vertical-align:-.25em;}

/* ---------- Callback (préférez-vous appeler) ---------- */
.callback{background:var(--grad-accent);color:#fff;border-radius:var(--radius-lg);padding:clamp(26px,4vw,44px);
  text-align:center;box-shadow:var(--shadow-lg);}
.callback h2{color:#fff;margin-bottom:.6rem;}
.callback .phone{display:inline-flex;align-items:center;gap:.6rem;font-size:clamp(1.5rem,3.5vw,2.2rem);
  font-weight:800;color:#fff;margin-top:.4rem;}

/* ---------- Avant / après (galerie résultats) ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,32px);}
.ba{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;}
.ba__cell{position:relative;}
.ba__cell img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.ba__tag{position:absolute;top:.7rem;left:.7rem;padding:.3rem .8rem;border-radius:999px;font-size:.75rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;}
.ba__tag--before{background:rgba(15,23,42,.8);}
.ba__tag--after{background:var(--green);}
.ba__foot{padding:1rem 1.2rem;font-weight:700;color:var(--navy);text-align:center;}

/* ---------- Galerie (masonry en colonnes : préserve les ratios) ----------
   Les photos mêlent paysage (4:3) et portrait (3:4, 9:16). Une grille à ratio
   fixe en amputait jusqu'à 58 % → mise en colonnes, chaque photo garde son cadrage. */
.gallery{columns:280px 3;column-gap:14px;}
.gallery figure{margin:0 0 14px;break-inside:avoid;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);background:#fff;position:relative;}
.gallery img{width:100%;height:auto;display:block;transition:transform .4s ease;}
.gallery figure:hover img{transform:scale(1.05);}

/* ---------- Placeholder image (en attendant les vraies photos) ---------- */
.ph{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,#e8edf3 0 14px,#eef2f7 14px 28px);color:#94a3b8;
  font-weight:700;font-size:.85rem;text-align:center;min-height:180px;aspect-ratio:4/3;}
.ph--tall{aspect-ratio:3/4;}
.ph--square{aspect-ratio:1/1;}
.ph--wide{aspect-ratio:16/9;}
.ph--cover{position:absolute;inset:0;aspect-ratio:auto;height:100%;}

/* ---------- CTA finale ---------- */
.cta{background:var(--navy);color:#fff;border-radius:var(--radius-lg);text-align:center;
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px);position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-160px;
  background:radial-gradient(circle,rgba(35,113,222,.5),transparent 70%);}
.cta h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);position:relative;}
.cta__perks{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin:1.4rem 0 2rem;position:relative;}
.cta__perks li{display:flex;align-items:center;gap:.5rem;color:#cbd5e1;font-weight:600;}
.cta__perks .icon{color:var(--green);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#94a3b8;padding-block:clamp(48px,6vw,72px) 0;}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,48px);}
.footer__brand .brand{color:#fff;margin-bottom:1rem;}
.footer__brand p{max-width:34ch;}
.footer__social{display:flex;gap:.7rem;margin-top:1.2rem;}
.footer__social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .18s,transform .18s;}
.footer__social a:hover{background:var(--accent);transform:translateY(-2px);}
.footer h5,.footer__col h5{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.1rem;}
.footer__col ul{display:flex;flex-direction:column;gap:.6rem;}
.footer__col a:hover{color:#fff;}
.footer__col address{font-style:normal;line-height:1.8;}
.footer__col address b{color:#e2e8f0;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(36px,5vw,56px);
  padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.85rem;}
.footer__bottom a:hover{color:#fff;}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr;}}

/* ---------- WhatsApp flottant ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .18s;animation:wa-pulse 2.4s infinite;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:32px;height:32px;}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ---------- Page interne : bandeau titre ---------- */
.page-hero{position:relative;color:#fff;overflow:hidden;padding-block:clamp(64px,9vw,120px);text-align:center;}
.page-hero__bg{position:absolute;inset:0;z-index:-2;}
.page-hero__bg img,.page-hero__bg .ph{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hero);}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.2rem);}
.page-hero p{color:rgba(255,255,255,.9);max-width:62ch;margin:1rem auto 0;font-size:1.1rem;}

/* ---------- Services page : blocs alternés ---------- */
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;}
/* Alternance gauche/droite : `.svc-block` est enfant unique de sa <section>, donc un
   sélecteur :nth-child(even) ne matcherait jamais → on la porte par une classe explicite. */
.svc-block--reverse .svc-block__media{order:-1;}
.svc-block__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.svc-block__media img{width:100%;height:auto;display:block;}
.svc-block h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1rem;}
.svc-block p{color:var(--muted);}
@media(max-width:820px){.svc-block{grid-template-columns:1fr;}.svc-block--reverse .svc-block__media{order:0;}}

/* Étapes protocole */
.steps-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.4vw,24px);}
.step-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.5vw,28px);
  box-shadow:var(--shadow-sm);position:relative;}
.step-item .num{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  background:var(--grad-accent);color:#fff;margin-bottom:1rem;}
.step-item p{color:var(--muted);margin:0;}

/* Sous-cartes services (diagnostic, nettoyage...) */
.mini-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:1.4rem;}
.mini-card{background:var(--bg-soft);border-radius:var(--radius-sm);padding:1.2rem;border:1px solid var(--line);}
.mini-card h4{color:var(--navy);margin-bottom:.4rem;font-size:1rem;}
.mini-card p{color:var(--muted);margin:0;font-size:.92rem;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,52px);align-items:start;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-info{display:flex;flex-direction:column;gap:1rem;}
.contact-line{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm);}
.contact-line .ic{width:48px;height:48px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);}
.contact-line h3{font-size:1.05rem;margin-bottom:.2rem;}
.contact-line p,.contact-line a{color:var(--muted);margin:0;}
.contact-line a{color:var(--accent);font-weight:600;}

/* ---------- Carte Google (chargée au clic) ----------
   L'iframe n'est injectée qu'après clic : aucune requête vers Google, donc
   aucun cookie ni IP transmise, tant que le visiteur n'a pas accepté.
   C'est ce qui permet de se passer d'une bannière de consentement. */
.map{margin-top:clamp(24px,4vw,40px);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff;}
.map__placeholder{display:grid;place-items:center;gap:.7rem;text-align:center;
  min-height:300px;padding:2.4rem 1.5rem;
  background:repeating-linear-gradient(45deg,#e8edf3 0 14px,#eef2f7 14px 28px);}
.map__placeholder .icon{width:40px;height:40px;color:var(--accent);}
.map__placeholder h3{font-size:1.1rem;}
.map__placeholder p{margin:0;font-size:.88rem;color:var(--muted);max-width:48ch;}
.map iframe{display:block;width:100%;height:360px;border:0;}

/* ---------- Prose (mentions légales) ---------- */
.prose{max-width:760px;margin-inline:auto;}
.prose h2{font-size:1.4rem;margin:2rem 0 .8rem;}
.prose p,.prose li{color:var(--text);}
.prose ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem;}

/* ---------- 404 ---------- */
.err-page{min-height:70vh;display:grid;place-items:center;text-align:center;}
.err-page .code{font-size:clamp(5rem,18vw,10rem);font-weight:800;color:var(--accent);line-height:1;}

/* ---------- Utils ---------- */
.mt-2{margin-top:1.2rem;}.mt-3{margin-top:1.8rem;}
.hidden{display:none !important;}
@media(prefers-reduced-motion:reduce){*{animation:none !important;scroll-behavior:auto !important;}
  .btn:hover,.card:hover{transform:none;}}