/* Hallmark · macrostructure: Boutique grand public (hero photo + barre de chiffres + tuiles catégories + grille produits) · tone: énergique, accessible
 * studied: yes · DNA-source: url (kubbi.co.uk : fond blanc, Roboto Slab 900 capitales, 2e mot en bleu, barre bleue, boutons pilule, tuiles catégories, FAQ à onglets)
 * theme: custom (vibe: "piste, ciel bleu, garage propre") · paper oklch(100% 0 0) · accent oklch(64% 0.15 235)
 * display: Roboto Slab 900 · body: Roboto · axes: light / slab-heavy / cool
 * nav: annonce + barre blanche + panier · footer: colonnes + légal · enrichment: photos constructeur (PROVISOIRES)
 */
:root{
  --color-paper:   oklch(100% 0 0);
  --color-paper-2: oklch(97% 0.004 235);
  --color-ink:     oklch(17% 0.004 260);
  --color-ink-2:   oklch(42% 0.006 260);
  --color-rule:    oklch(91% 0.004 260);
  --color-night:   oklch(14% 0.006 260);
  --color-accent:  oklch(64% 0.15 235);
  --color-accent-2: oklch(56% 0.15 238);
  --color-accent-ink: oklch(100% 0 0);
  --color-accent-soft: oklch(95% 0.03 235);
  --color-warn:    oklch(60% 0.17 45);
  --color-focus:   oklch(45% 0.18 265);

  --font-display: "Roboto Slab", Georgia, serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:6rem;
  --radius:14px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:180ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--color-paper);color:var(--color-ink);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--space-md)}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(48px,8vw,108px)}
h2{font-size:clamp(34px,4.6vw,60px);text-align:center}
h2 em,h1 em{font-style:normal;color:var(--color-accent)}
.sub{text-align:center;color:var(--color-ink-2);max-width:620px;margin:var(--space-sm) auto 0;font-family:var(--font-display);font-weight:400}

.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;text-decoration:none;
  background:var(--color-accent);color:var(--color-accent-ink);border:2px solid var(--color-accent);border-radius:10px;
  font:900 14px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;padding:16px 26px;
  box-shadow:0 6px 18px oklch(64% 0.15 235 / .35);transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.btn:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.white{background:var(--color-paper);color:var(--color-ink);border-color:var(--color-paper);box-shadow:0 6px 18px oklch(0% 0 0 / .2)}
.btn.white:hover{background:var(--color-paper-2)}
.btn.line{background:transparent;color:var(--color-ink);border-color:var(--color-ink);box-shadow:none}
.btn.line:hover{background:var(--color-ink);color:var(--color-paper)}

/* ---------- haut de page ---------- */
.announce{background:var(--color-paper-2);text-align:center;font-size:13px;padding:8px var(--space-md)}
.announce a{font-weight:700}
.head{background:var(--color-paper);border-bottom:1px solid var(--color-rule);position:sticky;top:0;z-index:40}
.head .wrap{display:flex;align-items:center;gap:var(--space-xl);height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;color:var(--color-accent)}
.logo b{font:900 26px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.nav{display:flex;gap:var(--space-lg);list-style:none;font-weight:500;font-size:15px;flex:1}
.nav a{text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--color-accent)}
.head-r{display:flex;align-items:center;gap:var(--space-md)}
.head-r a{white-space:nowrap;font-weight:700;font-size:14px;text-decoration:none}
.head-r .btn{padding:12px 18px;font-size:13px;box-shadow:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(78vh,760px);display:grid;place-items:center;text-align:center;color:oklch(100% 0 0);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 20%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(10% 0.01 260 / .15),oklch(10% 0.01 260 / .55))}
.hero .in{position:relative;z-index:1;padding:var(--space-2xl) var(--space-md)}
.pill{display:inline-block;background:oklch(0% 0 0 / .45);backdrop-filter:blur(6px);border:1px solid oklch(100% 0 0 / .25);border-radius:999px;font:700 12px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;margin-bottom:var(--space-md)}
.hero h1{text-shadow:0 4px 30px oklch(0% 0 0 / .35)}
.hero p{font-family:var(--font-display);font-size:18px;max-width:560px;margin:var(--space-md) auto 0;text-shadow:0 2px 12px oklch(0% 0 0 / .4)}
.hero .ctas{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-lg)}

