@import url("css/fonts.css");
/* Isolation Phonique Luxembourg — palette empruntée aux cartes de bruit stratégiques.
   violet = classe la plus exposée, orange = gêne, vert = objectif atteint.
   v52 : polices auto-hébergées (css/fonts.css, woff2 latin+latin-ext, font-display:swap)
   — zéro dépendance de police externe (règle dure 137). */
:root{
  --carte:#E8EBEE; --carte-2:#DDE2E7; --blanc:#FFFFFF;
  --encre:#12171E; --encre-60:#4A545F; --encre-40:#77808A;
  --bruit:#7B2D8E; --bruit-clair:#F1E6F5;
  --gene:#D9651A; --calme:#1E7A5A; --calme-clair:#E4F0EA;
  --trait:#C6CCD3;
  --d:'Syne',system-ui,sans-serif; --t:'Public Sans',system-ui,sans-serif;
  --m:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--carte);color:var(--encre);font-family:var(--t);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bruit)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

.narrow{max-width:760px}

h1,h2,h3{font-family:var(--d);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.2vw,2.35rem)}
h3{font-size:1.16rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.06rem,1.9vw,1.28rem);color:var(--encre-60);line-height:1.55}

.eyebrow{font-family:var(--m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bruit);margin:0 0 1.1em;display:block;font-weight:500}
.eyebrow.q{color:var(--encre-40)}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:50;background:rgba(232,235,238,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:66px}
.brand{font-family:var(--d);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--encre);text-decoration:none;line-height:1.15;flex:0 0 auto}
.brand small{display:block;font-family:var(--m);font-size:.6rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-40)}
.badge-zone{font-family:var(--m);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--encre);color:var(--carte);padding:4px 11px;border-radius:2px;
  white-space:nowrap;flex:0 0 auto}
nav.main{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--encre-60);text-decoration:none;font-size:.93rem}
nav.main a:hover,nav.main a:focus{color:var(--bruit)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--trait);
  border-radius:2px;padding:8px 12px;font-family:var(--m);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;color:var(--encre)}

/* ---- boutons ---- */
.btn{display:inline-block;background:var(--bruit);color:#fff;text-decoration:none;
  font-family:var(--t);font-weight:700;font-size:.97rem;padding:14px 26px;border:0;
  border-radius:2px;cursor:pointer;transition:background .15s ease,transform .15s ease}
.btn:hover,.btn:focus{background:#5F2170;color:#fff}
.btn.ghost{background:transparent;color:var(--encre);border:1px solid var(--encre)}
.btn.ghost:hover{background:var(--encre);color:#fff}
.btn.sm{padding:10px 18px;font-size:.88rem}
.btn[disabled]{opacity:.35;cursor:not-allowed}
a.plain{color:var(--encre-60);text-decoration:underline;text-underline-offset:3px;font-size:.95rem}

/* ---- hero ---- */
.hero{position:relative;padding:clamp(46px,7vw,86px) 0 clamp(34px,5vw,58px)}
.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
/* v45 : .hero-bg est un <img> (élément remplacé : ::after inopérant dessus) — overlay déplacé sur .hero */
.hero::after{content:'';position:absolute;inset:0;background:rgba(18,23,30,0.5);z-index:0;pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,48px);align-items:start}
.hero h1{max-width:16ch;color:#fff}
.hero .lede{color:rgba(255,255,255,.85)}
.hero .eyebrow{color:var(--bruit-clair)}
.hero .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px}
.hero .plain{color:rgba(255,255,255,.75)}
/* hero formulaire rapide */
.hero-form-wrap{background:var(--blanc);border-radius:3px;padding:20px 22px;box-shadow:0 4px 24px rgba(0,0,0,.18)}
.hero-form-titre{font-family:var(--d);font-weight:700;font-size:1.12rem;margin:0 0 14px;color:var(--encre)}
.hero-form input,.hero-form select{width:100%;padding:11px 12px;border:1px solid var(--trait);
  border-radius:2px;font-family:var(--t);font-size:.91rem;background:var(--blanc);color:var(--encre);margin-bottom:9px}
.hero-form input:focus,.hero-form select:focus{outline:2px solid var(--bruit);outline-offset:1px}
.hero-form .btn{width:100%;text-align:center;margin-top:4px}
.hero-form .consent.sm{font-size:.74rem;gap:7px;margin:9px 0 0;line-height:1.35;color:var(--encre-60)}
.hero-form .consent.sm input{width:14px;height:14px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--bruit)}
.hero-form-ok{background:var(--calme-clair);border:.5px solid var(--calme);border-radius:3px;padding:18px 20px;font-size:.94rem;color:var(--calme);font-weight:600;line-height:1.5}

