/* ============================================================
   MONTLAO — site public
   (c) 2026 MontLao Sole Co., Ltd — Tous droits réservés.
   Charte arrêtée le 13 août 2026 : OR + VERT.
   ============================================================ */

:root{
  --nuit:#062B1C;
  --nuit-2:#0A3D28;
  --vert:#0B5D3B;
  --vert-clair:#137A4E;
  --or:#C9A227;
  --or-vif:#E9C86A;
  --or-pale:#F4E3B0;
  --ivoire:#F3EEE2;
  --jade:#6FC79A;
  --brique:#C4632F;
  --trait:rgba(201,162,39,.28);
  --serif:"Bodoni Moda",Georgia,serif;
  --sans:"Inter Tight",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--ivoire);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--or-vif);text-decoration:none}
a:hover{color:var(--or-pale)}
.mono{font-family:var(--mono);font-size:.85em}
.dedans{max-width:1080px;margin:0 auto;padding:0 26px}
.dedans.etroit{max-width:720px}

/* ---------------- en-tête ---------------- */
.tete{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 26px;background:rgba(6,43,28,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait);
}
.marque{display:flex;align-items:center;gap:11px;color:var(--ivoire)}
/* Le logo est bleu marine et or. Sur le fond vert, le bleu marine
   tombe à 1,05:1 de contraste — invisible. Une plaque ivoire le
   rétablit à 13,8:1 sans toucher au logo lui-même. */
.marque img{height:42px;width:auto;display:block;
  background:var(--ivoire);border-radius:10px;padding:3px 4px;
  box-shadow:0 1px 7px rgba(0,0,0,.24)}
.marque b{display:block;font-family:var(--serif);font-size:19px;letter-spacing:.09em;font-weight:600}
.marque i{display:block;font-style:normal;font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--or);margin-top:1px}
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nav a{font-size:13.5px;color:var(--ivoire);opacity:.86}
.nav a:hover{opacity:1;color:var(--or-vif)}
.bouton-nav{border:1px solid var(--or);border-radius:999px;padding:6px 15px;
  color:var(--or-vif)!important;opacity:1!important}
.bouton-nav:hover{background:var(--or);color:#3a2f08!important}

/* ---------------- hero ---------------- */
.hero{
  padding:92px 0 78px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(11,93,59,.55) 0%,transparent 62%),var(--nuit);
  border-bottom:1px solid var(--trait);
}
.sur{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin:0 0 14px}
.hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,58px);
  line-height:1.1;margin:0 0 22px;max-width:16ch;
}
.chapo{font-size:17.5px;max-width:62ch;margin:0 0 20px;opacity:.9}
.cle{
  font-family:var(--serif);font-size:20px;line-height:1.5;max-width:56ch;
  border-left:2px solid var(--or);padding:4px 0 4px 18px;margin:0 0 30px;color:var(--or-pale);
}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:18px}
.fin{font-size:12.5px;opacity:.6;margin:0}

.btn{
  display:inline-block;border:1px solid transparent;border-radius:999px;
  padding:11px 24px;font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
}
.btn-or{background:var(--or);color:#3a2f08;border-color:var(--or)}
.btn-or:hover{background:var(--or-vif);color:#3a2f08}
.btn-ligne{border-color:var(--trait);color:var(--ivoire)}
.btn-ligne:hover{border-color:var(--or);color:var(--or-vif)}
.btn-vert{background:var(--vert);color:#fff;border-color:var(--vert-clair)}
.btn-vert:hover{background:var(--vert-clair)}

/* ---------------- blocs ---------------- */
.bloc,.hero{scroll-margin-top:78px}   /* l'en-tête fixe ne doit pas masquer les titres */
.bloc{padding:74px 0;border-bottom:1px solid var(--trait)}
.bloc.alt{background:var(--nuit-2)}
.bloc h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,36px);margin:0 0 18px}
.bloc h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:42px 0 16px;color:var(--or-pale)}
.intro{max-width:70ch;opacity:.9;margin:0 0 26px}
.attente{opacity:.55;font-size:14px}
.reserve{margin-top:22px;font-size:13.5px;opacity:.75;border-left:2px solid var(--brique);padding-left:15px;max-width:78ch}

