/* ============================================================
   ALUBELLE — boutique moustiquaires plissées sur mesure
   Palette : pierre de Provence / anthracite / cyprès / laiton
   ============================================================ */

:root{
  --ground:#F3F3EF; --surface:#FFFFFF; --surface-2:#E9E9E2;
  --ink:#1A1D19; --ink-2:#4E544C; --ink-3:#7C8279;
  --line:#DBDBD2; --line-strong:#C3C4B8;
  --accent:#3F7018; --accent-2:#4E8A1E; --accent-ink:#FFFFFF; --accent-soft:#E7F0DC;
  --brass:#9C6425; --alu:#9AA0A0;
  --danger:#B3261E;
  --shadow:0 1px 2px rgba(26,29,25,.05), 0 8px 24px -12px rgba(26,29,25,.18);
  --shadow-lift:0 2px 4px rgba(26,29,25,.06), 0 20px 44px -18px rgba(26,29,25,.3);
  --max:1180px;
  --pleat:rgba(26,29,25,.07);
  --photo-bg:#F0F0EC;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,h4{
  font-family:"Archivo","Archivo Expanded",Arial,sans-serif;
  font-stretch:112%;font-weight:700;line-height:1.08;
  letter-spacing:-.018em;text-wrap:balance;margin:0;
}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:500;
}

/* ---------- barre d'annonce ---------- */
.topbar{
  background:var(--accent);color:var(--accent-ink);font-size:13px;text-align:center;
  padding:7px 20px;padding-top:calc(7px + env(safe-area-inset-top,0px));
}
.topbar b{font-weight:600}
.topbar span{opacity:.72;padding:0 8px}

/* ---------- header ---------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.navrow{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-img{display:block;height:46px;width:auto}
.logo-img.foot{height:86px;margin-bottom:4px}
.on-dark,.on-dark-inv{display:none}
.logo-mark{width:30px;height:30px;border-radius:5px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.logo-txt{font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;font-size:18px;letter-spacing:.02em}
.logo-sub{display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.2em;color:var(--ink-3);font-weight:400;text-transform:uppercase;margin-top:-2px}
nav{display:flex;gap:22px;margin-left:auto;align-items:center}
nav a{font-size:14.5px;text-decoration:none;color:var(--ink-2);white-space:nowrap}
nav a:hover{color:var(--accent)}
.cart-btn{display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--ground);border:0;border-radius:7px;padding:9px 14px;font-size:14px;font-weight:500;flex-shrink:0}
.cart-btn .count{background:var(--brass);color:#fff;border-radius:99px;min-width:19px;height:19px;font-size:11.5px;font-weight:600;display:grid;place-items:center;padding:0 5px}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:7px;padding:8px 10px;margin-left:auto}
@media (max-width:920px){
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;box-shadow:var(--shadow)}
  nav.open{display:flex}
  nav a{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
  .burger{display:block}
  .navrow{gap:12px}
}

/* ---------- hero ---------- */
.hero{padding-block:52px 34px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,var(--pleat) 9px 10px);
  -webkit-mask-image:linear-gradient(190deg,rgba(0,0,0,.55),transparent 62%);
  mask-image:linear-gradient(190deg,rgba(0,0,0,.55),transparent 62%);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 430px;gap:48px;align-items:start}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero{padding-block:34px 24px}}
h1{font-size:clamp(34px,5.4vw,56px);margin-top:14px}
.hero .lede{font-size:17.5px;color:var(--ink-2);max-width:46ch;margin-top:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:8px;padding:13px 22px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .12s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.trust{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:30px;list-style:none;padding:0}
.trust li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 13px 6px 10px}
.trust svg{flex-shrink:0;color:var(--accent)}