/* ---- bandeau de repères ---- */
.reperes{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--blanc)}
.reperes .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.repere{padding:22px 22px 22px 0;border-right:1px solid var(--trait)}
.repere:last-child{border-right:0}
.repere b{font-family:var(--m);font-size:1.32rem;font-weight:700;display:block;color:var(--bruit)}
.repere span{font-size:.87rem;color:var(--encre-60);display:block;margin-top:4px}

/* ---- sections ---- */
section{padding:clamp(44px,6vw,78px) 0}
section.pale{background:var(--blanc);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.sec-head{max-width:760px;margin-bottom:clamp(26px,3.5vw,42px)}

/* ---- compteur de décibels (élément signature) ---- */
.meter{background:var(--blanc);border:1px solid var(--trait);border-radius:3px;
  padding:clamp(20px,3vw,34px)}
.meter-scale{position:relative;height:14px;border-radius:2px;overflow:hidden;
  display:flex;margin:30px 0 0}
.meter-scale i{display:block;height:100%}
.meter-ticks{position:relative;height:186px;margin-top:0}
.tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:132px}
.tick.b2{top:92px}
.tick em{display:block;width:1px;height:11px;background:var(--trait);margin:0 auto 7px}
.tick.b2 em{height:100px;margin-top:-100px}
.tick.first{transform:none;text-align:left}
.tick.first em{margin-left:0}
.tick.last{transform:translateX(-100%);text-align:right}
.tick.last em{margin-right:0;margin-left:auto}
.tick b{font-family:var(--m);font-size:.82rem;font-weight:700;display:block}
.tick span{font-size:.72rem;line-height:1.32;color:var(--encre-40);display:block;margin-top:3px}
.tick.calme b{color:var(--calme)} .tick.gene b{color:var(--gene)} .tick.bruit b{color:var(--bruit)}
.meter-move{position:relative;height:64px;margin-top:8px;border-top:1px dashed var(--trait);padding-top:16px}
.pin{position:absolute;top:16px;transform:translateX(-50%);font-family:var(--m);font-size:.74rem;
  white-space:nowrap;padding:5px 9px;border-radius:2px;transition:left 1.1s cubic-bezier(.22,1,.36,1)}
.pin.av{background:var(--bruit);color:#fff}
.pin.ap{background:var(--calme-clair);color:var(--calme);border:1px solid var(--calme)}
.meter-note{margin-top:22px;font-size:.95rem;color:var(--encre-60);max-width:64ch}

/* ---- pourquoi nous ---- */
.pq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.pq-card{background:var(--blanc);padding:26px}
.pq-ico{font-size:1.6rem;display:block;margin:0 0 10px;color:var(--bruit)}
.pq-card h3{font-size:1.05rem;margin-bottom:.4em}
.pq-card p{font-size:.92rem;color:var(--encre-60);margin:0}
/* ---- déroulé ---- */
.deroule{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.etape{background:var(--blanc);padding:24px 22px}
.etape-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--bruit);color:#fff;font-family:var(--m);font-size:.8rem;
  font-weight:700;margin:0 0 12px}
