/* ECK Entretien — feuille de style partagée par toutes les pages.
   Extraite du <style> inline de index.html le 2026-08-16, lors du passage
   d'une landing unique à un site multi-pages (accueil + 5 pages prestation).

   Toutes les couleurs vivent dans :root — c'est le seul endroit à toucher
   pour rebasculer le thème. Thème clair : texte sombre sur fond blanc.
   Seules exceptions volontaires : la bannière rouge d'appel à l'action et la
   visionneuse photo, restées sur fond sombre. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;--bg-alt:#f4f5f7;--surface:#ffffff;--surface-2:#f1f3f6;
  --red:#d32f2f;--red-hover:#b71c1c;--red-glow:rgba(211,47,47,.22);
  --red-soft:rgba(211,47,47,.07);--red-line:rgba(211,47,47,.28);
  --ink:#111214;--gray:#6b7280;--gray-light:#4b5563;
  --border:rgba(17,18,20,.10);--border-strong:rgba(17,18,20,.18);
  --orange:#d9741f;--amber:#f59e0b;--green:#15803d;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px rgba(16,24,40,.09);
  --shadow-lg:0 20px 50px rgba(16,24,40,.15);
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Manrope',sans-serif;
  /* Hauteur du bandeau de zone. Tout ce qui se cale sous la barre de navigation
     en dépend : ne pas la modifier sans revérifier .nav et scroll-margin-top. */
  --topbar-h:34px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6}
body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{border:none;cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:1rem}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}

/* LOADER */
.loader{position:fixed;inset:0;background:var(--bg);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
.loader.hidden{opacity:0;visibility:hidden}
.loader-bar{width:120px;height:2px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.loader-bar::after{content:'';display:block;width:100%;height:100%;background:var(--red);animation:load .8s ease-in-out}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* NAV */
/* BANDEAU DE ZONE — la première question de tout visiteur venu de Google est
   « est-ce qu'il se déplace chez moi ? ». Y répondre avant même le titre évite
   des clics payants perdus et des appels hors zone. Il reste fixe pendant toute
   la visite : la réponse doit être disponible au moment où le doute revient. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:1001;height:var(--topbar-h);background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 1rem;font-size:.78rem;font-weight:600;letter-spacing:.2px;line-height:1;overflow:hidden}
/* nowrap : le bandeau ne doit jamais passer sur deux lignes, il déborderait sur
   la barre de navigation. Si le texte ne tient plus, c'est le texte qu'on
   raccourcit, pas la hauteur qu'on augmente. */
.topbar>*{white-space:nowrap}
.topbar svg{flex-shrink:0;opacity:.75}
.topbar strong{font-weight:700}
.topbar .tb-sep{opacity:.45}
.topbar:hover{color:#fff}
.topbar .tb-court{display:none}
.nav{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1000;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;transition:background .3s,backdrop-filter .3s,padding .3s}
.nav.scrolled,.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:.75rem 2rem;border-bottom:1px solid var(--border);box-shadow:0 1px 14px rgba(16,24,40,.06)}
.nav-logo{display:flex;align-items:center;gap:.75rem;font-family:'Inter',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:0;line-height:1;color:var(--ink)}
.nav-logo .light{font-weight:300}
.nav-logo .dot{color:var(--orange);font-weight:700}
.nav-links{display:flex;align-items:center;gap:1.6rem}
/* :not(.nav-cta) est indispensable. Sans lui, ce sélecteur (0,1,1) l'emporte
   sur .nav-cta (0,1,0) quel que soit l'ordre des règles, et le bouton rouge
   se retrouve avec du texte gris sur fond rouge. */
.nav-links>a:not(.nav-cta){font-size:.85rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--gray-light);transition:color .3s}
.nav-links>a:not(.nav-cta):hover{color:var(--red)}
.nav-cta{background:var(--red);color:#fff;padding:.65rem 1.5rem;border-radius:4px;font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .3s;display:inline-flex;align-items:center;gap:.5rem}
.nav-cta:hover{background:var(--red-hover);box-shadow:0 0 30px var(--red-glow);color:#fff}
.nav-mobile-toggle{display:none;background:none;color:var(--ink);font-size:1.5rem;padding:.5rem}

/* Menu déroulant « Prestations » — au survol sur desktop, au clic au clavier. */
.nav-drop{position:relative}
.nav-drop>button{background:none;font-size:.85rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--gray-light);transition:color .3s;display:inline-flex;align-items:center;gap:.35rem;padding:0}
.nav-drop>button::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav-drop:hover>button,.nav-drop.open>button{color:var(--red)}
.nav-drop.open>button::after{transform:rotate(-135deg) translateY(-2px)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);margin-top:.75rem;min-width:260px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;transition:all .22s;z-index:1001}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;padding:.6rem .8rem;border-radius:7px;font-size:.85rem;font-weight:600;color:var(--ink);transition:all .2s;text-transform:none;letter-spacing:0}
.nav-drop-menu a span{display:block;font-size:.72rem;font-weight:400;color:var(--gray);margin-top:.1rem}
.nav-drop-menu a:hover{background:var(--red-soft);color:var(--red)}

