/* ==========================================================================
   Toiturénov — style.css v1 (16 octobre 2026)
   Landing Google Ads « Nettoyage et traitement de toiture en Île-de-France ».
   Direction : reprise de l'identité du site Toiturénov (fond clair, accent olive,
   Montserrat pour les titres, Open Sans pour le texte, photo du couvreur sur le toit),
   réécrite de zéro sans WordPress.
   Palette : fond #FFFFFF · surface #F4F6EF · surface 2 #E9EEDF · texte #2A2A2A ·
             secondaire #5A5F55 · lignes #DCE2D2 · olive marque #7A9651 (décor, grands chiffres)
             · accent texte/boutons #587336 (5,4:1 sur blanc) · accent foncé #4A6330 · étoiles #F5B301.
   Le bloc « CRITIQUE » (jusqu'à « FIN CRITIQUE ») est recopié en ligne dans le <head> de chaque
   page par scratchpad/critical.py : toute modification s'y reporte (python scratchpad/critical.py).
   Points de rupture : ≥ 1200 ordinateur large · 1024–1199 ordinateur étroit · 640–1023 tablette · < 640 mobile.
   ========================================================================== */

/* === CRITIQUE === */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin.woff2) format('woff2');font-weight:400 800;font-display:swap;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:Montserrat;src:url(../fonts/montserrat-latin-ext.woff2) format('woff2');font-weight:400 800;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';src:url(../fonts/opensans-latin.woff2) format('woff2');font-weight:400 700;font-display:swap;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:'Open Sans';src:url(../fonts/opensans-latin-ext.woff2) format('woff2');font-weight:400 700;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Polices de repli à métriques ajustées (Arial) : le texte ne saute pas quand Montserrat et Open Sans arrivent (CLS) */
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:112%;ascent-override:86.4%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:"Open Sans Fallback";src:local("Arial");size-adjust:104.5%;ascent-override:102.3%;descent-override:28%;line-gap-override:0%}

:root{
  --bg:#FFFFFF;--surface:#F4F6EF;--surface-2:#E9EEDF;--ink:#2A2A2A;--ink-2:#5A5F55;--line:#DCE2D2;
  --olive:#7A9651;--accent:#587336;--accent-dark:#4A6330;--white:#FFFFFF;--star:#F5B301;
  --head:"Montserrat","Montserrat Fallback",sans-serif;--body:"Open Sans","Open Sans Fallback",sans-serif;
  --container:1200px;--gutter:24px;--radius:8px;--radius-lg:14px;--btn-h:52px;--bar-h:76px;--section:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:40;display:inline-flex;align-items:center;height:var(--btn-h);padding:0 20px;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius);font-weight:600;text-decoration:none}
.skip:focus{top:calc(var(--bar-h) + 8px)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 24px;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;font:600 16px/1.2 var(--body);text-align:center;text-decoration:none;color:var(--accent);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn svg{flex:none;width:18px;height:18px}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--secondary{background:var(--white);border-color:var(--accent);color:var(--accent)}
.btn--secondary:hover{background:var(--surface)}
.btn--inverse{border-color:var(--white);color:var(--white)}
.btn--inverse:hover{background:var(--white);color:var(--accent-dark)}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}
.only-mobile{display:none}