.etape h3{font-size:1.05rem;margin-bottom:.4em}
.etape p{font-size:.89rem;color:var(--encre-60);margin:0}
/* ---- cartes ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.card{background:var(--blanc);padding:26px}
.card h3{margin-bottom:.35em}
.card .meta{font-family:var(--m);font-size:.72rem;letter-spacing:.06em;color:var(--encre-40);
  margin:0 0 14px;display:flex;gap:14px;flex-wrap:wrap}
.card .meta b{color:var(--calme);font-weight:700}
.card p{font-size:.95rem;margin:0;color:var(--encre-60)}

/* ---- tableaux ---- */
.tbl{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.94rem;background:var(--blanc)}
.tbl th{text-align:left;font-family:var(--m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;padding:12px 14px;background:var(--encre);color:#fff;vertical-align:bottom}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--trait);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.6em}
.scroll-x .tbl{margin-bottom:0;min-width:520px}

/* ---- listes communes ---- */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.zone{background:var(--blanc);padding:22px;text-decoration:none;color:inherit;display:block}
.zone:hover{background:var(--bruit-clair)}
.zone b{font-family:var(--d);font-weight:700;display:block;font-size:1.05rem;margin-bottom:6px}
.zone span{font-size:.88rem;color:var(--encre-60)}

/* ---- quartiers ---- */
.quartier{border-left:2px solid var(--bruit);padding:2px 0 2px 22px;margin:0 0 26px}
.quartier h3{margin-bottom:.3em}
.quartier p{margin:0;color:var(--encre-60);font-size:.97rem}

/* ---- encart ---- */
.note{background:var(--bruit-clair);border-left:3px solid var(--bruit);padding:20px 24px;margin:0 0 1.6em}
.note p:last-child{margin:0}
.note .eyebrow{margin-bottom:.6em}
.note.ok{background:var(--calme-clair);border-left-color:var(--calme)}
.note.ok .eyebrow{color:var(--calme)}

/* ---- galerie ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.gal figure{margin:0;background:var(--blanc);border:1px solid var(--trait)}
.gal figcaption{padding:11px 14px;font-size:.83rem;color:var(--encre-60)}

/* ---- simulateur ---- */
.sim{background:var(--blanc);border:1px solid var(--trait);border-radius:3px;
  padding:clamp(22px,3.4vw,40px);max-width:760px;margin:0 auto}
.prog{height:3px;background:var(--carte-2);margin:0 0 26px;position:relative}
.prog i{display:block;height:100%;background:var(--bruit);width:10%;transition:width .3s ease}
.prog span{position:absolute;right:0;top:10px;font-family:var(--m);font-size:.68rem;
  letter-spacing:.1em;color:var(--encre-40)}
.step{display:none} .step.on{display:block;animation:in .28s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step h2{font-size:clamp(1.25rem,2.6vw,1.7rem)}
.step .aide{color:var(--encre-40);font-size:.9rem;margin:-.2em 0 1.5em}
.opts{display:grid;gap:9px;margin-bottom:26px}
.opt{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--trait);
  border-radius:2px;cursor:pointer;background:var(--blanc);font-size:.99rem;text-align:left;
  width:100%;font-family:var(--t);color:var(--encre);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--bruit)}
.opt.sel{border-color:var(--bruit);background:var(--bruit-clair)}
.opt .box{width:15px;height:15px;border:1px solid var(--encre-40);flex:0 0 auto;border-radius:2px}
.opt.sel .box{background:var(--bruit);border-color:var(--bruit)}
.sim input[type=text],.sim input[type=email]{width:100%;padding:14px 16px;border:1px solid var(--trait);
  border-radius:2px;font-family:var(--t);font-size:1rem;background:var(--blanc);color:var(--encre)}
.sim input:focus{outline:2px solid var(--bruit);outline-offset:1px}
.nav-row{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:6px}

/* ---- résultat ---- */
.result{text-align:left}
.range{font-family:var(--m);font-weight:700;font-size:clamp(1.8rem,5vw,2.9rem);
  color:var(--bruit);letter-spacing:-.02em;line-height:1.1;margin:6px 0 4px}
.range small{display:block;font-family:var(--t);font-size:.9rem;font-weight:400;
  color:var(--encre-40);letter-spacing:0;margin-top:8px}
.detail{list-style:none;padding:0;margin:24px 0;border-top:1px solid var(--trait)}
.detail li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--trait);font-size:.95rem}
.detail li b{font-family:var(--m);font-weight:500;white-space:nowrap}
.gain{display:inline-block;background:var(--calme-clair);color:var(--calme);border:1px solid var(--calme);
  font-family:var(--m);font-size:.8rem;padding:6px 12px;border-radius:2px;margin-bottom:18px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;font-size:.86rem;
  color:var(--encre-60);line-height:1.45}
