/* =========================================================================
   moncoffrefort.be — Marinelli+ SRL
   Feuille de style unique. Charte alignée sur maportefichet.be.
   ========================================================================= */

:root{
  --noir:#0b0d10; --noir-2:#111418; --noir-3:#171b21; --noir-4:#1b1f26;
  --ligne:#252a32; --ligne-2:#333a45;
  --texte:#e8eaed; --texte-2:#9aa3af; --texte-3:#6b7480;
  --or:#c9a55c; --or-2:#e0c489; --or-soft:rgba(201,165,92,.12);
  --alerte:#d98b4a; --alerte-soft:rgba(217,139,74,.45);
  --r:4px;
  --max:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--noir); color:var(--texte);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.02em}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------------- en-tête */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,13,16,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.marques{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.marques .logo-m{height:30px;width:auto}
.marques .sep{width:1px;height:24px;background:var(--ligne-2);flex:none}
.marques .logo-b{height:22px;width:auto}
.marques .burg-txt{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;color:var(--texte-2);
  white-space:nowrap;text-transform:uppercase;
}
.hd nav{display:flex;align-items:center;gap:26px}
.hd nav a{font-size:14px;color:var(--texte-2);text-decoration:none;white-space:nowrap;transition:color .18s}
.hd nav a:hover{color:var(--or)}
.hd .cta{
  background:var(--or);color:#1a1408;padding:10px 20px;border-radius:var(--r);
  font-weight:600;font-size:14px;text-decoration:none;transition:background .18s;
}
.hd .cta:hover{background:var(--or-2)}
@media(max-width:900px){ .hd nav a:not(.cta){display:none} }

/* ---------------------------------------------------------------- hero */
.hero{padding:84px 0 64px;border-bottom:1px solid var(--ligne)}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);margin-bottom:20px;font-weight:600;
}
.hero h1{font-size:clamp(33px,5.4vw,56px);max-width:17ch;margin-bottom:22px}
.hero .sous{color:var(--texte-2);max-width:62ch;font-size:17.5px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.chip{border:1px solid var(--ligne-2);border-radius:999px;padding:7px 15px;font-size:13px;color:var(--texte-2)}
.chip b{color:var(--texte);font-weight:600}

/* ------------------------------------------------------------ sections */
section{padding:72px 0}
.sec-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3);
  margin-bottom:14px;font-weight:600;
}
.sec-label .n{color:var(--or)}
h2{font-size:clamp(25px,3.5vw,35px);margin-bottom:14px}
.lead{color:var(--texte-2);max-width:66ch;margin-bottom:38px;font-size:17px}
.borde{border-top:1px solid var(--ligne)}

/* ----------------------------------------------------- parcours 4 pas */
.parcours-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:30px}
.pas .num{font-size:11px;letter-spacing:.14em;color:var(--or);font-weight:700;margin-bottom:10px}
.pas h3{font-size:16px;margin-bottom:6px}
.pas p{font-size:14px;color:var(--texte-2)}

/* --------------------------------------------------------- configurateur */
#configurateur{border-top:1px solid var(--ligne);background:var(--noir-2)}
.progress{display:flex;gap:6px;margin-bottom:42px}
.progress i{flex:1;height:3px;background:var(--ligne);border-radius:2px;transition:background .35s}
.progress i.on{background:var(--or)}

.etape{display:none;animation:fade .32s ease}
.etape.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.etape-num{font-size:12px;letter-spacing:.14em;color:var(--or);font-weight:700;margin-bottom:12px}
.etape h3{font-size:clamp(21px,2.8vw,28px);margin-bottom:8px}
.etape .hint{color:var(--texte-2);font-size:15px;margin-bottom:28px;max-width:64ch}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px}
.opt{
  background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);
  padding:20px;cursor:pointer;transition:all .18s;text-align:left;color:inherit;
  font-family:inherit;font-size:inherit;display:flex;flex-direction:column;gap:6px;
}
.opt:hover{border-color:var(--ligne-2);background:var(--noir-4)}
.opt.sel{border-color:var(--or);background:var(--or-soft)}
.opt:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.opt .t{font-weight:600;font-size:16px;display:flex;align-items:center;gap:9px}
.opt .t .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ligne-2);flex:none;transition:all .18s}
.opt.sel .t .dot{background:var(--or);border-color:var(--or);box-shadow:0 0 0 3px var(--or-soft)}
.opt .d{font-size:13.5px;color:var(--texte-2);line-height:1.5}

.nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px;gap:16px}
.btn{
  border:1px solid var(--ligne-2);background:transparent;color:var(--texte);
  padding:13px 26px;border-radius:var(--r);cursor:pointer;font-size:15px;font-weight:600;
  font-family:inherit;transition:all .18s;text-decoration:none;display:inline-block;
}
.btn:hover:not(:disabled){border-color:var(--or);color:var(--or)}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn.primary{background:var(--or);border-color:var(--or);color:#1a1408}
.btn.primary:hover:not(:disabled){background:var(--or-2);border-color:var(--or-2);color:#1a1408}

/* ------------------------------------------------------------ résultats */
.synthese{
  background:var(--noir-3);border:1px solid var(--ligne);border-left:2px solid var(--or);
  border-radius:var(--r);padding:22px 24px;margin-bottom:32px;
}
.synthese h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.synthese dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 28px}
.synthese dt{font-size:12px;color:var(--texte-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.synthese dd{font-size:15px;font-weight:600}

.cards{display:grid;gap:18px}
.card{
  background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);
  padding:26px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;
}
.card.best{border-color:var(--or)}
.badge{
  display:inline-block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:12px;
  background:var(--or);color:#1a1408;
}
.badge.alt{background:transparent;border:1px solid var(--ligne-2);color:var(--texte-2)}
.card h4{font-size:21px;margin-bottom:4px}
.card .serie{font-size:13px;color:var(--texte-3);margin-bottom:14px}
.card .why{font-size:14px;color:var(--texte-2);margin-bottom:18px;padding-left:12px;border-left:2px solid var(--ligne-2)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px 22px;font-size:13.5px}
.specs div span{display:block;color:var(--texte-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.specs div b{font-weight:600}
.prix{text-align:right;min-width:186px}
.prix .lbl{font-size:11px;color:var(--texte-3);text-transform:uppercase;letter-spacing:.07em}
.prix .val{font-size:27px;font-weight:600;color:var(--or);margin:5px 0 2px;letter-spacing:-.02em}
.prix .tva{font-size:12px;color:var(--texte-3)}
.prix .note{margin-top:12px;font-size:12px;color:var(--texte-3);line-height:1.45}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{font-size:11.5px;padding:3px 9px;border:1px solid var(--ligne-2);border-radius:3px;color:var(--texte-2)}
.tag.feu{border-color:var(--alerte-soft);color:var(--alerte)}
.tag.grade{border-color:rgba(201,165,92,.45);color:var(--or)}

.avert{
  margin-top:28px;padding:18px 20px;border:1px solid var(--ligne);border-radius:var(--r);
  background:var(--noir-2);font-size:13.5px;color:var(--texte-2);line-height:1.6;
}
.avert.warn{border-color:var(--alerte-soft)}
.avert b{color:var(--texte)}

/* --------------------------------------------------------------- marque */
.marque{background:var(--noir-2);border-top:1px solid var(--ligne)}
.marque-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.marque p{color:var(--texte-2);margin-bottom:16px}
.marque p strong{color:var(--texte);font-weight:600}
.faits{display:grid;gap:2px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.fait{background:var(--noir-3);padding:20px 22px}
.fait .k{font-size:26px;font-weight:600;color:var(--or);letter-spacing:-.02em;line-height:1.1}
.fait .v{font-size:13.5px;color:var(--texte-2);margin-top:5px}
@media(max-width:880px){.marque-grid{grid-template-columns:1fr;gap:34px}}

/* ------------------------------------------------------------ normes */
.normes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:8px}
.norme{background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);padding:24px}
.norme h3{font-size:17px;margin-bottom:10px;color:var(--or)}
.norme p{font-size:14px;color:var(--texte-2)}
.norme p + p{margin-top:10px}

table.bareme{width:100%;border-collapse:collapse;margin-top:26px;font-size:14px}
table.bareme th,table.bareme td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ligne)}
table.bareme th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--texte-3);
  font-weight:600;border-bottom-color:var(--ligne-2);
}
table.bareme td:first-child{font-weight:600}
table.bareme td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.bareme th.n{text-align:right}
table.bareme tr:hover td{background:var(--noir-3)}
.tbl-wrap{overflow-x:auto}