.stats{background:var(--color-accent);color:var(--color-accent-ink)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats div{text-align:center;padding:var(--space-md) var(--space-sm)}
.stats div+div{border-left:1px solid oklch(100% 0 0 / .3)}
.stats b{display:block;font:900 clamp(24px,2.6vw,36px)/1 var(--font-display);text-transform:uppercase}
.stats span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}

section{padding:var(--space-3xl) 0}

/* ---------- tuiles catégories ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
.tile{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;color:var(--color-ink);background:var(--color-paper-2);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:var(--space-lg);text-decoration:none}
.tile img{position:absolute;left:6%;top:6%;width:88%;height:62%;object-fit:contain;mix-blend-mode:multiply;transition:transform 600ms var(--ease-out)}
.tile:hover img{transform:scale(1.04)}
.tile>*:not(img){position:relative;z-index:1}
.tile small{font:700 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-2)}
.tile h3{font-size:clamp(28px,3.2vw,46px);margin:8px 0 var(--space-md)}

/* ---------- modèles ---------- */
.row-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-md);flex-wrap:wrap}
.row-head h2{text-align:left}
.tabs{display:inline-flex;background:var(--color-paper-2);border-radius:999px;padding:4px}
.tabs button{background:none;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;font:700 13px/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink-2);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.tabs button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}
.note{margin-top:var(--space-sm);font-size:14px;color:var(--color-ink-2)}
.note b{color:var(--color-warn)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.card{border:1px solid var(--color-rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;background:var(--color-paper);transition:box-shadow var(--dur),transform var(--dur)}
.card:hover{box-shadow:0 14px 30px oklch(20% 0.02 260 / .1);transform:translateY(-2px)}
.card[hidden]{display:none}
.card .pic{position:relative;aspect-ratio:4/3;background:var(--color-paper-2)}
.card .pic img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.card .body{padding:var(--space-md);display:flex;flex-direction:column;flex:1}
.card h3{font-size:22px;margin:6px 0 var(--space-xs)}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-sm)}
.specs span{background:var(--color-paper-2);border-radius:6px;padding:5px 9px;font-size:13px;font-weight:500;white-space:nowrap}
.card .price{font:900 26px/1 var(--font-display);color:var(--color-accent);margin-top:auto}
.card .acts{display:flex;gap:var(--space-2xs);margin-top:var(--space-sm)}
.card .acts .btn{flex:1;padding:14px 10px;font-size:13px}
.more{text-align:center;margin-top:var(--space-lg);color:var(--color-ink-2);font-size:15px}
.more b{color:var(--color-ink)}

/* ---------- permis (bloc sombre) ---------- */
.dark{background:var(--color-night);color:oklch(96% 0 0)}
.dark .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-2xl);align-items:center}
.dark .ph{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;box-shadow:0 0 0 1px oklch(64% 0.15 235 / .5),0 0 60px oklch(64% 0.15 235 / .25)}
.dark .ph img{width:100%;height:100%;object-fit:cover}
.dark h2{text-align:left}
.dark .lead{color:oklch(78% 0.006 260);margin-top:var(--space-md);font-family:var(--font-display)}
.rules{margin-top:var(--space-lg);display:grid;gap:var(--space-sm)}
.rules div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-md);background:oklch(20% 0.008 260);border-radius:10px;padding:var(--space-md)}
.rules b{font:900 18px/1.1 var(--font-display);text-transform:uppercase;color:var(--color-accent)}
.rules span{font-size:15px;color:oklch(84% 0.004 260)}


