/* Site de la commune — feuille de mise en page.
   Toutes les couleurs, polices et espacements viennent de styles.css (design system).
   Ne pas coder de valeur en dur ici : utiliser les variables var(--color-*), var(--font-*). */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100}
.skip-link:focus{left:8px;top:8px;background:var(--color-accent);color:var(--color-bg);padding:10px 16px;text-decoration:none}

html{scroll-behavior:smooth}
body{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
main{flex:1;min-width:0}
/* Garde-fou mobile : rien ne dépasse la largeur de l'écran. */
img,svg,iframe,video{max-width:100%}
.hero__inner>*,.split>*,.cells>*{min-width:0}
a{color:var(--color-accent-700);text-underline-offset:3px}
a:hover{color:var(--color-accent)}
:target{scroll-margin-top:120px}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ── bandeau de démonstration ───────────────────────────────── */
.demo-band{background:var(--color-text);color:var(--color-bg);font-size:12px;letter-spacing:.04em}
.demo-band .container{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;padding-top:8px;padding-bottom:8px}
.demo-band strong{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.1em}
.demo-band span{opacity:.75}

/* ── en-tête ────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-bg)}
.utility{border-bottom:1px solid var(--color-divider);font-size:12px}
.utility .container{display:flex;gap:20px;justify-content:flex-end;padding-top:6px;padding-bottom:6px}
.utility a{text-decoration:none}
.header-main{border-bottom:2px solid var(--color-divider)}
.header-main .container{display:flex;align-items:center;gap:32px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-right:auto}
.brand:hover{color:inherit}
.brand__mark{width:38px;height:46px;flex:none;background:var(--color-accent);display:grid;place-items:center;color:var(--color-bg);font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand__name{display:block;font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1;letter-spacing:-.02em}
.brand__sub{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700);margin-top:3px}
.main-nav{display:flex;gap:22px;align-items:center;font-size:14px;font-family:var(--font-heading);font-weight:600}
.main-nav a{text-decoration:none;color:inherit;padding:4px 0;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--color-accent)}
.main-nav a[aria-current=page]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.main-nav a.btn{border-bottom-color:transparent;color:var(--color-bg);padding:8px 16px}
.main-nav a.btn:hover{color:var(--color-bg)}
.burger{display:none;padding:9px 14px}
.mobile-nav{border-bottom:2px solid var(--color-divider);background:var(--color-surface)}
.mobile-nav .container{display:flex;flex-direction:column;padding-top:8px;padding-bottom:20px}
.mobile-nav a{padding:12px 0;border-bottom:1px solid var(--color-divider);text-decoration:none;color:inherit;font-family:var(--font-heading);font-weight:600}
.mobile-nav a.sub{font-family:var(--font-body);font-weight:400;font-size:14px}
.mobile-nav .btn{margin-top:16px;padding:12px 16px;border-bottom:0}

/* ── réserves d'images ──────────────────────────────────────── */
.ph{background:repeating-linear-gradient(135deg,var(--color-neutral-200) 0 10px,var(--color-neutral-300) 10px 20px);display:grid;place-items:center;text-align:center}
.ph__label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700);padding:0 16px;line-height:1.6}
.ph--16x9{aspect-ratio:16/9}
.ph--4x3{aspect-ratio:4/3}
.ph--3x2{aspect-ratio:3/2}
.ph--1x1{aspect-ratio:1}

