@charset "UTF-8";
/* ==========================================================================
   Commune de Beauvais-sur-Matha — feuille de style de production
   Charte issue du prototype v2. Contrastes ajustés pour le RGAA (AA).
   ========================================================================== */

/* ---------- Polices auto-hébergées (sous-ensemble latin français) --------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Poppins-700.woff2') format('woff2');}

/* ---------------------------------- Jetons -------------------------------- */
:root{
  --marine:#183858;       /* marine du Petit Beauvaisien */
  --deep:#12293F;

  /* Terracotta : teinte vive pour le décor, teinte assombrie pour le texte (AA) */
  --violet-vif:#EE9543;   /* orange du Petit Beauvaisien, décor uniquement */
  --violet:#A75E11;       /* orange assombri, texte AA 4,9 */

  /* Or : idem */
  --gold-vif:#C08A2E;     /* jaune du logo, décor */
  --gold:#8F6413;         /* jaune assombri, texte AA */

  --bg:#F2F3F5;           /* gris de fond du magazine */
  --card:#ffffff;
  --line:#e7ebf1;
  --text:#2a3340;
  --muted:#67717f;

  --beige:#F8E8D8;        /* crème des bandeaux du magazine */
  --vert:#4A7C1F;         /* vert du logo assombri, texte AA 5,0 */
  --bleu:#2C5F94;         /* bleu du logo, texte AA 6,6 */
  --rouge:#B23F22;
  --vert-vif:#82B64E;     /* vert du logo, aplats */
  --bleu-vif:#34689C;     /* bleu du logo, aplats */
  --creme:#F8E8D8;        /* bandeau clair, magazine */
  --creme-clair:#FCF4EC;

  --shadow:0 8px 28px rgba(20,40,70,.09);
  --shadow2:0 14px 38px rgba(20,40,70,.14);
  --radius:16px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ----------------------------------- Base --------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6; font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a{color:var(--marine)}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;text-wrap:balance}
