/* Conseil communal de Tannay — guide pratique
   Feuille de style unique, sans dépendance externe (fonctionne hors ligne). */

:root{
  --bg:#f6f6f3;
  --surface:#ffffff;
  --surface-2:#f0f1ee;
  --ink:#1b232e;
  --muted:#5d6775;
  --line:#e3e3dd;
  --accent:#23527c;
  --accent-soft:#e8eef5;
  --gold:#8a6a1f;
  --gold-soft:#f6efdd;
  --ok:#2c6e49;
  --ok-soft:#e6f2ea;
  --warn:#8a5a12;
  --warn-soft:#fbf0dd;
  --bad:#9b2f2f;
  --bad-soft:#f8e8e6;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,25,35,.06), 0 8px 24px rgba(20,25,35,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14181e; --surface:#1c222b; --surface-2:#232a34; --ink:#e8ebef; --muted:#a2acba;
    --line:#2e3742; --accent:#7fb0e0; --accent-soft:#1f2c3a; --gold:#d6b263; --gold-soft:#2c2617;
    --ok:#7fc9a0; --ok-soft:#18291f; --warn:#e0b46a; --warn-soft:#2b2415;
    --bad:#e39a94; --bad-soft:#2d1c1b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em}
h1{font-size:1.9rem}
h2{font-size:1.4rem; margin-top:2.2rem; padding-top:.2rem}
h3{font-size:1.1rem; margin-top:1.6rem}
p{margin:0 0 1em}
a{color:var(--accent)}
ul,ol{margin:0 0 1em; padding-left:1.3em}
li{margin:.3em 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em}

/* ---------- Layout ---------- */
.wrap{max-width:960px; margin:0 auto; padding:0 20px 80px}
.wrap.wide{max-width:1120px}

/* ---------- En-tête ---------- */
header.site{background:var(--surface); border-bottom:1px solid var(--line)}
header.site .bar{max-width:960px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
header.site .brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto}
header.site .brand b{font-size:1.02rem; font-weight:680; letter-spacing:-.01em}
header.site .brand span{font-size:.8rem; color:var(--muted)}
nav.site{display:flex; gap:2px; flex-wrap:wrap}
nav.site a{
  text-decoration:none; color:var(--muted); font-size:.88rem; padding:6px 10px; border-radius:7px; white-space:nowrap;
}
nav.site a:hover{background:var(--surface-2); color:var(--ink)}
nav.site a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600}

/* ---------- Bandeau de page ---------- */
.hero{padding:34px 0 8px}
.hero .kicker{font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); font-weight:700; margin-bottom:8px}
.hero .lead{font-size:1.08rem; color:var(--muted); max-width:64ch}

