/* Le Temple du Mobilier — refonte ltdm.pro-dig-it.com
   DA Porsche : noir/blanc/rouge, grotesque géométrique, titres majuscules + letter-spacing,
   grands espacements, précision technique. Perf : system stack, pas de font render-blocking. */

:root{
  --c-bg:#ffffff;
  --c-bg-alt:#f2f3f5;        /* gris clair Porsche */
  --c-ink:#000000;           /* noir franc */
  --c-ink-soft:#6b6f73;
  --c-line:#d9dadb;
  --c-accent:#d5001c;        /* rouge Porsche / Made in France */
  --c-accent-ink:#000000;
  --c-ok:#0a7d3c;
  --radius:0px;              /* coins carrés — précision technique */
  --radius-sm:0px;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 28px rgba(0,0,0,.10);
  --maxw:1200px;
  --gutter:clamp(16px,4vw,40px);
  --ff:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --tracking:0.04em;
  --tracking-tight:-.01em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--c-ink);background:var(--c-bg);
  line-height:1.6;font-size:clamp(16px,1.05vw+12px,18px);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-accent)}
a:hover{color:var(--c-accent)}
h1,h2,h3,h4{line-height:1.1;margin:0 0 .5em;font-weight:700;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--c-ink)}
h1{font-size:clamp(30px,4.5vw,52px);letter-spacing:0.02em}
h2{font-size:clamp(22px,3vw,34px)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.lead{color:var(--c-ink-soft);font-size:1.15em;letter-spacing:0;text-transform:none}
.upper{text-transform:uppercase;letter-spacing:var(--tracking)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--c-line);
}
.site-header .container{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.brand img{height:38px;width:auto}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--c-ink-soft);letter-spacing:.08em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{padding:8px 12px;border-radius:0;color:var(--c-ink);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:var(--tracking);border-bottom:2px solid transparent}
.nav a:hover{color:var(--c-accent);background:transparent}
.nav .cta{background:var(--c-ink);color:#fff;border-bottom:none}
.nav .cta:hover{background:var(--c-accent);color:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger{width:24px;height:2px;background:var(--c-ink);position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--c-ink)}
.burger::before{top:-7px}.burger::after{top:7px}
@media (max-width:860px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--c-line);padding:8px var(--gutter)}
  .nav.open{display:flex}
  .nav a{padding:14px 12px;border-radius:0;border-bottom:2px solid var(--c-line)}
  .nav-toggle{display:block}
}