h1{font-weight:700}
h2{color:var(--marine);font-size:25px;margin:0;letter-spacing:.2px;font-weight:700}
h3{font-weight:700}
p{margin:0 0 1em}
table{border-collapse:collapse}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Accessibilité : cible de focus visible partout */
:focus-visible{outline:3px solid var(--gold-vif);outline-offset:3px;border-radius:6px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--deep);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  text-decoration:none;font-weight:700;
}
.skip:focus{left:0}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------- Barre utilitaire ------------------------- */
.utility{background:var(--deep);color:#c3cfdd;font-size:12.5px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:12px;flex-wrap:wrap}
.utility a{color:#dce5ef;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.utility a:hover{color:#fff;text-decoration:underline}
.social{display:flex;gap:14px;align-items:center}

/* ---------- L'horloge du bandeau haut, 25/08/2026 ----------
   Elle est posee par app.js en tete du bandeau. Le bandeau ayant
   justify-content:space-between, la page se lit alors en trois zones :
   l'horloge a gauche, les horaires de la mairie au milieu, les liens a
   droite. Sur un telephone, l'heure disparait : elle est deja en haut de
   l'ecran, la date non. */
.horloge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  color:#dce5ef;font-variant-numeric:tabular-nums}
.horloge::before{content:"";width:13px;height:13px;flex:none;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2'/%3E%3C/svg%3E") center/contain no-repeat}
.horloge-date::first-letter{text-transform:uppercase}
.horloge-heure{font-weight:700;color:#fff}
.horloge-heure::before{content:"\00b7";font-weight:400;color:#8fa3b8;margin:0 7px 0 5px}
/* Sous 1080px le bandeau ne tient plus sur une ligne avec l'heure : on ne
   garde que la date. Sur un telephone c'est de toute facon le bon choix,
   l'heure est deja affichee en haut de l'ecran, la date non. */
@media (max-width:1079px){ .horloge-heure{display:none} }

.social svg{width:17px;height:17px}
/* Accès à l'espace mairie depuis le bandeau haut, sur toutes les pages */
.utility a.connexion-haut{
  padding:3px 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-weight:600;color:#e6edf5;
}
.utility a.connexion-haut::before{
  content:"";width:11px;height:11px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.utility a.connexion-haut:hover,.utility a.connexion-haut:focus-visible{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff;text-decoration:none;
}
@media (max-width:600px){ .utility a.connexion-haut{display:none} }

/* ---------------------------------- En-tête ------------------------------- */
header.site{background:#fff;position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(20,40,70,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.crest{
  width:auto;height:66px;flex:none;display:block;object-fit:contain;
  background:none;box-shadow:none;border-radius:0;
}
.fbrand .crest{height:52px;background:#fff;border-radius:10px;padding:5px 8px;box-sizing:content-box}
@media(max-width:640px){.crest{height:52px}}
.brand .txt{display:block}
.brand .txt b{font-size:20px;color:var(--marine);display:block;line-height:1.15;letter-spacing:.2px;font-weight:700}
.brand .txt em{font-size:12.5px;color:var(--violet);font-weight:500;font-style:italic;display:block}

nav.menu ul{display:flex;gap:4px;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
nav.menu a{
  display:block;font-size:14.5px;font-weight:500;color:#37404d;
  padding:9px 13px;border-radius:9px;text-decoration:none;transition:.15s var(--ease);
}
nav.menu a:hover{background:#eef2f7;color:var(--marine)}
nav.menu a[aria-current="page"]{background:var(--marine);color:#fff;font-weight:700}
nav.menu a.sig{color:var(--violet);font-weight:700}
nav.menu a.sig:hover{background:#fbf0e6}
nav.menu a.sig[aria-current="page"]{background:var(--violet);color:#fff}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:10px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;
}
.burger i{display:block;width:20px;height:2px;background:var(--marine);border-radius:2px;transition:.25s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ----------------------------------- Héros -------------------------------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background-color:var(--marine);
  background-image:linear-gradient(115deg,rgba(22,41,63,.90) 0%,rgba(31,58,95,.74) 48%,rgba(45,80,120,.52) 100%),
                   image-set(url('../img/hero-725.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg'));
  background-size:cover;background-position:center 38%;min-height:380px;
}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero::before{content:"";position:absolute;left:-80px;bottom:-160px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero .wrap{position:relative;z-index:2;padding:88px 20px 120px}
.hero .tag{display:inline-block;background:rgba(255,255,255,.18);padding:6px 15px;border-radius:999px;font-size:13px;margin-bottom:16px;backdrop-filter:blur(4px)}
.hero h1{margin:0;font-size:42px;line-height:1.12;letter-spacing:.3px;max-width:660px;font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero p.dev{margin:12px 0 0;font-style:italic;font-size:17.5px;color:#f0e4cd}
.hero .credit{position:absolute;left:0;right:0;bottom:62px;z-index:3;font-size:11px;color:rgba(255,255,255,.7);max-width:1080px;margin:0 auto;padding:0 20px;text-align:right}

/* Bandeau de page intérieure */
.pagehero{background:linear-gradient(120deg,var(--deep),var(--marine) 70%);color:#fff}
.pagehero .wrap{padding:34px 20px 40px}
.pagehero h1{margin:0;font-size:32px;font-weight:700}
.pagehero p{margin:8px 0 0;color:#cfdcea;max-width:62ch}
.breadcrumb{font-size:13px;color:#a9c0d6;margin-bottom:12px}
.breadcrumb a{color:#dbe7f2}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:6px;opacity:.7}

/* ------------------------------- Accès rapides ---------------------------- */
.quickrow{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow2);
  margin-top:-52px;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));padding:18px 10px;
}
a.quick{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 6px;
  border-radius:12px;text-align:center;text-decoration:none;color:inherit;transition:.15s var(--ease);
}
a.quick:hover{background:#f3f6fb;transform:translateY(-2px)}
.qic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.quick span{font-size:13px;font-weight:700;color:#34404e}

/* ---------------------------------- Blocs --------------------------------- */
section.block{padding:14px 0 4px}
.head{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 0 4px;gap:16px;flex-wrap:wrap}
.pilllabel{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--beige);color:var(--violet);margin-bottom:8px}
.sub{color:var(--muted);margin:2px 0 18px}
a.more,.more{color:var(--marine);font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
a.more:hover{text-decoration:underline}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}

/* Tuiles — désormais de vrais liens */
a.tile,.tile{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;
  transition:.18s var(--ease);border:1px solid transparent;display:block;
  text-decoration:none;color:inherit;
}
a.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow2);border-color:#e3e9f1}
.tic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.tile h3{margin:14px 0 4px;font-size:17px;color:#222b36}
.tile p{margin:0;font-size:13.5px;color:var(--muted)}

/* Cartes d'actualité */
a.newscard,.newscard{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:.18s var(--ease);display:block;text-decoration:none;color:inherit;
}
a.newscard:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.newsimg{height:140px;background-size:cover;background-position:center;display:flex;align-items:flex-start;padding:12px}
.cat{font-size:11.5px;font-weight:700;color:#fff;padding:4px 11px;border-radius:999px;background:rgba(9,20,33,.62)}
.newsbody{padding:14px 16px 18px}
.newsbody h3{margin:0 0 6px;font-size:16px;color:#222b36}
.newsbody .arrow{color:var(--marine);font-weight:700;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}

/* Cartes « À la une » : pas de photo, un liseré à la couleur de la rubrique,
   et un défilement horizontal automatique. */
.actuflow{position:relative;margin-top:14px;padding:0 4px}
.actuvue{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.actuvue::-webkit-scrollbar{display:none}
.actutrack{display:flex;gap:16px;padding:6px 2px 10px;align-items:stretch}
a.actucard{
  flex:0 0 calc((100% - 32px)/3);box-sizing:border-box;scroll-snap-align:start;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  border-top:4px solid var(--cat,#2C5F94);
  padding:15px 17px 16px;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;transition:.18s var(--ease);
}
a.actucard:hover,a.actucard:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow2)}
a.actucard .cat{background:var(--cat,#2C5F94);align-self:flex-start}
a.actucard h3{margin:0;font-size:16px;line-height:1.35;color:#222b36}
a.actucard .arrow{margin-top:auto;color:var(--marine);font-weight:700;font-size:13.5px}
.actuflow .infos-fleche{z-index:3;width:34px;height:34px;font-size:19px}
.actuflow .infos-fleche[hidden]{display:none}
@media(max-width:900px){a.actucard{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:620px){a.actucard{flex-basis:88%}.actuflow .infos-fleche{display:none}}

/* Encarts */
.feature{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.progress{height:16px;background:#eef1f6;border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,#d89523,var(--gold-vif));border-radius:999px;transition:width .6s var(--ease)}
.stat{background:var(--bg);border-radius:12px;padding:12px 14px}

.btn{
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;border:none;border-radius:10px;
  padding:12px 20px;background:var(--marine);color:#fff;transition:.15s var(--ease);
  display:inline-block;text-decoration:none;text-align:center;
}
.btn:hover{background:var(--deep);color:#fff}
.btn.alt{background:#fff;color:var(--marine);border:1.5px solid var(--marine)}
.btn.alt:hover{background:#eef2f7}
.btn.sig{background:var(--violet)}
.btn.sig:hover{background:#8E4108}
.pill{font-size:12.5px;font-weight:700;padding:4px 13px;border-radius:999px;display:inline-block}

/* Agenda */
.agitem{display:flex;gap:16px;align-items:center;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px}
.agdate{text-align:center;min-width:58px;background:var(--marine);color:#fff;border-radius:12px;padding:8px 4px;flex:none}
.agdate b{font-size:21px;line-height:1;display:block}
.agdate span{font-size:11px;color:#e2ebf4}

/* Formulaires */
label{font-size:13.5px;font-weight:700;color:#37404d;display:block;margin-bottom:5px}
select,input,textarea{font:inherit;font-size:15px;padding:11px 12px;border:1px solid #c8d0da;border-radius:10px;width:100%;background:#fff;color:var(--text)}
select:focus,input:focus,textarea:focus{border-color:var(--marine);box-shadow:0 0 0 3px rgba(31,58,95,.12);outline:none}
.hint{font-size:12.5px;color:var(--muted)}

.quote{background:var(--beige);border-radius:12px;padding:14px 16px;font-style:italic;color:#7d3e0f;font-size:14.5px;margin:12px 0}
.note{border-radius:14px;padding:16px 18px;font-size:14px}

/* Tableaux */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.table-wrap:focus-visible{outline:3px solid var(--gold-vif);outline-offset:2px}
.table-wrap table{width:100%;font-size:14.5px}
.table-wrap th,.table-wrap td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
.table-wrap th{background:var(--bg);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#4b5563;font-weight:700}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap td.num,.table-wrap th.num{text-align:right;font-variant-numeric:tabular-nums}

/* Légende de graphique */
.legend{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.legend li{display:flex;align-items:center;gap:10px;font-size:14px}
.legend .dot{width:12px;height:12px;border-radius:3px;flex:none}
.legend .lab{flex:1;color:var(--muted)}
.legend .val{font-weight:700;color:var(--marine);font-variant-numeric:tabular-nums}

/* Images de contenu */
figure{margin:0}
figure img{border-radius:14px;box-shadow:var(--shadow)}
figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ---------------------------------- Pied ---------------------------------- */
footer.site{background:var(--deep);color:#c3cfdd;margin-top:46px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:38px 20px 26px}
footer.site h3,footer.site h4{color:#fff;font-size:15px;margin:0 0 12px;font-weight:700}
footer.site a{color:#c3cfdd;text-decoration:none;display:block;padding:4px 0;font-size:14px}
footer.site a:hover{color:#fff;text-decoration:underline}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fbar{border-top:1px solid rgba(255,255,255,.12);padding:14px 20px;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.fbar ul{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:wrap}
.fbar a{display:inline}
/* Bouton de connexion à l'espace mairie : discret, mais visible sur chaque page */
.fbar a.connexion{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  color:#dbe4ee;font-weight:600;text-decoration:none;line-height:1;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.fbar a.connexion:hover,.fbar a.connexion:focus-visible{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff;text-decoration:none;
}
.fbar a.connexion svg{width:13px;height:13px;flex:none;fill:currentColor}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width:900px){
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  header.site .nav{flex-wrap:wrap}
  .burger{display:flex}
  nav.menu{width:100%;order:3}
  nav.menu ul{
    flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
  }
  nav.menu.open ul{max-height:520px;padding-bottom:12px}
  nav.menu a{padding:13px 6px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px}
  .quickrow{grid-template-columns:repeat(3,1fr);margin-top:-40px}
  footer.site .cols{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .hero .wrap{padding:44px 18px 62px}
  .pagehero h1{font-size:25px}
}
@media (max-width:480px){
  .quickrow{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:26px}
  body{line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* ------------------------ Bandeau : site en cours ------------------------- */
.bandeau-provisoire{background:#FFF6E3;border-bottom:1px solid #E7CE95;color:#6A4A11;font-size:13.5px;line-height:1.45}
.bandeau-provisoire .wrap{padding:9px 20px}
.bandeau-provisoire strong{color:#5A3D0C}
.bandeau-provisoire a{color:#6A4A11;text-decoration:underline}
.bandeau-provisoire a:hover,.bandeau-provisoire a:focus-visible{color:#3F2B07}
@media (max-width:600px){.bandeau-provisoire{font-size:12.5px}}

/* --------------------------------- Impression ----------------------------- */
@media print{
  .utility,header.site,footer.site,.quickrow,.burger,.skip,.bandeau-provisoire{display:none!important}
  body{background:#fff;font-size:11.5pt;color:#000}
  .hero{background:none!important;color:#000}
  .hero h1,.pagehero h1{color:#000;text-shadow:none}
  .tile,.feature,.newscard,.agitem{box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}


/* ---------- Raccord avec Le Petit Beauvaisien ---------- */
/* Filet orange court sous les titres de section, comme dans le magazine. */
.head h2, h2.sec{position:relative}
.head h2::after, h2.sec::after{
  content:"";display:block;width:58px;height:4px;border-radius:2px;
  background:var(--violet-vif);margin-top:10px;
}
/* Bandeau crème en tête des pages intérieures, comme le magazine. */
.pagehero{background:var(--creme) !important;color:var(--marine) !important;
  border-bottom:1px solid #EBD9C6}
.pagehero h1{color:var(--marine) !important}
.pagehero p{color:#5A5145 !important}
/* fil d'Ariane lisible sur le crème */
.pagehero .breadcrumb,.pagehero .breadcrumb *{color:#6B5B49 !important}
.pagehero .breadcrumb a{color:#8A5A18 !important;text-decoration:underline}


/* ---------- Bandeau d'informations de l'accueil ---------- */
.infos .etiq{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--violet);background:var(--creme);
  border-radius:999px;padding:3px 11px;
}
.infos .info[data-fin] h3{line-height:1.25}
.infos .info{display:block}


/* ---------- Défilement de photos du héros (accueil) ---------- */
/* Les photos sont des couches superposées : une seule est visible à la
   fois, le fondu dure 1,2 s. Sans JavaScript, la première photo reste
   affichée : rien ne casse. */
.hero{position:relative}
.hero .hero-photo{
  position:absolute;inset:0;z-index:0;opacity:0;
  background-size:cover;background-position:center 38%;
  transition:opacity 1.2s var(--ease);
}
.hero .hero-photo.visible{opacity:1}
.hero .wrap,.hero .credit{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .hero .hero-photo{transition:none}
}


/* ---------- Panneau d'informations défilant (accueil) ---------- */
.info-diapo{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
  padding:26px 74px 38px;display:flex;flex-direction:column;justify-content:center;
}
.info-diapo.visible{opacity:1;pointer-events:auto;position:relative}
.info-diapo h3{margin:0 0 8px;font-size:19px;color:var(--marine)}
.info-diapo p{margin:0;font-size:14.5px;color:var(--text);max-width:75ch}
.info-diapo .btn{margin-top:12px;align-self:flex-start;font-size:13.5px;padding:9px 16px}
.infos-fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--marine);font-size:22px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.infos-fleche:hover{background:var(--bg)}
#infosPoints span{width:9px;height:9px;border-radius:50%;background:#cfd8e3;display:block}
#infosPoints span.actif{background:var(--marine)}
@media(max-width:640px){.info-diapo{padding:20px 52px 34px}.info-diapo h3{font-size:16.5px}}


/* ---------- Sous-menus du menu principal ---------- */
nav.menu li{position:relative}
nav.menu .sousmenu{
  position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow2);padding:8px;margin:0;list-style:none;
  display:none;flex-direction:column;gap:2px;
}
/* pont invisible entre l'entrée du menu et son panneau : sans lui, le
   panneau se referme dès que la souris traverse l'espace qui les sépare */
nav.menu li.a-sousmenu:hover::after,
nav.menu li.a-sousmenu:focus-within::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}
nav.menu li.a-sousmenu:hover>.sousmenu,
nav.menu li.a-sousmenu:focus-within>.sousmenu{display:flex}
nav.menu .sousmenu a{
  display:block;font-size:13.5px;font-weight:500;color:#37404d;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
}
nav.menu .sousmenu a:hover{background:#eef2f7;color:var(--marine)}
@media (max-width:760px){ nav.menu .sousmenu{display:none!important} }


/* ---------- Informations et PanneauPocket, cote a cote ----------
   Deux colonnes de meme hauteur, mais c'est le CONTENU qui decide de cette
   hauteur, pas un chiffre impose. Avant le clic, la facade PanneauPocket fait
   a peu pres la taille du carrousel d'informations : les deux cartes sont
   d'aplomb, sans vide sous l'une ni sous l'autre. Apres le clic, le cadre
   prend ses 518 pixels et le carrousel s'etire pour rester a sa hauteur.
   Sous 900 pixels, les deux passent l'un sous l'autre, le cadre centre. */
.infos-duo{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:stretch}
/* Disposition retenue le 25/08/2026 : deux colonnes de MEME hauteur, et
   toutes les deux pleines. C'est le cadre PanneauPocket qui donne la hauteur,
   parce qu'il lui faut ses 820 pixels pour qu'une affiche se lise sans
   defiler. A gauche, ce que publie la mairie : le carrousel d'informations ET
   le bloc « A la une », reunis dans la meme colonne. Etirer le seul carrousel
   aurait refait une carte a moitie vide. */
.infos-duo{grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
/* Les deux colonnes commencent chacune par son titre, sur la meme ligne :
   « Informations » a gauche, « PanneauPocket » a droite. Le titre de gauche
   etait auparavant au-dessus de la grille, ce qui decalait l'autre d'une
   hauteur de titre. Releve par Francois le 27/08/2026. */
.infos-duo .infos-colonne{display:grid;grid-template-rows:auto 1fr auto;gap:24px}
/* Une regle plus ancienne, « .infos-colonne > div », centre le contenu de
   chaque bloc de la colonne. Elle s'appliquait aussi au titre depuis qu'il a
   rejoint la colonne, et poussait « Informations » au milieu. Le titre est
   remis a gauche, aligne sur la carte qui le suit. */
.infos-duo .infos-colonne > .head{margin:0;flex:none;display:block}
/* Les deux colonnes s'ouvrent sur un titre de meme rang, de meme taille et
   souligne pareil. « PanneauPocket » etait un petit intertitre a cote d'un
   grand titre de section : aligne mais pas harmonieux. Francois, 27/08/2026. */
.infos-duo .pp-bloc > .head{margin:0;display:block}
/* Meme respiration a droite qu'a gauche : 24 px entre le titre et la boite.
   Sans ce gap le cadre PanneauPocket demarrait 24 px plus haut que la carte
   d'informations, ce qui se voyait tout de suite. */
.infos-duo .pp-bloc{display:grid;grid-template-rows:auto 1fr auto;gap:24px}
.infos-duo .infos-colonne > div{min-height:0;min-width:0}
.infos-duo .alaune-dans-colonne, .infos-duo .actuflow, .infos-duo .actuvue{min-width:0}
/* Les fleches de « A la une » depassaient de vingt pixels de chaque cote :
   admissible sur toute la largeur de la page, pas dans une colonne. */
.infos-duo .actuflow .infos-fleche{left:auto;right:auto}
.infos-duo #actuPrec{left:4px}
.infos-duo #actuSuiv{right:4px}
.infos-duo .pp-cadre iframe{height:820px}
.alaune-dans-colonne{margin:0}
.alaune-dans-colonne .head{margin-bottom:12px}

@media(max-width:1080px){
  .infos-duo{grid-template-columns:1fr;gap:26px}
  .infos-duo .infos-colonne{display:block}
  .infos-duo .alaune-dans-colonne{margin-top:24px}
  .infos-duo .pp-bloc{margin:0 auto;max-width:460px}
  .infos-duo .pp-titre{align-self:flex-start}
}
/* Une fois les panneaux affiches, le cadre est bien plus haut que le
   carrousel : inutile d'etirer celui-ci sur toute cette hauteur, il
   deviendrait un grand vide. Les deux colonnes reprennent leur taille. */
.infos-duo.pp-ouvert{align-items:start}
.infos-colonne{min-width:0;display:flex}
.infos-colonne > div{flex:1;display:flex;flex-direction:column;justify-content:center}

/* ---------- Cadre PanneauPocket ----------
   Il n'est charge qu'au clic : voir la facade dans les pages et le
   gestionnaire « charger-panneaupocket » dans app.js. */
.pp-bloc{display:flex;flex-direction:column;min-width:0;max-width:340px}
/* Sur sa page dediee, la carte n'est pas dans la grille a deux colonnes :
   elle se centre au lieu de s'etirer sur toute la largeur. */
.block > .pp-bloc{margin:0 auto 22px;max-width:420px}
/* Sur la page dediee, on lit les panneaux : le cadre y est plus large et
   plus haut qu'en vignette d'accueil. */
.block > .pp-bloc .pp-cadre iframe{height:820px}
.pp-titre{font-size:15px;font-weight:800;color:var(--marine);margin:0 0 8px;letter-spacing:0;
  padding-bottom:7px;border-bottom:3px solid var(--gold-vif);align-self:flex-start}
.pp-cadre{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex:1}
/* 518 pixels est la taille que PanneauPocket propose par defaut, et elle
   coupe les affiches : il faut faire defiler a l'interieur du cadre pour voir
   le bas d'une affiche. On lui donne la hauteur qu'il faut pour qu'une
   affiche tienne en entier, releve du 25/08/2026. */
.pp-cadre iframe{width:100%;height:660px;border:none;display:block}
.pp-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 20px;gap:13px;width:100%}
.pp-logo{color:var(--marine);opacity:.75}
.pp-accroche{margin:0;font-size:14.5px;color:var(--marine);font-weight:600;line-height:1.5;max-width:360px}
.pp-avis{margin:0;font-size:11.5px;color:var(--muted);line-height:1.55;max-width:340px}
.pp-lien{margin:9px 0 0;font-size:13px;text-align:center;font-weight:600}
.pp-liste{margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--muted);line-height:1.9;
  max-width:320px;text-align:left}
.pp-liste li{padding-left:19px;position:relative}
.pp-liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gold-vif)}
.pp-appli{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:330px;
  padding-top:12px;border-top:1px solid var(--line);width:100%}

@media(max-width:900px){
  .infos-duo{grid-template-columns:1fr;gap:24px}
  .pp-bloc{align-items:center}
  .pp-titre{align-self:flex-start}
  .pp-cadre{width:100%;max-width:340px}
  .pp-lien{width:100%}
}


/* ---------- Page d'evenement : l'affiche a cote du detail, 25/08/2026 ----------
   Une affiche en portrait posee seule en pleine largeur laisse les deux tiers
   de la ligne vides. Elle tient donc sa propre colonne, et le detail pratique
   occupe la place restante. Sous 900px, l'un sous l'autre. */
.fiche-duo{display:grid;grid-template-columns:380px minmax(0,1fr);gap:26px;align-items:start;margin:16px 0 22px}
.fiche-duo > *{min-width:0}
.fiche-duo .feature{margin:0}
@media(max-width:900px){
  .fiche-duo{grid-template-columns:1fr;gap:20px}
  .fiche-duo figure{max-width:420px;margin:0 auto}
}

/* ---------- Selecteur de langue, 25/08/2026 ----------
   Le drapeau est pose par app.js en fin de menu. Il est separe des rubriques
   par un trait : ce n'est pas une rubrique de plus, c'est un changement de
   langue. Le mot accompagne toujours le drapeau — un drapeau seul ne dit pas
   une langue, et un lecteur d'ecran ne lit pas une image. */
/* Le bandeau de navigation etait deja plein : le selecteur de langue le
   faisait passer sur deux lignes. On resserre legerement les rubriques
   au-dessus de 900px plutot que d'amputer le selecteur. */
@media (min-width:901px){
  nav.menu a{padding:9px 9px}
  .brand .txt b{font-size:17px}
}
nav.menu li.langue{margin-left:6px;padding-left:8px;border-left:1px solid var(--line)}
nav.menu li.langue a{display:inline-flex;align-items:center;gap:7px}
nav.menu li.langue svg{border-radius:2px;box-shadow:0 0 0 1px rgba(31,58,95,.18);flex:none}
@media (max-width:900px){
  nav.menu li.langue{margin-left:0;padding-left:0;border-left:none;border-top:1px solid var(--line)}
  nav.menu li.langue a{padding:13px 6px}
}

/* Sur une page anglaise, un lien de menu qui renvoie vers la version
   francaise porte un point discret : le lecteur sait avant de cliquer. */
nav.menu a.en-francais::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--muted);opacity:.55;margin-left:5px;vertical-align:middle}


/* =========================================================================
   Section anglaise : les codes des sites publics britanniques
   -------------------------------------------------------------------------
   Demande de Francois le 26/08/2026 : « reprends des codes sites anglais
   pour qu'ils se sentent comme chez eux ».

   Ce qui est repris du systeme de conception de GOV.UK, parce que c'est la
   grammaire visuelle qu'un Britannique lit depuis quinze ans sans y penser :

   - une typographie de labeur, sans empattement et sans rondeurs. Le reste
     du site est en Poppins, geometrique et francaise d'esprit. Ici, Arial et
     Helvetica, qui sont l'air que respirent les sites publics anglais,
   - des angles DROITS. Aucun coin arrondi. Le site francais est tout en
     cartes arrondies, c'est justement ce qui le fait lire « continental »,
   - des liens bleus SOULIGNES, #1d70b8, qui foncent au survol. Un lien
     anglais se souligne, toujours,
   - le focus jaune #ffdd00 barre de noir. C'est la signature de GOV.UK, et
     c'est surtout la meilleure mise en evidence clavier qui existe : elle
     reste visible sur n'importe quel fond,
   - les encarts a barre laterale grise (« inset text »), l'avertissement au
     rond noir (« warning text »), les listes de renseignements en deux
     colonnes (« summary list »), les boutons verts a ombre basse.

   Ce qui n'est PAS repris, volontairement : la couronne, le bandeau noir
   GOV.UK, la police GDS Transport (sous licence), et toute marque qui
   laisserait croire a un site officiel britannique. On emprunte une
   grammaire d'interface, pas une identite.

   Tout est porte par la classe « en » du body. Les pages francaises ne
   peuvent pas etre touchees.
   ========================================================================= */
.en{
  --uk-jaune:#ffdd00;
  --uk-vert:#00703c;
  --uk-vert-fonce:#005a30;
  --uk-gris:#f3f2f1;
  --uk-bord:#b1b4b6;
  --uk-rouge:#d4351c;
  --uk-bleu-marque:#012169;
  --uk-rouge-marque:#C8102E;
}

/* --- le corps de la page anglaise ---
   La police reste celle du site, Poppins, sur les 71 pages et dans les deux
   langues. Une section qui change de caractere se voit immediatement et fait
   piece rapportee : la coherence de la marque passe avant la couleur locale.
   Les codes anglais tiennent dans tout le reste, la mise en page, les liens,
   le focus, les encarts. */
/* AUCUNE couleur de texte n'est imposee ici. Les titres restent au marine du
   site, le corps a sa couleur habituelle, exactement comme en francais.
   J'avais force le noir de GOV.UK : cela rendait le titre du bandeau photo
   illisible, et surtout cela cassait la coherence des deux versions.
   Constate par Francois le 27/08/2026, et il a raison sur les deux points.
   Des codes anglais on garde ce qui aide a lire, pas la palette. */

/* --- liens : bleus, soulignes, epaissis au survol --- */
/* Les liens gardent la couleur du site, le marine, comme en francais. Des
   codes anglais on conserve le SOULIGNEMENT qui s'epaissit au survol, qui est
   une aide a la lecture, pas une couleur. Demande de Francois le 27/08/2026 :
   memes couleurs de police dans les deux langues. */
.en main a:not(.btn):not(.tile){text-decoration:underline;
  text-underline-offset:.1em;text-decoration-thickness:1px}
.en main a:not(.btn):not(.tile):hover{text-decoration-thickness:3px}
/* le focus jaune : visible sur tout fond, c'est la marque de fabrique */
.en main a:focus,.en main button:focus,.en main summary:focus{outline:3px solid transparent;
  color:#0b0c0c!important;background-color:var(--uk-jaune);
  box-shadow:0 -2px var(--uk-jaune),0 4px #0b0c0c;text-decoration:none}

/* --- rythme : de l'air, et des angles droits --- */
.en-part{margin:0 0 clamp(40px,5vw,64px)}
.en-part:last-child{margin-bottom:20px}
.en-part > h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 14px;color:var(--marine)}
.en-part > p.en-chapo{margin:0 0 24px;font-size:18px;line-height:1.55;color:var(--muted);max-width:66ch}
.en-part > p{font-size:18px;line-height:1.55;max-width:66ch;margin:0 0 18px}
.en-titre{margin-bottom:16px}
/* le filet bleu epais du bandeau GOV.UK, repris en signature de section */
.en-liseré{display:block;width:100%;max-width:180px;height:6px;
  background:linear-gradient(90deg,var(--uk-bleu-marque) 0 50%,var(--uk-rouge-marque) 50% 100%)}

/* --- accroche d'ouverture --- */
.en-part > p.en-intro,.en-intro{font-size:clamp(22px,2.6vw,28px);line-height:1.35;
  font-weight:700;color:var(--marine);max-width:26ch;margin:0 0 20px}

/* --- chiffres : blocs carres, filet bleu au-dessus --- */
.en-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;margin:28px 0 0;border-top:5px solid var(--uk-bleu-marque)}
.en-chiffre{background:var(--uk-gris);padding:18px 18px 20px;border-right:1px solid #fff}
.en-chiffre:last-child{border-right:none}
.en-chiffre b{display:block;font-size:clamp(28px,3.4vw,38px);line-height:1;
  color:var(--marine);font-weight:700}
.en-chiffre span{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:var(--muted)}

/* --- cartes : bord fin, angles droits, filet colore en tete --- */
.en-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.en-carte{background:#fff;border:1px solid var(--uk-bord);padding:0 0 24px}
.en-carte > .en-ic{margin:0 0 0;width:100%;height:5px;border-radius:0;background:var(--uk-lien);
  display:block}
.en-carte > .en-ic svg{display:none}
.en-carte h3{margin:22px 24px 10px;font-size:20px;line-height:1.3;color:var(--marine)}
.en-carte p{margin:0 24px;font-size:17px;line-height:1.55}

/* --- trajets : liste de renseignements a l'anglaise --- */
.en-trajets{list-style:none;margin:0 0 24px;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));display:grid;gap:0 34px;
  border-top:1px solid var(--uk-bord)}
.en-trajets li{display:flex;align-items:baseline;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--uk-bord)}
.en-trajets .lieu{flex:1;font-size:17px;line-height:1.4}
.en-trajets .duree{font-weight:700;font-size:17px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.en-trajets li.phare{background:var(--uk-gris);padding-inline:12px}
.en-trajets li.phare .lieu{font-weight:700}

/* --- encart a barre laterale : le « inset text » --- */
.en-encart{background:transparent;border:none;border-left:10px solid var(--uk-bord);
  border-radius:0;box-shadow:none;padding:6px 0 6px 24px;margin:0}
.en-encart > :first-child{margin-top:0}
.en-encart > :last-child{margin-bottom:0}
.en-encart p,.en-encart li{font-size:18px;line-height:1.55}
.en-encart h3{font-size:20px;margin:26px 0 10px;color:var(--marine)}
.en-encart ul{margin:18px 0;padding-left:22px;list-style:disc}
.en-encart ul li{margin-bottom:12px;padding-left:0}
.en-encart ul li::before{content:none}

/* --- l'avertissement au rond noir : le « warning text » --- */
.en-avert{position:relative;padding-left:62px;margin:22px 0}
.en-avert::before{content:"!";position:absolute;left:0;top:-4px;width:42px;height:42px;
  border-radius:50%;background:var(--marine);color:#fff;font-weight:700;font-size:26px;
  line-height:42px;text-align:center}
.en-avert p:first-child{margin-top:0;font-weight:700;font-size:19px}

/* --- liste de renseignements : la « summary list » --- */
.en .table-wrap{border:none;border-radius:0;box-shadow:none;overflow-x:auto}
.en main table{border-collapse:collapse;width:100%;background:transparent}
.en main table th,.en main table td{padding:12px 20px 12px 0;font-size:17px;line-height:1.5;
  border-bottom:1px solid var(--uk-bord);text-align:left;vertical-align:top;background:transparent}
.en main table thead th{font-weight:700;border-bottom:2px solid var(--marine);text-transform:none;
  letter-spacing:0;font-size:17px;color:var(--marine)}
.en main table tbody th{font-weight:700;width:30%;color:var(--marine);text-transform:none;
  letter-spacing:0}

/* --- boutons verts, avec l'ombre basse qui « s'enfonce » au clic --- */
.en main .btn{background:var(--uk-vert);color:#fff;border-radius:0;border:none;
  box-shadow:0 2px 0 var(--uk-vert-fonce);font-weight:700;
  text-decoration:none;padding:10px 16px}
.en main .btn:hover{background:var(--uk-vert-fonce)}
.en main .btn:active{transform:translateY(2px);box-shadow:none}

/* --- signature du maire --- */
.en-signature{margin-top:24px;padding-top:18px;border-top:1px solid var(--uk-bord);
  font-size:17px;line-height:1.5}
.en-signature b{color:var(--marine)}
.en-signature span{color:var(--muted);font-size:16px}

/* --- fil d'Ariane et note : angles droits --- */
.en main .note{border-radius:0;border-left:10px solid var(--uk-bord);background:transparent;
  padding:6px 0 6px 24px}
.en main .note p{font-size:17px;line-height:1.55}

@media (max-width:700px){
  .en-part{margin-bottom:36px}
  .en-chiffres{border-top-width:4px}
  .en-chiffre{border-right:none;border-bottom:1px solid #fff}
  .en-trajets{grid-template-columns:1fr}
  .en-avert{padding-left:54px}
  .en-avert::before{width:36px;height:36px;line-height:36px;font-size:22px}
}

/* Le renvoi en bas de carte, vers la page francaise qui detaille. Il est
   distingue du texte et annonce la langue : on sait avant de cliquer. */
.en-lien{margin:14px 24px 0;font-size:15px;line-height:1.4}
.en-lien a{font-weight:600}
.en-fr{color:var(--muted);font-size:13.5px;white-space:nowrap}

/* ---------- Menu au-dessus des cartes ----------
   Leaflet place ses calques et ses controles entre 400 et 1000.
   L'en-tete, qui contient le sous-menu, doit passer devant. */
header.site{z-index:1200}