/* Barre du haut (fixée en haut sur ordinateur) */
.topbar{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:1px solid var(--line)}
.topbar__inner{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.logo img{width:auto;height:38px}
.topbar__acts{display:flex;align-items:center;gap:12px}
.topbar .btn{min-height:46px;padding:0 18px;font-size:15px}

/* Premier écran : texte + photo à gauche, carte d'estimation à droite */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero__inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;padding-top:56px;padding-bottom:64px}
.hero__copy{grid-column:1/8;grid-row:1;padding-right:24px}
.hero__media{grid-column:1/8;grid-row:2;align-self:start}
.hero__card{grid-column:8/13;grid-row:1/3;align-self:start;scroll-margin-top:calc(var(--bar-h) + 16px)}
.eyebrow,.label{font:600 13px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-wrap:balance}
h1{margin-top:14px;font:700 46px/1.1 var(--head);letter-spacing:-.02em;text-wrap:balance}
html[data-ville] h1{font-size:42px}
html[data-ville*="-"] h1{font-size:36px}
.sub{margin-top:18px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.benefits{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.benefits li{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:15.5px;line-height:1.4}
.benefits svg{flex:none;width:22px;height:22px;margin-top:0;color:var(--accent)}
.hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.marks{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font:600 14px/1.4 var(--body);color:var(--ink-2)}
.marks li{position:relative;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.marks li+li::before{content:"";position:absolute;left:-12px;top:3px;bottom:3px;width:1px;background:var(--line)}
.marks .rating{color:var(--accent);font-weight:700}
.stars{display:inline-flex;gap:2px}
.stars svg{width:13px;height:13px;fill:var(--star)}
.hero__media figure{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-2)}
.hero__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 40%}
.hero__media figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;background:rgba(255,255,255,.92);border-radius:6px;font:600 12px/1.3 var(--body);color:var(--ink)}

