/* BiTes en Place (BTP) — design system.
   Registre chantier/voirie : jaune sécurité + béton + inox. OKLCH, neutres teintés. */

:root{
  --jaune:      oklch(0.82 0.15 92);      /* jaune sécurité, hue de marque */
  --jaune-deep: oklch(0.70 0.15 88);
  --ink:        oklch(0.26 0.02 260);     /* anthracite bleuté */
  --ink-soft:   oklch(0.38 0.015 260);
  --beton:      oklch(0.72 0.008 250);    /* gris béton */
  --paper:      oklch(0.96 0.012 95);     /* kraft clair */
  --paper-2:    oklch(0.93 0.016 95);
  --inox:       oklch(0.85 0.008 250);
  --line:       oklch(0.86 0.01 250);
  --rouge:      oklch(0.58 0.17 32);
  --white:      oklch(0.99 0.004 95);

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  --r: 14px; --r-sm: 9px;
  --shadow: 0 18px 44px -22px oklch(0.26 0.02 260 / 0.42);
  --shadow-sm: 0 6px 18px -12px oklch(0.26 0.02 260 / 0.4);
  --wrap: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body{overflow-x:hidden; max-width:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; position:relative; width:100%;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); line-height:1.05; letter-spacing:-0.02em; margin:0}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.hl{color:var(--jaune-deep)}
em{font-style:italic}

.eyebrow, .section__num, .logos__label, .tiers__label, .config__fine{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:.8rem 1.35rem; border-radius:var(--r-sm); border:2px solid var(--ink);
  cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  background:transparent; color:var(--ink);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--solid{background:var(--jaune); border-color:var(--ink); box-shadow:var(--shadow-sm)}
.btn--solid:hover{background:var(--jaune-deep)}
.btn--ghost{background:var(--white)}
.btn--wide{width:100%}
.btn--big{padding:1.05rem 2.1rem; font-size:1.12rem}

/* MARQUEE */
.marquee{background:var(--ink); color:var(--jaune); overflow:hidden; border-bottom:3px solid var(--jaune)}
.marquee__track{
  display:inline-flex; align-items:center; gap:1.1rem; white-space:nowrap;
  padding:.5rem 0; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em;
  animation:scroll 34s linear infinite; will-change:transform;
}
.marquee .dot{opacity:.55; font-size:.6rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.4rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:oklch(0.96 0.012 95 / 0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700}
.brand__crest{display:inline-flex; box-shadow:var(--shadow-sm); border-radius:8px}
.brand__word{display:flex; flex-direction:column; line-height:1; font-size:1.12rem}
.brand__word small{font-family:var(--font-mono); font-weight:400; font-size:.56rem; letter-spacing:.28em; color:var(--ink-soft); margin-top:3px}
.site-nav{display:flex; gap:1.3rem; margin-left:auto; font-family:var(--font-display); font-weight:500; font-size:.95rem}
.site-nav a{padding:.3rem 0; border-bottom:2px solid transparent; transition:border-color .15s}
.site-nav a:hover{border-color:var(--jaune)}
.chantier-btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600;
  background:var(--ink); color:var(--white); border:0; border-radius:999px; padding:.55rem .95rem; cursor:pointer;
}
.chantier-btn__count{background:var(--jaune); color:var(--ink); border-radius:999px; min-width:1.4rem; height:1.4rem; display:grid; place-items:center; font-size:.8rem; font-family:var(--font-mono)}
@media(max-width:820px){.site-nav{display:none}}

/* HERO */
.hero{position:relative; overflow:hidden; background:
  repeating-linear-gradient(135deg, transparent 0 22px, oklch(0.82 0.15 92 / 0.05) 22px 44px), var(--paper-2);
  border-bottom:1px solid var(--line)}
.hero__grain{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(oklch(0.26 0.02 260 / 0.05) 1px, transparent 1px); background-size:5px 5px}
.hero__inner{position:relative; max-width:var(--wrap); margin:0 auto; padding:clamp(2.4rem,6vw,5rem) clamp(1rem,4vw,2.4rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem); font-weight:700; margin:.7rem 0 1.1rem}
.hero__lede{font-size:1.12rem; max-width:34ch; color:var(--ink-soft)}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.4rem 0 1.2rem}
.hero__ticks{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:1rem;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft)}
.hero__ticks li{position:relative; padding-left:1.1rem}
.hero__ticks li::before{content:"✓"; position:absolute; left:0; color:var(--jaune-deep); font-weight:700}
.hero__stage{position:relative; min-height:360px; display:grid; place-items:center}
.hero__borne{width:100%; max-width:340px}
.hero__img{width:100%; max-width:340px; aspect-ratio:4/5; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); border:3px solid var(--white)}
.callout{position:absolute; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em;
  background:var(--white); border:1.5px solid var(--ink); border-radius:999px; padding:.3rem .7rem; box-shadow:var(--shadow-sm)}