/* ---------- bande manoeuvre ---------- */
.demo{padding-bottom:16px}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:700px){.demo-grid{grid-template-columns:1fr}}
.demo figure{margin:0}
.demo .ph{background:var(--photo-bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1/1}
.demo img{display:block;width:100%;height:100%;object-fit:cover}
.demo figcaption{margin-top:9px;font-size:13px;color:var(--ink-2)}
.demo figcaption b{display:block;font-size:14.5px;color:var(--ink);font-weight:600}

/* ---------- configurateur ---------- */
.config{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden}
.config-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.config-head h2{font-size:18px}
.config-head .ref{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.config-body{padding:20px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
label.lb,span.lb{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
select,input[type=text],input[type=tel],input[type=email],input[type=number],textarea{
  width:100%;background:var(--ground);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:8px;padding:11px 12px;font:inherit;font-size:15px;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{resize:vertical;min-height:84px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dim-wrap{position:relative}
.dim-wrap .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);pointer-events:none}
.dim-wrap input{padding-right:40px;font-family:"IBM Plex Mono",monospace}
.hint{font-size:12px;color:var(--ink-3);margin-top:7px}
.err{font-size:12.5px;color:var(--danger);margin-top:7px}

.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{border:1px solid var(--line-strong);background:var(--ground);border-radius:8px;padding:5px 10px 5px 5px;display:flex;align-items:center;gap:7px;font-size:12.5px}
.sw:hover{border-color:var(--accent)}
.sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:var(--surface)}
.sw i{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.15);display:block;flex-shrink:0}
.sw i.multi{background:conic-gradient(#C8102E,#E8A33D,#2F5237,#1F4E79,#6B3FA0,#C8102E)}
.sw .ral{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}

.opts{display:grid;gap:8px}
.opt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--ground);cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input{margin:4px 0 0;accent-color:var(--accent);flex-shrink:0}
.opt .ot{font-size:14px;font-weight:500;line-height:1.35}
.opt .od{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.opt .op{margin-left:auto;font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

.price-bar{border-top:1px solid var(--line);background:var(--surface-2);padding:16px 20px}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px}
.price-row .pl{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.price-row .pl b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.price-val{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-note{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}

/* ---------- sections ---------- */
section{padding-block:60px}
.sec-head{max-width:60ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(25px,3.4vw,36px);margin-top:10px}
.sec-head p{color:var(--ink-2);margin-top:12px;font-size:16.5px}
.alt{background:var(--surface);border-block:1px solid var(--line)}

/* ---------- modèles ---------- */
.gamme + .gamme{margin-top:46px}
.gamme-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
.gamme-head h3{font-size:19px}
.gamme-head p{font-size:13.5px;color:var(--ink-3);flex:1;min-width:260px}
/* auto-fill (et non auto-fit) : une rangée de deux cartes garde la largeur
   d'une rangée de quatre, au lieu de s'étirer sur toute la page. Toutes les
   vignettes du catalogue ont ainsi la même taille d'une section à l'autre. */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:18px}
.model{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease}
.alt .model{background:var(--ground)}
.model:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.model .ph{background:var(--photo-bg);aspect-ratio:1/1;position:relative;overflow:hidden;
  flex:none;border-bottom:1px solid var(--line)}
.model .ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.states{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:5px;justify-content:center}
.states button{
  flex:1;background:rgba(255,255,255,.88);color:#1A1D19;border:1px solid rgba(26,29,25,.1);
  border-radius:6px;padding:6px 4px;font-size:11.5px;font-weight:600;backdrop-filter:blur(6px);
}
.states button[aria-pressed="true"]{background:#3F7018;color:#fff;border-color:#3F7018}
.model-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.model h3{font-size:17px}
.model .desc{font-size:13.5px;color:var(--ink-2);flex:1}
.model .spec{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);border-top:1px dashed var(--line-strong);padding-top:9px}
.model .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.model .from{font-size:12px;color:var(--ink-3);line-height:1.2}
.model .from b{display:block;font-size:19px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;font-family:"Archivo",sans-serif}
.model .foot button{background:var(--accent-soft);color:var(--accent);border:1px solid transparent;border-radius:7px;padding:9px 14px;font-size:13.5px;font-weight:600}
.model .foot button:hover{background:var(--accent);color:var(--accent-ink)}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;counter-reset:s}
.step{position:relative;padding-left:52px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:var(--accent);width:38px;height:38px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-2)}

/* ---------- sélecteur de modèle ---------- */
.mpick{display:grid;gap:4px}
.mrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.gtitre{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 4px}
.gtitre:first-child{margin-top:0}

.mcard{background:var(--ground);border:1px solid var(--line-strong);border-radius:9px;padding:5px 5px 7px;display:flex;flex-direction:column;gap:4px;text-align:center;overflow:hidden}
.mcard:hover{border-color:var(--accent)}
.mcard[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:var(--surface)}
.mth{position:relative;display:block;background:var(--photo-bg);border-radius:5px;overflow:hidden;aspect-ratio:1/1}
.mth img{width:100%;height:100%;object-fit:cover;display:block}
.arw{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;pointer-events:none}
.arw.vert{top:0;bottom:0;align-items:center}
.arw svg{width:74%;height:auto;fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.arw.vert svg{width:auto;height:70%}
.mnm{font-size:11.5px;font-weight:600;line-height:1.2}
.mdr{font-size:9.5px;color:var(--ink-3);line-height:1.2}

/* ---------- documents PDF ---------- */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:38px}
.doc{display:flex;gap:13px;align-items:flex-start;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 16px 16px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.doc:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.doc-ic{color:var(--accent);flex-shrink:0;margin-top:1px}
.doc b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.doc span span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}

/* ---------- arguments ---------- */
.args{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.arg{background:var(--ground);padding:22px 20px}
.alt .arg{background:var(--surface)}
.arg svg{color:var(--accent);margin-bottom:12px;display:block}
.arg h3{font-size:15.5px;margin-bottom:6px}
.arg p{font-size:14px;color:var(--ink-2)}

/* ---------- zone ---------- */
.zone{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:820px){.zone{grid-template-columns:1fr;gap:26px}}
.zone-list{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:20px 0 0}
.zone-list li{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 11px;color:var(--ink-2)}
.alt .zone-list li{background:var(--ground)}
.zone-list li:has(a){padding:0}
.zone-list a{display:block;padding:5px 11px;color:inherit;text-decoration:none;border-radius:6px}
.zone-list a:hover{color:var(--accent);background:var(--accent-soft)}
.pledge{background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:26px 24px}
.pledge h3{font-size:20px;margin-bottom:10px}
.pledge p{font-size:14.5px;opacity:.88}
.pledge dl{margin:18px 0 0;display:grid;gap:12px}
.pledge dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pledge dd{margin:2px 0 0;font-size:15px;font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;font-size:16px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:25px;width:9px;height:9px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s ease}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 0 18px;color:var(--ink-2);font-size:15px;max-width:66ch}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:28px}}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.alt .ccard{background:var(--ground)}
.ccard .line{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.ccard .line:last-child{border-bottom:0;padding-bottom:0}
.ccard .line svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.ccard .line .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.ccard .line .v{font-size:15.5px;font-weight:500;text-decoration:none}
.ccard .line a.v:hover{color:var(--accent)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--ground);padding-block:44px 28px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media (max-width:760px){footer .fgrid{grid-template-columns:1fr;gap:26px}}
footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:12px;font-stretch:100%;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{color:inherit;text-decoration:none;opacity:.8;font-size:14.5px}
footer a:hover{opacity:1;text-decoration:underline}
footer .about{font-size:14.5px;opacity:.72;max-width:38ch;margin-top:12px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;opacity:.6}

/* ---------- panier ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,12,10,.5);z-index:90;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:100;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow-lift)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);padding-top:calc(18px + env(safe-area-inset-top,0px))}
.drawer-head h2{font-size:18px}
.x{background:none;border:1px solid var(--line-strong);border-radius:7px;width:34px;height:34px;display:grid;place-items:center;font-size:17px;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.drawer-foot{border-top:1px solid var(--line);padding:18px 20px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--surface-2)}
.empty{text-align:center;color:var(--ink-3);padding:48px 12px;font-size:14.5px}
.li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.li:first-child{padding-top:0}
.li-thumb{width:58px;height:58px;border-radius:7px;border:1px solid var(--line);flex-shrink:0;background:var(--photo-bg);overflow:hidden}
.li-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.li-main{flex:1;min-width:0}
.li-main .t{font-size:14.5px;font-weight:600;line-height:1.3}
.li-main .d{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.5;word-break:break-word}
.li-main .rm{background:none;border:0;padding:4px 0 0;font-size:12.5px;color:var(--ink-3);text-decoration:underline}
.li-main .rm:hover{color:var(--danger)}
.li-price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}
.pose-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;background:var(--surface);cursor:pointer;margin-bottom:8px}
.pose-box:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pose-box input{margin:0;accent-color:var(--accent);flex-shrink:0;width:18px;height:18px}
.pb-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.pose-box .ot{font-size:14px;font-weight:600;line-height:1.25}
.pose-box .od{font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:1px}
.pose-box .op{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
/* Sur téléphone le pied du panier mangeait les deux tiers de l'écran :
   la précision tient sur une ligne, et ne se déplie qu'une fois l'option cochée,
   c'est-à-dire au moment où elle compte vraiment. */
@media (max-width:560px){
  .pose-box .od{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pose-box:has(input:checked) .od{white-space:normal;overflow:visible}
  .drawer-foot{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .tot{margin-bottom:3px;font-size:13.5px}
  .tot.grand{margin-bottom:10px}
  .drawer-foot .price-note{font-size:11.5px;line-height:1.35;margin-top:8px}
}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:14px;color:var(--ink-2)}
.tot.grand{font-size:17px;color:var(--ink);font-weight:700;margin-bottom:14px}
.tot.grand span:last-child{font-size:24px;font-family:"Archivo",sans-serif;font-stretch:112%;font-variant-numeric:tabular-nums}

/* ---------- commande ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;overflow-y:auto}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;width:min(620px,100%);box-shadow:var(--shadow-lift);margin:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:20px}
.modal-body{padding:22px 24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.recap{background:var(--ground);border:1px solid var(--line);border-radius:9px;padding:14px;font-family:"IBM Plex Mono",monospace;font-size:12px;white-space:pre-wrap;max-height:220px;overflow:auto;color:var(--ink-2);line-height:1.55}
.send-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
@media (max-width:560px){.send-row{grid-template-columns:1fr}}
.btn-wa{background:#1FA855;color:#fff}
.btn-wa:hover{background:#188C46}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:200;background:var(--ink);color:var(--ground);padding:11px 20px;border-radius:99px;font-size:14px;box-shadow:var(--shadow-lift)}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:pop .22s ease}
  @keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}
}

/* ---------- site unifié ---------- */
[hidden]{display:none!important}
.zhero{display:grid;grid-template-columns:1fr 430px;gap:44px;align-items:stretch;position:relative}
@media (max-width:980px){.zhero{grid-template-columns:1fr;gap:28px}}

/* aperçu du modèle choisi */
.preview{position:sticky;top:96px}
.pv-mini{display:none}
.pv-mini[hidden]{display:none!important}
@media (max-width:980px){
  .pv-mini{position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 64px);
    z-index:55;display:flex;align-items:center;gap:10px;background:var(--surface);
    border:1px solid var(--line-strong);border-radius:10px;padding:7px 10px;
    box-shadow:var(--shadow-lift);cursor:pointer}
  .pv-mini img{width:46px;height:46px;object-fit:cover;border-radius:7px;
    background:var(--photo-bg);flex:none}
  .pm-t{display:flex;flex-direction:column;min-width:0;flex:1}
  .pm-t b{font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pm-t span{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pm-go{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap;flex:none}
}
@media (max-width:980px){.preview{position:static}}
.pv-frame{background:var(--photo-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.pv-img{aspect-ratio:1/1;position:relative;background:var(--photo-bg)}
.pv-img img{width:100%;height:100%;object-fit:cover;display:block}
.pv-img .states{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:6px;justify-content:center}
.pv-img .states button{flex:1;background:rgba(255,255,255,.9);color:#1A1D19;border:1px solid rgba(26,29,25,.1);border-radius:7px;padding:8px 4px;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.pv-img .states button[aria-pressed="true"]{background:#3F7018;color:#fff;border-color:#3F7018}
.pv-cap{padding:14px 16px;border-top:1px solid var(--line);background:var(--surface);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pv-cap b{font-size:15.5px;font-weight:600;font-family:"Archivo",sans-serif}
.pv-cap span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.pv-specs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 14px;background:var(--surface);border-top:1px solid var(--line)}
.pv-specs em{font-style:normal;font-size:12px;color:var(--ink-2);background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:4px 9px}

/* segments */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px}
.seg button{background:var(--ground);border:1px solid var(--line-strong);border-radius:8px;padding:9px 8px;font-size:13.5px;font-weight:600;line-height:1.25}
.seg button span{display:block;font-size:11px;font-weight:400;color:var(--ink-3)}
.seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft);color:var(--accent)}
.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}
.fam button{background:var(--ground);border:1px solid var(--line-strong);border-radius:9px;padding:10px 6px;font-size:13px;font-weight:600;line-height:1.2;text-align:center}
.fam button span{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3);margin-top:2px}
.fam button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.fam button[aria-pressed="true"] span{color:rgba(255,255,255,.75)}

.coul{display:flex;flex-wrap:wrap;gap:7px}
.coul button{border:1px solid var(--line-strong);background:var(--ground);border-radius:8px;padding:4px 10px 4px 4px;display:flex;align-items:center;gap:7px;font-size:12px}
.coul button i{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.18);display:block;flex-shrink:0}
.coul button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:var(--surface)}