/* --------------------------------------------------------------- devis */
.devis{background:var(--noir-2);border-top:1px solid var(--ligne)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.f-full{grid-column:1/-1}
label{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--texte-3);margin-bottom:7px}
input,textarea,select{
  width:100%;background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r);
  padding:12px 14px;color:var(--texte);font-family:inherit;font-size:15px;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--or)}
textarea{min-height:100px;resize:vertical}
.rgpd{font-size:12.5px;color:var(--texte-3);line-height:1.55}
.rgpd a{color:var(--texte-2)}

/* --------------------------------------------------------------- footer */
footer{border-top:1px solid var(--ligne);padding:48px 0 36px;font-size:13.5px;color:var(--texte-3)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.foot .logo-f{height:26px;width:auto;margin-bottom:14px;opacity:.85}
.foot h5{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--texte-2);margin-bottom:12px;font-weight:600}
.foot a{color:var(--texte-2);text-decoration:none}
.foot a:hover{color:var(--or)}
.foot ul{list-style:none}
.foot li{margin-bottom:6px}
.copy{margin-top:36px;padding-top:22px;border-top:1px solid var(--ligne);font-size:12.5px;line-height:1.7}
@media(max-width:820px){.foot{grid-template-columns:1fr}}

@media(max-width:820px){
  .parcours-grid{grid-template-columns:repeat(2,1fr)}
  .card{grid-template-columns:1fr}
  .prix{text-align:left}
  .form{grid-template-columns:1fr}
}

/* sélection d'un modèle dans les résultats du configurateur */
.card.choisi{border-color:var(--or);box-shadow:0 0 0 1px var(--or)}
.btn.choisir{margin-top:14px;width:100%;background:transparent;border:1px solid var(--ligne-2);
  color:var(--texte-2);padding:9px 14px;border-radius:var(--r);cursor:pointer;font-weight:600;font-size:13px}