/* ── une ────────────────────────────────────────────────────── */
.hero{border-bottom:2px solid var(--color-divider)}
.hero__inner{display:grid;grid-template-columns:1fr 1fr}
.hero__text{padding:64px 48px 64px 0;display:flex;flex-direction:column;justify-content:center}
.hero__media{border-left:2px solid var(--color-divider);display:grid;min-width:0}
.hero__media>*{min-width:0;width:100%}
.hero__media .ph{min-height:420px}
.hero h1{font-size:60px;letter-spacing:-.03em;margin:0 0 20px}
.kicker{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:20px}
.lead{font-size:17px;max-width:44ch;color:var(--color-neutral-800)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.actions .btn{padding:12px 20px}

.alert{background:var(--color-accent);color:var(--color-bg);border-bottom:2px solid var(--color-divider)}
.alert .container{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.alert__tag{font-family:var(--font-heading);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;flex:none}
.alert p{margin:0;font-size:15px;flex:1;min-width:260px}
.alert a{color:var(--color-bg);font-size:13px;font-family:var(--font-heading);font-weight:600}

.section{border-bottom:2px solid var(--color-divider)}
.section:last-child{border-bottom:0}
.section .container{padding-top:56px;padding-bottom:56px}
.section--tight .container{padding-top:48px;padding-bottom:48px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 24px;font-family:var(--font-heading)}

.cells{display:grid;gap:2px;background:var(--color-divider);border-top:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}
.cells--4{grid-template-columns:repeat(4,1fr)}
.cells--3{grid-template-columns:repeat(3,1fr)}
.cells--2{grid-template-columns:repeat(2,1fr)}
.cells--bare{border-top:0;border-bottom:0}
.cell{background:var(--color-bg);padding:28px 24px}
a.cell{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;min-height:150px}
a.cell:hover{background:var(--color-accent-100);color:inherit}
.cell h2,.cell h3{margin:0 0 10px}
.cell__title{font-family:var(--font-heading);font-weight:800;font-size:20px;letter-spacing:-.02em}
.cell__desc{font-size:13px;color:var(--color-neutral-700)}
.cell__more{margin-top:auto;font-size:12px;color:var(--color-accent-700)}
.cell p{margin:0;font-size:14px;color:var(--color-neutral-800)}

.split{display:grid;grid-template-columns:2fr 1fr;gap:56px}
.split--even{grid-template-columns:1fr 1fr}
.split--aside{grid-template-columns:1fr 320px}
.split--wide-aside{grid-template-columns:1fr 340px}
.split--map{grid-template-columns:1.4fr 1fr}
.split__side{border-left:2px solid var(--color-divider);padding-left:32px}

.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.head-row h2{margin:0;font-size:32px;letter-spacing:-.02em}
.head-row a{font-size:13px}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news{display:flex;flex-direction:column;gap:12px}
.news__meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)}
.news h3{margin:0;font-size:20px;letter-spacing:-.02em}
.news h3 a{color:inherit;text-decoration:none}
.news h3 a:hover{color:var(--color-accent)}
.news p{margin:0;font-size:14px;color:var(--color-neutral-800)}

.agenda{list-style:none;margin:0;padding:0}
.agenda li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--color-divider)}
.agenda li:last-child{border-bottom:1px solid var(--color-divider)}
.agenda__date{flex:none;width:52px}
.agenda__day{display:block;font-family:var(--font-heading);font-weight:800;font-size:28px;line-height:1}
.agenda__month{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700)}
.agenda__name{display:block;font-family:var(--font-heading);font-weight:600;font-size:15px}
.agenda__place{display:block;font-size:13px;color:var(--color-neutral-700)}

.infos dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:15px}
.infos dt{font-family:var(--font-heading);font-weight:600}
.infos dd{margin:0}
.stat{display:block;margin-bottom:14px}
.stat b{font-family:var(--font-heading);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--color-neutral-700)}

/* ── pages intérieures ──────────────────────────────────────── */
.page-head{border-bottom:2px solid var(--color-divider)}
.page-head .container,.page-head .container--narrow{padding-top:44px;padding-bottom:36px}
.page-head h1{margin:0 0 12px;font-size:48px;letter-spacing:-.03em}
.page-head p{margin:0;max-width:62ch;font-size:16px;color:var(--color-neutral-800)}
.breadcrumb{font-size:12px;color:var(--color-neutral-700);margin-bottom:20px}
.page-body{padding-top:48px;padding-bottom:64px}
.page-body--narrow{padding-top:36px;padding-bottom:72px}
.page-body h2{font-size:28px;margin:0 0 8px}
.page-body h2.eyebrow{font-size:13px}
.stack{margin-bottom:48px}