.warn{display:flex;gap:9px;align-items:flex-start;background:color-mix(in srgb,var(--brass) 12%,transparent);border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);margin-top:10px}
.warn b{color:var(--ink)}
.warn svg{flex-shrink:0;color:var(--brass);margin-top:1px}

/* familles dans le catalogue */
.famsec{padding-block:56px}
.famsec + .famsec{border-top:1px solid var(--line)}
.gamme + .gamme{margin-top:44px}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.tbl th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-weight:500}
.tbl td:last-child,.tbl th:last-child{text-align:right}

/* ---------- libellés des deux cotes ---------- */
.dimfield{min-width:0}
.dimlb{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px;
  text-transform:none;letter-spacing:0}

/* ---------- nuancier photo des toiles ZIP ---------- */
.coul:has(.nuancier){display:block}
.nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;width:100%;flex:1 1 100%}
.nuancier button{padding:0;border:2px solid var(--line-strong);border-radius:10px;background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column;text-align:center;cursor:pointer}
.nuancier button:hover{border-color:var(--accent)}
.nuancier button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nuancier img{display:block;width:100%;height:76px;object-fit:cover}
.nuancier span{display:block;line-height:1.25}
.nuancier .tnm{font-size:12px;font-weight:600;color:var(--ink);padding:6px 3px 0}
.nuancier .tref{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);padding:0 3px 6px}
.nuancier button[aria-pressed="true"] .tnm{color:var(--accent)}
.nuancier button[aria-pressed="true"] .tref{color:var(--ink-2)}
@media (max-width:560px){.nuancier{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.nuancier img{height:64px}}

.pv-toile{display:flex;gap:14px;align-items:center;padding:12px 16px 14px;background:var(--surface);border-top:1px solid var(--line)}
.pv-toile img{width:112px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line-strong);flex-shrink:0}
.pv-toile span{font-size:13px;color:var(--ink-3);line-height:1.35}
.pv-toile b{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--ink);font-weight:600}
.zipcard .mth{aspect-ratio:4/3}
.zipcard .mth img{object-fit:contain;padding:4px}