.callout--a{top:12%; left:-2%}
.callout--b{top:40%; right:-4%}
.callout--c{bottom:24%; left:-6%}
.callout--d{top:4%; right:8%}
@media(max-width:820px){.hero__inner{grid-template-columns:1fr}.hero__stage{min-height:300px; order:-1}.callout{display:none}}

/* TRUST */
.trust{max-width:var(--wrap); margin:0 auto; padding:2.4rem clamp(1rem,4vw,2.4rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; border-bottom:1px solid var(--line)}
.trust__item{text-align:center}
.trust__item strong{display:block; font-family:var(--font-display); font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:700; color:var(--ink)}
.trust__item span{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft)}
@media(max-width:640px){.trust{grid-template-columns:repeat(2,1fr); gap:1.6rem}}

/* LOGOS */
.logos{max-width:var(--wrap); margin:0 auto; padding:2rem clamp(1rem,4vw,2.4rem); text-align:center}
.logos__label{margin-bottom:1rem}
.logos__row{display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--beton)}

/* SECTIONS */
.section{max-width:var(--wrap); margin:0 auto; padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.4rem)}
.section--dark{max-width:none; background:var(--ink); color:var(--paper)}
.section--dark .section__lede, .section--dark .section__num{color:oklch(0.82 0.02 250)}
.section--dark > *{max-width:var(--wrap); margin-left:auto; margin-right:auto}
.section__head{max-width:52ch; margin-bottom:2.6rem}
.section__num{display:block; margin-bottom:.7rem}
.section__head h2{font-size:clamp(1.7rem,3.8vw,2.7rem); font-weight:700}
.section__lede{margin-top:.9rem; font-size:1.08rem; color:var(--ink-soft)}

.grid{display:grid; gap:1.3rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

/* THREATS */
.threat{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; box-shadow:var(--shadow-sm)}
.threat__num{font-family:var(--font-mono); color:var(--jaune-deep); font-weight:700; font-size:1.1rem}
.threat h3{margin:.4rem 0 .6rem; font-size:1.3rem}
.threat__stat{font-family:var(--font-mono); font-size:.78rem; line-height:1.5; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:.8rem; margin-top:.6rem}

/* TECHGRID */
.techcard{background:oklch(0.30 0.02 260); border:1px solid oklch(0.40 0.02 260); border-radius:var(--r); padding:1.4rem}
.techcard h4{color:var(--jaune); font-size:1.1rem; margin-bottom:.5rem}
.techcard p{color:oklch(0.85 0.015 250); font-size:.96rem; margin:0}
.tiers{margin-top:2.4rem; text-align:center}
.tiers__label{margin-bottom:.9rem; color:oklch(0.82 0.02 250)}
.tiers__row{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center}
.chip{border:1.5px solid var(--jaune); color:var(--jaune); border-radius:999px; padding:.5rem 1rem; font-family:var(--font-mono); font-size:.78rem}

/* CATALOGUE */
.catalogue{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
@media(max-width:920px){.catalogue{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.catalogue{grid-template-columns:1fr}}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; cursor:pointer}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card__media{position:relative; aspect-ratio:4/5; background:
  repeating-linear-gradient(135deg, var(--paper-2) 0 14px, oklch(0.90 0.016 95) 14px 28px); display:grid; place-items:center; padding:0; overflow:hidden}
.card__media svg{height:82%; width:auto}
.card__img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.card:hover .card__img{transform:scale(1.04)}
.card__badge{position:absolute; top:.7rem; left:.7rem; background:var(--ink); color:var(--jaune); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; padding:.25rem .6rem; border-radius:999px}
.card__body{padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.card__tier{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--jaune-deep); text-transform:uppercase}
.card__name{font-size:1.22rem; font-weight:700}
.card__target{color:var(--ink-soft); font-size:.9rem; min-height:2.6em}
.card__spec{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); display:flex; gap:.7rem; flex-wrap:wrap}
.card__rating{font-size:.8rem; color:var(--ink-soft)}
.card__rating b{color:var(--jaune-deep)}
.card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.7rem}
.card__price{font-family:var(--font-display); font-weight:700; font-size:1.2rem}
.card__price .was{font-weight:400; font-size:.85rem; color:var(--ink-soft); text-decoration:line-through; margin-right:.4rem}
.card__add{border:2px solid var(--ink); background:var(--jaune); border-radius:var(--r-sm); padding:.5rem .85rem; font-family:var(--font-display); font-weight:600; cursor:pointer; font-size:.85rem}
.card__scarcity{font-family:var(--font-mono); font-size:.68rem; color:var(--rouge)}