/* z-index supérieur à celui de .nav (1000) : sinon le bouton hamburger de la
   barre de navigation reste au-dessus du menu ouvert et intercepte les clics
   destinés à la croix de fermeture, placée au même endroit. Le menu paraît
   alors impossible à refermer. */
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:1100;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;overflow-y:auto;padding:5rem 1.5rem 3rem}
.mobile-menu.open{display:flex}
/* Même raison que dans .nav-links : le bouton d'appel à l'action doit garder
   son texte blanc, il ne suit pas le style des liens de menu. */
.mobile-menu a:not(.nav-cta){font-family:var(--font-display);font-size:1.7rem;letter-spacing:3px;color:var(--ink);transition:color .3s;text-align:center}
.mobile-menu a:not(.nav-cta):hover{color:var(--red)}
.mobile-menu .nav-cta{margin-top:.75rem}
.mobile-menu .mm-sub{font-family:var(--font-body);font-size:.9rem;letter-spacing:.5px;color:var(--gray-light);font-weight:500}
.mobile-menu .close-btn{position:absolute;top:1.5rem;right:2rem;background:none;color:var(--ink);font-size:2rem;cursor:pointer;border:none}

/* BOUTONS */
.btn-primary{background:var(--red);color:#fff;padding:.9rem 2rem;border-radius:4px;font-size:.85rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-primary:hover{background:var(--red-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 30px var(--red-glow)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{background:rgba(255,255,255,.75);color:var(--ink);padding:.9rem 2rem;border-radius:4px;font-size:.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .3s;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-secondary:hover{border-color:var(--red);color:var(--red);background:#fff}
.btn-white{background:#fff;color:var(--red);padding:1rem 2.5rem;border-radius:4px;font-size:.85rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.2);color:var(--red)}
.btn-outline-white{background:transparent;color:#fff;padding:1rem 2.5rem;border-radius:4px;font-size:.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .3s;border:2px solid rgba(255,255,255,.4);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}

/* HERO ACCUEIL */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* Voile blanc du hero. Il doit laisser lire le titre à gauche et laisser voir la
   voiture à droite : c'est la photo qui prouve le niveau de finition, la cacher
   revient à vendre du detailing sans montrer de carrosserie. Valeurs allégées le
   2026-08-19, ne pas remonter sans vérifier le contraste du sous-titre gris. */
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.42) 72%,rgba(255,255,255,.08) 100%)}
/* La réserve en bas maintient les 4 chiffres de preuve au-dessus de la zone des
   boutons flottants, qui sont en position fixe et mordraient sinon dessus. */
.hero-content{position:relative;z-index:2;padding:8rem 2rem 8rem;max-width:800px;margin-left:6%}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--red-soft);border:1px solid var(--red-line);padding:.4rem 1rem;border-radius:50px;font-size:.75rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-bottom:2rem;animation:fadeInUp .8s .3s both}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:3px;margin-bottom:1.5rem;animation:fadeInUp .8s .5s both}
.hero h1 .accent{color:var(--red)}
.hero-sub{font-size:1.1rem;color:var(--gray-light);max-width:540px;line-height:1.7;margin-bottom:2.5rem;animation:fadeInUp .8s .7s both}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeInUp .8s .9s both}
.hero-stats{display:flex;gap:3rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border);animation:fadeInUp .8s 1.1s both;flex-wrap:wrap}
.hero-stat .number{font-family:var(--font-display);font-size:2.5rem;color:var(--red);letter-spacing:1px}
.hero-stat .label{font-size:.75rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-top:.2rem}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* HERO PAGE INTERNE — plus compact que celui de l'accueil, sans photo plein écran */
.page-hero{background:var(--bg-alt);padding:9rem 2rem 4rem;border-bottom:1px solid var(--border)}
.page-hero .container{max-width:1200px;margin:0 auto}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;letter-spacing:2px;margin:.4rem 0 1.25rem;max-width:900px}
.page-hero h1 .accent{color:var(--red)}
.page-hero .lede{font-size:1.05rem;color:var(--gray-light);max-width:680px;line-height:1.75}
.page-hero .hero-actions{margin-top:2.25rem;animation:none}
/* Deux colonnes : texte à gauche, visuel de présentation à droite. Toutes les
   photos du projet sont en 4:5 (format Instagram), d'où ce ratio imposé. */