/* ---------------- cartes ---------------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.carte{
  background:rgba(243,238,226,.045);border:1px solid var(--trait);
  border-radius:13px;padding:17px 19px;
}
.carte h4{margin:0 0 6px;font-size:15.5px;font-weight:600;color:var(--or-pale)}
.carte p{margin:0;font-size:13.5px;opacity:.84;line-height:1.55}
.carte .prix{margin-top:11px;font-family:var(--mono);font-size:13px;color:var(--jade)}
.etiq{display:inline-block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;margin-bottom:9px}
.etiq.socle{background:var(--vert);color:#fff}
.etiq.option{background:rgba(201,162,39,.19);color:var(--or-vif);border:1px solid var(--trait)}
.etiq.ferme{background:rgba(196,99,47,.2);color:#F0A87E;border:1px solid rgba(196,99,47,.4)}

/* ---------------- devis ---------------- */
.devis{background:rgba(243,238,226,.045);border:1px solid var(--trait);border-radius:14px;padding:20px}
.cadences{display:flex;gap:8px;margin-bottom:16px}
.cad{
  border:1px solid var(--trait);background:transparent;color:var(--ivoire);
  border-radius:999px;padding:7px 20px;font-family:inherit;font-size:13.5px;cursor:pointer;
}
.cad.on{background:var(--or);color:#3a2f08;border-color:var(--or)}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:9px;margin-bottom:18px}
.opt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--trait);
  border-radius:10px;padding:11px 13px;cursor:pointer;font-size:13.5px}
.opt.on{border-color:var(--or);background:rgba(201,162,39,.08)}
.opt input{margin-top:3px;accent-color:var(--or)}
.opt>span:not(.tarif){flex:1 1 auto;min-width:0}
.opt .tarif{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--jade);white-space:nowrap;padding-left:8px}
.opt.bloque{opacity:.5;cursor:not-allowed}
.total{border-top:1px solid var(--trait);padding-top:15px}
.total div{display:flex;justify-content:space-between;align-items:baseline}
.total span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.total b{font-family:var(--serif);font-size:31px;color:var(--or-vif)}
.notes{font-size:12.5px;opacity:.7;margin:9px 0 0;line-height:1.5}

/* ---------------- référentiel ---------------- */
.niveaux{display:grid;gap:11px}
.niv{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:start;
  border:1px solid var(--trait);border-radius:13px;padding:16px 19px;
  background:rgba(243,238,226,.04)}