/* Carte d'estimation instantanée */
.card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:0 8px 30px rgba(42,42,42,.06)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--olive)}
.card__label{font:600 12px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card__title{margin-top:8px;font:700 22px/1.25 var(--head);letter-spacing:-.01em}
.form{display:grid;gap:18px;margin-top:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{min-width:0}
.f>label,.f legend{display:block;margin-bottom:6px;font:600 14px/1.4 var(--body)}
.f .opt{font-weight:400;color:var(--ink-2)}
.input{display:block;width:100%;height:var(--btn-h);padding:0 14px;border:1px solid #889477;border-radius:var(--radius);background:var(--white);-webkit-appearance:none;appearance:none}
.input::placeholder{color:#6E7368;opacity:1}
.input:focus{border-color:var(--accent-dark)}
.input:focus-visible{outline-offset:0}
select.input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%232A2A2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.suffix{position:relative}
.suffix .input{padding-right:48px}
.suffix::after{content:attr(data-suffix);position:absolute;right:14px;top:0;height:var(--btn-h);display:flex;align-items:center;font-weight:600;color:var(--ink-2);pointer-events:none}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{position:relative;display:flex}
.chip input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.chip span{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:var(--btn-h);padding:8px 10px;border:1px solid #889477;border-radius:var(--radius);background:var(--white);font-weight:600;font-size:14px;line-height:1.3;cursor:pointer;user-select:none}
.chip small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:var(--ink-2)}
.chip input:checked+span{border:2px solid var(--accent);background:var(--surface);padding:7px 9px}
.chip input:focus-visible+span{outline:2px solid var(--accent-dark);outline-offset:2px}
.chip input:not(:checked)+span:hover{background:var(--surface)}
.f--err .chip input:focus+span{outline:2px solid var(--accent-dark);outline-offset:2px}
.form__plus summary{display:flex;align-items:center;gap:8px;margin:-8px 0;padding:8px 0;font:600 14px/1.4 var(--body);color:var(--accent);cursor:pointer;list-style:none}
.form__plus summary::-webkit-details-marker{display:none}
.form__plus summary svg{flex:none;width:16px;height:16px;transition:transform .2s ease}
.form__plus[open] summary svg{transform:rotate(180deg)}
.form__plus .row2{margin-top:14px}
.estim{padding:14px 16px;border:1px dashed var(--olive);border-radius:var(--radius);background:var(--surface)}
.estim__label{display:block;font:600 12px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.estim__val{display:block;margin-top:4px;font:700 26px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink)}
.estim__val.is-empty{font:600 15px/1.4 var(--body);color:var(--ink-2)}
.estim__note{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.f__err{margin:0;font-size:14px;line-height:1.4;color:#B3261E}
.f__err:not(:empty){margin-top:6px}
.f--err .input,.f--err .chip span{border-color:#B3261E}
.f--warn .f__err{color:var(--ink-2)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.status{display:block;margin-top:0;font-size:15px;line-height:1.5}
.status.on{margin-top:14px}
.status--ko{color:#B3261E}
.status a{color:var(--ink)}
.card__note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.card__pro{display:none;margin-top:12px;padding:10px 12px;border-radius:6px;background:var(--surface-2);font-size:13.5px;font-weight:600}
.card--pro .card__pro{display:block}

/* Bandeau de confiance */
.trust{background:var(--accent);color:var(--white)}
.trust__list{min-height:64px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 0;font:600 15px/1.4 var(--body)}
.trust__list li{display:flex;align-items:center;gap:10px;padding:4px 28px;border-left:1px solid rgba(255,255,255,.28);white-space:nowrap}
.trust__list li:first-child{border-left:0}
.trust .stars svg{width:15px;height:15px}

/* Barre fixe mobile (masquée sur ordinateur) */
.fixedbar{display:none}

/* Bandeau cookies (.cc) — injecté par main.js, Consent Mode v2. Même poids visuel pour refuser et accepter. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 16px 16px}
.cc[hidden]{display:none}
body:not(.sans-barre) .cc{bottom:calc(var(--btn-h) + 24px + env(safe-area-inset-bottom))}
@media (min-width:1024px){body:not(.sans-barre) .cc{bottom:0}}
.cc__box{max-width:1200px;margin:0 auto;padding:20px 24px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(42,42,42,.12)}
.cc__t{margin:0 0 4px;font:700 16px/1.3 var(--head);color:var(--ink)}
.cc__p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.cc__p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cc__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc__btn{min-height:46px;padding:0 16px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--white);color:var(--accent);font:600 15px/1.2 var(--body);cursor:pointer}
.cc__btn:hover{background:var(--surface)}
.cc__more{margin-top:10px;padding:0;min-height:32px;border:0;background:none;color:var(--ink-2);font:600 13px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc__more:hover{color:var(--ink)}
.cc__panel{display:grid;grid-template-rows:0fr}
.cc__panel > div{overflow:hidden}
.cc.is-open .cc__panel{grid-template-rows:1fr}
.cc__opt{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.cc__opt:first-child{margin-top:12px}
.cc__opt input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.cc__opt input:disabled{opacity:.55}
.cc__opt b{display:block;font-size:14px;color:var(--ink)}
.cc__opt span span{display:block;font-size:13px;line-height:1.45;color:var(--ink-2)}
.cc__save{margin-top:8px;min-height:44px;padding:0 16px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--white);font:600 15px/1 var(--body);cursor:pointer}
.cc__save:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
@media (min-width:1024px){
  .cc__box{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center}
  .cc__t,.cc__p{grid-column:1}
  .cc__p{margin-bottom:0}
  .cc__acts{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr 1fr;min-width:340px}
  .cc__more{grid-column:1 / -1;text-align:left}
  .cc__panel{grid-column:1 / -1}
}

/* Ordinateur étroit (1024–1199 px) */
@media (min-width:1024px) and (max-width:1199px){
  h1{font-size:40px}
  html[data-ville] h1{font-size:36px}
  html[data-ville*="-"] h1{font-size:32px}
  .hero__copy{grid-column:1/7}
  .hero__media{grid-column:1/7}
  .hero__card{grid-column:7/13}
  .card{padding:24px}
  .benefits{grid-template-columns:1fr}
}

/* Tablette et mobile (≤ 1023 px) : premier écran empilé — texte, carte, photo */
@media (max-width:1023px){
  :root{--gutter:16px;--bar-h:64px;--section:64px}
  html{scroll-padding-bottom:calc(var(--btn-h) + 36px + env(safe-area-inset-bottom) + var(--cc-h,0px))}
  body:not(.sans-barre) .footer{padding-bottom:calc(20px + var(--btn-h) + 24px + env(safe-area-inset-bottom))}
  .topbar{position:static}
  .only-desktop{display:none}
  .logo img{height:32px}
  .topbar .btn{padding:0 14px}
  body:not(.sans-barre) .topbar__acts .btn--primary{display:none}
  .cc__box{max-height:calc(100vh - var(--btn-h) - 56px);overflow-y:auto}
  #bar.bar--hidden~.cc{bottom:0}
  .hero__inner{display:flex;flex-direction:column;gap:28px;padding-top:28px;padding-bottom:40px}
  .hero__copy{padding-right:0}
  .hero__card{order:2}
  .hero__media{order:3}
  h1{font-size:32px;line-height:1.12}
  html[data-ville] h1{font-size:29px}
  html[data-ville*="-"] h1{font-size:26px}
  .sub{font-size:16.5px}
  .benefits{grid-template-columns:1fr;gap:10px}
  .benefits li{font-size:15px}
  .hero__actions .btn{flex:1 1 100%}
  .card{padding:22px 18px}
  .row2{grid-template-columns:1fr}
  .trust__list{justify-content:flex-start;gap:8px 16px;font-size:14px;padding:16px 0}
  .trust__list li{padding:0;border-left:0;gap:8px}
  .fixedbar{display:flex;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--white);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));transition:transform .2s ease}
  .fixedbar .btn{flex:1}
  .fixedbar.bar--hidden{transform:translateY(110%)}
}
@media (max-width:639px){
  .topbar .btn .num{display:none}
  .topbar .btn .only-mobile{display:inline}
  body.sans-barre .topbar .btn--secondary .only-mobile{display:none} /* icône seule : la place est prise par « Devis gratuit » */
  body.sans-barre .topbar .btn--secondary{padding:0 13px}
  .marks li{white-space:normal}
  .marks li+li::before{display:none}
}
@media (max-width:359px){
  .logo img{height:26px}
  .btn{padding:0 16px}
  h1{font-size:28px}
}
/* === FIN CRITIQUE === */

/* ==========================================================================
   Sections communes
   ========================================================================== */
.section{padding:var(--section) 0}
.section--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--olive{background:var(--accent-dark);color:var(--white)}
.section--olive :focus-visible{outline-color:var(--white)}
.section--olive .label{color:#D6E2C2}
.section--olive .h2,.section--olive .lead{color:var(--white)}
.section__head{margin-bottom:44px}
.h2{margin-top:14px;font:700 34px/1.15 var(--head);letter-spacing:-.02em;max-width:26ch;text-wrap:balance}
.lead{margin-top:14px;max-width:60ch;color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg)}

/* 01 — Prestations */
.prestas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.presta{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px}
.presta::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--olive)}
.presta__ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface);color:var(--accent)}
.presta__ico svg{width:26px;height:26px}
.presta h3{margin-top:16px;font:700 19px/1.25 var(--head);letter-spacing:-.01em}
.presta>p:not(.presta__prix){margin:10px 0 22px;font-size:15.5px;color:var(--ink-2)}
.presta__prix{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font:700 17px/1.4 var(--head);color:var(--accent)}
.presta__prix small{display:block;font:400 13px/1.4 var(--body);color:var(--ink-2)}
.presta__lien{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-weight:600;font-size:14.5px;color:var(--accent);text-decoration:none}
.presta__lien svg{width:14px;height:14px}
.presta__lien:hover{text-decoration:underline;text-underline-offset:3px}

/* 02 — Tarifs au m² */
.tarifs__head{grid-column:1/5}
.tarifs__body{grid-column:5/13}
.tarifs-wrap{overflow:hidden}
.tarifs{width:100%;border-collapse:separate;border-spacing:0}
.tarifs th,.tarifs td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tarifs thead th{font:600 12px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--surface)}
.tarifs tbody th{width:32%;font:600 16px/1.4 var(--body)}
.tarifs tbody th small{display:block;font:400 13.5px/1.4 var(--body);color:var(--ink-2)}
.tarifs tbody tr:last-child th,.tarifs tbody tr:last-child td{border-bottom:0}
.tarifs td{font-size:15px}
.tarifs .val{font:700 18px/1.3 var(--head);color:var(--accent);white-space:nowrap}
.tarifs .des{display:block;font:400 12.5px/1.4 var(--body);color:var(--ink-2)}
.tarifs__incl{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.tarifs__incl li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.tarifs__incl svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px}
.tarifs__note{margin-top:20px;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* 03 — Comment ça se passe */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.etape{position:relative;padding-top:60px}
.etape::before{content:"";position:absolute;left:0;right:calc(-1 * var(--gutter));top:20px;height:1px;background:var(--line)}
.etape:last-child::before{display:none}
.etape__num{position:absolute;left:0;top:0;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--white);text-align:center;font:700 15px/40px var(--head)}
.etape h3{font:700 18px/1.3 var(--head)}
.etape p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* 04 — Avant / après */
.result{align-items:start}
.result__media{grid-column:1/8}
.result__media figure{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line)}
.result__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.result__media figcaption{padding:12px 16px;background:var(--white);border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.result__list{grid-column:8/13}
.ba{display:grid;gap:14px}
.ba li{padding:16px 18px}
.ba__t{font:700 15px/1.3 var(--head)}
.ba__row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:8px;font-size:14.5px;line-height:1.45}
.ba__av{color:var(--ink-2)}
.ba__ap{font-weight:600}
.ba__row svg{width:18px;height:18px;color:var(--accent)}
.ba__tag{display:block;margin-bottom:4px;font:600 11px/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ba__ap .ba__tag{color:var(--accent)}

/* 05 — Avis Google */
.avis__resume{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:36px}
.g{flex:none;width:24px;height:24px}
.g--sm{width:14px;height:14px}
.avis__note{font:700 44px/1 var(--head);letter-spacing:-.02em;color:var(--accent)}
.stars--lg svg{width:20px;height:20px}
.avis__total{font:600 15px/1.4 var(--body)}
.avis__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.avis{display:block;padding:24px}
.avis>*+*{margin-top:14px}
.avis__tete{display:flex;align-items:center;gap:12px}
.avis__avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--head);color:var(--accent-dark)}
.avis__id{flex:1;min-width:0}
.avis__nom{font-weight:700;line-height:1.3}
.avis__sous{margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.avis__ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.avis__date{flex:none;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.avis .stars svg{width:16px;height:16px}
.avis__titre{font-weight:700;font-size:15.5px}
.avis__texte{margin-top:6px;font-size:15.5px}
.avis__pied{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}

/* 06 — Professionnels */
.pro__copy{grid-column:1/7}
.pro__list{grid-column:7/13;align-self:center}
.pro__list li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.22);font-size:16px}
.pro__list li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.pro__list svg{flex:none;width:22px;height:22px;color:#D6E2C2;margin-top:2px}
.pro__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.section--olive .btn--primary{background:var(--white);border-color:var(--white);color:var(--accent-dark)}
.section--olive .btn--primary:hover{background:var(--surface)}
.section--olive p{color:#E8EEDC}

/* 07 — Questions fréquentes */
.faq__head{grid-column:1/5}
.faq__list{grid-column:5/13}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:18px 0;font:600 17px/1.4 var(--body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:20px;height:20px;color:var(--accent);transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 44px 22px 0;max-width:64ch;color:var(--ink-2)}
.faq details p+p{margin-top:-10px}

/* 08 — Conseils (cartes) */
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.gcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcard{position:relative;display:flex;flex-direction:column;padding:24px}
.gcard h2,.gcard h3{margin-top:10px;font:700 18px/1.3 var(--head);letter-spacing:-.01em}
.gcard h2 a,.gcard h3 a{color:inherit;text-decoration:none}
.gcard h2 a::after,.gcard h3 a::after{content:"";position:absolute;inset:0}
.gcard:hover h2 a,.gcard:hover h3 a,.guide__all a:hover,.crumbs a:hover,.guide__body a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gcard>p:not(.label){margin-top:10px;font-size:15px;color:var(--ink-2)}
.gcard__more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1.4 var(--body);color:var(--accent)}
.gcard__more svg{width:12px;height:12px}
.guide__all{margin-top:36px}
.guide__all a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--accent);text-decoration:none}
.guide__all svg{width:12px;height:12px}