/* ---------- conseiller ---------- */
.callout{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);flex-wrap:wrap}
.callout small{font:700 11px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.callout h3{font-size:24px;text-transform:none;font-weight:700;margin:6px 0 4px}
.callout p{font-size:14px;color:var(--color-ink-2)}
.callout .r{display:flex;gap:var(--space-sm);flex-wrap:wrap}


/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto}
.faq .tabs{display:flex;width:max-content;margin:var(--space-lg) auto}
details{border:1px solid var(--color-rule);border-radius:10px;margin-bottom:var(--space-xs);background:var(--color-paper)}
details[hidden]{display:none}
summary{list-style:none;cursor:pointer;padding:18px 56px 18px 20px;font:700 16px/1.35 var(--font-display);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink);display:grid;place-items:center;font:700 18px/1 var(--font-body);transition:transform var(--dur) var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 20px 18px;color:var(--color-ink-2)}

/* ---------- pied de page ---------- */
.foot{background:var(--color-paper-2);border-top:1px solid var(--color-rule);padding:var(--space-2xl) 0 var(--space-lg);font-size:14px}
.foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--space-xl)}
.foot h4{font:900 14px/1 var(--font-display);text-transform:uppercase;margin-bottom:var(--space-sm)}
.foot ul{list-style:none;display:grid;gap:8px;color:var(--color-ink-2)}
.foot a{text-decoration:none;white-space:nowrap}
.foot a:hover{color:var(--color-accent)}
.legal{border-top:1px solid var(--color-rule);margin-top:var(--space-xl);padding-top:var(--space-md);font-size:12px;color:var(--color-ink-2);display:grid;gap:6px}

@media (max-width:1000px){
  .nav{display:none}
  .head .wrap{justify-content:space-between}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid oklch(100% 0 0 / .3)}
  .dark .wrap{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .dark .ph{aspect-ratio:16/10}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{aspect-ratio:3/4}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  section{padding:var(--space-2xl) 0}
}
@media (max-width:600px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:minmax(0,1fr)}
  .tile{aspect-ratio:5/6}
  .tile img{height:50%}
  .rules div{grid-template-columns:minmax(0,1fr);gap:4px}
  .callout{padding:var(--space-lg) var(--space-md)}
  .head-r a.tel{display:none}
  .head .wrap{gap:var(--space-sm)}
  .head-r .btn{padding:10px 12px;font-size:12px}
  .hero img{object-position:28% 18%}
  .tabs button{padding:11px 10px;font-size:12px}
  .logo b{font-size:22px}
  .foot .cols{grid-template-columns:minmax(0,1fr)}
  .row-head .tabs{width:100%}
  .row-head .tabs button{flex:1;padding:11px 8px}
  .faq .tabs{width:100%}
  .faq .tabs button{flex:1;padding:11px 8px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:120ms!important;scroll-behavior:auto!important}.tile:hover img{transform:none}}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--color-accent)}