.btn.choisir:hover{border-color:var(--or);color:var(--or)}
.btn.choisir.actif{background:var(--or);border-color:var(--or);color:#1a1408}

/* ============================ v2 : collection & bi-marque ============================ */
.cta-row{display:flex;gap:14px;margin:26px 0 6px;flex-wrap:wrap}
.btn.grand{padding:14px 26px;font-size:1.02rem}
.badge.marque-burg,.badge.marque-bordogna{margin-left:8px;background:transparent;border:1px solid var(--ligne);color:var(--gris,#8a919b)}
.badge.marque-bordogna{border-color:#b03030;color:#b03030}
.mini-marque{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.mini-marque.marque-burg{color:#2c5f8a}
.mini-marque.marque-bordogna{color:#b03030}
.vers-collection{margin:26px 0;padding:20px 24px;border:1px dashed var(--ligne);border-radius:6px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.95rem}
.collection-filtres{display:flex;flex-direction:column;gap:10px;margin:26px 0 22px}
.filtre-groupe{display:flex;gap:8px;flex-wrap:wrap}
.fbtn{border:1px solid var(--ligne);background:transparent;padding:7px 14px;border-radius:4px;
  cursor:pointer;font:inherit;font-size:.85rem;color:inherit}
.fbtn.actif{background:var(--encre,#14161a);color:#fff;border-color:var(--encre,#14161a)}
.collection-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mini-card{border:1px solid var(--ligne);border-radius:6px;padding:18px;display:flex;flex-direction:column;background:var(--fond-carte,#fff)}
.mini-card h4{margin:0 0 2px;font-size:1.02rem}
.mini-serie{font-size:.8rem;color:var(--gris,#8a919b);margin-bottom:10px}
.mini-specs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.mini-specs span{font-size:.72rem;border:1px solid var(--ligne);border-radius:3px;padding:2px 7px;color:var(--gris,#6b7280)}
.mini-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-prix b{font-size:1.05rem}
.mini-prix span{display:block;font-size:.68rem;color:var(--gris,#8a919b)}
.marque-titre{font-size:1.25rem;margin:8px 0 18px}
/* v3 : hero renforcé + liens docs */
.btn.grand.xl{padding:16px 32px;font-size:1.12rem;font-weight:700}
.marques{display:flex;align-items:center;gap:12px}
.marques a{display:flex;align-items:center}
.docs-liens{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.docs-liens a,.mini-doc{font-size:.78rem;text-decoration:underline;text-underline-offset:3px}

/* ===================== lot 1c — photos, sélection libre, récap, pro ===== */
.ph{background:#fff;border-radius:6px 6px 0 0;height:170px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin:-18px -18px 12px}
.ph img{max-width:100%;max-height:100%;object-fit:contain}
.ph.vide{background:var(--noir-3);color:var(--texte-3);font-size:.85rem;letter-spacing:.04em;
  text-transform:uppercase}
.card{grid-template-columns:150px 1fr auto}
.card .ph{width:150px;height:150px;margin:0;border-radius:6px}
@media(max-width:860px){.card .ph{width:100%;height:170px}}
.mini-card{position:relative}
.mini-card.choisi{border-color:var(--or);box-shadow:0 0 0 1px var(--or)}
.mini-card.choisi::after{content:"✓ sélectionné";position:absolute;top:10px;right:10px;
  background:var(--or);color:#0b0d10;font-size:.68rem;font-weight:700;padding:2px 8px;
  border-radius:10px;letter-spacing:.03em}
.tous-compat{margin-top:34px;border-top:1px solid var(--ligne);padding-top:26px}
.tous-compat h4{font-size:1.15rem;margin-bottom:6px}
.tous-compat .hint{margin-bottom:16px}
.tous-compat .collection-grille{margin-top:8px}
.devis-recap{display:flex;gap:18px;align-items:center;border:1px solid var(--or);
  border-radius:6px;background:var(--or-soft);padding:16px 18px;margin:6px 0 22px}
.devis-recap .ph{height:96px;width:120px;flex:none;margin:0;border-radius:6px}
.devis-recap .dr-titre{font-size:1.02rem}
.devis-recap .dr-prix{color:var(--or-2);font-weight:700;margin:4px 0}
.devis-recap .dr-note{color:var(--texte-2);font-size:.85rem}
.devis-recap .dr-note a{color:var(--or)}
.pro-check{margin-top:2px;font-size:.95rem}
.grille-pro{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.apres-envoi{color:var(--texte-3);font-size:.82rem;margin-top:10px}
@media(max-width:640px){.grille-pro{grid-template-columns:1fr}
  .devis-recap{flex-direction:column;align-items:flex-start}}

/* lot 1c — lisibilité des mini-cartes sur le thème sombre du site */
.mini-card{background:var(--noir-3);color:var(--texte)}
.mini-card h4{color:var(--texte)}
.mini-prix b{color:var(--or-2)}
.mini-specs span{color:var(--texte-2);border-color:var(--ligne-2)}
.mini-serie{color:var(--texte-3)}
.mini-doc{color:var(--or)}
.mini-pied .btn{border:1px solid var(--ligne-2);color:var(--texte)}
.mini-card.choisi .mini-pied .btn{border-color:var(--or);color:var(--or-2)}