/* ---------- Cartes ---------- */
.grid{display:grid; gap:14px; margin:18px 0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
a.card{text-decoration:none; color:inherit; display:block; transition:border-color .15s, transform .15s}
a.card:hover{border-color:var(--accent); transform:translateY(-1px)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card .num{font-size:1.6rem; font-weight:700; color:var(--accent); line-height:1}

/* ---------- Références légales ---------- */
.ref{
  display:inline-block; font-size:.76rem; font-weight:600; color:var(--gold);
  background:var(--gold-soft); border-radius:5px; padding:1px 7px; white-space:nowrap;
}
.ref + .ref{margin-left:4px}
.refs{margin-top:10px}

/* ---------- Encadrés ---------- */
.note, .tip, .warn-box, .quote{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:12px 16px; border-radius:0 8px 8px 0; margin:16px 0;
}
.tip{border-color:var(--ok); background:var(--ok-soft)}
.warn-box{border-color:var(--warn); background:var(--warn-soft)}
.quote{border-color:var(--gold); background:var(--gold-soft); font-style:italic}
.note p:last-child,.tip p:last-child,.warn-box p:last-child,.quote p:last-child{margin-bottom:0}
.note b,.tip b,.warn-box b{display:block; margin-bottom:2px}

/* Phrase à prononcer */
.say{
  background:var(--surface-2); border:1px dashed var(--line); border-radius:8px;
  padding:10px 14px; margin:10px 0; font-style:italic; color:var(--ink);
}
.say::before{content:"« "}
.say::after{content:" »"}

/* ---------- Tableaux ---------- */
.tablewrap{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:.94rem; min-width:520px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); font-weight:650; font-size:.84rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
tbody tr:last-child td{border-bottom:none}

/* ---------- Accordéons ---------- */
details.acc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin:10px 0; box-shadow:var(--shadow); overflow:hidden;
}
details.acc > summary{
  cursor:pointer; padding:14px 18px; font-weight:620; list-style:none; display:flex; gap:12px; align-items:flex-start;
}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::after{content:"+"; margin-left:auto; color:var(--muted); font-weight:400; font-size:1.2rem; line-height:1.2}
details.acc[open] > summary::after{content:"–"}
details.acc > summary:hover{background:var(--surface-2)}
details.acc .body{padding:2px 18px 18px; border-top:1px solid var(--line)}
details.acc .body > :first-child{margin-top:14px}

/* ---------- Chronologie de la séance ---------- */
.steps{position:relative; margin:24px 0 0; padding:0; list-style:none}
.steps::before{content:""; position:absolute; left:17px; top:8px; bottom:8px; width:2px; background:var(--line)}
.steps > li{position:relative; padding:0 0 0 52px; margin:0 0 12px}
.steps .dot{
  position:absolute; left:0; top:12px; width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}
.steps details.acc{margin:0}

/* ---------- Simulateur ---------- */
.sim{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.sim .scene{padding:22px 24px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.sim .scene .stage{font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); font-weight:700}
.sim .scene h2{margin:6px 0 8px; font-size:1.25rem}
.sim .scene p{margin:0; color:var(--ink)}
.sim .prompt{padding:20px 24px 6px; font-weight:620}
.sim .options{list-style:none; margin:0; padding:0 24px 22px; display:grid; gap:10px}
.sim .options button{
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:13px 16px;
  transition:border-color .15s, background .15s;
}
.sim .options button:hover{border-color:var(--accent); background:var(--accent-soft)}
.sim .options button .k{font-weight:700; color:var(--accent); margin-right:8px}
.sim .feedback{padding:0 24px 22px}
.fb{border-radius:8px; padding:14px 16px; border-left:3px solid}
.fb.ok{background:var(--ok-soft); border-color:var(--ok)}
.fb.attention{background:var(--warn-soft); border-color:var(--warn)}
.fb.faux{background:var(--bad-soft); border-color:var(--bad)}
.fb .verdict{font-weight:700; margin-bottom:4px; display:block}
.fb.ok .verdict{color:var(--ok)}
.fb.attention .verdict{color:var(--warn)}
.fb.faux .verdict{color:var(--bad)}
.fb p:last-child{margin-bottom:0}
.sim .actions{padding:0 24px 22px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:8px; padding:10px 18px;
  background:var(--accent); color:#fff; border:1px solid var(--accent); text-decoration:none; display:inline-block;
}
@media (prefers-color-scheme: dark){ .btn{color:#12181f} }
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft); filter:none}
.progress{height:4px; background:var(--surface-2)}
.progress > div{height:100%; background:var(--accent); width:0; transition:width .3s}
.journal{margin-top:22px}
.journal ol{padding-left:1.2em}
.journal li{color:var(--muted); font-size:.93rem}
.journal li b{color:var(--ink)}

.chooser{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:18px 0}
.chooser button{
  font:inherit; text-align:left; cursor:pointer; background:var(--surface); color:inherit;
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.chooser button:hover{border-color:var(--accent)}
.chooser button b{display:block; margin-bottom:4px; font-size:1.02rem}
.chooser button > span{display:block; color:var(--muted); font-size:.9rem}
.chooser button .pill{display:inline-block; margin-top:12px}

/* ---------- Lexique ---------- */
.searchbar{margin:20px 0 6px}
.searchbar input{
  width:100%; font:inherit; padding:12px 16px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.searchbar input:focus{outline:2px solid var(--accent); outline-offset:1px}
.count{font-size:.85rem; color:var(--muted); margin:0 0 14px}
.entry{border-bottom:1px solid var(--line); padding:16px 0}
.entry:last-child{border-bottom:none}
.entry h3{margin:0 0 6px; font-size:1.05rem}
.entry p{margin:0 0 6px}

/* ---------- Divers ---------- */
.pill{display:inline-block; font-size:.75rem; font-weight:650; padding:2px 9px; border-radius:20px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.pill.on{background:var(--accent-soft); color:var(--accent); border-color:transparent}
hr{border:none; border-top:1px solid var(--line); margin:34px 0}
footer.site{border-top:1px solid var(--line); background:var(--surface); padding:24px 20px 40px; color:var(--muted); font-size:.87rem}
footer.site .bar{max-width:960px; margin:0 auto}
footer.site a{color:var(--muted)}
.toc{background:var(--surface-2); border-radius:var(--radius); padding:14px 20px; margin:18px 0}
.toc ul{margin:0; padding-left:1.1em; columns:2; column-gap:28px}
.toc li{break-inside:avoid}
@media (max-width:560px){ .toc ul{columns:1} }

/* ---------- Impression ---------- */
@media print{
  header.site, footer.site, .noprint, .hero .lead{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .card,.tablewrap,details.acc{box-shadow:none; break-inside:avoid}
  details.acc{border:1px solid #ccc}
  details.acc .body{display:block !important}
  details.acc::details-content{content-visibility:visible !important; display:block !important}
  details.acc > summary::after{content:"" !important}
  .wrap{max-width:none; padding:0}
  h2{page-break-after:avoid}
  a{color:#000; text-decoration:none}
}

/* ═══════════ Consultation des articles ═══════════ */

/* Puce cliquable */
.ref.ref-on{
  cursor:pointer; border:none; font:inherit; font-size:.76rem; font-weight:600;
  color:var(--gold); background:var(--gold-soft); border-radius:5px; padding:1px 7px;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--gold) 45%, transparent);
}
.ref.ref-on:hover{ background:var(--gold); color:var(--surface); text-decoration-color:transparent }
.ref.ref-on:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-color-scheme: dark){ .ref.ref-on:hover{ color:#1b1305 } }

/* Voile */
.art-fond{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(12,16,22,.55); backdrop-filter:blur(2px);
}
.art-fond[hidden]{ display:none }

/* Panneau */
.art-modal{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 48px rgba(10,14,20,.35);
  max-width:44rem; width:100%; max-height:82vh; display:flex; flex-direction:column;
}
.art-tete{
  display:flex; align-items:flex-start; gap:14px; padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.art-tete .src{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin:0 0 3px;
}
.art-tete h2{ margin:0; font-size:1.1rem; border:none; padding:0 }
.art-fermer{
  margin-left:auto; flex:none; cursor:pointer; background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:7px; width:30px; height:30px; font-size:1.1rem; line-height:1;
}
.art-fermer:hover{ background:var(--surface-2); color:var(--ink) }
.art-fermer:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.art-corps{ overflow-y:auto; padding:4px 22px 20px }
.art-corps article + article{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line) }
.art-corps h3{
  margin:18px 0 2px; font-size:1rem; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.art-corps h3 .marge{ font-weight:500; color:var(--muted); font-size:.9rem }
.art-corps .renvois{ font-size:.78rem; color:var(--muted); margin:2px 0 10px }
.art-corps p{ margin:0 0 .7em; font-size:.95rem; line-height:1.6 }
.art-corps p.puce{ padding-left:1.6em; text-indent:-1.6em }
.art-pied{
  border-top:1px solid var(--line); padding:12px 22px 14px;
  font-size:.78rem; color:var(--muted); background:var(--surface-2);
  border-radius:0 0 12px 12px;
}
.art-pied a{ color:var(--muted) }

@media (max-width:560px){
  .art-fond{ padding:0; align-items:flex-end }
  .art-modal{ max-height:88vh; border-radius:12px 12px 0 0 }
  .art-pied{ border-radius:0 }
}
@media (prefers-reduced-motion: no-preference){
  .art-modal{ animation:art-in .16s ease-out }
  @keyframes art-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
}
@media print{ .art-fond{ display:none !important } }