.consent input{margin:3px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--bruit)}
.err{color:#B3261E;font-size:.87rem;margin:8px 0 0}

/* ---- FAQ ---- */
.faq details{background:var(--blanc);border:1px solid var(--trait);margin-bottom:9px;border-radius:2px}
.faq summary{padding:16px 20px;cursor:pointer;font-weight:600;list-style:none;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;font-family:var(--m);color:var(--bruit)}
.faq details[open] summary::after{content:'–'}
.faq .body{padding:0 20px 18px;color:var(--encre-60);font-size:.96rem}

/* ---- CTA bande ---- */
.band{background:var(--encre);color:#fff;padding:clamp(40px,5vw,64px) 0}
.band h2{color:#fff;max-width:20ch}
.band p{color:#B9C1C9;max-width:56ch}
.band .btn{background:#fff;color:var(--encre)}
.band .btn:hover{background:var(--bruit-clair);color:var(--encre)}

/* ---- fil d'ariane ---- */
.bc{font-family:var(--m);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre-40);padding:18px 0 0}
.bc a{color:var(--encre-40);text-decoration:none} .bc a:hover{color:var(--bruit)}

/* ---- article ---- */
article.post{max-width:760px}
article.post h2{margin-top:1.8em}
article.post .meta{font-family:var(--m);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-40);margin-bottom:1.4em}

/* ---- cookie banner (v26) ---- */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:10000;
  background:rgba(18,23,30,.96);color:#B9C1C9;padding:clamp(14px,2vw,22px) var(--pad);
  font-size:.88rem;line-height:1.5;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid #2A323B}
#cookie-banner p{margin:0;max-width:72ch;flex:1 1 300px}
#cookie-banner .btns{display:flex;gap:10px;flex-shrink:0}
#cookie-banner .btns .refuser{background:transparent;color:#B9C1C9;border:1px solid #4A545F;
  padding:9px 18px;border-radius:2px;font-family:var(--t);font-size:.88rem;cursor:pointer;
  font-weight:600;transition:border-color .15s,color .15s}
#cookie-banner .btns .refuser:hover{color:#fff;border-color:#fff}
#cookie-banner .btns .autoriser{background:var(--bruit);color:#fff;border:0;
  padding:9px 18px;border-radius:2px;font-family:var(--t);font-size:.88rem;cursor:pointer;
  font-weight:600;transition:background .15s}
#cookie-banner .btns .autoriser:hover{background:#5F2170}

/* ---- footer ---- */
footer.bot{background:var(--encre);color:#98A1AA;padding:52px 0 34px;font-size:.9rem}
footer.bot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:34px}
footer.bot h4{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 14px;font-weight:500}
footer.bot a{color:#98A1AA;text-decoration:none;display:block;margin-bottom:7px}
footer.bot a:hover{color:#fff}
footer.bot .fine{border-top:1px solid #2A323B;padding-top:22px;font-size:.79rem;color:#6C757E}
footer.bot .fine p{margin:0 0 .5em}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-form-wrap{margin-top:0}
  .reperes .wrap{grid-template-columns:1fr 1fr}
  .repere{padding:18px 18px 18px 0}
  .repere:nth-child(2){border-right:0}
}
/* ===== v52 §10.9/§13.54 — méga-footer réparti : 1 col mobile → 2 col @480px → 3 col @900px =====
   La répartition doit être une RÈGLE CSS, pas un commentaire. */
@media (min-width:480px) and (max-width:899px){
  footer.bot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:479px){
  footer.bot .cols{grid-template-columns:1fr}
}
@media (max-width:720px){
  .burger{display:block}
  nav.main{display:none;position:absolute;top:66px;left:0;right:0;background:var(--blanc);
    border-bottom:1px solid var(--trait);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px var(--pad) 18px;margin:0}
  nav.main.open{display:flex}
  nav.main a{padding:10px 0;width:100%;border-bottom:1px solid var(--carte-2)}
  .meter-ticks{height:auto!important;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
  .tick,.tick.b2,.tick.first,.tick.last{position:static;transform:none;width:auto;
    text-align:left;top:auto}
  .tick em{display:none}
  .meter-scale{margin-top:20px}
  .meter-move{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--bruit);outline-offset:2px}

/* ===== v48 §13.43 — contrat CSS bidirectionnel : classes utilisées, non définies ===== */
.article-hero{width:100%;max-width:min(720px,100%);height:auto;max-height:400px;object-fit:cover;border-radius:4px;margin:0 0 24px;display:block}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:560px}
/* v51 §13.52 — CTA toujours lisibles sur section colorée/foncée */
.cta-block .btn{color:#fff}
.cta-block .btn:hover{color:#fff}

/* ── v39 — Texte justifié sur tout le site (demande utilisateur) ── */
p, li, dd {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Exceptions UI : hero, footer, bandeau cookies, intros courtes, formulaires */
.hero p, .bot p, #cookie-banner p, .lede, .hero-form label, .rgpd-check,
table td p, table th p, .meta, .bc {
  text-align: left;
}

/* ── v39 — Photos des communes (§11.6) ── */
.ville-figure {
  max-width: min(820px, 100%);
  margin: clamp(18px, 3.5vw, 30px) 0;
}
.ville-figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(18, 23, 30, .1);
}

/* ===== v45 §10.9 — exigences mobiles (bloc obligatoire) ===== */
input, select, textarea { font-size: 16px; }
.hero-form input, .hero-form select, .sim input, .sim select { font-size: 16px; min-height: 44px; }
button { min-height: 44px; }
.burger { min-height: 44px; }
input[type="checkbox"] { min-height: 18px; }
@media (max-width: 640px) {
  .badge-zone { display: none; }
  .brand { font-size: 1.05rem; }
  .brand small { font-size: .82em; }
}
@media (max-width: 767px) {
  footer.bot .cols a, footer.bot .fine a { display: inline-block; padding: 12px 0; }
  nav.main a { padding: 13px 0; }
  #cookie-banner { flex-direction: column; align-items: stretch; gap: 10px; max-height: 34vh; overflow-y: auto; }
  #cookie-banner p { font-size: .78rem; line-height: 1.5; max-height: 5.4em; overflow-y: auto; }
  #cookie-banner button { min-height: 44px; }
}