/* STELO MAP — feuille de style unique (mobile first) */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-600-900.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
:root{
  /* Palette de la plaquette STELO MAP (plaquette/src/_build/palette.json) */
  --f1:#AA6898; --f2:#83516A; --f3:#6D304B; --f4:#452529; --nuit:#2C1D22; --soft:#f1e4ea; --soft2:#f7eff3;
  --ink:#1d1d1f; --grey:#55555c; --line:#e6d4dd; --white:#fff;
  --grad:linear-gradient(120deg,#6D304B 0%,#83516A 55%,#9B5B7D 100%);
  --head:"Montserrat","Poppins","Arial Black","Segoe UI",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px; --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:#fff;padding-bottom:64px}
@media (min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--f2)}
a:hover{color:var(--f3)}
:focus-visible{outline:3px solid #ffd54f;outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-weight:900;font-size:clamp(1.75rem,6vw,3rem)}
h2{font-weight:800;font-size:clamp(1.45rem,4.2vw,2.2rem)}
h3{font-weight:800;font-size:1.2rem}
p{margin:0 0 1em}
ul{padding-left:1.2em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--f3);padding:10px 14px;z-index:100;font-weight:700}
.skip:focus{left:10px;top:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Marqueurs de brouillon : tout ce qui est en jaune est à compléter/valider */
.ph{background:#fff3a0;color:#5a4600;border-radius:4px;padding:0 .3em;font-weight:600;font-size:.95em}
.draft-banner{background:#fff3a0;color:#5a4600;font-size:.9rem;padding:.6em 0;border-bottom:1px solid #e6d36a}

/* En-tête */
.site-header{background:var(--grad);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(44,29,34,.3)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.wordmark{font-family:var(--head);font-weight:900;font-size:1.55rem;letter-spacing:.06em;color:#fff;text-decoration:none;white-space:nowrap;line-height:1}
.wordmark:hover{color:#fff}
.nav-toggle{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;border-radius:10px;padding:8px 12px;font:700 .95rem var(--head);cursor:pointer}
.site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--f3);padding:8px 20px 18px}
.site-nav.open{display:block}
.no-js .site-nav{display:block;position:static;padding:0 0 12px}
.no-js .nav-toggle{display:none}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:block;color:#fff;text-decoration:none;font-weight:700;font-family:var(--head);padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.15)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.site-nav .nav-cta{margin-top:10px;background:#fff;color:var(--f3);border-radius:999px;text-align:center;border:0}
@media (min-width:980px){
  .nav-toggle{display:none}
  .site-nav,.no-js .site-nav{display:block;position:static;background:none;padding:0}
  .site-nav ul{display:flex;align-items:center;gap:4px}
  .site-nav a{border:0;padding:8px 10px;font-size:.92rem;border-radius:8px}
  .site-nav a:hover{background:rgba(255,255,255,.14)}
  .site-nav .nav-cta{margin:0 0 0 8px;padding:9px 16px}
  .site-nav .nav-cta:hover{background:#fff;color:var(--f4)}
}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.3em;border-radius:999px;font:800 1rem var(--head);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--f3)}
.btn-white:hover{color:var(--f4)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.12)}
.btn-main{background:var(--f2);color:#fff}
.btn-main:hover{background:var(--f3);color:#fff}
.btn-line{background:#fff;color:var(--f2);border-color:var(--f2)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Héros */
.hero{background:var(--grad);color:#fff;overflow:hidden}
.hero-media{max-width:1400px;margin:0 auto}
.hero-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.hero-body{padding:28px 20px 40px}
.hero-body .kicker{font:800 .8rem var(--head);letter-spacing:.18em;text-transform:uppercase;opacity:.9;margin-bottom:.6em}
.hero-body h1{max-width:22ch}
.hero-body .lead{font-size:1.12rem;max-width:60ch;opacity:.96}
@media (min-width:900px){
  .hero{position:relative}
  .hero-body{padding:36px 20px 56px}
  .hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
}
.page-hero{background:var(--grad);color:#fff;padding:40px 0 44px}
.page-hero .kicker{font:800 .8rem var(--head);letter-spacing:.18em;text-transform:uppercase;opacity:.9;margin:0 0 .6em}
.page-hero p.lead{max-width:62ch;font-size:1.1rem;opacity:.96}
.page-hero .band{margin-top:22px;border-radius:var(--r);overflow:hidden;max-width:760px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.page-hero .band img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}

/* Sections */
.section{padding:52px 0}
.section.soft{background:var(--soft2)}
.section.dark{background:var(--nuit);color:#f7eff3}
.section.dark h2,.section.dark h3{color:#fff}
.section-head{max-width:720px;margin-bottom:28px}
.section-head p{color:var(--grey)}
.dark .section-head p{color:#e9cfd9}
.eyebrow{display:inline-block;font:800 .78rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--f2);margin-bottom:.5em}
.dark .eyebrow{color:#e3b5d2}

.grid{display:grid;gap:18px}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:899px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.card p{color:var(--grey)}
.card .more{margin-top:auto;font:800 .95rem var(--head);text-decoration:none}
.card .num{font:900 .85rem var(--head);color:#fff;background:var(--grad);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px}
.card.accent{border-top:5px solid var(--f2)}
.dark .card{background:#3a282e;border-color:#4d3840}
.dark .card p{color:#e6cfd8}

.checks{list-style:none;padding:0;margin:0 0 1em}
.checks li{position:relative;padding-left:1.8em;margin-bottom:.55em}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:1.05em;height:1.05em;border-radius:4px;background:var(--f2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.notice{border-left:5px solid var(--f2);background:var(--soft);padding:16px 18px;border-radius:0 var(--r) var(--r) 0;margin:1.2em 0}
.notice.info{border-color:var(--f1);background:var(--soft2)}
.notice strong{color:var(--f4)}
.badge{display:inline-block;font:800 .72rem var(--head);letter-spacing:.08em;text-transform:uppercase;background:var(--f4);color:#fff;border-radius:999px;padding:.3em .8em;margin-bottom:.8em}
.badge.soon{background:#672B42}

.cities{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 1em}
.cities li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4em 1em;font-weight:700;font-family:var(--head);font-size:.95rem;color:var(--f3)}

.cta-band{background:var(--grad);color:#fff;border-radius:22px;padding:32px 24px;display:grid;gap:18px}
@media (min-width:900px){.cta-band{grid-template-columns:1.4fr 1fr;align-items:center;padding:40px 44px}}
.cta-band p{opacity:.95;margin:0}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:16px 16px 16px 64px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font:900 1rem var(--head);display:grid;place-items:center}

.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;font-size:.97rem}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{background:var(--f3);color:#fff;font-family:var(--head)}
.compare tbody th{font-family:var(--head);color:var(--f4);width:30%}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}

.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font:800 1.02rem var(--head);padding:16px 0;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.5rem;color:var(--f2)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--grey)}

/* Formulaires */
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:16px}
@media (min-width:700px){.form{padding:30px}.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}
.form legend{font:800 1.05rem var(--head);color:var(--f4);margin-bottom:8px;padding:0}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:.95rem}
.field .hint{font-size:.85rem;color:var(--grey)}
.req{color:var(--f2)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea,input[type=file]{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid #d6c0cb;border-radius:10px;background:#fff;color:var(--ink)}
input[type=file]{padding:10px;background:var(--soft2)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--f2);outline:3px solid rgba(131,81,106,.2)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--f2);flex:0 0 auto}
.form-status{display:none;border-radius:10px;padding:14px 16px;background:var(--soft);color:var(--f4);font-weight:600}
.form-status.show{display:block}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:12px}
.contact-list li{display:flex;gap:12px;align-items:flex-start}
.contact-list .ico{flex:0 0 40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center}
.contact-list .ico svg{width:20px;height:20px;fill:#fff}
.map{border:0;width:100%;height:340px;border-radius:var(--r);background:var(--soft)}

/* Pages légales */
.legal{max-width:820px}
.legal h2{font-size:1.35rem;margin-top:1.6em}
.legal h3{font-size:1.08rem;margin-top:1.2em}

/* Pied de page */
.site-footer{background:var(--nuit);color:#ecdce3;padding:44px 0 28px;font-size:.95rem}
.site-footer a{color:#fff}
.site-footer .wordmark{font-size:1.8rem;display:inline-block;margin-bottom:10px}
.footer-grid{display:grid;gap:26px}
@media (min-width:800px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer h3{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#e3b5d2}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:6px}
.footer-bottom{border-top:1px solid #4d3840;margin-top:28px;padding-top:18px;font-size:.82rem;color:#c9b3bd}

/* Barre d'action mobile */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.15)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;font:800 .98rem var(--head);text-decoration:none;color:#fff;background:var(--f2)}
.mobile-bar a+a{background:#128C4A}
.mobile-bar svg{width:20px;height:20px;fill:currentColor}
@media (min-width:900px){.mobile-bar{display:none}}

.small{font-size:.88rem;color:var(--grey)}
.dark .small{color:#cdb1bd}
.mt{margin-top:1.4em}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Héros : sur grand écran, visuel encadré (image 3:2 entière, 820 px max) pour garder le titre visible */
@media (min-width:900px){
  .hero-media{max-width:860px;padding:28px 20px 0}
  .hero-media img{border-radius:18px;box-shadow:0 18px 40px rgba(44,29,34,.35)}
}

/* Simulateur E85 */
.sim{display:grid;gap:18px}
@media (min-width:980px){.sim{grid-template-columns:1.25fr 1fr;align-items:start}}
.sim-inputs{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:22px}
@media (min-width:700px){.sim-inputs{padding:28px}.sim .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}}
.sim fieldset{border:0;margin:0;padding:0;display:grid;gap:12px}
.sim legend{font:800 1.05rem var(--head);color:var(--f4);margin-bottom:6px;padding:0}
.sim [hidden]{display:none!important}
.sim select:disabled{background:#f5eef1;color:#8a767f}
.sim input[type=range]{width:100%;accent-color:var(--f2);height:32px}
.sim output{font-weight:800;color:var(--f2)}
.sim-result{background:var(--grad);color:#fff;border-radius:18px;padding:24px;box-shadow:0 14px 34px rgba(69,37,41,.28)}
@media (min-width:980px){.sim-result{position:sticky;top:84px;padding:30px}}
.sim-label{font:800 .8rem var(--head);letter-spacing:.16em;text-transform:uppercase;margin:0 0 .3em;opacity:.9}
.sim-big{font:900 clamp(2.4rem,11vw,3.6rem)/1.05 var(--head);margin:0 0 .15em}
.sim-big .per{font-size:.4em;font-weight:800;opacity:.9}
.sim-result.nosave .per{display:none}
.sim-result.nosave .sim-big{font-size:1.8rem}
.sim-sub{font-weight:700;font-size:1.1rem;margin:0 0 1em}
.sim-table{margin:0 0 1em;display:grid;gap:8px}
.sim-table div{display:flex;justify-content:space-between;gap:12px;background:rgba(255,255,255,.12);border-radius:10px;padding:10px 12px}
.sim-table dt{font-size:.95rem}
.sim-table dd{margin:0;font:800 1.05rem var(--head);text-align:right}
.sim-table small{display:block;font:600 .78rem var(--body);opacity:.85}
.sim-payback{font-size:.98rem;margin:0 0 1.1em}
.sim-disclaimer{font-size:.8rem;opacity:.9;margin:1em 0 0}
.sim-result.empty .sim-big{opacity:.6}
.sim-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--f4);font-weight:600}
.sim-quick strong{font:900 1.25rem var(--head);color:var(--f2)}
.sim-quick span{font-size:.85rem;color:var(--f2);margin-left:auto}
@media (min-width:980px){.sim-quick{display:none!important}}
/* Bandeau image des pages intérieures : image entière, jamais recadrée */
.page-hero .band{max-width:560px}
.page-hero .band img{aspect-ratio:3/2;object-fit:contain}
@media (min-width:900px){
  .page-hero.has-band .ph-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
  .page-hero.has-band .band{margin-top:0}
}
/* Ancres sous l'en-tête collant */
[id]{scroll-margin-top:84px}

/* Titres framboise foncé (comme la plaquette) */
.section h2,.section h3{color:var(--f3)}
.section.dark h2,.section.dark h3,.cta-band h2,.cta-band h3,.sim-result h2,.sim-result h3{color:#fff}
.eyebrow.on-grad{color:#f3dbe8}
/* Fiches « faits » des deux solutions E85 */
.facts{margin:0 0 1em;display:grid;gap:10px}
.facts div{border-bottom:1px solid var(--line);padding-bottom:8px}
.facts dt{font:800 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--f2)}
.facts dd{margin:2px 0 0;color:var(--grey)}
.hero-phone{margin:14px 0 0;font-size:.98rem}
.hero-phone a{color:#fff;font-weight:800}
@media (min-width:900px){.steps-4{grid-template-columns:repeat(4,1fr)}.steps-4 li{padding:60px 16px 16px}}
.checks.grid{gap:0 24px}
.checks.no li::before{background:var(--f4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/78% no-repeat}
.form .radios{display:flex;flex-wrap:wrap;gap:10px 24px}
.form .radios legend{width:100%;font:700 .95rem var(--body);color:var(--ink);margin-bottom:4px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:0 0 1em}
.table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table thead th{background:var(--f3);color:#fff;font-family:var(--head)}
.form-status.success{background:#e8f5ec;color:#1f5a33;border-left:5px solid #2e7d4a}
.form-status.error{background:#fdecee;color:#7a1c2b;border-left:5px solid #b3261e}
.form-status ul{margin:.5em 0 0;padding-left:1.2em;font-weight:500}
[aria-invalid="true"]{border-color:#b3261e!important}
button[disabled]{opacity:.7;cursor:progress}

/* =====================================================================
   Refonte visuelle 26/09/2026 : héros plein écran, sections sombres,
   cartes services, parcours animé, menu déroulant, fil d'Ariane.
   Teintes accordées à l'image officielle (framboise / fuchsia).
   ===================================================================== */
:root{
  --hot:#C8326A; --hot2:#E0588B; --deep:#1a0710;
  --grad:linear-gradient(120deg,#4a0a20 0%,#8a1942 55%,#b52a5e 100%);
  --grad-hot:linear-gradient(135deg,#8a1942 0%,#C8326A 100%);
}
/* Menu : sous-menus */
.site-nav{max-height:calc(100vh - 64px);overflow-y:auto}
.site-nav .sub{list-style:none;margin:0;padding:0 0 6px 14px}
.site-nav .sub a{font-size:.95rem;font-weight:600;padding:9px 4px;opacity:.95}
.site-nav .sub-parent{border-bottom:0}
@media (min-width:980px){
  .site-nav{max-height:none;overflow:visible}
  .site-nav .has-sub{position:relative}
  .site-nav .sub-parent::after{content:"";display:inline-block;width:.42em;height:.42em;border-right:2px solid;border-bottom:2px solid;transform:translateY(-3px) rotate(45deg);margin-left:.5em;opacity:.85}
  .site-nav .sub{display:none;position:absolute;left:0;top:100%;min-width:270px;background:#2a0f19;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;box-shadow:0 22px 44px rgba(0,0,0,.4)}
  .site-nav .has-sub:hover>.sub,.site-nav .has-sub:focus-within>.sub{display:block}
  .site-nav .sub a{padding:10px 12px;font-size:.9rem;border-radius:8px}
  .site-nav .sub a:hover{background:rgba(255,255,255,.1)}
  .site-nav .has-sub.is-current>.sub-parent{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
}
/* Fil d'Ariane */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;padding:0;margin:0 0 16px;font-size:.86rem}
.crumbs li+li::before{content:"›";margin-right:8px;opacity:.7}
.crumbs a{color:#fff;opacity:.82;text-decoration:none}
.crumbs a:hover{opacity:1;text-decoration:underline}
.crumbs a[aria-current]{opacity:1;font-weight:700}

/* Boutons renforcés */
.btn-lg{min-height:56px;padding:.9em 1.6em;font-size:1.05rem}
.btn-white{box-shadow:0 12px 30px rgba(224,88,139,.35)}
.btn-white:hover{box-shadow:0 16px 36px rgba(224,88,139,.5)}
.btn-main{background:var(--grad-hot);box-shadow:0 10px 24px rgba(200,50,106,.28)}
.btn-main:hover{background:var(--grad-hot);filter:brightness(1.08)}

/* Héros de l'accueil, plein écran */
.hero-xl{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 78% 28%,#7a1236 0%,#3d0819 48%,#1a0710 100%)}
.hero-glow{position:absolute;right:-15vw;top:-20vw;width:75vw;height:75vw;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(224,88,139,.42),rgba(224,88,139,0) 70%);animation:stGlow 16s ease-in-out infinite alternate}
@keyframes stGlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7%,9%,0) scale(1.1)}}
.hero-xl-media img{width:100%;height:auto;aspect-ratio:3/2;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.hero-xl-body{padding:4px 20px 26px}
.hero-xl .kicker{font:800 .78rem var(--head);letter-spacing:.2em;text-transform:uppercase;color:#f7b6d0;margin:0 0 .8em}
.hero-xl h1{margin:0 0 .5em}
.h1-big{display:block;font-size:clamp(2.1rem,8.4vw,4.4rem);line-height:1.02;letter-spacing:-.025em}
.h1-place{display:block;margin-top:.18em;font-size:clamp(1.35rem,4.6vw,2.3rem);font-weight:800;
  background:linear-gradient(90deg,#fff 0%,#f7b6d0 60%,#ff8fbd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-xl .lead{font-size:1.1rem;max-width:56ch;color:#f5e3ea}
.hero-xl .hero-phone a{color:#fff}
.hero-facts{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.hero-facts li{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px 16px;font-size:.93rem;color:#f1dde6}
.hero-facts svg{flex:0 0 22px;width:22px;height:22px;fill:#f7a3c4}
.hero-facts strong{display:block;color:#fff;font-family:var(--head);font-size:.92rem}
@media (min-width:700px){.hero-facts{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .hero-xl{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center}
  .hero-xl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:28px;padding:36px 0 26px}
  .h1-big{font-size:clamp(2.4rem,3.7vw,4rem)}
  .h1-place{font-size:clamp(1.5rem,2.2vw,2.3rem)}
  .hero-xl-body{order:-1;padding:0 0 0 max(20px,calc((100vw - 1180px)/2 + 20px))}
  .hero-xl-media img{border-radius:24px 0 0 24px;box-shadow:0 30px 70px rgba(0,0,0,.45);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%);mask-image:linear-gradient(to right,transparent 0,#000 9%)}
}
@media (min-width:1500px){.hero-xl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

/* Bandeaux des pages intérieures : même ambiance framboise profonde */
.page-hero{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(90% 130% at 88% 0%,#8a1942 0%,#4a0a20 45%,#1f0a12 100%)}
.page-hero::after{content:"";position:absolute;left:-10%;bottom:-60%;width:60%;height:120%;z-index:-1;
  background:radial-gradient(closest-side,rgba(224,88,139,.22),transparent 70%)}
.page-hero h1{font-size:clamp(1.9rem,6vw,3.3rem);letter-spacing:-.02em}
.page-hero .kicker{color:#f7b6d0}

/* Sections sombres avec lueurs */
.section.dark-glow{background:
  radial-gradient(60% 80% at 100% 0%,rgba(200,50,106,.30),transparent 60%),
  radial-gradient(55% 70% at 0% 100%,rgba(138,25,66,.35),transparent 62%),#1c0d13}
.dark-glow .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11);transition:border-color .25s ease,transform .25s ease}
.dark-glow .card:hover{border-color:rgba(247,163,196,.55);transform:translateY(-3px)}
.dark-glow a{color:#f7b6d0}

/* Cartes services avec survol */
.svc{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px 22px;
  text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
.svc::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad-hot);transform:scaleX(.18);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc:hover,.svc:focus-visible{transform:translateY(-5px);box-shadow:0 22px 44px rgba(109,20,55,.18);border-color:#e7bfd0;color:var(--ink)}
.svc:hover::before,.svc:focus-visible::before{transform:scaleX(1)}
.svc h3{color:var(--f3);margin:0 0 .3em}
.svc p{color:var(--grey);margin:0 0 .8em}
.svc-num{font:900 2.3rem/1 var(--head);color:transparent;-webkit-text-stroke:1.5px var(--hot);margin-bottom:8px}
.svc-more{margin-top:auto;font:800 .95rem var(--head);color:var(--hot)}
.svc-more span{display:inline-block;transition:transform .25s ease}
.svc:hover .svc-more span{transform:translateX(5px)}
.svc-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#f7eff3}
.svc-dark:hover,.svc-dark:focus-visible{border-color:rgba(247,163,196,.6);color:#fff;box-shadow:0 22px 44px rgba(0,0,0,.35)}
.section .svc-dark h3{color:#fff}
.svc-dark p{color:#e6cfd8}
.svc-dark .svc-more{color:#f7a3c4}
.card-glow{position:relative;box-shadow:0 18px 44px rgba(109,20,55,.12);overflow:hidden}
.card-glow::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-hot)}
.cta-xl{box-shadow:0 26px 60px rgba(109,20,55,.3)}

/* Parcours client */
.journey{list-style:none;counter-reset:j;padding:0;margin:0;display:grid;gap:16px}
.journey li{counter-increment:j;position:relative;padding-left:62px}
.journey .j-dot{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--grad-hot);display:grid;place-items:center;
  color:#fff;font:900 1rem var(--head);box-shadow:0 0 0 6px rgba(200,50,106,.13);transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.journey li>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.journey li:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;bottom:-14px;width:2px;background:linear-gradient(var(--hot),#e7bfd0);transform-origin:top;transition:transform .7s ease .25s}
@media (min-width:900px){
  .journey{grid-auto-flow:column;grid-auto-columns:1fr;gap:18px}
  .journey li{padding:62px 0 0}
  .journey li:not(:last-child)::after{left:54px;right:-12px;top:21px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--hot),#e7bfd0);transform-origin:left}
  .journey li>div{height:100%}
}
.dark .journey li>div{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* Apparition au défilement (classes posées par main.js, seulement sans prefers-reduced-motion) */
.rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.rv.is-in{opacity:1;transform:none}
.journey li.rv::after{transform:scaleY(0)}
.journey li.rv.is-in::after{transform:none}
@media (min-width:900px){.journey li.rv::after{transform:scaleX(0)}.journey li.rv.is-in::after{transform:none}}

/* Zones, pied de page */
.cities a{color:inherit;text-decoration:none}
.cities li:has(a){border-color:var(--hot);background:#fff5f9}
.cities li:has(a):hover{background:#ffe8f1}
.small-note{font-size:.86rem;opacity:.85}
@media (min-width:800px){.footer-grid{grid-template-columns:1.25fr 1fr 1fr 1.1fr}}
.site-footer .zones{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.site-footer .zones li{margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.15em .75em;font-size:.86rem}
.site-footer h3{margin-top:.4em}

/* FAQ */
.faq-layout{display:grid;gap:24px}
.faq-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.faq-toc a{display:inline-block;padding:.45em .95em;border:1px solid var(--line);border-radius:999px;text-decoration:none;font:700 .92rem var(--head);color:var(--f3);background:#fff}
.faq-toc a:hover{border-color:var(--hot);color:var(--hot)}
.faq-group+.faq-group{margin-top:34px}
@media (min-width:900px){
  .faq-layout{grid-template-columns:230px minmax(0,1fr);gap:40px}
  .faq-toc{position:sticky;top:96px;align-self:start}
  .faq-toc ul{flex-direction:column}
}
.faq details{transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:#e7bfd0;box-shadow:0 10px 26px rgba(109,20,55,.08)}
.compare{min-width:640px}

/* Photos et vidéo de l'atelier (emplacements prêts) */
.photo{margin:28px 0 0}
.photo img{width:100%;height:auto;border-radius:18px}
.photo figcaption,.vid figcaption{font-size:.88rem;color:var(--grey);margin-top:8px}
.vid{margin:30px 0 0}
.vid-play{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;background:var(--deep);aspect-ratio:16/9}
.vid-play img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vid-play:hover img{transform:scale(1.03)}
.vid-ico{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vid-ico::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent var(--hot)}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;background:#000}

@media (prefers-reduced-motion:reduce){
  .hero-glow{animation:none}
  .svc,.svc::before,.svc-more span,.dark-glow .card,.vid-play img,.journey .j-dot,.journey li::after{transition:none}
}
.hero-xl .btn-lg{padding:.85em 1.35em;font-size:1rem}

/* =====================================================================
   Animations « qui claquent » (26/09/2026) — transform / opacity uniquement.
   Entrée du héros en CSS pur : l'image s'affiche tout de suite (pas d'opacité),
   elle glisse et zoome légèrement. Tout est coupé par prefers-reduced-motion.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* Héros : mots qui se révèlent, image qui glisse, contenus en cascade */
  .hero-xl .w{display:inline-block;animation:stWord .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(90ms + var(--i) * 85ms)}
  @keyframes stWord{from{opacity:0;transform:translate3d(0,.55em,0) rotate(3deg)}}
  .hero-xl-media img{animation:stImg 1.5s cubic-bezier(.16,.84,.3,1) both}
  @keyframes stImg{from{transform:translate3d(7%,0,0) scale(1.08)}}
  .hero-xl .kicker,.hero-xl .lead,.hero-xl .btn-row,.hero-xl .hero-phone,.hero-facts li{animation:stUp .8s cubic-bezier(.2,.8,.2,1) both}
  .hero-xl .kicker{animation-delay:0ms}
  .hero-xl .lead{animation-delay:620ms}
  .hero-xl .btn-row{animation-delay:760ms}
  .hero-xl .hero-phone{animation-delay:860ms}
  .hero-facts li:nth-child(1){animation-delay:900ms}.hero-facts li:nth-child(2){animation-delay:990ms}.hero-facts li:nth-child(3){animation-delay:1080ms}
  @keyframes stUp{from{opacity:0;transform:translate3d(0,18px,0)}}
  .hero-xl-media,.hero-xl-body{will-change:transform}
  /* Second halo fuchsia, rotation lente */
  .hero-xl::before{content:"";position:absolute;left:-20vw;bottom:-35vw;width:65vw;height:65vw;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(200,50,106,.35),rgba(200,50,106,0) 70%);animation:stGlow2 19s ease-in-out infinite alternate}
  @keyframes stGlow2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12%,-8%,0) scale(1.15)}}
  /* Reflet lumineux : boutons (au survol + passage régulier sur le bouton principal) et cartes */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after,.svc::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;z-index:1;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
    transform:translate3d(-160%,0,0) skewX(-18deg);opacity:0}
  .svc::after{background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,236,245,.7) 50%,rgba(255,255,255,0) 100%)}
  .svc-dark::after{background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%)}
  .btn:hover::after,.btn:focus-visible::after,.svc:hover::after,.svc:focus-visible::after{animation:stShine .85s ease-out}
  .hero-xl .btn-white::after{animation:stShine 1.1s ease-out 2.2s,stShineLoop 7s ease-in-out 5s infinite}
  @keyframes stShine{0%{opacity:1;transform:translate3d(-160%,0,0) skewX(-18deg)}100%{opacity:1;transform:translate3d(330%,0,0) skewX(-18deg)}}
  @keyframes stShineLoop{0%,82%{opacity:0;transform:translate3d(-160%,0,0) skewX(-18deg)}83%{opacity:1}100%{opacity:1;transform:translate3d(330%,0,0) skewX(-18deg)}}
  /* Survols plus marqués */
  .btn{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .btn:hover{transform:translate3d(0,-3px,0)}
  .btn:active{transform:translate3d(0,0,0) scale(.98)}
  .svc:hover,.svc:focus-visible{transform:translate3d(0,-8px,0) scale(1.012)}
  .svc .svc-num{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .svc:hover .svc-num{transform:translate3d(4px,-2px,0) scale(1.08)}
  /* Cartes en cascade : un peu plus de mouvement que les autres éléments */
  .svc.rv,.card.rv{transform:translate3d(0,34px,0) scale(.97)}
  .svc.rv.is-in,.card.rv.is-in{transform:none}
  .svc.rv.is-in:hover{transform:translate3d(0,-8px,0) scale(1.012)}
  /* Titres de section : soulignement qui se trace */
  .section-head.rv h2::after{transform:scaleX(0)}
  .section-head.rv.is-in h2::after{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 250ms)}
  /* Parcours : pastilles qui s'allument */
  .journey li.rv .j-dot{transform:scale(.55)}
  .journey li.rv .j-dot::before{opacity:0}
  .journey li.rv.is-in .j-dot{transform:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.4) calc(var(--d,0ms) + 150ms)}
  .journey li.rv.is-in .j-dot::before{opacity:1;transition:opacity .45s ease calc(var(--d,0ms) + 250ms)}
  .journey li.rv.is-in .j-dot::after{animation:stRing 1.3s ease-out calc(var(--d,0ms) + 300ms) both}
  @keyframes stRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
  /* Bandeau défilant */
  .mq-track{animation:stMarquee 32s linear infinite}
  .marquee:hover .mq-track{animation-play-state:paused}
  @keyframes stMarquee{to{transform:translate3d(-50%,0,0)}}
}
/* Souligné des titres de section (état final, visible sans JS) */
.section-head h2::after{content:"";display:block;width:68px;height:4px;border-radius:4px;margin-top:.4em;background:var(--grad-hot);transform-origin:left}
.dark .section-head h2::after{background:linear-gradient(90deg,#f7a3c4,#C8326A)}
/* Pastilles du parcours : fond rosé + couche allumée (dégradé) + anneau */
.journey .j-dot{background:#d9a2bb;overflow:visible}
.journey .j-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--grad-hot)}
.journey .j-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(224,88,139,.8);opacity:0;pointer-events:none}
.journey .j-dot b{position:relative;z-index:1;color:#fff;font-weight:900}
/* Titre du héros : dégradé posé mot par mot (compatible avec l'animation) */
.h1-place{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.h1-place .w{background:linear-gradient(90deg,#fff 0%,#f7b6d0 70%,#ff9cc4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-xl-grid{perspective:1400px}
.hero-xl-media{transform-origin:30% 50%}
/* Bandeau défilant des services */
.marquee{overflow:hidden;background:#12060b;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.mq-track{display:flex;width:max-content}
.marquee ul{display:flex;list-style:none;margin:0;padding:0}
.marquee li{display:flex;align-items:center;gap:26px;padding:16px 0 16px 26px;font:900 clamp(1rem,2.4vw,1.45rem) var(--head);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.marquee li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--grad-hot);box-shadow:0 0 12px rgba(224,88,139,.8)}
.marquee li:nth-child(even){color:transparent;-webkit-text-stroke:1.2px #f7a3c4}
@media (prefers-reduced-motion:reduce){
  .mq-track{flex-wrap:wrap;width:auto}
  .marquee ul[aria-hidden]{display:none}
  .marquee ul{flex-wrap:wrap;justify-content:center}
}