/* Bloc final */
.final{background:var(--surface);border-top:1px solid var(--line);padding:var(--section) 0}
.final__copy{grid-column:1/7}
.final__tel{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:24px;font:700 30px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.final__tel svg{width:26px;height:26px;color:var(--accent)}
.final__tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.final__formule{margin-top:20px;font:600 14px/1.5 var(--body);color:var(--accent)}
.final__panel{grid-column:7/13;align-self:center;padding:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg)}
.final__panel h3{font:700 22px/1.25 var(--head)}
.final__panel p{margin-top:12px;color:var(--ink-2)}
.final__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Pied de page */
.footer{background:var(--ink);padding:22px 0;font-size:14px;color:#C9CCC4}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.footer__inner>span{padding:12px 0}
.footer a,.footer__btn{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:none}
.footer :focus-visible{outline-color:var(--white)}
.footer__btn{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.footer a:hover,.footer__btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.footer__copy{margin-left:auto}

/* Pages annexes (merci, mentions légales, confidentialité, conseils) */
.sans-barre{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-bottom:0}
.sans-barre .footer{margin-top:auto}
.page{padding:var(--section) 0}
.page h1{max-width:20ch;text-wrap:balance}
.page .lead{font-size:18px}
.page__tel-label{margin-top:44px}
.page__tel{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font:700 30px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.page__tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.page__actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.page__text{max-width:72ch;margin-top:24px}
.page__text h2{margin-top:44px;font:700 23px/1.25 var(--head);letter-spacing:-.01em}
.page__text h3{margin-top:28px;font:700 18px/1.3 var(--head)}
.page__text p{margin-top:12px}
.page__text ul{margin-top:14px}
.page__text li{padding:10px 0;border-top:1px solid var(--line)}
.page__text li:last-child{border-bottom:1px solid var(--line)}
.page__text a{color:var(--accent-dark);text-decoration-thickness:1px;text-underline-offset:3px}
.page__text .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px}
.page__text table{width:100%;margin-top:16px;border-collapse:collapse;font-size:15px}
.page__text th,.page__text td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.page__text thead th{font:600 12px/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--surface)}
.page__nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.page__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-dark);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Guides (conseils/) */
.crumbs,.guide__date{font:600 13px/1.4 var(--body);color:var(--ink-2)}
.crumbs{display:flex;flex-wrap:wrap;gap:0 8px;padding:18px 0}
.crumbs li[aria-current]{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li+li::before{content:"›";margin-right:8px}
.crumbs a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--accent-dark);text-decoration:none}
.guide{padding:40px 0 var(--section)}
.guide__head,.guide__body{max-width:740px}
.guide__head h1{margin-top:14px;font-size:40px;line-height:1.12}
.guide__chapo{margin-top:18px;font-size:18.5px;line-height:1.6;color:var(--ink-2)}
.guide__date{margin-top:20px}
.guide__body{margin-top:40px;font-size:17px;line-height:1.7}
.guide__body h2{margin-top:52px;font:700 27px/1.2 var(--head);letter-spacing:-.01em;text-wrap:balance}
.guide__body p,.guide__body ul,.guide__body ol{margin-top:16px}
.guide__body li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--line)}
.guide__body li:last-child{border-bottom:1px solid var(--line)}
.guide__body ul li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:2px;background:var(--olive)}
.guide__body ol{counter-reset:g}
.guide__body ol li{padding-left:44px;counter-increment:g}
.guide__body ol li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:11px;font:700 14px/1.6 var(--head);color:var(--accent)}
.guide__body a{color:var(--accent-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.guide__table{margin-top:24px;overflow-x:auto}
.guide__table table{width:100%;min-width:480px;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.5}
.guide__table th,.guide__table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.guide__table thead th{font:600 12px/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--surface)}
.guide__table tbody th{font-weight:600}
.guide__table tbody tr:last-child th,.guide__table tbody tr:last-child td{border-bottom:0}
.guide__tip{margin-top:40px;padding:22px 26px;background:var(--surface);border-left:4px solid var(--olive);border-radius:0 var(--radius) var(--radius) 0}
.guide__tip p{margin-top:8px}
.guide__tip>:first-child{margin-top:0}
.guide__faq .faq__list{margin-top:24px}
.guide__faq details p{margin-top:0}
.guide__cta{padding:72px 0}
.guide__cta .h2{max-width:30ch}
.guide__cta p{margin-top:14px;max-width:60ch}
.guide__related{padding:var(--section) 0}
.guide__head+.gcards,.guide__related .gcards{margin-top:36px}

/* Impression : ni barre fixe, ni bandeau cookies, ni boutons d'en-tête */
@media print{
  .fixedbar,.cc,.skip,.topbar__acts{display:none!important}
  body:not(.sans-barre) .footer{padding-bottom:22px}
  .card{box-shadow:none}
  .section--olive,.trust,.footer{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faq summary svg,.form__plus summary svg,.fixedbar,.btn{transition:none}
  .btn:active{transform:none}
}

/* ==========================================================================
   Tablette et mobile (≤ 1023 px) — suite des sections
   ========================================================================== */
@media (max-width:1023px){
  .h2{font-size:26px}
  .section__head{margin-bottom:28px}
  .prestas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avis__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .etape:nth-child(even)::before{display:none}
  .tarifs__head,.tarifs__body,.faq__head,.faq__list,.final__copy,.final__panel,.result__media,.result__list,.pro__copy,.pro__list{grid-column:1/-1}
  .tarifs__body,.faq__list,.result__list,.pro__list{margin-top:28px}
  .tarifs th,.tarifs td{padding:16px 18px}
  .tarifs__incl{grid-template-columns:1fr}
  .final__panel{margin-top:36px}
  .guide__head h1{font-size:30px}
  .guide__chapo{font-size:17px}
  .guide__body{margin-top:32px}
  .guide__body h2{margin-top:40px;font-size:23px}
  .guide__tip{padding:18px}
  .guide__cta .final__actions .btn{width:100%}
  .page .lead{font-size:17px}
  .page__tel{font-size:27px}
  .page__text h2{margin-top:36px;font-size:21px}
  .page__actions .btn{width:100%}
}
@media (max-width:639px){
  .prestas,.gcards{grid-template-columns:minmax(0,1fr)}
  .avis__grille{grid-template-columns:minmax(0,1fr);gap:16px}
  .etapes{grid-template-columns:1fr;gap:26px}
  .etape{padding:0 0 0 58px;min-height:40px}
  .etape::before{left:19px;right:auto;top:40px;bottom:-26px;width:1px;height:auto}
  .etape:nth-child(even)::before{display:block}
  .etape:last-child::before{display:none}
  .avis__resume{gap:12px 16px}
  .final__panel{padding:24px 18px}
  .final__actions .btn,.pro__acts .btn{width:100%;padding:0 12px}
  .final__tel{font-size:26px}
  .footer__copy{margin-left:0}
  .ba__row{grid-template-columns:1fr;gap:6px}
  .ba__row svg{transform:rotate(90deg);justify-self:start}
  /* Tableau des tarifs → cartes */
  .tarifs thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .tarifs,.tarifs tbody,.tarifs tr,.tarifs tbody th,.tarifs td{display:block}
  .tarifs tbody tr{border-bottom:1px solid var(--line)}
  .tarifs tbody tr:last-child{border-bottom:0}
  .tarifs tbody th{width:auto;padding:16px 18px 6px;border-bottom:0}
  .tarifs td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:4px 12px;padding:6px 18px;border-bottom:0}
  .tarifs td::before{content:attr(data-label);content:attr(data-label) / "";flex:none;font:600 13.5px/1.4 var(--body);color:var(--ink-2)}
  .tarifs td:last-child{padding-bottom:16px}
  .guide__table th,.guide__table td{padding:12px 10px;font-size:14px}
}