.news-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-divider)}
.news-list li{border-bottom:1px solid var(--color-divider)}
.news-list a{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:26px 0;text-decoration:none;color:inherit}
.news-list a:hover{background:var(--color-accent-100);color:inherit}
.news-list__meta{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)}
.news-list__title{display:block;font-family:var(--font-heading);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:8px 0}
.news-list__desc{display:block;font-size:15px;color:var(--color-neutral-800);max-width:62ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filters .tag{padding:6px 14px}
.pagination{display:flex;gap:8px;align-items:center;margin-top:32px}
.pagination .btn{padding:8px 14px}

.article p{font-size:17px;line-height:1.65}
.article h2{font-size:24px;margin:36px 0 12px}
.article__lead{font-size:19px;color:var(--color-neutral-800);margin:0}
.article figure{margin:0 0 32px}

.elu{display:flex;gap:18px}
.elu__photo{flex:none;width:74px;height:92px}
.elu__role{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:6px}
.elu__name{display:block;font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:-.02em}
.elu__scope{display:block;font-size:13px;color:var(--color-neutral-700);margin-top:6px}

.link-cells{display:flex;flex-direction:column;gap:2px;background:var(--color-divider);border-top:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}
.link-cells a{background:var(--color-bg);padding:22px 20px;text-decoration:none;color:inherit}
.link-cells a:hover{background:var(--color-accent-100);color:inherit}
.link-cells strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:18px}
.link-cells span{display:block;font-size:13px;color:var(--color-neutral-700);margin-top:4px}

.agenda-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-divider)}
.agenda-rows li{display:grid;grid-template-columns:110px 1fr 200px;gap:28px;padding:24px 0;border-bottom:1px solid var(--color-divider)}
.agenda-rows__num{display:block;font-family:var(--font-heading);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.03em}
.agenda-rows__dow{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700);margin-top:4px}
.agenda-rows__name{display:block;font-family:var(--font-heading);font-weight:800;font-size:22px;letter-spacing:-.02em}
.agenda-rows__desc{display:block;font-size:14px;color:var(--color-neutral-800);margin-top:6px}
.agenda-rows__where{font-size:13px;color:var(--color-neutral-700)}
.agenda-rows__where .tag{margin-top:8px}

.accent-card{border-left:2px solid var(--color-accent)}
.aside-stack{display:flex;flex-direction:column;gap:24px}