.page-hero .ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.page-hero-visual{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-alt)}
.page-hero-visual img{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:500px}
.page-hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.meta-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--border);padding:.45rem .9rem;border-radius:50px;font-size:.78rem;color:var(--gray-light);font-weight:500}
.meta-chip strong{color:var(--ink);font-weight:700}

/* FIL D'ARIANE */
.breadcrumb{font-size:.78rem;color:var(--gray);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.breadcrumb a{color:var(--gray);transition:color .2s}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb span[aria-current]{color:var(--ink);font-weight:600}
.breadcrumb .sep{opacity:.5}

/* SECTIONS */
/* La barre de nav est fixe : sans cette marge, arriver sur une ancre place le
   titre de la section juste dessous, donc caché. */
section[id],.booking-block[id]{scroll-margin-top:calc(92px + var(--topbar-h))}
.section{padding:6rem 2rem}
.section-sm{padding:4rem 2rem}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:.75rem}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);letter-spacing:2px;line-height:1;margin-bottom:1rem}
.section-desc{color:var(--gray);max-width:620px;line-height:1.7}
.container{max-width:1200px;margin:0 auto}
.container-narrow{max-width:820px;margin:0 auto}
.bg-alt{background:var(--bg-alt)}

/* RÉPONSE DIRECTE — bloc d'ouverture des pages prestation.
   Volontairement autoportant et factuel : c'est le passage que les moteurs de
   réponse (ChatGPT, Perplexity, Gemini, AI Overviews) citent le plus volontiers. */
.answer-box{background:var(--surface);border:1px solid var(--red-line);border-left:4px solid var(--red);border-radius:10px;padding:1.75rem 2rem;box-shadow:var(--shadow-sm);margin-bottom:2.5rem}
.answer-box p{font-size:1.02rem;line-height:1.8;color:var(--ink)}
.answer-box p+p{margin-top:.85rem}
.answer-box strong{font-weight:700}

/* CONTENU RÉDACTIONNEL */
.prose h2{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:1.5px;line-height:1.1;margin:3rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;font-weight:700;margin:2rem 0 .6rem;letter-spacing:.2px}
.prose p{color:var(--gray-light);line-height:1.8;margin-bottom:1rem}
.prose p strong,.prose li strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{margin:0 0 1.25rem 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;color:var(--gray-light);line-height:1.7}
.prose ul li::before{content:'';position:absolute;left:.25rem;top:.7rem;width:6px;height:6px;border-radius:50%;background:var(--red)}
.prose ol{counter-reset:pl}
.prose ol li{position:relative;padding-left:2.1rem;margin-bottom:.7rem;color:var(--gray-light);line-height:1.7;counter-increment:pl}
.prose ol li::before{content:counter(pl);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--red-soft);color:var(--red);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.prose a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--red-hover)}

/* TABLEAU DE PRIX */
.table-wrap{overflow-x:auto;margin:1.5rem 0 1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-sm)}
/* min-width : garde des colonnes lisibles sur grand écran. Il est neutralisé
   sous 768px, sinon une table de 2 colonnes déborderait de son conteneur et
   obligerait à défiler horizontalement alors qu'elle tient largement. */
.price-table{width:100%;border-collapse:collapse;min-width:420px}
.price-table caption{text-align:left;padding:1rem 1.25rem .25rem;font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);font-weight:700}
.price-table th,.price-table td{padding:.85rem 1.25rem;text-align:left;font-size:.9rem;border-bottom:1px solid var(--border)}
.price-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray);font-weight:700;background:var(--bg-alt)}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:none}
.price-table tbody th{font-weight:600;color:var(--ink)}
.price-table td.price{font-weight:700;color:var(--red);white-space:nowrap}
.table-note{font-size:.8rem;color:var(--gray);margin-bottom:2rem;line-height:1.6}

/* FORFAIT UNIQUE — grande carte prix pour feux et canapé */
.flat-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--surface);border:1px solid var(--red-line);border-radius:12px;padding:2rem;box-shadow:var(--shadow-md);margin:1.5rem 0}
.flat-price .fp-amount{font-family:var(--font-display);font-size:3.4rem;color:var(--red);letter-spacing:2px;line-height:1}
.flat-price .fp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray);font-weight:700;margin-bottom:.2rem}
.flat-price .fp-detail{font-size:.88rem;color:var(--gray-light);max-width:380px;line-height:1.7}
.flat-price .fp-detail strong{color:var(--ink)}

/* ÉTAPES DE PRESTATION */
.steps{display:grid;gap:1rem;margin:1.5rem 0 1rem}
.step-card{display:flex;gap:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.step-card .step-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-display);font-size:1.1rem;letter-spacing:1px;display:flex;align-items:center;justify-content:center}
.step-card h3{font-size:.98rem;font-weight:700;margin:0 0 .3rem}
.step-card p{font-size:.87rem;color:var(--gray-light);line-height:1.7;margin:0}

