:root{
color-scheme: only light;
--paper:#FFFFFF;
--card:#FFFFFF;
--card-soft:#FBF9F2;
--ink:#14161A;
--ink-soft:#5C5F66;
--gold:#C6A548;
--gold-deep:#A88A35;
--gold-soft:#F5EFDC;
--wa:#25D366;
--line:#E9E4D6;
--shadow:0 18px 50px -18px rgba(20,22,26,.16);
--shadow-sm:0 8px 24px -10px rgba(20,22,26,.10);
--r:22px;
--maxw:1140px;
--disp:"Poppins",sans-serif;
--body:"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;font-family:var(--body);background:var(--paper) !important;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}
@media (prefers-color-scheme: dark){
html,body{background:var(--paper) !important;color:var(--ink) !important}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4, h2.as-h1{font-family:var(--disp);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.015em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.tag{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.hero-photo .tag,.hero .tag{display:none}
.elm-why{max-width:760px}
.elm-why-head{display:flex;align-items:center;margin-bottom:8px}
.elm-why-head h2{font-family:var(--disp);font-size:clamp(22px,3.4vw,30px);margin:0}
.elm-why-item{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.elm-why-item:last-child{border-bottom:none}
.elm-num{flex:none;width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--gold-deep);letter-spacing:.05em}
.elm-why-item h3{margin:2px 0 6px;font-size:18px}
.elm-why-item p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.lead{font-size:17px;color:var(--ink-soft);max-width:640px}
.sec-title{font-size:clamp(28px,4.6vw,44px);margin:12px 0 10px}
.sec-head{text-align:center;max-width:700px;margin:0 auto}
.sec-head .lead{margin-left:auto;margin-right:auto}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;font-size:15.5px;padding:15px 26px;border-radius:100px;transition:.22s ease;white-space:nowrap}
.btn-main{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-main:hover{background:#000;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-gold{transition:transform .2s ease,background .2s ease,color .2s ease}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px)}
.btn-gold:active{transform:scale(.975);transition:transform .2s ease}
.btn-ghost{border:1.5px solid var(--gold);color:var(--ink)}
.btn-ghost:hover{background:var(--gold-soft)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(1.06);transform:translateY(-2px)}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(244,241,233,.94);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}
header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -14px rgba(20,22,26,.12)}
.hd-in{display:flex;align-items:center;justify-content:space-between;min-height:49px;position:relative}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.01em;flex:none}
.logo .lg-ic{width:40px;height:40px;background:none;border:none;display:grid;place-items:center;overflow:hidden;flex:none}
.logo .lg-mark{height:38px;width:auto;display:block;flex:none}
.logo small{display:block;font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--ink-soft);text-transform:uppercase}
@media(max-width:900px){.logo .lg-mark{height:32px}.logo{gap:10px}}
.nav-links{display:flex;gap:18px;align-items:center;font-weight:600;font-size:14px;flex:1;justify-content:center;white-space:nowrap}
.nav-links a{color:var(--ink-soft);transition:.2s;padding:6px 0;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--gold);border-radius:2px}
.burger{display:none;width:44px;height:44px;border-radius:12px;place-items:center}
.burger svg{width:26px;height:26px}
.drawer{display:none;position:fixed;inset:49px 0 0 0;background:var(--paper);z-index:55;padding:26px 22px;flex-direction:column;gap:4px;overflow:auto}
.drawer.on{display:flex}
.drawer a{font-family:var(--disp);font-weight:700;font-size:22px;padding:13px 6px;border-bottom:1px solid var(--line)}
.drawer .dr-group{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:18px 6px 2px}
@media(max-width:1240px){.nav-links{display:none}.burger{display:grid}}
/* ---------- pages ---------- */
[data-page]{display:none}
[data-page].on{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- hero ---------- */
.hero{padding:64px 0 40px;background:#F4F1E9}
main[data-page="essai"] .hero,main[data-page="contact"] .hero{background:#fff}
main[data-page="devis"] .hero,main[data-page="essai"] .hero{padding-top:8px}
main[data-page="contact"] .hero{padding-top:8px}
.hero h1, .hero h2.as-h1{font-size:clamp(32px,5.8vw,56px);margin:18px 0 16px}
.hero h1 .gd, .hero h2.as-h1 .gd{color:var(--gold)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.hero-note span{display:flex;align-items:center;gap:7px}
.hero-note svg{width:17px;height:17px;color:var(--gold)}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:900px){.hero-split{grid-template-columns:1fr}}
/* ---------- cards ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:.25s;box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--gold)}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:15px;margin:0}
.card .go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;color:var(--gold-deep)}
.card-ic{width:54px;height:54px;border-radius:16px;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:16px;font-size:27px;line-height:1}
.card-img{border-radius:14px;overflow:hidden;margin-bottom:18px;aspect-ratio:16/10}
.card-img img{width:100%;height:100%;object-fit:cover}
/* ---------- sections ---------- */
.pad{padding:64px 0}
.pad-s{padding:44px 0}
.sec-white{background:#FFFFFF}
/* ---------- before / after ---------- */
.ba{position:relative;border-radius:var(--r);overflow:hidden;--pos:50%;aspect-ratio:3/4;max-height:560px;box-shadow:var(--shadow);border:1px solid var(--line);background:#14161A}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--pos))}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.4)}
.ba .ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.3);color:var(--ink)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .ba-tag{position:absolute;top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(20,22,26,.72);color:#fff;padding:6px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.ba .tag-av{left:14px}.ba .tag-ap{right:14px}
.ba-cap{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-soft);text-align:center}
.ba-sub{margin:6px auto 0;max-width:440px;font-size:13px;font-weight:500;line-height:1.55;color:var(--ink-soft);text-align:center}
.ba-note{margin:8px 0 0;text-align:center;font-size:13.5px;font-weight:700;color:var(--gold-deep)}
.ba-note::before{content:"\2713";margin-right:7px}
/* ---------- pricing ---------- */
.price-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.price-card.pop{border-color:var(--gold);box-shadow:var(--shadow)}
.price-card .pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px;white-space:nowrap}
.price-card h3{font-size:20px}
.price-card ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.price-card li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.price-card li svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:2px}
.price{font-family:var(--disp);font-weight:700;font-size:32px;margin-bottom:16px}
/* ---------- steps ---------- */
.step h4{font-size:17px;margin-bottom:4px}
/* ---------- list checks ---------- */
.checks{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:11px;font-size:15.5px}
.checks li svg{width:20px;height:20px;flex:none;color:var(--gold);margin-top:2px}
/* ---------- FAQ ---------- */
details{border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:10px;background:var(--card)}
details summary{cursor:pointer;font-weight:700;font-size:16px;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--disp)}
details summary::after{content:"+";font-size:22px;color:var(--gold);transition:.2s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 17px;color:var(--ink-soft);font-size:15px}
/* ---------- quote ---------- */
.quote{max-width:720px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(19px,3vw,25px);line-height:1.4;margin:16px 0 16px}
.quote .who{font-weight:600;color:var(--ink-soft);font-size:14.5px}
.qdots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.qdots button{width:11px;height:11px;border-radius:50%;background:var(--line);transition:.2s;padding:0}
.qdots button.on{background:var(--gold);transform:scale(1.25)}
/* ---------- forms ---------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
.form label{display:block;font-weight:700;font-size:13.5px;margin:16px 0 6px}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;background:var(--card-soft);color:var(--ink);transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form textarea{min-height:100px;resize:vertical}
.form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form .frow{grid-template-columns:1fr}}
/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#fff;border-radius:calc(var(--r) + 6px);padding:46px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,4vw,34px)}
.cta-band p{color:#C9C4B4;margin:8px 0 0;max-width:480px}
@media(max-width:640px){.cta-band{padding:34px 26px}}
/* ---------- floating contact bubbles ---------- */
.float-contact{position:fixed;right:18px;bottom:100px;z-index:70;display:flex;flex-direction:column;gap:20px;align-items:center;transition:opacity .25s ease,transform .25s ease}
body:has(main[data-page="contact"].on) .float-contact{display:none}
.float-contact.fc-hidden{opacity:0;pointer-events:none;transform:translateY(12px)}
.essai-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:15px;cursor:pointer;padding:0;margin-bottom:14px}
.essai-back:hover{color:var(--ink)}
.fc-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px -6px rgba(20,22,26,.35);transition:.22s}
.fc-btn:hover{transform:scale(1.08)}
.fc-btn svg{width:21px;height:21px}
.fc-msg{background:#1A1A1A;color:var(--gold)}
.fc-tel{background:var(--gold);color:var(--ink)}
.fc-wa{background:var(--wa);color:#fff}
@media(max-width:640px){.float-contact{right:14px;bottom:16px}.fc-btn{width:44px;height:44px}}
/* ---------- footer ---------- */
footer{background:var(--ink);color:#A7A395;padding:54px 0 110px;margin-top:70px}
footer .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){footer .f-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer a{display:block;padding:4px 0;font-size:14.5px;transition:.2s}
footer a:hover{color:var(--gold)}
footer .f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:22px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.f-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--disp);font-weight:700;font-size:18px;margin-bottom:12px}
.f-logo .lg-ic{width:36px;height:36px;background:none;display:grid;place-items:center}
.f-logo .lg-mark{height:36px;width:auto;display:block}
/* ---------- city chips ---------- */
.city-chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-weight:600;font-size:14.5px;box-shadow:var(--shadow-sm)}
.city-chip:first-child{border-color:var(--gold);background:var(--gold-soft)}
/* ---------- booking wizard ---------- */
.bk-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0}
.bk-dot{width:36px;height:36px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink-soft);transition:.2s}
.bk-dot.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.bk-bar{width:34px;height:2px;background:var(--line)}
.bk-step{display:none}
.bk-step.on{display:block;animation:fadeUp .3s ease}
.bk-step h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.bk-count{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.pick-grid.pick-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.pick-grid{grid-template-columns:1fr 1fr}.pick-grid.pick-3{grid-template-columns:1fr}}
.pick{border:1.5px solid var(--line);border-radius:14px;padding:14px 10px;font-weight:700;font-size:14.5px;background:var(--card-soft);transition:.2s;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.pick small{font-weight:500;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.pick:hover{border-color:var(--gold)}
.pick.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-sm)}
.pick[data-pick-parfum]{justify-content:flex-start}
.pick[data-pick-parfum] small:last-child{margin-top:auto;padding-top:8px}
.bk-navrow{display:flex;gap:12px;justify-content:space-between;margin-top:24px;flex-wrap:wrap}
.bk-recap{background:var(--card-soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0;font-size:15px}
.bk-recap div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.bk-recap div:last-child{border-bottom:none}
.bk-recap b{color:var(--ink)}
/* ---------- hero avec photo de fond ---------- */
.hero-photo{position:relative;padding:96px 0 84px;color:#fff;overflow:hidden}
.hero-photo .hp-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
main[data-page="textiles"] .hp-bg{background-position:15% center}
.hero-photo .hp-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.74) 0%,rgba(12,12,14,.56) 55%,rgba(12,12,14,.74) 100%);z-index:1}
.hero-photo .wrap{position:relative;z-index:2;text-align:center;max-width:820px}
.hero-photo h1, .hero-photo h2.as-h1{font-family:'Archivo',var(--disp),sans-serif;font-weight:800;text-transform:none;letter-spacing:-.01em;font-size:clamp(27px,5vw,46px);line-height:1.14;margin:6px 0 14px;text-wrap:balance}
.hero-photo .lead{color:#F6F3EC;font-size:18px;line-height:1.75;text-shadow:0 1px 14px rgba(0,0,0,.5);margin-left:auto;margin-right:auto}
.hero-photo .hero-cta{justify-content:center}
.hero-photo .btn-ghost{border-color:rgba(255,255,255,.85);border-width:2px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hero-photo .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* ---------- calendrier ---------- */
.cal{background:var(--card-soft);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:8px}
.cal-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-weight:700;font-size:16px;margin-bottom:10px}
.cal-nav{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:20px;display:grid;place-items:center}
.cal-nav:hover{border-color:var(--gold)}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid button{aspect-ratio:1;border-radius:10px;font-weight:600;font-size:14.5px;display:grid;place-items:center;transition:.15s}
.cal-grid button:not(:disabled):hover{background:var(--gold-soft)}
.cal-grid button.on{background:var(--gold);color:var(--ink);font-weight:700}
.cal-grid button:disabled{color:#C9C4B4;cursor:default}
/* ---------- toggle particulier / entreprise ---------- */
.aud-toggle{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:100px;padding:10px 20px;margin-top:22px;background:var(--card-soft)}
.aud-toggle span{font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}@media(max-width:560px){.aud-toggle span:first-child{display:none}.aud-toggle{gap:8px;padding:9px 16px}}
.aud-toggle button{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:4px 2px;transition:.15s}
.aud-toggle button.on{color:var(--gold-deep)}
.aud-toggle button:hover{color:var(--ink)}
.hero-stack{display:flex;flex-direction:column;gap:12px;max-width:480px;margin:24px auto 0}
.adv-list{list-style:none;width:fit-content;max-width:100%;margin:22px auto 0;display:grid;gap:10px;text-align:left;padding:0}
.stat-band{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-band li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.stat-band b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.25;text-wrap:balance;color:var(--gold-deep)}
.stat-band span{display:block;margin-top:5px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-soft)}
@media(min-width:820px){.stat-band{grid-template-columns:repeat(4,1fr)}}
.adv-list li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink-soft)}
.adv-list li::before{content:"\2713";color:var(--gold-deep);font-weight:800;font-size:15px}
.hero-stack .btn{width:100%;padding:17px 26px;font-size:16px}
/* ---------- options réservation ---------- */
.bk-options{display:flex;flex-direction:column;gap:8px;margin-top:8px}
label.bk-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin:0;background:var(--card-soft);cursor:pointer;transition:.15s;font-weight:600;font-size:15px}
label.bk-opt:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
label.bk-opt input{width:20px;height:20px;accent-color:var(--gold-deep);margin:0;padding:0;flex:none}
label.bk-opt span{flex:1;font-size:15px;font-weight:600}
label.bk-opt b{color:var(--gold-deep);white-space:nowrap;margin-left:auto}
/* ---------- zone photos ---------- */
.bk-photo-zone{width:100%;border:2px dashed var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card-soft);transition:.15s}
.bk-photo-zone:hover{border-color:var(--gold)}
.bk-photo-zone b{font-family:var(--disp);font-size:16px}
.bk-photo-zone small{color:var(--ink-soft);font-size:12.5px}
.bk-photo-previews{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.bk-photo-previews .ph{position:relative;width:86px;height:86px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.bk-photo-previews .ph img{width:100%;height:100%;object-fit:cover}
.bk-photo-previews .ph button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(20,22,26,.8);color:#fff;font-size:13px;display:grid;place-items:center}
/* ---------- configurateur textile ---------- */
.ktabs{display:flex;gap:4px;justify-content:center;border-bottom:1.5px solid var(--line);margin:30px 0 18px;overflow-x:auto}
.ktabs button{font-weight:700;font-size:15px;padding:12px 14px;color:var(--ink-soft);border-bottom:2.5px solid transparent;white-space:nowrap;transition:.15s}
.ktabs button.on{color:var(--gold-deep);border-bottom-color:var(--gold)}
.kpanel{display:none;flex-direction:column;gap:12px}
.kpanel.on{display:flex}
.kitem{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;transition:.15s}
.kitem.sel{border-color:var(--gold);background:var(--gold-soft)}
.kic{width:50px;height:50px;border-radius:14px;background:var(--gold-soft);display:grid;place-items:center;font-size:24px;flex:none}
.kitem.sel .kic{background:#fff}
.kinfo{flex:1}
.kinfo b{font-family:var(--disp);font-size:16.5px;display:block}
.kinfo small{color:var(--ink-soft);font-size:13px}
.kright{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.kprice{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--gold-deep);white-space:nowrap}
.kqty{display:flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:100px;background:var(--card-soft)}
.kqty button{width:38px;height:38px;font-size:19px;font-weight:700;color:var(--gold-deep);display:grid;place-items:center}
.kqty .kn{min-width:26px;text-align:center;font-weight:700;font-size:16px}
.kchoose{border:1.5px solid var(--line);border-radius:100px;padding:9px 20px;font-weight:700;font-size:14px;background:var(--card-soft);transition:.15s}
.kitem.sel .kchoose{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.kbenefits{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;background:var(--gold-soft);border-radius:16px;padding:16px 18px;margin-top:18px;font-weight:600;font-size:14px}
.ktotal{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:22px;margin-top:14px}
.ktotal .kempty{color:var(--ink-soft);text-align:center;margin:0;font-size:15px}
.krecap{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:14.5px}
.krecap div{display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft)}
.ksum{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid var(--line);padding-top:12px}
.ksum span{letter-spacing:.1em;text-transform:uppercase;font-size:13px;font-weight:700;color:var(--ink-soft)}
.ksum b{font-family:var(--disp);font-size:26px;color:var(--gold-deep)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* ---------- identité PRO : typographie & texture ---------- */
main[data-page="vehicules"],main[data-page="bureaux"],main[data-page="textiles"]{
--disp:"Archivo","Poppins",sans-serif;
background-image:
repeating-linear-gradient(0deg, rgba(20,22,26,.028) 0 1px, transparent 1px 30px),
repeating-linear-gradient(90deg, rgba(20,22,26,.028) 0 1px, transparent 1px 30px);
}
main[data-page="vehicules"] h1,main[data-page="vehicules"] h2,main[data-page="vehicules"] h3,main[data-page="vehicules"] h4,main[data-page="bureaux"] h1,main[data-page="bureaux"] h2,main[data-page="bureaux"] h3,main[data-page="bureaux"] h4,main[data-page="textiles"] h1,main[data-page="textiles"] h2,main[data-page="textiles"] h3,main[data-page="textiles"] h4, main[data-page="vehicules"] h2.as-h1, main[data-page="bureaux"] h2.as-h1, main[data-page="textiles"] h2.as-h1{
font-family:"Archivo","Poppins",sans-serif;font-weight:800;letter-spacing:-.015em;
}
main[data-page="vehicules"] .sec-title,main[data-page="bureaux"] .sec-title,main[data-page="textiles"] .sec-title{
text-transform:uppercase;font-size:clamp(24px,4.6vw,40px);letter-spacing:.02em;
}
main[data-page="vehicules"] .hero-photo h1,main[data-page="bureaux"] .hero-photo h1,main[data-page="textiles"] .hero-photo h1, main[data-page="vehicules"] .hero-photo h2.as-h1, main[data-page="bureaux"] .hero-photo h2.as-h1, main[data-page="textiles"] .hero-photo h2.as-h1{
text-transform:uppercase;letter-spacing:.01em;font-size:clamp(25px,4.4vw,40px);
}
.pr-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.pr-check{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px;background:#fff;cursor:pointer}
.pr-check:has(input:checked){border-color:var(--gold-deep);background:var(--gold-soft)}
.pr-check input{accent-color:var(--gold-deep)}
@media(max-width:420px){.pr-checks{grid-template-columns:1fr}}
.checks-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px}
.checks-2col li{margin-bottom:0}
@media(max-width:640px){.checks-2col{grid-template-columns:1fr}}
/* ---------- desktop : vraie mise en page large, plus de forcage mobile ---------- */
.hd-in{max-width:1220px}
/* ---------- dropdowns nav desktop ---------- */
.nav-drop{position:relative}
.nav-drop>a{display:inline-block}
.nav-drop .nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:70}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:block}
.nav-menu>a{display:block;background:#fff;white-space:nowrap}
.nav-drop .nav-menu>a{padding:12px 18px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-top:none}
.nav-drop .nav-menu>a:first-child{border-top:1px solid var(--line);border-radius:14px 14px 0 0}
.nav-drop .nav-menu>a:last-child{border-radius:0 0 14px 14px;box-shadow:var(--shadow-sm)}
.nav-drop .nav-menu>a:hover{background:var(--gold-soft)}
/* ---------- sliders avant/après plus grands sur PC ---------- */
@media(min-width:900px){
.wrap:has(.ba){max-width:940px !important}
.ba{border-radius:20px}
}
/* ---------- accueil : avis remontés sous le hero, sections resserrées ---------- */
main[data-page="accueil"] .sec-avis{padding:40px 0 20px}
main[data-page="accueil"] section.pad-s{padding-top:34px}
main[data-page="accueil"] section.pad{padding:44px 0}
/* ---------- hero accueil : réglages fins ---------- */
main[data-page="accueil"] .hero-photo{padding-top:76px}
main[data-page="vehicules"] .hero-photo,main[data-page="bureaux"] .hero-photo,main[data-page="textiles"] .hero-photo{padding-top:20px}
main[data-page="accueil"] .hero-photo .hp-veil{background:linear-gradient(180deg,rgba(12,12,14,.50) 0%,rgba(12,12,14,.45) 55%,rgba(12,12,14,.50) 100%)}
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{max-width:90%;margin:6px auto 29px;line-height:1.06}
main[data-page="accueil"] .hero-photo .lead{max-width:100%;font-size:16.5px;line-height:1.95}
main[data-page="accueil"] .hero-photo .hero-reassur{white-space:nowrap;font-size:clamp(10px,2.8vw,14px) !important;letter-spacing:-.01em;margin-left:-22px;margin-right:-22px}
main[data-page="accueil"] .hero-photo .hero-stack{margin-top:34px}
main[data-page="accueil"] .hero-photo .hero-stack .btn{padding-top:21px;padding-bottom:21px;font-size:15px}
/* ---------- hero accueil : cadrage mobile sur l'homme qui lave la voiture ---------- */
@media(max-width:899px){
.hp-bg[data-bg="hero_accueil"]{background-position:center !important}
}
/* ---------- hero accueil : image paysage sur PC ---------- */
@media(min-width:900px){
.hp-bg[data-bg="hero_accueil"]{background-image:url("/img/hero-accueil-pc-v2.webp") !important}
}
.ba-static{display:block;width:100%;border-radius:18px;box-shadow:var(--shadow-sm)}
/* ---------- deux images statiques : format identique + légendes alignées ---------- */
.ba-pair:has(.ba-uni)>div{display:flex;flex-direction:column}
.ba-pair .ba-uni{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center}
@media(min-width:900px){.ba-pair .ba-uni{aspect-ratio:16/10}}
.ba-pair:has(.ba-uni) .ba-cap{margin-top:auto;padding-top:12px}
@media(min-width:900px){
.ba-pair:has(.ba-uni){align-items:stretch}
.ba-pair:has(.ba-uni)>div{margin-top:0 !important}
}
/* ---------- paires avant/après côte à côte sur PC ---------- */
.ba-pair>div{min-width:0}
@media(min-width:900px){
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.wrap:has(.ba-pair){max-width:1120px !important}
}
@media(min-width:900px){
.ba-pair{align-items:stretch}
.ba-pair>div{margin-top:0 !important;display:flex;flex-direction:column}
.ba-pair .ba{aspect-ratio:3/4;width:100%;height:auto;max-height:none;flex:none}
.ba-pair .ba-cap{margin-top:12px;text-align:center}
}
/* ---- bande de réassurance page pro-textile ---- */
.trust-band{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.trust-band li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm)}
@media(min-width:760px){.trust-band{grid-template-columns:repeat(4,1fr)}}
/* ---- micro-animations (respectent prefers-reduced-motion) ---- */
@media(prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ba-uni{transition:transform .4s ease}
.ba-pair>div:hover .ba-uni{transform:scale(1.02)}
}
/* ---- audit CRO page pro-textile ---- */
.big-stat{font-family:var(--disp);font-weight:800;font-size:clamp(22px,5vw,32px);line-height:1.2;color:var(--ink);margin:14px 0 0;text-wrap:balance}
.card-ic-svg{display:inline-grid;place-items:center}
.card-ic-svg svg{width:26px;height:26px;color:var(--gold-deep)}
.form-timer{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 14px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:13px;font-weight:700;color:var(--ink-soft)}
.form-timer svg{width:16px;height:16px;color:var(--gold-deep)}
.contact-final{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
.cf-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none}
.cf-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--paper);display:grid;place-items:center}
.cf-ic svg{width:22px;height:22px;color:var(--gold-deep)}
.cf-opt b{display:block;font-size:16px}
.cf-opt small{display:block;color:var(--ink-soft);font-size:13px;margin-top:2px}
@media(prefers-reduced-motion:no-preference){.cf-opt{transition:transform .2s ease,box-shadow .2s ease}.cf-opt:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
@media(min-width:720px){.contact-final{grid-template-columns:repeat(3,1fr)}.cf-opt{flex-direction:column;text-align:center;gap:10px;padding:22px 16px}}
.sect-t{font-size:18px;font-weight:800;margin:0 0 8px}
.f-nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.12);margin-top:28px}
.f-nav a{color:#C9C4B4;font-size:14px;font-weight:600}
.f-nav a:hover{color:#fff}
.legal h3{font-family:var(--disp);font-weight:700;font-size:18px;margin:22px 0 6px}
.legal p{margin:0 0 4px;line-height:1.7}
.sect-card{padding:18px 18px 16px}
.sect-ic{display:inline-grid;place-items:center;margin-bottom:8px}
.sect-ic svg{width:26px;height:26px;color:var(--gold-deep)}
.sect-t{font-size:19px;font-weight:800;margin:0 0 6px}
.sect-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.mega-num{font-family:var(--disp);font-weight:800;font-size:clamp(56px,16vw,104px);line-height:.95;color:var(--gold-deep);margin:10px 0 0;letter-spacing:-.02em}
.mega-num span{font-size:.5em;vertical-align:super;margin-left:2px}
.mega-sub{font-family:var(--disp);font-weight:700;font-size:clamp(15px,3.6vw,20px);color:var(--ink);margin:2px 0 0;text-transform:uppercase;letter-spacing:.04em}
.trust-band-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.trust-band-4{grid-template-columns:repeat(4,1fr)}}
.form-tight label{margin-top:12px}
.btn-cta-big{min-height:62px;font-size:17px;letter-spacing:.01em}
@media(min-width:720px){.contact-final{align-items:stretch}
.cf-opt{min-height:100%;justify-content:center}}
.cf-opt small{white-space:nowrap}
.f-info{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;padding:12px 0 0;font-size:14px}
.f-info a,.f-info span{color:#C9C4B4}
.f-info a:hover{color:#fff}
/* ============ PASSE DE FINITION PRO-TEXTILE ============ */
/* 1. cartes secteurs plus compactes, icône rapprochée */
.sect-card{padding:15px 17px 14px}
.sect-ic{margin-bottom:5px;line-height:0}
.sect-card p{font-size:14px;line-height:1.45}
.sect-t{margin:0 0 4px}
/* 2. icônes uniformisées ~28px */
.sect-ic svg,.card-ic-svg svg{width:28px;height:28px}
.cf-ic svg{width:24px;height:24px}
/* 4. bloc 300+ : plus d'air et d'équilibre */
.mega-num{margin-top:6px}
.mega-sub{margin-top:6px}
/* 5. cartes avantages : icône discrète alignée */
.trust-band-4 li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;line-height:1.35}
.tb-ic{display:inline-grid;place-items:center;line-height:0}
.tb-ic svg{width:22px;height:22px;color:var(--gold-deep)}
/* 6. formulaire : placeholders plus contrastés, RGPD discrète */
.form ::placeholder{color:#8A8D93;opacity:1}
label.bk-opt{padding:11px 14px;font-size:13.5px;font-weight:500;background:transparent;border-color:rgba(0,0,0,.08)}
/* 7. contact final : grille régulière */
.cf-opt{gap:12px;padding:18px 16px}
.cf-opt b{font-size:15.5px;line-height:1.25}
.cf-opt small{font-size:12.5px;margin-top:3px}
/* 8. contraste texte gris légèrement relevé (premium, pas dur) */
.sect-card p,.cf-opt small,.mega-sub+.lead{color:#54575E}
/* 9+12. rythme vertical : sections un peu plus aérées sur la page pro-textile */
main[data-page="vehicules"] .pad,main[data-page="bureaux"] .pad,main[data-page="textiles"] .pad{padding:34px 0}
main[data-page="vehicules"] .pad-s,main[data-page="bureaux"] .pad-s,main[data-page="textiles"] .pad-s{padding:26px 0}
/* 10. CTA dominant : le bouton devis se distingue des boutons secondaires */
.btn-cta-big{box-shadow:0 12px 30px -12px rgba(197,160,80,.55),0 3px 8px rgba(0,0,0,.12)}
/* 11. footer : colonnes alignées proprement */
.f-nav{margin-top:24px}
/* ============ ACCUEIL : refonte CRO ============ */
/* avis en grille (3 cartes) */
.avis-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
@media(min-width:820px){.avis-grid{grid-template-columns:repeat(3,1fr)}}
.avis-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
.avis-stars{color:var(--gold-deep);font-size:15px;letter-spacing:2px}
.avis-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;flex:1}
.avis-card figcaption{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
/* comment ça marche */
/* cta final */
.cta-final-sec .btn-cta-big{display:inline-flex;min-width:280px}
/* ============ COMMENT ÇA FONCTIONNE — refonte premium ============ */
.hiw-sec .lead{margin-top:8px}
.hiw-flow{position:relative;margin-top:30px;display:flex;flex-direction:column;gap:16px}
/* frise verticale dorée discrète reliant les cartes */
.hiw-flow::before{content:"";position:absolute;left:39px;top:36px;bottom:36px;width:2px;background:linear-gradient(var(--gold),rgba(197,160,80,.25));z-index:0}
.hiw-card{position:relative;z-index:1;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:0 1px 2px rgba(0,0,0,.04);min-height:150px}
.hiw-head{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.hiw-num{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1A1A1A;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:18px;box-shadow:0 4px 12px -4px rgba(197,160,80,.6)}
.hiw-ic{display:grid;place-items:center;color:var(--ink)}
.hiw-ic svg{width:34px;height:34px}
.hiw-body h3{font-size:19px;font-weight:800;margin:0 0 6px;line-height:1.2}
.hiw-body p{margin:0;font-size:15px;line-height:1.5;color:#54575E}
/* badges de réassurance */
.hiw-badges{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.hiw-badges li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.hiw-badges svg{width:17px;height:17px;color:var(--gold-deep);flex:none}
/* CTA */
.hiw-cta{margin-top:28px;text-align:center}
.hiw-cta .btn{width:100%;max-width:420px}
/* desktop : 3 colonnes verticales + hover */
@media(min-width:820px){
.hiw-flow{flex-direction:row;gap:20px}
.hiw-flow::before{left:36px;right:36px;top:39px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,rgba(197,160,80,.25),var(--gold),rgba(197,160,80,.25))}
.hiw-card{flex:1;flex-direction:column;text-align:center;align-items:center;gap:14px;padding:30px 22px;min-height:0}
.hiw-head{flex-direction:column}
.hiw-badges{grid-template-columns:repeat(4,1fr)}
.hiw-badges li{justify-content:center;text-align:center}
}
/* animation d'apparition (respecte reduced-motion) */
@media(prefers-reduced-motion:no-preference){
.hiw-card{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,box-shadow .25s ease}
.hiw-card.in{opacity:1;transform:none}
.hiw-card:nth-child(2){transition-delay:.08s}
.hiw-card:nth-child(3){transition-delay:.16s}
.hiw-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35)}
}
/* ============================================================
RÉSERVATION · ÉTAPE 1 — finition premium & réassurance
(scopé sur [data-step="1"], n'affecte pas le reste du site)
============================================================ */
.bk-root .b1-intro{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:2px 0 0;max-width:52ch}
.bk-root .b1-field{margin-top:30px}
.bk-root .b1-lab{display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-weight:700;font-size:16.5px;letter-spacing:-.01em;margin:0}
.bk-root .b1-lab .opt{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink-soft);letter-spacing:0}
.bk-root .b1-sub{color:var(--ink-soft);font-size:13.5px;margin:5px 0 13px;line-height:1.55}
/* — barre de confiance — */
.b1-trust{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 2px}
.b1-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card-soft);border:1px solid var(--line);border-radius:100px;padding:7px 13px}
.b1-trust .ck{width:13px;height:13px;color:var(--gold-deep);flex:none}
/* — cartes sélectionnables (véhicule · état · formule) — */
.bk-root .pick{position:relative;border-radius:16px;padding:16px 15px;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.bk-root .pick:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.bk-root .pick.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
/* pastille de sélection (véhicule + état) */
.bk-root .b1-veh,.bk-root .b1-state{padding-right:44px}
.bk-root .b1-veh::after,.bk-root .b1-state::after{content:"";position:absolute;top:50%;right:15px;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line);background:#fff;transition:.18s;opacity:.5}
.bk-root .pick.on.b1-veh::after,.bk-root .pick.on.b1-state::after{opacity:1;border-color:var(--gold);background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
/* véhicule */
.bk-root .b1-veh{align-items:flex-start;text-align:left;gap:2px}
.bk-root .b1-veh .nm{font-size:15.5px;font-weight:700}
.bk-root .b1-veh .pr{font-size:13px;font-weight:600;color:var(--ink-soft)}
/* état actuel */
.bk-root .b1-state{align-items:flex-start;text-align:left;gap:3px}
.bk-root .b1-state .nm{font-size:15px;font-weight:700}
.bk-root .b1-state .ds{font-size:12.5px;font-weight:500;color:var(--ink-soft);line-height:1.45}
.bk-root .b1-state .pr{font-size:12.5px;font-weight:700;color:var(--gold-deep);margin-top:2px}
/* formule */
.bk-root .b1-formule{align-items:stretch;text-align:left;gap:11px;padding:18px}
.bk-root .b1-formule.reco{border-color:var(--gold)}
.bk-root .b1-formule .fh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bk-root .b1-formule .fn{font-family:var(--disp);font-weight:700;font-size:17.5px}
.bk-root .b1-badge{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--ink);font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.bk-root .b1-formule .inc{display:flex;flex-direction:column;gap:7px}
.bk-root .b1-formule .inc span{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4}
.bk-root .b1-formule .inc .ck{width:16px;height:16px;color:var(--gold-deep);flex:none;margin-top:2px}
.bk-root .b1-formule .fp{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--gold-deep)}
/* — options adoucies (anti “surfacturation”) — */
.bk-root .b1-optnote{display:flex;gap:9px;align-items:flex-start;background:var(--gold-soft);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.5;margin:0 0 13px}
.bk-root .b1-optnote .ck{width:16px;height:16px;color:var(--gold-deep);flex:none;margin-top:2px}
[data-step="1"] label.bk-opt{padding:13px 15px;font-weight:600}
[data-step="1"] label.bk-opt b{color:var(--ink-soft);font-weight:600;font-size:13px}
/* — récapitulatif rassurant (remplace la “facture”) — */
.bk-root .b1-recap{background:linear-gradient(180deg,#fff,var(--card-soft));border:1.5px solid var(--gold);border-radius:18px;padding:20px;margin-top:24px;box-shadow:var(--shadow-sm)}
.bk-root .b1-recap .top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.bk-root .b1-recap .top .lb{font-size:13px;font-weight:600;color:var(--ink-soft)}
.bk-root .b1-recap .top .bk-estim-val{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;color:var(--ink)}
.bk-root .b1-recap .conf{display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.bk-root .b1-recap .conf .ck{width:15px;height:15px;color:var(--gold-deep);flex:none;margin-top:2px}
.bk-root .b1-recap .split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.bk-root .b1-recap .split div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bk-root .b1-recap .split .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.bk-root .b1-recap .split .v{font-family:var(--disp);font-weight:700;font-size:20px;margin-top:3px}
.bk-root .b1-recap .split .s{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.bk-root .b1-ctasub{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:11px 0 0}
@media(prefers-reduced-motion:reduce){
.bk-root .pick{transition:none}
.bk-root .pick.on{transform:none}
}
@media(max-width:560px){
.bk-root .b1-recap .top .bk-estim-val{font-size:30px}
.bk-root .b1-recap .split{grid-template-columns:1fr}
}
/* ---------- v167 : densite, hierarchie, barre de conversion ---------- */
.pad-xs{padding:18px 0}
.hero-benefs{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px}
.hero-benefs li{display:flex;align-items:center;gap:9px;color:#F2EFE6;font-size:14.5px;font-weight:600;text-align:left}
.hero-benefs li svg{width:17px;height:17px;flex:none;color:var(--gold)}
.dv-recap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px;padding:11px 14px;border:1.5px solid var(--gold);border-radius:12px;background:var(--gold-soft)}
.dv-recap span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.dv-recap b{font-size:14px;font-weight:800;color:var(--ink);text-align:right;line-height:1.25}
.dv-plus{margin-top:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card-soft);overflow:hidden}
.dv-plus summary{cursor:pointer;padding:13px 15px;font-weight:700;font-size:14px;list-style:none}
.dv-plus summary::-webkit-details-marker{display:none}
.dv-plus summary::after{content:"+";float:right;color:var(--gold-deep);font-weight:800}
.dv-plus[open] summary::after{content:"–"}
.dv-plus summary span{font-weight:500;color:var(--ink-soft);font-size:13px}
.dv-plus > *:not(summary){padding:0 15px}
.dv-plus > *:last-child{padding-bottom:15px}
.dv-sous{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:14px 0 0;padding:0}
.dv-sous li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.dv-sous li svg{width:14px;height:14px;color:var(--gold-deep);flex:none}
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(20,22,26,.97);border-top:1px solid rgba(255,255,255,.13);box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.cta-bar.on{display:flex}
.cta-bar-txt{flex:1;min-width:0;color:#fff;font-size:13.5px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-bar-txt small{display:block;color:#C9C4B4;font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:2px}
.cta-bar .btn{flex:none;padding:12px 18px;font-size:14px;margin:0}
@media(min-width:900px){.cta-bar{justify-content:center;gap:24px}.cta-bar-txt{flex:none;max-width:420px}}
body:has(.cta-bar.on) .float-contact{bottom:82px}
/* ---------- v167 : densite des listes et des cartes ---------- */
main[data-page="accueil"] .checks,main[data-page="vehicules"] .checks,main[data-page="bureaux"] .checks,main[data-page="textiles"] .checks{gap:9px;margin:16px 0}
main[data-page="accueil"] .checks li,main[data-page="vehicules"] .checks li,main[data-page="bureaux"] .checks li,main[data-page="textiles"] .checks li{font-size:14.5px;line-height:1.45}
main[data-page="accueil"] .checks li svg,main[data-page="vehicules"] .checks li svg,main[data-page="bureaux"] .checks li svg,main[data-page="textiles"] .checks li svg{width:18px;height:18px;margin-top:1px}
main[data-page="accueil"] .sect-card,main[data-page="vehicules"] .sect-card,main[data-page="bureaux"] .sect-card,main[data-page="textiles"] .sect-card{padding:13px 15px 12px}
main[data-page="accueil"] .sect-card p,main[data-page="vehicules"] .sect-card p,main[data-page="bureaux"] .sect-card p,main[data-page="textiles"] .sect-card p{font-size:13.5px;line-height:1.42}
main[data-page="accueil"] .sect-t,main[data-page="vehicules"] .sect-t,main[data-page="bureaux"] .sect-t,main[data-page="textiles"] .sect-t{font-size:16px;margin-bottom:4px}
main[data-page="accueil"] .sect-ic,main[data-page="vehicules"] .sect-ic,main[data-page="bureaux"] .sect-ic,main[data-page="textiles"] .sect-ic{width:34px;height:34px;margin-bottom:8px}
main[data-page="accueil"] .grid2,main[data-page="vehicules"] .grid2,main[data-page="bureaux"] .grid2,main[data-page="textiles"] .grid2{gap:12px}
main[data-page="accueil"] .elm-why-item,main[data-page="vehicules"] .elm-why-item,main[data-page="bureaux"] .elm-why-item,main[data-page="textiles"] .elm-why-item{padding:15px 0;gap:14px}
main[data-page="accueil"] .elm-why-item h3,main[data-page="vehicules"] .elm-why-item h3,main[data-page="bureaux"] .elm-why-item h3,main[data-page="textiles"] .elm-why-item h3{font-size:16.5px;margin:0 0 4px}
main[data-page="accueil"] .elm-why-item p,main[data-page="vehicules"] .elm-why-item p,main[data-page="bureaux"] .elm-why-item p,main[data-page="textiles"] .elm-why-item p{font-size:14.5px;line-height:1.5}
main[data-page="accueil"] .stat-band li,main[data-page="vehicules"] .stat-band li,main[data-page="bureaux"] .stat-band li,main[data-page="textiles"] .stat-band li{padding:13px 11px}
main[data-page="accueil"] .sec-head .lead,main[data-page="vehicules"] .sec-head .lead,main[data-page="bureaux"] .sec-head .lead,main[data-page="textiles"] .sec-head .lead{font-size:15.5px;margin-top:8px}
main[data-page="accueil"] .ba-cap,main[data-page="vehicules"] .ba-cap,main[data-page="bureaux"] .ba-cap,main[data-page="textiles"] .ba-cap{margin-top:8px;font-size:13.5px}
/* ---------- v168 : finition typographique et alignements ---------- */
h1,h2,h3,h4,.sec-title,.cta-band h2,.elm-why-head h2, h2.as-h1{text-wrap:balance}
.lead,.ba-cap,.sect-card p,.card p,.checks li span,.elm-why-item p,.mega-sub{text-wrap:pretty}
p,li,h1,h2,h3,h4, h2.as-h1{hyphens:none;overflow-wrap:break-word}
.sec-head{margin-bottom:0}
.sec-head .tag{margin-bottom:10px}
.sec-head h2{margin-bottom:0}
.grid2>.card,.grid2>.sect-card{height:100%;display:flex;flex-direction:column}
.grid2>.sect-card p:last-child{margin-top:auto}
.checks li span{display:block}
.checks li strong{display:block;margin-bottom:1px}
.stat-band li b{display:block;line-height:1.15}
.stat-band li span{display:block;margin-top:3px;line-height:1.3}
.contact-final .cf-opt{align-items:center;text-align:center}
.form .frow>div{display:flex;flex-direction:column}
.form .frow>div input,.form .frow>div select{margin-top:auto}
.dv-recap b{max-width:62%;overflow-wrap:break-word}
.hero-cta{gap:10px}
.hero-cta .btn{width:100%;justify-content:center}
@media(min-width:640px){.hero-cta{display:flex;flex-wrap:wrap}.hero-cta .btn{width:auto}}
.btn{text-align:center}
/* rythme vertical unique sur tout le site */
main .pad{padding:34px 0}
main .pad-s{padding:26px 0}
main .pad-xs{padding:18px 0}
main > section:last-child{padding-bottom:40px}
.nw{white-space:nowrap}
.sec-q{text-wrap:balance;max-width:540px;margin-left:auto;margin-right:auto}
.dv-reass{justify-content:center;margin:0 0 4px;gap:7px 14px}
.dv-reass li{font-size:12px;color:var(--ink-soft)}
/* ---------- v171 : puces "pour qui", architecture simplifiee ---------- */
.pour-qui{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.pour-qui-label{color:#D8D2C0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.pour-qui-chip{display:inline-block;padding:5px 12px;border:1.5px solid rgba(255,255,255,.35);border-radius:100px;color:#F2EFE6;font-size:12.5px;font-weight:600;white-space:nowrap}
.grid3>.sect-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dv-sous li{white-space:nowrap}
.stat-band li b{text-wrap:balance}
.sect-t{color:var(--ink)}
main[data-page="contact"] .ct-block{padding:34px 0;border-bottom:1px solid var(--line)}
main[data-page="contact"] .ct-label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 12px}
main[data-page="contact"] .ct-text{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0 0 20px;max-width:480px}
main[data-page="contact"] .ct-meta{font-size:13.5px;color:var(--ink-soft);margin:14px 0 0}
main[data-page="contact"] .ct-phone{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5.5vw,40px);color:var(--ink);text-decoration:none;display:inline-block;transition:color .2s ease}
main[data-page="contact"] .ct-phone:hover{color:var(--gold-deep)}
main[data-page="contact"] .btn-wa{background:var(--ink);color:#fff}
main[data-page="contact"] .btn-wa:hover{background:#000}
.pw-badge{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-weight:700;font-size:14.5px;color:var(--ink);background:#fff}
.pw-badge svg{width:20px;height:20px;color:var(--gold-deep);flex:none}
main[data-page="apropos"] .pad-s{background:#fff}
main[data-page="apropos"] .hero{padding-top:8px}
main[data-page="apropos"] .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:none}
main[data-page="apropos"] .wrap{max-width:760px!important}
.dv-recap-dyn{display:none}
.dv-recap-dyn.on{display:flex}
.ba-wrap{max-width:1200px}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:30px;align-items:start;justify-content:center}
.ba-cell{display:flex;flex-direction:column;width:100%}
.ba-cell .ba-uni{aspect-ratio:4/5;object-fit:cover;object-position:center}
.trust-inline{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:0;margin:0}
.trust-inline li{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--ink)}
.trust-inline li svg{width:17px;height:17px;color:var(--gold-deep);flex:none}
/* =====================================================================
v299 - premier affichage
Le fond sombre evite toute zone blanche pendant le chargement de la
photo, et garde le texte du hero lisible immediatement.
===================================================================== */
html,body{background-color:#F4F1E9}
.hero-photo{background-color:#14161A}
.hp-bg{background-color:#14161A;background-size:cover;background-position:center}
.hp-bg[data-bg="hero_auto"]{background-image:url("/img/hero-pauto-v2.webp")}
.hp-bg[data-bg="hero_textile"]{background-image:url("/img/hero-textile-pc-v2.webp")}
.hp-bg[data-bg="hero_fleet"]{background-image:url("/img/hero-fleet-v2.webp")}
.hp-bg[data-bg="hero_bureaux"]{background-image:url("/img/hero-bureaux-v2.webp")}
.hp-bg[data-bg="hero_protex"]{background-image:url("/img/hero-protex-v2.webp")}
@media(max-width:899px){.hp-bg[data-bg="hero_accueil"]{background-image:url("/img/hero-accueil-mob-v2.webp")}}
.tx-pop{position:fixed;inset:0;background:rgba(20,18,12,.55);z-index:999;display:none;align-items:center;justify-content:center;padding:22px}
.tx-pop.on{display:flex}
.tx-pop-card{background:#fff;border-radius:22px;max-width:420px;width:100%;padding:28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.tx-pop-card h3{font-size:24px;margin:0 0 10px}
.tx-pop-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.tx-pop-card li{font-size:14.5px;font-weight:600;margin:7px 0;list-style:none}
.tx-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-top:18px}
.tx-tab{flex:0 0 auto;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;cursor:pointer}
.tx-tab.on{background:var(--gold-deep,#A07C22);border-color:var(--gold-deep,#A07C22);color:#fff}
.tx-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:12px;background:#fff}
.tx-item b{font-size:15.5px}
.tx-old{color:var(--ink-soft);text-decoration:line-through;font-size:13px;font-weight:600}
.tx-new{color:var(--gold-deep,#A07C22);font-weight:800;font-size:16px}
.tx-half{display:block;font-size:10.5px;letter-spacing:.06em;font-weight:700;color:#1E7B4F;text-transform:uppercase}
.tx-step{display:flex;align-items:center;gap:10px}
.tx-step button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.tx-step span{min-width:18px;text-align:center;font-weight:800}
.tx-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tx-badges em{font-style:normal;font-size:12px;font-weight:700;background:#F3EEDF;border-radius:999px;padding:6px 11px}
.tx-recap{border:1.5px solid var(--gold-deep,#A07C22);border-radius:16px;padding:16px;margin-top:18px;background:#FBF7EC}
.tx-recap .l{display:flex;justify-content:space-between;align-items:center;margin:6px 0;font-size:14px}
.tx-recap .l b{font-size:19px}
.tx-eco{display:inline-block;background:#E5F3EA;color:#1E7B4F;font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 10px;letter-spacing:.05em}
.tx-pack{border:1.5px solid var(--line);border-radius:16px;padding:16px;margin-top:12px;cursor:pointer;position:relative;background:#fff}
.tx-pack.on{border-color:var(--gold-deep,#A07C22);box-shadow:0 0 0 2px rgba(160,124,34,.18)}
.tx-pack .pref{position:absolute;top:-10px;right:14px;background:var(--gold-deep,#A07C22);color:#fff;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.05em}
.tx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.tx-cal button{padding:10px 0;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer;font-size:13.5px}
.tx-cal button:disabled{opacity:.35;cursor:default}
.tx-cal button.on{background:var(--gold-deep,#A07C22);color:#fff;border-color:var(--gold-deep,#A07C22)}
.tx-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tx-slots button{padding:10px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.tx-slots button.on{background:var(--gold-deep,#A07C22);color:#fff;border-color:var(--gold-deep,#A07C22)}
.tx-input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;margin-top:10px}
.tx-hide{display:none}
.tx-label{letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:800;color:var(--gold-deep,#A07C22);margin-top:20px;display:block}
/* =========================================================
v234 — header epure, hierarchie CTA, boutons, animations
========================================================= */
/* ---------- HEADER : plus d'air, fond aligne sur le site ---------- */
header{background:rgba(255,255,255,.88);border-bottom:1px solid transparent}
header.scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.hd-in{min-height:78px}
.logo{gap:0}
.logo .lg-mark{height:44px}
.nav-links{flex:1;justify-content:flex-end;gap:26px;font-size:14.5px}
@media(max-width:1240px){.nav-links{display:none}}
@media(max-width:900px){.hd-in{min-height:64px}.logo .lg-mark{height:36px}}
.drawer{inset:78px 0 0 0}
@media(max-width:900px){.drawer{inset:64px 0 0 0}}
/* ---------- HERO : ligne secteurs d'activite ---------- */
.sectors{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:0;margin:0 auto 26px;padding:0;max-width:640px;
font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.72)}
.sectors span{padding:3px 0;white-space:nowrap}
.sectors span:not(:last-child)::after{content:"•";margin:0 12px;color:var(--gold);opacity:.85}
@media(max-width:640px){
.sectors{font-size:11px;letter-spacing:.1em;max-width:340px;margin-bottom:22px}
.sectors span:not(:last-child)::after{margin:0 9px}
}
/* ---------- HERO : boutons d'abord, reassurance ensuite ---------- */
.hero-photo .hero-cta{margin-top:0;margin-bottom:20px}
.hero-photo .hero-benefs{
display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
gap:10px 22px;margin:0;padding:0;list-style:none}
.hero-photo .hero-benefs li{
display:inline-flex;align-items:center;gap:7px;margin:0;
font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap}
.hero-photo .hero-benefs li svg{width:15px;height:15px;color:var(--gold);flex:none}
@media(max-width:640px){
.hero-photo .hero-benefs{gap:8px 16px}
.hero-photo .hero-benefs li{font-size:12.5px}
}
/* ---------- BLOC CTA unifie (sections de contenu) ---------- */
.cta-unit{margin-top:26px;text-align:center;display:flex;flex-direction:column;
align-items:center;gap:12px}
.cta-unit .btn{width:100%;max-width:340px}
@media(min-width:640px){
.cta-unit{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-unit .btn{width:auto;max-width:none}
.cta-unit .cta-reassur{flex-basis:100%}
}
.cta-reassur{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
list-style:none;margin:6px 0 0;padding:0}
.cta-reassur li{display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.cta-reassur li::before{content:"✓";color:var(--gold-deep);font-weight:900;
font-size:13px;line-height:1;flex:none}
@media(max-width:640px){.cta-reassur{gap:7px 14px}.cta-reassur li{font-size:12.5px}}
/* ---------- BOUTONS : principal dominant, secondaire discret ---------- */
.btn{transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,
background-color .22s ease,border-color .22s ease,color .22s ease}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-gold{background:var(--gold);color:#14161A;font-weight:800;
box-shadow:0 10px 26px -12px rgba(166,132,48,.75),0 2px 5px rgba(20,22,26,.10)}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);
box-shadow:0 18px 38px -14px rgba(166,132,48,.85),0 3px 8px rgba(20,22,26,.14)}
.btn-cta-big{min-height:64px;font-size:17.5px;padding:17px 34px;letter-spacing:.005em;
box-shadow:0 14px 34px -13px rgba(166,132,48,.8),0 3px 8px rgba(20,22,26,.12)}
.btn-cta-big:hover{box-shadow:0 22px 46px -16px rgba(166,132,48,.9),0 4px 10px rgba(20,22,26,.16)}
/* secondaire sur fond clair : discret, sans concurrencer le principal */
.btn-soft{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);
font-weight:700;min-height:64px;font-size:16px;padding:17px 30px}
.btn-soft:hover{border-color:var(--ink-soft);color:var(--ink);background:transparent}
/* secondaire sur photo : plus discret qu'avant (bordure fine, sans remplissage) */
.hero-photo .btn-ghost{border-width:1.5px;border-color:rgba(255,255,255,.55);
color:rgba(255,255,255,.94);font-weight:700;background:transparent}
.hero-photo .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.10);
color:#fff;transform:translateY(-2px)}
.hero-photo .btn-gold{box-shadow:0 14px 34px -12px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.10) inset}
.hero-photo .btn-gold:hover{transform:translateY(-2px)}
/* ---------- ANIMATIONS discretes ---------- */
.reveal{opacity:0;transform:translateY(16px);
transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-photo .wrap>*{animation:heroIn .6s cubic-bezier(.2,.7,.3,1) both}
.hero-photo .wrap>*:nth-child(1){animation-delay:.02s}
.hero-photo .wrap>*:nth-child(2){animation-delay:.08s}
.hero-photo .wrap>*:nth-child(3){animation-delay:.14s}
.hero-photo .wrap>*:nth-child(4){animation-delay:.20s}
.hero-photo .wrap>*:nth-child(5){animation-delay:.26s}
.hero-photo .wrap>*:nth-child(6){animation-delay:.32s}
.card,.sect-card{transition:transform .2s cubic-bezier(.2,.7,.3,1),
box-shadow .25s ease,border-color .25s ease}
a,button{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.hero-photo .wrap>*{animation:none}
.btn:hover{transform:none}
}
/* =========================================================
v235 - titre court, respiration, secondaire plus discret
Selecteurs scopes sur main[data-page="accueil"] : des regles
existantes a cette specificite annulaient sinon les reglages.
========================================================= */
/* ---------- titre : 2 lignes au lieu de 4 sur mobile ---------- */
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{
font-size:clamp(31px,6.2vw,54px);line-height:1.07;letter-spacing:-.015em;
max-width:22ch;margin:0 auto 20px}
@media(max-width:640px){
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{max-width:100%;margin-bottom:17px}}
/* ---------- secteurs : deux lignes, plus d'air ---------- */
.sectors{flex-direction:column;flex-wrap:nowrap;align-items:center;
gap:10px;max-width:none;margin:0 auto 28px}
.sectors>span.sec-line{display:flex;flex-wrap:wrap;justify-content:center;
align-items:center;padding:0}
.sectors>span.sec-line::after{content:none !important}
.sectors .sec-line>span{padding:0;white-space:nowrap}
.sectors .sec-line>span:not(:last-child)::after{content:"•";margin:0 13px;
color:var(--gold);opacity:.9}
@media(max-width:640px){
.sectors{gap:8px;margin-bottom:24px;font-size:11px;letter-spacing:.1em;max-width:none}
.sectors .sec-line>span:not(:last-child)::after{margin:0 10px}}
/* ---------- sous-titre : largeur reduite, lecture plus confortable ---------- */
main[data-page="accueil"] .hero-photo .lead{
max-width:520px;margin:0 auto 28px;font-size:17px;line-height:1.72}
@media(max-width:640px){
main[data-page="accueil"] .hero-photo .lead{
max-width:400px;font-size:15.5px;line-height:1.68;margin-bottom:24px}}
/* ---------- bouton secondaire : nettement en retrait ---------- */
.hero-photo .btn-ghost{border-width:1px;border-color:rgba(255,255,255,.32);
color:rgba(255,255,255,.8);font-weight:600;font-size:15px;background:transparent;
box-shadow:none;text-shadow:none}
.hero-photo .btn-ghost:hover{border-color:rgba(255,255,255,.58);
color:#fff;background:rgba(255,255,255,.07)}
.btn-soft{border-width:1px;border-color:var(--line);color:var(--ink-soft);
font-weight:600;font-size:15px;box-shadow:none}
.btn-soft:hover{border-color:#C9C3B2;color:var(--ink);background:transparent}
/* =========================================================
v236 - nouvelles photos de hero (accueil)
Mobile : cadrage portrait / PC : cadrage paysage
La bascule utilise le mecanisme deja en place.
========================================================= */
@media(max-width:899px){
.hp-bg[data-bg="hero_accueil"]{background-position:center center !important;
background-size:cover !important}
main[data-page="accueil"] .hero-photo{min-height:80svh;display:flex;align-items:center;
padding:64px 0 58px}
}
@media(min-width:900px){
.hp-bg[data-bg="hero_accueil"]{background-position:center 42% !important}
}
/* =====================================================================
v237 - DESIGN SYSTEM : composant Hero unique
Toutes les regles sont ecrites en main[data-page] ... pour egaler la
specificite des anciennes regles par page, qui sinon les annuleraient.
Ordre impose : titre > sous-titre > secteurs > bouton principal >
bouton secondaire > reassurance.
===================================================================== */
:root{
--hero-pad-top:96px; --hero-pad-bottom:88px;
--hero-gap-title:18px; /* sous le titre */
--hero-gap-sub:16px; /* sous le sous-titre */
--hero-gap-sectors:28px; /* avant les boutons */
--hero-gap-cta:24px; /* apres les boutons */
--hero-btn-h:58px; --hero-btn-w:266px;
}
/* ---------- conteneur : identique sur les 4 pages ---------- */
main[data-page] .hero-photo{padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);
position:relative;color:#fff;overflow:hidden}
main[data-page] .hero-photo .wrap{position:relative;z-index:2;text-align:center;max-width:820px}
main[data-page] .hero-photo .hp-veil{
background:linear-gradient(180deg,rgba(12,12,14,.60) 0%,rgba(12,12,14,.52) 55%,rgba(12,12,14,.60) 100%)}
/* ---------- titre ---------- */
main[data-page] .hero-photo h1, main[data-page] .hero-photo h2.as-h1{
font-family:'Archivo',var(--disp),sans-serif;font-weight:800;
text-transform:none;letter-spacing:-.015em;
font-size:clamp(29px,5.4vw,48px);line-height:1.09;
max-width:20ch;margin:0 auto var(--hero-gap-title);text-wrap:balance}
/* ---------- sous-titre ---------- */
main[data-page] .hero-photo .hero-sub{
color:#F6F3EC;font-size:17px;line-height:1.7;
text-shadow:0 1px 14px rgba(0,0,0,.5);
max-width:520px;margin:0 auto var(--hero-gap-sub)}
/* ---------- secteurs ---------- */
main[data-page] .hero-photo .sectors{
display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:9px;
max-width:none;margin:0 auto var(--hero-gap-sectors);padding:0;
font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.74)}
main[data-page] .hero-photo .sectors .sec-line{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:0}
main[data-page] .hero-photo .sectors .sec-line::after{content:none}
main[data-page] .hero-photo .sectors .sec-line>span{padding:0;white-space:nowrap}
main[data-page] .hero-photo .sectors .sec-line>span:not(:last-child)::after{
content:"•";margin:0 13px;color:var(--gold);opacity:.9}
/* ---------- boutons : memes dimensions, meme espacement, memes bordures ---------- */
main[data-page] .hero-photo .hero-cta{
display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
margin:0 0 var(--hero-gap-cta)}
main[data-page] .hero-photo .hero-cta .btn{
min-height:var(--hero-btn-h);min-width:var(--hero-btn-w);
padding:0 28px;font-size:16px;border-radius:100px;
display:inline-flex;align-items:center;justify-content:center;width:auto}
main[data-page] .hero-photo .hero-cta .btn-gold{font-weight:800;border:1.5px solid transparent}
main[data-page] .hero-photo .hero-cta .btn-ghost{
font-weight:600;border:1.5px solid rgba(255,255,255,.32);
color:rgba(255,255,255,.82);background:transparent;box-shadow:none;text-shadow:none}
main[data-page] .hero-photo .hero-cta .btn-ghost:hover{
border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}
/* ---------- reassurance : 4 items = grille 2x2, 3 items = 1 colonne ---------- */
main[data-page] .hero-photo .hero-benefs{
list-style:none;padding:0;margin:0 auto;max-width:560px;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:11px 26px;justify-items:start;text-align:left}
main[data-page] .hero-photo .hero-benefs.is-3{
grid-template-columns:minmax(0,1fr);max-width:320px;justify-items:start;gap:11px}
main[data-page] .hero-photo .hero-benefs li{
display:flex;align-items:flex-start;gap:9px;margin:0;
color:#F2EFE6;font-size:14.5px;font-weight:600;line-height:1.4;text-align:left}
main[data-page] .hero-photo .hero-benefs li svg{
width:16px;height:16px;flex:none;color:var(--gold);margin-top:2px}
/* ---------- tablette et mobile : meme conteneur pour les 4 pages ----------
(une regle v236 ne s'appliquait qu'a l'accueil sous 899px, ce qui
recreait un ecart entre les pages : elle est neutralisee ici) */
@media(max-width:899px){
main[data-page] .hero-photo{min-height:80svh;display:flex;align-items:center;
padding:var(--hero-pad-top) 0 var(--hero-pad-bottom)}
main[data-page] .hero-photo>.wrap{width:100%}
}
/* ---------- mobile : memes regles, une seule colonne ---------- */
@media(max-width:640px){
:root{--hero-pad-top:70px;--hero-pad-bottom:62px;
--hero-gap-title:15px;--hero-gap-sub:14px;
--hero-gap-sectors:24px;--hero-gap-cta:22px}
main[data-page] .hero-photo h1, main[data-page] .hero-photo h2.as-h1{max-width:100%;font-size:clamp(28px,7vw,38px)}
main[data-page] .hero-photo .hero-sub{max-width:400px;font-size:15.5px;line-height:1.65}
main[data-page] .hero-photo .sectors{font-size:11px;letter-spacing:.1em;gap:8px}
main[data-page] .hero-photo .sectors .sec-line>span:not(:last-child)::after{margin:0 10px}
main[data-page] .hero-photo .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
main[data-page] .hero-photo .hero-cta .btn{width:100%;min-width:0;max-width:none}
main[data-page] .hero-photo .hero-benefs,
main[data-page] .hero-photo .hero-benefs.is-3{
grid-template-columns:minmax(0,1fr);max-width:300px;gap:10px}
}
/* ---------- images : paysage sur PC, portrait sur mobile ---------- */
@media(min-width:900px){
.hp-bg[data-bg="hero_fleet"]{!important}
.hp-bg[data-bg="hero_bureaux"]{!important}
.hp-bg[data-bg="hero_protex"]{!important}
}
main[data-page="textiles"] .hp-bg{background-position:center center}
.hp-bg[data-bg="hero_accueil"]{background-position:center center !important}
@media(min-width:900px){
.hp-bg[data-bg="hero_accueil"]{background-position:center 42% !important}
}
/* ---------- heros clairs (Devis, Essai, Contact, Qui sommes-nous, Mentions) :
meme rythme vertical que le composant principal ---------- */
main[data-page] .hero h1, main[data-page] .hero h2.as-h1{margin:0 0 var(--hero-gap-title);line-height:1.09;
font-size:clamp(29px,5.4vw,48px);letter-spacing:-.015em}
main[data-page] .hero .lead{margin-bottom:var(--hero-gap-sub)}
/* =====================================================================
v239 - equilibre du header (PC)
Mesures : conteneur utile 1176px, logo 92px de large (PNG detoure au
pixel, sans marge transparente), menu ~915px. Il reste donc environ
169px d'espace libre.
En v234 le menu etait cale a droite : ces 169px s'accumulaient d'un
seul bloc entre le logo et le menu. Le menu est desormais centre dans
la bande situee a droite du logo (repartition 50/50 de l'espace
libre), puis decale d'une unite de navigation (26px, l'ecart entre
deux liens) vers le logo : un bord ouvert a droite demande
optiquement un peu plus d'air qu'un cote ferme par le logo.
Resultat : environ 71px a gauche du menu, 97px a droite.
Aucune valeur fixe, la repartition reste juste a toute largeur.
Hauteur du header, taille du logo et style des liens inchanges.
===================================================================== */
.hd-in .nav-links{
flex:1;min-width:0;
justify-content:center;
padding-right:26px; /* une unite de navigation */
gap:26px}
.hd-in{align-items:center}
/* =====================================================================
v241 - reduction de la taille du logo dans le header (-18%)
Mesures du PNG source : 560x267, detoure au pixel.
Bandes internes : bloc ELM 69,3% de la hauteur, interligne 14,2%,
mot NETTOYAGE 14,6%.
Hauteur PC : 44px -> 36px (-18,2%), largeur 92px -> 75px.
Hauteur mobile/tablette : 36px -> 30px (-16,7%), largeur 75px -> 63px.
Le header garde sa hauteur (78px PC / 64px mobile), donc la marge
verticale autour du logo passe de 17px a 21px sur PC et de 14px a
17px sur mobile : plus d'air sans deplacer quoi que ce soit.
L'espace horizontal libere est redistribue automatiquement par la
regle v239 (menu centre dans la bande a droite du logo), aucune
valeur fixe a corriger.
Proportions, couleurs, position et navigation inchangees.
===================================================================== */
.hd-in .logo .lg-mark{height:36px}
@media(max-width:900px){.hd-in .logo .lg-mark{height:30px}}
/* =====================================================================
v245 - Titre hero BUREAUX : 3 lignes sur mobile au lieu de 4
Desktop inchange (coupure apres "chaque matin,").
Mobile : coupures apres "impeccables" et apres "sans jamais",
taille calee sur la largeur utile (100vw - 44px de padding .wrap)
pour que la ligne la plus longue tienne sur un seul rang.
===================================================================== */
.h1-bur .brm{display:none}
@media(max-width:640px){
.h1-bur .brm{display:inline}
.h1-bur .brd{display:none}
main[data-page="bureaux"] .hero-photo h1.h1-bur, main[data-page="bureaux"] .hero-photo h2.as-h1.h1-bur{
font-size:clamp(21px,calc((100vw - 44px)/13.6),32px);
max-width:100%;
text-wrap:wrap}
}
/* =====================================================================
v246 - RESPIRATION
1. Nouvelles photos de hero accueil (paysage PC / portrait mobile)
2. Rythme vertical elargi sur tout le site (PC + mobile)
3. Suppression des listes de secteurs dans les heros
Aucune couleur, aucun contenu, aucune navigation modifies.
===================================================================== */
/* ---------- 1. HERO ACCUEIL : cadrage + voile ---------- */
main[data-page="accueil"] .hero-photo .hp-veil{
background:linear-gradient(180deg,
rgba(10,11,13,.66) 0%,
rgba(10,11,13,.52) 45%,
rgba(10,11,13,.72) 100%)}
@media(max-width:899px){
.hp-bg[data-bg="hero_accueil"]{
background-position:center center !important;
background-size:cover !important}
main[data-page="accueil"] .hero-photo{
min-height:82svh;display:flex;align-items:center;
padding:88px 0 80px}
}
@media(min-width:900px){
.hp-bg[data-bg="hero_accueil"]{background-position:center 56% !important}
}
/* ---------- 2. HEROS : rythme interne ---------- */
:root{
--hero-pad-top:118px; --hero-pad-bottom:110px;
--hero-gap-title:22px; --hero-gap-sub:36px;
--hero-gap-sectors:0px; --hero-gap-cta:30px}
main[data-page] .hero-photo h1, main[data-page] .hero-photo h2.as-h1{margin-bottom:var(--hero-gap-title)}
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{max-width:90%;margin:0 auto var(--hero-gap-title)}
main[data-page] .hero-photo .hero-sub{margin:0 auto var(--hero-gap-sub)}
main[data-page] .hero-photo .hero-cta{margin:0 0 var(--hero-gap-cta)}
main[data-page] .hero-photo .hero-benefs{margin-top:4px;gap:11px}
.hero-photo .hero-benefs{gap:11px}
.hero-cta{gap:14px}
/* listes de secteurs : supprimees du markup, neutralisees ici par securite */
.sectors{display:none !important}
/* ---------- 3. SECTIONS : rythme vertical ---------- */
main .pad{padding:112px 0 !important}
main .pad-s{padding:88px 0 !important}
main .pad-xs{padding:56px 0 !important}
/* ---------- 4. TITRES DE SECTION ---------- */
.sec-head{margin-bottom:42px}
.sec-head .tag{margin-bottom:14px}
.sec-title{margin:14px 0 0}
.sec-head .lead,
main[data-page] .sec-head .lead{margin-top:16px}
.mega-num,main[data-page] .mega-num{margin-top:20px}
.mega-sub,main[data-page] .mega-sub{margin-top:8px}
/* ---------- 5. GRILLES ET CARTES ---------- */
.grid2{gap:30px}
.grid3{gap:26px}
.grid4{gap:24px}
.card{padding:34px}
.stat-band{gap:18px}
.stat-band li,
main[data-page] .stat-band li{padding:21px 15px}
.ba-grid{gap:38px;margin-top:38px}
.ba-cap,main[data-page] .ba-cap{margin-top:15px}
/* ---------- 6. BLOCS DE CONTENU ---------- */
.checks{margin:30px 0;gap:17px}
.checks-2col{gap:18px 44px}
.elm-why{max-width:800px}
.elm-why-head{margin-bottom:22px}
.elm-why-item{padding:30px 0;gap:24px}
.elm-why-item h3{margin:2px 0 8px}
.cta-unit{margin-top:38px;gap:14px}
.adv-list{margin-top:30px;gap:14px}
.price-card ul{margin:20px 0 26px;gap:14px}
.kitem{padding:22px}
.kpanel{gap:16px}
.ktabs{margin:40px 0 24px}
.kbenefits{margin-top:26px;padding:20px 22px;gap:12px 24px}
.bk-steps{margin:34px 0}
.pick-grid{gap:14px;margin-top:12px}
.bk-navrow{margin-top:34px}
.lead,.card p,.elm-why-item p{line-height:1.72}
/* ---------- 7. FAQ ET FORMULAIRES ---------- */
details{margin-bottom:14px;padding:0 24px}
details summary{padding:21px 0}
.form label{margin:24px 0 8px}
.form .frow{gap:18px}
.form input,.form select,.form textarea{padding:14px 16px}
/* ---------- 8. BANDEAU CTA ET FOOTER ---------- */
.cta-band{padding:64px 48px;gap:34px}
footer .f-grid{gap:48px}
footer .f-bottom{margin-top:46px;padding-top:26px}
/* ---------- 9. TABLETTE ---------- */
@media(max-width:900px){
main .pad{padding:84px 0 !important}
main .pad-s{padding:66px 0 !important}
main .pad-xs{padding:42px 0 !important}
.cta-band{padding:48px 34px}
footer .f-grid{gap:36px}
}
/* ---------- 10. MOBILE ---------- */
@media(max-width:640px){
:root{
--hero-pad-top:84px; --hero-pad-bottom:76px;
--hero-gap-title:18px; --hero-gap-sub:28px;
--hero-gap-cta:24px}
main .pad{padding:70px 0 !important}
main .pad-s{padding:54px 0 !important}
main .pad-xs{padding:36px 0 !important}
.sec-head{margin-bottom:30px}
.grid2,.grid3,.grid4{gap:18px}
.card{padding:25px}
.checks{margin:24px 0;gap:15px}
.checks-2col{gap:15px 0}
.elm-why-item{padding:24px 0;gap:18px}
.ba-grid{gap:28px;margin-top:28px}
.cta-band{padding:38px 24px;gap:24px}
.cta-unit{margin-top:30px}
.ktabs{margin:30px 0 20px}
}
/* =====================================================================
v247 - pages Particuliers (nettoyage auto / canape) importees
Le CSS d'origine est conserve mais scope a main.cc-page pour ne
toucher aucune page existante. Palette et variables : celles d'ELM.
===================================================================== */
main.cc-page img{max-width:100%;display:block}
main.cc-page a{color:inherit;text-decoration:none}
main.cc-page button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
main.cc-page h1,main.cc-page h2,main.cc-page h3,main.cc-page h4, main.cc-page h2.as-h1{font-family:var(--disp);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.015em}
main.cc-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
main.cc-page .tag{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
main.cc-page .hero-photo .tag,main.cc-page .hero .tag{display:none}
main.cc-page .elm-why{max-width:760px}
main.cc-page .elm-why-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
main.cc-page .elm-why-head::before{content:"";width:44px;height:1.5px;background:var(--gold)}
main.cc-page .elm-why-head h2{font-family:var(--disp);font-size:clamp(22px,3.4vw,30px);margin:0}
main.cc-page .elm-why-item{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
main.cc-page .elm-why-item:last-child{border-bottom:none}
main.cc-page .elm-num{flex:none;width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--gold-deep);letter-spacing:.05em}
main.cc-page .elm-why-item h3{margin:2px 0 6px;font-size:18px}
main.cc-page .elm-why-item p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.65}
main.cc-page .lead{font-size:17px;color:var(--ink-soft);max-width:640px}
main.cc-page .sec-title{font-size:clamp(28px,4.6vw,44px);margin:12px 0 10px}
main.cc-page .sec-head{text-align:center;max-width:700px;margin:0 auto}
main.cc-page .sec-head .lead{margin-left:auto;margin-right:auto}
main.cc-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;font-size:15.5px;padding:15px 26px;border-radius:100px;transition:.22s ease;white-space:nowrap}
main.cc-page .btn-main{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
main.cc-page .btn-main:hover{background:#000;transform:translateY(-2px)}
main.cc-page .btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-sm)}
main.cc-page .btn-gold{transition:transform .2s ease,background .2s ease,color .2s ease}
main.cc-page .btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px)}
main.cc-page .btn-gold:active{transform:scale(.975);transition:transform .2s ease}
main.cc-page .btn-ghost{border:1.5px solid var(--gold);color:var(--ink)}
main.cc-page .btn-ghost:hover{background:var(--gold-soft)}
main.cc-page .btn-wa{background:var(--wa);color:#fff}
main.cc-page .btn-wa:hover{filter:brightness(1.06);transform:translateY(-2px)}
main.cc-page [data-page]{display:none}
main.cc-page [data-page].on{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main.cc-page .hero{padding:64px 0 40px}
main.cc-page .hero h1, main.cc-page .hero h2.as-h1{font-size:clamp(32px,5.8vw,56px);margin:18px 0 16px}
main.cc-page .hero h1 .gd, main.cc-page .hero h2.as-h1 .gd{color:var(--gold)}
main.cc-page .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
main.cc-page .hero-note{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;font-size:14px;font-weight:600;color:var(--ink-soft)}
main.cc-page .hero-note span{display:flex;align-items:center;gap:7px}
main.cc-page .hero-note svg{width:17px;height:17px;color:var(--gold)}
main.cc-page .hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
main.cc-page .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
main.cc-page .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
main.cc-page .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
main.cc-page .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:.25s;box-shadow:var(--shadow-sm)}
main.cc-page .card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--gold)}
main.cc-page .card h3{font-size:20px;margin-bottom:8px}
main.cc-page .card p{color:var(--ink-soft);font-size:15px;margin:0}
main.cc-page .card .go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;color:var(--gold-deep)}
main.cc-page .card-ic{width:54px;height:54px;border-radius:16px;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:16px;font-size:27px;line-height:1}
main.cc-page .card-img{border-radius:14px;overflow:hidden;margin-bottom:18px;aspect-ratio:16/10}
main.cc-page .card-img img{width:100%;height:100%;object-fit:cover}
main.cc-page .pad{padding:64px 0}
main.cc-page .pad-s{padding:44px 0}
main.cc-page .sec-white{background:#FFFFFF}
main.cc-page .ba{position:relative;border-radius:var(--r);overflow:hidden;--pos:50%;aspect-ratio:3/4;max-height:560px;box-shadow:var(--shadow);border:1px solid var(--line);background:#14161A}
main.cc-page .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
main.cc-page .ba .after{clip-path:inset(0 0 0 var(--pos))}
main.cc-page .ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.4)}
main.cc-page .ba .ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.3);color:var(--ink)}
main.cc-page .ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
main.cc-page .ba .ba-tag{position:absolute;top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(20,22,26,.72);color:#fff;padding:6px 12px;border-radius:100px;backdrop-filter:blur(4px)}
main.cc-page .ba .tag-av{left:14px}
main.cc-page .ba .tag-ap{right:14px}
main.cc-page .ba-cap{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-soft);text-align:center}
main.cc-page .ba-sub{margin:6px auto 0;max-width:440px;font-size:13px;font-weight:500;line-height:1.55;color:var(--ink-soft);text-align:center}
main.cc-page .ba-note{margin:8px 0 0;text-align:center;font-size:13.5px;font-weight:700;color:var(--gold-deep)}
main.cc-page .ba-note::before{content:"\2713";margin-right:7px}
main.cc-page .price-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
main.cc-page .price-card.pop{border-color:var(--gold);box-shadow:var(--shadow)}
main.cc-page .price-card .pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px;white-space:nowrap}
main.cc-page .price-card h3{font-size:20px}
main.cc-page .price-card ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:10px;flex:1}
main.cc-page .price-card li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
main.cc-page .price-card li svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:2px}
main.cc-page .price{font-family:var(--disp);font-weight:700;font-size:32px;margin-bottom:16px}
main.cc-page .step h4{font-size:17px;margin-bottom:4px}
main.cc-page .checks{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:12px}
main.cc-page .checks li{display:flex;gap:11px;font-size:15.5px}
main.cc-page .checks li svg{width:20px;height:20px;flex:none;color:var(--gold);margin-top:2px}
main.cc-page details{border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:10px;background:var(--card)}
main.cc-page details summary{cursor:pointer;font-weight:700;font-size:16px;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--disp)}
main.cc-page details summary::after{content:"+";font-size:22px;color:var(--gold);transition:.2s;flex:none}
main.cc-page details[open] summary::after{transform:rotate(45deg)}
main.cc-page details p{margin:0 0 17px;color:var(--ink-soft);font-size:15px}
main.cc-page .quote{max-width:720px;margin:0 auto;text-align:center}
main.cc-page .quote blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(19px,3vw,25px);line-height:1.4;margin:16px 0 16px}
main.cc-page .quote .who{font-weight:600;color:var(--ink-soft);font-size:14.5px}
main.cc-page .qdots{display:flex;gap:8px;justify-content:center;margin-top:18px}
main.cc-page .qdots button{width:11px;height:11px;border-radius:50%;background:var(--line);transition:.2s;padding:0}
main.cc-page .qdots button.on{background:var(--gold);transform:scale(1.25)}
main.cc-page .form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
main.cc-page .form label{display:block;font-weight:700;font-size:13.5px;margin:16px 0 6px}
main.cc-page .form input,main.cc-page .form select,main.cc-page .form textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;background:var(--card-soft);color:var(--ink);transition:.2s}
main.cc-page .form input:focus,main.cc-page .form select:focus,main.cc-page .form textarea:focus{outline:none;border-color:var(--gold)}
main.cc-page .form textarea{min-height:100px;resize:vertical}
main.cc-page .form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
main.cc-page .cta-band{background:var(--ink);color:#fff;border-radius:calc(var(--r) + 6px);padding:46px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
main.cc-page .cta-band h2{font-size:clamp(24px,4vw,34px)}
main.cc-page .cta-band p{color:#C9C4B4;margin:8px 0 0;max-width:480px}
main.cc-page .essai-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:15px;cursor:pointer;padding:0;margin-bottom:14px}
main.cc-page .essai-back:hover{color:var(--ink)}
main.cc-page .fc-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px -6px rgba(20,22,26,.35);transition:.22s}
main.cc-page .fc-btn:hover{transform:scale(1.08)}
main.cc-page .fc-btn svg{width:27px;height:27px}
main.cc-page .fc-msg{background:#1A1A1A;color:var(--gold)}
main.cc-page .fc-tel{background:var(--gold);color:var(--ink)}
main.cc-page .fc-wa{background:var(--wa);color:#fff}
main.cc-page .city-chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-weight:600;font-size:14.5px;box-shadow:var(--shadow-sm)}
main.cc-page .city-chip:first-child{border-color:var(--gold);background:var(--gold-soft)}
main.cc-page .bk-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0}
main.cc-page .bk-dot{width:36px;height:36px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink-soft);transition:.2s}
main.cc-page .bk-dot.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
main.cc-page .bk-bar{width:34px;height:2px;background:var(--line)}
main.cc-page .bk-step{display:none}
main.cc-page .bk-step.on{display:block;animation:fadeUp .3s ease}
main.cc-page .bk-step h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
main.cc-page .bk-count{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
main.cc-page .pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
main.cc-page .pick-grid.pick-3{grid-template-columns:repeat(3,1fr)}
main.cc-page .pick{border:1.5px solid var(--line);border-radius:14px;padding:14px 10px;font-weight:700;font-size:14.5px;background:var(--card-soft);transition:.2s;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
main.cc-page .pick small{font-weight:500;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
main.cc-page .pick:hover{border-color:var(--gold)}
main.cc-page .pick.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-sm)}
main.cc-page .pick[data-pick-parfum]{justify-content:flex-start}
main.cc-page .pick[data-pick-parfum] small:last-child{margin-top:auto;padding-top:8px}
main.cc-page .bk-navrow{display:flex;gap:12px;justify-content:space-between;margin-top:24px;flex-wrap:wrap}
main.cc-page .bk-recap{background:var(--card-soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0;font-size:15px}
main.cc-page .bk-recap div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
main.cc-page .bk-recap div:last-child{border-bottom:none}
main.cc-page .bk-recap b{color:var(--ink)}
main.cc-page .hero-photo{position:relative;padding:96px 0 84px;color:#fff;overflow:hidden}
main.cc-page .hero-photo .hp-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
main.cc-page .hero-photo .hp-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.74) 0%,rgba(12,12,14,.56) 55%,rgba(12,12,14,.74) 100%);z-index:1}
main.cc-page .hero-photo .wrap{position:relative;z-index:2;text-align:center;max-width:820px}
main.cc-page .hero-photo h1, main.cc-page .hero-photo h2.as-h1{font-family:'Archivo',var(--disp),sans-serif;font-weight:800;text-transform:none;letter-spacing:-.01em;font-size:clamp(27px,5vw,46px);line-height:1.14;margin:6px 0 14px;text-wrap:balance}
main.cc-page .hero-photo .lead{color:#F6F3EC;font-size:18px;line-height:1.75;text-shadow:0 1px 14px rgba(0,0,0,.5);margin-left:auto;margin-right:auto}
main.cc-page .hero-photo .hero-cta{justify-content:center}
main.cc-page .hero-photo .btn-ghost{border-color:rgba(255,255,255,.85);border-width:2px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
main.cc-page .hero-photo .btn-ghost:hover{background:rgba(255,255,255,.12)}
main.cc-page .cal{background:var(--card-soft);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:8px}
main.cc-page .cal-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-weight:700;font-size:16px;margin-bottom:10px}
main.cc-page .cal-nav{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:20px;display:grid;place-items:center}
main.cc-page .cal-nav:hover{border-color:var(--gold)}
main.cc-page .cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
main.cc-page .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
main.cc-page .cal-grid button{aspect-ratio:1;border-radius:10px;font-weight:600;font-size:14.5px;display:grid;place-items:center;transition:.15s}
main.cc-page .cal-grid button:not(:disabled):hover{background:var(--gold-soft)}
main.cc-page .cal-grid button.on{background:var(--gold);color:var(--ink);font-weight:700}
main.cc-page .cal-grid button:disabled{color:#C9C4B4;cursor:default}
main.cc-page .aud-toggle{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:100px;padding:10px 20px;margin-top:22px;background:var(--card-soft)}
main.cc-page .aud-toggle span{font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
main.cc-page .aud-toggle button{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:4px 2px;transition:.15s}
main.cc-page .aud-toggle button.on{color:var(--gold-deep)}
main.cc-page .aud-toggle button:hover{color:var(--ink)}
main.cc-page .hero-stack{display:flex;flex-direction:column;gap:12px;max-width:480px;margin:24px auto 0}
main.cc-page .adv-list{list-style:none;width:fit-content;max-width:100%;margin:22px auto 0;display:grid;gap:10px;text-align:left;padding:0}
main.cc-page .stat-band{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
main.cc-page .stat-band li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 14px;text-align:center;box-shadow:var(--shadow-sm)}
main.cc-page .stat-band b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.25;text-wrap:balance;color:var(--gold-deep)}
main.cc-page .stat-band span{display:block;margin-top:5px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-soft)}
main.cc-page .adv-list li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink-soft)}
main.cc-page .adv-list li::before{content:"\2713";color:var(--gold-deep);font-weight:800;font-size:15px}
main.cc-page .hero-stack .btn{width:100%;padding:17px 26px;font-size:16px}
main.cc-page .bk-options{display:flex;flex-direction:column;gap:8px;margin-top:8px}
main.cc-page label.bk-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin:0;background:var(--card-soft);cursor:pointer;transition:.15s;font-weight:600;font-size:15px}
main.cc-page label.bk-opt:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
main.cc-page label.bk-opt input{width:20px;height:20px;accent-color:var(--gold-deep);margin:0;padding:0;flex:none}
main.cc-page label.bk-opt span{flex:1;font-size:15px;font-weight:600}
main.cc-page label.bk-opt b{color:var(--gold-deep);white-space:nowrap;margin-left:auto}
main.cc-page .bk-photo-zone{width:100%;border:2px dashed var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card-soft);transition:.15s}
main.cc-page .bk-photo-zone:hover{border-color:var(--gold)}
main.cc-page .bk-photo-zone b{font-family:var(--disp);font-size:16px}
main.cc-page .bk-photo-zone small{color:var(--ink-soft);font-size:12.5px}
main.cc-page .bk-photo-previews{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
main.cc-page .bk-photo-previews .ph{position:relative;width:86px;height:86px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
main.cc-page .bk-photo-previews .ph img{width:100%;height:100%;object-fit:cover}
main.cc-page .bk-photo-previews .ph button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(20,22,26,.8);color:#fff;font-size:13px;display:grid;place-items:center}
main.cc-page .ktabs{display:flex;gap:4px;justify-content:center;border-bottom:1.5px solid var(--line);margin:30px 0 18px;overflow-x:auto}
main.cc-page .ktabs button{font-weight:700;font-size:15px;padding:12px 14px;color:var(--ink-soft);border-bottom:2.5px solid transparent;white-space:nowrap;transition:.15s}
main.cc-page .ktabs button.on{color:var(--gold-deep);border-bottom-color:var(--gold)}
main.cc-page .kpanel{display:none;flex-direction:column;gap:12px}
main.cc-page .kpanel.on{display:flex}
main.cc-page .kitem{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;transition:.15s}
main.cc-page .kitem.sel{border-color:var(--gold);background:var(--gold-soft)}
main.cc-page .kic{width:50px;height:50px;border-radius:14px;background:var(--gold-soft);display:grid;place-items:center;font-size:24px;flex:none}
main.cc-page .kitem.sel .kic{background:#fff}
main.cc-page .kinfo{flex:1}
main.cc-page .kinfo b{font-family:var(--disp);font-size:16.5px;display:block}
main.cc-page .kinfo small{color:var(--ink-soft);font-size:13px}
main.cc-page .kright{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
main.cc-page .kprice{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--gold-deep);white-space:nowrap}
main.cc-page .kqty{display:flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:100px;background:var(--card-soft)}
main.cc-page .kqty button{width:38px;height:38px;font-size:19px;font-weight:700;color:var(--gold-deep);display:grid;place-items:center}
main.cc-page .kqty .kn{min-width:26px;text-align:center;font-weight:700;font-size:16px}
main.cc-page .kchoose{border:1.5px solid var(--line);border-radius:100px;padding:9px 20px;font-weight:700;font-size:14px;background:var(--card-soft);transition:.15s}
main.cc-page .kitem.sel .kchoose{background:var(--gold);border-color:var(--gold);color:var(--ink)}
main.cc-page .kbenefits{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;background:var(--gold-soft);border-radius:16px;padding:16px 18px;margin-top:18px;font-weight:600;font-size:14px}
main.cc-page .ktotal{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:22px;margin-top:14px}
main.cc-page .ktotal .kempty{color:var(--ink-soft);text-align:center;margin:0;font-size:15px}
main.cc-page .krecap{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:14.5px}
main.cc-page .krecap div{display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft)}
main.cc-page .ksum{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid var(--line);padding-top:12px}
main.cc-page .ksum span{letter-spacing:.1em;text-transform:uppercase;font-size:13px;font-weight:700;color:var(--ink-soft)}
main.cc-page .ksum b{font-family:var(--disp);font-size:26px;color:var(--gold-deep)}
main.cc-page .pr-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
main.cc-page .pr-check{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px;background:#fff;cursor:pointer}
main.cc-page .pr-check:has(input:checked){border-color:var(--gold-deep);background:var(--gold-soft)}
main.cc-page .pr-check input{accent-color:var(--gold-deep)}
main.cc-page .checks-2col{display:block;columns:2;column-gap:30px}
main.cc-page .checks-2col li{break-inside:avoid;margin-bottom:12px}
main.cc-page .wrap{max-width:660px !important}
main.cc-page .hero-split{grid-template-columns:1fr !important;gap:26px}
main.cc-page .grid2,main.cc-page .grid3,main.cc-page .grid4{grid-template-columns:1fr !important}
main.cc-page .checks-2col{columns:1 !important}
main.cc-page .hero-photo .wrap{max-width:660px !important}
main.cc-page .nav-drop{position:relative}
main.cc-page .nav-drop>a{display:inline-block}
main.cc-page .nav-drop .nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:70}
main.cc-page .nav-drop:hover .nav-menu,main.cc-page .nav-drop:focus-within .nav-menu{display:block}
main.cc-page .nav-menu>a{display:block;background:#fff;white-space:nowrap}
main.cc-page .nav-drop .nav-menu>a{padding:12px 18px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-top:none}
main.cc-page .nav-drop .nav-menu>a:first-child{border-top:1px solid var(--line);border-radius:14px 14px 0 0}
main.cc-page .nav-drop .nav-menu>a:last-child{border-radius:0 0 14px 14px;box-shadow:var(--shadow-sm)}
main.cc-page .nav-drop .nav-menu>a:hover{background:var(--gold-soft)}
main.cc-page @media(min-width:900px){.wrap:has(.ba){max-width:940px !important}
.ba{border-radius:20px}}
main[data-page="part-textile"] #tx-book{padding-top:26px}
main.cc-page @media(max-width:899px){.hp-bg[data-bg="hero_accueil"]{background-position:center !important}}
main.cc-page .ba-static{display:block;width:100%;border-radius:18px;box-shadow:var(--shadow-sm)}
main.cc-page .ba-pair:has(.ba-uni)>div{display:flex;flex-direction:column}
main.cc-page .ba-pair .ba-uni{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center}
main.cc-page .ba-pair:has(.ba-uni) .ba-cap{margin-top:auto;padding-top:12px}
main.cc-page .ba-pair>div{min-width:0}
main.cc-page .trust-band{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
main.cc-page .trust-band li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm)}
main.cc-page @media(prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ba-uni{transition:transform .4s ease}
.ba-pair>div:hover .ba-uni{transform:scale(1.02)}}
main.cc-page .big-stat{font-family:var(--disp);font-weight:800;font-size:clamp(22px,5vw,32px);line-height:1.2;color:var(--ink);margin:14px 0 0;text-wrap:balance}
main.cc-page .card-ic-svg{display:inline-grid;place-items:center}
main.cc-page .card-ic-svg svg{width:26px;height:26px;color:var(--gold-deep)}
main.cc-page .form-timer{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 14px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:13px;font-weight:700;color:var(--ink-soft)}
main.cc-page .form-timer svg{width:16px;height:16px;color:var(--gold-deep)}
main.cc-page .contact-final{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
main.cc-page .cf-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none}
main.cc-page .cf-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--paper);display:grid;place-items:center}
main.cc-page .cf-ic svg{width:22px;height:22px;color:var(--gold-deep)}
main.cc-page .cf-opt b{display:block;font-size:16px}
main.cc-page .cf-opt small{display:block;color:var(--ink-soft);font-size:13px;margin-top:2px}
main.cc-page .sect-t{font-size:18px;font-weight:800;margin:0 0 8px}
main.cc-page .f-nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.12);margin-top:28px}
main.cc-page .f-nav a{color:#C9C4B4;font-size:14px;font-weight:600}
main.cc-page .f-nav a:hover{color:#fff}
main.cc-page .legal h3{font-family:var(--disp);font-weight:700;font-size:18px;margin:22px 0 6px}
main.cc-page .legal p{margin:0 0 4px;line-height:1.7}
main.cc-page .sect-card{padding:18px 18px 16px}
main.cc-page .sect-ic{display:inline-grid;place-items:center;margin-bottom:8px}
main.cc-page .sect-ic svg{width:26px;height:26px;color:var(--gold-deep)}
main.cc-page .sect-t{font-size:19px;font-weight:800;margin:0 0 6px}
main.cc-page .sect-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
main.cc-page .mega-num{font-family:var(--disp);font-weight:800;font-size:clamp(56px,16vw,104px);line-height:.95;color:var(--gold-deep);margin:10px 0 0;letter-spacing:-.02em}
main.cc-page .mega-num span{font-size:.5em;vertical-align:super;margin-left:2px}
main.cc-page .mega-sub{font-family:var(--disp);font-weight:700;font-size:clamp(15px,3.6vw,20px);color:var(--ink);margin:2px 0 0;text-transform:uppercase;letter-spacing:.04em}
main.cc-page .trust-band-4{grid-template-columns:repeat(2,1fr)}
main.cc-page .form-tight label{margin-top:12px}
main.cc-page .btn-cta-big{min-height:62px;font-size:17px;letter-spacing:.01em}
main.cc-page .contact-final{align-items:stretch}
main.cc-page .cf-opt{min-height:100%;justify-content:center}
main.cc-page .cf-opt small{white-space:nowrap}
main.cc-page .f-info{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;padding:12px 0 0;font-size:14px}
main.cc-page .f-info a,main.cc-page .f-info span{color:#C9C4B4}
main.cc-page .f-info a:hover{color:#fff}
main.cc-page .sect-card{padding:15px 17px 14px}
main.cc-page .sect-ic{margin-bottom:5px;line-height:0}
main.cc-page .sect-card p{font-size:14px;line-height:1.45}
main.cc-page .sect-t{margin:0 0 4px}
main.cc-page .sect-ic svg,main.cc-page .card-ic-svg svg{width:28px;height:28px}
main.cc-page .cf-ic svg{width:24px;height:24px}
main.cc-page .mega-num{margin-top:6px}
main.cc-page .mega-sub{margin-top:6px}
main.cc-page .trust-band-4 li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;line-height:1.35}
main.cc-page .tb-ic{display:inline-grid;place-items:center;line-height:0}
main.cc-page .tb-ic svg{width:22px;height:22px;color:var(--gold-deep)}
main.cc-page .form ::placeholder{color:#8A8D93;opacity:1}
main.cc-page label.bk-opt{padding:11px 14px;font-size:13.5px;font-weight:500;background:transparent;border-color:rgba(0,0,0,.08)}
main.cc-page .cf-opt{gap:12px;padding:18px 16px}
main.cc-page .cf-opt b{font-size:15.5px;line-height:1.25}
main.cc-page .cf-opt small{font-size:12.5px;margin-top:3px}
main.cc-page .sect-card p,main.cc-page .cf-opt small,main.cc-page .mega-sub+.lead{color:#54575E}
main.cc-page .btn-cta-big{box-shadow:0 12px 30px -12px rgba(197,160,80,.55),0 3px 8px rgba(0,0,0,.12)}
main.cc-page .f-nav{margin-top:24px}
main.cc-page .avis-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
main.cc-page .avis-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
main.cc-page .avis-stars{color:var(--gold-deep);font-size:15px;letter-spacing:2px}
main.cc-page .avis-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;flex:1}
main.cc-page .avis-card figcaption{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
main.cc-page .cta-final-sec .btn-cta-big{display:inline-flex;min-width:280px}
main.cc-page .hiw-sec .lead{margin-top:8px}
main.cc-page .hiw-flow{position:relative;margin-top:30px;display:flex;flex-direction:column;gap:16px}
main.cc-page .hiw-flow::before{content:"";position:absolute;left:39px;top:36px;bottom:36px;width:2px;background:linear-gradient(var(--gold),rgba(197,160,80,.25));z-index:0}
main.cc-page .hiw-card{position:relative;z-index:1;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:0 1px 2px rgba(0,0,0,.04);min-height:150px}
main.cc-page .hiw-head{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
main.cc-page .hiw-num{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1A1A1A;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:18px;box-shadow:0 4px 12px -4px rgba(197,160,80,.6)}
main.cc-page .hiw-ic{display:grid;place-items:center;color:var(--ink)}
main.cc-page .hiw-ic svg{width:34px;height:34px}
main.cc-page .hiw-body h3{font-size:19px;font-weight:800;margin:0 0 6px;line-height:1.2}
main.cc-page .hiw-body p{margin:0;font-size:15px;line-height:1.5;color:#54575E}
main.cc-page .hiw-badges{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
main.cc-page .hiw-badges li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
main.cc-page .hiw-badges svg{width:17px;height:17px;color:var(--gold-deep);flex:none}
main.cc-page .hiw-cta{margin-top:28px;text-align:center}
main.cc-page .hiw-cta .btn{width:100%;max-width:420px}
main.cc-page @media(min-width:820px){.hiw-flow{flex-direction:row;gap:20px}
.hiw-flow::before{left:36px;right:36px;top:39px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,rgba(197,160,80,.25),var(--gold),rgba(197,160,80,.25))}
.hiw-card{flex:1;flex-direction:column;text-align:center;align-items:center;gap:14px;padding:30px 22px;min-height:0}
.hiw-head{flex-direction:column}
.hiw-badges{grid-template-columns:repeat(4,1fr)}
.hiw-badges li{justify-content:center;text-align:center}}
main.cc-page @media(prefers-reduced-motion:no-preference){.hiw-card{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,box-shadow .25s ease}
.hiw-card.in{opacity:1;transform:none}
.hiw-card:nth-child(2){transition-delay:.08s}
.hiw-card:nth-child(3){transition-delay:.16s}
.hiw-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35)}}
main.cc-page .bk-root .b1-intro{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:2px 0 0;max-width:52ch}
main.cc-page .bk-root .b1-field{margin-top:30px}
main.cc-page .bk-root .b1-lab{display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-weight:700;font-size:16.5px;letter-spacing:-.01em;margin:0}
main.cc-page .bk-root .b1-lab .opt{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink-soft);letter-spacing:0}
main.cc-page .bk-root .b1-sub{color:var(--ink-soft);font-size:13.5px;margin:5px 0 13px;line-height:1.55}
main.cc-page .b1-trust{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 2px}
main.cc-page .b1-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card-soft);border:1px solid var(--line);border-radius:100px;padding:7px 13px}
main.cc-page .b1-trust .ck{width:13px;height:13px;color:var(--gold-deep);flex:none}
main.cc-page .bk-root .pick{position:relative;border-radius:16px;padding:16px 15px;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
main.cc-page .bk-root .pick:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
main.cc-page .bk-root .pick.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
main.cc-page .bk-root .b1-veh,main.cc-page .bk-root .b1-state{padding-right:44px}
main.cc-page .bk-root .b1-veh::after,main.cc-page .bk-root .b1-state::after{content:"";position:absolute;top:50%;right:15px;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line);background:#fff;transition:.18s;opacity:.5}
main.cc-page .bk-root .pick.on.b1-veh::after,main.cc-page .bk-root .pick.on.b1-state::after{opacity:1;border-color:var(--gold);background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
main.cc-page .bk-root .b1-veh{align-items:flex-start;text-align:left;gap:2px}
main.cc-page .bk-root .b1-veh .nm{font-size:15.5px;font-weight:700}
main.cc-page .bk-root .b1-veh .pr{font-size:13px;font-weight:600;color:var(--ink-soft)}
main.cc-page .bk-root .b1-state{align-items:flex-start;text-align:left;gap:3px}
main.cc-page .bk-root .b1-state .nm{font-size:15px;font-weight:700}
main.cc-page .bk-root .b1-state .ds{font-size:12.5px;font-weight:500;color:var(--ink-soft);line-height:1.45}
main.cc-page .bk-root .b1-state .pr{font-size:12.5px;font-weight:700;color:var(--gold-deep);margin-top:2px}
main.cc-page .bk-root .b1-formule{align-items:stretch;text-align:left;gap:11px;padding:18px}
main.cc-page .bk-root .b1-formule.reco{border-color:var(--gold)}
main.cc-page .bk-root .b1-formule .fh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
main.cc-page .bk-root .b1-formule .fn{font-family:var(--disp);font-weight:700;font-size:17.5px}
main.cc-page .bk-root .b1-badge{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--ink);font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
main.cc-page .bk-root .b1-formule .inc{display:flex;flex-direction:column;gap:7px}
main.cc-page .bk-root .b1-formule .inc span{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4}
main.cc-page .bk-root .b1-formule .inc .ck{width:16px;height:16px;color:var(--gold-deep);flex:none;margin-top:2px}
main.cc-page .bk-root .b1-formule .fp{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--gold-deep)}
main.cc-page .bk-root .b1-optnote{display:flex;gap:9px;align-items:flex-start;background:var(--gold-soft);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.5;margin:0 0 13px}
main.cc-page .bk-root .b1-optnote .ck{width:16px;height:16px;color:var(--gold-deep);flex:none;margin-top:2px}
main.cc-page [data-step="1"] label.bk-opt{padding:13px 15px;font-weight:600}
main.cc-page [data-step="1"] label.bk-opt b{color:var(--ink-soft);font-weight:600;font-size:13px}
main.cc-page .bk-root .b1-recap{background:linear-gradient(180deg,#fff,var(--card-soft));border:1.5px solid var(--gold);border-radius:18px;padding:20px;margin-top:24px;box-shadow:var(--shadow-sm)}
main.cc-page .bk-root .b1-recap .top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
main.cc-page .bk-root .b1-recap .top .lb{font-size:13px;font-weight:600;color:var(--ink-soft)}
main.cc-page .bk-root .b1-recap .top .bk-estim-val{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;color:var(--ink)}
main.cc-page .bk-root .b1-recap .conf{display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
main.cc-page .bk-root .b1-recap .conf .ck{width:15px;height:15px;color:var(--gold-deep);flex:none;margin-top:2px}
main.cc-page .bk-root .b1-recap .split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
main.cc-page .bk-root .b1-recap .split div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
main.cc-page .bk-root .b1-recap .split .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
main.cc-page .bk-root .b1-recap .split .v{font-family:var(--disp);font-weight:700;font-size:20px;margin-top:3px}
main.cc-page .bk-root .b1-recap .split .s{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
main.cc-page .bk-root .b1-ctasub{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:11px 0 0}
main.cc-page .tx-pop{position:fixed;inset:0;background:rgba(20,18,12,.55);z-index:999;display:none;align-items:center;justify-content:center;padding:22px}
main.cc-page .tx-pop.on{display:flex}
main.cc-page .tx-pop-card{background:#fff;border-radius:22px;max-width:420px;width:100%;padding:28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
main.cc-page .tx-pop-card h3{font-size:24px;margin:0 0 10px}
main.cc-page .tx-pop-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:0 0 14px}
main.cc-page .tx-pop-card li{font-size:14.5px;font-weight:600;margin:7px 0;list-style:none}
main.cc-page .tx-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-top:18px}
main.cc-page .tx-tab{flex:0 0 auto;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;cursor:pointer}
main.cc-page .tx-tab.on{background:var(--gold-deep,#A07C22);border-color:var(--gold-deep,#A07C22);color:#fff}
main.cc-page .tx-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:12px;background:#fff}
main.cc-page .tx-item b{font-size:15.5px}
main.cc-page .tx-old{color:var(--ink-soft);text-decoration:line-through;font-size:13px;font-weight:600}
main.cc-page .tx-new{color:var(--gold-deep,#A07C22);font-weight:800;font-size:16px}
main.cc-page .tx-half{display:block;font-size:10.5px;letter-spacing:.06em;font-weight:700;color:#1E7B4F;text-transform:uppercase}
main.cc-page .tx-step{display:flex;align-items:center;gap:10px}
main.cc-page .tx-step button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
main.cc-page .tx-step span{min-width:18px;text-align:center;font-weight:800}
main.cc-page .tx-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
main.cc-page .tx-badges em{font-style:normal;font-size:12px;font-weight:700;background:#F3EEDF;border-radius:999px;padding:6px 11px}
main.cc-page .tx-recap{border:1.5px solid var(--gold-deep,#A07C22);border-radius:16px;padding:16px;margin-top:18px;background:#FBF7EC}
main.cc-page .tx-recap .l{display:flex;justify-content:space-between;align-items:center;margin:6px 0;font-size:14px}
main.cc-page .tx-recap .l b{font-size:19px}
main.cc-page .tx-eco{display:inline-block;background:#E5F3EA;color:#1E7B4F;font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 10px;letter-spacing:.05em}
main.cc-page .tx-pack{border:1.5px solid var(--line);border-radius:16px;padding:16px;margin-top:12px;cursor:pointer;position:relative;background:#fff}
main.cc-page .tx-pack.on{border-color:var(--gold-deep,#A07C22);box-shadow:0 0 0 2px rgba(160,124,34,.18)}
main.cc-page .tx-pack .pref{position:absolute;top:-10px;right:14px;background:var(--gold-deep,#A07C22);color:#fff;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.05em}
main.cc-page .tx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
main.cc-page .tx-cal button{padding:10px 0;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer;font-size:13.5px}
main.cc-page .tx-cal button:disabled{opacity:.35;cursor:default}
main.cc-page .tx-cal button.on{background:var(--gold-deep,#A07C22);color:#fff;border-color:var(--gold-deep,#A07C22)}
main.cc-page .tx-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
main.cc-page .tx-slots button{padding:10px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
main.cc-page .tx-slots button.on{background:var(--gold-deep,#A07C22);color:#fff;border-color:var(--gold-deep,#A07C22)}
main.cc-page .tx-input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;margin-top:10px}
main.cc-page .tx-hide{display:none}
main.cc-page .tx-label{letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:800;color:var(--gold-deep,#A07C22);margin-top:20px;display:block}
/* ---------- menu deroulant "Particuliers" (PC) ---------- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav-drop-t{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;
font-weight:600;color:var(--ink-soft);padding:6px 0;transition:.2s;white-space:nowrap}
.nav-drop-t:hover{color:var(--ink)}
.nav-drop-t svg{width:14px;height:14px;transition:transform .2s}
.nav-drop.on .nav-drop-t svg{transform:rotate(180deg)}
.nav-drop-m{position:absolute;top:calc(100% + 16px);left:50%;
transform:translateX(-50%) translateY(-6px);
background:var(--card);border:1px solid var(--line);border-radius:16px;
box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:2px;
min-width:268px;opacity:0;visibility:hidden;transition:.18s ease;z-index:70}
.nav-drop.on .nav-drop-m,.nav-drop:hover .nav-drop-m{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-links .nav-drop-m a{padding:11px 14px;border-radius:10px;font-size:14px;
color:var(--ink-soft);white-space:nowrap}
.nav-links .nav-drop-m a:hover{background:var(--gold-soft);color:var(--ink)}
.nav-links .nav-drop-m a.active{background:var(--gold-soft);color:var(--ink)}
.nav-links .nav-drop-m a.active::after{display:none}
.nav-drop:has(a.active) .nav-drop-t{color:var(--ink)}
@media(max-width:1330px){.nav-links{gap:14px;font-size:13.5px}.nav-drop-t{font-size:13.5px}}
/* ---------- menu mobile : intitules de groupe ---------- */
.drawer .dr-group:first-child{margin-top:6px}
/* ---------- pages importees : meme respiration que le reste du site ---------- */
main.cc-page .sec-head{margin-bottom:42px}
main.cc-page .sec-head .tag{margin-bottom:14px}
main.cc-page .sec-title{margin:14px 0 0}
main.cc-page .sec-head .lead{margin-top:16px}
main.cc-page .card{padding:34px}
main.cc-page .grid2{gap:30px}
main.cc-page .grid3{gap:26px}
main.cc-page .grid4{gap:24px}
main.cc-page .checks{margin:30px 0;gap:17px}
main.cc-page .elm-why-item{padding:30px 0;gap:24px}
main.cc-page .elm-why-head{margin-bottom:22px}
main.cc-page details{margin-bottom:14px;padding:0 24px}
main.cc-page details summary{padding:21px 0}
main.cc-page .form label{margin:24px 0 8px}
main.cc-page .form .frow{gap:18px}
main.cc-page .cta-band{padding:64px 48px;gap:34px}
main.cc-page .stat-band{gap:18px}
main.cc-page .ba-grid{gap:38px;margin-top:38px}
main.cc-page .bk-steps{margin:34px 0}
main.cc-page .bk-navrow{margin-top:34px}
main.cc-page .pick-grid{gap:14px;margin-top:12px}
main.cc-page .tx-s{padding-top:6px}
@media(max-width:900px){
main.cc-page .cta-band{padding:48px 34px}
}
@media(max-width:640px){
main.cc-page .sec-head{margin-bottom:30px}
main.cc-page .grid2,main.cc-page .grid3,main.cc-page .grid4{gap:18px}
main.cc-page .card{padding:25px}
main.cc-page .checks{margin:24px 0;gap:15px}
main.cc-page .elm-why-item{padding:24px 0;gap:18px}
main.cc-page .ba-grid{gap:28px;margin-top:28px}
main.cc-page .cta-band{padding:38px 24px;gap:24px}
}
/* =====================================================================
v248 - deux univers : Professionnels / Particuliers
Selecteur d'audience integre au premier ecran de l'accueil, pas de
pop-up ni de page intermediaire. Le message B2B est deplace sur la
page Professionnels.
===================================================================== */
/* ---------- selecteur d'audience (hero accueil) ---------- */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;
max-width:780px;margin:0 auto;text-align:left}
.aud-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;
transition:.25s}
.aud-card:hover{background:rgba(255,255,255,.15);transform:translateY(-3px)}
.aud-k{font-family:var(--disp);font-weight:700;font-size:19px;color:#fff;
letter-spacing:-.01em}
.aud-l{color:rgba(255,255,255,.80);font-size:14px;margin:0;letter-spacing:.02em}
.aud-card .btn{width:100%;justify-content:center;margin-top:12px;
font-size:14.5px;padding:14px 18px;text-align:center}
.aud-card .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.aud-card .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hero-note{color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.18em;
text-transform:uppercase;margin:30px 0 0;font-weight:600}
@media(max-width:640px){
.aud-grid{grid-template-columns:1fr;gap:14px;max-width:430px}
.aud-card{padding:22px 20px;gap:8px}
.aud-card .btn{margin-top:10px;font-size:14px}
.hero-note{margin-top:24px;font-size:11.5px;letter-spacing:.14em}
}
/* le hero d'accueil n'a plus de liste d'avantages : on resserre le bas */
main[data-page="accueil"] .hero-photo .hero-sub{margin-bottom:34px}
@media(max-width:640px){
main[data-page="accueil"] .hero-photo .hero-sub{margin-bottom:26px}
}
/* ---------- pages hub : cartes d'univers ---------- */
main[data-page="professionnels"] .grid2 .card,
main[data-page="particuliers"] .grid2 .card{display:flex;flex-direction:column}
main[data-page="professionnels"] .grid2 .card .btn,
main[data-page="particuliers"] .grid2 .card .btn{margin-top:auto;align-self:flex-start}
/* ---------- menu : deux univers ---------- */
.nav-links{gap:16px}
@media(max-width:1330px){.nav-links{gap:13px;font-size:13.5px}}
/* =====================================================================
v252 - Particulier / Nettoyage vehicule : passe de finition
La page herite du calque de design de la page Pro Vehicule (memes
regles, part-auto ajoute aux memes selecteurs). Ajouts propres a la
page : listes plus denses, ligne de zone, bulle WhatsApp reduite.
===================================================================== */
/* ---------- 1. calque "Pro" applique a la page Particulier ---------- */
main[data-page="part-auto"],
main[data-page="part-textile"]{
--disp:"Archivo","Poppins",sans-serif;
background-image:
repeating-linear-gradient(0deg, rgba(20,22,26,.028) 0 1px, transparent 1px 30px),
repeating-linear-gradient(90deg, rgba(20,22,26,.028) 0 1px, transparent 1px 30px)}
main[data-page="part-auto"] h1,
main[data-page="part-auto"] h2,
main[data-page="part-auto"] h3,
main[data-page="part-auto"] h4,
main[data-page="part-textile"] h1,
main[data-page="part-textile"] h2,
main[data-page="part-textile"] h3,
main[data-page="part-textile"] h4, main[data-page="part-auto"] h2.as-h1, main[data-page="part-textile"] h2.as-h1{
font-family:"Archivo","Poppins",sans-serif;font-weight:800;letter-spacing:-.015em}
main[data-page="part-auto"] .sec-title,
main[data-page="part-textile"] .sec-title{
text-transform:uppercase;font-size:clamp(24px,4.6vw,40px);letter-spacing:.02em}
main[data-page="part-auto"] .hero-photo h1,
main[data-page="part-textile"] .hero-photo h1, main[data-page="part-auto"] .hero-photo h2.as-h1, main[data-page="part-textile"] .hero-photo h2.as-h1{
text-transform:uppercase;letter-spacing:.01em;font-size:clamp(25px,4.4vw,40px)}
main[data-page="part-auto"] .hero-photo,
main[data-page="part-textile"] .hero-photo{padding-top:20px}
main[data-page="part-auto"] .sec-head .lead,
main[data-page="part-textile"] .sec-head .lead{font-size:15.5px;margin-top:8px}
main[data-page="part-auto"] .ba-cap,
main[data-page="part-textile"] .ba-cap{margin-top:8px;font-size:13.5px}
main[data-page="part-auto"] .checks,
main[data-page="part-textile"] .checks{gap:9px;margin:16px 0}
main[data-page="part-auto"] .checks li,
main[data-page="part-textile"] .checks li{font-size:14.5px;line-height:1.45}
main[data-page="part-auto"] .checks li svg,
main[data-page="part-textile"] .checks li svg{width:18px;height:18px;margin-top:1px}
main[data-page="part-auto"] .elm-why-item,
main[data-page="part-textile"] .elm-why-item{padding:15px 0;gap:14px}
main[data-page="part-auto"] .elm-why-item h3,
main[data-page="part-textile"] .elm-why-item h3{font-size:16.5px;margin:0 0 4px}
main[data-page="part-auto"] .elm-why-item p,
main[data-page="part-textile"] .elm-why-item p{font-size:14.5px;line-height:1.5}
/* ---------- 2. listes plus compactes, description collee au titre ---------- */
main[data-page="part-auto"] .pa-tight,
main[data-page="part-textile"] .pa-tight{margin-top:26px;gap:12px 30px}
main[data-page="part-auto"] .pa-tight li span,
main[data-page="part-textile"] .pa-tight li span{display:block;line-height:1.42}
main[data-page="part-auto"] .pa-tight strong,
main[data-page="part-textile"] .pa-tight strong{
display:block;font-size:15px;letter-spacing:-.005em;margin-bottom:1px}
main[data-page="part-auto"] .pa-tight span br,
main[data-page="part-textile"] .pa-tight span br{display:none}
main[data-page="part-auto"] .pa-tight li span,
main[data-page="part-textile"] .pa-tight li span{color:var(--ink-soft)}
main[data-page="part-auto"] .pa-tight strong,
main[data-page="part-textile"] .pa-tight strong{color:var(--ink)}
/* ---------- 3. rythme regulier entre sections ---------- */
main[data-page="part-auto"] .pad-s,
main[data-page="part-textile"] .pad-s{padding:78px 0 !important}
main[data-page="part-auto"] .sec-head,
main[data-page="part-textile"] .sec-head{margin-bottom:0}
main[data-page="part-auto"] .cta-unit,
main[data-page="part-textile"] .cta-unit{margin-top:28px}
main[data-page="part-auto"] .ba-grid,
main[data-page="part-textile"] .ba-grid{gap:26px;margin-top:30px}
main[data-page="part-auto"] .contact-final,
main[data-page="part-textile"] .contact-final{margin-top:22px}
main[data-page="part-auto"] details,
main[data-page="part-textile"] details{margin-bottom:8px;padding:0 20px}
main[data-page="part-auto"] details summary,
main[data-page="part-textile"] details summary{padding:15px 0;font-size:15px}
main[data-page="part-auto"] details p,
main[data-page="part-textile"] details p{font-size:14.4px;margin:0 0 14px}
/* ---------- 4. ligne de zone d'intervention ---------- */
.pa-zone{margin:26px auto 0;text-align:center;font-size:13.5px;font-weight:600;
color:var(--ink-soft);max-width:520px}
/* ---------- 5. bulle WhatsApp : plus petite, jamais devant un CTA ---------- */
body[data-active-page="part-auto"] .float-contact .fc-tel,
body[data-active-page="part-textile"] .float-contact .fc-tel{display:none}
body[data-active-page="part-auto"] .float-contact,
body[data-active-page="part-textile"] .float-contact{right:14px;bottom:18px;gap:0}
body[data-active-page="part-auto"] .float-contact .fc-btn,
body[data-active-page="part-textile"] .float-contact .fc-btn{
width:44px;height:44px;box-shadow:0 8px 20px -8px rgba(20,22,26,.4)}
body[data-active-page="part-auto"] .float-contact .fc-btn svg,
body[data-active-page="part-textile"] .float-contact .fc-btn svg{width:19px;height:19px}
main[data-page="part-auto"].pa-nofloat .float-contact,
main[data-page="part-textile"].pa-nofloat .float-contact{display:none}
/* ---------- 6. images avant/apres statiques : rendu des .ba-cell Pro ---------- */
main[data-page="part-auto"] .ba-cell .ba-static,
main[data-page="part-textile"] .ba-cell .ba-static{
display:block;width:100%;height:auto;border-radius:18px;
border:1px solid var(--line);box-shadow:var(--shadow)}
/* ---------- 7. mobile ---------- */
@media(max-width:640px){
main[data-page="part-auto"] .pad-s,
main[data-page="part-textile"] .pad-s{padding:52px 0 !important}
main[data-page="part-auto"] .pa-tight,
main[data-page="part-textile"] .pa-tight{margin-top:20px;gap:11px 0}
main[data-page="part-auto"] .ba-grid,
main[data-page="part-textile"] .ba-grid{gap:20px;margin-top:22px}
main[data-page="part-auto"] .hero-photo h1,
main[data-page="part-textile"] .hero-photo h1, main[data-page="part-auto"] .hero-photo h2.as-h1, main[data-page="part-textile"] .hero-photo h2.as-h1{font-size:clamp(24px,6.4vw,32px)}
main[data-page="part-auto"] .sec-title,
main[data-page="part-textile"] .sec-title{font-size:clamp(21px,5.6vw,28px)}
main[data-page="part-auto"] .cta-unit .btn,
main[data-page="part-textile"] .cta-unit .btn{width:100%;max-width:340px}
/* la derniere section garde de l'air sous le CTA pour la bulle flottante */
main[data-page="part-auto"] .pa-last,
main[data-page="part-textile"] .pa-last{padding-bottom:104px !important}
body[data-active-page="part-auto"] .float-contact,
body[data-active-page="part-textile"] .float-contact{bottom:14px;right:12px}
body[data-active-page="part-auto"] .float-contact .fc-btn,
body[data-active-page="part-textile"] .float-contact .fc-btn{width:42px;height:42px}
}
/* =====================================================================
v253 - Particulier / Nettoyage vehicule : polissage
Casse normale sur les grands titres (les surtitres dores restent en
capitales), grille unifiee, etapes en 3 colonnes, bulle plus discrete.
Aucune section ajoutee.
===================================================================== */
/* ---------- 1. casse normale sur les grands titres ---------- */
main[data-page="part-auto"] .sec-title,
main[data-page="part-auto"] .hero-photo h1,
main[data-page="part-textile"] .sec-title,
main[data-page="part-textile"] .hero-photo h1, main[data-page="part-auto"] .hero-photo h2.as-h1, main[data-page="part-textile"] .hero-photo h2.as-h1{
text-transform:none;letter-spacing:-.015em}
main[data-page="part-auto"] .sec-title,
main[data-page="part-textile"] .sec-title{font-size:clamp(24px,3.9vw,36px)}
main[data-page="part-auto"] .hero-photo h1,
main[data-page="part-textile"] .hero-photo h1, main[data-page="part-auto"] .hero-photo h2.as-h1, main[data-page="part-textile"] .hero-photo h2.as-h1{font-size:clamp(27px,4.4vw,44px)}
/* les surtitres restent en capitales dorees : rien a changer */
/* ---------- 2. une seule grille pour toute la page ---------- */
main[data-page="part-auto"] .wrap,
main[data-page="part-textile"] .wrap{max-width:920px}
main[data-page="part-auto"] .ba-wrap,
main[data-page="part-textile"] .ba-wrap{max-width:1140px}
main[data-page="part-auto"] .hero-photo .wrap,
main[data-page="part-textile"] .hero-photo .wrap{max-width:820px}
main[data-page="part-auto"] .pa-center,
main[data-page="part-textile"] .pa-center{text-align:center}
/* meme respiration apres chaque titre de section */
main[data-page="part-auto"] .sec-head,
main[data-page="part-textile"] .sec-head{margin-bottom:0}
main[data-page="part-auto"] .pa-tight,
main[data-page="part-auto"] .pa-steps,
main[data-page="part-auto"] .pa-faq,
main[data-page="part-auto"] .cta-unit,
main[data-page="part-auto"] .ba-wrap,
main[data-page="part-textile"] .pa-tight,
main[data-page="part-textile"] .pa-steps,
main[data-page="part-textile"] .pa-faq,
main[data-page="part-textile"] .cta-unit,
main[data-page="part-textile"] .ba-wrap{margin-top:26px}
main[data-page="part-auto"] .cta-unit,
main[data-page="part-textile"] .cta-unit{margin-top:26px}
/* ---------- 3. avantages du hero : 2 x 2 ---------- */
main[data-page="part-auto"] .hero-photo .hero-benefs.is-4,
main[data-page="part-textile"] .hero-photo .hero-benefs.is-4{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 26px;max-width:480px;margin:22px auto 0;justify-items:start}
main[data-page="part-auto"] .hero-photo .hero-benefs li,
main[data-page="part-textile"] .hero-photo .hero-benefs li{
font-size:14px;line-height:1.3;text-align:left}
/* ---------- 4. "ce qui est inclus" : 3 colonnes, lecture en 5 secondes ---------- */
main[data-page="part-auto"] .pa-incl3,
main[data-page="part-textile"] .pa-incl3{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px}
main[data-page="part-auto"] .pa-incl3 li,
main[data-page="part-textile"] .pa-incl3 li{font-size:14px}
main[data-page="part-auto"] .pa-incl3 strong,
main[data-page="part-textile"] .pa-incl3 strong{font-size:14.5px}
main[data-page="part-auto"] .pa-incl3 span,
main[data-page="part-textile"] .pa-incl3 span{font-size:13.6px;line-height:1.38}
/* ---------- 5. trois etapes, tres visuelles ---------- */
.pa-steps{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.pa-steps li{text-align:center;padding:0 8px;position:relative}
.pa-n{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-deep);
font-family:var(--disp);font-weight:800;font-size:19px;background:var(--card)}
.pa-steps h3{font-family:var(--disp);font-size:16.5px;margin:0 0 5px;
letter-spacing:-.01em;text-wrap:balance}
.pa-steps p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.pa-steps li:not(:last-child)::after{content:"";position:absolute;
top:26px;left:calc(50% + 34px);right:calc(-50% + 34px);
height:1px;background:var(--line)}
/* ---------- 6. bulle WhatsApp : plus petite, jamais sur un CTA ---------- */
body[data-active-page="part-auto"] .float-contact,
body[data-active-page="part-textile"] .float-contact{right:16px;bottom:20px;opacity:.94}
body[data-active-page="part-auto"] .float-contact .fc-btn,
body[data-active-page="part-textile"] .float-contact .fc-btn{width:40px;height:40px;
box-shadow:0 6px 16px -6px rgba(20,22,26,.35)}
body[data-active-page="part-auto"] .float-contact .fc-btn svg,
body[data-active-page="part-textile"] .float-contact .fc-btn svg{width:17px;height:17px}
main[data-page="part-auto"] .pa-last,
main[data-page="part-textile"] .pa-last{padding-bottom:96px !important}
/* ---------- 7. tablette ---------- */
@media(max-width:900px){
main[data-page="part-auto"] .pa-incl3,
main[data-page="part-textile"] .pa-incl3{grid-template-columns:repeat(2,1fr)}
}
/* ---------- 8. mobile ---------- */
@media(max-width:640px){
main[data-page="part-auto"] .hero-photo h1,
main[data-page="part-textile"] .hero-photo h1, main[data-page="part-auto"] .hero-photo h2.as-h1, main[data-page="part-textile"] .hero-photo h2.as-h1{font-size:clamp(25px,6.6vw,33px)}
main[data-page="part-auto"] .sec-title,
main[data-page="part-textile"] .sec-title{font-size:clamp(22px,5.8vw,29px)}
main[data-page="part-auto"] .hero-photo .hero-benefs.is-4,
main[data-page="part-textile"] .hero-photo .hero-benefs.is-4{
gap:9px 14px;max-width:330px;margin-top:20px}
main[data-page="part-auto"] .hero-photo .hero-benefs li,
main[data-page="part-textile"] .hero-photo .hero-benefs li{font-size:12.8px}
main[data-page="part-auto"] .pa-incl3,
main[data-page="part-textile"] .pa-incl3{grid-template-columns:1fr;gap:11px}
.pa-steps{grid-template-columns:1fr;gap:20px}
.pa-steps li{display:grid;grid-template-columns:44px 1fr;
gap:0 14px;text-align:left;padding:0}
.pa-n{width:44px;height:44px;font-size:17px;margin:0;grid-row:span 2}
.pa-steps h3{align-self:end;margin:0 0 3px;font-size:16px}
.pa-steps li:not(:last-child)::after{display:none}
main[data-page="part-auto"] .pa-tight,
main[data-page="part-auto"] .pa-steps,
main[data-page="part-auto"] .pa-faq,
main[data-page="part-auto"] .ba-wrap,
main[data-page="part-auto"] .cta-unit,
main[data-page="part-textile"] .pa-tight,
main[data-page="part-textile"] .pa-steps,
main[data-page="part-textile"] .pa-faq,
main[data-page="part-textile"] .ba-wrap,
main[data-page="part-textile"] .cta-unit{margin-top:22px}
body[data-active-page="part-auto"] .float-contact,
body[data-active-page="part-textile"] .float-contact{right:12px;bottom:16px}
body[data-active-page="part-auto"] .float-contact .fc-btn,
body[data-active-page="part-textile"] .float-contact .fc-btn{width:38px;height:38px}
main[data-page="part-auto"] .pa-last,
main[data-page="part-textile"] .pa-last{padding-bottom:88px !important}
}
/* =====================================================================
v254 - Particulier / Nettoyage vehicule : nouvelle photo de hero
Portrait par defaut (mobile), paysage a partir de 900px. Le fond
n'est plus injecte par le script IMGS : il est porte par .pa-hero-bg,
donc la cle hero_auto reste intacte pour la page Particuliers.
===================================================================== */
main[data-page="part-auto"] .pa-hero-bg,
main[data-page="part-textile"] .pa-hero-bg{
background-image:url("/img/hero-auto-mob-v2.webp");
background-size:cover;background-position:center center;
background-repeat:no-repeat}
@media(min-width:900px){
main[data-page="part-auto"] .pa-hero-bg,
main[data-page="part-textile"] .pa-hero-bg{
background-image:url("/img/hero-auto-pc-v2.webp");
background-position:center 58%}
}
/* =====================================================================
v256 - ACCUEIL ORIENTE PARTICULIERS
Le hero d'accueil retrouve les CTA + la liste d'avantages du design
system : on neutralise le resserrement pose en v248 (meme
specificite, donc ce bloc doit rester le dernier du document).
Aucune autre page n'est touchee.
===================================================================== */
main[data-page="accueil"] .hero-photo .hero-sub{margin:0 auto var(--hero-gap-sub)}
@media(max-width:640px){
main[data-page="accueil"] .hero-photo .hero-sub{margin:0 auto var(--hero-gap-sub)}
}
/* ---------- bloc zone : debut du parcours particulier ---------- */
#zone-home{max-width:560px;margin-left:auto;margin-right:auto;scroll-margin-top:96px}
#zone-home h3{text-wrap:balance}
.zh-reassur{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 18px;padding:0;margin:16px 0 0}
.zh-reassur li{display:flex;align-items:center;gap:7px;color:var(--ink-soft);
font-size:13px;font-weight:600;line-height:1.3}
.zh-reassur li::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--gold);flex:none}
/* ---------- passerelle discrete vers l'espace entreprises ---------- */
.home-pro{text-align:center;margin:26px 0 0;font-size:13.5px;color:var(--ink-soft)}
.home-pro a{color:var(--ink-soft);text-decoration:underline;
text-underline-offset:3px;font-weight:600}
.home-pro a:hover{color:var(--ink)}
@media(max-width:640px){
.zh-reassur{gap:7px 14px;margin-top:14px}
.zh-reassur li{font-size:12.5px}
.home-pro{margin-top:22px;font-size:13px}
}
/* le bloc de reservation cible par le verificateur de zone :
on degage la hauteur de l'en-tete fixe */
main[data-page="resa"] .bk-root,
main[data-page="resa"] .b1-field{scroll-margin-top:104px}
/* =====================================================================
v257 - PASSE UX / UI / RESPONSIF
Aucun contenu, aucune strategie, aucune navigation modifies.
Ce bloc est le DERNIER du document : il gagne a specificite egale.
===================================================================== */
/* ---------- 1. filet anti-debordement ---------- */
main img,main svg,main video,main iframe{max-width:100%}
main p,main li,main h1,main h2,main h3,main h4,main small,main b,main strong,
main .btn,main label,main figcaption, main h2.as-h1{overflow-wrap:break-word}
main .grid2,main .grid3,main .grid4,main .pick-grid,main .checks-2col,
main .stat-band,main .ba-grid,main .cta-unit,main .contact-final{min-width:0}
main .btn{max-width:100%}
/* boutons d'appel a l'action : jamais plus larges que l'ecran */
@media(max-width:560px){
main .cta-unit{width:100%}
main .cta-unit .btn,main .btn-cta-big,
main .cta-final-sec .btn-cta-big,main.cc-page .cta-final-sec .btn-cta-big{
width:100%;min-width:0;max-width:100%}
}
/* carte "Appeler" du bloc de contact : le texte pouvait rester sur une ligne */
@media(max-width:520px){
.cf-opt small,main.cc-page .cf-opt small{white-space:normal;line-height:1.35}
.cf-opt,main.cc-page .cf-opt{padding:15px 14px;gap:12px}
}
/* onglets textiles : passage a la ligne plutot qu'un rail coupe */
@media(max-width:560px){
.tx-tabs,main.cc-page .tx-tabs{flex-wrap:wrap;overflow-x:visible;gap:8px}
.tx-tab,main.cc-page .tx-tab{flex:1 1 auto;min-width:0;text-align:center}
}
/* avantages du hero : une colonne des que la ligne ne tient plus */
@media(max-width:430px){
main[data-page="part-auto"] .hero-photo .hero-benefs.is-4,
main[data-page] .hero-photo .hero-benefs,
main[data-page] .hero-photo .hero-benefs.is-4,
main[data-page="part-textile"] .hero-photo .hero-benefs.is-4{
grid-template-columns:minmax(0,1fr);max-width:300px;gap:10px}
}
/* ---------- 2. tunnel de reservation : une grille lisible sur mobile ---------- */
@media(max-width:560px){
.pick-grid,main.cc-page .pick-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
.pick-grid.pick-3,main.cc-page .pick-grid.pick-3,
.bk-options,main.cc-page .bk-options{
grid-template-columns:minmax(0,1fr) !important}
.pick,main.cc-page .pick{min-width:0;padding:14px 12px}
.pick>*,main.cc-page .pick>*{min-width:0;max-width:100%;overflow-wrap:break-word}
.pick .ds,.pick .inc,.pick .nm,.pick .fn,.pick .fh,
main.cc-page .pick .ds,main.cc-page .pick .inc{white-space:normal}
.cal-grid,main.cc-page .cal-grid{gap:2px}
}
@media(max-width:359px){
.pick-grid,main.cc-page .pick-grid{grid-template-columns:minmax(0,1fr) !important}
}
/* formulaires : moins de rembourrage sur petit ecran, plus de place au contenu */
@media(max-width:560px){
main .form,main.cc-page .form{padding:22px 16px}
main .bk-navrow,main.cc-page .bk-navrow{gap:10px}
main .bk-navrow .btn,main.cc-page .bk-navrow .btn{flex:1 1 auto;min-width:0;padding-left:14px;padding-right:14px}
}
@media(max-width:360px){
main .form,main.cc-page .form{padding:20px 14px}
}
/* ---------- 3. clavier iPhone : 16px = pas de zoom automatique ---------- */
@media(max-width:820px){
main input,main select,main textarea,
main .form input,main .form select,main .form textarea,
main.cc-page .form input,main.cc-page .form select,main.cc-page .form textarea,
.tx-input,main.cc-page .tx-input{font-size:16px}
}
/* le champ vise ne passe jamais sous l'en-tete fixe */
main input,main select,main textarea,main label,
main .b1-field,main .bk-step,main .frow{scroll-margin-top:92px}
/* ---------- 4. rythme vertical regulier ---------- */
@media(max-width:640px){
main[data-page]>section.pad:not(:first-child):not(.pa-last),
main[data-page]>section.pad-s:not(:first-child):not(.pa-last){
padding-top:54px !important;padding-bottom:54px !important}
main[data-page]>section.pad-xs:not(:first-child){
padding-top:36px !important;padding-bottom:36px !important}
main[data-page]>section.hero-photo{
padding-top:84px !important;padding-bottom:76px !important}
}
/* ---------- 5. bulles telephone / WhatsApp ---------- */
.float-contact{right:14px;bottom:calc(18px + env(safe-area-inset-bottom));gap:12px}
.fc-btn,main.cc-page .fc-btn{width:44px;height:44px}
@media(max-width:560px){
.float-contact{right:12px;bottom:calc(14px + env(safe-area-inset-bottom));gap:10px}
.fc-btn,main.cc-page .fc-btn{width:42px;height:42px}
.fc-btn svg,main.cc-page .fc-btn svg{width:18px;height:18px}
}
/* dans le tunnel, elles s'effacent pour ne pas gener la saisie */
body[data-active-page="resa"] .float-contact,
body[data-active-page="tx-resa"] .float-contact{
opacity:.5;transform:scale(.88);transform-origin:100% 100%}
body[data-active-page="resa"] .float-contact:hover,
body[data-active-page="tx-resa"] .float-contact:hover{opacity:1;transform:none}
/* une bulle ne recouvre jamais un element interactif : la detection est
faite en JS, qui pose la classe fc-hide sur le body */
body.fc-hide .float-contact{opacity:0;pointer-events:none;
transform:translateY(10px) scale(.92);
transition:opacity .14s ease,transform .14s ease}
/* clavier ouvert : on les retire completement */
body.kb-focus .float-contact{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}
/* le navigateur ne recale plus le scroll quand une image finit de charger */
main{overflow-anchor:none}
/* ---------- 6. en-tete et tiroir : hauteurs alignees ---------- */
.drawer{inset:65px 0 0 0}
@media(max-width:900px){.drawer{inset:65px 0 0 0}}
.drawer{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
/* =====================================================================
v259 - parcours particulier
Accueil = promesse + entree dans le tunnel.
Vehicules particuliers = page detaillee.
Tunnel = 8 etapes lineaires.
Dernier bloc du document : gagne a specificite egale.
===================================================================== */
/* ---------- hero accueil : 3 lignes sur mobile ---------- */
@media(max-width:560px){
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{font-size:clamp(24px,6.1vw,32px);max-width:96%}
}
/* ---------- carte "votre zone" de l'accueil ---------- */
#zone-home{max-width:560px;margin-left:auto;margin-right:auto;
scroll-margin-top:96px;text-align:center;padding:28px 22px}
#zone-home h3{margin:12px 0 6px;font-size:21px;line-height:1.25;text-wrap:balance}
#zone-home .zh-lead{color:var(--ink-soft);font-size:14.5px;margin:0 auto 16px;max-width:380px}
#zone-home #zh-cp{width:100%;max-width:340px;padding:14px 16px;
border:1.5px solid var(--line);border-radius:12px;font-size:16px;
text-align:center;letter-spacing:.15em}
#zone-home #zh-btn{width:100%;max-width:340px;margin-top:10px}
#zone-home #zh-res{font-weight:600;font-size:14.5px;margin-top:10px;display:none}
.zh-reassur{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 18px;padding:0;margin:16px 0 0}
.zh-reassur li{display:flex;align-items:center;gap:7px;color:var(--ink-soft);
font-size:13px;font-weight:600;line-height:1.3}
.zh-reassur li::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--gold);flex:none}
/* ---------- rappel discret vers le tarif ---------- */
.mini-cta{text-align:center;margin:28px 0 0;font-size:15px;color:var(--ink-soft)}
.mini-cta a{color:var(--gold-deep);font-weight:700;text-decoration:none;
border-bottom:1.5px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.mini-cta a:hover{color:var(--ink)}
/* ---------- passerelle entreprises ---------- */
.home-pro{text-align:center;margin:28px 0 0;font-size:13.5px;color:var(--ink-soft)}
.home-pro a{color:var(--ink-soft);text-decoration:underline;
text-underline-offset:3px;font-weight:600}
.home-pro a:hover{color:var(--ink)}
/* ---------- tunnel : en-tete allegee ---------- */
main[data-page="resa"] .bk-head{margin-bottom:26px}
main[data-page="resa"] .bk-head .sec-title{font-size:clamp(26px,4.4vw,38px)}
main[data-page="resa"] .bk-head .lead{margin-top:8px}
.bk-alt{text-align:center;margin:26px 0 0;font-size:13.5px;color:var(--ink-soft)}
.bk-alt a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* ---------- tunnel : barre de progression ---------- */
.bk-prog{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}
.bk-prog-rail{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.bk-prog-rail i{display:block;height:100%;width:12.5%;border-radius:99px;
background:var(--gold);transition:width .35s cubic-bezier(.4,0,.2,1)}
.bk-prog-txt{font-size:12.5px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-deep)}
/* le cadre blanc ne doit habiller que les deux colonnes, pas leurs lignes */
main[data-page="resa"] .b1-recap .split .k,
main[data-page="resa"] .b1-recap .split .v,
main[data-page="resa"] .b1-recap .split .s{background:none;border:0;border-radius:0;padding:0}
/* ---------- tunnel : etapes ---------- */
main[data-page="resa"] .bk-step h3{display:flex;flex-wrap:wrap;align-items:baseline;
gap:10px;font-size:22px;line-height:1.25;margin:0 0 6px}
main[data-page="resa"] .bk-count{font-size:12px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
main[data-page="resa"] .bk-lead{color:var(--ink-soft);font-size:14.5px;margin:0 0 18px}
main[data-page="resa"] .b1-field{margin-top:22px}
main[data-page="resa"] .b1-field:first-of-type{margin-top:18px}
main[data-page="resa"] .bk-step>.bk-next{margin-top:22px}
main[data-page="resa"] .bk-zone-row{display:flex;gap:10px;align-items:stretch}
main[data-page="resa"] .bk-zone-row .bk-zone{flex:1 1 auto;min-width:0}
main[data-page="resa"] .bk-zone-row .bk-zone-check{flex:0 0 auto;padding:13px 20px}
main[data-page="resa"] .bk-slot-lab{display:block;margin-top:20px;font-weight:700;font-size:15px}
main[data-page="resa"] .bk-slot-hint{color:var(--ink-soft);font-size:14px;margin:4px 0 10px}
main[data-page="resa"] .bk-fine{color:var(--ink-soft);font-size:14px;margin:14px 0 0}
main[data-page="resa"] .b1-trust{margin-top:20px}
/* une seule colonne dans le tunnel sur mobile, quelle que soit la grille */
@media(max-width:560px){
main[data-page="resa"] .bk-zone-row{flex-direction:column}
main[data-page="resa"] .bk-zone-row .bk-zone-check{width:100%}
main[data-page="resa"] .bk-step h3{font-size:20px}
}
/* le tunnel n'est pas une page marketing : bulles flottantes retirees */
body[data-active-page="resa"] .float-contact{display:none}
/* =====================================================================
v260 - respiration et hierarchie
Espaces verticaux resserres d'environ un quart, echelle de titres
unifiee, dore reserve aux elements qui declenchent une action.
Dernier bloc du document.
===================================================================== */
/* ---------- 1. rythme vertical resserre (-25%) ---------- */
main[data-page]>section.pad,
main[data-page]>section.pad-s{padding-top:66px !important;padding-bottom:66px !important}
main[data-page]>section.pad-xs{padding-top:44px !important;padding-bottom:44px !important}
main[data-page]>section.hero-photo{padding-top:88px !important;padding-bottom:82px !important}
main[data-page="part-auto"] .pa-last,
main[data-page="part-textile"] .pa-last{padding-bottom:76px !important}
@media(max-width:640px){
main[data-page]>section.pad:not(:first-child),
main[data-page]>section.pad-s:not(:first-child){padding-top:40px !important;padding-bottom:40px !important}
main[data-page]>section.pad-xs:not(:first-child){padding-top:28px !important;padding-bottom:28px !important}
main[data-page]>section.hero-photo{padding-top:64px !important;padding-bottom:58px !important}
main[data-page="part-auto"] .pa-last,
main[data-page="part-textile"] .pa-last{padding-bottom:56px !important}
}
/* respiration interne uniforme */
main[data-page] .sec-head{margin-bottom:0}
main[data-page] .sec-head+*{margin-top:22px}
main[data-page] .pa-tight,
main[data-page] .pa-steps,
main[data-page] .pa-faq,
main[data-page] .cta-unit,
main[data-page] .ba-wrap{margin-top:22px}
main[data-page] .sec-head .lead{margin-top:8px}
main[data-page] .mini-cta{margin-top:20px}
/* ---------- 2. echelle typographique : H1 fort, H2 en retrait ---------- */
main[data-page] .hero-photo h1, main[data-page] .hero-photo h2.as-h1{font-size:clamp(26px,6.4vw,46px);line-height:1.08}
main[data-page] .sec-title{font-size:clamp(21px,3.4vw,32px);line-height:1.18}
main[data-page] .lead{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.55}
main[data-page] .hero-sub{font-size:clamp(15px,1.7vw,18px)}
@media(max-width:560px){
main[data-page="accueil"] .hero-photo h1, main[data-page="accueil"] .hero-photo h2.as-h1{font-size:27px;max-width:100%}
}
/* ---------- 3. le dore signale l'action, pas le decor ---------- */
main[data-page] .sec-head .tag{color:var(--ink-soft);letter-spacing:.22em;font-size:12px}
/* ---------- 4. quatre etapes ---------- */
.pa-steps.pa-steps-4{grid-template-columns:repeat(4,1fr);gap:16px}
.pa-steps.pa-steps-4 .pa-n{width:46px;height:46px;font-size:17px;margin-bottom:12px}
.pa-steps.pa-steps-4 h3{font-size:15.5px}
.pa-steps.pa-steps-4 p{font-size:13.5px}
@media(max-width:820px){
.pa-steps.pa-steps-4{grid-template-columns:repeat(2,1fr);gap:22px 16px}
.pa-steps.pa-steps-4 li:not(:last-child)::after{display:none}
}
@media(max-width:400px){
.pa-steps.pa-steps-4{grid-template-columns:minmax(0,1fr);gap:18px}
}
/* ---------- 5. cartes et boutons homogenes ---------- */
main[data-page] .btn-cta-big{border-radius:99px}
main[data-page] .cta-unit{margin-left:auto;margin-right:auto}
@media(max-width:560px){
main[data-page] .cta-unit .btn-cta-big{width:100%}
}
/* =====================================================================
v261 - FINITION : espacement, alignement, typographie
Uniquement de la mise en forme. Rien du contenu n'est touche.
Le prefixe "html body ... :not(#zz)" donne a ce bloc une specificite
superieure a toutes les couches precedentes, dont plusieurs empilent
deja !important et des :not() en cascade. #zz n existe pas dans la
page : le selecteur ne filtre rien, il ne sert qu au poids.
===================================================================== */
/* =========================================================
1. RYTHME VERTICAL
Un seul pas d'espacement pour toute la page.
========================================================= */
:root{
--sp-sec:58px; /* entre deux sections, PC */
--sp-sec-m:34px; /* entre deux sections, mobile */
--sp-head:18px; /* du titre a son contenu */
--sp-bloc:14px; /* entre deux blocs d'un meme groupe */
}
html body main[data-page]:not(#zz)>section.pad,
html body main[data-page]:not(#zz)>section.pad-s{
padding-top:var(--sp-sec) !important;padding-bottom:var(--sp-sec) !important}
html body main[data-page]:not(#zz)>section.pad-xs{
padding-top:38px !important;padding-bottom:38px !important}
html body main[data-page]:not(#zz)>section.hero-photo{
padding-top:76px !important;padding-bottom:68px !important}
@media(max-width:640px){
html body main[data-page]:not(#zz)>section.pad:not(:first-child),
html body main[data-page]:not(#zz)>section.pad-s:not(:first-child){
padding-top:var(--sp-sec-m) !important;padding-bottom:var(--sp-sec-m) !important}
html body main[data-page]:not(#zz)>section.pad-xs:not(:first-child){
padding-top:24px !important;padding-bottom:24px !important}
html body main[data-page]:not(#zz)>section.hero-photo{
padding-top:52px !important;padding-bottom:46px !important}
html body main[data-page="part-auto"] .pa-last,
html body main[data-page="part-textile"] .pa-last{padding-bottom:var(--sp-sec-m) !important}
}
/* en-tete de section : surtitre, titre, chapeau, puis contenu */
html body main[data-page]:not(#zz) .sec-head{margin-bottom:0;max-width:640px;
margin-left:auto;margin-right:auto}
html body main[data-page]:not(#zz) .sec-head .tag{margin-bottom:7px}
html body main[data-page]:not(#zz) .sec-head h2,
html body main[data-page]:not(#zz) .sec-head .sec-title{margin:0}
html body main[data-page]:not(#zz) .sec-head .lead{margin-top:8px}
html body main[data-page]:not(#zz) .sec-head>.mega-num{margin-top:8px}
html body main[data-page]:not(#zz) .sec-head>.mega-sub{margin-top:2px}
/* un seul ecart entre le titre et ce qui suit */
html body main[data-page]:not(#zz) .sec-head+*{margin-top:var(--sp-head)}
html body main[data-page]:not(#zz) .checks,
html body main[data-page]:not(#zz) .pa-tight,
html body main[data-page]:not(#zz) .pa-steps,
html body main[data-page]:not(#zz) .pa-faq,
html body main[data-page]:not(#zz) .cta-unit,
html body main[data-page]:not(#zz) .ba-wrap{margin-top:var(--sp-head);margin-bottom:0}
html body main[data-page]:not(#zz) .mini-cta{margin-top:16px;margin-bottom:0}
html body main[data-page]:not(#zz) .ba-wrap+.wrap .mini-cta{margin-top:14px}
/* =========================================================
2. GRILLE : meme largeur de contenu, memes marges laterales
========================================================= */
html body main[data-page]:not(#zz)>section>.wrap{
padding-left:22px;padding-right:22px;
margin-left:auto;margin-right:auto}
@media(max-width:400px){
html body main[data-page]:not(#zz)>section>.wrap{padding-left:20px;padding-right:20px}
}
/* =========================================================
3. LISTES A COCHES : coche pres du titre, colonne unique
La coche et le texte sont poses sur une grille de deux colonnes,
donc le titre et sa description commencent exactement au meme x.
========================================================= */
html body main[data-page]:not(#zz) .checks{
display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0}
html body main[data-page]:not(#zz) .checks li{
display:grid;grid-template-columns:18px minmax(0,1fr);
column-gap:9px;row-gap:0;align-items:start;font-size:15px;line-height:1.4}
html body main[data-page]:not(#zz) .checks li svg{
width:18px;height:18px;margin-top:3px;color:var(--gold)}
html body main[data-page]:not(#zz) .checks li span{display:block;min-width:0}
html body main[data-page]:not(#zz) .checks li strong{
display:block;margin:0 0 1px;font-size:15px;line-height:1.3}
/* le
qui suit un titre en display:block creait une ligne vide entiere
entre le titre et sa description : on le neutralise sans toucher au HTML */
html body main[data-page]:not(#zz) .checks li span br{display:none}
/* deux colonnes seulement quand la largeur le permet vraiment */
/* deux colonnes fixes et une largeur commune : 4 items donnent 2x2 et
6 items 3x2, jamais une ligne orpheline avec un grand vide a cote */
html body main[data-page]:not(#zz) .checks-2col,
html body main[data-page]:not(#zz) .pa-incl3{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px 34px;max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:760px){
html body main[data-page]:not(#zz) .checks-2col,
html body main[data-page]:not(#zz) .pa-incl3{
grid-template-columns:minmax(0,1fr);gap:12px;max-width:none}
}
/* =========================================================
4. PAS DE COUPURE INUTILE
========================================================= */
html body main[data-page]:not(#zz) .checks li span{text-wrap:pretty}
html body main[data-page]:not(#zz) .sec-title,
html body main[data-page]:not(#zz) .hero-photo h1, html body main[data-page]:not(#zz) .hero-photo h2.as-h1{text-wrap:balance}
/* =========================================================
5. TITRES : meme largeur, memes marges
========================================================= */
html body main[data-page]:not(#zz) .sec-head{text-align:center}
html body main[data-page]:not(#zz) .sec-head .tag{
font-size:11.5px;letter-spacing:.2em;color:var(--ink-soft)}
/* =========================================================
6. BLOC CONFIANCE : un seul ensemble, sans blanc parasite
========================================================= */
html body main[data-page]:not(#zz) .pa-zone{margin:12px 0 0;font-size:13.5px}
html body main[data-page]:not(#zz) .checks li:last-child{margin-bottom:0}
/* =========================================================
7. EN-TETE MOBILE PLUS BAS
========================================================= */
@media(max-width:900px){
html body .hd-in:not(#zz){min-height:54px}
html body .logo:not(#zz) .lg-mark{height:28px}
html body .drawer:not(#zz){inset:55px 0 0 0}
}
@media(max-width:900px){
html body main[data-page]:not(#zz) input,
html body main[data-page]:not(#zz) select,
html body main[data-page]:not(#zz) textarea,
html body main[data-page]:not(#zz) .b1-field,
html body main[data-page]:not(#zz) .bk-step,
html body #zone-home:not(#zz){scroll-margin-top:80px}
}
/* =========================================================
8. CTA FINAL : resserre, passerelle entreprises discrete
========================================================= */
html body main[data-page]:not(#zz) .cta-unit{margin-top:var(--sp-head)}
html body main[data-page]:not(#zz) .cta-reassur{margin-top:12px}
html body main[data-page]:not(#zz) .home-pro{margin-top:16px;font-size:12.5px;
text-wrap:balance;opacity:.8}
html body main[data-page]:not(#zz) .home-pro a{font-weight:500}
html body main[data-page]:not(#zz) .bk-alt{margin-top:18px;font-size:13px}
/* =========================================================
9. CARTE CODE POSTAL : memes marges internes que le reste
========================================================= */
html body #zone-home:not(#zz){padding:24px 20px}
html body #zone-home:not(#zz) h3{margin:0 0 6px}
html body #zone-home:not(#zz) .zh-lead{margin:0 auto 14px}
html body #zone-home:not(#zz) #zh-btn{margin-top:9px}
/* =========================================================
10. AVANT / APRES : legendes plus pres des images
========================================================= */
html body main[data-page]:not(#zz) .ba-cap{margin-top:8px}
html body main[data-page]:not(#zz) .ba-grid{gap:14px}
@media(max-width:640px){
html body main[data-page]:not(#zz) .ba-grid{gap:16px}
}
/* =====================================================================
v262 - photos du hero de l'accueil
Deux images distinctes, deja au bon format : portrait pour le mobile,
paysage pour le PC. Seul le cadrage est regle ici, l'image n'est ni
recadree ni deformee (background-size:cover conserve).
===================================================================== */
/* ---------- MOBILE : image portrait ----------
Le hero fait un rapport de 0,563 et l'image aussi : sur telephone
elle s'affiche entiere, sans recadrage. Sur tablette le cadre
s'elargit et rogne en hauteur, d'ou l'ancrage bas qui garde la
voiture, le technicien et l'utilitaire dans le champ. */
@media(max-width:899px){
html body .hp-bg[data-bg="hero_accueil"]:not(#zz){
background-position:center 82% !important;
background-size:cover !important}
}
/* ---------- PC : image paysage ----------
Le cadre est bien plus large que l'image (jusqu'a 3,49 contre 1,78),
donc le haut de ciel est rogne. L'ancrage bas conserve la maison,
la voiture, le technicien et l'utilitaire. */
@media(min-width:900px){
html body .hp-bg[data-bg="hero_accueil"]:not(#zz){
background-position:center 90% !important;
background-size:cover !important}
}
/* ---------- lisibilite du texte ----------
Les deux photos sont claires (ciel bleu, facade blanche) la ou se
posent le titre et les boutons : le voile est legerement renforce
au centre, sans noircir l'image. */
html body main[data-page="accueil"]:not(#zz) .hero-photo .hp-veil{
background:linear-gradient(180deg,
rgba(10,11,13,.54) 0%,
rgba(10,11,13,.58) 45%,
rgba(10,11,13,.64) 100%)}
@media(max-width:899px){
html body main[data-page="accueil"]:not(#zz) .hero-photo .hp-veil{
background:linear-gradient(180deg,
rgba(10,11,13,.50) 0%,
rgba(10,11,13,.59) 48%,
rgba(10,11,13,.66) 100%)}
}
/* =====================================================================
v263 - page NETTOYAGE PARTICULIER (part-textile)
Memes composants, memes marges et meme rythme que la page Lavage Auto
Particulier. Rien n'est ajoute au reste du site : tout est scope sur
main[data-page="part-textile"] ou sur les classes propres a la page.
===================================================================== */
/* =========================================================
1. BLOC TARIF / CODE POSTAL
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-book-card{
max-width:460px;margin:20px auto 0;padding:24px 22px;
background:var(--paper);border:1.5px solid var(--line);border-radius:20px;
box-shadow:var(--shadow-sm);text-align:center}
html body main[data-page="part-textile"]:not(#zz) .tx-book-lab{
display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
html body main[data-page="part-textile"]:not(#zz) #tx-cp{
width:100%;max-width:320px;margin:0 auto;padding:14px 16px;
border:1.5px solid var(--line);border-radius:12px;
font-size:16px;text-align:center;letter-spacing:.15em;background:#fff}
html body main[data-page="part-textile"]:not(#zz) #tx-cp-btn{
width:100%;max-width:320px;margin:10px auto 0;display:block}
html body main[data-page="part-textile"]:not(#zz) #tx-cp-res{
font-weight:600;font-size:14.5px;margin:10px 0 0;display:none}
/* reassurance : une ligne compacte sous le formulaire */
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{
list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;padding:0;margin:22px auto 0;max-width:720px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{
display:flex;flex-direction:column;align-items:center;gap:8px;
text-align:center;font-size:13px;font-weight:600;line-height:1.3;
color:var(--ink);min-width:0}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{
grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;max-width:400px}
}
/* =========================================================
2. PASTILLE D'ICONE, commune aux deux blocs
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-ic{
display:inline-flex;align-items:center;justify-content:center;flex:none;
width:38px;height:38px;border-radius:12px;
background:var(--gold-soft,#F7F1E1);color:var(--gold-deep,#A07C22)}
html body main[data-page="part-textile"]:not(#zz) .tx-ic svg{width:19px;height:19px}
/* =========================================================
3. CARTES "CA VOUS PARLE" : basses, alignees, sans emoji
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-cases{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:12px;margin-top:22px}
html body main[data-page="part-textile"]:not(#zz) .tx-case{
display:flex;align-items:flex-start;gap:14px;min-width:0;
padding:16px 18px;background:var(--paper);
border:1.5px solid var(--line);border-radius:16px}
html body main[data-page="part-textile"]:not(#zz) .tx-case h3{
margin:0 0 2px;font-size:15.5px;line-height:1.3}
html body main[data-page="part-textile"]:not(#zz) .tx-case p{
margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft)}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .tx-cases{
grid-template-columns:minmax(0,1fr);gap:10px}
html body main[data-page="part-textile"]:not(#zz) .tx-case{padding:14px 16px;gap:12px}
html body main[data-page="part-textile"]:not(#zz) .tx-ic{width:34px;height:34px;border-radius:11px}
html body main[data-page="part-textile"]:not(#zz) .tx-ic svg{width:17px;height:17px}
}
/* l'ancre du bloc tarif ne doit pas passer sous l'en-tete fixe */
html body main[data-page="part-textile"]:not(#zz) #tx-book{scroll-margin-top:78px}
/* =========================================================
5. POP-UP CREDIT D'IMPOT : compacte et refermable
========================================================= */
html body .tx-pop{
background:rgba(16,15,12,.42);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
padding:20px;align-items:center}
html body .tx-pop-card{
position:relative;max-width:340px;width:100%;
padding:24px 22px 22px;border-radius:20px;text-align:center;
box-shadow:0 24px 60px rgba(0,0,0,.24)}
html body .tx-pop-tag{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-deep,#A07C22);margin-bottom:8px}
html body .tx-pop-card h3{font-size:20px;line-height:1.25;margin:0 0 8px}
html body .tx-pop-card p{font-size:14px;line-height:1.5;margin:0 0 18px}
html body .tx-pop-card .btn{width:100%}
html body .tx-pop-x{
position:absolute;top:10px;right:10px;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border:0;border-radius:50%;background:var(--paper);color:var(--ink);
cursor:pointer;padding:0}
html body .tx-pop-x svg{width:17px;height:17px}
html body .tx-pop-x:hover{background:var(--line)}
@media(max-width:380px){
html body .tx-pop-card{padding:22px 18px 20px}
html body .tx-pop-card h3{font-size:18.5px}
}
/* =====================================================================
v265 - finition de la page NETTOYAGE PARTICULIER
Uniquement du reglage : espacements, largeurs, hauteurs de cartes.
Rien n'est ajoute au reste du site.
===================================================================== */
/* ---------- 1. bloc tarif : le point le plus visible de la page ---------- */
html body main[data-page="part-textile"]:not(#zz) .tx-book-card{
position:relative;max-width:440px;margin:26px auto 0;padding:26px 22px 24px;
background:linear-gradient(180deg,var(--gold-soft,#FBF6E9) 0%,var(--paper) 62%);
border:1.5px solid var(--gold,#C9A227);border-radius:20px;
box-shadow:0 14px 34px -18px rgba(160,124,34,.5)}
html body main[data-page="part-textile"]:not(#zz) .tx-book-lab{
margin:6px 0 10px}
html body main[data-page="part-textile"]:not(#zz) #tx-cp{
max-width:300px;background:#fff}
html body main[data-page="part-textile"]:not(#zz) #tx-cp-btn{
max-width:300px;margin-top:10px;padding-top:17px;padding-bottom:17px;font-size:16px}
/* ---------- 2. reassurance : une ligne, lisible d'un coup d'oeil ---------- */
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{
margin-top:18px;gap:12px;max-width:680px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{
font-size:12.5px;gap:7px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic{
width:34px;height:34px;border-radius:11px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic svg{width:17px;height:17px}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{
gap:14px 10px;max-width:340px;margin-top:16px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{font-size:12px;gap:6px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic{width:30px;height:30px;border-radius:10px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic svg{width:15px;height:15px}
}
/* ---------- 3. cartes : plus basses, deux colonnes nettes ---------- */
html body main[data-page="part-textile"]:not(#zz) .tx-cases{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 20px;max-width:720px;margin:18px auto 0}
html body main[data-page="part-textile"]:not(#zz) .tx-case{
align-items:center;gap:13px;padding:14px 16px;border-radius:16px}
html body main[data-page="part-textile"]:not(#zz) .tx-case h3{font-size:15px}
html body main[data-page="part-textile"]:not(#zz) .tx-case p{font-size:13.5px}
@media(max-width:760px){
html body main[data-page="part-textile"]:not(#zz) .tx-cases{
grid-template-columns:minmax(0,1fr);gap:10px;max-width:none}
}
/* ---------- 4. FAQ et fin de page ---------- */
html body main[data-page="part-textile"]:not(#zz) .pa-faq{max-width:720px;margin-left:auto;margin-right:auto}
html body main[data-page="part-textile"]:not(#zz) .pa-faq details{margin-top:8px}
html body main[data-page="part-textile"]:not(#zz) .mini-cta{margin-top:18px}
html body main[data-page="part-textile"]:not(#zz) .mini-cta a[href^="tel"]{
color:var(--ink-soft);border-bottom-color:var(--line)}
/* ---------- 5. bulles flottantes : presence minimale sur mobile ---------- */
@media(max-width:640px){
body[data-active-page="part-textile"] .float-contact{right:12px;bottom:14px;opacity:.82}
body[data-active-page="part-textile"] .float-contact .fc-btn{width:36px;height:36px}
body[data-active-page="part-textile"] .float-contact .fc-btn svg{width:15px;height:15px}
}
/* =====================================================================
v266 - finition page NETTOYAGE PARTICULIER + pied de page
Uniquement des reglages d'espacement, de largeur et d'alignement.
===================================================================== */
/* =========================================================
1. UNE SEULE COLONNE DE CONTENU
La grille d'avant/apres montait a 1140 px quand tout le reste de la
page tient dans 920 px : les images depassaient a gauche et a droite
des titres et des textes. Meme largeur pour tout le monde.
========================================================= */
html body main[data-page="part-textile"]:not(#zz)>section>.wrap{max-width:920px}
html body main[data-page="part-textile"]:not(#zz) .ba-wrap{margin-top:20px}
/* avant/apres : memes dimensions, memes arrondis, memes legendes */
html body main[data-page="part-textile"]:not(#zz) .ba-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
html body main[data-page="part-textile"]:not(#zz) .ba-cell .ba-static{
aspect-ratio:3/2;object-fit:cover;border-radius:16px}
html body main[data-page="part-textile"]:not(#zz) .ba-cap{
margin-top:9px;font-size:13px;line-height:1.35;text-align:center}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .ba-grid{
grid-template-columns:minmax(0,1fr);gap:16px}
html body main[data-page="part-textile"]:not(#zz) .ba-wrap{margin-top:18px}
}
/* le rappel n'est plus une ligne isolee : il prolonge la grille */
html body main[data-page="part-textile"]:not(#zz) .ba-grid+.mini-cta{margin-top:16px}
/* =========================================================
2. HERO LEGEREMENT PLUS COMPACT
Sa hauteur ne vient pas du remplissage mais d'un min-height de 80svh :
c'est lui qu'il faut reduire pour gagner de la place.
========================================================= */
html body main[data-page="part-textile"]:not(#zz)>section.hero-photo{
min-height:70svh;padding-top:66px !important;padding-bottom:58px !important}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz)>section.hero-photo{
min-height:72svh;padding-top:44px !important;padding-bottom:40px !important}
html body main[data-page="part-textile"]:not(#zz) .hero-photo h1, html body main[data-page="part-textile"]:not(#zz) .hero-photo h2.as-h1{margin-bottom:12px}
html body main[data-page="part-textile"]:not(#zz) .hero-photo .hero-sub{margin-bottom:20px}
}
/* =========================================================
3. REASSURANCE : un bandeau unique, compact
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{
margin:18px auto 0;max-width:700px;gap:0;
border:1.5px solid var(--line);border-radius:16px;
background:var(--paper);overflow:hidden}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{
padding:14px 10px;border-right:1px solid var(--line);
font-size:12.5px;gap:8px;justify-content:flex-start}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li:last-child{border-right:0}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .tx-reassur{max-width:440px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{
padding:12px 8px;font-size:11.5px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li:nth-child(2){border-right:0}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li:nth-child(-n+2){
border-bottom:1px solid var(--line)}
}
/* =========================================================
4. CARTES, FAQ ET FIN DE PAGE
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-cases{gap:10px 18px;margin-top:16px}
html body main[data-page="part-textile"]:not(#zz) .tx-case{padding:13px 15px;gap:12px}
html body main[data-page="part-textile"]:not(#zz) .pa-faq{margin-top:16px}
html body main[data-page="part-textile"]:not(#zz) .pa-faq details{margin-top:7px}
html body main[data-page="part-textile"]:not(#zz) .pa-faq summary{
padding:13px 42px 13px 15px;font-size:14.5px;line-height:1.35}
html body main[data-page="part-textile"]:not(#zz) .pa-faq details p{
padding:0 15px 13px;font-size:14px;line-height:1.5}
html body main[data-page="part-textile"]:not(#zz) .pa-faq+.mini-cta{margin-top:16px}
html body main[data-page="part-textile"]:not(#zz) .mini-cta+.cta-unit{margin-top:12px}
/* =========================================================
5. PIED DE PAGE
Le bas de page reservait 110 px pour une barre d'action fixe qui
n'existe plus : autant de vide sous le dernier lien.
========================================================= */
html body footer{padding:52px 0 34px;margin-top:56px}
/* minmax(0,1fr) et pas 1fr : sinon une colonne refuse de descendre sous la
largeur de son plus long lien (l'adresse e-mail) et la grille deborde */
html body footer .f-grid{
grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:32px;align-items:start}
html body footer .f-col a{overflow-wrap:anywhere}
html body footer .f-logo{margin-bottom:14px}
html body footer .f-baseline{font-size:14px;line-height:1.55;margin:0;max-width:280px}
html body footer .f-zone{font-size:13px;margin:10px 0 0;color:#8C8878}
html body footer h4{
color:#fff;font-size:13px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;margin:0 0 12px}
html body footer .f-col a{
display:block;padding:5px 0;font-size:14.5px;line-height:1.4;color:#A7A395}
html body footer .f-col a:hover{color:#fff}
html body footer .f-bottom{
border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:8px 18px;font-size:13px}
html body footer .f-bottom a{color:#A7A395;text-decoration:underline;text-underline-offset:3px}
html body footer .f-bottom a:hover{color:#fff}
@media(max-width:900px){
html body footer .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
html body footer .f-brand{grid-column:1 / -1}
}
@media(max-width:560px){
html body footer{padding:40px 0 calc(28px + env(safe-area-inset-bottom));margin-top:44px}
html body footer .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
html body footer .f-col a{font-size:13.5px;padding:4px 0}
html body footer h4{font-size:12px;margin-bottom:9px}
html body footer .f-baseline{max-width:none}
html body footer .f-bottom{
margin-top:26px;padding-top:18px;justify-content:flex-start;gap:6px 16px}
}
/* =========================================================
6. BULLE WHATSAPP : discrete, jamais devant un bouton
========================================================= */
@media(max-width:640px){
body[data-active-page="part-textile"] .float-contact{opacity:.75}
body[data-active-page="part-textile"] .float-contact:hover{opacity:1}
}
/* =====================================================================
v267 - finition conversion, page NETTOYAGE PARTICULIER + pied de page
===================================================================== */
/* =========================================================
1. HERO : un seul bouton attire l'oeil
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .hero-cta .btn-gold{
box-shadow:0 12px 26px -12px rgba(160,124,34,.8)}
html body main[data-page="part-textile"]:not(#zz) .hero-cta .btn-ghost{
border-width:1px;border-color:rgba(255,255,255,.42);
background:transparent;font-weight:600;font-size:14.5px;
padding-top:13px;padding-bottom:13px;opacity:.9}
html body main[data-page="part-textile"]:not(#zz) .hero-cta .btn-ghost:hover{
opacity:1;border-color:rgba(255,255,255,.75)}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .hero-cta{gap:10px}
html body main[data-page="part-textile"]:not(#zz) .hero-cta .btn-ghost{
font-size:14px;padding-top:11px;padding-bottom:11px}
}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .hero-benefs.is-4{
grid-template-columns:repeat(2,minmax(0,1fr));max-width:330px;gap:9px 14px}
}
/* =========================================================
2. MINI-CTA : un vrai bloc, pas une ligne perdue
========================================================= */
/* l'ancre du bloc tarif doit se poser sous l'en-tete fixe (79px sur PC) */
html body main[data-page="part-textile"]:not(#zz) #tx-book{scroll-margin-top:96px}
html body main[data-page="part-textile"]:not(#zz) .mini-cta.is-box{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:10px 14px;max-width:520px;margin:18px auto 0;padding:14px 18px;
background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
font-size:14.5px;color:var(--ink)}
html body main[data-page="part-textile"]:not(#zz) .mini-cta.is-box .mini-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;border-radius:999px;white-space:nowrap;
background:var(--gold);color:var(--ink);border:0;
font-weight:700;font-size:14.5px;text-decoration:none;line-height:1}
html body main[data-page="part-textile"]:not(#zz) .mini-cta.is-box .mini-btn:hover{
background:var(--gold-deep,#A07C22);color:#fff}
@media(max-width:420px){
html body main[data-page="part-textile"]:not(#zz) .mini-cta.is-box{
flex-direction:column;gap:11px;padding:14px 16px;text-align:center}
html body main[data-page="part-textile"]:not(#zz) .mini-cta.is-box .mini-btn{width:100%;justify-content:center}
}
/* =========================================================
3. BLOC TARIF : sous-titre en deux arguments courts
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-argus{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:6px 14px;margin-top:8px}
html body main[data-page="part-textile"]:not(#zz) .tx-argus span{
display:inline-flex;align-items:center;font-weight:600;color:var(--ink)}
html body main[data-page="part-textile"]:not(#zz) .tx-argus span+span::before{
content:"";width:4px;height:4px;border-radius:50%;
background:var(--gold);margin-right:14px;flex:none}
/* les 4 avantages : un peu plus presents */
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{
font-size:13px;font-weight:700;color:var(--ink)}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic{
width:36px;height:36px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic svg{width:18px;height:18px}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz) .tx-reassur li{font-size:12.5px;padding:13px 8px}
html body main[data-page="part-textile"]:not(#zz) .tx-reassur .tx-ic{width:32px;height:32px}
}
/* =========================================================
4. CARTES, FAQ, FIN DE PAGE : moins de hauteur perdue
========================================================= */
html body main[data-page="part-textile"]:not(#zz) .tx-cases{gap:9px 16px;margin-top:14px}
html body main[data-page="part-textile"]:not(#zz) .tx-case{padding:12px 14px;gap:11px}
html body main[data-page="part-textile"]:not(#zz) .tx-case h3{font-size:14.5px;line-height:1.25}
html body main[data-page="part-textile"]:not(#zz) .tx-case p{font-size:13px;line-height:1.4}
html body main[data-page="part-textile"]:not(#zz) .pa-faq{margin-top:14px}
html body main[data-page="part-textile"]:not(#zz) .pa-faq details{margin-top:6px}
html body main[data-page="part-textile"]:not(#zz) .pa-faq summary{
padding:12px 40px 12px 14px;font-size:14px;line-height:1.3}
html body main[data-page="part-textile"]:not(#zz) .pa-faq details p{
padding:0 14px 12px;font-size:13.5px;line-height:1.5}
html body main[data-page="part-textile"]:not(#zz) .pa-faq+.mini-cta{margin-top:14px}
html body main[data-page="part-textile"]:not(#zz) .mini-cta+.cta-unit{margin-top:10px}
/* =========================================================
5. PIED DE PAGE : logo > phrase > coordonnees > liens > mentions
========================================================= */
html body footer .f-contact{list-style:none;margin:14px 0 0;padding:0}
html body footer .f-contact li{margin:0}
html body footer .f-contact a{
display:inline-block;padding:4px 0;font-size:14.5px;line-height:1.4;
color:#C9C4B4;overflow-wrap:anywhere}
html body footer .f-contact a:hover{color:#fff}
@media(max-width:560px){
/* la 3e colonne de liens se retrouvait seule sur sa ligne, avec un vide
a droite : elle prend toute la largeur et repartit ses liens */
html body footer .f-col:last-child{grid-column:1 / -1}
html body footer .f-col:last-child a{
display:inline-block;margin-right:20px}
html body footer .f-brand{margin-bottom:2px}
html body footer .f-contact{margin-top:12px}
html body footer .f-contact a{font-size:14px;padding:3px 0}
html body footer .f-bottom{
flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:560px){
html body main[data-page="resa"]:not(#zz) .bk-slots .pick:last-child:nth-child(odd){
grid-column:1 / -1}
}
/* =====================================================================
v271 - bandeau d'equipe, page Qui sommes-nous
Sur PC le texte se pose sur la photo. Sous 820px il passe dessous :
la photo garde alors son cadrage d'origine, donc les six visages et
l'utilitaire restent entiers, ce qu'un recadrage plein ecran sur
telephone rendrait impossible.
===================================================================== */
html body main[data-page="apropos"]:not(#zz) .ap-team{
position:relative;margin:0;padding:0}
html body main[data-page="apropos"]:not(#zz) .ap-team-img{
position:relative;margin:0;display:block;line-height:0}
html body main[data-page="apropos"]:not(#zz) .ap-team-img img{
display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
object-position:center 42%}
html body main[data-page="apropos"]:not(#zz) .ap-team-veil{display:none}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt{
padding:34px 0 30px;text-align:center}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt .tag{
display:block;margin-bottom:10px;color:var(--ink-soft);
font-size:11.5px;letter-spacing:.2em}
/* le mot dore du titre reste dore, comme partout ailleurs sur le site */
html body main[data-page="apropos"]:not(#zz) .ap-team-txt h1 .gd, html body main[data-page="apropos"]:not(#zz) .ap-team-txt h2.as-h1 .gd{color:var(--gold-deep,#A07C22)}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt h1, html body main[data-page="apropos"]:not(#zz) .ap-team-txt h2.as-h1{
margin:0;font-size:clamp(26px,5.6vw,44px);line-height:1.12;text-wrap:balance}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt .lead{
margin:12px auto 0;max-width:600px}
/* ---------- PC : texte en surimpression ---------- */
@media(min-width:821px){
html body main[data-page="apropos"]:not(#zz) .ap-team{
display:grid;isolation:isolate}
html body main[data-page="apropos"]:not(#zz) .ap-team>*{
grid-area:1 / 1}
html body main[data-page="apropos"]:not(#zz) .ap-team-img img{
max-height:620px}
html body main[data-page="apropos"]:not(#zz) .ap-team-veil{
display:block;position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(12,13,15,.34) 0%,
rgba(12,13,15,.30) 42%,
rgba(12,13,15,.62) 100%)}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt{
align-self:end;padding:0 0 56px;color:#fff;z-index:2}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt h1, html body main[data-page="apropos"]:not(#zz) .ap-team-txt h2.as-h1{color:#fff}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt h1 .gd, html body main[data-page="apropos"]:not(#zz) .ap-team-txt h2.as-h1 .gd{color:var(--gold,#C9A227)}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt .tag{color:#fff;opacity:.9}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt .lead{
color:rgba(255,255,255,.9)}
}
/* ---------- premiere section : on garde la respiration du site ---------- */
html body main[data-page="apropos"]:not(#zz) .ap-team+section.pad-s{
padding-top:44px !important}
@media(max-width:640px){
html body main[data-page="apropos"]:not(#zz) .ap-team-txt{padding:26px 0 6px}
html body main[data-page="apropos"]:not(#zz) .ap-team+section.pad-s{
padding-top:28px !important}
}
/* =====================================================================
v272 - section Recrutement (page Qui sommes-nous)
Reprend les composants existants : .form, .frow, .tag, .sec-title,
.btn-gold. Seuls le champ fichier et la ligne d'etat sont nouveaux.
===================================================================== */
html body main[data-page="apropos"]:not(#zz) #rec .sec-head{margin-bottom:0}
html body main[data-page="apropos"]:not(#zz) #rec .rec-form{margin-top:22px}
html body main[data-page="apropos"]:not(#zz) #rec .rec-opt{
font-weight:500;color:var(--ink-soft)}
/* ---------- champ fichier ---------- */
html body main[data-page="apropos"]:not(#zz) .rec-cv{margin-top:18px}
html body main[data-page="apropos"]:not(#zz) .rec-cv input[type="file"]{
position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html body main[data-page="apropos"]:not(#zz) .rec-cv-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
width:100%;border-width:1.5px;border-style:dashed;font-size:15px}
html body main[data-page="apropos"]:not(#zz) .rec-cv-btn svg{width:18px;height:18px}
html body main[data-page="apropos"]:not(#zz) .rec-cv-aide{
margin:8px 0 0;font-size:13px;color:var(--ink-soft);text-align:center}
html body main[data-page="apropos"]:not(#zz) .rec-cv-fichier{
display:flex;align-items:center;gap:10px;margin-top:10px;padding:11px 14px;
border:1.5px solid var(--line);border-radius:12px;background:var(--paper)}
/* display:flex et inline-flex l'emportent sur la regle par defaut de
l'attribut hidden : sans cette ligne, l'encart du fichier reste visible
et vide, et le bouton d'ajout ne disparait pas une fois le CV choisi */
html body main[data-page="apropos"]:not(#zz) #rec [hidden]{display:none}
html body main[data-page="apropos"]:not(#zz) .rec-cv-nom{
flex:1;min-width:0;font-size:14px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body main[data-page="apropos"]:not(#zz) .rec-cv-x{
flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer;padding:0}
html body main[data-page="apropos"]:not(#zz) .rec-cv-x:hover{
background:var(--line);color:var(--ink)}
html body main[data-page="apropos"]:not(#zz) .rec-cv-x svg{width:15px;height:15px}
/* ---------- champ en erreur ---------- */
html body main[data-page="apropos"]:not(#zz) .rec-form .is-ko{
border-color:#C0392B;background:#FDF6F5}
html body main[data-page="apropos"]:not(#zz) .rec-erreur{
margin:6px 0 0;font-size:13px;font-weight:600;color:#C0392B}
/* ---------- bas de formulaire ---------- */
html body main[data-page="apropos"]:not(#zz) .rec-note{
margin:12px 0 0;font-size:13.5px;line-height:1.5;
color:var(--ink-soft);text-align:center}
html body main[data-page="apropos"]:not(#zz) .rec-etat{
margin:14px 0 0;padding:13px 16px;border-radius:12px;
font-size:14.5px;line-height:1.5;text-align:center;
border:1.5px solid var(--gold);background:var(--gold-soft,#FBF6E9)}
html body main[data-page="apropos"]:not(#zz) .rec-etat.is-ko{
border-color:#E3C9C5;background:#FDF6F5}
html body main[data-page="apropos"]:not(#zz) .rec-etat a{
color:var(--gold-deep,#A07C22);font-weight:700;
text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){
html body main[data-page="apropos"]:not(#zz) #rec .rec-form{margin-top:18px}
html body main[data-page="apropos"]:not(#zz) .rec-cv-btn{font-size:14.5px}
}
/* =====================================================================
v273 - un seul avant/apres sur tout le site
Le composant .ba de la page Vehicules & flottes est desormais utilise
partout. Ces regles reportent son cadre - largeur de galerie, grille,
proportions, arrondis, ombre - sur les pages qui affichaient jusqu'ici
des photos fixes. L'accueil en est exclu : il conserve ses photos fixes
et sa mise en page d'origine.
===================================================================== */
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-wrap{max-width:1120px;margin-left:auto;margin-right:auto}
/* Largeur de colonne plafonnee : sans cela une galerie de deux photos
etale des vignettes bien plus grandes qu'une galerie de quatre, et les
avant/apres n'ont pas la meme taille d'une page a l'autre. */
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,320px));
gap:24px;align-items:start;justify-content:center;margin-top:24px}
@media(max-width:640px){
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba{
aspect-ratio:3/4;max-height:560px;border-radius:20px;
border:1px solid var(--line);box-shadow:var(--shadow);background:#14161A}
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-cap{margin-top:12px;font-size:13.5px;text-align:center}
/* Les mentions AVANT et APRES sont deja imprimees dans ces photos, aux
memes emplacements que les pastilles du composant : on masque ces
dernieres pour ne pas les afficher en double. */
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-marque .ba-tag{display:none}
@media(max-width:640px){
html body main[data-page]:not([data-page="accueil"]):not(#zz) .ba-handle{width:42px;height:42px}
}
/* =====================================================================
v275 - FINITION PREMIUM
Une seule echelle d'arrondis, d'ombres et d'espacements pour tout le
site. Uniquement du style : la structure, les textes et les images
restent identiques.
===================================================================== */
:root{
/* arrondis : trois valeurs au lieu des quatre qui coexistaient */
--r-lg:20px; /* grands blocs : cartes, formulaires, photos */
--r-md:16px; /* blocs courants : options, questions, vignettes */
--r-sm:12px; /* champs et petits elements */
/* ombres : une progression reguliere, toujours discrete */
--sh-1:0 2px 6px -2px rgba(20,22,26,.06), 0 8px 22px -14px rgba(20,22,26,.14);
--sh-2:0 4px 12px -4px rgba(20,22,26,.08), 0 16px 36px -18px rgba(20,22,26,.20);
--sh-3:0 8px 20px -8px rgba(20,22,26,.10), 0 28px 60px -24px rgba(20,22,26,.26);
--ease:cubic-bezier(.22,.7,.28,1);
}
/* =========================================================
1. RYTHME DES SECTIONS
Les en-tetes de page en texte allaient de 8px a 64px de
remplissage haut selon la page. Une seule valeur desormais.
========================================================= */
html body main[data-page]:not(#zz)>section.hero{
padding-top:56px !important;padding-bottom:34px !important}
html body main[data-page]:not(#zz)>section.hero-photo{
padding-top:76px !important;padding-bottom:68px !important}
html body main[data-page="apropos"]:not(#zz) .ap-team+section.pad-s{
padding-top:58px !important}
@media(max-width:640px){
html body main[data-page]:not(#zz)>section.hero{
padding-top:38px !important;padding-bottom:24px !important}
html body main[data-page]:not(#zz)>section.hero-photo{
padding-top:52px !important;padding-bottom:46px !important}
html body main[data-page="apropos"]:not(#zz) .ap-team+section.pad-s{
padding-top:34px !important}
}
/* la page textile garde son en-tete un peu plus court, comme demande */
html body main[data-page="part-textile"]:not(#zz)>section.hero-photo{
padding-top:66px !important;padding-bottom:58px !important}
@media(max-width:640px){
html body main[data-page="part-textile"]:not(#zz)>section.hero-photo{
padding-top:44px !important;padding-bottom:40px !important}
}
/* =========================================================
2. ARRONDIS ET RELIEF
========================================================= */
html body main[data-page]:not(#zz) .card,
html body main[data-page]:not(#zz) .form,
html body main[data-page]:not(#zz) .tx-book-card,
html body main[data-page]:not(#zz) .sect-card,
html body main[data-page]:not(#zz) .ba{border-radius:var(--r-lg)}
html body main[data-page]:not(#zz) .tx-case,
html body main[data-page]:not(#zz) .pa-faq details,
html body main[data-page]:not(#zz) .pick,
html body main[data-page]:not(#zz) .cf-opt,
html body main[data-page]:not(#zz) .tx-pack,
html body main[data-page]:not(#zz) .elm-why-item,
html body main[data-page]:not(#zz) .tx-reassur,
html body main[data-page]:not(#zz) .mini-cta.is-box{border-radius:var(--r-md)}
html body main[data-page]:not(#zz) input,
html body main[data-page]:not(#zz) select,
html body main[data-page]:not(#zz) textarea{border-radius:var(--r-sm)}
/* relief : les blocs poses sur le fond creme se detachent legerement */
html body main[data-page]:not(#zz) .card,
html body main[data-page]:not(#zz) .form,
html body main[data-page]:not(#zz) .sect-card{box-shadow:var(--sh-2)}
html body main[data-page]:not(#zz) .tx-case,
html body main[data-page]:not(#zz) .pa-faq details,
html body main[data-page]:not(#zz) .cf-opt,
html body main[data-page]:not(#zz) .tx-pack,
html body main[data-page]:not(#zz) .elm-why-item{box-shadow:var(--sh-1)}
html body main[data-page]:not(#zz) .ba{box-shadow:var(--sh-3)}
/* survol : un leger soulevement, jamais de saut brusque */
html body main[data-page]:not(#zz) .tx-case,
html body main[data-page]:not(#zz) .cf-opt,
html body main[data-page]:not(#zz) .elm-why-item,
html body main[data-page]:not(#zz) .pick{
transition:transform .22s var(--ease),box-shadow .22s var(--ease),
border-color .22s var(--ease),background-color .22s var(--ease)}
@media(hover:hover){
html body main[data-page]:not(#zz) .tx-case:hover,
html body main[data-page]:not(#zz) .cf-opt:hover,
html body main[data-page]:not(#zz) .elm-why-item:hover{
transform:translateY(-2px);box-shadow:var(--sh-2)}
html body main[data-page]:not(#zz) .pick:hover{
transform:translateY(-1px);box-shadow:var(--sh-1)}
}
/* =========================================================
3. BOUTONS : le principal doit se voir tout de suite
========================================================= */
html body .btn{
transition:transform .18s var(--ease),box-shadow .22s var(--ease),
background-color .22s var(--ease),border-color .22s var(--ease),
color .22s var(--ease)}
html body .btn-gold{
box-shadow:0 3px 8px -2px rgba(20,22,26,.14),
0 12px 28px -12px rgba(166,132,48,.85)}
@media(hover:hover){
html body .btn-gold:hover{
transform:translateY(-2px);
box-shadow:0 5px 12px -3px rgba(20,22,26,.18),
0 22px 44px -16px rgba(166,132,48,.95)}
}
html body .btn-gold:active{transform:translateY(1px) scale(.995);
box-shadow:0 2px 6px -2px rgba(20,22,26,.16),
0 8px 18px -10px rgba(166,132,48,.7)}
html body .btn-cta-big{
box-shadow:0 4px 10px -2px rgba(20,22,26,.16),
0 18px 40px -14px rgba(166,132,48,.9)}
/* bouton secondaire sur fond clair : lisible sans concurrencer le doré */
@media(hover:hover){
html body main[data-page]:not(#zz) .btn-ghost:hover{
background:var(--gold-soft,#FBF6E9);border-color:var(--gold-deep,#A07C22)}
}
/* reperage au clavier, sur tous les elements cliquables */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible{
outline:2px solid var(--gold-deep,#A07C22);outline-offset:3px;border-radius:6px}
html body main[data-page]:not(#zz) input:focus,
html body main[data-page]:not(#zz) textarea:focus,
html body main[data-page]:not(#zz) select:focus{
border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16);outline:none}
/* =========================================================
4. APPARITIONS
========================================================= */
html body .reveal{
opacity:0;transform:translateY(20px);
transition:opacity .7s var(--ease),transform .7s var(--ease)}
html body .reveal.in{opacity:1;transform:none}
/* les elements d'une meme grille arrivent l'un apres l'autre */
html body .reveal.in .ba-grid>*,
html body .reveal.in .tx-cases>*,
html body .reveal.in .checks>li,
html body .reveal.in .pa-steps>li{
animation:v275Entree .55s var(--ease) both}
html body .reveal.in .ba-grid>*:nth-child(2),
html body .reveal.in .tx-cases>*:nth-child(2),
html body .reveal.in .checks>li:nth-child(2),
html body .reveal.in .pa-steps>li:nth-child(2){animation-delay:.06s}
html body .reveal.in .ba-grid>*:nth-child(3),
html body .reveal.in .tx-cases>*:nth-child(3),
html body .reveal.in .checks>li:nth-child(3),
html body .reveal.in .pa-steps>li:nth-child(3){animation-delay:.12s}
html body .reveal.in .ba-grid>*:nth-child(n+4),
html body .reveal.in .tx-cases>*:nth-child(n+4),
html body .reveal.in .checks>li:nth-child(n+4),
html body .reveal.in .pa-steps>li:nth-child(n+4){animation-delay:.18s}
@keyframes v275Entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* certains preferent un site sans mouvement : on le respecte */
@media(prefers-reduced-motion:reduce){
html body *,html body *::before,html body *::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important}
html body .reveal{opacity:1;transform:none}
}
/* =========================================================
5. ALIGNEMENTS
========================================================= */
/* la coche et la premiere ligne de texte partagent la meme ligne de base */
html body main[data-page]:not(#zz) .checks li svg{margin-top:2px}
html body main[data-page]:not(#zz) .cta-reassur li{align-items:center}
html body main[data-page]:not(#zz) .tx-reassur li{justify-content:center}
html body main[data-page]:not(#zz) .btn svg{flex:none}
/* Formulaire de devis : la premiere rangee contient deux champs a gauche
et un seul a droite. Les etiquettes ne tombaient donc pas en face les
unes des autres et la colonne de droite se terminait par un vide.
Cette rangee passe sur une seule colonne : tout s'aligne. */
html body main[data-page="devis"]:not(#zz) .frow:has(>div:first-child select):has(>div:first-child input){
grid-template-columns:minmax(0,1fr)}
/* =========================================================
6. PIED DE PAGE
========================================================= */
html body footer{
background:linear-gradient(180deg,#16181C 0%,#111316 100%);
border-top:1px solid rgba(255,255,255,.06)}
/* pas de filet decoratif sous les titres de colonnes : le pied de page
reste sobre, les titres se distinguent deja par leur graisse */
html body footer h4{margin-bottom:14px}
html body footer .f-col a,
html body footer .f-contact a{
transition:color .2s var(--ease),transform .2s var(--ease)}
@media(hover:hover){
html body footer .f-col a:hover,
html body footer .f-contact a:hover{transform:translateX(3px)}
}
html body footer .f-baseline{color:#B4B0A2}
html body footer .f-bottom{border-top-color:rgba(255,255,255,.1)}
html body footer .f-bottom span{color:#8C8878}
@media(max-width:560px){
html body footer h4{margin-bottom:10px}
}
/* =====================================================================
v277 - accueil oriente sur le resultat attendu
===================================================================== */
html body main[data-page="accueil"]:not(#zz) #zone-home h3{
font-size:clamp(19px,3.4vw,26px);line-height:1.24;text-wrap:balance}
html body main[data-page="accueil"]:not(#zz) #zone-home .zh-lead{margin-bottom:16px}
html body main[data-page="accueil"]:not(#zz) .zh-sous{
list-style:none;display:flex;flex-wrap:wrap;align-items:center;
justify-content:center;gap:6px 16px;padding:0;margin:14px 0 0}
html body main[data-page="accueil"]:not(#zz) .zh-sous li{
display:flex;align-items:center;gap:7px;
font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.3}
html body main[data-page="accueil"]:not(#zz) .zh-sous li:first-child::before{
content:"\2713";color:var(--gold-deep,#A07C22);font-weight:900;font-size:12px}
html body main[data-page="accueil"]:not(#zz) .zh-sous li+li::before{
content:"\00B7";color:var(--gold);font-weight:900;font-size:15px;line-height:1}
/* la confirmation d'entree dans le tunnel */
html body main[data-page="resa"]:not(#zz) .bk-ok{
margin:0 0 6px;font-size:14px;font-weight:700;color:#2E7D32}
/* =====================================================================
v278 - section finale de l'accueil
===================================================================== */
/* le surtitre est ici une phrase, pas une etiquette de deux mots :
il lui faut de quoi respirer sans se casser n'importe ou */
html body main[data-page="accueil"]:not(#zz)>section:last-of-type .sec-head .tag{
display:block;max-width:420px;margin-left:auto;margin-right:auto;
line-height:1.5;text-wrap:balance}
html body main[data-page="accueil"]:not(#zz)>section:last-of-type .sec-title{
text-wrap:balance}
@media(max-width:560px){
html body main[data-page="accueil"]:not(#zz)>section:last-of-type .sec-head .tag{
letter-spacing:.14em;font-size:11px}
}
/* =====================================================================
v284 - etape "Choisissez votre prestation"
Reprend exactement la mise en forme des cartes de formule deja
presentes dans le tunnel : memes cartes, meme badge, meme survol.
===================================================================== */
html body main[data-page="resa"]:not(#zz) .bk-packs{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* le !important repond a celui de la couche v259, qui impose deux colonnes
a toutes les grilles de choix sous 560px */
@media(max-width:640px){
html body main[data-page="resa"]:not(#zz) .bk-packs{
grid-template-columns:minmax(0,1fr) !important;gap:12px !important}
}
html body main[data-page="resa"]:not(#zz) .b1-pack{align-items:flex-start;text-align:left}
html body main[data-page="resa"]:not(#zz) .b1-pack .fp{
margin-top:10px;font-weight:800;color:var(--gold-deep,#A07C22)}
/* =====================================================================
v285 - etape "Choisissez votre prestation"
Uniquement de l'affichage : la carte choisie se voit tout de suite,
le montant devient l'element le plus lisible de la carte.
===================================================================== */
/* ---------- la carte, et sa version choisie ---------- */
html body main[data-page="resa"]:not(#zz) .b1-pack{
position:relative;padding:20px 18px 18px;gap:12px;
transition:border-color .2s var(--ease,ease),background-color .2s var(--ease,ease),
box-shadow .2s var(--ease,ease),transform .2s var(--ease,ease)}
html body main[data-page="resa"]:not(#zz) .b1-pack.on{
border-color:var(--gold-deep,#A07C22);border-width:2px;padding:19px 17px 17px;
background:linear-gradient(180deg,rgba(201,162,39,.10) 0%,rgba(201,162,39,.03) 100%);
box-shadow:0 6px 16px -6px rgba(160,124,34,.28),0 20px 44px -22px rgba(160,124,34,.5)}
/* ---------- la coche de validation ---------- */
html body main[data-page="resa"]:not(#zz) .pk-ok{
position:absolute;top:14px;right:14px;
width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--gold-deep,#A07C22);color:#fff;
opacity:0;transform:scale(.6);
transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1)}
html body main[data-page="resa"]:not(#zz) .pk-ok svg{width:14px;height:14px}
html body main[data-page="resa"]:not(#zz) .b1-pack.on .pk-ok{opacity:1;transform:scale(1)}
/* le badge du haut laisse la place a la coche */
html body main[data-page="resa"]:not(#zz) .b1-pack .fh{padding-right:34px}
/* ---------- le montant, element le plus lisible de la carte ---------- */
html body main[data-page="resa"]:not(#zz) .pk-prix{
display:block;margin-top:2px;font-family:var(--disp);color:var(--ink);
font-weight:800;line-height:1;letter-spacing:-.01em}
html body main[data-page="resa"]:not(#zz) .pk-prix b{
font-weight:800;font-size:34px}
html body main[data-page="resa"]:not(#zz) .b1-pack[data-pick-pack="int"] .pk-prix b{
font-size:24px;color:var(--ink-soft)}
html body main[data-page="resa"]:not(#zz) .b1-pack.on .pk-prix{color:var(--gold-deep,#A07C22)}
html body main[data-page="resa"]:not(#zz) .pk-note{
display:block;margin-top:6px;font-size:12.5px;font-weight:600;
color:var(--ink-soft);line-height:1.35}
/* ---------- la reassurance juste avant le bouton ---------- */
html body main[data-page="resa"]:not(#zz) .pk-reassur{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 22px;padding:0;margin:20px 0 0}
html body main[data-page="resa"]:not(#zz) .pk-reassur li{
display:flex;align-items:center;gap:8px;
font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
html body main[data-page="resa"]:not(#zz) .pk-reassur svg{
width:15px;height:15px;color:var(--gold-deep,#A07C22);flex:none}
html body main[data-page="resa"]:not(#zz) .pk-reassur+.bk-navrow{margin-top:16px}
@media(max-width:640px){
html body main[data-page="resa"]:not(#zz) .pk-prix b{font-size:30px}
html body main[data-page="resa"]:not(#zz) .b1-pack[data-pick-pack="int"] .pk-prix b{font-size:22px}
html body main[data-page="resa"]:not(#zz) .pk-reassur{
flex-direction:column;align-items:center;gap:8px;margin-top:18px}
}
/* =====================================================================
v286 - cartes de prestation resserrees
Le montant reste lisible mais passe apres les benefices : c'est la
liste qui se lit en premier, le prix vient confirmer.
===================================================================== */
/* ---------- une carte plus compacte ---------- */
html body main[data-page="resa"]:not(#zz) .b1-pack{
padding:12px 14px 11px;gap:7px}
html body main[data-page="resa"]:not(#zz) .b1-pack.on{
border-width:1.5px;padding:11.5px 13.5px 10.5px;
box-shadow:0 4px 12px -6px rgba(160,124,34,.22),0 14px 32px -20px rgba(160,124,34,.42)}
html body main[data-page="resa"]:not(#zz) .b1-pack .fh{gap:7px;padding-right:30px}
html body main[data-page="resa"]:not(#zz) .b1-pack .fn{font-size:16px}
html body main[data-page="resa"]:not(#zz) .b1-pack .inc{gap:4px}
html body main[data-page="resa"]:not(#zz) .b1-pack .inc span{font-size:13px;line-height:1.35}
html body main[data-page="resa"]:not(#zz) .b1-pack .inc .ck{width:14px;height:14px;margin-top:2px}
/* ---------- le badge, un cran plus discret ---------- */
html body main[data-page="resa"]:not(#zz) .b1-pack .b1-badge{
font-size:9px;padding:3px 8px;gap:4px;letter-spacing:.04em}
/* ---------- la pastille de validation, a l'echelle ---------- */
html body main[data-page="resa"]:not(#zz) .pk-ok{
top:11px;right:11px;width:22px;height:22px}
html body main[data-page="resa"]:not(#zz) .pk-ok svg{width:12px;height:12px}
/* ---------- le prix : present, pas dominant ---------- */
html body main[data-page="resa"]:not(#zz) .pk-prix{
margin-top:2px;font-family:var(--disp);font-weight:700;font-size:13px;
color:var(--ink-soft);letter-spacing:0;line-height:1.2}
html body main[data-page="resa"]:not(#zz) .pk-prix b{
font-weight:800;font-size:21px;color:var(--ink)}
html body main[data-page="resa"]:not(#zz) .b1-pack.on .pk-prix b{color:var(--gold-deep,#A07C22)}
html body main[data-page="resa"]:not(#zz) .pk-prix-sec{
font-size:14px;font-weight:700;color:var(--ink-soft)}
@media(max-width:640px){
html body main[data-page="resa"]:not(#zz) .pk-prix b{font-size:20px}
html body main[data-page="resa"]:not(#zz) .pk-reassur{gap:7px;margin-top:16px}
}
/* =====================================================================
v287 - logo vectoriel
Le trace prend la couleur du texte : encre dans l'en-tete, blanc dans
le pied de page, sans avoir a maintenir deux fichiers.
===================================================================== */
html body svg.lg-mark{
width:auto;display:block;color:var(--ink);
shape-rendering:geometricPrecision}
html body footer svg.lg-mark{color:#fff}
/* =====================================================================
v289 - duree d'intervention sur les cartes de prestation
Une ligne discrete sous le prix : elle informe sans concurrencer ni le
titre ni le montant.
===================================================================== */
html body main[data-page="resa"]:not(#zz) .pk-duree{
display:flex;align-items:center;gap:6px;margin-top:6px;
font-family:var(--body);font-size:12.5px;font-weight:600;
color:var(--ink-soft);line-height:1.3;letter-spacing:0}
html body main[data-page="resa"]:not(#zz) .pk-duree svg{
width:14px;height:14px;flex:none;color:var(--gold-deep,#A07C22);opacity:.85}
html body main[data-page="resa"]:not(#zz) .b1-pack.on .pk-duree{color:var(--ink)}
@media(max-width:640px){
html body main[data-page="resa"]:not(#zz) .pk-duree{font-size:12px;margin-top:5px}
}
/* =====================================================================
v291 - duree estimee, parcours textile
Meme facture que la ligne de duree du parcours automobile : icone
doree, texte discret, et un complement encore plus leger en dessous.
===================================================================== */
html body main[data-page="tx-resa"]:not(#zz) .tx-duree{
margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
html body main[data-page="tx-resa"]:not(#zz) .tx-duree-l{
display:flex;align-items:center;gap:7px;
font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
html body main[data-page="tx-resa"]:not(#zz) .tx-duree-l svg{
width:15px;height:15px;flex:none;color:var(--gold-deep,#A07C22);opacity:.9}
html body main[data-page="tx-resa"]:not(#zz) .tx-duree-n{
display:block;margin-top:5px;padding-left:22px;
font-size:12px;font-weight:500;color:var(--ink-soft);line-height:1.4}
@media(max-width:640px){
html body main[data-page="tx-resa"]:not(#zz) .tx-duree{margin-top:10px;padding-top:10px}
html body main[data-page="tx-resa"]:not(#zz) .tx-duree-n{padding-left:0}
}
/* =====================================================================
v298 - lot de corrections
===================================================================== */
/* ---------- titre du tunnel textile ---------- */
html body main[data-page="tx-resa"]:not(#zz) .tx-h1{
font-size:clamp(26px,5vw,44px);line-height:1.14;text-wrap:balance}
html body main[data-page="tx-resa"]:not(#zz) .tx-h1 .gd{display:inline-block}
/* ---------- Qui sommes-nous : la photo, puis le récit ---------- */
@media(min-width:821px){
/* la photo respire davantage sans changer ses proportions */
html body main[data-page="apropos"]:not(#zz) .ap-team-img img{max-height:720px}
html body main[data-page="apropos"]:not(#zz) .ap-team-txt{padding-bottom:64px}
}
html body main[data-page="apropos"]:not(#zz) .ap-recit{max-width:660px}
html body main[data-page="apropos"]:not(#zz) .ap-recit .sec-head{margin-bottom:18px}
html body main[data-page="apropos"]:not(#zz) .ap-recit p{
margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink-soft)}
html body main[data-page="apropos"]:not(#zz) .ap-recit p:last-child{margin-bottom:0}
html body main[data-page="apropos"]:not(#zz) .ap-signe{
margin-top:18px !important;padding-left:16px;border-left:2px solid var(--gold);
font-weight:700;color:var(--ink) !important;font-size:16.5px !important}
@media(max-width:640px){
html body main[data-page="apropos"]:not(#zz) .ap-recit p{font-size:15.5px;line-height:1.65}
}
/* ---------- téléphone dans le menu ---------- */
html body header .nav-tel{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;margin-left:4px;border-radius:100px;
border:1.5px solid var(--line);background:var(--paper);
font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;
transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
html body header .nav-tel svg{width:15px;height:15px;color:var(--gold-deep,#A07C22)}
@media(hover:hover){
html body header .nav-tel:hover{
border-color:var(--gold);background:var(--gold-soft,#FBF6E9);transform:translateY(-1px)}
}
/* ---------- réassurance des pages de réservation ---------- */
html body .bk-trust{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 20px;padding:12px 0 0;margin:0 0 18px}
html body .bk-trust li{
display:flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.3}
html body .bk-trust svg{width:14px;height:14px;flex:none;color:var(--gold-deep,#A07C22)}
@media(max-width:640px){
html body .bk-trust{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;
padding-top:10px;margin-bottom:14px}
html body .bk-trust li{font-size:11.5px;align-items:flex-start}
html body .bk-trust svg{margin-top:2px}
}
/* ---------- barre basse du pied de page ---------- */
html body footer .f-bottom{gap:8px 16px}
html body footer .f-bottom a+a{margin-left:0}
/* =====================================================================
Pages de ville : quelques reglages propres a ces pages, le reste vient
de la feuille du site.
===================================================================== */
.vil-fil{font-size:12.5px;font-weight:600;letter-spacing:.04em;margin:0 0 14px;
color:rgba(255,255,255,.75)}
.vil-fil a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.vil-fil a:hover{color:#fff}
main[data-page="part-auto"] section.hero .vil-fil{color:var(--ink-soft)}
main[data-page="part-auto"] section.hero .vil-fil a{color:var(--ink-soft)}
.vil-cta-mob{display:none}
@media(max-width:900px){
header .nav-links{display:none}
.vil-cta-mob{display:inline-flex;padding:10px 18px;font-size:14px}
}
/* avant / apres en deux images cote a cote */
.vil-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,420px));
gap:24px;justify-content:center;margin-top:24px}
.vil-ba figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.vil-ba img{display:block;width:100%;height:auto;background:#14161A}
.vil-ba figure img:first-of-type{border-radius:16px 0 0 16px}
.vil-ba figure img:nth-of-type(2){border-radius:0 16px 16px 0}
.vil-ba figcaption{grid-column:1 / -1;margin-top:10px;text-align:center;
font-size:13.5px;font-weight:600;color:var(--ink-soft)}
/* liste des villes */
.vil-groupe+.vil-groupe{margin-top:34px}
.vil-groupe h3{margin:0 0 14px;font-size:17px}
.vil-groupe h3 span{color:var(--ink-soft);font-weight:600;font-size:14px}
.vil-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.vil-carte{display:flex;flex-direction:column;gap:3px;padding:14px 16px;
border:1.5px solid var(--line);border-radius:16px;background:var(--paper);
text-decoration:none;color:var(--ink);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.vil-carte strong{font-size:15.5px}
.vil-carte span{font-size:12.5px;color:var(--ink-soft)}
.vil-carte:hover{transform:translateY(-2px);border-color:var(--gold);
box-shadow:0 4px 12px -4px rgba(20,22,26,.08),0 16px 36px -18px rgba(20,22,26,.2)}
.vil-autour{margin:18px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:2}
.vil-lien{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
font-weight:600;margin:0 4px}
.vil-lien:hover{color:var(--gold-deep,#A07C22)}
/* ---- pages de prestation textile ---- */
.sv-hero{background-image:url("/img/hero-textile-mob-v2.webp");background-size:cover;background-position:center 55%}
.sv-prix{list-style:none;max-width:520px;margin:22px auto 0;padding:0;
border:1.5px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.sv-prix li{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 18px;border-bottom:1px solid var(--line)}
.sv-prix li:last-child{border-bottom:0}
.sv-art{font-size:15px;font-weight:600}
.sv-num{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.sv-num b{font-family:var(--disp);font-size:19px;color:var(--gold-deep,#A07C22)}
.sv-num s{font-size:13px;color:var(--ink-soft)}
.sv-note{max-width:520px;margin:10px auto 0;font-size:12.5px;line-height:1.5;
color:var(--ink-soft);text-align:center}
.sv-devis{max-width:520px;margin:22px auto 0;padding:16px 18px;border:1.5px solid var(--line);
border-radius:16px;background:var(--paper);font-size:14.5px;line-height:1.5;text-align:center}
.sv-duree{display:flex;align-items:center;justify-content:center;gap:8px;
margin:14px 0 0;font-size:13px;font-weight:600;color:var(--ink-soft)}
.sv-duree svg{width:15px;height:15px;color:var(--gold-deep,#A07C22)}
/* ===== v313 : coherence ===== */
/* Le lien de rebond etait en nowrap : sur un ecran de 320px, la phrase
« Toutes nos villes dans les Hauts-de-Seine » depassait de 17px. */
@media(max-width:420px){
html body .mini-cta a:not(#zz){white-space:normal;line-height:1.45}
html body .mini-cta:not(#zz){font-size:14px}
}
/* Le bandeau a deux colonnes n'etait declare que pour part-auto et
part-textile : les pages Contact, Devis, Reserver, Entreprises et
Qui sommes-nous retombaient sur une seule colonne. */
html body main[data-page] .hero-photo .hero-benefs.is-4:not(#zz){
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 26px;max-width:480px;margin:22px auto 0}
html body main[data-page] .hero-photo .hero-benefs.is-4 li:not(#zz){
font-size:14px;line-height:1.3;text-align:left}
@media(max-width:640px){
html body main[data-page] .hero-photo .hero-benefs.is-4:not(#zz){
gap:9px 14px;max-width:330px;margin-top:20px}
html body main[data-page] .hero-photo .hero-benefs.is-4 li:not(#zz){
font-size:12.8px}
}
/* Filet de securite : un libelle un peu long ne doit jamais pousser
la grille hors de l'ecran. */
html body .hero-photo .hero-benefs li:not(#zz){min-width:0;overflow-wrap:anywhere}
/* =========================================================
ANIMATIONS ELM
Couche d'animation discrete. Tout est desactive si le
visiteur a demande a reduire les animations.
========================================================= */
@media (prefers-reduced-motion: no-preference){
/* Le reveal existant monte un peu plus et plus longtemps. */
.reveal{transform:translateY(26px)}
.reveal{transition:opacity .7s cubic-bezier(.16,.84,.34,1),
transform .7s cubic-bezier(.16,.84,.34,1)}
/* Arrivee en cascade des elements d'une meme grille. */
.reveal.in .grid2>*,.reveal.in .grid3>*,.reveal.in .res-grid>*,
.reveal.in .bl-grid>*,.reveal.in .avis-grid>*,.reveal.in .vil-ba>figure{
animation:elmMonte .65s cubic-bezier(.16,.84,.34,1) both}
.reveal.in .grid2>*:nth-child(2),.reveal.in .grid3>*:nth-child(2),
.reveal.in .res-grid>*:nth-child(2),.reveal.in .bl-grid>*:nth-child(2),
.reveal.in .avis-grid>*:nth-child(2),.reveal.in .vil-ba>figure:nth-child(2){animation-delay:.09s}
.reveal.in .grid3>*:nth-child(3),.reveal.in .res-grid>*:nth-child(3),
.reveal.in .bl-grid>*:nth-child(3),.reveal.in .avis-grid>*:nth-child(3),
.reveal.in .vil-ba>figure:nth-child(3){animation-delay:.18s}
.reveal.in .res-grid>*:nth-child(4),.reveal.in .vil-ba>figure:nth-child(4){animation-delay:.27s}
@keyframes elmMonte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Boutons : elevation nette au survol, retour amorti. */
.btn{transition:transform .22s cubic-bezier(.16,.84,.34,1),
box-shadow .22s ease,background .18s ease,border-color .18s ease}
.btn-gold:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
/* Cartes : le meme mouvement, uniformise. */
.card,.sect-card,.bl-card{transition:transform .25s cubic-bezier(.16,.84,.34,1),
box-shadow .25s ease,border-color .25s ease}
/* Photos : leger rapprochement au survol, sans deborder. */
.vil-ba figure,.bl-vis{overflow:hidden}
.vil-ba figure img{transition:transform .5s cubic-bezier(.16,.84,.34,1)}
.vil-ba figure:hover img{transform:scale(1.04)}
.bl-card:hover .bl-vis{transform:scale(1.04)}
.bl-vis{transition:transform .5s cubic-bezier(.16,.84,.34,1)}
/* Liens dores : soulignement qui se deploie. */
.go,.mini-cta a{position:relative}
.go::after,.mini-cta a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;
height:1.5px;background:currentColor;opacity:.5;
transition:right .3s cubic-bezier(.16,.84,.34,1)}
.go:hover::after,.mini-cta a:hover::after{right:0}
/* Deroulement doux des questions frequentes. */
details summary{transition:color .18s ease}
details[open] summary{color:var(--gold-deep)}
/* Defilement fluide pour les ancres internes. */
html{scroll-behavior:smooth}
}
/* =========================================================
CIBLES TACTILES
Sur mobile, les liens de liste etaient hauts d'environ 22 px.
On les amene autour de 40 px sans changer la typographie.
========================================================= */
@media(max-width:900px){
html body footer a,html body footer .f-col a,html body footer .f-nav a,
html body footer .f-contact a{padding:9px 0}
html body .uni-liens .go{padding:7px 0}
html body .mini-cta a{display:inline-block;padding:6px 0}
}
/* =========================================================
BANDEAU D'AIDE
Bande fine placee juste sous le hero : une question,
un bouton pour appeler. Presente sur toutes les pages.
========================================================= */
.hlp{background:var(--card);border-bottom:1px solid var(--line)}
.hlp-in{display:flex;align-items:center;justify-content:center;gap:18px;
flex-wrap:wrap;padding:14px 22px;text-align:center}
.hlp-in p{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.hlp-in .btn{min-height:42px;padding:10px 22px;font-size:14.5px}
@media(max-width:560px){
.hlp-in{gap:12px;padding:14px 18px;flex-direction:column}
.hlp-in p{font-size:14.5px}
.hlp-in .btn{width:100%;max-width:320px}
}
/* =========================================================
BARRE D'ACTION MOBILE
Appeler / WhatsApp / Tarifs, fixee en bas sous 900 px.
Les pastilles flottantes sont masquees a cette taille
pour eviter le doublon.
========================================================= */
.mbar{display:none}
@media(max-width:900px){
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:8px;
padding:9px 10px calc(9px + env(safe-area-inset-bottom));
background:rgba(20,22,26,.97);border-top:1px solid rgba(255,255,255,.14);
box-shadow:0 -8px 26px rgba(0,0,0,.28)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
min-height:46px;border-radius:999px;font-family:var(--disp);font-weight:700;
font-size:14px;text-decoration:none;white-space:nowrap}
.mbar svg{width:17px;height:17px;flex:none}
.mbar .mb-tel{background:var(--gold);color:#14161A}
.mbar .mb-wa{background:#25D366;color:#0b2e18}
.mbar .mb-tar{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
body{padding-bottom:74px}
html body .float-contact{display:none}
}
@media(max-width:360px){.mbar a{font-size:13px;gap:5px}.mbar svg{width:15px;height:15px}}
/* bandeau : seconde ligne un peu plus discrete */
.hlp-in .hlp-sub{font-weight:600;color:var(--ink-soft)}
@media(max-width:900px){.mbar a{font-size:15px}}
/* =========================================================
DIAGNOSTIC EN DEUX ETAPES
Bouton dans l'en-tete + fenetre modale. Reprend les cartes,
couleurs et typographies du site.
========================================================= */
.dg-btn{display:inline-flex;align-items:center;gap:8px;margin-left:10px;
background:transparent;color:var(--ink);border:1.5px solid var(--gold);
border-radius:999px;padding:9px 18px;font-family:var(--disp);font-weight:700;
font-size:14px;cursor:pointer;white-space:nowrap;
transition:background .2s ease,color .2s ease,transform .2s ease}
.dg-btn:hover{background:var(--gold);color:#14161A;transform:translateY(-1px)}
.dg-btn svg{width:16px;height:16px;flex:none}
@media(max-width:1100px){.dg-btn{display:none}}
.dg-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;
justify-content:center;padding:22px;background:rgba(20,18,12,.58);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dg-ov.on{display:flex}
.dg-card{position:relative;width:100%;max-width:520px;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r);padding:34px 30px 30px;
box-shadow:0 30px 70px -20px rgba(20,22,26,.5);max-height:90vh;overflow:auto}
.dg-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
font-size:20px;line-height:1;cursor:pointer;transition:.2s}
.dg-x:hover{color:var(--ink);border-color:var(--gold)}
.dg-et{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-deep);margin:0 0 8px}
.dg-card h2{font-family:var(--disp);font-size:23px;line-height:1.25;margin:0 0 6px}
.dg-sub{color:var(--ink-soft);font-size:15px;margin:0 0 22px}
.dg-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.dg-opts{grid-template-columns:1fr}}
.dg-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;text-align:center;background:var(--card);border:1.5px solid var(--line);
border-radius:16px;padding:22px 16px;cursor:pointer;font-family:inherit;
transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.dg-opt:hover{border-color:var(--gold);transform:translateY(-2px);
box-shadow:0 12px 26px -14px rgba(20,22,26,.4)}
.dg-opt svg{width:34px;height:34px;color:var(--gold-deep)}
.dg-opt b{font-family:var(--disp);font-size:16px;color:var(--ink)}
.dg-opt span{font-size:13px;color:var(--ink-soft);line-height:1.45}
.dg-retour{margin:18px 0 0;font-size:14px}
.dg-retour button{background:none;border:0;color:var(--gold-deep);font:inherit;
font-weight:700;cursor:pointer;padding:6px 0}
.dg-retour button:hover{color:var(--ink)}
@media(max-width:400px){
.pc-wa{white-space:normal;line-height:1.3;padding:13px 16px;font-size:14.5px}
}
/* Sur tres petits ecrans, les libelles longs peuvent revenir a la ligne
plutot que d'etre coupes. */
@media(max-width:400px){
.btn{white-space:normal;line-height:1.3;text-align:center}
}
/* Bloc « autres prestations » des pages locales : la mise en page des
liens n'existait que dans l'accueil, on la reprend ici. */
.elm-croise .uni-liens{display:grid;gap:9px;margin-top:16px;max-width:520px;
margin-left:auto;margin-right:auto}
.elm-croise .uni-liens .go{display:block;font-weight:700;color:var(--gold-deep);
text-decoration:none;padding:7px 0}
.elm-croise .uni-liens .go:hover{color:var(--ink)}
.elm-croise .cta-unit{margin-top:22px}
/* Hero des pages ville : image paysage reservee aux grands ecrans. */
@media(min-width:900px){.sv-hero{background-image:url("/img/hero-textile-pc-v2.webp")}}
/* =====================================================================
Premier affichage : pas d'animation d'entree.
[data-page].on lancait fadeUp (opacity 0 -> 1) sur 350 ms et
.hero-photo .wrap>* lancait heroIn sur 600 ms avec des delais
echelonnes. Resultat : le hero ne pouvait pas apparaitre avant
~350 ms, meme avec l'image deja en cache. L'animation est conservee
pour les changements de page : le script pose la classe « nav »
sur au premier clic.
===================================================================== */
html:not(.nav) [data-page].on{animation:none}
html:not(.nav) .hero-photo .wrap>*{animation:none;opacity:1;transform:none}
/* =========================================================
SOUS-TITRES DES PAGES PRESTATION TEXTILE
Coupure de ligne maitrisee : un
place dans le texte
separe les deux phrases. Au-dela de 1100px, chaque phrase
tient sur sa ligne, sans retour automatique. En dessous,
le paragraphe se replie normalement.
========================================================= */
@media(min-width:1100px){
main[data-page="part-textile"] .hero-photo .hero-sub{
max-width:none;white-space:nowrap}
}
/* Coupure de ligne reservee au mobile : sur petit ecran le pronom
restait seul en fin de ligne. Le
est neutralise au-dessus
de 900px, ou le sous-titre tient deja sur deux lignes. */
.br-mob{display:none}
@media(max-width:899px){.br-mob{display:inline}}
/* Hero textile : on garde le bas de la photo (trace de la shampouineuse) */
.hero-photo .hp-bg.sv-hero{background-position:center 92%}
@media(max-width:899px){.hero-photo .hp-bg.sv-hero{background-position:38% 92%}}
/* Bloc d'accroche urine de chat (accueil + pages canapé par ville) */
.promo-chat{padding:32px 0 4px}
.pc-box{display:flex;align-items:center;gap:26px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:26px 30px;box-shadow:var(--shadow-sm)}
.pc-ic{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(201,162,39,.12);color:var(--gold-deep)}
.pc-ic svg{width:29px;height:29px}
.pc-txt{flex:1;min-width:0}
.pc-txt h2{font-family:var(--disp);font-size:21px;line-height:1.25;margin:0 0 8px}
.pc-txt p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0}
.pc-act{flex:none;display:flex;flex-direction:column;gap:8px}
.pc-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#25D366;color:#0b2e18;border:1.5px solid #25D366;min-height:52px;padding:14px 24px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.pc-wa:hover{background:#1fbb59;border-color:#1fbb59;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(37,211,102,.6)}
.pc-wa svg{width:19px;height:19px;flex:none}
.pc-note{font-size:12.5px;color:var(--ink-soft);text-align:center;margin:0}
@media(max-width:900px){.pc-box{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 22px}.pc-act{width:100%}.pc-wa{width:100%}}
@media(max-width:560px){.promo-chat{padding:24px 0 2px}.pc-txt h2{font-size:19px}.pc-txt p{font-size:15px}.pc-ic{width:50px;height:50px}.pc-ic svg{width:26px;height:26px}}
@media(max-width:400px){.pc-wa{white-space:normal;line-height:1.3;padding:13px 16px;font-size:14.5px}}
/* Hero des pages matelas (hub + pages par ville) */
.hero-photo .hp-bg.sv-hero.sv-hero-matelas{background-image:url("/img/hero-matelas-mob.webp");background-position:40% 75%}
@media(min-width:900px){.hero-photo .hp-bg.sv-hero.sv-hero-matelas{background-image:url("/img/hero-matelas-pc.webp");background-position:center 80%}}
/* Hero des pages moquette (hub + pages par ville) */
.hero-photo .hp-bg.sv-hero.sv-hero-moquette{background-image:url("/img/hero-moquette-mob.webp");background-position:35% 75%}
@media(min-width:900px){.hero-photo .hp-bg.sv-hero.sv-hero-moquette{background-image:url("/img/hero-moquette-pc.webp");background-position:center 78%}}
/* Nouveau logo (image) */
img.lg-mark{width:auto;max-width:none;object-fit:contain}
.f-logo img.lg-inv{filter:invert(1)}