/* ============================================================
   POLICES HÉBERGÉES EN LOCAL
   Plus aucun appel à Google Fonts : le site s'affiche même si un
   CDN est bloqué, et aucune donnée du visiteur ne part chez un
   tiers (conformité RGPD).
   ============================================================ */
@font-face{font-family:"Marcellus";src:url("vendor/fonts/marcellus-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("vendor/fonts/public-sans-latin-300-normal.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("vendor/fonts/public-sans-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("vendor/fonts/public-sans-latin-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("vendor/fonts/public-sans-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("vendor/fonts/public-sans-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --encre:#1B1A16;        /* anthracite chaud du blason */
  --noir:#100E0A;         /* charbon profond */
  --bleu:#8A5E12;         /* repurposé : or foncé pour les liens (fini le bleu) */
  --bleu-d:#2B2924;       /* charbon clair (dégradé bandeaux) */
  --bleu-clair:#C8891A;   /* anneau de focus */
  --azur:#C8891A;
  --jaune:#E9DD00;        /* JAUNE exact du blason */
  --jaune-clair:#F2E84D;
  --parchemin:#F6F1C0;    /* parchemin clair du blason */
  --or:#C8891A;           /* or profond : filets, accents */
  --or-txt:#8A5E12;       /* or lisible pour texte sur fond clair */
  --ocre:#8A5E12;         /* eyebrows sur fond clair */
  --terre:#B5551F;        /* terre cuite */
  --tuile:#B5551F;
  --grenat:#8C2B3E;
  --vigne:#5E7A3A;        /* vigne / garrigue */
  --aubergine:#5E3A5E;
  --pierre:#F7F1E6;
  --pierre-2:#EFE7D7;
  --ink:#20242A;
  --muet:#5C6169;
  --trait:#E6DFCF;
  --blanc:#FFFFFF;
  --alerte:#B23120;
  --alerte-bg:#FBEAE7;
  --ok:#2E7D52;
  --shadow:0 1px 2px rgba(16,36,61,.06), 0 10px 30px rgba(16,36,61,.08);
  --radius:10px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--blanc);line-height:1.6;font-size:17px;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.15;color:var(--encre);font-weight:600}
p{margin:0 0 1rem}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.marcellus{font-family:"Marcellus",Georgia,serif;font-weight:400;letter-spacing:.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ocre)}
:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- Barre utilitaire ---------- */
.util{background:var(--encre);color:#D9E2E8;font-size:.82rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap}
.util a{color:#fff}
.util .left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.today{display:inline-flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(46,125,82,.25)}
.dot.closed{background:#C6553B;box-shadow:0 0 0 3px rgba(198,85,59,.25)}
.util .right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.util .right a{display:inline-flex;align-items:center;gap:7px}

/* ---------- Entête ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--trait)}
.head{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:52px;height:52px;object-fit:contain}
.brand .name{display:flex;flex-direction:column;line-height:1.05}
.brand .name b{font-family:"Marcellus",serif;font-weight:400;font-size:1.28rem;color:var(--encre);letter-spacing:.02em}
.brand .name span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muet)}
nav.main{display:flex;align-items:center;gap:2px}
nav.main > ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
nav.main > ul > li{position:relative}
nav.main a.nav-link,nav.main button.nav-link{
  font:inherit;font-weight:500;font-size:.96rem;color:var(--encre);background:none;border:0;cursor:pointer;
  padding:10px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:6px
}
nav.main a.nav-link:hover,nav.main button.nav-link:hover,nav.main li:hover > .nav-link{background:var(--pierre);text-decoration:none}
nav.main .caret{width:8px;height:8px;border-right:2px solid var(--muet);border-bottom:2px solid var(--muet);transform:rotate(45deg);margin-top:-3px;margin-left:2px}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--trait);border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
nav.main li:hover .submenu,nav.main li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.94rem}
.submenu a:hover{background:var(--pierre);text-decoration:none;color:var(--encre)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;padding:11px 18px;border-radius:9px;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:.15s}
.btn-primary{background:var(--jaune);color:var(--encre)}
.btn-primary:hover{background:var(--encre);color:var(--jaune);text-decoration:none}
.btn-ghost{background:#fff;border-color:var(--trait);color:var(--encre)}
.btn-ghost:hover{background:var(--pierre);text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--trait);border-radius:9px;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--encre);margin:4px 0}

/* ---------- Héros ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--encre)}
.hero .bg{position:absolute;inset:0;background:center/cover no-repeat}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(16,14,10,.92) 0%,rgba(27,26,22,.55) 52%,rgba(181,85,31,.42) 108%)}
.hero .wrap{position:relative;padding:clamp(48px,8vw,104px) clamp(18px,4vw,40px) clamp(40px,6vw,72px)}
.hero .eyebrow{color:#F2E84D}
/* plaque de rue émaillée */
.plaque{display:inline-block;background:var(--jaune);border:2px solid var(--encre);border-radius:12px;
  box-shadow:inset 0 0 0 3px var(--jaune),inset 0 0 0 4px rgba(38,41,46,.85),0 12px 34px rgba(0,0,0,.45);
  padding:18px clamp(22px,4vw,46px);margin:14px 0 22px}
.plaque h1{color:var(--encre);font-family:"Marcellus",serif;font-weight:400;
  font-size:clamp(2.1rem,6vw,4rem);letter-spacing:.02em;line-height:1.02;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.hero .lede{font-size:clamp(1.05rem,2.2vw,1.28rem);max-width:44ch;color:#EAF1F4;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:11px 16px;border-radius:999px;font-weight:600;font-size:.95rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.chip:hover{background:var(--jaune);color:var(--encre);text-decoration:none}
.chip svg{width:17px;height:17px}

/* ---------- Sections ---------- */
section{padding:clamp(52px,7vw,88px) 0}
.band{background:var(--pierre)}
.sec-dark{background:linear-gradient(160deg,var(--bleu-d) 0%,var(--encre) 100%);color:#D3E0EE}
.sec-dark h2,.sec-dark .marcellus{color:#fff}
.sec-dark > .wrap > div > p{color:#BFD0E1}
.sec-dark .eyebrow{color:#F0C766}
.sec-dark .quicklinks a{color:#fff;border-color:rgba(255,255,255,.18)}
.sec-dark .quicklinks a:hover{color:#F3D07E}
.sec-dark .quicklinks .arw{color:#F0C766}
.sec-head{max-width:640px;margin-bottom:38px}
.sec-head h2{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.5rem 0 .6rem}
.sec-head p{color:var(--muet);margin:0}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}

/* ---------- Actualités ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
.card{background:#fff;border:1px solid var(--trait);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(19,42,60,.13)}
.card .thumb{height:200px;background:var(--pierre-2) center/cover no-repeat;position:relative}
@supports (aspect-ratio:3/2){ .card .thumb{height:auto;aspect-ratio:3/2} }
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;color:var(--or-txt);background:#F3EAD1}
.tag--vie-locale{color:#4E6B2E;background:#E9F0E1}
.tag--conseil{color:#5A4A16;background:#F3EAD1}
.tag--travaux{color:#A6551F;background:#F7E7DE}
.tag--culture{color:#6E3B6E;background:#F0E6F0}
.tag--sport{color:#4E6B2E;background:#EDF0DD}
.tag--ecole{color:#B06A1F;background:#FBF0DE}
.tag--solidarite{color:#9C3A5A;background:#F7E4EC}
.tag--ceremonie{color:#7A6A2A;background:#F1EBD2}
.tag--infos{color:#8A5E12;background:#F3EAD1}
.tag--alerte,.tag.alerte{color:#B23120;background:#FBEAE7}
.tag--prevention{color:#96661C;background:#FBF1DE}
.card h3{font-size:1.16rem;font-weight:600;line-height:1.25}
.card h3 a{color:var(--encre)}
.card .excerpt{color:var(--muet);font-size:.96rem;margin:0}
.card .meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;color:var(--muet);font-size:.83rem}
.card .read{color:var(--bleu);font-weight:600;font-size:.9rem}
.card .del{background:none;border:1px solid var(--trait);color:#B4471F;border-radius:7px;padding:5px 9px;font:inherit;font-size:.8rem;cursor:pointer;display:none}
body.admin-on .card .del{display:inline-block}
.center{text-align:center;margin-top:40px}

/* ---------- En un clic ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;transition:.16s;color:var(--encre)}
.tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D4CBB6}
.tile .ic{width:58px;height:58px;border-radius:14px;background:var(--pierre);display:grid;place-items:center;color:var(--bleu)}
.tiles .tile:nth-child(1) .ic{background:#FBF0D3;color:var(--ocre)}
.tiles .tile:nth-child(2) .ic{background:#E9F0E1;color:#4E6B2E}
.tiles .tile:nth-child(3) .ic{background:#F7E7DE;color:var(--terre)}
.tiles .tile:nth-child(4) .ic{background:#F0E6F0;color:var(--aubergine)}
.tiles .tile:nth-child(1):hover{border-color:#E6D3A6}
.tiles .tile:nth-child(2):hover{border-color:#BFD8BF}
.tiles .tile:nth-child(3):hover{border-color:#E6C3B0}
.tiles .tile:nth-child(4):hover{border-color:#D6C0D6}
.tile .ic svg{width:30px;height:30px}
.tile b{font-size:1.02rem;letter-spacing:.02em}
.tile small{color:var(--muet);font-weight:400}

/* ---------- Mairie ---------- */
.mairie{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.quicklinks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px}
.quicklinks a{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--trait);color:var(--encre);font-weight:500}
.quicklinks a:hover{color:var(--bleu);text-decoration:none}
.quicklinks .arw{margin-left:auto;color:var(--bleu)}
.info-card{background:#fff;border:1px solid var(--trait);border-radius:16px;box-shadow:var(--shadow);padding:28px;position:sticky;top:96px}
.info-card h3{font-size:1.15rem;margin-bottom:6px}
.info-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--trait);align-items:flex-start}
.info-row:last-of-type{border-bottom:0}
.info-row .k{color:var(--muet);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;min-width:96px;padding-top:2px}
.info-row .v{font-weight:500}
.hours{margin:0;padding:0;list-style:none;font-size:.95rem}
.hours li{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
.hours li span:first-child{color:var(--muet)}
.form{display:grid;gap:12px;margin-top:18px}
.form label{font-size:.85rem;font-weight:600;color:var(--encre)}
.form input,.form textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--trait);border-radius:9px;background:var(--pierre);color:var(--ink)}
.form input:focus,.form textarea:focus{background:#fff;border-color:var(--bleu)}

/* ---------- Numéros utiles ---------- */
.utiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.u-item{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--jaune);border-radius:14px;padding:22px}
.utiles .u-item:nth-child(2){border-top-color:var(--tuile)}
.utiles .u-item:nth-child(3){border-top-color:var(--vigne)}
.utiles .u-item:nth-child(4){border-top-color:var(--or)}
.u-item .lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ocre);font-weight:700}
.u-item .big{font-family:"Marcellus",serif;font-size:1.5rem;color:var(--encre);margin-top:6px}
.u-item p{margin:6px 0 0;color:var(--muet);font-size:.92rem}

/* ---------- Pied ---------- */
footer.site{background:var(--encre);color:#C7D2DA;padding:64px 0 30px;font-size:.95rem}
footer.site a{color:#EAF1F4}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.foot-brand .name b{font-family:"Marcellus",serif;font-size:1.3rem;color:#fff;display:block}
.foot-col h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.social{display:flex;gap:12px;margin-top:14px}
.social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.social a:hover{background:var(--bleu)}
.social svg{width:19px;height:19px;fill:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#9FB0BB}
.foot-bottom a{color:#9FB0BB}
.elu-link{background:none;border:0;color:#9FB0BB;font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:0}

/* ---------- Modale admin ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,25,35,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);width:min(620px,100%);max-height:90vh;overflow:auto}
.modal .m-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--trait)}
.modal .m-head h3{font-family:"Marcellus",serif;font-weight:400;font-size:1.4rem}
.modal .m-body{padding:24px 26px}
.modal .x{background:var(--pierre);border:0;width:36px;height:36px;border-radius:9px;font-size:1.1rem;cursor:pointer;color:var(--encre)}
.cat-pick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.cat-pick button{font:inherit;font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--trait);background:#fff;color:var(--muet);cursor:pointer}
.cat-pick button.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.admin-bar{background:var(--ocre);color:#fff;display:none;align-items:center;justify-content:center;gap:16px;padding:10px;font-size:.9rem;font-weight:500}
body.admin-on .admin-bar{display:flex}
.admin-bar button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font:inherit;font-weight:600;padding:6px 14px;border-radius:8px;cursor:pointer}
.hint{font-size:.85rem;color:var(--muet);margin-top:8px}
.err{color:var(--alerte);font-size:.88rem;margin-top:8px;min-height:1.2em}

/* ---------- Bandeau défilant ---------- */
.ticker{display:flex;align-items:stretch;background:var(--encre);color:#fff;overflow:hidden;border-bottom:2px solid var(--jaune)}
.ticker-label{flex:none;display:flex;align-items:center;background:var(--jaune);color:var(--encre);
  font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:0 16px;white-space:nowrap;position:relative;z-index:2}
.ticker-label::after{content:"";position:absolute;right:-11px;top:0;bottom:0;width:11px;background:var(--jaune);clip-path:polygon(0 0,100% 50%,0 100%)}
.ticker-vp{overflow:hidden;flex:1;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:ticker 34s linear infinite;padding-left:24px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px;padding:11px 30px 11px 0;font-size:.92rem}
.ticker-item a{color:#fff;font-weight:500}
.ticker-item a:hover{color:var(--jaune);text-decoration:none}
.ticker-item .d{width:6px;height:6px;border-radius:50%;background:var(--jaune);flex:none}
.ticker-item .cat{color:var(--jaune-clair);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;overflow-x:auto;max-width:100%}}

/* ---------- Ambiance héros (three.js) ---------- */
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2}

/* ---------- Reveals au scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Recherche + filtres (pensés seniors) ---------- */
.news-tools{margin:0 0 30px}
.search{position:relative;max-width:540px}
.search .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--muet);pointer-events:none}
.search input{width:100%;font:inherit;font-size:1.1rem;padding:16px 48px 16px 50px;border:2px solid var(--trait);border-radius:12px;background:#fff}
.search input:focus{border-color:var(--encre);outline:none}
.search .clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:var(--pierre);width:36px;height:36px;border-radius:9px;font-size:1.1rem;cursor:pointer;color:var(--encre);display:none}
.search .clear.show{display:block}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.filter{font:inherit;font-weight:600;font-size:1rem;min-height:46px;padding:9px 17px;border-radius:999px;border:2px solid var(--trait);background:#fff;color:var(--encre);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:.14s}
.filter:hover{border-color:var(--encre)}
.filter .cdot{width:11px;height:11px;border-radius:50%;background:var(--muet);flex:none}
.filter.on{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
.filter.on .cdot{background:var(--encre)}
.results-count{margin:20px 0 0;color:var(--muet);font-size:1rem;font-weight:500}
.empty{padding:44px 20px;text-align:center;color:var(--muet);background:#fff;border:1px dashed var(--trait);border-radius:14px;font-size:1.02rem}
.card .thumb{position:relative}
.card .ev-badge{position:absolute;top:12px;left:12px;background:var(--jaune);color:var(--encre);font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.card .ev-note{font-size:.84rem;color:var(--or-txt);font-weight:600;margin:0}

/* ---------- Agenda timeline ---------- */
#agenda .tl{margin-top:6px}
.tl-line{list-style:none;margin:0;padding:0}
.tl-item{position:relative;display:grid;grid-template-columns:92px 1fr;gap:24px;padding:0 0 26px}
.tl-item::before{content:"";position:absolute;left:45px;top:10px;bottom:-6px;width:2px;background:var(--trait)}
.tl-item:last-child::before{display:none}
.tl-date{position:relative;z-index:1;background:var(--encre);color:#fff;border-radius:12px;padding:12px 6px;text-align:center;align-self:start;box-shadow:var(--shadow)}
.tl-date .d{font-family:"Marcellus",serif;font-size:1.75rem;line-height:1}
.tl-date .m{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--jaune);margin-top:4px}
.tl-card{background:#fff;border:1px solid var(--trait);border-left:5px solid var(--jaune);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.tl-card h3{font-size:1.14rem;margin-bottom:6px}
.tl-meta{color:var(--muet);font-size:.92rem;display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}
.tl-meta span{display:inline-flex;align-items:center;gap:7px}
.tl-empty{color:var(--muet);background:#fff;border:1px dashed var(--trait);border-radius:14px;padding:34px;text-align:center;font-size:1.02rem}

/* ---------- Upload image + champs événement (admin) ---------- */
.up{border:2px dashed var(--trait);border-radius:12px;padding:16px;text-align:center;background:var(--pierre);cursor:pointer;display:block;color:var(--muet);font-size:.92rem}
.up:hover{border-color:var(--encre)}
.up input[type=file]{display:none}
.up .prev{max-height:150px;border-radius:8px;margin:0 auto 10px;display:none}
.up .prev.show{display:block}
.switch{display:flex;align-items:center;gap:12px;margin:18px 0 2px;cursor:pointer;font-weight:600;font-size:.95rem}
.switch input{width:20px;height:20px;accent-color:var(--encre)}
.ev-fields{display:none}
.ev-fields.show{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ev-fields .full{grid-column:1/-1}

@media (max-width:600px){
  .tl-item{grid-template-columns:72px 1fr;gap:14px}
  .tl-item::before{left:35px}
  .tl-date .d{font-size:1.45rem}
  .ev-fields.show{grid-template-columns:1fr}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .mairie{grid-template-columns:1fr;gap:32px}
  .info-card{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav.main{position:fixed;inset:78px 0 auto 0;background:#fff;border-bottom:1px solid var(--trait);
    flex-direction:column;align-items:stretch;padding:14px;box-shadow:var(--shadow);display:none}
  nav.main.open{display:flex}
  nav.main > ul{flex-direction:column;gap:2px}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--trait);border-radius:0;margin:2px 0 6px 12px;padding:2px 0}
  .header-cta{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Sous-pages : bannière, fil d'ariane, contenu, blocs
   ============================================================ */
.nav-link.active{box-shadow:inset 0 -3px 0 var(--jaune)}
.page-banner{position:relative;background:linear-gradient(160deg,var(--bleu-d) 0%,var(--encre) 100%);color:#fff;padding:clamp(38px,6vw,64px) 0 clamp(34px,5vw,52px);overflow:hidden}
.page-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(233,221,0,.18),transparent 70%);pointer-events:none}
.page-banner .wrap{position:relative;z-index:1}
.page-banner .eyebrow{color:#F2E84D}
.page-banner h1{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(2rem,4.6vw,3.1rem);margin:.4rem 0 0}
.page-banner p{color:#C7D2DA;max-width:60ch;margin:.7rem 0 0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--muet);margin-bottom:6px}
.breadcrumb a{color:var(--muet)}
.breadcrumb a:hover{color:var(--encre)}
.breadcrumb .sep{opacity:.5}
.page-banner .breadcrumb{color:#AEBCC6}
.page-banner .breadcrumb a{color:#AEBCC6}
.page-banner .breadcrumb a:hover{color:#fff}

.prose{max-width:70ch;font-size:1.05rem}
.prose h3{font-family:"Marcellus",serif;font-weight:400;font-size:1.5rem;margin:0 0 .5rem}
.prose p{margin:0 0 1.1rem;color:var(--ink)}
.prose a{font-weight:600}
.anchor{scroll-margin-top:150px}
.block{padding:clamp(46px,6vw,74px) 0}
.block + .block{border-top:1px solid var(--trait)}

.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:8px}
.info-card2{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.info-card2 h4{font-size:1.1rem;margin-bottom:8px}
.info-card2 p{color:var(--muet);margin:0 0 .6rem}

.link-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;max-width:620px}
.link-list a{display:flex;align-items:center;gap:12px;padding:15px 6px;border-bottom:1px solid var(--trait);color:var(--encre);font-weight:500}
.link-list a:hover{color:var(--bleu)}
.link-list .arw{margin-left:auto;color:var(--or)}

.doc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.doc-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--trait);border-left:4px solid var(--jaune);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.doc-item .di{width:42px;height:42px;flex:none;border-radius:10px;background:var(--pierre);display:grid;place-items:center;color:var(--terre)}
.doc-item .dt{font-weight:600}
.doc-item .dm{color:var(--muet);font-size:.88rem}
.doc-item .dl{margin-left:auto;font-weight:600;color:var(--bleu);white-space:nowrap}

.elus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:8px}
.elu{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:20px;text-align:center;box-shadow:var(--shadow)}
.elu .av{width:60px;height:60px;border-radius:50%;background:var(--pierre);display:grid;place-items:center;margin:0 auto 12px;color:var(--encre);font-family:"Marcellus",serif;font-size:1.4rem}
.elu.maire{border:2px solid var(--jaune);background:linear-gradient(180deg,#FFFDF2,#fff)}
.elu .role{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--or-txt);font-weight:700}
.elu .nm{font-weight:600;margin-top:3px}

.todo{background:#FFFDF2;border:1px dashed var(--or);border-radius:12px;padding:16px 20px;color:#6B5A1E;font-size:.95rem;margin-top:14px}
.todo b{color:var(--encre)}

.compostelle{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;background:linear-gradient(160deg,var(--bleu-d),var(--encre));color:#fff;border-radius:18px;padding:28px clamp(22px,4vw,36px);margin-top:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.compostelle .shell{width:82px;height:76px;flex:none;filter:drop-shadow(0 3px 8px rgba(233,221,0,.35))}
.compostelle .shell-body{fill:url(#shellGrad);stroke:#C9B400;stroke-width:1;
  stroke-dasharray:520;stroke-dashoffset:520;opacity:0}
.compostelle .shell-ribs path{fill:none;stroke:#C9B400;stroke-width:1.1;stroke-linecap:round;opacity:.55;
  stroke-dasharray:80;stroke-dashoffset:80}
.compostelle .shell-hinge{fill:#C9B400;opacity:0}
/* quand la section entre à l'écran : la coquille se dessine puis se remplit */
.compostelle.drawn .shell-body{animation:shellDraw 1.1s ease forwards}
.compostelle.drawn .shell-hinge{animation:fadeIn .5s ease .3s forwards}
.compostelle.drawn .shell-ribs path{animation:ribDraw .7s ease forwards}
.compostelle.drawn .shell-ribs path:nth-child(1){animation-delay:.55s}
.compostelle.drawn .shell-ribs path:nth-child(2){animation-delay:.65s}
.compostelle.drawn .shell-ribs path:nth-child(3){animation-delay:.75s}
.compostelle.drawn .shell-ribs path:nth-child(4){animation-delay:.85s}
.compostelle.drawn .shell-ribs path:nth-child(5){animation-delay:.65s}
.compostelle.drawn .shell-ribs path:nth-child(6){animation-delay:.75s}
.compostelle.drawn .shell-ribs path:nth-child(7){animation-delay:.85s}
@keyframes shellDraw{0%{stroke-dashoffset:520;opacity:1;fill-opacity:0}
  60%{opacity:1;fill-opacity:0}100%{stroke-dashoffset:0;opacity:1;fill-opacity:1}}
@keyframes ribDraw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.compostelle h3{color:#fff;font-family:"Marcellus",serif;font-weight:400;font-size:1.5rem;margin:0 0 8px}
.compostelle p{color:#D3E0EE;margin:0 0 .7rem}
/* le chemin : les étapes reliées par une piste où des pas apparaissent un à un */
.compostelle .route{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:12px}
.compostelle .step{position:relative;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;font-size:.82rem;z-index:2}
.compostelle .step.here{background:var(--jaune);color:var(--encre);border-color:var(--jaune);font-weight:700}
/* segment de piste + empreintes entre deux étapes */
.compostelle .step + .step{margin-left:44px}
.compostelle .step + .step::before{content:"";position:absolute;left:-42px;right:calc(100% + 6px);top:50%;
  height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 5px,transparent 5px 10px);
  transform:translateY(-50%)}
/* deux empreintes de pas par segment, cachées puis révélées en marchant */
.compostelle .step + .step::after{content:"";position:absolute;left:-34px;top:50%;width:26px;height:12px;
  transform:translateY(-50%);
  background:
    radial-gradient(closest-side,var(--jaune) 92%,transparent) -2px -4px/8px 10px no-repeat,
    radial-gradient(closest-side,var(--jaune) 92%,transparent) 10px 4px/8px 10px no-repeat;
  opacity:0}
.compostelle.walking .step + .step::after{animation:stepsIn .5s ease forwards}
.compostelle.walking .step:nth-child(2)::after{animation-delay:.5s}
.compostelle.walking .step:nth-child(3)::after{animation-delay:1s}
.compostelle.walking .step:nth-child(4)::after{animation-delay:1.5s}
@keyframes stepsIn{0%{opacity:0;transform:translateY(-50%) scale(.6)}
  60%{opacity:.95}100%{opacity:.8;transform:translateY(-50%) scale(1)}}
@media (max-width:600px){.compostelle{grid-template-columns:1fr}
  .compostelle .step + .step{margin-left:0}
  .compostelle .step + .step::before,.compostelle .step + .step::after{display:none}}
@media (prefers-reduced-motion:reduce){
  .compostelle .shell-body{opacity:1;stroke-dashoffset:0;fill-opacity:1}
  .compostelle .shell-ribs path{stroke-dashoffset:0;opacity:.55}
  .compostelle .shell-hinge{opacity:1}
  .compostelle .step + .step::after{opacity:.8;animation:none}
}

.contact-band{background:var(--pierre)}
.mini-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.mini-contact .u-item{border-top:4px solid var(--jaune)}

.noscript-note{background:#FBEAE7;color:#7A1F12;padding:12px 16px;text-align:center;font-size:.92rem}

/* élus avec photo + syndicats + années de PV */
.elu .ph{width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;background:var(--pierre);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.elu .del2{font-size:.82rem;color:var(--ink);margin-top:6px;font-weight:500}
.elu .cm{font-size:.76rem;color:var(--muet);margin-top:6px;line-height:1.45}
.subhead{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;color:var(--or-txt);margin:34px 0 12px}
.cr-year{font-family:"Marcellus",serif;font-weight:400;font-size:1.3rem;color:var(--encre);margin:28px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--jaune);display:inline-block}
.synd-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.synd-list li{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--vigne);border-radius:12px;padding:14px 18px}
.synd-list .sn{font-weight:700;color:var(--encre);font-size:.95rem}
.synd-list .sm{color:var(--muet);font-size:.9rem;margin-top:3px}

/* éléments réservés au mode élu + suppression de document */
.admin-only{display:none}
body.admin-on .admin-only{display:inline-flex}
.doc-del{margin-left:10px;background:#fff;border:1px solid var(--trait);color:var(--alerte);border-radius:8px;width:34px;height:34px;font:inherit;cursor:pointer;align-items:center;justify-content:center;flex:none}
.doc-del:hover{background:var(--alerte-bg)}
#btnAddBulletin{margin-bottom:16px}

/* annuaire (services / entreprises / associations) */
.dir-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;max-width:680px}
.dir-list li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--trait)}
.dir-list .chk{width:18px;height:18px;color:var(--vigne);flex:none}
.dir-list a{font-weight:500;color:var(--encre)}
.dir-list a:hover{color:var(--bleu)}
.dir-note{color:var(--muet);font-size:.9rem}
.dir-del{margin-left:auto;background:#fff;border:1px solid var(--trait);color:var(--alerte);border-radius:8px;width:30px;height:30px;cursor:pointer;flex:none;font:inherit}
.dir-del:hover{background:var(--alerte-bg)}
.add-dir-btn{margin-top:16px}

/* accordéon patrimoine */
.mon-acc{display:grid;gap:14px;margin-top:20px}
details.mon{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--jaune);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
details.mon>summary{cursor:pointer;padding:18px 22px;font-family:"Marcellus",serif;font-size:1.25rem;color:var(--encre);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
details.mon>summary::-webkit-details-marker{display:none}
details.mon>summary::after{content:"+";font-size:1.5rem;color:var(--or);line-height:1}
details.mon[open]>summary::after{content:"–"}
details.mon .mon-body{padding:2px 22px 22px}
details.mon .mon-body h4{margin:1.2rem 0 .4rem;color:var(--encre);font-size:1rem}
details.mon .mon-body p{margin:0 0 1rem;color:var(--ink)}
details.mon .mon-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--or-txt);font-weight:700}

/* épinglage d'articles */
.pin-badge{position:absolute;top:12px;right:12px;background:var(--encre);color:var(--jaune);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.pin-btn{display:none;background:#fff;border:1px solid var(--trait);border-radius:7px;padding:4px 8px;font-size:.85rem;cursor:pointer;filter:grayscale(1);opacity:.6}
body.admin-on .pin-btn{display:inline-block}
.pin-btn:hover{filter:none;opacity:1}
.pin-btn.on{filter:none;opacity:1;background:var(--jaune);border-color:var(--jaune)}
.card.is-pinned{border-color:var(--jaune);box-shadow:0 0 0 1px var(--jaune),var(--shadow)}
.card:has(.pin-badge){border-color:var(--jaune);box-shadow:0 0 0 1px var(--jaune),var(--shadow)}

/* corrections héros & entête */
.hero .eyebrow{display:block;margin-bottom:2px}
.header-cta{white-space:nowrap}
.util .today{white-space:nowrap}
@media (max-width:520px){ .util .today{white-space:normal} }

/* ---------- Services aux habitants : cartes de soumission ---------- */
.sub-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.sub-card{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--jaune);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.sub-card.is-pending{border-left-color:var(--muet);background:#FBFAF7;opacity:.92}
.sub-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sub-date{margin-left:auto;color:var(--muet);font-size:.85rem}
.sub-title{font-size:1.15rem;margin:.2rem 0 .4rem}
.sub-desc{margin:0 0 .6rem;color:var(--ink);white-space:pre-wrap}
.sub-meta{color:var(--muet);font-size:.9rem}
.sub-img{width:100%;max-height:260px;object-fit:cover;border-radius:10px;margin:0 0 12px}
.sub-admin{display:none;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--trait)}
body.admin-on .sub-admin{display:flex;flex-wrap:wrap}
.st{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.st-recu{background:#FBF1DE;color:#8A5E12}
.st-encours{background:#E4EEF8;color:#2B5C86}
.st-resolu{background:#E7F1E7;color:#2F6A3E}
.st-refuse{background:#FBEAE7;color:#B23120}
.st-sel{font:inherit;font-size:.9rem;padding:8px 10px;border:1px solid var(--trait);border-radius:8px;background:#fff}
.sub-del{background:#fff;border:1px solid var(--trait);color:var(--alerte);border-radius:8px;padding:8px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.sub-del:hover{background:var(--alerte-bg)}
.admin-note{background:#FFFDF2;border:1px dashed var(--or);border-radius:12px;padding:14px 18px;color:#6B5A1E;font-size:.92rem;font-weight:600;display:none;margin-top:16px}
body.admin-on .admin-note{display:block}

/* formulaires publics */
.form-card{background:#fff;border:1px solid var(--trait);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.form-card h3{font-size:1.2rem;margin-bottom:4px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.fgrid .full{grid-column:1/-1}
.fgrid label{font-size:.85rem;font-weight:600;display:block;margin-bottom:5px}
.fgrid input,.fgrid select,.fgrid textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--trait);border-radius:9px;background:var(--pierre)}
.fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{background:#fff;border-color:var(--encre);outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muet);margin-top:6px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--encre)}
.ok-msg{background:#E7F1E7;color:#2F6A3E;border-radius:10px;padding:12px 16px;margin-top:14px;font-weight:600;display:none}
.ok-msg.show{display:block}
@media (max-width:600px){ .fgrid{grid-template-columns:1fr} }

/* carte signalement */
#sigMap{height:330px;border-radius:14px;border:1px solid var(--trait);margin-top:10px;background:var(--pierre-2);z-index:0}
.map-hint{font-size:.88rem;color:var(--muet);margin-top:8px}

/* réservations : occupation */
.occup{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.occup li{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--trait);border-radius:10px;padding:12px 16px;flex-wrap:wrap}
.oc-date{font-weight:700;color:var(--encre);min-width:150px}
.oc-salle{color:var(--or-txt);font-weight:600}
.oc-cre{margin-left:auto;color:var(--muet);font-size:.9rem}

/* ============================================================
   Entête : menu propre (rien ne se coupe, rien ne passe à la ligne)
   ============================================================ */
.head{flex-wrap:nowrap}
.brand{flex:none}
.brand .name b{white-space:nowrap}
.brand .name span{white-space:nowrap}
nav.main a.nav-link,nav.main button.nav-link{white-space:nowrap}
nav.main > ul{flex-wrap:nowrap}
.header-cta{flex:none}

/* méga-menu en colonnes */
.submenu.mega{display:grid;grid-template-columns:repeat(3,minmax(196px,1fr));gap:6px 10px;min-width:640px;padding:18px}
nav.main li:hover .submenu.mega,nav.main li:focus-within .submenu.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-col{display:flex;flex-direction:column}
.mega-t{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--or-txt);
  margin:0 0 6px;padding:0 12px 8px;border-bottom:1px solid var(--trait)}
.submenu.mega a{padding:8px 12px;font-size:.92rem}

/* bascule burger plus tôt : sous 1040px le menu complet ne tient pas proprement */
@media (max-width:1040px){
  nav.main{position:fixed;inset:78px 0 auto 0;background:#fff;border-bottom:1px solid var(--trait);
    flex-direction:column;align-items:stretch;padding:14px;box-shadow:var(--shadow);display:none;
    max-height:calc(100vh - 78px);overflow-y:auto}
  nav.main.open{display:flex}
  nav.main > ul{flex-direction:column;gap:2px;flex-wrap:wrap}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:2px solid var(--trait);border-radius:0;margin:2px 0 6px 12px;padding:2px 0}
  .submenu.mega{display:block;min-width:0;padding:2px 0}
  .mega-col{margin-bottom:10px}
  .mega-t{padding:0 12px 6px}
  .burger{display:block}
  .header-cta{display:none}
}
@media (min-width:1041px){ .burger{display:none} }

/* carte de signalement */
.sig-pin{background:none;border:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.leaflet-container{font:inherit;border-radius:14px}
.leaflet-control-attribution{font-size:10px}

/* sélecteur de langue */
.langsw{display:inline-flex;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:2px}
.langsw .lang{background:none;border:0;color:#D9E2E8;font:inherit;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  padding:4px 8px;border-radius:6px;cursor:pointer;min-width:30px}
.langsw .lang:hover{color:#fff;background:rgba(255,255,255,.12)}
.langsw .lang.on{background:var(--jaune);color:var(--encre)}

/* ============================================================
   THÈMES ÉVÉNEMENTIELS
   Chaque thème ne fait que teinter des accents + afficher un ruban.
   L'ossature, les contrastes et la lisibilité restent identiques.
   ============================================================ */

/* Le sélecteur dans la barre élu */
.admin-bar{gap:14px;flex-wrap:wrap}
.theme-pick{display:inline-flex;align-items:center;gap:8px}
.theme-pick .tp-lab{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.theme-pick select{font:inherit;font-size:.85rem;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;max-width:270px}
.theme-pick select option{color:var(--encre)}

/* Le ruban public */
.theme-ribbon{background:var(--accent, var(--jaune));color:var(--accent-ink, var(--encre));
  border-bottom:1px solid rgba(0,0,0,.12)}
.theme-ribbon[hidden]{display:none}
.tr-in{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 20px;text-align:center;flex-wrap:wrap}
.tr-emoji{font-size:1.2rem;line-height:1}
.tr-txt{font-weight:600;font-size:.95rem}
html.theme-urgent .theme-ribbon{animation:trPulse 2.4s ease-in-out infinite}
@keyframes trPulse{0%,100%{opacity:1}50%{opacity:.82}}
@media (prefers-reduced-motion:reduce){html.theme-urgent .theme-ribbon{animation:none}}

/* --- variables d'accent par thème --- */
/* Le jaune du blason reste la base ; on ne déplace que l'accent secondaire. */
html.theme-rose      { --accent:#EC6BA0; --accent-ink:#3A0F22; }
html.theme-noel      { --accent:#C0392B; --accent-ink:#fff; }
html.theme-voeux     { --accent:#0E7C86; --accent-ink:#fff; }
html.theme-printemps { --accent:#7FB069; --accent-ink:#17280E; }
html.theme-fete      { --accent:#E9DD00; --accent-ink:#1B1A16; }
html.theme-vendanges { --accent:#7D3C5B; --accent-ink:#fff; }
html.theme-bleu      { --accent:#2B4A8A; --accent-ink:#fff; }
html.theme-canicule  { --accent:#E8792B; --accent-ink:#2A1305; }
html.theme-vigilance { --accent:#D97A1E; --accent-ink:#2A1305; }

/* Où l'accent se pose (léger, jamais sur le texte courant) */
html:not(.theme-none) .plaque{box-shadow:0 0 0 4px var(--accent, transparent)}
html:not(.theme-none) .tag--evenement,
html:not(.theme-none) .btn-primary{background:var(--accent, var(--jaune));color:var(--accent-ink, var(--encre));border-color:var(--accent, var(--jaune))}
html:not(.theme-none) .sec-head .eyebrow{color:var(--accent, var(--or-txt))}
html:not(.theme-none) a.nav-link.active::after{background:var(--accent, var(--jaune))}

/* Ruban de Noël : petite guirlande discrète en haut */
html.theme-noel .theme-ribbon{background:linear-gradient(90deg,#C0392B,#1e6b3a,#C0392B);background-size:200% 100%;color:#fff}
html.theme-rose .theme-ribbon{background:linear-gradient(90deg,#EC6BA0,#F7A9C6);color:#3A0F22}

/* Badge « label de réception » — visible en mode élu, aide au tri */
.mail-label{display:none;align-items:center;gap:4px;font-size:.68rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:6px;
  background:var(--encre);color:var(--jaune)}
body.admin-on .mail-label{display:inline-flex}

/* ============================================================
   MODE NOËL — thème sombre + guirlande + flocons
   1) on redéfinit les variables (le gros du site suit tout seul)
   2) on rattrape explicitement TOUS les blocs qui ont une couleur
      claire "en dur" et qui deviendraient illisibles en sombre.
   ============================================================ */
html.theme-noel{
  --blanc:#141A22; --pierre:#141C26; --pierre-2:#1B2430;
  --ink:#E8EEF5; --muet:#9DB0C4; --trait:#31404F;
  --parchemin:#243244;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
  --accent:#5BBA6F; --accent-ink:#08160C;
  /* --encre reste SOMBRE : c'est un fond d'ancrage (hero, util, ticker,
     footer). On éclaircit le TEXTE via --ink et des règles ciblées. */
  --encre:#0E141B;
  background:#0E141B;
}
html.theme-noel body{background:#10161D;color:var(--ink)}
/* --- TEXTE : en Noël, --encre reste sombre. On éclaircit donc tous les
       textes qui s'appuyaient dessus, avec une règle générale… --- */
html.theme-noel h1,html.theme-noel h2,html.theme-noel h3,html.theme-noel h4,
html.theme-noel .brand .name b,
html.theme-noel .card h3 a,
html.theme-noel .quicklinks a,
html.theme-noel .form label,
html.theme-noel .u-item .big,
html.theme-noel .chip:hover,
html.theme-noel .link-list a,
html.theme-noel .dir-list a,
html.theme-noel .cr-year,
html.theme-noel .synd-list .sn,
html.theme-noel .elu .av,
html.theme-noel .todo b,
html.theme-noel details.mon>summary,
html.theme-noel details.mon .mon-body h4,
html.theme-noel .breadcrumb a:hover,
html.theme-noel .oc-date,
html.theme-noel .filter,
html.theme-noel .filter:hover,
html.theme-noel .search .clear,
html.theme-noel .modal .x,
html.theme-noel .submenu a:hover,
html.theme-noel .btn-ghost,
html.theme-noel .up:hover{color:var(--ink)}

/* …ET les exceptions : là où le fond est JAUNE, le texte reste sombre. */
html.theme-noel .btn-primary,
html.theme-noel .plaque h1,
html.theme-noel .ticker-label,
html.theme-noel .langsw .lang.on,
html.theme-noel .filter.on,
html.theme-noel .card .ev-badge,
html.theme-noel .cat-pick button.on{color:#1B1A16}

/* --- 1. tous les blocs "cartes" blancs --- */
html.theme-noel .card,
html.theme-noel .tile,
html.theme-noel .info-card,
html.theme-noel .info-card2,
html.theme-noel .u-item,
html.theme-noel .tl-card,
html.theme-noel .doc-item,
html.theme-noel .elu,
html.theme-noel .sub-card,
html.theme-noel .form-card,
html.theme-noel .synd-list li,
html.theme-noel details.mon,
html.theme-noel .occup li,
html.theme-noel .modal,
html.theme-noel .cat-pick button,
html.theme-noel .filter,
html.theme-noel .empty,
html.theme-noel .tl-empty{
  background:#18212C; border-color:var(--trait); color:var(--ink);
}

/* --- 2. barres et surfaces sombres déjà (on ajuste juste les bords) --- */
html.theme-noel header.site{background:rgba(16,22,29,.94);border-bottom-color:var(--trait)}
html.theme-noel .submenu,
html.theme-noel .mega{background:#18212C;border-color:var(--trait)}
html.theme-noel .util{background:#0B1016}
html.theme-noel .btn-ghost{background:#18212C;border-color:var(--trait);color:var(--ink)}

/* --- 3. champs de formulaire --- */
html.theme-noel .form input,
html.theme-noel .form textarea,
html.theme-noel .fgrid input,
html.theme-noel .fgrid select,
html.theme-noel .fgrid textarea,
html.theme-noel .search input,
html.theme-noel .st-sel{
  background:#0F1620;border-color:var(--trait);color:var(--ink);
}
html.theme-noel .form input:focus,
html.theme-noel .form textarea:focus,
html.theme-noel .fgrid input:focus,
html.theme-noel .fgrid select:focus,
html.theme-noel .fgrid textarea:focus{background:#131C27;border-color:var(--accent)}
html.theme-noel ::placeholder{color:#7d8ea0}

/* --- 4. titres, textes, liens qui pointaient vers l'encre foncée --- */
html.theme-noel h1,html.theme-noel h2,html.theme-noel h3,html.theme-noel h4{color:var(--encre)}
html.theme-noel .brand .name b,
html.theme-noel nav.main a.nav-link,
html.theme-noel nav.main button.nav-link,
html.theme-noel .submenu a,
html.theme-noel .mega a{color:var(--ink)}
html.theme-noel nav.main a.nav-link:hover,
html.theme-noel nav.main button.nav-link:hover,
html.theme-noel nav.main li:hover > .nav-link,
html.theme-noel .submenu a:hover,
html.theme-noel .mega a:hover{background:#232F3D;color:#fff}
html.theme-noel .prose p,
html.theme-noel details.mon .mon-body p,
html.theme-noel .sub-desc,
html.theme-noel .elu .del2{color:var(--ink)}

/* --- 5. la plaque (signature) : accent vert sapin autour --- */
html.theme-noel .plaque{box-shadow:0 0 0 4px var(--accent)}

/* --- 6. boutons : le jaune du blason reste, lisible sur sombre --- */
html.theme-noel .btn-primary{background:var(--jaune);color:#1B1A16;border-color:var(--jaune)}
html.theme-noel .btn-primary:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* --- 7. les tags de rubrique gardent leurs couleurs mais on assombrit
        légèrement pour ne pas éblouir --- */
html.theme-noel .tag{filter:brightness(.9) saturate(1.05)}

/* --- 8. photos : très léger fond pour les PNG détourés, pas de filtre
        agressif (les portraits restent nets) --- */
html.theme-noel .elu img{background:#eef2f6;border-radius:8px}

/* ============================================================
   Guirlande lumineuse (dans le ruban, mode Noël uniquement)
   ============================================================ */
.theme-ribbon .xgarland{width:100%;height:16px;line-height:0;margin-bottom:2px}
.theme-ribbon .xgarland svg{width:100%;height:16px;display:block;overflow:visible}
.xbulb{transform-box:fill-box;transform-origin:center;
  animation:xtwinkle 1.6s ease-in-out infinite;filter:drop-shadow(0 0 2.5px currentColor)}
@keyframes xtwinkle{0%,100%{opacity:1;filter:drop-shadow(0 0 3px currentColor)}
  50%{opacity:.35;filter:drop-shadow(0 0 1px currentColor)}}
@media (prefers-reduced-motion:reduce){.xbulb{animation:none;opacity:1}}
html.theme-noel .theme-ribbon{background:#0B1016;color:#E8EEF5;border-bottom-color:#31404F}
html.theme-noel .theme-ribbon .tr-txt{font-weight:600}

/* --- 9. Noël : partout où le fond reste JAUNE, le texte doit rester
        SOMBRE (sinon --encre s'éclaircit et devient illisible) --- */
html.theme-noel .ticker-label,
html.theme-noel .langsw .lang.on,
html.theme-noel .cat-pick button.on,
html.theme-noel .st-sel,
html.theme-noel .pin-btn.on,
html.theme-noel .badge-evt,
html.theme-noel .tag--evenement{color:#1B1A16}
html.theme-noel .ticker-label{color:#1B1A16 !important}

/* le ticker lui-même : fond sombre, ses catégories en jaune clair OK,
   mais son texte courant doit être clair */
html.theme-noel .ticker{background:#0B1016;color:#EAF1F4}
html.theme-noel .ticker-item{color:#EAF1F4}

/* la barre util (déjà sombre) : garder son texte clair d'origine */
html.theme-noel .util,
html.theme-noel .util a,
html.theme-noel .langsw .lang{color:#D9E2E8}

/* --- 10. Bannières de sous-page (.page-banner) et sections sombres
        (.sec-dark) : fond déjà sombre, on garantit tout le texte clair --- */
html.theme-noel .page-banner{background:linear-gradient(160deg,#0B1119 0%,#0E141B 100%);color:#fff}
html.theme-noel .page-banner h1,
html.theme-noel .page-banner h2,
html.theme-noel .page-banner .marcellus,
html.theme-noel .page-banner p,
html.theme-noel .page-banner .breadcrumb,
html.theme-noel .page-banner .breadcrumb a{color:#E8EEF5}
html.theme-noel .page-banner .eyebrow{color:var(--accent)}
html.theme-noel .sec-dark{background:linear-gradient(160deg,#0B1119 0%,#0E141B 100%);color:#D3E0EE}
html.theme-noel .sec-dark h2,html.theme-noel .sec-dark .marcellus{color:#fff}
html.theme-noel .sec-dark .eyebrow{color:var(--accent)}

/* --- 11. filtres de rubrique actifs : texte sombre sur pastille jaune --- */
html.theme-noel .filter.on{background:var(--jaune);color:#1B1A16;border-color:var(--jaune)}
html.theme-noel .filter{background:#18212C;border-color:var(--trait);color:var(--ink)}
html.theme-noel .filter .cdot{border-color:var(--muet)}

/* --- 12. Pied de page (fond --encre sombre) : titres & textes clairs --- */
html.theme-noel footer.site{background:#0B1016;color:#C7D2DA}
html.theme-noel footer.site h4,
html.theme-noel footer.site .foot-col b,
html.theme-noel footer.site strong{color:#E8EEF5}
html.theme-noel footer.site a{color:#C7D2DA}
html.theme-noel footer.site a:hover{color:#fff}

/* --- 13. Titres de section : rattraper la spécificité (.sec-head h2, etc.)
        qui écrase la règle générale, en mode Noël --- */
html.theme-noel .sec-head h2,
html.theme-noel .sec-head h3,
html.theme-noel .tl-card h3,
html.theme-noel .tl-card h3 a,
html.theme-noel .info-card h3,
html.theme-noel .info-card2 h3,
html.theme-noel .card h3,
html.theme-noel .card h3 a,
html.theme-noel .mon-body h4,
html.theme-noel .prose h2,
html.theme-noel .prose h3{color:var(--ink)}

/* --- 14. Tous les h4 de contenu (cartes, colonnes) en clair --- */
html.theme-noel .info-card h4,
html.theme-noel .info-card2 h4,
html.theme-noel .card h4,
html.theme-noel .u-item h4,
html.theme-noel .mon-body h4,
html.theme-noel .prose h4,
html.theme-noel .sub-card h4,
html.theme-noel .occup h4,
html.theme-noel .synd-list h4{color:var(--ink)}

/* --- 15. Encart Compostelle : eyebrow lisible en Noël --- */
html.theme-noel .compostelle .eyebrow,
html.theme-noel .compostelle .step-lbl,
html.theme-noel .todo{color:var(--muet)}
html.theme-noel .compostelle{background:#161F2A;border-color:var(--trait)}

/* ============================================================
   FLOCONS DE NEIGE — version CSS (marche SANS WebGL/three.js)
   Injectés dans le hero uniquement en mode Noël. Chaque flocon
   est un ❄ qui tombe en oscillant. Respecte reduced-motion.
   ============================================================ */
.snow-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.snow-layer .flake{position:absolute;top:-6%;color:#fff;user-select:none;
  will-change:transform;opacity:.9;
  text-shadow:0 0 6px rgba(255,255,255,.6);
  animation:snowfall linear infinite}
@keyframes snowfall{
  0%{transform:translate3d(0,-10%,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift,20px),115vh,0) rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .snow-layer{display:none}   /* pas d'animation → on masque proprement */
}
/* le hero reste au-dessus de la neige pour la lisibilité du texte */
.hero .wrap{z-index:2}

/* --- Photo du hero en “mode neige” : ambiance hivernale --- */
html.theme-noel .hero .bg{
  filter:brightness(.62) contrast(1.05) saturate(.7) hue-rotate(178deg);
}
/* voile bleuté froid + halo de givre par-dessus la photo */
html.theme-noel .hero .bg::after{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(200,225,255,.28), transparent 60%),
    linear-gradient(115deg, rgba(9,16,27,.92) 0%, rgba(16,26,44,.6) 52%, rgba(40,70,120,.5) 108%);
}
/* givre discret dans les coins */
html.theme-noel .hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(60% 40% at 100% 0%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(80% 50% at 50% 100%, rgba(180,210,255,.06), transparent 60%);
}

/* ---------- Vue article (modale de lecture) ---------- */
.modal-article{max-width:760px;width:92vw}
.modal-article .m-body{max-height:78vh;overflow:auto}
.art-hero{width:100%;height:260px;background:center/cover no-repeat;border-radius:12px;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.art-date{color:var(--muet);font-size:.9rem;font-weight:600}
.art-ev{color:var(--or-txt);font-weight:600;margin:.2rem 0 1rem}
.art-content{font-size:1.02rem;line-height:1.75}
.art-content p{margin:0 0 1.05rem}
.art-content h2{font-family:Marcellus,serif;font-weight:400;font-size:1.5rem;margin:1.6rem 0 .6rem}
.art-content h3{font-family:Marcellus,serif;font-weight:400;font-size:1.25rem;margin:1.4rem 0 .5rem}
.art-content ul,.art-content ol{margin:0 0 1.05rem;padding-left:1.4rem}
.art-content li{margin:.3rem 0}
.art-content a{color:var(--or-txt);text-decoration:underline}
.art-content img{max-width:100%;height:auto;border-radius:10px;margin:1rem 0}
.art-content figure{margin:1rem 0}
.art-content figcaption{color:var(--muet);font-size:.88rem;text-align:center;margin-top:.4rem}
.art-content blockquote{margin:1rem 0;padding:.4rem 0 .4rem 1rem;border-left:3px solid var(--jaune);color:var(--muet)}
/* la carte entière donne l'impression d'être cliquable */
.news-card .thumb[data-article],.card .thumb[data-article]{cursor:pointer}
.news-card h3 a[data-article],.card h3 a[data-article]{cursor:pointer}
/* dark mode Noël : lisibilité de la modale article */
html.theme-noel .modal-article{background:#18212C}
html.theme-noel .art-content,html.theme-noel .art-content p,html.theme-noel .art-content li{color:var(--ink)}
html.theme-noel .art-content h2,html.theme-noel .art-content h3{color:var(--ink)}

/* ---------- Archive : événements passés ---------- */
.past-events{margin-top:28px}
.past-details{border-top:1px solid var(--trait);padding-top:8px}
.past-details summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;
  padding:12px 4px;border-radius:8px;user-select:none}
.past-details summary::-webkit-details-marker{display:none}
.past-details summary::before{content:"▸";color:var(--or-txt);font-size:.9rem;transition:transform .2s}
.past-details[open] summary::before{transform:rotate(90deg)}
.past-details summary:hover{background:var(--pierre)}
.pe-title{font-family:Marcellus,serif;font-size:1.15rem}
.pe-hint{color:var(--muet);font-size:.85rem}
.tl-line--past{margin-top:10px;opacity:.85}
.tl-date--past{background:var(--muet)}
/* dans un item passé, le lien enveloppe date + carte : il doit couvrir
   les DEUX colonnes de la grille .tl-item et reproduire la même grille */
.tl-item .tl-open{grid-column:1 / -1;display:grid;grid-template-columns:92px 1fr;gap:24px;
  text-decoration:none;color:inherit;cursor:pointer;align-items:stretch;width:100%}
.tl-open .tl-card{min-width:0}
.tl-open:hover .tl-card{border-color:var(--or-txt)}
@media (max-width:600px){ .tl-item .tl-open{grid-template-columns:72px 1fr;gap:14px} }
html.theme-noel .past-details summary:hover{background:#18212C}
html.theme-noel .pe-title{color:var(--ink)}

/* ---------- Touche « émaillée » : reflet qui traverse la plaque ---------- */
.plaque{position:relative;overflow:hidden}
.plaque::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg) translateX(-120%);pointer-events:none}
.plaque.shine::after{animation:plaqueShine 1.5s ease .3s 1}
@keyframes plaqueShine{0%{transform:rotate(18deg) translateX(-120%)}
  100%{transform:rotate(18deg) translateX(420%)}}
@media (prefers-reduced-motion:reduce){.plaque.shine::after{animation:none}}

/* ---------- Chiffres-clés du village ---------- */
.stats{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--blanc);border:1px solid var(--trait);border-radius:14px;
  padding:20px 18px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border-top:3px solid var(--jaune)}
.stat-num,.stat-plain{font-family:"Marcellus",serif;font-size:2.1rem;line-height:1;color:var(--encre);font-weight:400}
.stat-lbl{font-size:.85rem;color:var(--muet);line-height:1.35}
.stat-lbl em{font-style:normal;font-size:.78rem;opacity:.85}
.stats-note{margin-top:16px;font-size:.9rem;color:var(--muet);text-align:center}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}.stat-num,.stat-plain{font-size:1.7rem}}
/* mode Noël */
html.theme-noel .stat{background:#18212C;border-color:var(--trait)}
html.theme-noel .stat-num,html.theme-noel .stat-plain{color:var(--ink)}

/* ---------- Entrées de menu à la fois cliquables ET à sous-menu ---------- */
nav.main .has-sub{position:relative}
/* petit bouton invisible posé sur le caret : ouvre le sous-menu au tap
   (tablette) sans empêcher le clic sur le lien lui-même */
nav.main .sub-toggle{position:absolute;top:0;right:0;width:34px;height:100%;
  background:transparent;border:0;cursor:pointer;padding:0;z-index:2}
nav.main .sub-toggle:focus-visible{outline:2px solid var(--jaune);outline-offset:-2px;border-radius:8px}
/* quand on ouvre via le bouton (classe posée en JS pour le tactile) */
nav.main .has-sub.sub-open > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
/* en mode burger (mobile), tout est déplié : le bouton ne sert à rien */
@media (max-width:1040px){
  nav.main .sub-toggle{display:none}
  nav.main .has-sub .nav-link .caret{opacity:.5}
}

/* ---------- Carte du village (page Découvrir) ---------- */
.village-map-wrap{margin-top:22px}
.village-map{height:380px;border-radius:14px;border:1px solid var(--trait);box-shadow:var(--shadow);overflow:hidden;background:var(--pierre)}
.map-note{font-size:.85rem;color:var(--muet);margin-top:8px;text-align:center}
.map-fallback{padding:28px;text-align:center;color:var(--muet)}
.vm-pin span{display:block;width:18px;height:18px;border-radius:50%;background:var(--jaune);
  border:3px solid var(--encre);box-shadow:0 2px 6px rgba(0,0,0,.35)}
@media (max-width:600px){.village-map{height:300px}}
html.theme-noel .village-map{border-color:var(--trait)}

/* ============================================================
   OISEAUX du hero — version CSS/SVG (aucune bibliothèque 3D)
   Quelques silhouettes qui traversent lentement le ciel, ailes
   battantes. Léger, et affiché sur tous les navigateurs.
   ============================================================ */
.birds-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bird{position:absolute;will-change:transform;opacity:.55;
  animation:birdFly linear infinite}
.bird svg{display:block;overflow:visible}
.bird .wing{transform-box:fill-box;transform-origin:right center;
  animation:flap ease-in-out infinite}
.bird .wing-r{transform-origin:left center}
@keyframes birdFly{
  0%{transform:translate3d(-12vw,0,0)}
  100%{transform:translate3d(112vw,-6vh,0)}
}
@keyframes flap{
  0%,100%{transform:rotate(-18deg)}
  50%{transform:rotate(22deg)}
}
@media (prefers-reduced-motion:reduce){ .birds-layer{display:none} }

/* ---------- Éditeur d'article (espace élu) ---------- */
.editor-tools{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.editor-tools button{font:inherit;font-size:.82rem;padding:6px 10px;border:1px solid var(--trait);
  background:var(--blanc);border-radius:8px;cursor:pointer;line-height:1.1}
.editor-tools button:hover{background:var(--pierre);border-color:var(--or-txt)}
.editor{min-height:170px;max-height:340px;overflow:auto;border:1px solid var(--trait);
  border-radius:9px;background:var(--blanc);padding:12px 14px;margin-top:6px;
  font-size:.98rem;line-height:1.65}
.editor:focus{outline:2px solid var(--jaune);outline-offset:1px}
.editor p{margin:0 0 .8rem}
.editor h3{font-family:"Marcellus",serif;font-weight:400;font-size:1.15rem;margin:1rem 0 .4rem}
.editor ul,.editor ol{margin:0 0 .8rem;padding-left:1.3rem}
.editor a{color:var(--or-txt);text-decoration:underline}
.editor-hint{font-size:.82rem;color:var(--muet);margin:6px 0 0}
/* bouton Modifier sur les cartes */
.card .edit{background:none;border:0;color:var(--or-txt);font:inherit;font-size:.82rem;
  cursor:pointer;text-decoration:underline;padding:0;margin-right:10px;display:none}
body.admin-on .card .edit{display:inline-block}
.card .edit:hover{color:var(--encre)}
html.theme-noel .editor,html.theme-noel .editor-tools button{background:#0F1620;color:var(--ink)}
html.theme-noel .card .edit{color:var(--jaune)}