/* ── formulaire ─────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:20px;max-width:620px}
.form__pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form__note{margin:0;font-size:13px;color:var(--color-neutral-700)}
.notice{border:2px solid var(--color-accent);padding:24px;margin-bottom:32px}
.notice h2{margin:0 0 8px;font-size:22px}
.notice p{margin:0;font-size:15px}
.notice ul{margin:10px 0 0;padding-left:20px;font-size:15px}
.notice__foot{margin-top:10px;font-size:13px;color:var(--color-neutral-700)}
.field__error{display:block;font-size:13px;color:var(--color-accent-700);margin-top:5px;font-family:var(--font-heading);font-weight:600}
.input--error{border-color:var(--color-accent-700);border-width:2px}
.hint{display:block;font-size:12px;color:var(--color-neutral-700);margin-top:6px}
.check{display:flex;align-items:flex-start;gap:12px;font-size:13px;cursor:pointer}
.check .dot{border-radius:0;margin-top:2px}
.honeypot{position:absolute;left:-9999px}

/* ── pied de page ───────────────────────────────────────────── */
.site-footer{border-top:2px solid var(--color-divider);background:var(--color-surface)}
.site-footer .container{padding-top:48px;padding-bottom:24px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-cols h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 14px}
.footer-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-cols a{text-decoration:none}
.footer-cols p{margin:0;font-size:14px;color:var(--color-neutral-800)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand__mark{width:30px;height:36px;background:var(--color-accent);display:grid;place-items:center;color:var(--color-bg);font-family:var(--font-heading);font-weight:800;font-size:14px}
.footer-brand__name{font-family:var(--font-heading);font-weight:800;font-size:18px}
.legal{margin:0;font-size:12px;color:var(--color-neutral-700)}

/* ── adaptations ────────────────────────────────────────────── */
@media (max-width:1060px){
  .split,.split--even,.split--aside,.split--wide-aside,.split--map{grid-template-columns:1fr;gap:40px}
  .split__side{border-left:0;padding-left:0;border-top:2px solid var(--color-divider);padding-top:32px}
  .cells--4{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .main-nav{display:none}
  .burger{display:inline-flex}
  .hero__inner{grid-template-columns:1fr}
  .hero__text{padding:44px 0}
  .hero__media{border-left:0;border-top:2px solid var(--color-divider)}
  .hero h1{font-size:38px}
  .page-head h1{font-size:34px}
  .news-grid{grid-template-columns:1fr}
  .cells--3,.cells--2{grid-template-columns:1fr}
  .news-list a{grid-template-columns:1fr;gap:14px}
  .news-list a .ph{max-width:300px}
  .agenda-rows li{grid-template-columns:74px 1fr;gap:18px}
  .agenda-rows__where{grid-column:2}
  .form__pair{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}
@media (max-width:560px){.cells--4{grid-template-columns:1fr}}
@media print{.site-header,.site-footer,.demo-band,.mobile-nav,.skip-link{display:none}}

/* ── images réelles (posées depuis le back-office) ───────────── */
.illustration{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}
.illustration--16x9{aspect-ratio:16/9}
.illustration--4x3{aspect-ratio:4/3}
.illustration--3x2{aspect-ratio:3/2}
.illustration--1x1{aspect-ratio:1}
.hero__media .illustration{aspect-ratio:auto;min-height:420px;object-fit:cover}
.elu__photo.illustration{width:74px;height:92px;min-width:74px;flex:none}

/* Sur mobile, la photo de une suit la largeur de l'écran : la hauteur
   fixe de 420 px la débordait. Ces règles viennent après le bloc
   d'images ci-dessus, sinon elles seraient écrasées. */
@media (max-width:900px){
  .hero__media .illustration{min-height:0;height:auto;aspect-ratio:3/2}
  .hero__media .ph{min-height:0;aspect-ratio:3/2}
}
@media (max-width:560px){
  .hero__media .illustration,.hero__media .ph{aspect-ratio:4/3}
}

/* ── état vide ──────────────────────────────────────────────── */
.vide{border:1px dashed var(--color-divider);padding:28px;color:var(--color-neutral-700);font-size:15px;background:var(--color-neutral-100)}

/* ── navigation entre articles ───────────────────────────────── */
.article-nav{display:flex;gap:24px;justify-content:space-between;align-items:baseline;flex-wrap:wrap;font-size:14px}
.article-nav a{text-decoration:none}
@media (max-width:700px){.article-nav{flex-direction:column;gap:12px}}

/* ── blocs de contenu éditable ───────────────────────────────── */
.bloc + .bloc{margin-top:36px}
.bloc h2{margin:0 0 12px}
.bloc p{font-size:16px;line-height:1.65;color:var(--color-neutral-800);margin:0 0 14px}
.bloc .table{margin-top:6px}
.liste-page{font-size:16px;line-height:1.7;color:var(--color-neutral-800);padding-left:20px;margin:0}
.liste-page li+li{margin-top:6px}
.cell__titre{font-size:19px;margin:0 0 8px}
.bloc__figure{margin:0}
.bloc__figure figcaption{font-size:13px;color:var(--color-neutral-700);margin-top:8px}
.note-page{font-size:13px;color:var(--color-neutral-700);font-style:italic;margin:24px 0 0}

/* ── widget PanneauPocket ────────────────────────────────────── */
.pp__intro{font-size:15px;color:var(--color-neutral-800);max-width:70ch;margin:0 0 20px}
.pp__cadre{border:2px solid var(--color-divider);background:var(--color-surface)}
.pp__cadre iframe{display:block;width:100%;border:0}
.pp__repli{font-size:13px;color:var(--color-neutral-700);margin:14px 0 0;max-width:75ch}

/* Photographies en couleur : lève le noir et blanc du design system
   (réglage « Photographies » dans l'espace de publication). */
body.photos-couleur .grayscale{filter:none}