/* BUNDLE */
.bundle{margin-top:1.6rem; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:1.8rem clamp(1.2rem,3vw,2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap}
.bundle h3{font-size:1.5rem; color:var(--jaune)}
.bundle__text p{color:oklch(0.85 0.015 250); margin:.5rem 0 0; max-width:46ch}
.bundle__price{font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin:0 0 .7rem}
.bundle__price .was{font-weight:400; font-size:.95rem; text-decoration:line-through; color:oklch(0.75 0.02 250); margin-right:.5rem}
.bundle__price small{display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--jaune)}

/* CONFIG / DEVIS */
.section--devis{background:var(--paper-2); max-width:none; border-block:1px solid var(--line)}
.section--devis > *{max-width:var(--wrap); margin-inline:auto}
.config{display:grid; grid-template-columns:1.1fr .9fr; gap:1.6rem; align-items:start}
@media(max-width:820px){.config{grid-template-columns:1fr}}
.config__form{display:grid; grid-template-columns:1fr 1fr; gap:1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem}
.config__form label{display:flex; flex-direction:column; gap:.4rem; font-family:var(--font-display); font-weight:600; font-size:.9rem}
.config__form input, .config__form select{width:100%; min-width:0; max-width:100%; font-family:var(--font-body); font-size:1rem; padding:.65rem .7rem; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink)}
@media(max-width:560px){.config__form{grid-template-columns:1fr}}
.config__form input:focus, .config__form select:focus{outline:2px solid var(--jaune); border-color:var(--jaune-deep)}
.config__quote{background:var(--ink); color:var(--paper); border-radius:var(--r); padding:1.6rem; box-shadow:var(--shadow)}
.config__density{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--jaune)}
.config__total{font-family:var(--font-display); font-weight:700; font-size:2.2rem; margin:.4rem 0}
.config__total small{display:block; font-family:var(--font-mono); font-size:.68rem; font-weight:400; color:oklch(0.82 0.02 250)}
.config__comment{color:oklch(0.88 0.015 250); min-height:3em; margin:.6rem 0 1.1rem}
.config__fine{color:oklch(0.72 0.02 250); margin-top:.7rem; text-align:center}
/* density knob */
.config__slider{grid-column:1 / -1}
.config__slider input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:linear-gradient(90deg, var(--jaune), var(--jaune-deep)); outline:none; margin-top:.2rem}
.config__slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; background:var(--ink); border:3px solid var(--jaune); cursor:pointer; box-shadow:var(--shadow-sm)}
.config__slider input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--ink); border:3px solid var(--jaune); cursor:pointer}
.config__slider input[type=range]:focus-visible{outline:2px solid var(--jaune-deep); outline-offset:3px}
.config__slider-ends{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-soft); margin-top:.4rem; text-transform:uppercase}
/* plan d'implantation */
.config__plan{position:relative; background:oklch(0.22 0.02 260); border:1px solid oklch(0.42 0.02 260); border-radius:var(--r-sm); padding:.7rem; margin-bottom:1rem}
.config__plan #cfgPlan{width:100%}
.config__plan svg{width:100%; height:auto; display:block}
.config__plan-label{position:absolute; top:.5rem; right:.6rem; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; color:oklch(0.72 0.02 250)}
/* full-bleed saturation band */
.fullbleed{position:relative; min-height:88vh; display:grid; align-items:center; overflow:hidden}
.fullbleed__img{position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--ink)}
.fullbleed::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, oklch(0.20 0.02 260 / 0.86) 0%, oklch(0.20 0.02 260 / 0.55) 60%, oklch(0.20 0.02 260 / 0.35) 100%)}
.fullbleed__inner{position:relative; z-index:2; max-width:var(--wrap); width:100%; margin:0 auto; padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,2.4rem); color:var(--paper)}
.fullbleed__inner h2{font-size:clamp(2.4rem,7vw,5rem); font-weight:700; line-height:1; margin:.6rem 0 1rem}
.fullbleed__inner p{max-width:44ch; font-size:1.12rem; color:oklch(0.9 0.015 95); margin-bottom:1.5rem}
.eyebrow--light{color:var(--jaune)}
/* proof figure */
.proof{margin:2rem 0 0}
.proof img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-sm); display:block}
.proof figcaption{font-family:var(--font-mono); font-size:.76rem; line-height:1.6; color:var(--ink-soft); margin-top:.8rem; max-width:70ch}