/* ENCADRÉ PÉDAGOGIQUE */
.callout{border-radius:10px;padding:1.4rem 1.6rem;margin:1.75rem 0;border:1px solid;line-height:1.75;font-size:.9rem}
.callout h3{font-size:.95rem;font-weight:700;margin:0 0 .5rem;letter-spacing:.2px}
.callout p{margin:0 0 .6rem}
.callout p:last-child{margin-bottom:0}
.callout.info{background:rgba(217,116,31,.07);border-color:rgba(217,116,31,.32);color:#7a4106}
.callout.info h3{color:#8a4a05}
.callout.warn{background:var(--red-soft);border-color:var(--red-line);color:#7f1d1d}
.callout.warn h3{color:var(--red)}
.callout.neutral{background:var(--bg-alt);border-color:var(--border);color:var(--gray-light)}
.callout.neutral h3{color:var(--ink)}

/* COMPARATIF 2 COLONNES */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.compare-col{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;box-shadow:var(--shadow-sm)}
.compare-col.pick{border-color:var(--red-line);box-shadow:0 0 0 3px var(--red-soft),var(--shadow-sm)}
.compare-col h3{font-family:var(--font-display);font-size:1.35rem;letter-spacing:1px;margin:0 0 .2rem}
.compare-col .cc-tag{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:50px;padding:.2rem .65rem;margin-bottom:.9rem}
.compare-col ul{list-style:none;margin:0;padding:0}
.compare-col li{position:relative;padding-left:1.4rem;font-size:.85rem;color:var(--gray-light);line-height:1.65;margin-bottom:.5rem}
.compare-col li::before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:700}
.compare-col li.no::before{content:'✕';color:var(--gray)}

/* SERVICES (accueil) */
/* Les 5 prestations tiennent sur une seule ligne au-delà de 1200px : une carte
   isolée sur une seconde ligne casse la lecture de l'offre. En dessous, on
   redescend par paliers plutôt que d'écraser les cartes. */
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:3rem}
.service-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:10px;transition:all .4s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s;z-index:2}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{border-color:var(--red-line);transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* Visuel de tête. Toutes les photos du projet sont en 4:5 (format Instagram).
   Un cadre carré n'en perd que 20% en hauteur, contre 37% en 4:3, ce qui
   change tout sur les photos où le sujet occupe toute la hauteur. */
.service-card .card-photo{overflow:hidden;background:var(--bg-alt)}
.service-card .card-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;transition:transform .5s}
.service-card:hover .card-photo img{transform:scale(1.05)}
.service-card .card-inner{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.15rem 1.5rem}
.service-icon{width:48px;height:48px;background:var(--red-soft);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.3rem}
.service-card h3{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.5px;margin-bottom:.6rem;line-height:1.15}
.service-card p{color:var(--gray);font-size:.82rem;line-height:1.6}
.service-card .card-spacer{flex:1}
.service-price{margin-top:1.2rem;font-size:.85rem;color:var(--red);font-weight:700}
.service-duration{margin-top:.35rem;font-size:.78rem;color:var(--gray)}
/* align-self : sans ça, le badge s'étirerait sur toute la largeur de la carte,
   qui est un conteneur flex en colonne. */
.service-mode{display:inline-flex;align-self:flex-start;align-items:center;gap:.35rem;margin-top:.9rem;font-size:.7rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:.25rem .6rem;border-radius:50px}
.service-mode.instant{color:var(--green);background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.28)}
.service-mode.quote{color:var(--gray-light);background:var(--bg-alt);border:1px solid var(--border-strong)}
.service-card .btn-link{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-size:.8rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;transition:color .3s;cursor:pointer;background:none}
.service-card .btn-link:hover{color:var(--red)}
.service-card .btn-link-row{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1.2rem}
.service-card .btn-link-row .btn-link{margin-top:0}

/* GALERIE */
.carousel-wrap{position:relative;overflow:hidden;margin-top:3rem}
.carousel-wrap::before,.carousel-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:3;pointer-events:none}
.carousel-wrap::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)}
.carousel-wrap::after{right:0;background:linear-gradient(270deg,var(--bg) 0%,transparent 100%)}
.carousel-track{display:flex;gap:1rem;animation:carouselScroll 70s linear infinite;width:max-content}
.carousel-track:hover{animation-play-state:paused}
@keyframes carouselScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.carousel-item{flex-shrink:0;width:350px;height:260px;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);background:var(--bg-alt)}
.carousel-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .4s}
.carousel-item:hover img{transform:scale(1.06);filter:brightness(1.1)}
/* Montages avant/après verticaux (4:5) : hauteur identique aux autres vignettes,
   largeur calculée par le ratio. Recadrer en paysage couperait l'une des deux
   moitiés de la photo, donc tout son intérêt. */