/* ---------- fiche produit ---------- */
.crumbs{font-size:13px;color:var(--color-ink-2);padding:var(--space-md) 0 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--color-accent)}
.pdp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-2xl);align-items:start;padding:var(--space-md) 0 var(--space-3xl)}
.gal-main{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--color-paper-2)}
.gal-main img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.gal-nav{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-rule);background:var(--color-paper);cursor:pointer;display:grid;place-items:center;font:700 18px/1 var(--font-body)}
.gal-nav.prev{left:12px}.gal-nav.next{right:12px}
.gal-nav:hover{border-color:var(--color-accent);color:var(--color-accent)}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2xs);margin-top:var(--space-2xs)}
.thumbs button{aspect-ratio:4/3;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--color-paper-2);padding:0;cursor:pointer}
.thumbs button[aria-current=true]{border-color:var(--color-accent)}
.thumbs img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.buy{position:sticky;top:96px}
.eyebrow{font:700 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.buy h1{font-size:clamp(34px,3.6vw,52px);margin:var(--space-xs) 0 var(--space-sm)}
.buy .lede{color:var(--color-ink-2);font-size:17px}
.buy .price{font:900 40px/1 var(--font-display);margin:var(--space-lg) 0 4px}
.buy .vat{font-size:13px;color:var(--color-ink-2)}
.points{list-style:none;display:grid;gap:10px;margin:var(--space-lg) 0;padding:var(--space-lg) 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}
.points li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-weight:500}
.points li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--color-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230a84c6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.buy .acts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xs)}
.buy .acts .btn{width:100%;padding:18px}
.assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs);margin-top:var(--space-md)}
.assure div{background:var(--color-paper-2);border-radius:10px;padding:12px;font-size:13px;line-height:1.35;color:var(--color-ink-2)}
.assure b{display:block;color:var(--color-ink);font-size:13px;margin-bottom:2px}
.block{padding:var(--space-3xl) 0;border-top:1px solid var(--color-rule)}
.block h2{text-align:left;font-size:clamp(28px,3.4vw,44px)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-2xl);align-items:start}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--color-rule);vertical-align:top}
.spec th{width:42%;font-weight:500;color:var(--color-ink-2)}
.spec td{font-weight:700}
.related .grid{margin-top:var(--space-lg)}
.sticky-buy{display:none}
@media (max-width:1000px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .buy{position:static}
  .split{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:var(--space-sm);background:var(--color-paper);border-top:1px solid var(--color-rule);padding:10px var(--space-md) calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform var(--dur) var(--ease-out)}
  .sticky-buy.on{transform:none}
  .sticky-buy b{font:900 15px/1.1 var(--font-display);text-transform:uppercase;display:block}
  .sticky-buy span{font:900 18px/1 var(--font-display);color:var(--color-accent)}
  .sticky-buy .btn{padding:14px 22px;box-shadow:none}
  body.has-sticky{padding-bottom:76px}
}
@media (max-width:600px){
  .thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .assure{grid-template-columns:minmax(0,1fr)}
  .gal-nav{width:38px;height:38px;margin-top:-19px}
}
.card a.pic{display:block}
.colours{margin-top:var(--space-md)}
.colour-label{font-size:14px;color:var(--color-ink-2)}
.colour-label b{color:var(--color-ink)}
.swatches{display:flex;gap:10px;margin-top:8px}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-paper);background:var(--sw);box-shadow:0 0 0 1px var(--color-rule);cursor:pointer;padding:0}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-accent)}
.gal-nav[hidden]{display:none}

/* ---------- panier (tiroir) ---------- */
.cart-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:2px solid var(--color-ink);border-radius:10px;padding:10px 14px;font:900 13px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background var(--dur),color var(--dur)}
.cart-btn:hover{background:var(--color-ink);color:var(--color-paper)}
.count{background:var(--color-accent);color:var(--color-accent-ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font:700 11px/1 var(--font-body);padding:0 6px}
.count[hidden]{display:none}
body.locked{overflow:hidden}
.drawer-bg{position:fixed;inset:0;background:oklch(14% 0.006 260 / .5);z-index:60}
.drawer-bg[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--color-paper);z-index:61;display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform 220ms var(--ease-out),visibility 0s 220ms}
.drawer.open{transform:none;visibility:visible;transition:transform 220ms var(--ease-out)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px var(--space-md);border-bottom:1px solid var(--color-rule)}
.drawer-head h2{font-size:28px;text-align:left}
.drawer-x{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--color-ink-2)}
.drawer-body{flex:1;overflow-y:auto;padding:8px var(--space-md)}
.drawer-body .empty{color:var(--color-ink-2);padding:24px 0}
.cart-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-rule)}
.cart-line img{width:72px;aspect-ratio:4/3;object-fit:contain;background:var(--color-paper-2);border-radius:6px;mix-blend-mode:multiply}
.cart-line b{display:block;font:700 15px/1.25 var(--font-display)}
.cart-line span{font-size:14px;color:var(--color-ink-2)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:30px;height:30px;border:1px solid var(--color-rule);background:var(--color-paper);border-radius:50%;cursor:pointer}
.drawer-foot{padding:16px var(--space-md) 22px;border-top:1px solid var(--color-rule);display:grid;gap:8px}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:14px;color:var(--color-ink-2)}
.drawer-total b{font:900 28px/1 var(--font-display);color:var(--color-ink)}
.drawer-foot .btn{width:100%}
.drawer-foot .btn[hidden]{display:none}
.drawer-foot .note{margin-top:0;font-size:13px}
@media (max-width:600px){.cart-btn{padding:8px 9px;gap:5px}.cart-label{display:none}}
@media (max-width:420px){.head-r{gap:var(--space-xs)}.head-r .btn{display:none}}