/* ---------- bloc « être rappelé » (lisible, gros boutons) ---------- */
.rappel{background:var(--surface);border:2px solid var(--accent);border-radius:14px;padding:26px 24px;margin-bottom:34px;box-shadow:var(--shadow)}
.rappel h3{font-size:clamp(20px,2.6vw,25px);margin-bottom:8px}
.rappel .intro{font-size:17px;color:var(--ink-2);max-width:56ch}
.rappel-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;align-items:start}
@media (max-width:760px){.rappel-grid{grid-template-columns:1fr;gap:22px}}
.tel-big{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:var(--accent-ink);
  border-radius:12px;padding:20px 18px;text-decoration:none;font-family:"Archivo",sans-serif;font-stretch:112%;
  font-weight:800;font-size:clamp(24px,4vw,30px);letter-spacing:.01em;min-height:64px;line-height:1}
.tel-big:hover{background:var(--accent-2)}
.tel-big svg{flex-shrink:0}
.tel-sub{text-align:center;font-size:15px;color:var(--ink-2);margin-top:10px}
.rappel form{display:grid;gap:12px}
.rappel .lb{font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600;margin-bottom:6px}
.rappel input,.rappel select{font-size:17px;padding:14px 14px;min-height:54px;background:var(--surface);border-color:var(--line-strong)}
.rappel .btn{min-height:58px;font-size:17px}
.creneaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.creneaux button{background:var(--ground);border:1px solid var(--line-strong);border-radius:9px;padding:13px 8px;
  font-size:15px;font-weight:600;min-height:52px}