.carousel-item.portrait{width:auto;aspect-ratio:4/5}
.carousel-item.portrait img{width:auto;height:100%}

/* GALERIE À DÉFILEMENT (pages prestation)
   Composant distinct du carrousel d'accueil, volontairement. Le carrousel
   d'accueil est un défilement continu décoratif qu'on ne pilote pas. Ici la
   galerie est une preuve que le visiteur doit pouvoir parcourir : elle repose
   donc sur un défilement natif, balayable au doigt, avec accroche par photo.
   Elle avance seule quand on ne s'en occupe pas, et s'arrête dès qu'on la
   touche. Une seule rangée au lieu d'une grille : sur téléphone, 12 photos
   empilées faisaient une colonne interminable. */
.gallery-strip{position:relative;margin-top:2rem}
/* scroll-snap-align:start et non center : avec un alignement centré, le
   navigateur recentre la vignette la plus proche après un défilement
   programmé, et un clic sur la flèche n'avance plus d'une vignette entière
   mais d'une valeur imprévisible. En "start", un pas vaut exactement une
   vignette. scroll-padding-left reprend le retrait de la piste pour que la
   photo ne colle pas au bord. */
.gs-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:.25rem;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:.25rem .25rem 1rem}
.gs-track::-webkit-scrollbar{display:none}
.gs-item{flex:0 0 auto;height:300px;aspect-ratio:4/3;margin:0;border-radius:10px;overflow:hidden;cursor:pointer;scroll-snap-align:start;background:var(--bg-alt);border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative}
/* Un montage avant/après est vertical : le recadrer en paysage couperait
   l'une des deux moitiés, donc tout son intérêt. */
.gs-item.portrait{aspect-ratio:4/5}
.gs-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gs-item:hover img{transform:scale(1.05)}
/* La légende est masquée par défaut et n'apparaît qu'au survol. Affichée en
   permanence, elle recouvrait le bas de la vignette, c'est-à-dire la moitié
   « après » des montages avant/après : exactement ce qu'on veut montrer.
   Sur tactile, où le survol n'existe pas, elle ne s'affiche jamais. Le sens
   reste porté par le titre de section et par l'attribut alt de l'image. */
.gs-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .7rem;font-size:.75rem;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,11,13,.82));line-height:1.4;opacity:0;transition:opacity .25s;pointer-events:none}
@media(hover:hover){.gs-item:hover figcaption{opacity:1}}
.gs-nav{position:absolute;top:calc(50% - .5rem);transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.96);border:1px solid var(--border-strong);box-shadow:var(--shadow-md);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;transition:all .25s}
.gs-nav:hover{background:var(--red);color:#fff;border-color:var(--red)}
.gs-nav.prev{left:-12px}
.gs-nav.next{right:-12px}
/* Sur tactile on balaie au doigt : les flèches n'apportent rien et masquent
   une partie de la photo. */
@media(hover:none){.gs-nav{display:none}}
/* Voiles latéraux, qui signalent qu'il y a du contenu au-delà du bord. */
.gallery-strip::before,.gallery-strip::after{content:'';position:absolute;top:0;bottom:1rem;width:44px;z-index:3;pointer-events:none}
.gallery-strip::before{left:0;background:linear-gradient(90deg,var(--bg) 20%,transparent)}
.gallery-strip::after{right:0;background:linear-gradient(270deg,var(--bg) 20%,transparent)}
.bg-alt .gallery-strip::before{background:linear-gradient(90deg,var(--bg-alt) 20%,transparent)}
.bg-alt .gallery-strip::after{background:linear-gradient(270deg,var(--bg-alt) 20%,transparent)}
.gs-hint{margin-top:.25rem;font-size:.78rem;color:var(--gray);display:flex;align-items:center;gap:.4rem}
/* Emplacement photo pas encore livrée : jamais d'image cassée à l'écran. */
.photo-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--bg-alt),var(--bg-alt) 12px,var(--surface-2) 12px,var(--surface-2) 24px);color:var(--gray);font-size:.8rem;text-align:center;padding:1rem}
.photo-pending::before{content:'📷';font-size:1.6rem}

.lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,11,13,.92);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:2rem}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox-close{position:absolute;top:1.5rem;right:2rem;color:#fff;font-size:2.5rem;cursor:pointer;opacity:.7;transition:opacity .3s;z-index:10000;background:none;border:none;font-family:inherit}
.lightbox-close:hover{opacity:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:3rem;cursor:pointer;opacity:.5;transition:opacity .3s;background:none;border:none;padding:1rem;z-index:10000}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

/* AVIS */
.reviews-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.reviews-google{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.reviews-google .stars{color:var(--amber);font-size:1.2rem;letter-spacing:2px}
.reviews-google .rating-text{font-size:.9rem;color:var(--gray-light)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:3rem}
.review-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:8px;padding:2rem;transition:all .3s;position:relative}
.review-card:hover{border-color:var(--red-line);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.review-card .stars{color:var(--amber);font-size:.9rem;letter-spacing:2px;margin-bottom:1rem}
.review-card .text{font-size:.9rem;color:var(--gray-light);line-height:1.7;font-style:italic;margin-bottom:1.5rem}
.review-card .author{display:flex;align-items:center;gap:.75rem}
.review-card .avatar{width:36px;height:36px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0}
.review-card .author-info .name{font-size:.85rem;font-weight:600}
.review-card .author-info .date{font-size:.75rem;color:var(--gray)}
.review-card .badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.65rem;color:var(--gray);margin-top:.2rem}
.reviews-cta{text-align:center;margin-top:3rem}

/* ZONE */
.zone-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.zone-left .tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.zone-left .tag{background:var(--bg-alt);border:1px solid var(--border);padding:.5rem 1rem;border-radius:50px;font-size:.8rem;color:var(--gray-light);font-weight:500}
.zone-left .tag.highlight{border-color:var(--red-line);color:var(--red);background:var(--red-soft)}
.zone-right{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:2.5rem;position:relative}
.zone-right::before{content:'';position:absolute;top:-1px;left:2rem;right:2rem;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent)}
.zone-feature{display:flex;gap:1rem;margin-bottom:2rem;align-items:flex-start}
.zone-feature:last-child{margin-bottom:0}
.zone-feature .icon{width:40px;height:40px;min-width:40px;background:var(--red-soft);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.zone-feature h3,.zone-feature h4{font-size:.95rem;font-weight:600;margin-bottom:.3rem}
.zone-feature p{font-size:.82rem;color:var(--gray);line-height:1.6}

/* BANNIÈRE CTA — seule section volontairement restée sombre/colorée */
.cta-banner{background:linear-gradient(135deg,var(--red) 0%,#9a1c1c 100%);color:#fff;padding:4rem 2rem;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.cta-banner h2{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);letter-spacing:3px;margin-bottom:1rem;position:relative}
.cta-banner p{font-size:1.1rem;opacity:.9;max-width:560px;margin:0 auto 2.5rem;position:relative}
.cta-banner .cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative}

/* FAQ */
.faq-grid{max-width:820px;margin:3rem auto 0;display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .3s,background .3s}
.faq-item.active{border-color:var(--red-line);background:var(--surface);box-shadow:var(--shadow-sm)}
.faq-item h3{margin:0}
.faq-question{width:100%;padding:1.25rem 1.5rem;background:none;border:none;color:var(--ink);font-family:var(--font-body);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .3s}
.faq-question:hover{color:var(--red)}
.faq-question::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--red);transition:transform .3s;flex-shrink:0}
.faq-item.active .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-answer p{padding:0 1.5rem 1.25rem;color:var(--gray-light);font-size:.88rem;line-height:1.8;margin:0}
.faq-answer p+p{padding-top:0}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}
.contact-info{display:flex;flex-direction:column;gap:2rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-item .icon{width:44px;height:44px;min-width:44px;background:var(--red-soft);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.contact-item h3,.contact-item h4{font-size:.9rem;font-weight:600;margin-bottom:.2rem}
.contact-item p{font-size:.85rem;color:var(--gray);line-height:1.5}
.contact-item a{color:var(--red);transition:color .3s;cursor:pointer;background:none;border:none;font:inherit}
.contact-item a:hover{color:var(--red-hover)}
.contact-map{border-radius:8px;overflow:hidden;border:1px solid var(--border);min-height:350px;background:var(--surface);box-shadow:var(--shadow-sm)}
.contact-map iframe{width:100%;height:100%;min-height:350px;border:0;border-radius:8px}

/* NAVIGATION ENTRE PRESTATIONS (bas de page interne) */
.service-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2.5rem}
.service-nav a{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.4rem;transition:all .3s;box-shadow:var(--shadow-sm)}
.service-nav a:hover{border-color:var(--red-line);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.service-nav .sn-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--red);font-weight:700}
.service-nav .sn-title{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.8px;margin:.35rem 0 .3rem}
.service-nav .sn-desc{font-size:.8rem;color:var(--gray);line-height:1.6}