.pastille-niv{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;font-family:var(--serif);font-size:23px;font-weight:600;
}
.n1{background:rgba(111,199,154,.15);color:var(--jade)}
.n2{background:rgba(111,199,154,.28);color:#B7EBCF}
.n3{background:var(--vert);color:#fff}
.n4{background:var(--or);color:#3a2f08}
.niv h4{margin:0 0 4px;font-size:16px;color:var(--or-pale)}
.niv .portee{font-size:13px;opacity:.82;margin:0 0 10px}
.niv ul{margin:0;padding-left:17px;font-size:13px;opacity:.8}
.niv li{margin-bottom:3px}
.niv .qui{font-size:11.5px;opacity:.62;margin-top:8px;font-family:var(--mono)}

/* ---------------- filtres et listes ---------------- */
.filtres{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  background:rgba(243,238,226,.045);border:1px solid var(--trait);
  border-radius:13px;padding:15px 17px;margin-bottom:17px}
.filtres label{display:flex;flex-direction:column;gap:5px;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;opacity:.72;flex:1 1 165px}
.filtres input,.filtres select{
  background:rgba(6,43,28,.7);border:1px solid var(--trait);border-radius:8px;
  color:var(--ivoire);padding:9px 11px;font-family:inherit;font-size:14px;
  letter-spacing:normal;text-transform:none;
}
.filtres option{background:var(--nuit)}
.liste{display:grid;gap:10px;min-height:40px}
.fiche{border:1px solid var(--trait);border-radius:12px;padding:15px 18px;
  background:rgba(243,238,226,.04)}
.fiche-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.fiche-n{font-size:15.5px;font-weight:600;color:var(--or-pale)}
.fiche-t{font-size:12.5px;opacity:.68;margin-top:2px}
.badge{font-size:11px;letter-spacing:.09em;border-radius:999px;padding:4px 12px;white-space:nowrap}
.b0{background:rgba(243,238,226,.1);opacity:.75}
.b1{background:rgba(111,199,154,.16);color:var(--jade)}
.b2{background:rgba(111,199,154,.3);color:#C6F0DC}
.b3{background:var(--vert);color:#fff}
.b4{background:var(--or);color:#3a2f08}
.fiche-p{font-size:12px;opacity:.66;margin-top:9px;font-style:italic;
  border-top:1px dashed var(--trait);padding-top:8px}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:11px}
.champs div{font-size:13px}
.champs b{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  opacity:.55;font-weight:600;margin-bottom:1px}
.sens{font-size:10.5px;font-weight:700;letter-spacing:.13em;border-radius:5px;padding:4px 10px}
.sV{background:var(--vert);color:#fff}
.sA{background:var(--or);color:#3a2f08}
.vide{opacity:.55;font-size:14px;padding:14px 0}

.regles{margin-top:22px;border:1px solid var(--trait);border-radius:12px;padding:13px 17px}
.regles summary{cursor:pointer;font-size:14px;color:var(--or-vif)}
.regles div{margin-top:13px;font-size:13.5px;opacity:.85}
.regles p{margin:0 0 9px}

/* ---------------- règlement et formulaire ---------------- */
.reglement{border:1px solid var(--trait);border-radius:13px;padding:19px 21px;
  background:rgba(243,238,226,.04);margin-bottom:24px}
.reglement h3{margin:0 0 13px;font-size:19px}
.corps{max-height:290px;overflow-y:auto;padding-right:11px;font-size:13.5px;line-height:1.62}
.corps p{margin:0 0 12px}
.corps b{color:var(--or-pale)}
.empreinte{font-size:11.5px;opacity:.6;margin:13px 0 0}

.formulaire{display:grid;gap:15px}
.formulaire label{display:flex;flex-direction:column;gap:6px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.formulaire input,.formulaire select{
  background:rgba(6,43,28,.7);border:1px solid var(--trait);border-radius:9px;
  color:var(--ivoire);padding:11px 13px;font-family:inherit;font-size:15px;
  letter-spacing:normal;text-transform:none;
}
.formulaire option{background:var(--nuit)}
.fac{font-size:10px;opacity:.55;letter-spacing:.08em}
.accepte{flex-direction:row!important;align-items:flex-start;gap:11px;
  text-transform:none!important;letter-spacing:normal!important;font-size:13.5px!important;opacity:.9}
.accepte input{margin-top:4px;accent-color:var(--or);width:17px;height:17px;flex:none}
.resultat{margin-top:20px;border:1px solid var(--jade);border-radius:12px;
  padding:17px 19px;background:rgba(111,199,154,.09);font-size:14px}
.resultat b{color:var(--jade)}

/* ---------------- confiance ---------------- */
.registre{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:11px;margin-bottom:26px}
.registre div{border:1px solid var(--trait);border-radius:10px;padding:11px 14px}
.registre span{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.55;margin-bottom:3px}
.registre b{font-size:14.5px;font-weight:500;color:var(--or-pale)}
.tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th{text-align:left;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or);padding:9px 13px;border-bottom:1px solid var(--trait);font-weight:600}
.tab td{padding:11px 13px;border-bottom:1px solid rgba(201,162,39,.13);opacity:.88;vertical-align:top}

/* ---------------- pied ---------------- */
.pied{padding:44px 0 30px;background:var(--nuit-2)}
.pied-haut{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;opacity:.82}
.pied-liens{display:flex;gap:17px;flex-wrap:wrap}
.cr{border-top:1px solid var(--trait);margin-top:20px;padding-top:15px;
  font-size:11.5px;line-height:1.65;opacity:.62}

/* ---------------- avis ---------------- */
.avis{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:80;
  border-radius:10px;padding:12px 20px;font-size:14px;max-width:88vw;
  border:1px solid var(--or);background:rgba(6,43,28,.97);box-shadow:0 6px 26px rgba(0,0,0,.42)}
.avis.err{border-color:var(--brique);color:#F0A87E}
.avis.ok{border-color:var(--jade);color:var(--jade)}

@media(max-width:720px){
  .nav{gap:13px}
  .nav a{font-size:12.5px}
  .hero{padding:58px 0 50px}
  .bloc{padding:52px 0}
  .niv{grid-template-columns:1fr;gap:11px}
}

/* ---------------- choix du moyen de règlement ---------------- */
.reglement-choix{border-top:1px solid var(--trait);margin-top:22px;padding-top:20px}
.reglement-choix h4{margin:0 0 13px;font-size:15px;font-weight:600;color:var(--or-pale)}
.moyens{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;margin-bottom:18px}
.moyen{
  text-align:left;background:transparent;border:1px solid var(--trait);border-radius:12px;
  padding:14px 16px;cursor:pointer;font-family:inherit;color:var(--ivoire);
}
.moyen:hover{border-color:var(--or)}
.moyen.on{border-color:var(--or);background:rgba(201,162,39,.11)}
.moyen b{display:block;font-size:15px;color:var(--or-pale);margin-bottom:4px}
.moyen span{display:block;font-size:12.5px;opacity:.78;line-height:1.5}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.recap{
  background:rgba(11,93,59,.28);border:1px solid var(--trait);border-radius:11px;
  padding:13px 15px;font-size:13.5px;line-height:1.6;
}
.recap b{color:var(--or-vif)}
.recap ul{margin:7px 0 0;padding-left:17px;opacity:.85;font-size:12.5px}
.mention{font-size:12px;opacity:.68;margin:0;line-height:1.55}
@media(max-width:620px){.deux{grid-template-columns:1fr}}

/* ---------------- adresses de règlement ---------------- */
.alerte-reseau{
  border:1px solid var(--brique);background:rgba(196,99,47,.13);border-radius:9px;
  padding:11px 13px;margin:10px 0 14px;font-size:13px;color:#F0A87E;line-height:1.55;
}
.adr{border:1px solid var(--trait);border-radius:10px;padding:11px 13px;margin-bottom:9px}
.adr-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.adr-h b{color:var(--or-vif);font-size:15px}
.reseau{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--vert);color:#fff;border-radius:999px;padding:3px 10px}
.stable{font-size:11px;background:rgba(111,199,154,.2);color:var(--jade);
  border-radius:999px;padding:3px 10px}
.adr-v{word-break:break-all;font-size:12.5px;opacity:.92}
.adr-m{font-size:12px;opacity:.75;margin-top:5px}

/* ---------------- logo dans le hero ---------------- */
.hero{position:relative;overflow:hidden}
.hero-logo{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:min(300px,26vw);background:var(--ivoire);border-radius:22px;
  padding:22px 24px;box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.hero-logo img{width:100%;height:auto;display:block}
@media(max-width:1100px){.hero-logo{display:none}}

/* ---------------- sélecteur de langue ---------------- */
.sel-langue{display:inline-flex;gap:2px;border:1px solid var(--trait);border-radius:999px;padding:2px}
.sel-langue button{
  border:none;background:transparent;color:var(--ivoire);opacity:.62;
  border-radius:999px;padding:4px 9px;font-family:inherit;font-size:11.5px;
  font-weight:600;letter-spacing:.05em;cursor:pointer;
}
.sel-langue button:hover{opacity:1;color:var(--or-vif)}
.sel-langue button.on{background:var(--or);color:#3a2f08;opacity:1}
@media(max-width:720px){.sel-langue button{padding:4px 7px;font-size:11px}}