.creneaux button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.rassure{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.rassure li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2);line-height:1.45}
.rassure li::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:7px;
  border-left:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);transform:rotate(-45deg)}
.rassure b{color:var(--ink);font-weight:600}
.rappel .ok{display:flex;gap:11px;align-items:flex-start;background:var(--accent-soft);border:1px solid var(--accent-2);
  border-radius:10px;padding:16px 18px;font-size:16px;color:var(--ink)}

/* ---------- barre d'appel fixe sur mobile ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:13px 8px;
    min-height:52px;font-size:16px;font-weight:600;text-decoration:none;line-height:1.1}
  .callbar .c1{background:var(--accent);color:var(--accent-ink)}
  .callbar .c2{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
  body{padding-bottom:78px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}

/* ---------- confort de lecture sur petit écran ---------- */
@media (max-width:560px){
  .config-body{padding:16px}
  .dims{gap:10px}
  input,select,textarea{font-size:16px}   /* évite le zoom auto iOS */
  .btn{min-height:50px}
  .price-val{font-size:30px}
  .mrow{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .fam button{padding:12px 6px}
  .states button,.pv-img .states button{min-height:40px;font-size:12.5px}
}

/* ---------- pages séparées ---------- */
.pagehead{padding-block:40px 6px}
.pagehead h1{font-size:clamp(30px,5vw,48px);margin-top:12px}
.pagehead .lede{font-size:17.5px;color:var(--ink-2);max-width:60ch;margin-top:16px}
.bread{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.bread a{color:var(--ink-3);text-decoration:none}
.bread a:hover{color:var(--accent)}
nav a.on{color:var(--accent);font-weight:600}
.gammes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}
.gcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.gcard:hover{border-color:var(--accent);box-shadow:var(--shadow)}
/* L'image est calée en absolu dans un cadre 4/3 : quelle que soit la forme
   du fichier (carré, vertical…), les trois cartes gardent la même hauteur. */
.gcard .ph{aspect-ratio:4/3;background:var(--photo-bg);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;flex:none}
.gcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gcard .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard h2{font-size:20px}
.gcard p{font-size:14.5px;color:var(--ink-2);flex:1}
.gcard .go{font-size:14.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:7px}
.herosimple{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media (max-width:900px){.herosimple{grid-template-columns:1fr;gap:26px}}
.herosimple .shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--photo-bg);box-shadow:var(--shadow-lift)}
.herosimple .shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.cta-band{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:30px 28px;
  display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;margin-block:10px 0}
