/* Naëlle — refonte 2026. Mise en page inspirée de sitew.com, DA du thème naelle
   (crème, rouge, lilas ; Manrope + Cormorant ; logo Naëlle). */


:root{--bg:#f3f1ec;--card:#ffffff;--text:#242623;--muted:#696b61;--line:#d7d1c6;--accent:#9b462e;--accent-dark:#983810;--lilac:#f3e5d5;--pink:#edaa76;--pink-line:#e3d6c6;--radius:18px;--shadow:0 18px 50px #24231f12}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400;letter-spacing:-.045em;line-height:1.08}
h1{font-size:clamp(40px,5.4vw,76px)}h2{font-size:clamp(32px,3.9vw,54px)}h3{font-size:24px;letter-spacing:-.03em;line-height:1.2}
em{font-family:Fraunces,Georgia,serif;font-style:italic;color:var(--accent);letter-spacing:-.03em}
p{color:var(--muted)}strong{color:var(--text);font-weight:600}
::selection{background:var(--accent);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{width:90%;max-width:1200px;margin:auto}
.skip{position:fixed;left:16px;top:-100px;background:var(--text);color:#fff;padding:12px;z-index:100}.skip:focus{top:10px}
.cursor{display:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--accent);color:#fff;font-size:15px;border:1px solid var(--accent);transition:background .25s,transform .25s}
.btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text)}.btn-ghost:hover{background:var(--text);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--lilac);color:var(--accent-dark);font-size:13px;letter-spacing:.02em}
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);font-weight:600;margin-bottom:16px}

/* En-tête */
header{position:sticky;top:0;z-index:30;background:#faf8f4ee;backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-bottom-color:var(--line)}
.header-in{display:flex;align-items:center;gap:28px;height:84px}
.brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--accent)}
.brand-name{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-style:italic;font-size:32px;letter-spacing:-2px;padding-bottom:4px;border-bottom:3px solid var(--pink)}
.brand small{font-size:8px;letter-spacing:2px;color:var(--text);margin-top:6px}
.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:14px}
.main-nav>a,.nav-drop>a{padding:8px 0}.main-nav a:hover,.main-nav a[aria-current]{color:var(--accent)}
.nav-drop{position:relative}.nav-drop>a:after{content:' ▾';font-size:10px}
.nav-menu{display:none;position:absolute;top:100%;left:-20px;min-width:300px;padding:14px;margin-top:8px;background:var(--card);border:1px solid var(--pink-line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column}
.nav-menu:before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-menu a{padding:9px 10px;border-radius:8px}.nav-menu a:hover{background:var(--lilac);color:var(--text)}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:flex}
.header-cta{min-height:44px;padding:10px 20px;font-size:14px}
.header-tel{font-size:14px;font-weight:600;white-space:nowrap}.header-tel:hover{color:var(--accent)}
.is-home header:not(.scrolled) .header-tel{color:#fff}
@media(max-width:1200px){.header-tel{display:none}}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;margin-left:auto;z-index:42}
.menu-toggle span{height:1px;width:24px;background:var(--text)}
#mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:25;padding:100px 6% 30px;overflow-y:auto}
#mobile-menu nav{display:flex;flex-direction:column}#mobile-menu a{font-size:24px;padding:9px 0;border-bottom:1px solid var(--line)}
[hidden]{display:none!important}

/* Fil d'Ariane */
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:underline;text-underline-offset:4px}