/* Hero — DA Porsche : noir franc, rouge accent */
.hero{background:#000;color:#fff;overflow:hidden;border-bottom:4px solid var(--c-accent)}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{color:#fff}
.hero p{color:#a8acb0;font-size:1.15em;letter-spacing:0;text-transform:none}
.hero .badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.badge{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.32);padding:7px 13px;border-radius:0;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking);color:#fff}
.badge .dot{width:8px;height:8px;border-radius:0;background:var(--c-accent)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:0;font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;text-decoration:none;text-transform:uppercase;letter-spacing:var(--tracking);border-bottom:none}
.btn-primary{background:#fff;color:#000}
.btn-primary:hover{background:var(--c-accent);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
.btn-accent{background:var(--c-accent);color:#fff}
.btn-accent:hover{background:#000}
.hero-media{aspect-ratio:4/3;border-radius:0;background:rgba(255,255,255,.06) center/cover no-repeat;border:1px solid rgba(255,255,255,.18)}
@media (max-width:860px){.hero .container{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}.hero-media{order:-1;aspect-ratio:16/10}}

/* Sections */
.section{padding:64px 0}
.section--alt{background:var(--c-bg-alt)}
.section h2{text-align:center;margin-bottom:14px}
.section .sub{text-align:center;color:var(--c-ink-soft);max-width:640px;margin:0 auto 36px}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(20,24,29,.12)}
.card h3{font-size:1.15rem;margin-bottom:6px;text-align:center}
.card p{color:var(--c-ink-soft);font-size:.95rem;margin-bottom:0}
.card .pic{aspect-ratio:16/10;border-radius:0;background:var(--c-bg-alt) center/cover no-repeat;margin-bottom:14px;border:1px solid var(--c-line)}}
.card .price{margin-top:12px;font-weight:800;color:var(--c-accent)}

/* Models grid (configurateur style) */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.model{background:#fff;border:2px solid var(--c-line);border-radius:0;padding:18px;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:center}
.model:hover{border-color:var(--c-accent)}
.model.is-selected{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(31,58,95,.15)}
.model .pic{aspect-ratio:4/3;border-radius:0;background:var(--c-bg-alt) center/cover;margin-bottom:12px;border:1px solid var(--c-line)}}
.model h3{margin:0 0 4px}
.model .meta{font-size:.85rem;color:var(--c-ink-soft)}
.model .from{margin-top:10px;font-weight:800;color:var(--c-accent)}

/* Configurator layout */
.config{display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:start}
.config-steps{display:flex;flex-direction:column;gap:22px}
.step{background:#fff;border:1px solid var(--c-line);border-radius:6px;padding:20px}
.step h3{display:flex;align-items:center;gap:10px}
.step .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:4px;background:var(--c-accent);color:#fff;font-size:.85rem;font-weight:700}
.options{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c-line);border-radius:4px;cursor:pointer}
.opt:hover{border-color:var(--c-accent)}
.opt input{accent-color:var(--c-accent)}
.opt .label{font-weight:600}
.opt .hint{margin-left:auto;color:var(--c-ink-soft);font-size:.85rem}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.seg button{padding:9px 14px;border:1px solid var(--c-line);background:#fff;border-radius:4px;cursor:pointer;font-weight:600;font-size:.9rem}
.seg button.is-active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

/* Recap sticky */
.recap{position:sticky;top:84px;background:#fff;border:1px solid var(--c-line);border-radius:0;padding:20px;box-shadow:var(--shadow)}
.recap h3{margin-bottom:8px}
.recap .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--c-line);font-size:.95rem}
.recap .row span:first-child{color:var(--c-ink-soft)}
.recap .total{display:flex;justify-content:space-between;font-weight:800;font-size:1.2rem;margin:12px 0 16px;color:var(--c-accent)}
.recap .empty{color:var(--c-ink-soft);font-size:.9rem}
@media (max-width:860px){.config{grid-template-columns:1fr}.recap{position:static}}

/* Legal / prose */
.prose{max-width:760px;margin:0 auto}
.prose h1{margin-bottom:8px}
.prose .meta{color:var(--c-ink-soft);font-size:.9rem;margin-bottom:28px}
.prose h2{font-size:1.35rem;margin-top:2em;margin-bottom:.4em}
.prose h3{font-size:1.1rem;margin-top:1.6em}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}
.prose .toc{background:var(--c-bg-alt);border:1px solid var(--c-line);border-left:4px solid var(--c-accent);border-radius:0;padding:16px 20px;margin:24px 0}
.prose .toc ul{margin:0}
.back-link{display:inline-flex;align-items:center;gap:6px;margin:24px 0;color:var(--c-ink-soft);font-weight:600}
.back-link:hover{color:var(--c-accent)}

/* Footer — DA Porsche : noir franc */
.site-footer{background:#000;color:#a8acb0;padding:56px 0 24px;margin-top:0;border-top:4px solid var(--c-accent)}
.site-footer .container{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.site-footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:var(--tracking);margin-bottom:12px}
.site-footer a{color:#a8acb0;border-bottom:none}
.site-footer a:hover{color:var(--c-accent)}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.site-footer .brand img{height:40px;margin-bottom:10px;filter:brightness(0) invert(1)}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.16);margin-top:36px;padding-top:18px;font-size:.78rem;color:#6b6f73;text-transform:uppercase;letter-spacing:var(--tracking);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
@media (max-width:860px){.site-footer .container{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer .container{grid-template-columns:1fr}}

/* utilities */
.center{text-align:center}
.muted{color:var(--c-ink-soft)}
.hide{display:none}
.tag{display:inline-block;background:var(--c-bg-alt);border:1px solid var(--c-line);padding:5px 10px;border-radius:0;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking);color:var(--c-ink)}
.tag--fr{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
/* Fiches produits */
.benefits li strong{display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:var(--tracking);font-size:.85rem;color:var(--c-accent)}
.prose table tbody th,.prose table tbody td,.section table th,.section table td{border:1px solid var(--c-line);padding:10px 12px;text-align:left;font-size:.92rem}
.section table th{background:var(--c-bg-alt);text-transform:uppercase;letter-spacing:var(--tracking);font-size:.78rem;color:var(--c-ink-soft);width:38%}
.section table td{text-transform:none}
details{border-top:1px solid var(--c-line);padding:14px 0}
details summary{cursor:pointer;font-weight:700;text-transform:none;letter-spacing:0;font-size:1rem;list-style:none;display:flex;gap:10px;align-items:center}
details summary::before{content:"+";color:var(--c-accent);font-weight:700;font-size:1.2rem;line-height:1}
details[open] summary::before{content:"−"}
details summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0;color:var(--c-ink-soft)}
nav[aria-label="Fil d'Ariane"] a{border-bottom:none;color:var(--c-ink-soft)}
nav[aria-label="Fil d'Ariane"] a:hover{color:var(--c-accent)}
.benefits{list-style:none;padding:0}

/* === Configurateur : popup d'aide + sélecteur RAL === */
.help-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:50%;background:var(--c-accent);color:#fff;border:none;font-size:1.4rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);display:grid;place-items:center}
.help-fab:hover{background:#000}
.modal{display:none;position:fixed;inset:0;z-index:70;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.modal.is-open{display:flex}
.modal-card{position:relative;background:#fff;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:30px 28px 26px;box-shadow:var(--shadow);border-top:4px solid var(--c-accent)}
.modal-card h2{margin-top:0;font-size:1.5rem}
.modal-x{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--c-ink-soft)}
.modal-x:hover{color:var(--c-accent)}
.modal-card ol.help-steps{padding-left:1.2em;margin:14px 0 18px}
.modal-card ol.help-steps li{margin:.4em 0}
.modal-cta{text-align:center;margin-top:18px}
@media (max-width:560px){.modal-card{padding:24px 18px 20px}}
.ral{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.ral-swatch{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;background:#fff;border:2px solid var(--c-line);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.ral-swatch:hover{border-color:var(--c-accent)}
.ral-swatch.is-selected{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(213,0,28,.15)}
.ral-swatch .chip{width:100%;height:34px;background:var(--sw);border:1px solid var(--c-line)}
.ral-swatch .ral-code{font-weight:700;font-size:.85rem}
.ral-swatch .ral-name{font-size:.78rem;color:var(--c-ink-soft);text-transform:none;letter-spacing:0}
.ral-custom-label{display:block;margin:14px 0 6px;font-size:.85rem;font-weight:600}
.ral-input{width:100%;padding:11px 12px;border:1px solid var(--c-line);font-size:.95rem;font-family:var(--ff);background:#fff}
.ral-input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(213,0,28,.12)}