.cta-band h2{font-size:clamp(21px,3vw,27px)}
.cta-band p{font-size:15.5px;opacity:.9;margin-top:6px;max-width:48ch}
.cta-band .btn{background:var(--surface);color:var(--ink)}
.cta-band .btn:hover{background:var(--ground)}

/* ------------------- note Google, dans la barre du haut -------------------
   Alimentée par assets/avis.js. Tant que la fiche n'a pas répondu, l'élément
   reste caché : la barre garde exactement son allure actuelle.            */
.gnote{display:none}
.gnote.on{display:inline-flex;align-items:center;gap:7px;margin-left:12px;
  color:inherit;text-decoration:none;font-weight:600;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent-ink) 42%,transparent);
  border-radius:999px;padding:2px 11px;vertical-align:middle}
.gnote:hover{background:color-mix(in srgb,var(--accent-ink) 14%,transparent)}
.topbar .gnote span{opacity:1;padding:0}
.gnote .gst{display:inline-flex;gap:1px;line-height:0}
.gnote .gst svg{fill:currentColor}
.gnote .gst svg.off{opacity:.34}
@media (max-width:560px){
  .gnote.on{display:flex;margin:5px auto 0;width:max-content}
}

/* Accueil : le sur-titre est DANS le H1, pour que le titre principal de la page
   dise ce que vend le site (« Ouvrez grand » seul ne contient aucun mot-clé).
   À l'écran, rien ne change. */
.h1-home{margin-top:0}
.h1-home .h1-kw{display:block;margin:0 0 14px;font-size:11.5px;line-height:1.5;
  letter-spacing:.16em;font-stretch:100%;text-wrap:wrap}

/* ------------------------------------------------------------ avis clients */
.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;margin-top:28px}
.av-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 17px;display:flex;flex-direction:column;gap:12px}
.av-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.av-stars{display:flex;gap:2px;line-height:0}
.av-stars svg.on{fill:#E0A11B}
.av-stars svg.off{fill:var(--line-strong)}
.av-src{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:var(--ground);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.av-src-nous{opacity:.72}
.av-card blockquote{margin:0;flex:1}
.av-card blockquote p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}
.av-card blockquote p::before{content:"\201C"}
.av-card blockquote p::after{content:"\201D"}
.av-trad{margin:0;font-size:12px;color:var(--ink-3);font-style:italic}
.av-card figcaption{display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line);padding-top:13px}
.av-face{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--ground);border:1px solid var(--line)}
.av-ini{display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:15px;color:var(--ink-3)}
.av-qui{display:flex;flex-direction:column;min-width:0;flex:1}
.av-qui b{font-size:14.5px;color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-qui span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.av-lien{font-size:12.5px;color:var(--accent);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;padding:6px 10px;flex:none}
.av-lien:hover{border-color:var(--accent);background:var(--accent-soft)}
.av-pied{margin-top:20px;text-align:center}
.av-tous{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:var(--accent);text-decoration:none;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:9px;padding:13px 22px;min-height:48px}
.av-tous:hover{border-color:var(--accent);background:var(--accent-soft)}