/* Héros centré + capture */
.hero{text-align:center;padding:70px 0 0;background:radial-gradient(60% 55% at 50% 0%,#f3e5d5 0%,#faf8f400 100%)}
.hero h1{max-width:980px;margin:18px auto 22px}
.hero .lead{font-size:19px;max-width:720px;margin:0 auto;color:#3d3c38}
.hero .btn-row{justify-content:center;margin-top:30px}
.hero .note{font-size:13px;margin-top:14px}
.hero-shot{position:relative;max-width:980px;margin:56px auto 0}
.browser{border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 -6px 60px #b9002c1f;border:1px solid var(--pink-line);border-bottom:0;background:var(--card)}
.browser-bar{display:flex;gap:6px;align-items:center;padding:12px 16px;background:#2b252c;color:#c7c9bf;font-size:12px}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#8b9080;display:inline-block}
.browser-bar span{margin-left:auto;margin-right:auto}
.float{position:absolute;background:var(--card);border:1px solid var(--pink-line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);text-align:left;font-size:13px;line-height:1.4}
.float strong{display:block;font-size:24px;color:var(--accent);font-weight:400;letter-spacing:-.03em}
.float-l{left:-40px;top:30%}.float-r{right:-40px;top:55%}

/* Bandeau chiffres */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:46px 0;border-bottom:1px solid var(--line)}
.stats div{border-left:3px solid var(--accent);padding-left:18px}
.stats strong{display:block;font-size:40px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
.stats span{font-size:14px;color:var(--muted)}

/* Sections */
.section{padding:96px 0}
.section-head{text-align:center;max-width:820px;margin:0 auto 54px}
.section-head p{font-size:18px;margin-top:18px}
.tint{background:var(--lilac)}
.dark{background:#242623;color:#f3f1ec}.dark p{color:#c7c9bf}.dark .kicker{color:var(--pink)}

/* Blocs alternés image / texte */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split+.split{margin-top:96px}
.split.rev .split-media{order:2}
.split-media{background:var(--lilac);border-radius:var(--radius);padding:34px;position:relative}
.tint .split-media{background:var(--card)}
.split-media img{border-radius:12px;box-shadow:var(--shadow)}
.split-media .portrait{width:180px;height:180px;border-radius:50%;object-fit:cover;margin:10px auto;box-shadow:0 0 0 8px #efa1ef40}
.split-media .media-caption{margin-top:14px;font-size:13px;text-align:center}
.split-media.price-card{text-align:center;padding:46px 34px}
.price-card .big{font-size:72px;letter-spacing:-.06em;color:var(--accent);line-height:1}
.price-card p{margin-top:12px}
.split-text h2,.split-text h3.h2{margin-bottom:18px}
.split-text>p{font-size:17px;margin-top:12px}
.keys{margin-top:22px}.keys>strong{display:block;font-size:15px;margin-bottom:6px}
.checks{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:9px}
.checks li{position:relative;padding-left:28px;font-size:15px;color:#3d3c38}
.checks li:before{content:'✓';position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--lilac);color:var(--accent);font-size:11px;display:grid;place-items:center}
.split-text .btn-row{margin-top:28px}

/* Grille de fonctionnalités */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.feature .ico{width:42px;height:42px;border-radius:12px;background:var(--lilac);color:var(--accent);display:grid;place-items:center;font-size:15px;margin-bottom:16px}
.feature h3{font-size:18px;line-height:1.3}
.feature p{font-size:14px;margin-top:8px}

/* Cartes (services, avantages, métiers, projets) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .price{font-size:13px;font-weight:600;color:var(--accent-dark);letter-spacing:.04em}
.card p{font-size:15px}.card .more{margin-top:auto;padding-top:10px;font-size:14px;color:var(--text)}
.card .face{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #efa1ef40}
.card-shot{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.card-shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dark .card{background:#283630;border-color:#3a3f3a}.dark .card p{color:#c7c9bf}.dark .card .more{color:#f3f1ec}

/* Étapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{background:var(--card);border-radius:16px;padding:26px;border-top:3px solid var(--pink)}
.step span{font-size:13px;color:var(--accent)}.step h3{font-size:20px;margin:12px 0 8px}.step p{font-size:15px}

/* Offre */
.offer{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.offer-box{background:var(--card);border:1px solid var(--pink-line);border-top:4px solid var(--accent);border-radius:var(--radius);padding:34px;position:sticky;top:110px}
.offer-box .big{font-size:84px;letter-spacing:-.06em;color:var(--accent);line-height:1;margin:10px 0}
.offer-bonus{background:var(--lilac);border-radius:12px;padding:18px;margin:18px 0}
.offer-bonus h3{font-size:19px;margin-bottom:6px}.offer-bonus p{font-size:14px}
.offer .checks{grid-template-columns:1fr 1fr}

/* À propos */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.about-photo{border-radius:var(--radius);overflow:hidden;background:var(--lilac);padding:18px}
.about-photo img{border-radius:12px}
.about p{font-size:17px;margin-top:12px}

/* FAQ */
.faq{max-width:860px;margin:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:22px;color:var(--accent);transition:transform .25s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:15px}

/* Bandeau final */
.cta-band{text-align:center;border-radius:28px;padding:70px 30px;background:linear-gradient(135deg,#f3e5d5,#f3e5d5);margin:0 auto 96px}
.cta-band p{font-size:18px;max-width:640px;margin:16px auto 0}.cta-band .btn-row{justify-content:center;margin-top:28px}

/* Formulaire (landing.js) */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.lp-form-card{background:var(--card);padding:32px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.lp-form-card h2{font-size:32px;margin-bottom:8px}.lp-form-card>p{font-size:14px;margin-bottom:18px}
.lp-required{font-size:12px!important;margin-bottom:14px!important}
.lp-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lp-wide{grid-column:1/-1}
.lp-field label{display:block;font-size:13px;margin-bottom:6px}
.lp-field input,.lp-field select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cbc6bd;border-radius:10px;background:#fff;font:inherit;font-size:16px;color:var(--text)}
.lp-field input:focus,.lp-field select:focus{outline:2px solid var(--accent);outline-offset:1px}
[aria-invalid=true]{border-color:var(--accent)!important}
.lp-error{display:block;color:#9b462e;font-size:12px;margin-top:4px}.lp-error:empty{display:none}
.lp-consent{display:flex;gap:10px;align-items:start;font-size:12px;line-height:1.6;margin:20px 0 6px}
.lp-consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--accent)}
.lp-consent a{text-decoration:underline}
.lp-submit{width:100%;justify-content:space-between;margin-top:14px;cursor:pointer;font:inherit}
.lp-submit:disabled{opacity:.6;cursor:wait}
.lp-privacy{font-size:12px!important;margin-top:12px!important}
.lp-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#lead-status:not(:empty){padding:14px;margin-top:14px;background:var(--lilac);border-radius:10px;font-size:14px}
#lead-status[data-success=true]{background:#e4eddf}
#lead-unavailable{font-size:13px;margin-top:16px}#lead-unavailable a{text-decoration:underline}
.lp-mobile-estimate{display:none}

/* Pied de page */
footer{background:#242623;color:#f3f1ec;padding:64px 0 28px;font-size:14px}
footer p{color:#c7c9bf}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}
.foot h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:14px;color:var(--pink)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}.foot a:hover{color:var(--pink)}
footer .brand{align-items:flex-start;color:#f3f1ec}footer .brand small{color:#c7c9bf}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid #3a3f3a;margin-top:44px;padding-top:22px;font-size:12px;color:#c7c9bf}
.foot-bottom div{display:flex;flex-wrap:wrap;gap:18px}
.text-button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* Préférences cookies */
dialog{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:18px;max-width:560px;width:calc(100% - 32px);padding:34px}
dialog::backdrop{background:#0008}dialog h2{font-size:34px;margin:10px 0}dialog p{font-size:15px;margin:16px 0}
.close-dialog{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;min-width:44px;min-height:44px;cursor:pointer}
dialog .actions{display:flex;gap:12px;flex-wrap:wrap}dialog .actions button{font:inherit;cursor:pointer}

/* Texte légal */
.prose{max-width:820px;margin:auto}.prose p{font-size:17px;margin-top:14px}.prose h2{margin:34px 0 8px;font-size:30px}

@media(max-width:1000px){
  .features{grid-template-columns:repeat(2,1fr)}.cards,.steps{grid-template-columns:repeat(2,1fr)}.steps.four{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}.float{display:none}
}
@media(max-width:900px){
  .main-nav,.header-cta{display:none}.menu-toggle{display:flex}
  .split,.offer,.about,.form-wrap{grid-template-columns:1fr;gap:32px}.split.rev .split-media{order:0}
  .offer-box{position:static}.section{padding:70px 0}.split+.split{margin-top:64px}
}
@media(max-width:600px){
  .wrap{width:auto;margin:0 16px}
  .stats,.cards,.steps,.steps.four,.features,.foot,.offer .checks,.lp-fields{grid-template-columns:1fr}
  .stats{gap:20px}.hero{padding-top:44px}.hero .lead{font-size:17px}
  .split-media{padding:20px}.cta-band{padding:50px 20px;border-radius:20px}
  .btn{width:100%;justify-content:center}.btn-row{flex-direction:column;align-items:stretch}
  .lp-mobile-estimate{display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:20;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:var(--shadow)}
}

/* ===================== Accueil 2026 : composants (code propre au site) ===================== */
/* Menus déroulants avec vignettes */
.nav-menu.mega{display:none;grid-template-columns:1fr 1fr;gap:4px;min-width:560px;padding:16px}
.nav-drop:hover .nav-menu.mega,.nav-drop:focus-within .nav-menu.mega{display:grid}
.nav-menu.mega a{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px;white-space:normal;line-height:1.3}
.thumb{flex:0 0 40px;width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--lilac);color:var(--accent-dark);display:grid;place-items:center;font-size:15px;font-weight:600}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Menu mobile : sections dépliables */
#mobile-menu details{border-bottom:1px solid var(--line)}
#mobile-menu summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:24px;cursor:pointer}
#mobile-menu summary::-webkit-details-marker{display:none}
#mobile-menu summary:after{content:'+';color:var(--accent);font-size:26px}
#mobile-menu details[open] summary:after{content:'−'}
#mobile-menu details a{display:flex;align-items:center;gap:12px;font-size:17px;min-height:48px;border-bottom:0;padding:6px 0}

/* Héros plein écran */
.h-hero{min-height:calc(100svh - 84px);display:flex;flex-direction:column;justify-content:center;text-align:center;padding:48px 0 0;background:radial-gradient(70% 60% at 50% 0%,#f3e5d5 0%,#faf8f400 100%)}
.h-hero h1{max-width:900px;margin:16px auto 18px}
.h-hero .lead{font-size:19px;max-width:620px;margin:0 auto;color:#3d3c38}
.h-hero .btn-row{justify-content:center;margin-top:28px}
.h-hero-shot{max-width:1100px;margin:44px auto 0;width:100%}
.h-hero-shot img{width:100%;height:auto;display:block}

/* Carrousels */
.carousel{position:relative}
.car-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.car-head .section-head{text-align:left;margin:0}
.car-nav{display:flex;gap:10px}
.car-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--text);background:transparent;color:var(--text);font-size:20px;cursor:pointer;display:grid;place-items:center}
.car-btn:hover{background:var(--text);color:#fff}.car-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--text)}
.car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;padding:4px 0 16px;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;min-width:0}
.car-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
a.car-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.car-card .car-img{aspect-ratio:4/3;background:var(--lilac);overflow:hidden}
.car-card .car-img img{width:100%;height:100%;object-fit:cover}
.car-card .car-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.car-card .price{font-size:13px;font-weight:600;color:var(--accent-dark);letter-spacing:.04em}
.car-card p{font-size:15px}.car-card .more{margin-top:auto;padding-top:8px;font-size:14px;color:var(--text)}

/* Emplacement d'image libre de droits à ajouter */
.ph{width:100%;height:100%;min-height:160px;display:grid;place-items:center;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,#f3e5d5 0 14px,#f3e5d5 14px 28px);color:var(--accent-dark);font-size:13px;line-height:1.4}
.ph strong{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;color:var(--accent-dark)}

/* Pourquoi un site : 3 points */
.h-why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.h-why div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.h-why .ico{width:42px;height:42px;border-radius:12px;background:var(--lilac);color:var(--accent);display:grid;place-items:center;margin-bottom:14px}
.h-why h3{font-size:20px}.h-why p{font-size:15px;margin-top:8px}

/* Méthode en étapes alternées */
.h-steps{display:grid;gap:56px}
.h-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.h-step:nth-child(even) .h-step-media{order:2}
.h-step-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--lilac)}
.h-step-media img{width:100%;height:100%;object-fit:cover}
.h-step .num{font-size:13px;color:var(--accent);letter-spacing:.1em}
.h-step h3{font-size:clamp(24px,2.6vw,34px);margin:10px 0 10px}
.h-step p{font-size:17px;max-width:460px}

/* Réalisations en grand */
.h-works{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:22px}
.h-work{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:#242623;color:#f3f1ec;min-height:260px}
.h-work:first-child{grid-row:span 2}
.h-work img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s;opacity:.92}
.h-work:hover img{transform:scale(1.04);opacity:.75}
.h-work .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,#181818e6,#18181800)}
.h-work .cap strong{display:block;font-size:24px;font-weight:400;letter-spacing:-.03em;color:#f3f1ec}
.h-work .cap span{font-size:13px;color:#e3d6c6}

/* Bande défilante */
.marquee{overflow:hidden;display:flex;gap:20px;padding:6px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:20px;flex:0 0 auto;animation:mq 45s linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
.mq-track a{flex:0 0 auto;width:min(420px,72vw);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.mq-track img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
@keyframes mq{to{transform:translateX(calc(-100% - 20px))}}

/* Deux cartes Blog / Contact */
.h-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.h-duo a{display:flex;flex-direction:column;gap:10px;padding:34px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);min-height:220px;transition:transform .25s,box-shadow .25s}
.h-duo a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.h-duo a:last-child{background:var(--accent);color:#fff;border-color:var(--accent)}.h-duo a:last-child p,.h-duo a:last-child .kicker{color:#fff}
.h-duo h3{font-size:30px}.h-duo .more{margin-top:auto;font-size:15px}

/* Apparition au défilement */
.will-reveal{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease}
.will-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}.will-reveal{opacity:1;transform:none;transition:none}.h-work img{transition:none}}

@media(max-width:1000px){.car-track>*{flex-basis:calc((100% - 20px)/2)}.nav-menu.mega{min-width:480px}}
@media(max-width:900px){.h-step,.h-works{grid-template-columns:1fr;gap:24px}.h-step:nth-child(even) .h-step-media{order:0}.h-work:first-child{grid-row:auto}.h-why,.h-duo{grid-template-columns:1fr}.car-nav{display:none}}
@media(max-width:600px){
  body{font-size:16px}
  .car-track>*{flex-basis:82%}
  .h-hero{min-height:auto;padding-top:36px}.h-hero .lead{font-size:17px}
  .h-step p,.h-why p,.car-card p,.card p,.feature p,.checks li,.step p,.faq details p,.stats span,.media-caption{font-size:16px}
  .h-duo a{padding:26px;min-height:0}
}
@media(max-width:600px){main .offer-box p,main .form-wrap p,main .lp-form-card p,main .carousel p,.lp-required,.lp-privacy{font-size:16px!important}}

/* Carrousel infini continu (accueil, services) */
.flow{overflow-x:auto;touch-action:pan-y;scrollbar-width:none;padding:6px 0 18px;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.flow::-webkit-scrollbar{display:none}
.flow.is-flowing{overflow:hidden}
.flow:active{cursor:grabbing}
.flow-track{display:flex;gap:20px;width:max-content;will-change:transform}
.flow-track>*{flex:0 0 clamp(260px,27vw,360px);user-select:none;-webkit-user-drag:none}
.flow-track img{pointer-events:none}
@media(max-width:600px){.flow-track>*{flex-basis:78vw}.flow{mask-image:none}}

/* ===================== Accueil immersif (sections hx-) ===================== */
/* En-tête transparent superposé au héros, puis plein au défilement */
.is-home header{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);background:transparent;backdrop-filter:none}
.is-home header .brand small,.is-home header .main-nav>a,.is-home header .nav-drop>a{color:#fff}
.is-home header .menu-toggle span{background:#fff}
.is-home header.scrolled{background:#faf8f4ee;backdrop-filter:blur(14px)}
.is-home header.scrolled .brand small,.is-home header.scrolled .main-nav>a,.is-home header.scrolled .nav-drop>a{color:var(--text)}
.is-home header.scrolled .menu-toggle span,.is-home.menu-open header .menu-toggle span{background:var(--text)}
.is-home .nav-menu a{color:var(--text)!important}
.is-home.menu-open header .brand small{color:var(--text)}

/* 1. Héros plein écran */
.hx-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.hx-hero-media,.hx-hero-overlay{position:absolute;inset:0;z-index:-1}
.hx-hero-media img,.hx-hero-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hx-video{position:absolute;inset:0;opacity:0;transition:opacity .8s}.hx-video.is-ready{opacity:1}
.hx-hero-overlay{background:linear-gradient(180deg,#181818b3 0%,#18181880 45%,#181818cc 100%)}
.hx-hero-content{padding:120px 0 90px}
.hx-hero h1{color:#fff;max-width:960px;margin:20px auto 18px;font-size:clamp(44px,6.6vw,96px)}
.hx-hero h1 em{color:var(--pink)}
.hx-hero .lead{color:#f3f1ec;font-size:20px;max-width:620px;margin:0 auto}
.hx-hero .pill{background:#ffffff1f;color:#fff;backdrop-filter:blur(6px)}
.hx-hero .btn-row{justify-content:center;margin-top:30px}
.hx-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:28px;height:46px;border:2px solid #ffffffb3;border-radius:16px}
.hx-scroll span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:hxdot 1.8s ease-in-out infinite}
@keyframes hxdot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
/* entrée du héros : GSAP (motion.js), contenu visible sans JavaScript */

/* 2. Bande continue des réalisations */
.hx-band{padding:72px 0 40px}
.hx-shot{display:block}.hx-shot .browser{border-radius:14px;border-bottom:1px solid var(--pink-line)}
.hx-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hx-shot-cap{display:block;margin-top:10px;font-size:14px;color:var(--muted)}
.flow-track>.hx-shot{flex-basis:clamp(280px,32vw,460px)}
.hx-flow-toggle{min-height:44px;font-size:14px;color:var(--muted)}

/* 3. Chiffres clés sombres */
.hx-dark{background:#242623;color:#f3f1ec}
.hx-dark p,.hx-dark .section-head p{color:#c7c9bf}.hx-dark .kicker{color:var(--pink)}.hx-dark h2,.hx-dark h3{color:#f3f1ec}
.hx-fig-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3a3f3a;border-bottom:1px solid #3a3f3a}
.hx-fig{padding:34px 22px;border-left:1px solid #3a3f3a}.hx-fig:first-child{border-left:0;padding-left:0}
.hx-fig strong{display:block;font-size:clamp(44px,5vw,72px);font-weight:400;letter-spacing:-.05em;line-height:1;color:#f3f1ec;font-variant-numeric:tabular-nums}
.hx-fig>span{display:block;margin-top:10px;font-size:15px;color:#c7c9bf}
.hx-about{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center;margin-top:80px}
.hx-about-photo{border-radius:var(--radius);overflow:hidden}.hx-about p{font-size:17px;margin-top:12px}.hx-about strong{color:#f3f1ec}

/* 4. Processus */
.hx-proc{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.hx-proc-visual{position:sticky;top:120px;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--lilac)}
.hx-proc-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .9s;transform:scale(1.04)}
.hx-proc-visual img.is-active{opacity:1;transform:scale(1)}
.hx-proc-list{list-style:none;margin:0;padding:0 0 0 30px;position:relative;display:grid;gap:12vh}
.hx-proc-bar{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--pink-line)}
.hx-proc-bar span{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.hx-proc-step{position:relative;transition:opacity .4s}
.hx-proc-step:before{content:'';position:absolute;left:-35px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.hx-proc-step .num{font-size:13px;color:var(--accent);letter-spacing:.1em}.hx-proc-step h3{font-size:clamp(24px,2.6vw,34px);margin:10px 0}.hx-proc-step p{font-size:17px}
.hx-proc-inline{display:none}
.hx-js .hx-proc-step{opacity:.35}.hx-js .hx-proc-step.is-active{opacity:1}

/* 5. Visuel immersif */
.hx-stage{position:relative;max-width:1080px;margin:0 auto;padding:40px 0 60px}
.hx-stage-back .browser{border-radius:18px;border-bottom:1px solid var(--pink-line);box-shadow:0 30px 80px #b9002c26}
.hx-stage-back img{width:100%;display:block}
.hx-chip{position:absolute;max-width:270px;background:var(--card);border:1px solid var(--pink-line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);text-align:left}
.hx-chip strong{display:block;font-size:18px;font-weight:500;margin:6px 0 4px}.hx-chip span:last-child{font-size:14px;color:var(--muted)}
.hx-chip .ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lilac);color:var(--accent);font-size:12px}
.hx-chip-0{left:-30px;top:18%}.hx-chip-1{right:-30px;top:42%}.hx-chip-2{left:8%;bottom:0}

/* 6. Mosaïque sombre */
.hx-mosaic{columns:3 260px;column-gap:20px}
.hx-m{break-inside:avoid;margin:0 0 20px;background:#283630;border:1px solid #3a3f3a;border-radius:var(--radius);padding:28px;display:block}
.hx-m h3{font-size:22px;margin-bottom:10px}.hx-m p{font-size:15px}
.hx-m.tall{padding:44px 28px}.hx-m.wide{background:var(--accent);border-color:var(--accent)}.hx-m.wide p{color:#fff}
.hx-m-photo{padding:0;overflow:hidden}.hx-m-photo img{width:100%;display:block}
.hx-m-photo figcaption{padding:14px 18px;font-size:13px;color:#c7c9bf}

/* 7. Sélecteur de services */
.hx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
.hx-tab{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:15px;color:var(--text);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.hx-tab:hover{border-color:var(--accent)}.hx-tab[aria-selected=true]{background:var(--text);color:#fff;border-color:var(--text)}
.hx-panels{position:relative}
.hx-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hx-panel-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--lilac)}.hx-panel-media img{width:100%;height:100%;object-fit:cover}
.hx-panel-text h3{font-size:clamp(28px,3vw,40px);margin:10px 0 12px}.hx-panel-text p{font-size:17px}.hx-panel-text .btn{margin-top:24px}
.hx-panel-text .price{font-size:13px;font-weight:600;color:var(--accent-dark);letter-spacing:.06em}
.hx-panel.is-entering{animation:hxpanel .45s ease both}
@keyframes hxpanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 8. Galerie horizontale par cartes */
.hx-slides>*{flex-basis:calc((100% - 40px)/3)}
.hx-slide{display:block;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.hx-slide:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hx-slide-img{aspect-ratio:4/5;overflow:hidden;background:var(--lilac)}.hx-slide-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hx-slide:hover .hx-slide-img img{transform:scale(1.05)}
.hx-slide-body{padding:22px}.hx-slide-body h3{font-size:24px}.hx-slide-body p{font-size:15px;margin-top:6px}.hx-slide-body .more{display:block;margin-top:12px;font-size:14px}
.hx-progress{height:3px;background:var(--pink-line);border-radius:3px;margin-top:6px;overflow:hidden}.hx-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

/* 9. Tarifs */
.hx-prices{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px;align-items:stretch}
.hx-price{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.hx-price:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hx-price .big{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.05em;color:var(--accent);line-height:1.05;margin:8px 0 16px}
.hx-price .big s{font-size:.45em;color:var(--muted);letter-spacing:0}
.hx-price-main{border-top:4px solid var(--accent)}.hx-price-main .btn{margin-top:18px;align-self:flex-start}
.hx-price-note{font-size:14px;margin-top:14px}
.hx-included{margin-top:90px}

/* 11. Réalisations immersives */
.hx-works{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:240px;gap:20px}
.hx-work{position:relative;border-radius:var(--radius);overflow:hidden;display:block;background:#283630}
.hx-work-0{grid-column:span 4;grid-row:span 2}.hx-work-1,.hx-work-2{grid-column:span 2}
.hx-work img{width:100%;height:100%;object-fit:cover;transition:transform .7s,opacity .4s;opacity:.85}
.hx-work:hover img{transform:scale(1.05);opacity:.65}
.hx-work .cap{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(0deg,#181818f0,#18181800)}
.hx-work .cap strong{display:block;font-size:26px;font-weight:400;color:#f3f1ec}.hx-work .cap span{display:block;font-size:13px;color:#e3d6c6}
.hx-work .more{margin-top:8px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.hx-work:hover .more,.hx-work:focus-visible .more{opacity:1;transform:none}

/* 12. FAQ sombre, ouverture animée */
.hx-faq .faq details{background:transparent;border:0;border-bottom:1px solid #3a3f3a;border-radius:0;margin:0;padding:0}
.hx-faq .faq summary{color:#f3f1ec;padding:24px 0}.hx-faq .faq details p{color:#c7c9bf}
.hx-faq .faq summary:after{transition:transform .3s}
.faq details .faq-body{overflow:hidden}

/* 13. Grand appel final */
.hx-final{background:#242623;color:#f3f1ec;text-align:center;padding:120px 0 110px;border-bottom:1px solid #3a3f3a}
.hx-final .kicker{color:var(--pink)}.hx-final p{color:#c7c9bf;font-size:18px;margin:16px 0 30px}
.hx-final-title{font-size:clamp(44px,7.5vw,112px);max-width:1100px;margin:0 auto;color:#f3f1ec;line-height:1}
.btn{transition:background .25s,transform .25s,box-shadow .25s}.btn:hover{box-shadow:0 10px 30px #9b462e33}
.btn:active{transform:translateY(0) scale(.98)}

@media(max-width:1000px){.hx-fig-grid{grid-template-columns:1fr 1fr}.hx-fig:nth-child(3){border-left:0;padding-left:0}.hx-prices{grid-template-columns:1fr 1fr}.hx-price-main{grid-column:1/-1}.hx-slides>*{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:900px){
  .hx-about,.hx-proc,.hx-panel{grid-template-columns:1fr;gap:28px}
  .hx-proc-visual{display:none}.hx-proc-inline{display:block;width:100%;border-radius:14px;margin-top:16px;aspect-ratio:4/3;object-fit:cover}.hx-proc-list{gap:48px}
  .hx-js .hx-proc-step{opacity:1}
  .hx-chip{position:static;max-width:none;margin-top:14px}.hx-stage{padding:20px 0 0}
  .hx-works{grid-template-columns:1fr;grid-auto-rows:220px}.hx-work-0,.hx-work-1,.hx-work-2{grid-column:auto;grid-row:auto}
  .hx-work .more{opacity:1;transform:none}
}
@media(max-width:600px){
  .hx-hero h1{font-size:clamp(38px,11vw,54px)}.hx-hero .lead{font-size:17px}.hx-hero-content{padding:110px 0 100px}
  .hx-fig-grid{grid-template-columns:1fr}.hx-fig{border-left:0;padding:24px 0;border-top:1px solid #3a3f3a}.hx-fig:first-child{border-top:0}
  .hx-prices{grid-template-columns:1fr}.hx-mosaic{columns:1}.hx-slides>*{flex-basis:80%}
  .hx-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}.hx-tab{flex:0 0 auto}
  .hx-final{padding:80px 0}.hx-final-title{font-size:clamp(36px,11vw,52px)}
}
@media(prefers-reduced-motion:reduce){.hx-in,.hx-scroll span{animation:none}.hx-panel.is-entering{animation:none}.hx-proc-visual img,.hx-work img,.hx-slide-img img{transition:none}}

.hx-final .btn-ghost{color:#f3f1ec;border-color:#f3f1ec}.hx-final .btn-ghost:hover{background:#f3f1ec;color:#242623}
@media(max-width:600px){.hx-m p,.hx-price p,.hx-price-note,.hx-shot-cap,.hx-panel-text p,.hx-slide-body p,.hx-chip span:last-child{font-size:16px!important}}

/* =====================================================================================================
   Gabarit Services / Métiers (tp-*) — structure de la vidéo de référence, DA Naëlle (crème, nuit #242623, rouge, rose).
   Sans JavaScript tout est visible ; les effets n'utilisent que transform, opacity et clip-path (pas de décalage de mise en page).
   ===================================================================================================== */
.tp{--night:#283630;--night-2:#1f2a25;--night-line:#ffffff1c;--cream:#f3f1ec;--fog:#c7c9bf}
.tp-night,.tp-hero,.tp-faq,.tp-final{background:var(--night);color:var(--cream)}
.tp-night p,.tp-hero p,.tp-faq p,.tp-final p{color:var(--fog)}
.tp-night strong,.tp-hero strong,.tp-faq strong,.tp-final strong{color:var(--cream)}
.tp-night h2,.tp-night h3,.tp-faq h2,.tp-final h2{color:var(--cream)}
.tp-night em,.tp-hero em,.tp-faq em,.tp-final em{color:var(--pink)}
.tp-night .kicker,.tp-hero .kicker,.tp-faq .kicker,.tp-final .kicker{color:var(--pink)}
.tp-night .btn-ghost,.tp-hero .btn-ghost,.tp-final .btn-ghost{color:var(--cream);border-color:var(--cream)}
.tp-night .btn-ghost:hover,.tp-hero .btn-ghost:hover,.tp-final .btn-ghost:hover{background:var(--cream);color:var(--night)}
.tp-night .car-btn{border-color:var(--cream);color:var(--cream)}.tp-night .car-btn:hover{background:var(--cream);color:var(--night)}.tp-night .car-btn:disabled{color:var(--cream);background:transparent}
.tp .section-head{max-width:760px}

/* Mots découpés par l'animation (le texte reste dans le document) */
.tw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}.tw>span{display:inline-block}
.tp-say .tw{overflow:visible}

/* Indicateur de section (comme la pastille flottante de la référence) */
.tp-pill{position:fixed;left:50%;top:96px;z-index:24;transform:translate(-50%,-12px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.tp-pill span{display:inline-block;padding:8px 18px;border-radius:999px;background:#181818d9;color:var(--cream);font-size:13px;backdrop-filter:blur(10px);border:1px solid #ffffff22}
.tp-pill.is-on{opacity:1;transform:translate(-50%,0)}

/* 1. Héros */
.tp-hero{position:relative;text-align:center;padding:64px 0 0;overflow:hidden;isolation:isolate}
.tp-hero:before{content:'';position:absolute;inset:0 0 auto;height:75%;background:radial-gradient(55% 60% at 50% 0%,#efa1ef30,#18181800);z-index:-1}
.tp-hero .crumbs{color:var(--fog)}.tp-hero .crumbs a{color:var(--cream)}
.tp-hero .pill{background:#ffffff14;color:var(--cream)}
.tp-hero h1{color:var(--cream);max-width:1000px;margin:20px auto 22px;font-size:clamp(42px,6.2vw,92px)}
.tp-hero .lead{color:#e6e1dd;font-size:19px;max-width:700px;margin:0 auto}
.tp-hero .btn-row{justify-content:center;margin-top:30px}
.tp-hero .note{margin-top:14px;font-size:13px}
.tp-stage{position:relative;margin-top:60px}
.tp-frame{position:relative;max-width:1040px;margin:0 auto;border-radius:22px 22px 0 0;overflow:hidden;background:#2a2827;border:1px solid var(--night-line);border-bottom:0;transform-origin:50% 100%;box-shadow:0 -24px 90px #efa1ef1f}
.tp-frame-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#232121;color:var(--fog);font-size:12px}
.tp-frame-bar i{width:9px;height:9px;border-radius:50%;background:#ffffff30}.tp-frame-bar span{margin:0 auto;padding-right:40px}
.tp-frame-img{aspect-ratio:16/9;overflow:hidden;background:#2a2827}
.tp-frame-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0}
.tp-frame-img.tp-portrait img{object-position:50% 30%}
.tp-stage .float{color:var(--text)}.tp-stage .float-l{left:2%;top:34%}.tp-stage .float-r{right:2%;top:58%}
.tp-stats{background:var(--night);border-top:1px solid var(--night-line)}
.tp-stats .stats{border:0;text-align:left}.tp-stats .stats strong{color:var(--cream)}.tp-stats .stats span{color:var(--fog)}

/* 2. Phrase-manifeste */
.tp-statement{padding:120px 0 80px;background:var(--bg)}
.tp-statement .wrap{max-width:1000px}
.tp-statement h2{max-width:860px}
.tp-say{margin-top:26px}
.tp-say p{font-size:clamp(22px,2.5vw,34px);line-height:1.34;letter-spacing:-.025em;color:var(--text);margin-top:18px;max-width:30em}
.tp-keys-title{display:block;margin-top:40px;font-size:15px}
.tp-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.tp-keys li{position:relative;padding:16px 18px 16px 44px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:15px;line-height:1.5;color:var(--muted)}
.tp-keys li:before{content:'';position:absolute;left:18px;top:21px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tp-aside{margin-top:44px;max-width:560px}
.tp-aside .price-card,.tp-card-media .price-card,.tp-box-media .price-card{text-align:left;padding:0}
.tp-aside .browser{border-radius:16px;border-bottom:1px solid var(--pink-line)}
.tp-aside .media-caption{margin-top:12px;font-size:13px}
.tp-aside .portrait{width:140px;height:140px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 8px #efa1ef40}

/* 3. Rail « inclus » */
.tp-incl{padding:20px 0 120px;background:var(--bg)}
.tp-rail{margin-top:34px}
.tp-rail .car-track{margin:0;padding:4px 0 18px;list-style:none}
.tp-incl .car-track>*{flex-basis:clamp(240px,24vw,300px)}
.tp-fcard{display:flex;flex-direction:column;gap:14px;min-height:230px;padding:26px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.tp-num{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--accent-dark)}
.tp-fcard h3{font-size:22px;margin-top:auto}.tp-fcard p{font-size:15px}
.tp-rail-foot{display:flex;align-items:center;gap:24px;margin-top:14px}
.tp-progress{flex:1;margin:0;height:2px}
.tp-arrows{display:flex;gap:10px}

/* 4–10. Rideau sombre */
.tp-night{position:relative;margin-top:-1px}
.tp-stack{padding:120px 0 40px}
.tp-cards{display:grid;gap:26px;margin-top:10px}
.tp-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3.4vw,48px);
  border-radius:28px;background:var(--night-2);border:1px solid var(--night-line);box-shadow:0 -18px 60px #0000004d;transform-origin:50% 0}
.tp-card-media{min-width:0}
.tp-card-media .browser{border-radius:16px;border:1px solid var(--night-line)}
.tp-card-media .media-caption{margin-top:12px;font-size:13px;text-align:left}
.tp-card-media .price-card .big,.tp-box-media .price-card .big{font-size:clamp(56px,7vw,96px)}
.tp-card-media .price-card .kicker{margin-bottom:10px}
.tp-card-text{min-width:0}.tp-card-text h2,.tp-card-text h3{margin-bottom:16px}.tp-card-text h3{font-size:clamp(28px,3vw,40px)}
.tp-card-text p+p{margin-top:12px}.tp-card-text .btn-row{margin-top:24px}
.tp-night .tp-keys li{background:#ffffff08;border-color:var(--night-line);color:var(--fog)}
.tp-night .price-card .big{color:var(--pink)}

.tp-list{padding:110px 0}
.tp-list-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);align-items:start}
.tp-list-head{position:sticky;top:120px}
.tp-list-items{margin:0;padding:0;list-style:none;border-top:1px solid var(--night-line)}
.tp-list-items li{position:relative;padding:26px 0;border-bottom:1px solid var(--night-line)}
.tp-list-items h3{font-size:22px;margin-bottom:8px}.tp-list-items p{font-size:17px}
.tp-one{display:flex;align-items:center;gap:18px;margin-top:30px}
.tp-one>span{font-size:88px;line-height:1;color:var(--pink);letter-spacing:-.06em}
.tp-one p{font-size:15px}.tp-one strong{display:block;font-size:12px;letter-spacing:.12em;margin-bottom:4px}
.tp-list>.wrap>div[style]{margin-top:48px!important}

.tp-show{padding:110px 0 60px}
.tp-show-group+.tp-show-group{margin-top:90px}
.tp-show .section-head{text-align:center;margin:0 auto}
.tp-show .car-track>*{flex-basis:clamp(260px,26vw,340px)}
.tp-tile{position:relative;display:flex;flex-direction:column;height:100%;min-height:440px;padding:22px;border-radius:24px;overflow:hidden;isolation:isolate;background:var(--night-2);border:1px solid var(--night-line)}
.tp-tile-img{position:absolute;inset:0;z-index:-1}
.tp-tile-img:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#18181826 0%,#242623 78%)}
.tp-tile-img img{width:100%;height:62%;object-fit:cover;object-position:50% 20%;transition:transform .6s}
.tp-tile:hover .tp-tile-img img{transform:scale(1.04)}
.tp-tile-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);font-weight:600}
.tp-tile h3{margin-top:auto;font-size:24px;color:var(--cream)}.tp-tile p{margin-top:10px;font-size:15px;padding-right:46px}
.tp-plus{position:absolute;right:20px;bottom:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--night);font-size:22px;transition:transform .3s}
.tp-tile:hover .tp-plus{transform:rotate(90deg)}
.tp-show .hx-progress{background:var(--night-line)}.tp-show .hx-progress span{background:var(--cream)}

.tp-steps{padding:110px 0}
.tp-steps-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px)}
.tp-steps-head{position:sticky;top:120px;align-self:start}.tp-steps-head p:not(.kicker){margin-top:16px;font-size:17px}
.tp-steps-body{position:relative;padding-left:28px}
.tp-steps-line{position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--night-line)}
.tp-steps-line span{position:absolute;inset:0;background:var(--accent);transform-origin:50% 0}
.tp-steps-list{margin:0;padding:0;list-style:none}
.tp-steps-list li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid var(--night-line)}
.tp-step-n{font-size:15px;color:var(--pink);padding-top:3px}
.tp-steps-list h3{font-size:22px;margin-bottom:6px}.tp-steps-list p{font-size:16px}

.tp-boxes{padding:40px 0 120px}
.tp-box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.tp-box{position:relative;display:flex;flex-direction:column;gap:24px;padding:clamp(26px,3vw,40px);border-radius:24px;border:1px solid #ffffff2e;scroll-margin-top:110px}
.tp-box h2{font-size:clamp(28px,3vw,40px);margin-bottom:14px}.tp-box p+p{margin-top:10px}
.tp-box-go{margin-top:auto;display:inline-flex;align-self:flex-start;gap:10px;align-items:center;padding:12px 0;color:var(--cream);border-bottom:1px solid var(--cream)}
.tp-box-go span{transition:transform .3s}.tp-box-go:hover span{transform:translateX(4px)}

.tp-faq>.section{padding-top:30px}
.tp-faq .faq details{background:transparent;border:1px solid var(--night-line);border-radius:18px}
.tp-faq .faq summary{color:var(--cream)}.tp-faq .faq details p{color:var(--fog)}

.tp-final{text-align:center;padding:120px 0 0;overflow:hidden}
.tp-final h2{font-size:clamp(40px,5.6vw,80px);max-width:960px;margin:0 auto 20px}
.tp-final p{max-width:620px;margin:0 auto;font-size:18px}.tp-final .btn-row{justify-content:center;margin-top:30px}
.tp-final-stage{margin-top:70px}.tp-final .tp-frame{max-width:760px}

.tp-bar{display:none}

@media(max-width:900px){
  .tp-pill{top:84px}
  .tp-hero{padding-top:36px}.tp-hero h1{font-size:clamp(40px,11vw,56px)}.tp-hero .lead{font-size:17px}
  .tp-stage{margin-top:40px}.tp-frame{border-radius:16px 16px 0 0}.tp-frame-img{aspect-ratio:4/3}
  .tp-statement{padding:80px 0 56px}.tp-say p{font-size:23px}
  .tp-incl{padding-bottom:84px}.tp-incl .car-track>*,.tp-show .car-track>*{flex-basis:80%}
  .tp-rail-foot .tp-arrows{display:none}
  .tp-stack{padding-top:84px}
  .tp-card{grid-template-columns:1fr;border-radius:22px;gap:22px}
  .tp-list,.tp-steps,.tp-show{padding:80px 0}
  .tp-list-grid,.tp-steps-grid{grid-template-columns:1fr}
  .tp-list-head,.tp-steps-head{position:static}
  .tp-list-items p,.tp-steps-list p,.tp-fcard p,.tp-tile p,.tp-keys li,.tp-one p{font-size:16px}
  .tp-tile{min-height:400px}
  .tp-boxes{padding-bottom:84px}
  .tp-final{padding-top:84px}.tp-final p{font-size:17px}
  .tp-bar{display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:20;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:999px;background:var(--cream);color:var(--night);font-weight:600;box-shadow:0 10px 40px #0005;border:1px solid var(--line)}
}
/* Empilement seulement si chaque carte tient à l'écran (sinon le bas d'une carte serait recouvert avant d'être lu) */
.tp-cards.is-stack .tp-card{position:sticky;top:calc(var(--stack-top,110px) + var(--i) * 18px)}
@media(prefers-reduced-motion:reduce){.tp-pill{transition:none}}

/* Aperçu au survol ajouté par app.js (thème) : inutilisé ici, sinon l'image s'affiche sous le pied de page */
.service-preview{display:none}

/* Barre de contact mobile (toutes les pages) : formulaire, appel, WhatsApp */
.m-bar{display:none}
@media(max-width:900px){
  .m-bar{display:grid;grid-template-columns:1.9fr 1fr 1fr;gap:6px;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;padding:6px;border-radius:999px;background:#181818f2;backdrop-filter:blur(10px);box-shadow:0 10px 40px #0005}
  .m-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 6px;border-radius:999px;color:#f3f1ec;font-size:13px;font-weight:600;line-height:1.2;text-align:center}
  .m-bar a:first-child{background:var(--accent)}
  .m-bar a+a{border:1px solid #ffffff2e}
  body:has(.m-bar) footer{padding-bottom:90px}
}

/* Mobile : appel et WhatsApp côte à côte sous le bouton du formulaire, libellés courts */
@media(max-width:900px){
  .btn-row:has(.btn-direct){display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .btn-row:has(.btn-direct)>.btn:not(.btn-direct){grid-column:1/-1}
  .btn-direct{width:auto;justify-content:center;padding:14px 10px;gap:8px}
  .btn-direct .d-long{display:none}
}

/* Bandeau cookies en bas d’écran (non bloquant) */
dialog#cookies{position:fixed;inset:auto 16px 16px;margin:0 auto;width:auto;max-width:900px;padding:18px 56px 18px 24px;z-index:60;box-shadow:0 14px 44px #0003;border-radius:18px}
dialog#cookies[open]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center}
dialog#cookies h2{font-size:20px;margin:0;grid-column:1}
dialog#cookies p{font-size:14px;margin:0;grid-column:1}
dialog#cookies p a{text-decoration:underline}
dialog#cookies .actions{grid-column:2;grid-row:1/3;flex-wrap:nowrap}
dialog#cookies .actions .btn{padding:12px 20px}
dialog#cookies .close-dialog{top:6px;right:8px}
@media(max-width:700px){dialog#cookies{inset:auto 10px 10px;padding:16px 48px 16px 18px}dialog#cookies[open]{grid-template-columns:1fr;gap:6px}dialog#cookies .actions{grid-column:1;grid-row:auto;margin-top:6px}dialog#cookies .actions .btn{flex:1;justify-content:center;padding:11px 12px}}

/* =====================================================================================================
   Formulaire multi-étapes au-dessus de la ligne de flottaison (accueil, services, métiers).
   Une question par étape ; les champs, la validation et l'envoi sont ceux de landing.js.
   ===================================================================================================== */
.qf{background:var(--card);color:var(--text);text-align:left;padding:24px;border-radius:22px;border:1px solid var(--line);box-shadow:0 24px 60px #00000040;scroll-margin-top:104px;width:100%;max-width:500px;justify-self:end}
.qf [hidden]{display:none!important}
.qf .qf-title{font-size:23px;letter-spacing:-.03em;line-height:1.2;color:var(--text)}
.qf .qf-sub{font-size:13px;color:var(--muted);margin-top:4px}
.qf-pay{font-weight:600;font-size:15px;margin:0 0 10px}
.qf-step .qf-tiles+.lp-error+.lp-fields{margin-top:18px}
.qf-progress{height:4px;border-radius:4px;background:var(--line);margin:16px 0 18px;overflow:hidden}
.qf-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.25);transition:transform .35s}
.qf-step{border:0;margin:0;padding:0;min-width:0}
.qf-step legend{padding:0;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:12px;color:var(--text)}
.qf-step legend small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:4px}
.qf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qf-tiles.one{grid-template-columns:1fr}
.qf-tile{position:relative;display:block;cursor:pointer}
.qf-tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qf-tile span{display:flex;flex-direction:column;justify-content:center;min-height:52px;height:100%;padding:9px 13px;border:1px solid #cbc6bd;border-radius:12px;background:#fff;font-size:15px;line-height:1.3;color:var(--text);transition:border-color .2s,background .2s}
.qf-tile small{font-size:12px;color:var(--muted);margin-top:2px}
.qf-tile:hover span{border-color:var(--text)}
.qf-tile input:checked+span{border-color:var(--accent);background:#f7efe6;box-shadow:inset 0 0 0 1px var(--accent)}
.qf-tile input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qf-tile input[aria-invalid=true]+span{border-color:#9b462e}
.qf .lp-fields{gap:12px}.qf .lp-field label{color:var(--text)}
.qf .lp-consent{margin:14px 0 4px;color:var(--muted)}.qf .lp-consent span{color:var(--muted)}
.qf-nav{display:flex;align-items:center;gap:12px;margin-top:16px}
.qf-back{background:none;border:0;padding:10px 0;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}
.qf-next{margin-left:auto;cursor:pointer;font:inherit}
.qf .lp-submit{margin-top:10px}
.qf .lp-privacy{font-size:12px;color:var(--muted);margin-top:14px}.qf .lp-privacy a{text-decoration:underline}
.qf #lead-status{font-size:14px;margin-top:8px;color:var(--text)}.qf #lead-status:empty{display:none}
.qf #lead-unavailable{font-size:14px;color:var(--text)}

/* Héros en deux colonnes : texte à gauche, formulaire à droite */
.tp-hero-split,.hx-hero-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;text-align:left}
.tp-hero-split h1{margin:18px 0 20px;font-size:clamp(40px,4.4vw,68px)}
.tp-hero-split .lead{margin:0;max-width:560px}
.hx-hero-split h1{margin:0 0 20px;font-size:clamp(40px,5vw,78px)}
.hx-hero-split .lead{margin:0;max-width:520px}
.hx-hero-content.hx-hero-split{padding:130px 0 80px}
@media(max-width:900px){
  .tp-hero-split,.hx-hero-split{grid-template-columns:1fr;gap:26px}
  .qf{justify-self:stretch;max-width:none;padding:20px 18px}
  .tp-hero-split h1{margin:14px 0 14px}
  .hx-hero-content.hx-hero-split{padding:112px 0 56px}
  .hx-hero:has(.qf) .hx-scroll{display:none}
}
@media(max-width:600px){main .qf p,main .qf .lp-privacy{font-size:14px!important}.qf-tile span{font-size:15px}}
.m-bar{transition:opacity .25s,transform .25s}.qf-in-view .m-bar{opacity:0;transform:translateY(16px);pointer-events:none}