/* GALLERY (nos chantiers) */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
@media(max-width:760px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-sm); display:block}
.gallery figcaption{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:.7rem; padding-left:1.1rem; position:relative}
.gallery figcaption::before{content:"▸"; position:absolute; left:0; color:var(--jaune-deep)}

/* REVIEWS */
.review{background:oklch(0.30 0.02 260); border:1px solid oklch(0.40 0.02 260); border-radius:var(--r); padding:1.5rem; margin:0}
.review .stars{color:var(--jaune); letter-spacing:.1em; margin:0 0 .6rem}
.review p{color:var(--paper); font-size:1.05rem}
.review cite{font-family:var(--font-mono); font-size:.74rem; color:oklch(0.78 0.02 250); font-style:normal}

/* FAQ */
.faq{display:grid; gap:.7rem; max-width:800px}
.faq details{background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:.3rem 1.2rem}
.faq summary{font-family:var(--font-display); font-weight:600; font-size:1.05rem; padding:.9rem 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--jaune-deep); font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-soft); padding-bottom:1rem; margin:0}

/* FOUNDER */
.section--founder{background:
  repeating-linear-gradient(135deg, transparent 0 22px, oklch(0.82 0.15 92 / 0.06) 22px 44px), var(--paper)}
.founder{max-width:680px; margin:0 auto; text-align:center}
.founder h2{font-size:clamp(1.6rem,3.6vw,2.4rem); margin:.8rem 0 1.4rem; font-style:italic}
.founder p{color:var(--ink-soft); font-size:1.06rem}
.founder__sign{font-family:var(--font-mono); font-size:.82rem; color:var(--ink); margin-top:1.2rem}

/* CLOSER */
.closer{background:var(--jaune); text-align:center; padding:clamp(3rem,7vw,5rem) 1.5rem}
.closer h2{font-size:clamp(2rem,5vw,3.2rem); font-weight:700}
.closer p{font-size:1.15rem; margin:.8rem 0 1.6rem}

/* FOOTER */
.site-footer{background:var(--ink); color:oklch(0.82 0.02 250); padding:3rem clamp(1rem,4vw,2.4rem) 2rem}
.foot__grid{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:1.6rem}
.foot__brand .brand__word{color:var(--paper)}
.foot__brand .brand__word small{color:var(--jaune)}
.foot__slogan{font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--jaune); margin-top:.7rem; letter-spacing:-0.01em}
.foot__brand p{margin-top:.8rem; max-width:36ch; font-size:.92rem}
.site-footer h5{color:var(--jaune); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.8rem}
.site-footer a{display:block; padding:.28rem 0; font-size:.92rem; color:oklch(0.82 0.02 250)}
.site-footer a:hover{color:var(--jaune)}
.foot__legal{max-width:var(--wrap); margin:2.4rem auto 0; padding-top:1.6rem; border-top:1px solid oklch(0.40 0.02 260); font-family:var(--font-mono); font-size:.72rem; line-height:1.7; color:oklch(0.68 0.02 250)}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}