/* FOOTER */
.footer{background:var(--bg);padding:3.5rem 2rem 2.5rem;border-top:1px solid var(--border)}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border)}
.footer-col h3{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray);font-weight:700;margin-bottom:1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-col a{font-size:.85rem;color:var(--gray-light);transition:color .25s}
.footer-col a:hover{color:var(--red)}
.footer-col p{font-size:.85rem;color:var(--gray-light);line-height:1.75}
.footer-brand{font-family:'Inter',sans-serif;font-weight:700;font-size:1.25rem;margin-bottom:.75rem}
.footer-brand .light{font-weight:300}
.footer-brand .dot{color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.75rem}
.footer-left{font-size:.78rem;color:var(--gray)}
.footer-social{display:flex;gap:1rem}
.footer-social a{width:36px;height:36px;background:var(--bg-alt);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--gray);transition:all .3s;border:1px solid var(--border)}
.footer-social a:hover{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}

/* BOUTONS FLOTTANTS */
.floating-cta{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;display:flex;flex-direction:column;gap:.75rem}
.float-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .3s;box-shadow:0 6px 22px rgba(16,24,40,.22)}
.float-btn.whatsapp{background:#25D366;color:#fff}
.float-btn.phone{background:var(--red);color:#fff}
.float-btn:hover{transform:scale(1.1)}
/* Masquage pendant le hero plein écran de l'accueil, piloté par site.js. */
.floats-hidden .floating-cta,.floats-hidden .devis-fab{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
.floating-cta,.devis-fab{transition:opacity .3s,transform .3s,visibility .3s}

/* PASTILLE DEVIS GRATUIT — remplace l'ancien chatbot depuis le 2026-08-19.
   Une pastille sombre en bas à gauche : elle ne concurrence pas le rouge des
   boutons appel et WhatsApp à droite, et elle dit ce qu'elle fait. */
.devis-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:900;display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:50px;background:var(--ink);color:#fff;border:none;cursor:pointer;font-family:var(--font-body);font-size:.82rem;font-weight:700;letter-spacing:.4px;box-shadow:0 6px 22px rgba(16,24,40,.26);transition:all .3s}
.devis-fab:hover{background:var(--red);transform:translateY(-2px);box-shadow:0 10px 28px var(--red-glow)}
.devis-fab svg{flex-shrink:0}
/* Variante des pages réservables : rouge, comme le bouton « Réserver un créneau »
   du hero. C'est l'action principale de la page, elle a le droit de crier. */
.devis-fab.booking{background:var(--red);box-shadow:0 6px 22px var(--red-glow)}
.devis-fab.booking:hover{background:var(--red-hover);box-shadow:0 10px 28px var(--red-glow)}

/* EMBED CAL.COM — la réservation instantanée feux / canapé */
.booking-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden;margin-top:2rem}
.booking-block-head{padding:1.5rem 1.75rem;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.booking-block-head h2{font-family:var(--font-display);font-size:1.6rem;letter-spacing:1px;margin:0 0 .35rem}
.booking-block-head p{font-size:.87rem;color:var(--gray-light);margin:0;line-height:1.7}
.calcom-embed{min-height:640px;padding:0}
.calcom-embed iframe{width:100%;min-height:640px;border:0;display:block}
/* Etat par défaut tant que le lien Cal.com n'est pas branché : on ne laisse
   jamais un cadre vide, on renvoie vers le devis et le téléphone. */
.calcom-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:3.5rem 2rem;min-height:340px;background:repeating-linear-gradient(45deg,var(--bg-alt),var(--bg-alt) 14px,var(--surface-2) 14px,var(--surface-2) 28px)}
.calcom-placeholder .cp-icon{font-size:2.2rem}
.calcom-placeholder h3{font-family:var(--font-display);font-size:1.4rem;letter-spacing:1px;margin:0}
.calcom-placeholder p{font-size:.87rem;color:var(--gray-light);max-width:420px;line-height:1.7;margin:0}
.calcom-placeholder .cp-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}

/* MODALE DEVIS */
.devis-modal{position:fixed;inset:0;z-index:2000;background:rgba(17,18,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;opacity:0;transition:opacity .25s}
.devis-modal.open{display:flex;opacity:1}
.devis-inner{background:var(--bg);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:620px;margin:auto;overflow:hidden}
.devis-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem 1.75rem 1.25rem;border-bottom:1px solid var(--border)}
.devis-header h2{font-family:var(--font-display);font-size:1.75rem;letter-spacing:1px;line-height:1.1;margin-bottom:.35rem}
.devis-header p{font-size:.85rem;color:var(--gray);line-height:1.6}
.devis-close{background:var(--bg-alt);color:var(--ink);width:36px;height:36px;border-radius:50%;font-size:1.1rem;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.devis-close:hover{background:var(--red);color:#fff}
.devis-body{padding:1.5rem 1.75rem}
.devis-footer{padding:1.25rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:.75rem}
.field-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--gray-light);margin:1.15rem 0 .45rem;font-weight:700}
.field-label:first-child{margin-top:0}
.text-input,.cat-select,select.text-input{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:.8rem 1rem;color:var(--ink)}
.text-input:focus,.cat-select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
textarea.text-input{resize:vertical;min-height:90px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field.full{grid-column:1 / -1}
.form-field .field-label{margin-top:0}
.consent-row{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.35rem}
.consent-row label{font-size:.8rem;color:var(--gray-light);line-height:1.6}
.field-error{color:var(--red);font-size:.8rem;font-weight:600}
.field-error:empty{display:none}
.devis-note{font-size:.78rem;color:var(--gray);line-height:1.6;text-align:center}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.devis-success{text-align:center;padding:1.5rem 0 .5rem}
.devis-success .icon{font-size:3rem;margin-bottom:.75rem}
.devis-success h3{font-family:var(--font-display);font-size:1.8rem;letter-spacing:1px;margin-bottom:.75rem}
.devis-success p{color:var(--gray-light);font-size:.9rem;line-height:1.75;max-width:420px;margin:0 auto 1.25rem}
/* Champ piège anti-robot : invisible pour l'humain, rempli par les bots. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ANIMATION D'APPARITION */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .carousel-track{animation:none}
  html{scroll-behavior:auto}
}

/* RESPONSIVE */
@media(max-width:900px){
  /* Le visuel passe sous le texte et s'aplatit, pour ne pas repousser le
     premier appel à l'action sous la ligne de flottaison. */
  .page-hero .ph-grid{grid-template-columns:1fr;gap:2rem}
  .page-hero-visual img{aspect-ratio:16/10;max-height:280px}
}
@media(max-width:1200px){
  .services-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .service-card .card-inner{padding:1.6rem 1.4rem 1.75rem}
  .service-card h3{font-size:1.35rem;letter-spacing:1px}
  .service-card p{font-size:.86rem;line-height:1.65}
}
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .zone-content{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .carousel-item{width:280px;height:210px}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  /* Sur téléphone, la zone seule tient sur une ligne, pas la phrase complète.
     On bascule donc sur la version courte et on retire « déplacement offert »,
     que la page redit de toute façon plus bas. La zone est l'information qui
     compte pour quelqu'un qui arrive de Google. */
  :root{--topbar-h:30px}
  .topbar{font-size:.68rem;gap:.35rem;padding:0 .6rem}
  .topbar svg{width:13px;height:13px}
  .topbar .tb-long,.topbar .tb-sep,.topbar .tb-extra{display:none}
  .topbar .tb-court{display:inline}
  .nav-links{display:none}
  .nav-mobile-toggle{display:block}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,.7) 100%)}
  .hero-content{margin-left:0;padding:6.5rem 1.5rem 8.5rem}
  /* Les 4 chiffres de preuve restent sur UNE seule ligne sur téléphone. En flex
     ils passaient 3 + 1, ce qui isolait le délai de réponse et cassait la
     lecture en bloc. Grille à 4 colonnes, typo réduite en conséquence. */
  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:.6rem;margin-top:2.25rem;padding-top:1.5rem}
  .hero-stat .number{font-size:1.5rem;letter-spacing:0}
  .hero-stat .label{font-size:.6rem;letter-spacing:.2px;line-height:1.3;margin-top:.15rem}
  .section{padding:4rem 1.5rem}
  .section-sm{padding:3rem 1.5rem}
  .page-hero{padding:7.5rem 1.5rem 3rem}
  .carousel-item{width:260px;height:195px}
  .services-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .hero-actions a{text-align:center;justify-content:center}
  .form-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr;gap:2rem}
  .devis-fab{left:1rem;bottom:1rem;padding:.75rem 1.1rem;font-size:.78rem}
  .devis-modal{padding:0}
  .devis-inner{border-radius:0;min-height:100%}
  .flat-price{flex-direction:column;align-items:flex-start}
  /* Les grilles tarifaires tiennent en pleine largeur : deux colonnes seulement,
     le libellé de catégorie passe sur deux lignes si besoin. Aucun défilement
     horizontal ne doit rester. */
  .price-table{min-width:0}
  .price-table th,.price-table td{padding:.7rem .85rem;font-size:.85rem}
  .price-table caption{padding:.85rem .85rem .25rem;font-size:.72rem}
  .price-table thead th{font-size:.68rem;letter-spacing:.5px}
  .table-wrap{margin:1.25rem 0 .75rem}
  /* Vignettes plus basses sur téléphone : à 240px de haut, un montage
     vertical fait 192px de large, donc deux photos visibles à la fois. */
  .gs-item{height:240px}
  .gallery-strip::before,.gallery-strip::after{width:24px}
}