/* STICKY BAR */
.stickybar{position:fixed; bottom:0; left:0; right:0; z-index:35; display:flex; align-items:center; justify-content:center; gap:1.2rem;
  background:var(--ink); color:var(--paper); padding:.8rem 1.2rem; box-shadow:0 -10px 30px -18px #000; flex-wrap:wrap}
.stickybar span{font-family:var(--font-display); font-weight:600}
.stickybar .btn{padding:.55rem 1.1rem}

/* OVERLAYS */
.overlay{position:fixed; inset:0; z-index:60; background:oklch(0.26 0.02 260 / 0.55); backdrop-filter:blur(3px); display:flex}
.overlay[hidden]{display:none}
.drawer{margin-left:auto; width:min(420px,100%); height:100%; background:var(--paper); display:flex; flex-direction:column; box-shadow:var(--shadow); animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(30px); opacity:.6}to{transform:none; opacity:1}}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line)}
.drawer__body{flex:1; overflow:auto; padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.9rem}
.drawer__foot{padding:1.2rem 1.4rem; border-top:1px solid var(--line)}
.drawer__total{display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:.9rem}
.drawer__fine, .config__fine{text-align:center; margin-top:.6rem}
.line{display:flex; gap:.9rem; align-items:center}
.line__thumb{width:52px; height:64px; border-radius:var(--r-sm); background:var(--paper-2); display:grid; place-items:center; flex-shrink:0}
.line__thumb svg{height:52px}
.line__info{flex:1}
.line__info strong{font-family:var(--font-display)}
.line__info span{display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft)}
.line__qty{display:flex; align-items:center; gap:.5rem}
.line__qty button{width:26px; height:26px; border:1.5px solid var(--line); background:var(--white); border-radius:6px; cursor:pointer; font-family:var(--font-mono)}
.line__rm{background:none; border:0; color:var(--rouge); cursor:pointer; font-family:var(--font-mono); font-size:.72rem}
.empty{color:var(--ink-soft); text-align:center; padding:2rem 0}
.x{background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--ink)}
.x--float{position:absolute; top:.8rem; right:1rem; z-index:2}

.modal{margin:auto; background:var(--paper); border-radius:var(--r); max-width:820px; width:calc(100% - 2rem); max-height:calc(100% - 2rem); overflow:auto; position:relative; box-shadow:var(--shadow)}
.modal--reveal{max-width:560px}
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:0}
@media(max-width:680px){.pdp{grid-template-columns:1fr}}
.pdp__media{background:var(--paper-2); display:grid; place-items:center; overflow:hidden}
.pdp__media svg{height:280px}
.pdp__media img{width:100%; height:100%; object-fit:cover; min-height:320px}
.pdp__info{padding:2rem}
.pdp__info h3{font-size:1.7rem}
.pdp__tier{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--jaune-deep); text-transform:uppercase}
.pdp__price{font-family:var(--font-display); font-weight:700; font-size:1.6rem; margin:.6rem 0}
.pdp__price .was{font-weight:400; font-size:1rem; text-decoration:line-through; color:var(--ink-soft); margin-right:.5rem}
.pdp__specs{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.5rem}
.pdp__specs li{font-family:var(--font-mono); font-size:.8rem; padding-left:1.2rem; position:relative; color:var(--ink-soft)}
.pdp__specs li::before{content:"▸"; position:absolute; left:0; color:var(--jaune-deep)}
.pdp__table{width:100%; border-collapse:collapse; margin:1rem 0; font-family:var(--font-mono); font-size:.8rem}
.pdp__table td{border-top:1px solid var(--line); padding:.5rem 0}
.pdp__table td:last-child{text-align:right; font-weight:700}

/* REVEAL MODAL */
.reveal-modal{padding:2.4rem 2rem; text-align:center}
.reveal-modal h3{font-size:1.8rem; margin-bottom:.8rem}
.reveal-modal p{color:var(--ink-soft)}
.reveal-modal .price-vote{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:1.2rem 0}
.reveal-modal .vote{border:1.5px solid var(--line); background:var(--white); border-radius:999px; padding:.5rem .95rem; cursor:pointer; font-family:var(--font-mono); font-size:.82rem}
.reveal-modal .vote[aria-pressed="true"]{border-color:var(--jaune-deep); background:var(--jaune)}
.reveal-modal form{display:grid; gap:.7rem; margin-top:1rem; text-align:left}
.reveal-modal input[type=email]{padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:1rem; font-family:var(--font-body)}
.consent{display:flex; gap:.55rem; align-items:flex-start; font-size:.82rem; color:var(--ink-soft); font-family:var(--font-body)}
.consent input{margin-top:.2rem}
.form-msg{font-family:var(--font-mono); font-size:.78rem; min-height:1.2em}
.form-msg.err{color:var(--rouge)}
.form-msg.ok{color:oklch(0.55 0.13 150)}

/* TOAST */
.toast{position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--ink); color:var(--paper); padding:.75rem 1.2rem; border-radius:999px; box-shadow:var(--shadow); font-family:var(--font-display); font-weight:600; font-size:.92rem}
.toast[hidden]{display:none}

/* REVEAL ANIM */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}