/* ==========================================================================
   Marianne, police du Systeme de design de l'Etat
   --------------------------------------------------------------------------
   Origine : paquet @gouvfr/dsfr v1.15.2, licence Etalab 2.0.
   Fichiers : public/assets/fonts/Marianne-{Regular,Medium,Bold}.woff2,
   servis depuis le site, sans requete vers un serveur exterieur.

   RESERVE D'USAGE : le Systeme de design de l'Etat, Marianne comprise, est
   destine aux sites de l'Etat. Une commune est une collectivite
   territoriale et sort normalement de ce perimetre. Voir
   public/assets/fonts/LISEZ-MOI.md avant toute mise en ligne.
   ========================================================================== */
@font-face {
  font-family: "Marianne";
  src: url("fonts/Marianne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("fonts/Marianne-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("fonts/Marianne-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Identite visuelle de Saint-Blimont
   ------------------------------------------------------------------
   Palette relevee sur les facades du village : la brique des maisons
   porte la couleur principale, la craie et la creme font les fonds,
   l'encre est un brun chaud. L'or et le sable du blason servent aux
   accents, le vert grise au bocage du Vimeu.

   Le registre vise est celui des sites de communes voisines
   (acheuxenvimeu.fr, fressenneville.fr, ault.fr, trescleoux.fr) :
   dense, parle, sans direction artistique apparente.

   Les variables historiques (--ink, --paper, --moss...) restent des
   alias : le back-office et les mini-sites d'associations suivent la
   palette sans qu'une seule de leurs regles soit reecrite.
   ------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   Spectral, police de titrage
   --------------------------------------------------------------------------
   Dessinee par Production Type, fonderie francaise, pour la lecture a
   l'ecran. Licence SIL Open Font License, sans restriction d'usage.
   Deux sous-ensembles : latin couvre le francais, oe compris ; latin-ext
   couvre les noms a diacritiques d'Europe centrale. Le navigateur ne
   telecharge le second que s'il rencontre un caractere concerne.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-SemiBold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-SemiBold-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* Brique des facades : couleur porteuse */
  --sb-brique: #a4553a;
  --sb-brique-fonce: #8a4229;
  --sb-brique-clair: #b96f52;
  --sb-brique-pale: #f5e7e1;

  /* Blason : or et sable */
  --sb-or: #c3902a;
  --sb-or-clair: #eed69a;
  --sb-or-pale: #fdf3d9;
  --sb-sable: #2c2621;

  /* Bocage du Vimeu */
  --sb-vert: #5e6a51;
  --sb-vert-pale: #eceee6;
  --sb-vimeu: #5e6a51;
  --sb-vimeu-fonce: #4a5540;
  --sb-vimeu-pale: #eceee6;

  /* Papier, craie, encre */
  --sb-encre: #2c2621;
  --sb-ardoise: #2c2621;
  --sb-gris: #6a6055;
  --sb-silex: #8a7f72;
  --sb-craie: #faf6f0;
  --sb-craie-2: #f2ebe0;
  --sb-blanc: #fffdfa;
  --sb-trait: #e2d9cb;
  --sb-trait-fort: #c9bda9;
  --ink-soft: #4f463e;
  --ink-faint: var(--sb-gris);

  /* Typographie ordinaire, comme sur les sites observes : une serif
     chaude pour les titres, une sans serif pour le reste. Aucune
     police n'est telechargee. */
  /* Pile de repli commune, si une police ne se charge pas. */
  --font-repli: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Texte courant et interface : Marianne. */
  --font-texte: "Marianne", var(--font-repli);

  /* Grands titres : Spectral, en graisse 600. */
  --font-titre: "Spectral", Georgia, "Times New Roman", serif;

  /* Voile pose sur les photographies d'en-tete.
     --sb-voile : la teinte, en composantes rouge/vert/bleu.
     Les deux opacites reglent l'intensite : le bandeau d'accueil reste
     clair pour laisser voir le village, celui des pages internes est
     dense car il porte du texte blanc. */
  --sb-voile: 74, 38, 25;
  --sb-voile-accueil: 0.18;
  --sb-voile-pages: 0.82;

  /* Angles droits */
  --r: 2px;
  --r-md: 2px;
  --r-lg: 3px;

  /* Alias historiques */
  --ink: var(--sb-encre);
  --muted: var(--sb-gris);
  --paper: var(--sb-craie);
  --white: var(--sb-blanc);
  --moss: var(--sb-brique);
  --leaf: var(--sb-brique-clair);
  --brick: var(--sb-brique);
  --gold: var(--sb-or);
  --sky: var(--sb-craie-2);
  --sea: var(--sb-brique);
  --line: var(--sb-trait);
  --shadow: 0 1px 2px rgba(44, 38, 33, 0.07);
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-texte);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* Indicateur de focus clavier.
   Aucune couleur unique n'atteint 3:1 a la fois sur la craie des pages et sur
   le bleu des bandeaux : le contour est sombre par defaut, et passe a l'or
   clair sur les aplats sombres. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sb-sable);
  outline-offset: 2px;
}

:where(.main-nav, .hero-panel, .sub-hero, .association-hero, .site-footer, .home-agenda-list time)
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--sb-or-clair);
}

.skip-link {
  background: var(--ink);
  color: var(--white);
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  top: -70px;
  z-index: 1400;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.page-top-anchor {
  height: 1px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 1px;
}

/* ==========================================================================
   En-tete : bloc-marque au-dessus, bandeau de navigation en aplat dessous.
   ========================================================================== */
/* ==========================================================================
   En-tete : bandeau utilitaire sombre (coordonnees avant la navigation,
   comme sur ault.fr et fressenneville.fr), puis barre de rubriques en
   aplat de brique.
   ========================================================================== */
.site-header {
  background: var(--sb-craie);
  border-bottom: 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1200;
}

.header-top {
  align-items: center;
  background: var(--sb-encre);
  color: rgba(255, 253, 250, 0.84);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 4px 18px;
  margin: 0;
  max-width: none;
  padding: 6px max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

.brand-line {
  color: var(--sb-blanc);
  font-weight: 700;
  text-decoration: none;
}

.brand-line:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.topbar-item a {
  color: rgba(255, 253, 250, 0.88);
  text-decoration: none;
}

.topbar-item a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.facebook-link {
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

.facebook-link__icon {
  display: block;
  height: 28px;
  width: 28px;
}

.facebook-link:hover .facebook-link__icon {
  filter: brightness(1.12);
}

.facebook-link:focus-visible {
  outline: 3px solid var(--sb-or-clair);
  outline-offset: 3px;
}

.topline {
  align-items: center;
  background: var(--ink);
  color: rgba(255, 253, 250, 0.86);
  display: flex;
  justify-content: space-between;
  margin: 0;
  max-width: none;
  padding: 8px max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

/* Surtitre de rubrique : petites capitales espacees. */
.topline p,
.topline a,
.eyebrow,
.service-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Les dates sont des donnees : casse normale, pas de capitales forcees. */
.date {
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.topline p {
  color: rgba(255, 253, 250, 0.78);
  margin: 0;
}

.topline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}

.topline a {
  color: rgba(255, 253, 250, 0.88);
  font-weight: 700;
  text-decoration: none;
}

/* Barre de rubriques, pleine largeur, en aplat de brique. */
.main-nav {
  background: var(--sb-brique);
  margin: 0;
  max-width: none;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2 + 12px));
}

.brand {
  align-items: center;
  display: inline-flex;
  flex: 0 1 auto;
  gap: 14px;
  text-decoration: none;
}

.brand img {
  border-radius: 0;
  height: 56px;
  object-fit: contain;
  width: auto;
}

.brand span {
  display: block;
  line-height: 1.2;
}

.brand small {
  color: var(--sb-gris);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand strong {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.brand em {
  color: var(--sb-gris);
  display: block;
  font-size: 0.78rem;
  font-style: normal;
}

.nav-links {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
}

.nav-links a {
  color: var(--sb-blanc);
  font-size: 0.93rem;
  font-weight: 600;
  padding: 15px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.24em;
}

.nav-links a.is-current,
.nav-links a[aria-current="page"],
.topline-links a[aria-current="page"] {
  box-shadow: inset 0 -4px 0 var(--sb-or);
  color: var(--sb-blanc);
  text-decoration: none;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.22em;
}


/* Le groupe d'actions vit dans le bandeau utilitaire sombre. */
.nav-actions {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  gap: 10px;
  margin-left: auto;
}

.header-search {
  align-items: stretch;
  background: var(--sb-blanc);
  border: 1px solid var(--sb-blanc);
  border-radius: var(--r);
  display: flex;
  min-height: 28px;
  overflow: hidden;
}

.header-search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 0.78rem;
  min-height: 26px;
  padding: 4px 9px;
  width: clamp(150px, 20vw, 240px);
}

.header-search button {
  background: var(--sb-or);
  border: 0;
  color: var(--sb-sable);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 28px;
  padding: 4px 12px;
  white-space: nowrap;
}

.header-search button:hover {
  background: var(--sb-or-clair);
}

/* Dans le bandeau sombre, les deux boutons sont en contour clair. */
.accessibility-toggle {
  background: transparent;
  border: 1px solid rgba(255, 253, 250, 0.5);
  border-radius: var(--r);
  color: var(--sb-blanc);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 10px;
}

.accessibility-toggle:hover {
  border-color: var(--sb-blanc);
}

.accessibility-options button,
.speech-actions button {
  background: var(--sb-blanc);
  border: 1px solid var(--sb-trait-fort);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  padding: 9px 14px;
}

.accessibility-options button:hover,
.speech-actions button:not(:disabled):hover {
  border-color: var(--sb-brique);
}

.accessibility-toggle[aria-expanded="true"],
.menu-toggle[aria-expanded="true"] {
  background: var(--sb-or);
  border-color: var(--sb-or);
  color: var(--sb-sable);
}

.accessibility-options button[aria-pressed="true"] {
  background: var(--sb-brique);
  border-color: var(--sb-brique);
  color: var(--sb-blanc);
}

.accessibility-panel {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
  margin: 0 auto;
  max-width: var(--max);
  padding: 18px 24px 22px;
}

.accessibility-panel[hidden] {
  display: none;
}

.accessibility-panel h2,
.accessibility-panel p {
  margin: 0;
}

.accessibility-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.accessibility-options button,
.speech-actions button {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

.speech-controls {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 16px;
}

.speech-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.speech-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.speech-status {
  color: var(--muted);
  font-weight: 600;
}

body.a11y-large-text {
  font-size: 112.5%;
}

body.a11y-readable-font {
  font-family: Verdana, Atkinson Hyperlegible, Lexend, sans-serif;
}

body.a11y-underline-links a:not(.button):not(.brand) {
  text-decoration: underline !important;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

/* Les reglages d'accessibilite repeignent la palette a la source :
   les alias historiques suivent automatiquement. */
body.a11y-color-blind {
  --sb-brique: #005a8d;
  --sb-brique-fonce: #00456c;
  --sb-brique-clair: #0072b2;
  --sb-brique-pale: #e6f3ff;
  --sb-vert: #a34700;
  --sb-vert-pale: #fdece0;
  --sb-or: #f0e442;
  --sb-or-clair: #f7f0a0;
  --sb-or-pale: #fdfbe0;
  --sb-vimeu: #56606b;
  --sb-vimeu-fonce: #3f4650;
  --sb-vimeu-pale: #eceef1;
}

body.a11y-high-contrast {
  --sb-encre: #000;
  --sb-gris: #1a1a1a;
  --sb-craie: #fff;
  --sb-craie-2: #f0f0f0;
  --sb-blanc: #fff;
  --sb-brique: #00304a;
  --sb-brique-fonce: #001f30;
  --sb-brique-clair: #004a72;
  --sb-brique-pale: #e8f4ff;
  --sb-vert: #8a1005;
  --sb-vert-pale: #fdeceb;
  --sb-or: #ffd43b;
  --sb-or-pale: #fff8dd;
  --sb-vimeu: #2f3a28;
  --sb-vimeu-fonce: #1e2619;
  --sb-vimeu-pale: #eef1ea;
  --sb-ardoise: #000;
  --sb-silex: #1a1a1a;
  --sb-trait: #111;
  --sb-trait-fort: #000;
  --line: #111;
  --shadow: 0 0 0 2px #111;
}

/* Vision negative : la page est rendue en negatif, fond sombre et texte
   clair. L'inversion porte sur le rendu final, pas sur la palette : aucune
   regle, aucune couleur ecrite en dur ne peut lui echapper, et les ecarts de
   contraste du site sont conserves tels quels.
   La rotation de teinte de 180 degres rattrape ce que l'inversion seule
   ferait : sans elle la brique des bandeaux virerait au cyan. Avec elle,
   seule la clarte s'inverse, les couleurs restent dans leur famille. */
html.a11y-negative {
  /* Le fond de page est peint par la racine, hors du filtre pose sur le
     corps : il est donc ecrit deja sombre, sinon il resterait clair sous une
     page devenue sombre (zones de rebond, pages plus courtes que l'ecran).
     Valeur = #faf6f0 passe dans le meme filtre. */
  background-color: #0c0802;
}

html.a11y-negative body {
  filter: invert(1) hue-rotate(180deg);
}

/* Les medias reprennent l'inversion a leur compte : deux inversions
   s'annulent et ils retrouvent leurs couleurs reelles. Une photographie du
   village en negatif n'aiderait personne.
   Le poids fort passe devant les filtres poses ailleurs sur des medias (le
   flou de chargement progressif des visuels d'accueil) : ce flou saute tant
   que la vision negative est active, une photo en negatif serait pire. */
html.a11y-negative body :is(img, video, iframe, canvas, embed, object) {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Un filtre fait du corps le bloc conteneur des positions fixes : le lien
   d'evitement suivrait alors le defilement. Il est appele en haut de page,
   ou l'absolu donne le meme rendu. */
html.a11y-negative body .skip-link {
  position: absolute;
}

body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

.menu-toggle {
  background: transparent;
  border: 1px solid rgba(255, 253, 250, 0.5);
  border-radius: var(--r);
  color: var(--sb-blanc);
  cursor: pointer;
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 10px;
}

/* La photographie occupe toute la largeur ; le cartouche est pose dessus,
   en bas a gauche. */
.hero {
  min-height: min(58vh, 560px);
  overflow: hidden;
  position: relative;
}

.hero > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.hero-slides {
  inset: 0;
  position: absolute;
}

.hero-slide {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transform: scale(1.015);
  transition: opacity 900ms ease, transform 4200ms ease;
  width: 100%;
}

.hero-slide-image.is-progressive {
  filter: blur(10px) saturate(0.88);
  transition: opacity 900ms ease, transform 4200ms ease, filter 550ms ease;
}

.hero-slide-image.is-progressive.is-hq {
  filter: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Voile leger : il unifie des photos de luminosites differentes sans
   assombrir le village. La lisibilite du texte est assuree par l'aplat. */
.hero-overlay {
  background: rgba(var(--sb-voile), var(--sb-voile-accueil));
  inset: 0;
  position: absolute;
}

.hero-content {
  color: var(--sb-blanc);
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: var(--max);
  padding: 40px 24px 0;
  position: relative;
  width: 100%;
}

.hero-panel {
  background: var(--sb-brique);
  border-top: 4px solid var(--sb-or);
  max-width: 640px;
  padding: 26px 30px 30px;
}

.eyebrow {
  color: var(--sb-brique);
  font-weight: 700;
  margin: 0 0 10px;
}

.hero .eyebrow {
  color: var(--sb-or-clair);
}

.hero h1 {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  max-width: 18ch;
}

/* Reste du panneau de titre de la premiere version : le seul paragraphe
   encore present dans le bandeau est le cartouche, qui doit occuper toute
   la largeur. La regle est donc supprimee. */

.hero-search-form {
  align-items: stretch;
  background: rgba(255, 253, 249, 0.96);
  border: 1px solid rgba(255, 253, 249, 0.75);
  border-radius: var(--r);
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 26px;
  max-width: 650px;
  overflow: hidden;
}

.hero-search-form input {
  background: transparent;
  border: 0;
  color: var(--ink);
  min-height: 56px;
  padding: 14px 18px;
  width: 100%;
}

.hero-search-form button {
  background: var(--gold);
  border: 0;
  color: var(--sb-sable);
  cursor: pointer;
  font-weight: 700;
  min-height: 56px;
  padding: 12px 20px;
}

.hero-actions,
.topline-links,
.legal-strip {
  flex-wrap: wrap;
}

.button,
.search-form button,
.contact-form button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.primary {
  background: var(--sb-brique);
  border-color: var(--sb-brique);
  color: var(--sb-blanc);
}

.primary:hover {
  background: var(--sb-brique-fonce);
  border-color: var(--sb-brique-fonce);
}

/* Bouton secondaire sur fond clair : contour, pas d'aplat. */
.secondary {
  background: transparent;
  border: 1px solid var(--sb-brique);
  color: var(--sb-brique);
}

.secondary:hover {
  background: var(--sb-brique-pale);
}

/* Sur l'aplat bleu du bandeau d'accueil, le bouton principal passe a l'or du
   blason : sans cela il se confondrait avec le fond. */
.hero-panel .primary,
.association-hero .primary {
  background: var(--sb-or);
  border-color: var(--sb-or);
  color: var(--sb-sable);
}

.hero-panel .primary:hover,
.association-hero .primary:hover {
  background: var(--sb-or-clair);
  border-color: var(--sb-or-clair);
}

/* Sur un aplat sombre, le meme bouton passe en contour clair. */
.hero-panel .secondary,
.association-hero .secondary,
.light-secondary {
  background: transparent;
  border-color: rgba(255, 253, 249, 0.7);
  color: var(--sb-blanc);
}

.hero-panel .secondary:hover,
.association-hero .secondary:hover,
.light-secondary:hover {
  background: rgba(255, 253, 249, 0.14);
  border-color: var(--sb-blanc);
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

/* Indicateur de vue : de fins traits, pas des pastilles. */
.hero-carousel-status {
  bottom: 18px;
  display: flex;
  gap: 6px;
  position: absolute;
  right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  z-index: 2;
}

.hero-carousel-status span {
  background: rgba(255, 253, 249, 0.55);
  border: 0;
  border-radius: 0;
  height: 3px;
  transition: background 200ms ease, width 200ms ease;
  width: 22px;
}

.hero-carousel-status span.is-active {
  background: var(--sb-or);
  width: 40px;
}

.a11y-reduce-motion .hero-slide {
  transition: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
    transform: none;
  }
}

/* Information importante : une bande de papier dore glissee entre la
   navigation et la photographie. L'ancien aplat or borde de sable posait
   un troisieme bandeau sature sous les deux barres brunes : trop de poids.
   Le fond passe a l'or pale du blason, le lisere reprend celui des bandes
   utiles, et seul le tampon "Information importante" garde l'or plein
   (contraste sable sur or mesure 7:1). */
.alert-band {
  align-items: center;
  background: var(--sb-or-pale);
  border-bottom: 1px solid var(--sb-trait-fort);
  border-top: 3px solid var(--sb-or);
  color: var(--sb-encre);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 auto;
  max-width: none;
  padding: 11px max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

.alert-band-kicker {
  background: var(--sb-or);
  border-radius: var(--r);
  color: var(--sb-sable);
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0;
  padding: 4px 9px 3px;
  text-transform: uppercase;
}

.alert-band-body {
  align-items: baseline;
  color: var(--ink-soft);
  display: flex;
  flex: 1 1 340px;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* Plusieurs informations : un fil continu, lent, comme un telescripteur.
   Sans script, ou quand le visiteur prefere moins de mouvement, le fil
   reste la liste empilee ci-dessous : une information par ligne, rien
   ne bouge. */
.alert-ticker-fenetre {
  flex: 1 1 340px;
  overflow: hidden;
}

.alert-ticker-track {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.alert-ticker-item {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.alert-band-fil:not(.is-animee) .alert-ticker-item {
  width: 100%;
}

.alert-ticker-texte {
  color: var(--ink-soft);
}

/* Anime par app.js : une seule ligne sans retour, deux copies du contenu,
   la piste glisse d'une demi-largeur puis reboucle sans couture. La duree
   est calculee d'apres la longueur reelle du texte. */
.alert-band-fil.is-animee .alert-ticker-track {
  animation: alert-defile var(--alert-defile-duree, 80s) linear infinite;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
}

.alert-band-fil.is-animee .alert-ticker-item {
  flex-wrap: nowrap;
}

.alert-band-fil.is-animee .alert-ticker-item::after {
  color: var(--sb-or);
  content: "\2022";
  font-weight: 700;
  padding: 0 1.4em;
}

.alert-band-fil.is-animee:hover .alert-ticker-track,
.alert-band-fil.is-animee:focus-within .alert-ticker-track,
.alert-band-fil.is-en-pause .alert-ticker-track {
  animation-play-state: paused;
}

@keyframes alert-defile {
  to {
    transform: translateX(-50%);
  }
}

/* Si la preference de mouvement est activee en cours de visite, le fil
   retombe en liste et les copies servant a la boucle disparaissent. */
body.a11y-reduce-motion .alert-band-fil .alert-ticker-track,
body.a11y-reduce-motion .alert-band-fil .alert-ticker-item {
  flex-wrap: wrap;
  white-space: normal;
  width: auto;
}

body.a11y-reduce-motion .alert-band-fil .alert-ticker-item {
  width: 100%;
}

body.a11y-reduce-motion .alert-ticker-item[aria-hidden],
body.a11y-reduce-motion .alert-ticker-pause {
  display: none;
}

body.a11y-reduce-motion .alert-band-fil .alert-ticker-item::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .alert-band-fil .alert-ticker-track,
  .alert-band-fil .alert-ticker-item {
    animation: none !important;
    flex-wrap: wrap;
    white-space: normal;
    width: auto;
  }

  .alert-band-fil .alert-ticker-item {
    width: 100%;
  }

  .alert-ticker-item[aria-hidden],
  .alert-ticker-pause {
    display: none;
  }

  .alert-band-fil .alert-ticker-item::after {
    content: none;
  }
}

.alert-band-body strong {
  color: var(--sb-encre);
  font-weight: 700;
}

.alert-band a {
  color: var(--sb-brique);
  flex: 0 0 auto;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.alert-band a:hover,
.alert-band a:focus-visible {
  color: var(--sb-brique-fonce);
}

/* Bouton pause/lecture du fil, sur le modele des petits boutons carres. */
.alert-ticker-pause {
  align-items: center;
  background: transparent;
  border: 1px solid var(--sb-trait-fort);
  border-radius: var(--r);
  color: var(--sb-encre);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.alert-ticker-pause[hidden] {
  display: none;
}

.alert-ticker-pause:hover,
.alert-ticker-pause:focus-visible {
  background: var(--sb-or-clair);
}

/* Deux barres a l'arret possible, triangle de lecture une fois en pause. */
.alert-pause-icone {
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: block;
  height: 10px;
  width: 8px;
}

.alert-band-fil.is-en-pause .alert-pause-icone {
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
  border-top: 5px solid transparent;
  height: 0;
  width: 0;
}

.quick-search,
.section,
.legal-strip {
  margin: 0 auto;
  max-width: var(--max);
  padding-left: 24px;
  padding-right: 24px;
}

.quick-search {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 0.8fr 1.2fr;
  padding-bottom: 46px;
  padding-top: 32px;
}

.quick-search h2,
.section h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

.quick-search p,
.section-heading p,
.feature-news p,
.compact-news p,
.service-card p,
.association-card p,
.split-section p {
  color: var(--muted);
}

.search-form {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
}

.search-form input,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
}

.search-form button,
.contact-form button {
  background: var(--moss);
  color: var(--white);
}

.section {
  padding-bottom: 82px;
  padding-top: 82px;
}

.band-light,
.band-warm {
  max-width: none;
}

.band-light > *,
.band-warm > * {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max);
}

.band-light {
  background: var(--sky);
}

.band-warm {
  background: var(--sb-craie-2);
}

.section-heading {
  margin-bottom: 34px;
  max-width: 720px;
}

.section-action {
  margin: 28px 0 0;
}

.service-grid,
.association-grid,
.compact-news {
  display: grid;
  gap: 18px;
}

.service-grid,
.association-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.association-card,
.compact-news article,
.document-list a {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.service-card,
.association-card,
.compact-news article {
  padding: 24px;
}

.service-kicker,
.date {
  color: var(--brick);
  font-weight: 700;
  margin: 0 0 8px;
}

.service-card h3,
.compact-news h3,
.association-card h3,
.agenda-list h3,
.feature-news h3 {
  font-family: var(--font-titre);
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0 0 10px;
}

.text-link {
  color: var(--sb-brique);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.text-link:hover {
  color: var(--sb-brique-fonce);
  text-decoration-thickness: 0.14em;
}

/* Cible tactile d'au moins 24 px pour les liens isoles : ils sont souvent
   utilises au doigt, y compris par des personnes agees. */
.text-link,
.home-document-mini a,
.home-practical-list a,
.footer-contact-details a,
.contact-detail-list a,
.plain-list > li > a,
.point-list a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.event-meta {
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}

.full-button {
  margin: 18px 0 12px;
  width: 100%;
}

.news-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.35fr 0.65fr;
}

.feature-news {
  display: grid;
  gap: 24px;
  grid-template-columns: 0.95fr 1.05fr;
}

.feature-news img {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.compact-news {
  align-content: start;
}

.agenda-list {
  display: grid;
  gap: 14px;
}

.agenda-list article {
  align-items: center;
  background: rgba(255, 253, 249, 0.72);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  display: grid;
  gap: 22px;
  grid-template-columns: 120px 1fr;
  padding: 18px;
}

.agenda-list time {
  background: var(--brick);
  border-radius: var(--r);
  color: var(--white);
  font-weight: 700;
  padding: 18px 10px;
  text-align: center;
}

.agenda-list h3,
.agenda-list p {
  margin: 0;
}

.split-section,
.contact-section {
  display: grid;
  gap: 40px;
  grid-template-columns: 0.78fr 1.22fr;
}

.document-list {
  display: grid;
  gap: 12px;
}

.document-list a {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  text-decoration: none;
}

.document-list span {
  color: var(--muted);
}

.document-viewer-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.document-viewer-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: grid;
  gap: 22px;
  padding: clamp(22px, 4vw, 34px);
}

.document-viewer-head {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.document-viewer-head h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.05;
  margin: 0;
}

.public-document-preview {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: min(78vh, 860px);
  width: 100%;
}

.public-document-image {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 82vh;
  object-fit: contain;
  width: 100%;
}

.document-visual-preview {
  display: grid;
  gap: 8px;
  margin: 0;
}

.document-visual-preview img {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 74vh;
  object-fit: contain;
  width: 100%;
}

.document-visual-preview figcaption {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.document-no-preview {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 24px;
}

.document-viewer-actions {
  align-items: center;
  justify-content: space-between;
}

.document-viewer-info {
  align-self: start;
  position: sticky;
  top: 18px;
}

.document-unavailable {
  align-items: center;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  margin: 0;
  padding: 18px 20px;
}

.document-unavailable strong {
  color: var(--ink);
}

.document-unavailable small {
  font-weight: 700;
}

.document-unavailable-link {
  text-decoration: none;
}

.document-unavailable-link:hover,
.document-unavailable-link:focus-visible {
  border-color: var(--moss);
}

.association-card a {
  color: var(--brick);
  overflow-wrap: anywhere;
}

.association-card small {
  color: var(--muted);
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.rich-association-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

.association-card-top {
  align-items: center;
  display: flex;
  gap: 14px;
}

.association-card-top img,
.association-card-mark {
  border-radius: var(--r-md);
  flex: 0 0 auto;
  height: 62px;
  width: 62px;
}

.association-card-top img {
  object-fit: cover;
}

.association-card-mark {
  align-items: center;
  background: var(--sb-brique);
  color: var(--white);
  display: inline-flex;
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 600;
  justify-content: center;
}

.association-card-event {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 4px;
  padding: 14px;
}

.association-card-event span,
.association-card-meta,
.association-card-actions small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.association-card-event strong {
  font-family: var(--font-titre);
}

.association-card-meta,
.association-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.association-card-meta span {
  background: rgba(28, 76, 104, 0.09);
  border-radius: var(--r);
  color: var(--moss);
  padding: 6px 10px;
}

.association-card-actions {
  justify-content: space-between;
  margin-top: auto;
}

.contact-section {
  border-top: 1px solid var(--line);
}

.contact-success {
  align-items: start;
  background: #eef4e9;
  border: 2px solid var(--sb-vimeu-fonce);
  border-left-width: 10px;
  border-radius: var(--r-lg);
  box-shadow: 0 12px 30px rgba(44, 38, 33, 0.16);
  display: grid;
  gap: 18px;
  grid-column: 1 / -1;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 24px 28px;
  scroll-margin-top: 120px;
}

.contact-success-icon {
  align-items: center;
  background: var(--sb-vimeu-fonce);
  border-radius: 50%;
  color: var(--sb-blanc);
  display: inline-flex;
  font-size: 2rem;
  font-weight: 800;
  height: 54px;
  justify-content: center;
  line-height: 1;
  width: 54px;
}

.contact-success-kicker {
  color: var(--sb-vimeu-fonce);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.contact-success h2 {
  color: var(--sb-encre);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  margin: 0 0 10px;
}

.contact-success-message {
  color: var(--sb-encre);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.contact-success-help {
  color: var(--sb-vimeu-fonce);
  line-height: 1.5;
  margin: 8px 0 0;
}

@media (max-width: 560px) {
  .contact-success {
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .contact-success-icon {
    font-size: 1.65rem;
    height: 46px;
    width: 46px;
  }
}

address {
  color: var(--muted);
  font-style: normal;
  margin-top: 18px;
}

.contact-detail-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.contact-detail-list article {
  align-items: baseline;
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  display: grid;
  gap: 4px 8px;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  padding: 16px;
}

.contact-detail-list span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
}

.contact-detail-list .contact-detail-separator {
  color: var(--muted);
  font-weight: 700;
  text-transform: none;
}

.contact-detail-list strong {
  overflow-wrap: anywhere;
}

.mairie-hours-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.mairie-hours-grid article {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  padding: 18px;
}

.mairie-hours-grid span,
.footer-hours strong {
  color: var(--brick);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
}

.mairie-hours-grid strong {
  line-height: 1.55;
}

.contact-form {
  display: grid;
  gap: 10px;
}


.secure-portal-grid {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
}

.portal-security-card,
.portal-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 24px;
}

.portal-security-card h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.05;
  margin: 0 0 14px;
}

.portal-security-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.portal-form {
  display: grid;
  gap: 10px;
}

.portal-form input,
.portal-form textarea,
.portal-form select {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 48px;
  padding: 12px;
  width: 100%;
}

.portal-form button {
  background: var(--moss);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  min-height: 50px;
  padding: 13px 18px;
}

.portal-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.privacy-note,
.required-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 2px 0 10px;
}

.required-note {
  font-weight: 600;
}

label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after,
label.check-row:has(input[required])::after {
  color: var(--brick);
  content: " (obligatoire)";
  font-size: 0.82em;
  font-weight: 700;
}

.legal-strip {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 24px;
  padding-bottom: 26px;
  padding-top: 26px;
}

.legal-strip a {
  color: var(--muted);
  font-weight: 700;
}

.site-footer {
  background: var(--sb-ardoise);
  color: rgba(255, 253, 249, 0.88);
  max-width: none;
}

/* Un simple filet de brique ferme la page. Le damier decoratif qui se
   trouvait ici relevait de l'ornement, pas de l'information. */
.site-footer::before {
  background: var(--sb-brique);
  content: "";
  display: block;
  height: 3px;
  width: 100%;
}

/* Trois blocs depuis que les colonnes de liens ont fusionne : coordonnees,
   horaires, puis les acces les plus demandes. */
.footer-main {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr) minmax(160px, auto);
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--max);
  padding: 40px 24px 36px;
}

.footer-brand {
  max-width: 440px;
}

.footer-brand h2,
.footer-column h2 {
  color: var(--white);
  margin: 0;
}

.footer-brand h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  line-height: 1.05;
}

.footer-contact-details {
  color: rgba(255, 253, 249, 0.82);
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
}

.footer-contact-details span {
  display: block;
}

.footer-contact-details a {
  color: var(--white);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-hours {
  align-content: start;
  display: grid;
  gap: 8px;
}

/* Les horaires sont une donnee, pas un encadre : un filet a gauche suffit. */
.footer-hours p {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--sb-brique);
  border-radius: 0;
  color: rgba(255, 253, 249, 0.72);
  display: grid;
  font-weight: 600;
  gap: 2px;
  margin: 0;
  padding: 2px 0 2px 12px;
}

.footer-hours strong {
  color: var(--sb-or-clair);
}

.footer-hours span {
  color: rgba(255, 253, 249, 0.82);
  line-height: 1.45;
}

.footer-contact-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.footer-icon-link {
  align-items: center;
  background: rgba(255, 253, 249, 0.14);
  border: 1px solid rgba(210, 155, 34, 0.26);
  border-radius: var(--r-md);
  color: var(--white);
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
  width: 52px;
}

.footer-icon-link:hover,
.footer-icon-link:focus-visible {
  background: rgba(210, 155, 34, 0.28);
}

.footer-column {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-column h2 {
  border-bottom: 1px solid rgba(255, 253, 249, 0.18);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.footer-column a,
.footer-legal-links a {
  color: rgba(255, 253, 249, 0.78);
  font-weight: 700;
  text-decoration: none;
}

.footer-column a:hover,
.footer-column a:focus-visible,
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* La ligne legale appartient au pied de page : un filet suffit a la
   detacher. Le bandeau bleu-vert qui la portait etait un reste de
   l'ancienne palette. */
.footer-bottom {
  align-items: center;
  background: transparent;
  border-top: 1px solid rgba(255, 253, 250, 0.16);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0;
  padding: 20px max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

.footer-bottom p {
  color: rgba(255, 253, 249, 0.68);
  margin: 0;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}

.footer-legal-links a + a {
  border-left: 1px solid rgba(255, 253, 249, 0.2);
  padding-left: 18px;
}

.accessibility-statement {
  display: grid;
  gap: 18px;
}

.statement-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 24px;
}

.statement-card h2 {
  font-family: var(--font-titre);
  margin: 0 0 12px;
}

.statement-alert {
  border-color: #d6a22e;
  border-left: 6px solid var(--gold);
}

.compact-list {
  margin: 0;
}

.compact-list li + li {
  margin-top: 8px;
}

/* Bandeau de page interne : compact, une photographie du village en fond
   sourdine, et le filet or du blason en bas pour rattacher toutes les pages
   a la meme identite. */
.sub-hero {
  background-color: var(--sb-brique-fonce);
  border-bottom: 4px solid var(--sb-or);
  color: var(--sb-blanc);
  overflow: hidden;
  padding: 34px max(24px, calc((100vw - var(--max)) / 2)) 40px;
  position: relative;
}

.sub-hero::before {
  background: rgba(var(--sb-voile), var(--sb-voile-pages));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.sub-hero-media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.sub-hero > :not(.sub-hero-media) {
  position: relative;
  z-index: 2;
}

.sub-hero h1 {
  font-family: var(--font-titre);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  margin: 0;
  max-width: 820px;
}

.sub-hero p:not(.eyebrow) {
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 68ch;
}

.sub-hero .eyebrow {
  color: var(--sb-or-clair);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.breadcrumb a,
.breadcrumb span {
  color: rgba(255, 253, 249, 0.82);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb a::after {
  content: "/";
  margin-left: 10px;
  opacity: 0.65;
}

.page-grid,
.map-section {
  display: grid;
  gap: 46px;
  grid-template-columns: 0.85fr 1.15fr;
}

.notice,
.process-list article,
.checklist p,
.filter-panel,
.publication-list article,
.calendar-preview,
.news-cards article {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.notice {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 18px;
}

.notice span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.notice.success,
.admin-flash {
  background: var(--sb-vimeu-pale);
  border-color: #b6d9ab;
  color: var(--sb-vimeu-fonce);
}

.process-list {
  display: grid;
  gap: 14px;
}

.process-list article {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 56px 1fr;
  padding: 18px;
}

.process-list span {
  align-items: center;
  background: var(--moss);
  border-radius: 50%;
  color: var(--white);
  display: inline-flex;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.process-list p,
.checklist p {
  margin: 0;
}

.map-section {
  border-top: 1px solid var(--line);
}

/* Liste factuelle des equipements et des espaces associatifs reels :
   elle remplace les maquettes decoratives (faux plan, faux navigateur)
   qui illustraient auparavant ces deux pages. */
.point-list {
  border-top: 1px solid var(--sb-trait-fort);
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.point-list li {
  border-bottom: 1px solid var(--sb-trait);
  display: grid;
  gap: 2px;
  padding: 12px 0;
}

.point-list strong {
  font-family: var(--font-titre);
  font-size: 1.12rem;
  font-weight: 600;
}

.point-list span {
  color: var(--sb-gris);
  font-size: 0.88rem;
}

.narrow-form {
  margin: 0 auto;
  max-width: 720px;
}

.filter-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
}

.filter-panel input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 48px;
  padding: 12px 14px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-buttons button {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  padding: 10px 14px;
}

.filter-buttons a {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 14px;
  text-decoration: none;
}

.filter-buttons button.is-active,
.filter-buttons button[aria-pressed="true"],
.filter-buttons a.is-active,
.filter-buttons a[aria-current="page"] {
  background: var(--moss);
  color: var(--white);
}

.filter-buttons a span {
  font-size: 0.86em;
  opacity: 0.78;
}

.result-count {
  color: var(--muted);
  font-weight: 600;
}

.search-page-form {
  margin-bottom: 20px;
}

.search-results {
  display: grid;
  gap: 14px;
}

.search-result-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px;
}

.search-result-card h2 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 8px;
}

.search-result-card p {
  color: var(--muted);
}

.publication-rubric-list {
  display: grid;
  gap: 34px;
}

.publication-rubric {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  padding-top: 22px;
}

.publication-rubric-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.publication-rubric-heading h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.1;
  margin: 0;
}

.publication-rubric-heading > p {
  color: var(--muted);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.publication-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.business-directory-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.publication-list article {
  padding: 22px;
}

.document-card-visual {
  aspect-ratio: 16 / 10;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 14px;
  object-fit: cover;
  width: 100%;
}

.municipal-bulletin-list .document-card-visual {
  aspect-ratio: 3 / 4;
  background: var(--white);
  object-fit: contain;
}

.business-directory-list article {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  padding: 22px;
}

.business-directory-list article.is-featured {
  border-color: rgba(165, 69, 56, 0.5);
}

.business-card-head {
  align-items: center;
  display: flex;
  gap: 14px;
}

.business-logo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  flex: 0 0 auto;
  height: 72px;
  object-fit: contain;
  padding: 8px;
  width: 72px;
}

.publication-rubric.is-hidden,
.publication-list article.is-hidden,
.business-directory-list article.is-hidden,
.detailed-agenda article.is-hidden {
  display: none;
}

.publication-list h3,
.business-directory-list h3,
.news-cards h3 {
  font-family: var(--font-titre);
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0 0 10px;
}

.business-address {
  color: var(--muted);
  font-weight: 600;
}

.business-contact-actions {
  align-self: end;
}

.business-admin-logo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
  max-height: 120px;
  object-fit: contain;
  padding: 8px;
  width: min(100%, 220px);
}

.business-admin-logo.is-small {
  max-height: 54px;
  padding: 5px;
  width: 90px;
}

.checklist {
  display: grid;
  gap: 12px;
}

.checklist p {
  font-weight: 600;
  padding: 18px;
}

.checklist p::before {
  color: var(--moss);
  content: "+";
  font-weight: 700;
  margin-right: 10px;
}

.calendar-preview {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 18px;
}

.calendar-preview span,
.calendar-preview strong {
  border-radius: var(--r);
  padding: 12px 6px;
  text-align: center;
}

.calendar-preview span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.calendar-preview strong {
  background: var(--paper);
}

.calendar-preview .active-day {
  background: var(--brick);
  color: var(--white);
}

.event-filters {
  margin: 0 auto 24px;
  max-width: var(--max);
}

.detailed-agenda {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max);
}

.news-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.news-cards article {
  overflow: hidden;
}

.news-cards article > div {
  padding: 22px;
}

.news-cards img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.news-detail-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.news-detail-card,
.news-detail-aside,
.related-news-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.news-detail-card {
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
}

.news-detail-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.news-detail-card h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.16;
  margin: 0 0 18px;
}

.news-detail-lead {
  color: var(--moss);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.55;
}

.news-detail-image {
  border-radius: var(--r-md);
  margin: 16px 0 28px;
  max-height: 520px;
  object-fit: cover;
  width: 100%;
}

.news-detail-body {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.85;
}

.news-linked-documents {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding-top: 28px;
}

.news-linked-documents h3 {
  font-family: var(--font-titre);
  font-size: 1.7rem;
  margin: 0;
}

.news-detail-aside {
  display: grid;
  gap: 12px;
  padding: 22px;
  position: sticky;
  top: 18px;
}

.news-detail-aside h2 {
  font-size: 1.25rem;
  margin: 0;
}

.related-news-card {
  box-shadow: none;
  color: inherit;
  display: grid;
  gap: 6px;
  padding: 16px;
  text-decoration: none;
}

.related-news-card span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.related-news-card strong {
  color: var(--ink);
}

.related-news-card:hover,
.related-news-card:focus-visible {
  border-color: var(--moss);
}

.rubric-nav {
  background: var(--sb-brique-pale);
  border-top: 1px solid rgba(217, 223, 212, 0.92);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 0 auto;
  max-width: none;
  padding: 10px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 12px;
}

.rubric-nav a {
  color: var(--sb-brique-fonce);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.rubric-nav a.is-current,
.rubric-nav a[aria-current="page"] {
  color: var(--brick);
  text-decoration: underline;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.22em;
}

.rubric-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rubric-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: inherit;
  min-height: 190px;
  padding: 20px;
  text-decoration: none;
}

.rubric-card span {
  color: var(--brick);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.rubric-card strong {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.35rem;
  line-height: 1.1;
  margin-bottom: 10px;
}

.rubric-card p,
.content-body {
  color: var(--muted);
}

.content-body {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font-size: 1.08rem;
  padding: 28px;
  white-space: normal;
}

.anchor-target {
  scroll-margin-top: 150px;
}

.info-focus-card {
  background: var(--sb-or-pale);
  border: 1px solid rgba(210, 155, 34, 0.55);
  border-radius: var(--r-md);
  color: var(--ink);
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 24px;
}

.info-focus-card h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.05;
  margin: 0;
}

.info-focus-card p {
  margin: 0;
}

.content-page {
  display: grid;
  gap: 26px;
}

/* Sans cela, un enfant de grille garde min-width: auto et impose sa largeur
   minimale a toute la colonne : la page debordait horizontalement sur mobile
   (carte interactive et longues URL de documents). */
.content-page > *,
.content-page .document-list a,
.content-module > * {
  min-width: 0;
}

.content-page .document-list a {
  flex-wrap: wrap;
  gap: 4px 12px;
  overflow-wrap: anywhere;
}

.content-body-full {
  max-width: 100%;
}

.content-page-image {
  border-radius: var(--r-md);
  display: block;
  margin-bottom: 22px;
  max-height: 520px;
  object-fit: cover;
  width: 100%;
}

.rich-content {
  color: var(--ink);
  line-height: 1.8;
  /* Les redacteurs collent des adresses completes : sans cela, une longue
     URL sans espace fait deborder toute la page sur telephone. */
  overflow-wrap: anywhere;
}

.rich-content > *:first-child {
  margin-top: 0;
}

.rich-content > *:last-child {
  margin-bottom: 0;
}

.rich-content h2,
.rich-content h3,
.rich-content h4 {
  color: var(--ink);
  font-family: var(--font-titre);
  line-height: 1.15;
  margin: 1.4em 0 0.6em;
}

.rich-content h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.rich-content h3 {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

.rich-content h4 {
  font-size: 1.2rem;
}

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote {
  margin: 0 0 1em;
}

.rich-content ul,
.rich-content ol {
  padding-left: 1.3em;
}

.rich-content blockquote {
  border-left: 4px solid var(--line);
  color: var(--muted);
  font-style: italic;
  margin-left: 0;
  padding-left: 1em;
}

.rich-content a {
  color: var(--brick);
  font-weight: 600;
}

.rich-content img {
  border-radius: var(--r);
  display: block;
  margin: 1em auto;
  max-width: 100%;
}

.rich-content .rtf-color-accent,
.rich-editor-area .rtf-color-accent {
  color: var(--moss);
}

.rich-content .rtf-color-muted,
.rich-editor-area .rtf-color-muted {
  color: var(--muted);
}

.rich-content .rtf-size-small,
.rich-editor-area .rtf-size-small {
  font-size: 0.9em;
}

.rich-content .rtf-size-large,
.rich-editor-area .rtf-size-large {
  font-size: 1.24em;
}

.rich-content .rtf-align-left,
.rich-editor-area .rtf-align-left {
  text-align: left;
}

.rich-content .rtf-align-center,
.rich-editor-area .rtf-align-center {
  text-align: center;
}

.rich-content .rtf-align-right,
.rich-editor-area .rtf-align-right {
  text-align: right;
}

.rich-content .rtf-box,
.rich-editor-area .rtf-box {
  background: var(--sb-craie);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 1em 0;
  padding: 14px;
}

.rich-content a.rtf-button-link,
.rich-editor-area a.rtf-button-link {
  background: var(--moss);
  border-radius: var(--r);
  color: var(--white);
  display: inline-block;
  font-weight: 600;
  padding: 9px 15px;
  text-decoration: none;
}

.rich-content .rtf-cols-2,
.rich-editor-area .rtf-cols-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1em 0;
}

.rich-content .rtf-col,
.rich-editor-area .rtf-col {
  min-width: 0;
}

/* Modèle CMS « Fiche pratique » : les mêmes composants sont visibles dans
   l’éditeur et sur le site public, sans gabarit codé pour une page précise. */
.rich-content .rtf-service-page,
.rich-editor-area .rtf-service-page {
  display: grid;
  gap: 34px;
}

.rich-content .rtf-service-page h2,
.rich-content .rtf-service-page h3,
.rich-content .rtf-service-page p,
.rich-editor-area .rtf-service-page h2,
.rich-editor-area .rtf-service-page h3,
.rich-editor-area .rtf-service-page p {
  margin-top: 0;
}

.rich-content .rtf-service-intro,
.rich-editor-area .rtf-service-intro {
  align-items: center;
  background: var(--sb-craie);
  border-left: 5px solid var(--sb-brique);
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  padding: clamp(24px, 4vw, 48px);
}

.rich-content .rtf-service-intro h2,
.rich-content .rtf-practical-card h2,
.rich-content .rtf-service-section > h2,
.rich-editor-area .rtf-service-intro h2,
.rich-editor-area .rtf-practical-card h2,
.rich-editor-area .rtf-service-section > h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  margin-bottom: 16px;
}

.rich-content .rtf-service-intro-copy > p:not(.rtf-eyebrow),
.rich-editor-area .rtf-service-intro-copy > p:not(.rtf-eyebrow) {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 44rem;
}

.rich-content .rtf-eyebrow,
.rich-editor-area .rtf-eyebrow {
  color: var(--sb-brique-fonce);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.rich-content .rtf-contact-facts,
.rich-editor-area .rtf-contact-facts {
  display: grid;
  gap: 10px;
  margin: 24px 0;
}

.rich-content .rtf-contact-fact,
.rich-editor-area .rtf-contact-fact {
  border-top: 1px solid var(--sb-trait);
  padding-top: 10px;
}

.rich-content .rtf-contact-fact p,
.rich-editor-area .rtf-contact-fact p {
  margin: 0;
}

.rich-content .rtf-label,
.rich-editor-area .rtf-label {
  color: var(--sb-gris);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rich-content .rtf-service-media-card,
.rich-editor-area .rtf-service-media-slot {
  align-items: center;
  background: var(--sb-blanc);
  border: 1px solid var(--sb-trait);
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 250px;
  padding: 22px;
}

.rich-content .rtf-service-media-image {
  border-radius: 0;
  height: auto;
  margin: 0;
  max-height: 260px;
  object-fit: contain;
  width: 100%;
}

.rich-editor-area .rtf-service-media-slot::after {
  color: var(--muted);
  content: "L’image principale de la page apparaîtra ici";
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.rich-content .rtf-practical-grid,
.rich-editor-area .rtf-practical-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
}

.rich-content .rtf-practical-card,
.rich-editor-area .rtf-practical-card {
  border: 1px solid var(--sb-trait);
  border-left: 4px solid var(--sb-brique);
  padding: clamp(22px, 3vw, 34px);
}

.rich-content .rtf-hours-card,
.rich-editor-area .rtf-hours-card,
.rich-content .rtf-service-card,
.rich-editor-area .rtf-service-card {
  background: var(--sb-craie);
}

.rich-content .rtf-cutoff-card,
.rich-editor-area .rtf-cutoff-card {
  background: var(--sb-craie);
  border-left-color: var(--sb-or);
}

.rich-content .rtf-hours-list,
.rich-editor-area .rtf-hours-list {
  display: grid;
  margin: 0;
  padding: 0;
}

.rich-content .rtf-hours-list li,
.rich-editor-area .rtf-hours-list li {
  align-items: baseline;
  border-top: 1px solid var(--sb-trait);
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 9px 0;
}

.rich-content .rtf-hours-list span,
.rich-editor-area .rtf-hours-list span,
.rich-content .rtf-deadline-card strong,
.rich-editor-area .rtf-deadline-card strong {
  color: var(--sb-brique-fonce);
}

.rich-content .rtf-deadline-grid,
.rich-editor-area .rtf-deadline-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rich-content .rtf-deadline-card,
.rich-editor-area .rtf-deadline-card {
  background: var(--sb-blanc);
  border: 1px solid var(--sb-trait);
  border-top: 3px solid var(--sb-brique);
  padding: 18px;
}

.rich-content .rtf-deadline-card h3,
.rich-editor-area .rtf-deadline-card h3 {
  font-size: 1.18rem;
  margin-bottom: 12px;
}

.rich-content .rtf-deadline-card p,
.rich-editor-area .rtf-deadline-card p {
  border-top: 1px solid var(--sb-trait);
  margin: 8px 0 0;
  padding-top: 8px;
}

.rich-content .rtf-note,
.rich-editor-area .rtf-note {
  color: var(--sb-gris);
  font-size: 0.9rem;
  margin: 16px 0 0;
}

.rich-content .rtf-service-section,
.rich-editor-area .rtf-service-section {
  border-top: 1px solid var(--sb-trait);
  padding-top: 32px;
}

.rich-content .rtf-service-grid,
.rich-editor-area .rtf-service-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rich-content .rtf-service-card,
.rich-editor-area .rtf-service-card {
  border-top: 4px solid var(--sb-brique);
  min-width: 0;
  padding: 22px;
}

.rich-content .rtf-card-number,
.rich-editor-area .rtf-card-number {
  color: var(--sb-brique);
  display: block;
  font-family: var(--font-titre);
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.rich-content .rtf-service-card h3,
.rich-editor-area .rtf-service-card h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.rich-content .rtf-service-card ul,
.rich-editor-area .rtf-service-card ul {
  margin: 0;
  padding-left: 1.15em;
}

.rich-content .rtf-service-card li + li,
.rich-editor-area .rtf-service-card li + li {
  margin-top: 5px;
}

.content-useful {
  display: grid;
  gap: 12px;
}

.content-useful .document-list {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.association-hero {
  align-items: flex-end;
  background: var(--assoc-theme, var(--sb-brique));
  color: var(--sb-blanc);
  display: flex;
  min-height: min(46vh, 420px);
  overflow: hidden;
  position: relative;
}

.association-hero > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}

.association-hero-overlay {
  background: rgba(16, 24, 32, 0.9);
  background: color-mix(in srgb, color-mix(in srgb, var(--assoc-theme, var(--sb-brique)) 56%, #101820) 90%, transparent);
  inset: 0;
  position: absolute;
}

.association-hero-content {
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: var(--max);
  padding: 40px 24px 44px;
  position: relative;
  width: 100%;
}

.association-hero h1 {
  font-family: var(--font-titre);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  margin: 0;
  max-width: 880px;
}

.association-hero p:not(.eyebrow) {
  font-size: 1.18rem;
  max-width: 680px;
}

.association-logo {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  height: 92px;
  margin-bottom: 24px;
  object-fit: contain;
  padding: 10px;
  width: 92px;
}

.association-space-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: 1.15fr 0.85fr;
}

.association-contact-card {
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 24px;
}

.association-contact-card p {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
}

.association-contact-card p:first-child,
.association-contact-card p:last-child {
  border-bottom: 0;
}

.association-contact-card span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-body {
  background: var(--sb-craie-2);
}

.admin-top {
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 14px 24px;
}

.admin-top-main {
  align-items: center;
  display: flex;
  gap: 18px;
}

.admin-user-pill {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 2px;
  padding: 8px 14px;
}

.admin-user-pill strong,
.admin-user-pill span {
  line-height: 1.1;
}

.admin-user-pill span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-nav a {
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 700;
  padding: 8px 10px;
  text-decoration: none;
}

.admin-nav a.is-current,
.admin-nav a[aria-current="page"] {
  background: var(--moss);
  color: var(--white);
}

.admin-main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 34px 24px 72px;
}

.admin-page-head {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-page-head h1,
.admin-card h1 {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.16;
  margin: 0;
}

.admin-page-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.admin-page-actions a {
  color: var(--brick);
  font-weight: 700;
}

.admin-page-actions a.button.primary {
  color: var(--white);
}

.document-admin-actions {
  align-items: stretch;
}

.document-admin-action {
  align-items: center;
  background: var(--white);
  border: 2px solid rgba(47, 109, 144, 0.35);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--moss);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 50px;
  min-width: 190px;
  padding: 12px 18px;
  text-decoration: none;
}

.document-admin-action::before {
  align-items: center;
  border-radius: var(--r);
  content: "+";
  display: inline-flex;
  font-size: 1.25rem;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 24px;
}

.document-admin-action.is-primary {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--white);
}

.document-admin-action.is-primary::before {
  background: rgba(255, 253, 249, 0.18);
}

.document-admin-action.is-secondary {
  background: var(--white);
  border-color: var(--moss);
  color: var(--moss);
}

.document-admin-action.is-secondary::before {
  background: rgba(47, 109, 144, 0.12);
}

.document-admin-action.is-compact {
  min-height: 42px;
  min-width: 0;
  padding: 8px 14px;
}

.admin-login {
  display: grid;
  min-height: calc(100vh - 120px);
  place-items: center;
}

.admin-card,
.admin-row,
.admin-form,
.admin-flash {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.admin-card {
  color: inherit;
  padding: 24px;
  text-decoration: none;
}

.admin-dashboard,
.admin-module-grid,
.admin-priority-grid {
  display: grid;
  gap: 18px;
}

.admin-dashboard,
.admin-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-priority-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
}

.admin-dashboard h2,
.admin-module-card strong,
.admin-priority-card strong {
  font-family: var(--font-titre);
  font-size: 3rem;
  line-height: 1;
  margin: 0;
}

.admin-hero-panel,
.admin-help-panel,
.admin-empty-state,
.admin-module-card,
.admin-priority-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.admin-hero-panel {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.admin-hero-panel > * {
  position: relative;
}

.admin-hero-panel h1 {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.16;
  margin: 0;
}

.admin-hero-panel p {
  margin-bottom: 0;
  max-width: 680px;
}

.admin-hero-actions,
.admin-quick-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-section-title {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin: 28px 0 14px;
}

.admin-section-title h2,
.admin-help-panel h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin: 0;
}

.admin-section-title p,
.admin-help-panel p {
  color: var(--muted);
  margin: 4px 0 0;
}

.admin-subsection-title {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 10px 0 8px;
}

.admin-subsection-title h3 {
  color: var(--ink);
  font-family: var(--font-titre);
  font-size: 1.05rem;
  margin: 0;
}

.admin-subsection-title p {
  color: var(--muted);
  margin: 0;
}

.admin-quick-actions a {
  background: var(--sky);
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 700;
  padding: 9px 12px;
  text-decoration: none;
}

.admin-module-card,
.admin-priority-card {
  color: inherit;
  min-height: 170px;
  padding: 22px;
  text-decoration: none;
}

.admin-module-card span,
.admin-priority-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-module-card p,
.admin-priority-card p {
  color: var(--muted);
  font-weight: 600;
  margin: 12px 0 0;
}

.admin-priority-card {
  background: var(--sb-brique);
  color: var(--white);
}

.admin-priority-card span,
.admin-priority-card p {
  color: rgba(255, 253, 249, 0.82);
}

.admin-help-panel,
.admin-empty-state {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 0.85fr 1.15fr;
  margin-bottom: 22px;
  padding: 22px;
}

.admin-split-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1.14fr);
}

.admin-users-panel {
  display: grid;
  gap: 12px;
}

.admin-body.has-modal-open {
  overflow: hidden;
}

.admin-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: fixed;
  z-index: 1400;
}

.admin-modal[hidden] {
  display: none;
}

.admin-modal-backdrop {
  background: rgba(29, 27, 22, 0.62);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.admin-modal-panel {
  max-height: calc(100vh - 44px);
  max-width: 920px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.admin-modal-panel .admin-form {
  border-radius: var(--r-md);
  margin: 0;
  max-width: 100%;
  padding: 22px;
}

.admin-modal-close {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  font-weight: 700;
  min-height: 38px;
  padding: 7px 12px;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
}

.compact-head {
  margin-bottom: 0;
}

.permission-grid {
  display: grid;
  gap: 14px;
}

.permission-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
}

.permission-group legend {
  font-weight: 700;
  padding: 0 8px;
}

.permission-option {
  align-items: flex-start;
  background: var(--paper);
  border-radius: var(--r-md);
  display: flex;
  gap: 10px;
  padding: 12px;
}

.permission-option input {
  margin-top: 4px;
  width: auto;
}

.permission-option span {
  display: grid;
  gap: 2px;
}

.permission-option small,
.permission-badges span {
  color: var(--muted);
}

.permission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.permission-badges span {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 9px;
}

.admin-table {
  display: grid;
  gap: 14px;
}

.admin-row {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr auto;
  padding: 18px;
}

.admin-row h2,
.admin-row p {
  margin: 0 0 6px;
}

.admin-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.admin-row-actions a,
.danger-link {
  background: transparent;
  border: 0;
  color: var(--brick);
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.status-on,
.status-off {
  border-radius: var(--r);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 10px;
}

.status-on {
  background: var(--sb-vimeu-pale);
  color: var(--sb-vimeu-fonce);
}

.status-off {
  background: #f3e3df;
  color: #793529;
}

.status-pending {
  background: #fff3c4;
  border-radius: var(--r);
  color: #6f5200;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 10px;
}

body.a11y-color-blind .accessibility-options button[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

body.a11y-color-blind .status-on,
body.a11y-color-blind .status-off,
body.a11y-color-blind .status-pending {
  border: 2px solid currentColor;
}

body.a11y-color-blind .status-on {
  background: #e6f3ff;
  color: #004b73;
}

body.a11y-color-blind .status-off {
  background: #fff0dc;
  border-style: dashed;
  color: #8f3a00;
}

body.a11y-color-blind .status-pending {
  background: #fff8c8;
  border-style: dotted;
  color: #5c4800;
}

.inline-review-form {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.inline-review-form input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.inline-review-form button,
.danger-button {
  background: var(--moss);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  min-height: 38px;
  padding: 9px 12px;
}

.danger-button {
  background: var(--brick);
}

.admin-form {
  display: grid;
  gap: 10px;
  padding: 24px;
}

.admin-form h2 {
  border-top: 1px solid var(--line);
  font-family: var(--font-titre);
  font-size: 1.7rem;
  margin: 18px 0 4px;
  padding-top: 18px;
}

.admin-form h2:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.wide-form {
  max-width: 780px;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-card input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 46px;
  padding: 12px;
  width: 100%;
}

.admin-form input[type="file"] {
  background: var(--white);
}

.admin-form select {
  background: var(--paper);
}

.rich-editor {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.rich-editor-toolbar {
  align-items: center;
  background: var(--sb-craie-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.rich-editor-toolbar button {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 34px;
  padding: 6px 10px;
}

/* Le focus clavier reste visible : seul le survol se contente de la bordure. */
.rich-editor-toolbar button:hover {
  border-color: var(--sb-brique);
  outline: none;
}

.rich-editor-toolbar button:focus-visible {
  border-color: var(--sb-brique);
}

.rich-editor-area {
  background: var(--white);
  line-height: 1.65;
  max-height: min(62vh, 620px);
  min-height: 260px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  resize: vertical;
  scrollbar-gutter: stable;
  padding: 14px;
}

.rich-editor-area:focus {
  outline: 2px solid rgba(28, 76, 104, 0.35);
  outline-offset: -2px;
}

.rich-editor-area img {
  height: auto;
  max-width: 100%;
}

.rich-editor-media {
  background: var(--sb-craie);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 10px;
}

.rich-editor-media-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 180px minmax(0, 1fr) auto;
}

.rich-editor-media-row-external {
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) auto;
}

.rich-editor-media label {
  font-size: 0.85rem;
  font-weight: 600;
}

.rich-editor-media select,
.rich-editor-media input {
  min-height: 38px;
  padding: 8px 10px;
}

.admin-form .rich-editor-media button {
  min-height: 38px;
  padding: 9px 12px;
}

.rich-editor-image-preview {
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
  margin-top: 4px;
  max-height: 180px;
  max-width: 280px;
  object-fit: contain;
}

.rich-editor-image-preview[hidden] {
  display: none !important;
}

.rich-editor-advanced {
  border-bottom: 1px solid var(--line);
  background: var(--sb-craie);
}

.rich-editor-advanced > summary {
  cursor: pointer;
  font-weight: 800;
  padding: 12px 14px;
}

.rich-editor-toolbar-advanced {
  border-top: 1px solid var(--line);
}

.rich-editor-page-template {
  align-items: center;
  background: #fff7ee;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 12px 14px;
}

.rich-editor-page-template div {
  display: grid;
  gap: 3px;
}

.rich-editor-page-template span {
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-form .rich-editor-page-template button {
  background: var(--brick);
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 13px;
}

.category-path-fields,
.admin-advanced-options,
.smtp-advanced {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 8px 0 16px;
  padding: 16px;
}

.category-path-fields legend {
  font-weight: 800;
  padding: 0 8px;
}

.admin-advanced-options > summary,
.smtp-advanced > summary {
  cursor: pointer;
  font-weight: 800;
  padding: 4px 0;
}

.admin-advanced-options[open] > summary,
.smtp-advanced[open] > summary {
  margin-bottom: 14px;
}

.admin-form-step {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--brick);
  display: flex;
  font-weight: 800;
  gap: 10px;
  margin: 20px 0 4px;
  padding-top: 18px;
}

.admin-form-step:first-of-type {
  border-top: 0;
  margin-top: 0;
}

.admin-form-step span {
  align-items: center;
  background: var(--brick);
  border-radius: 999px;
  color: var(--white);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.smtp-health {
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: var(--r-md);
  margin: 14px 0 20px;
  padding: 14px 16px;
}

.smtp-health p {
  margin: 5px 0 0;
}

.smtp-health.is-success {
  background: var(--sb-vimeu-pale);
  border-left-color: var(--sb-vimeu-fonce);
}

.smtp-health.is-failed {
  background: #fff0ec;
  border-left-color: #b42318;
}

.security-event {
  border-left: 5px solid var(--line);
}

.security-event.is-danger {
  border-left-color: #b42318;
}

.security-event.is-success {
  border-left-color: var(--sb-vimeu-fonce);
}

.security-event-details {
  margin-top: 10px;
}

.security-event-details summary {
  color: var(--brick);
  cursor: pointer;
  font-weight: 700;
}

.rich-editor-upload-status {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
}

.rich-editor-upload-status.is-error {
  color: #b42318;
}

.document-link-picker {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 14px;
  margin: 6px 0 12px;
  padding: 18px;
}

.document-link-picker legend {
  font-weight: 700;
  padding: 0 8px;
}

.document-link-filters {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
}

.document-link-filters div {
  display: grid;
  gap: 6px;
}

.document-link-filters label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.document-link-filters input,
.document-link-filters select {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 42px;
  padding: 10px 12px;
}

.document-link-options {
  display: grid;
  gap: 10px;
}

.document-link-option {
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  gap: 12px;
  padding: 12px;
}

.document-link-option input {
  flex: 0 0 auto;
  margin-top: 4px;
  min-height: 0;
  width: auto;
}

.document-link-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.document-link-option small {
  color: var(--muted);
}

.document-link-option.is-hidden {
  display: none;
}

.current-file {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  margin: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

.admin-form button,
.admin-card button {
  background: var(--moss);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  min-height: 46px;
  padding: 12px 18px;
}

.admin-form .rich-editor-toolbar button {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  min-height: 34px;
  padding: 6px 10px;
}

.check-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.check-row input {
  min-height: 0;
  width: auto;
}

@media (max-width: 900px) {
  .rich-content .rtf-cols-2,
  .rich-editor-area .rtf-cols-2 {
    grid-template-columns: 1fr;
  }

  .rich-content .rtf-service-intro,
  .rich-editor-area .rtf-service-intro,
  .rich-content .rtf-practical-grid,
  .rich-editor-area .rtf-practical-grid {
    grid-template-columns: 1fr;
  }

  .rich-content .rtf-service-grid,
  .rich-editor-area .rtf-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rich-content .rtf-deadline-grid,
  .rich-editor-area .rtf-deadline-grid {
    grid-template-columns: 1fr;
  }

  .rich-editor-page-template {
    align-items: stretch;
    flex-direction: column;
  }

  .rich-editor-media {
    gap: 12px;
  }

  .rich-editor-media-row,
  .rich-editor-media-row-external {
    grid-template-columns: 1fr;
  }

  .document-link-filters {
    grid-template-columns: 1fr;
  }

  .topline {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .accessibility-panel {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 6px 0 10px;
  }

  html.js-enabled .nav-links {
    display: none;
  }

  html.js-enabled .nav-links.is-open {
    display: flex;
  }

  .hero {
    min-height: 72vh;
  }

  .hero-content {
    padding-top: 88px;
  }

  .quick-search,
  .feature-news,
  .news-layout,
  .split-section,
  .contact-section,
  .association-space-grid,
  .document-viewer-layout,
  .page-grid,
  .map-section,
  .search-form,
  .secure-portal-grid,
  .legal-grid,
  .home-practical-list {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-legal-links {
    justify-content: flex-start;
  }

  .alert-band {
    align-items: flex-start;
    flex-direction: column;
  }

  /* En colonne, les bases de 340 px deviendraient des hauteurs : le
     bandeau occupait tout un ecran de telephone. */
  .alert-ticker-fenetre,
  .alert-band-body {
    flex-basis: auto;
  }

  .alert-ticker-fenetre {
    width: 100%;
  }

  .service-grid,
  .hub-link-grid,
  .association-grid,
  .publication-list,
  .news-cards,
  .news-detail-layout,
  .rubric-grid,
  .admin-dashboard,
  .admin-row {
    grid-template-columns: 1fr;
  }

  .publication-rubric-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .publication-rubric-heading > p {
    white-space: normal;
  }

  .admin-page-head,
  .admin-page-actions,
  .admin-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .rich-content .rtf-service-grid,
  .rich-editor-area .rtf-service-grid {
    grid-template-columns: 1fr;
  }

  .rich-content .rtf-hours-list li,
  .rich-editor-area .rtf-hours-list li {
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .main-nav {
    gap: 10px;
    min-height: auto;
    padding: 10px 16px 12px;
  }

  .nav-actions {
    flex: 1 1 100%;
    gap: 8px;
    justify-content: stretch;
    margin-left: 0;
    width: 100%;
  }

  .accessibility-toggle,
  .menu-toggle {
    border-radius: var(--r);
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
  }

  .brand strong {
    font-size: 1.1rem;
  }

  .hero-content {
    padding-bottom: 94px;
    padding-left: 22px;
    padding-right: 22px;
    width: 100%;
  }

  .hero h1,
  .hero p:not(.eyebrow),
  .hero-search-form {
    max-width: 100%;
  }

  .hero p:not(.eyebrow) {
    overflow-wrap: break-word;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .agenda-list article {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .agenda-list time {
    width: max-content;
  }

  .document-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding-bottom: 38px;
    padding-top: 42px;
  }

  .footer-legal-links {
    gap: 10px 14px;
  }

  .footer-legal-links a + a {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 420px) {
  .nav-actions {
    flex-direction: column;
  }

  .accessibility-toggle,
  .menu-toggle {
    width: 100%;
  }
}


.admin-global-search {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.admin-global-search input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 40px;
  padding: 8px 14px;
  width: min(260px, 48vw);
}

.admin-global-search button {
  background: var(--moss);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  min-height: 40px;
  padding: 8px 14px;
}

.admin-workspace-grid,
.document-admin-layout,
.association-gallery-grid {
  display: grid;
  gap: 18px;
}

.admin-workspace-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 30px;
}

.admin-workspace-card {
  background: var(--sb-blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: inherit;
  min-height: 150px;
  padding: 20px;
  text-decoration: none;
}

.admin-workspace-card span {
  color: var(--brick);
  font-family: var(--font-titre);
  font-size: 1.35rem;
  font-weight: 600;
}

.admin-workspace-card p {
  color: var(--muted);
  font-weight: 600;
}

.document-admin-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  margin-bottom: 30px;
}

.document-admin-layout.is-single {
  grid-template-columns: minmax(0, 780px);
}

.document-admin-filters {
  margin: 0 0 18px;
}

.document-preview {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 300px;
  margin-top: 12px;
  width: 100%;
}

.document-admin-visual {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  max-width: 320px;
}

.document-admin-visual figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.document-admin-thumb {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
  max-height: 180px;
  object-fit: cover;
  width: min(100%, 320px);
}

.document-admin-row {
  align-items: start;
}

.contact-editor-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.association-gallery-section {
  padding-top: 0;
}

.association-gallery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.association-gallery-grid img {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  object-fit: cover;
  width: 100%;
}

.association-hero .button.secondary {
  border-color: var(--assoc-secondary, var(--gold));
}

@media (max-width: 1100px) {
  .admin-workspace-grid,
  .association-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-global-search,
  .document-admin-layout,
  .contact-editor-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .admin-global-search {
    display: grid;
  }

  .admin-global-search input {
    width: 100%;
  }

  .admin-modal {
    align-items: flex-end;
    padding: 8px;
  }

  .admin-modal-panel {
    max-height: calc(100vh - 16px);
  }

  .admin-modal-panel .admin-form {
    padding: 16px;
  }

  .admin-modal-close {
    right: 10px;
    top: 10px;
  }
}

@media (max-width: 560px) {
  .admin-workspace-grid,
  .association-gallery-grid {
    grid-template-columns: 1fr;
  }
}


.permission-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}

.permission-toolbar button {
  background: var(--sky);
  border: 1px solid rgba(28, 76, 104, 0.18);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px;
}

.admin-control-center {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  margin-bottom: 30px;
}

.admin-insight-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-insight-card,
.admin-recent-events {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: inherit;
  padding: 18px;
  text-decoration: none;
}

.admin-insight-card {
  border-left: 6px solid var(--moss);
  display: grid;
  gap: 6px;
}

.admin-insight-card.is-warning {
  border-left-color: var(--gold);
}

.admin-insight-card.is-danger {
  border-left-color: var(--brick);
}

.admin-insight-card span,
.admin-recent-events span {
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-recent-events h3 {
  font-family: var(--font-titre);
  margin: 0 0 12px;
}

.admin-recent-events p {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 0;
}

.admin-recent-events p:first-of-type {
  border-top: 0;
}

@media (max-width: 900px) {
  .admin-control-center,
  .admin-insight-list {
    grid-template-columns: 1fr;
  }
}


.admin-matrix-table .admin-row h2 {
  font-size: 1.05rem;
}

.admin-matrix-table .admin-row .privacy-note {
  margin-top: 8px;
}

.admin-users-panel .admin-row-actions .status-off,
.admin-users-panel .admin-row-actions .status-on {
  white-space: nowrap;
}

.admin-users-panel .admin-row-actions form {
  margin: 0;
}

.admin-users-panel .admin-row-actions .admin-user-action {
  align-items: center;
  appearance: none;
  background: var(--sb-craie);
  border: 1px solid var(--sb-trait-fort);
  border-radius: var(--r);
  color: var(--sb-encre);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  padding: 8px 13px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
}

.admin-users-panel .admin-row-actions .admin-user-action:hover {
  background: var(--sb-craie-2);
  border-color: var(--sb-silex);
}

.admin-users-panel .admin-row-actions .admin-user-action.is-edit {
  background: transparent;
  border-color: transparent;
  color: var(--sb-brique-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-users-panel .admin-row-actions .admin-user-action.is-toggle {
  background: var(--sb-brique-pale);
  border-color: var(--sb-brique-clair);
  color: var(--sb-brique-fonce);
}

.admin-users-panel .admin-row-actions .admin-user-action.is-reset {
  background: var(--sb-or-pale);
  border-color: var(--sb-or-clair);
  color: var(--sb-sable);
}

.admin-users-panel .admin-row-actions .admin-user-action.is-delete {
  background: var(--sb-brique-fonce);
  border-color: var(--sb-brique-fonce);
  color: var(--sb-blanc);
}

.admin-users-panel .admin-row-actions .admin-user-action.is-delete:hover {
  background: var(--sb-sable);
  border-color: var(--sb-sable);
}

.admin-reset-link-panel {
  background: var(--sb-or-pale);
  border: 1px solid var(--sb-or-clair);
  border-left: 6px solid var(--sb-or);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
  padding: 22px;
}

.admin-reset-link-panel h2,
.admin-reset-link-panel p {
  margin: 0;
}

.admin-reset-link-copy {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-reset-link-copy input {
  background: var(--white);
  border: 1px solid var(--sb-trait-fort);
  border-radius: var(--r);
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}

.admin-reset-link-copy button {
  background: var(--sb-brique-fonce);
  color: var(--sb-blanc);
}

.admin-reset-email-preview {
  border-top: 1px solid var(--sb-or-clair);
  padding-top: 12px;
}

.admin-reset-email-preview summary {
  color: var(--sb-brique-fonce);
  cursor: pointer;
  font-weight: 700;
}

.admin-reset-email-preview pre {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font: inherit;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
  padding: 16px;
  white-space: pre-wrap;
}

.admin-password-reset .admin-card {
  display: grid;
  gap: 12px;
  max-width: 620px;
  width: 100%;
}

.admin-login-help {
  margin: 0;
  text-align: center;
}

.admin-login-help a {
  color: var(--sb-brique-fonce);
  font-weight: 700;
  text-underline-offset: 3px;
}

@media (max-width: 680px) {
  .admin-reset-link-copy {
    grid-template-columns: 1fr;
  }
}


.legal-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notice-card {
  border-left: 6px solid var(--gold);
}

.production-panel {
  display: grid;
  gap: 20px;
  margin-bottom: 22px;
}

.production-checklist {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.production-check {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: var(--r-md);
  padding: 14px;
}

.production-check.is-done {
  border-left-color: var(--leaf);
}

.production-check.is-todo,
.production-check.is-warning {
  border-left-color: var(--brick);
}

.production-check span,
.admin-card-metric {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.production-check strong {
  display: block;
  margin: 5px 0;
}

.admin-density-toggle {
  background: var(--ink);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 14px;
}

.association-dashboard .admin-card h2 {
  font-size: 1.45rem;
  line-height: 1.1;
  margin-bottom: 10px;
}

.admin-card-metric {
  color: var(--brick);
  font-size: 1rem;
  margin: 0 0 10px;
  text-transform: none;
}

.admin-body.is-compact-admin .admin-row,
.admin-body.is-compact-admin .admin-card,
.admin-body.is-compact-admin .admin-form {
  box-shadow: none;
  padding: 12px;
}

.admin-body.is-compact-admin .admin-table,
.admin-body.is-compact-admin .admin-dashboard,
.admin-body.is-compact-admin .admin-module-grid,
.admin-body.is-compact-admin .admin-priority-grid {
  gap: 10px;
}

.admin-body.is-compact-admin .admin-row p,
.admin-body.is-compact-admin .admin-row h2 {
  margin-bottom: 3px;
}

.admin-body.is-compact-admin .document-preview,
.admin-body.is-compact-admin .admin-help-panel p {
  display: none;
}

@media (max-width: 900px) {
  .legal-grid,
  .production-checklist {
    grid-template-columns: 1fr;
  }

  .map-location-list article,
  .map-admin-help .production-checklist {
    grid-template-columns: 1fr;
  }

  .map-actions {
    justify-content: flex-start;
  }
}

.content-module {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding: clamp(20px, 4vw, 28px);
}

.content-module h2,
.archive-card h3,
.local-directory-card h3 {
  font-family: var(--font-titre);
  line-height: 1.08;
  margin: 0;
}

.content-module p {
  margin: 0;
}

.hub-module {
  background: var(--white);
}

/* Cette regle etant declaree apres le bloc responsive, un repeat(3, ...)
   figé y annulait le passage a une colonne et faisait deborder les pages
   de contenu sous 380 px. La grille se replie desormais d'elle-meme. */
.hub-link-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.hub-link-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hub-link-card:hover,
.hub-link-card:focus-visible {
  border-color: rgba(28, 76, 104, 0.55);
  box-shadow: none;
}

.hub-link-card span {
  color: var(--brick);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hub-link-card strong {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  line-height: 1.1;
}

.hub-link-card p {
  color: var(--muted);
}

.municipal-inline-form {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r-md);
  padding: 20px;
}

.form-split {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 10px;
  margin: 6px 0;
  padding: 16px;
}

.choice-panel legend {
  font-weight: 700;
  padding: 0 8px;
}

.quick-card-grid,
.local-directory-grid,
.map-location-list,
.archive-grid {
  display: grid;
  gap: 14px;
}

.quick-card-grid,
.local-directory-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.quick-card-grid article,
.local-directory-card,
.map-location-list article,
.archive-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
  padding: 16px;
}

.quick-card-grid strong,
.map-location-list strong {
  color: var(--ink);
  font-family: var(--font-titre);
  font-size: 1.18rem;
  line-height: 1.1;
}

.quick-card-grid span,
.map-location-list span,
.map-location-list small,
.local-directory-card span {
  color: var(--muted);
}

.local-directory-card span {
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Les boutons d'itineraire imposaient leur largeur minimale a toute la
   colonne : la fiche debordait de l'ecran sous 380 px. */
.map-location-list,
.map-location-list article,
.map-location-list article > * {
  min-width: 0;
}

.map-location-list .inline-actions,
.map-location-list .map-actions {
  flex-wrap: wrap;
}

.map-location-list .button {
  overflow-wrap: anywhere;
}

.public-map-preview {
  margin-top: 4px;
}

.public-osm-module {
  background: var(--sb-craie);
}

.interactive-map-shell {
  display: grid;
  gap: 10px;
}

.osm-map {
  background: #dde9df;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  min-height: min(68vh, 520px);
  overflow: hidden;
  width: 100%;
}

.leaflet-container {
  font-family: inherit;
}

.leaflet-popup-content {
  color: var(--ink);
  font-size: 0.95rem;
}

.leaflet-popup-content strong {
  display: block;
  margin-bottom: 4px;
}

.leaflet-popup-content a {
  color: var(--brick);
  font-weight: 700;
}

.map-location-list article {
  align-items: start;
  grid-template-columns: 1fr auto;
}

.map-location-list article:focus {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.map-location-list .service-kicker {
  margin-bottom: 4px;
}

.map-admin-title {
  align-items: center;
  display: flex;
  gap: 10px;
}

.map-point-icon {
  margin-bottom: 8px;
}

.map-icon {
  --point-color: var(--sb-brique);
  align-items: center;
  background: var(--point-color);
  border: 2px solid var(--sb-blanc);
  border-radius: 50%;
  box-shadow: none;
  color: var(--sb-blanc);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

body.a11y-color-blind .map-icon {
  background: var(--sea);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--sb-blanc);
}

/* Pictogrammes des marqueurs de carte.
   Les emoji precedents dependaient de la police du systeme et ne se
   coloraient pas. Ils sont remplaces par des masques SVG monochromes
   embarques (CSP img-src 'self' data:), colores par currentColor. */
.map-icon::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  background-color: currentColor;
  content: "";
  display: block;
  height: 16px;
  -webkit-mask: var(--map-glyph) center / contain no-repeat;
  mask: var(--map-glyph) center / contain no-repeat;
  width: 16px;
}

.map-icon--mairie::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 8h20L12 2zM4 10h2v9H4v-9zm4.5 0h2v9h-2v-9zm4.5 0h2v9h-2v-9zm4.5 0h2v9h-2v-9zM2 21h20v2H2v-2z'/%3E%3C/svg%3E");
}

.map-icon--patrimoine::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h3v2h2V3h4v2h2V3h3v19h-6v-6h-2v6H5V3z'/%3E%3C/svg%3E");
}

.map-icon--ecole::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6C9.5 4.5 6.5 4 3 4.5v14c3.5-.5 6.5 0 9 1.5 2.5-1.5 5.5-2 9-1.5v-14C17.5 4 14.5 4.5 12 6z'/%3E%3C/svg%3E");
}

.map-icon--bibliotheque::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h4v18H4V3zm5 0h4v18H9V3zm7.2.6 3.9 1-4.6 17.4-3.9-1L16.2 3.6z'/%3E%3C/svg%3E");
}

.map-icon--salle::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h14V11h3L12 3zm-3 9h6v4H9v-4z'/%3E%3C/svg%3E");
}

.map-icon--dechets::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v2h5v2H4V5h5V3zM6 9h12l-1 12H7L6 9zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z'/%3E%3C/svg%3E");
}

.map-icon--sport::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 3.4 4.4 3.2-1.7 5.2H9.3L7.6 8.6 12 5.4z'/%3E%3C/svg%3E");
}

.map-icon--sante::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z'/%3E%3C/svg%3E");
}

.map-icon--culture::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v11.6A4 4 0 1 0 11 18V8h6V3H9z'/%3E%3C/svg%3E");
}

.map-icon--transport::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v2h-3v-2H8v2H5v-2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm1 3v6h12V6H6zm1 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm10 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E");
}

.map-icon--parking::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h9a6 6 0 0 1 0 12H9v8H4V2zm5 4v4h3a2 2 0 0 0 0-4H9z'/%3E%3C/svg%3E");
}

.map-icon--tourisme::before {
  --map-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.5 5.5-2.2 6.3-6.3 2.2 2.2-6.3 6.3-2.2zM12 10.7a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E");
}

.map-icon--custom-image::before {
  content: none;
}

.map-icon--custom-image {
  background: var(--sb-blanc);
  padding: 2px;
}

.map-icon--custom-image img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.map-marker-wrapper {
  background: none;
  border: 0;
}

.map-marker-wrapper .map-marker-icon {
  height: 34px;
  width: 34px;
}

.map-custom-thumb {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  height: 44px;
  object-fit: cover;
  width: 44px;
}

.map-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.map-actions .button {
  min-height: 38px;
  padding: 9px 12px;
}

.map-admin-layout {
  align-items: start;
}

.map-admin-help .production-checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.map-admin-row {
  align-items: start;
}

.archive-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.archive-card details {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.archive-card summary {
  cursor: pointer;
  font-weight: 700;
}

.archive-card summary span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.archive-card ul {
  margin-bottom: 0;
}

.archive-card a {
  color: var(--moss);
  font-weight: 600;
}

@media (max-width: 700px) {
  .form-split {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* Administration — direction graphique 3 (août 2026)                        */
/* ========================================================================== */

.admin-body {
  background: var(--sb-blanc);
  color: var(--ink);
}

.admin-top {
  align-items: stretch;
  background: rgba(255, 253, 250, 0.98);
  border-bottom: 1px solid var(--line);
  display: block;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 90;
}

.admin-top-main {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(290px, 0.8fr) minmax(300px, 1fr) auto auto;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 94px;
  padding: 16px 40px;
}

.admin-top .brand {
  justify-self: start;
  min-width: 0;
  text-decoration: none;
}

.admin-top .brand img {
  height: 54px;
  width: 54px;
}

.admin-top .brand strong {
  font-family: var(--font-titre);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
}

.admin-top .brand small {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  margin-top: 5px;
  text-transform: uppercase;
}

.admin-global-search {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 52px;
  margin: 0;
  width: 100%;
}

.admin-global-search input {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r) 0 0 var(--r);
  min-height: 52px;
  padding: 12px 18px;
  width: 100%;
}

.admin-global-search button {
  align-items: center;
  background: var(--brick);
  border-radius: 0 var(--r) var(--r) 0;
  display: inline-flex;
  justify-content: center;
  min-height: 52px;
  padding: 0;
}

.admin-global-search button img,
.admin-view-site img,
.admin-menu-toggle img {
  filter: brightness(0) invert(1);
  height: 22px;
  width: 22px;
}

.admin-user-pill {
  background: var(--white);
  min-width: 205px;
  padding: 10px 16px;
}

.admin-view-site {
  align-items: center;
  align-self: stretch;
  background: var(--brick);
  border-radius: var(--r);
  color: var(--white);
  display: inline-flex;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-width: 142px;
  padding: 10px 16px;
  text-decoration: none;
}

.admin-view-site:hover,
.admin-view-site:focus-visible,
.admin-global-search button:hover,
.admin-global-search button:focus-visible {
  background: var(--sb-brique-fonce, #7c321f);
}

.admin-menu-toggle {
  align-items: center;
  background: var(--brick);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  display: none;
  font-weight: 800;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
}

.admin-menu-panel {
  border-top: 1px solid var(--line);
}

.admin-nav {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 64px;
  overflow-x: auto;
  padding: 0 40px;
  scrollbar-gutter: stable;
}

.admin-nav > a,
.admin-nav-group > summary {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-family: var(--font-titre);
  font-size: 1rem;
  font-weight: 600;
  min-height: 64px;
  padding: 12px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.admin-nav > a:hover,
.admin-nav > a:focus-visible,
.admin-nav-group > summary:hover,
.admin-nav-group > summary:focus-visible,
.admin-nav > a.is-current,
.admin-nav > a[aria-current="page"],
.admin-nav-group.is-current > summary {
  background: transparent;
  border-bottom-color: var(--brick);
  color: var(--brick);
}

.admin-nav-group {
  position: relative;
}

.admin-nav-group > summary {
  list-style: none;
}

.admin-nav-group > summary::-webkit-details-marker {
  display: none;
}

.admin-nav-group > summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  height: 7px;
  margin-left: 10px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
  width: 7px;
}

.admin-nav-group[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.admin-nav-dropdown {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(44, 38, 33, 0.13);
  display: grid;
  left: 0;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  top: calc(100% - 1px);
  z-index: 100;
}

.admin-nav-dropdown a {
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 700;
  padding: 11px 12px;
  text-decoration: none;
}

.admin-nav-dropdown a:hover,
.admin-nav-dropdown a:focus-visible,
.admin-nav-dropdown a.is-current {
  background: var(--paper);
  color: var(--brick);
}

.admin-logout-link {
  margin-left: auto;
}

.admin-content-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 16px;
  overflow: clip;
}

.admin-content-group > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 18px 22px;
}

.admin-content-group > summary::-webkit-details-marker {
  display: none;
}

.admin-content-group > summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 8px;
  margin-left: 18px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
  width: 8px;
}

.admin-content-group[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.admin-content-group > summary span {
  display: grid;
  gap: 3px;
}

.admin-content-group > summary strong {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 600;
}

.admin-content-group > summary small {
  color: var(--muted);
}

.admin-content-group .admin-subsection-title {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 16px 22px 12px;
}

.admin-content-group .admin-table {
  border: 0;
  border-radius: 0;
}

.admin-row-more {
  position: relative;
}

.admin-row-more > summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
  padding: 7px 12px;
}

.admin-row-more > summary::-webkit-details-marker {
  display: none;
}

.admin-row-more[open] > summary,
.admin-row-more > summary:hover,
.admin-row-more > summary:focus-visible {
  border-color: var(--brick);
  color: var(--brick);
}

.admin-row-more > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 6px;
  min-width: 190px;
  margin-top: 8px;
  padding: 8px;
}

.admin-row-more form,
.admin-row-more button {
  width: 100%;
}

.admin-main {
  margin: 0 auto;
  max-width: 1440px;
  padding: 34px 40px 80px;
}

.admin-dashboard-head,
.admin-dashboard-section-head {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.admin-dashboard-head {
  margin-bottom: 26px;
}

.admin-dashboard-head h1,
.admin-dashboard-section-head h2 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}

.admin-dashboard-head h1 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
}

.admin-dashboard-head p:not(.eyebrow),
.admin-dashboard-section-head p,
.admin-dashboard-section-head > span {
  color: var(--muted);
  margin: 8px 0 0;
}

.admin-dashboard-section-head {
  border-bottom: 1px solid var(--line);
  padding: 24px 28px 18px;
}

.admin-dashboard-section-head h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}

.admin-dashboard-section-head .eyebrow {
  margin-bottom: 6px;
}

.admin-dashboard-focus {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 0.9fr);
  margin-bottom: 30px;
}

.admin-task-panel,
.admin-shortcuts,
.admin-modules-panel,
.admin-pilot-panel {
  background: var(--white);
}

.admin-shortcuts {
  border-left: 1px solid var(--line);
}

.admin-task-list,
.admin-shortcut-list,
.admin-module-list {
  display: grid;
}

.admin-task-row,
.admin-module-row,
.admin-shortcut-list a {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: 16px;
  min-height: 72px;
  padding: 11px 28px;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.admin-task-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(100px, auto) 78px;
}

.admin-module-row {
  grid-template-columns: 46px minmax(240px, 1.2fr) minmax(120px, 0.55fr) minmax(120px, 0.5fr) 72px;
}

.admin-shortcut-list a {
  grid-template-columns: 46px minmax(0, 1fr) 20px;
}

.admin-task-row:last-child,
.admin-module-row:last-child,
.admin-shortcut-list a:last-child {
  border-bottom: 0;
}

.admin-task-row:hover,
.admin-task-row:focus-visible,
.admin-module-row:hover,
.admin-module-row:focus-visible,
.admin-shortcut-list a:hover,
.admin-shortcut-list a:focus-visible {
  background: var(--paper);
}

.admin-row-icon {
  align-items: center;
  background: var(--paper);
  border-radius: 50%;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.admin-row-icon img {
  height: 23px;
  opacity: 0.86;
  width: 23px;
}

.admin-task-copy,
.admin-module-name {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-task-copy strong,
.admin-module-name strong,
.admin-shortcut-list strong {
  font-family: var(--font-titre);
  font-size: 1.03rem;
  font-weight: 600;
}

.admin-task-copy small,
.admin-module-name small,
.admin-module-count,
.admin-task-state,
.admin-module-status {
  color: var(--muted);
  font-size: 0.86rem;
}

.admin-task-state,
.admin-module-status {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.admin-task-state i,
.admin-module-status i {
  background: #4ca466;
  border-radius: 50%;
  display: block;
  height: 9px;
  width: 9px;
}

.admin-task-state i,
.admin-module-status.is-attention i {
  background: #eeb624;
}

.admin-row-action {
  align-items: center;
  color: var(--brick);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 4px;
  justify-content: flex-end;
}

.admin-row-action img,
.admin-chevron {
  height: 18px;
  width: 18px;
}

.admin-chevron {
  justify-self: end;
}

.admin-modules-panel,
.admin-pilot-panel {
  border: 1px solid var(--line);
  margin-top: 30px;
}

.admin-module-count strong {
  color: var(--ink);
  font-size: 1rem;
}

.admin-dashboard-empty {
  padding: 34px 28px;
}

.admin-dashboard-empty p {
  color: var(--muted);
  margin-bottom: 0;
}

.admin-pilot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-pilot-column {
  padding: 24px 28px;
}

.admin-pilot-column + .admin-pilot-column {
  border-left: 1px solid var(--line);
}

.admin-pilot-column h3 {
  font-family: var(--font-titre);
  margin-top: 0;
}

.admin-pilot-column > a,
.admin-pilot-column > p {
  border-top: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
}

.admin-pilot-column span {
  color: var(--muted);
  font-size: 0.86rem;
}

/* Les formulaires exploitent enfin la largeur utile du CMS. */
.admin-form.wide-form {
  max-width: 1100px;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-card input {
  background: var(--white);
  border-color: var(--sb-trait-fort);
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.admin-global-search input:focus {
  border-color: var(--brick);
  outline: 3px solid rgba(165, 73, 44, 0.18);
  outline-offset: 1px;
}

.public-text-form {
  display: grid;
  gap: 0 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  padding: 0;
}

.public-text-field {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding: 18px 0;
}

.public-text-form > button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .admin-top-main {
    grid-template-columns: minmax(250px, 0.8fr) minmax(250px, 1fr) auto auto;
    padding-inline: 24px;
  }

  .admin-user-pill {
    min-width: 170px;
  }

  .admin-nav {
    padding-inline: 24px;
  }

  .admin-nav > a,
  .admin-nav-group > summary {
    padding-inline: 15px;
  }
}

@media (max-width: 900px) {
  .admin-top {
    position: relative;
  }

  .admin-top-main {
    display: flex;
    flex-flow: row wrap;
    min-height: 78px;
    padding: 12px 18px;
  }

  .admin-top .brand {
    flex: 1 1 auto;
  }

  .admin-top .brand img {
    height: 46px;
    width: 46px;
  }

  .admin-top .brand strong {
    font-size: 1.3rem;
  }

  .admin-menu-toggle {
    display: inline-flex;
  }

  .admin-global-search,
  .admin-user-pill,
  .admin-view-site,
  .admin-menu-panel {
    display: none;
  }

  .admin-top.is-menu-open .admin-global-search {
    display: grid;
    flex: 1 1 100%;
    order: 3;
  }

  .admin-top.is-menu-open .admin-user-pill {
    display: grid;
    flex: 1 1 200px;
    order: 4;
  }

  .admin-top.is-menu-open .admin-view-site {
    display: inline-flex;
    flex: 1 1 170px;
    min-height: 52px;
    order: 5;
  }

  .admin-top.is-menu-open .admin-menu-panel {
    display: block;
  }

  .admin-nav {
    align-items: stretch;
    display: grid;
    max-width: none;
    padding: 8px 18px 18px;
  }

  .admin-nav > a,
  .admin-nav-group > summary {
    border-bottom: 1px solid var(--line);
    min-height: 52px;
    padding: 10px 4px;
  }

  .admin-nav > a.is-current,
  .admin-nav > a[aria-current="page"],
  .admin-nav-group.is-current > summary {
    border-bottom-color: var(--brick);
  }

  .admin-nav-dropdown {
    border: 0;
    box-shadow: none;
    padding: 4px 0 10px 18px;
    position: static;
  }

  .admin-logout-link {
    margin-left: 0;
  }

  .admin-main {
    padding: 26px 18px 60px;
  }

  .admin-dashboard-focus {
    grid-template-columns: 1fr;
  }

  .admin-shortcuts {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .admin-module-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .admin-module-count,
  .admin-module-status {
    display: none;
  }

  .public-text-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-top-main {
    gap: 10px;
  }

  .admin-menu-toggle span {
    display: none;
  }

  .admin-dashboard-head,
  .admin-dashboard-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .admin-dashboard-head .button {
    width: 100%;
  }

  .admin-dashboard-section-head {
    padding: 20px 18px 15px;
  }

  .admin-task-row,
  .admin-module-row,
  .admin-shortcut-list a {
    gap: 12px;
    padding: 12px 18px;
  }

  .admin-task-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
  }

  .admin-task-state {
    display: none;
  }

  .admin-task-row .admin-row-action {
    font-size: 0;
  }

  .admin-task-row .admin-row-action img {
    height: 20px;
    width: 20px;
  }

  .admin-module-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
  }

  .admin-module-row .admin-row-action {
    font-size: 0;
  }

  .admin-row-icon {
    height: 38px;
    width: 38px;
  }

  .admin-pilot-grid {
    grid-template-columns: 1fr;
  }

  .admin-pilot-column + .admin-pilot-column {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .admin-form,
  .public-text-group-body {
    padding: 16px;
  }

  .public-text-form {
    padding: 0;
  }
}

/* La fenêtre des utilisateurs garde son en-tête visible et fait défiler
   uniquement son contenu, y compris sur un petit écran tactile. */
.admin-modal-panel {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
}

.admin-modal-panel > .admin-form {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.admin-modal-close {
  position: absolute;
}

@media (max-width: 900px) {
  .admin-modal-panel {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .admin-modal-panel > .admin-form {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

.admin-link-stack {
  display: grid;
  gap: 6px;
}

.admin-link-stack p {
  margin: 0;
}

.admin-link-stack a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Page d'accueil
   ========================================================================== */

/* ==========================================================================
   Page d'accueil — registre des sites de communes voisines :
   tableau d'affichage dense, colonne pratique permanente, mot du maire.
   ========================================================================== */

/* Bloc, pas flex : le cartouche est positionne en absolu par-dessus la
   photographie. Un conteneur flex faisait retomber sa largeur sur celle
   de son contenu, et le titre sortait du fond sombre sur grand ecran. */
.home-hero {
  display: block;
  min-height: min(38vh, 330px);
}

/* Cartouche : blason a taille reelle et nom de la commune, pose au bas de
   la photographie. Signature des sites ruraux, ou le blason n'est jamais
   reduit a une vignette. */
.cartouche {
  align-items: center;
  background: rgba(44, 38, 33, 0.9);
  bottom: 0;
  display: flex;
  gap: 14px;
  left: 0;
  margin: 0;
  /* Bande pleine largeur : left et right fixent la boite, le texte ne peut
     donc jamais deborder du fond sombre. Le contenu est rentre par le
     meme retrait que le reste de la page. Les tentatives de
     dimensionnement automatique se rétrécissaient sous la largeur du
     titre sur les grands ecrans. */
  padding: 11px max(24px, calc((100vw - var(--max)) / 2));
  position: absolute;
  /* Le cartouche est un <p> : il ne doit heriter d'aucune largeur
     maximale de paragraphe, sans quoi le titre sort du fond sombre. */
  max-width: none;
  width: 100%;
  z-index: 2;
}

.cartouche span {
  min-width: 0;
}

.cartouche img {
  height: 54px;
  width: auto;
}

.cartouche strong {
  color: var(--sb-blanc);
  display: block;
  font-family: var(--font-titre);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.cartouche small {
  color: rgba(255, 253, 250, 0.8);
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
  white-space: nowrap;
}

/* --- Bandeau d'acces rapides ---------------------------------------------
   Six entrees, un filet vertical entre chacune, un pictogramme au trait
   au-dessus du libelle. Les six destinations sont choisies en back-office
   (Gestion de la page d'accueil), le pictogramme suit automatiquement. */

.acces-rapides {
  background: var(--sb-blanc);
  border-bottom: 1px solid var(--sb-trait);
  border-top: 3px solid var(--sb-or);
  margin: 0 auto;
  max-width: none;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
}

.acces-rapides ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0 auto;
  max-width: var(--max);
  padding: 0;
}

.acces-rapides li + li {
  border-left: 1px solid var(--sb-trait);
}

.acces-rapides a {
  align-content: start;
  color: var(--ink);
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: 104px;
  padding: 18px 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.acces-rapides a:hover,
.acces-rapides a:focus-visible {
  background: var(--sb-craie-2);
}

.acces-icone {
  color: var(--sb-brique);
  display: block;
}

.acces-rapides span {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .acces-rapides ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acces-rapides li:nth-child(3n + 1) {
    border-left: 0;
  }

  .acces-rapides li:nth-child(n + 4) {
    border-top: 1px solid var(--sb-trait);
  }
}

@media (max-width: 520px) {
  .acces-rapides ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acces-rapides li:nth-child(3n + 1) {
    border-left: 1px solid var(--sb-trait);
  }

  .acces-rapides li:nth-child(odd) {
    border-left: 0;
  }

  .acces-rapides li:nth-child(n + 3) {
    border-top: 1px solid var(--sb-trait);
  }

  .acces-rapides a {
    min-height: 92px;
    padding: 14px 8px 16px;
  }

  .acces-rapides span {
    font-size: 0.88rem;
  }
}

/* --- Le mot du maire ------------------------------------------------------ */

.mot-maire {
  background: var(--sb-craie-2);
  border-bottom: 1px solid var(--sb-trait);
  display: grid;
  gap: 26px;
  grid-template-columns: 320px minmax(0, 1fr);
  margin: 0 auto;
  max-width: none;
  padding: 26px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 28px;
}

.mot-maire > * {
  align-self: center;
}

.mot-maire figure {
  margin: 0;
}

.mot-maire figure img {
  border: 4px solid var(--sb-blanc);
  width: 100%;
}

.mot-maire h2 {
  color: var(--sb-brique);
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.mot-maire-texte {
  color: var(--ink-soft);
  font-family: var(--font-texte);
  font-size: 1.04rem;
  line-height: 1.62;
  max-width: 62ch;
}

.mot-maire-signature {
  border-top: 1px solid var(--sb-trait-fort);
  font-family: var(--font-texte);
  font-size: 0.98rem;
  margin: 14px 0 0;
  max-width: 62ch;
  padding-top: 9px;
}

/* --- Corps : tableau d'affichage + colonne pratique ----------------------- */

.home-cols {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr) 290px;
  margin: 0 auto;
  max-width: var(--max);
  padding: 22px 24px 28px;
}

.bloc + .bloc {
  margin-top: 26px;
}

.bloc > h2 {
  border-bottom: 1px solid var(--sb-trait-fort);
  font-family: var(--font-titre);
  font-size: 1.32rem;
  font-weight: 600;
  margin: 0 0 4px;
  padding-bottom: 6px;
}

.bloc-suite {
  color: var(--sb-brique);
  float: right;
  font-family: var(--font-texte);
  font-size: 0.82rem;
  font-weight: 700;
  padding-top: 8px;
}

/* Avis : courts, dates, denses. La plupart n'ont pas d'illustration. */
.avis,
.agenda-avis {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.avis > li,
.agenda-avis > li {
  border-bottom: 1px dotted var(--sb-trait-fort);
  display: grid;
  gap: 2px 16px;
  grid-template-columns: 118px minmax(0, 1fr);
  padding: 12px 0;
}

.avis > li.avis-illustre {
  grid-template-columns: 118px 110px minmax(0, 1fr);
}

.avis-date {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.avis img,
.avis picture {
  display: block;
  width: 110px;
}

.avis picture img {
  height: 74px;
  object-fit: cover;
  width: 110px;
}

.avis > li > div > h3,
.agenda-avis > li > div > h3 {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 2px;
}

.avis > li p,
.agenda-avis > li p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

.avis-suite {
  color: var(--sb-brique);
  font-weight: 700;
  white-space: nowrap;
}

.avis-cat {
  color: var(--sb-gris);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.agenda-avis .avis-date {
  color: var(--sb-brique);
}

/* --- Colonne pratique ----------------------------------------------------- */

.home-side {
  display: grid;
  align-content: start;
  gap: 16px;
}

.side-box {
  background: var(--sb-blanc);
  border: 1px solid var(--sb-trait);
}

.side-box > h2 {
  border-bottom: 1px solid var(--sb-trait);
  font-family: var(--font-titre);
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0;
  padding: 9px 13px;
}

.side-in {
  padding: 12px 13px 14px;
}

.side-horaires,
.side-coord {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 10px;
}

.side-coord strong a,
.side-coord strong {
  color: var(--ink);
}

.side-cta {
  display: block;
  min-height: 42px;
  padding: 10px;
  width: 100%;
}

.side-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-liens li + li {
  border-top: 1px dotted var(--sb-trait);
}

.side-liens a {
  color: var(--ink);
  display: block;
  font-size: 0.9rem;
  min-height: 24px;
  padding: 9px 13px 9px 26px;
  position: relative;
  text-decoration: none;
}

.side-liens a::before {
  color: var(--sb-or);
  content: "\203A";
  font-weight: 700;
  left: 14px;
  position: absolute;
}

.side-liens a:hover {
  background: var(--sb-brique-pale);
}

.side-bulletin {
  display: grid;
  gap: 12px;
  grid-template-columns: 90px minmax(0, 1fr);
}

.side-bulletin img {
  border: 1px solid var(--sb-trait-fort);
  width: 100%;
}

.side-bulletin strong {
  display: block;
  font-family: var(--font-titre);
  font-size: 0.98rem;
  font-weight: 600;
}

.side-bulletin span {
  color: var(--ink-soft);
  display: block;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.side-bulletin .text-link {
  display: block;
  font-size: 0.84rem;
}

/* --- Vie associative : on nomme les associations une par une -------------- */

.vie-assos {
  background: var(--sb-craie-2);
  border-top: 1px solid var(--sb-trait);
  margin: 0 auto;
  max-width: none;
  padding: 26px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 28px;
}

.vie-assos > * {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max);
}

.vie-assos h2 {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.vie-assos-intro {
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 70ch;
}

.assos-liste {
  border-top: 1px dotted var(--sb-trait-fort);
  display: grid;
  gap: 0 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

.assos-liste li {
  border-bottom: 1px dotted var(--sb-trait-fort);
  padding: 9px 0;
}

.assos-liste a {
  color: var(--ink);
  display: inline-block;
  font-family: var(--font-texte);
  font-size: 1.06rem;
  min-height: 24px;
  padding-block: 2px;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}

.assos-liste span {
  color: var(--sb-gris);
  display: block;
  font-size: 0.8rem;
}

/* --- Documents et demarches ---------------------------------------------- */

.home-resource-strip {
  align-items: center;
  background: var(--sb-blanc);
  border-bottom: 1px solid var(--sb-trait);
  border-top: 1px solid var(--sb-trait);
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: none;
  padding: 22px max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

.home-resource-strip h2 {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.home-resource-strip p {
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
}

.home-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.home-document-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
}

.home-document-mini a,
.home-document-mini span {
  font-size: 0.88rem;
  font-weight: 600;
}

.home-document-mini a {
  color: var(--sb-brique);
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}

.home-document-mini span {
  color: var(--muted);
}

/* --- Liens institutionnels ------------------------------------------------ */

.liens-partenaires {
  background: var(--sb-craie);
  border-top: 1px solid var(--sb-trait);
  margin: 0 auto;
  max-width: none;
  padding: 14px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 18px;
}

.liens-partenaires h2 {
  color: var(--sb-gris);
  font-family: var(--font-texte);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.liens-partenaires ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.liens-partenaires a {
  color: var(--ink);
  display: inline-block;
  font-size: 0.86rem;
  min-height: 24px;
  padding-block: 3px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 980px) {
  .home-cols,
  .mot-maire,
  .home-resource-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .mot-maire figure {
    max-width: 300px;
  }

  .home-resource-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .assos-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .avis > li,
  .agenda-avis > li,
  .avis > li.avis-illustre {
    grid-template-columns: minmax(0, 1fr);
  }

  .avis picture img {
    height: 150px;
    width: 100%;
  }

  .avis img,
  .avis picture {
    width: 100%;
  }

  .cartouche strong,
  .cartouche small {
    font-size: 1.02rem;
    letter-spacing: 0.08em;
    white-space: normal;
  }

  .cartouche small {
    font-size: 0.72rem;
    letter-spacing: 0;
  }

  .cartouche small {
    display: none;
  }
}

.home-admin-summary .home-admin-preview {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-admin-preview span {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 12px;
  text-align: center;
}

.home-admin-form {
  max-width: 980px;
}

.home-admin-mobile-save {
  display: none;
}

.home-admin-two-cols,
.home-link-select-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-admin-two-cols > div,
.home-link-select-grid label {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
  padding: 14px;
}

.home-link-select-grid label span {
  font-weight: 700;
}

.home-carousel-admin {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 18px;
}

.home-carousel-admin legend {
  font-weight: 700;
  padding: 0 8px;
}

.home-carousel-admin-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 16px;
  grid-template-columns: 210px 1fr;
  padding: 14px;
}

.home-carousel-admin-row h3 {
  font-family: var(--font-titre);
  margin: 0 0 10px;
}

.home-carousel-admin-preview {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.home-carousel-admin-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-carousel-admin-preview video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-carousel-admin-preview span {
  color: var(--muted);
  font-weight: 700;
}

.home-carousel-remove-row {
  margin-top: 8px;
}

.home-carousel-remove-row input[type="checkbox"] {
  accent-color: #8b2f2f;
}

@media (max-width: 760px) {
  .home-admin-form {
    padding-bottom: 90px;
  }

  .home-admin-mobile-save {
    background: var(--sb-craie);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: block;
    left: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 1200;
  }

  .home-admin-mobile-save button {
    margin: 0;
    width: 100%;
  }

  .home-admin-summary .home-admin-preview,
  .home-admin-two-cols,
  .home-link-select-grid,
  .home-carousel-admin-row {
    grid-template-columns: 1fr;
  }
}

.journey-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-grid.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journey-card {
  background: var(--sb-blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: inherit;
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 22px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.journey-card:hover,
.journey-card:focus-visible,
.admin-guided-card:hover,
.admin-guided-card:focus-visible {
  border-color: rgba(28, 76, 104, 0.45);
  box-shadow: none;
}

.journey-card span {
  color: var(--brick);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-card strong {
  font-family: var(--font-titre);
  font-size: 1.55rem;
  line-height: 1.08;
  font-weight: 600;
}

.journey-card p {
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}

/* --- Portail des demarches ------------------------------------------------
   Page batie sur le modele des portails citoyens des villes
   (portail-citoyen.amiens.fr), traduit dans le langage du site : deux
   cartes d'acces direct sous le bandeau, puis des rubriques depliables
   qui listent chacune les demarches d'un meme sujet, enfin les guichets
   d'accompagnement. Le liseret d'or reprend celui du bandeau d'acces
   rapides de l'accueil. */

.portail-acces {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.15fr 0.85fr;
}

.portail-carte {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  border-top: 3px solid var(--sb-or);
  box-shadow: var(--shadow);
  padding: 24px;
}

.portail-carte h2 {
  font-size: 1.45rem;
}

.portail-intro {
  color: var(--muted);
  margin: 10px 0 14px;
}

.portail-directes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.portail-directes li + li {
  border-top: 1px solid var(--sb-trait);
}

.portail-directes a {
  align-items: center;
  color: var(--ink);
  display: grid;
  gap: 14px;
  grid-template-columns: 26px minmax(0, 1fr) 12px;
  padding: 13px 6px;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.portail-directes a:hover,
.portail-directes a:focus-visible {
  background: var(--sb-craie-2);
}

.portail-directes strong {
  display: block;
}

.portail-directes small {
  color: var(--muted);
  display: block;
  font-size: 0.88rem;
}

.portail-chevron,
.rubrique-chevron {
  border-bottom: 2px solid var(--sb-silex);
  border-right: 2px solid var(--sb-silex);
  display: block;
  height: 7px;
  width: 7px;
}

.portail-chevron {
  transform: rotate(-45deg);
}

.portail-note {
  border-top: 1px solid var(--sb-trait);
  color: var(--muted);
  margin: 16px 0 0;
  padding-top: 14px;
}

/* Rubriques : la carte s'ouvre et se referme par son intitule, comme les
   accordeons du portail amienois, sans une ligne de script. */
.portail-rubriques {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rubrique-card {
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.rubrique-card summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
  padding: 14px 16px;
  transition: background-color 140ms ease;
}

.rubrique-card summary::-webkit-details-marker {
  display: none;
}

.rubrique-card summary:hover,
.rubrique-card summary:focus-visible {
  background: var(--sb-craie-2);
}

.rubrique-card h3 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
}

.rubrique-icone {
  align-items: center;
  background: var(--sb-brique-pale);
  border-radius: var(--r);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.rubrique-chevron {
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.rubrique-card[open] > summary .rubrique-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.rubrique-liens {
  border-top: 1px solid var(--sb-trait);
  list-style: none;
  margin: 0;
  padding: 6px 0 8px;
}

.rubrique-liens li + li {
  border-top: 1px solid var(--sb-craie-2);
}

.rubrique-liens a {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none;
  transition: background-color 140ms ease;
}

.rubrique-liens a::before {
  border-bottom: 2px solid var(--sb-brique);
  border-right: 2px solid var(--sb-brique);
  content: "";
  flex: none;
  height: 6px;
  transform: rotate(-45deg);
  width: 6px;
}

.rubrique-liens a:hover,
.rubrique-liens a:focus-visible {
  background: var(--sb-craie-2);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

/* Accompagnement : les trois guichets qui repondent quand l'ecran ne
   suffit pas (mairie, Etat, mediation numerique). */
.portail-aide {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portail-aide article {
  align-content: start;
  background: var(--white);
  border: 1px solid var(--sb-trait);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  padding: 20px;
}

.portail-aide h3 {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  line-height: 1.15;
  margin: 0;
}

.portail-aide p {
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .portail-acces {
    grid-template-columns: 1fr;
  }

  .portail-rubriques,
  .portail-aide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .portail-rubriques,
  .portail-aide {
    grid-template-columns: 1fr;
  }
}

.association-pathways {
  padding-top: 10px;
}

.admin-guided-panel,
.association-checklist-panel,
.admin-steps-card,
.admin-disclosure {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.admin-guided-panel {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
  margin-bottom: 30px;
  padding: 24px;
}

.admin-guided-intro h2,
.association-checklist-panel h2,
.admin-steps-card h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.06;
  margin: 0 0 8px;
}

.admin-guided-intro p:last-child,
.association-checklist-panel p {
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0;
}

.admin-guided-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-guided-card {
  background: var(--paper);
  border: 1px solid rgba(28, 76, 104, 0.16);
  border-radius: var(--r-md);
  color: inherit;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.admin-guided-card span {
  color: var(--brick);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-guided-card strong {
  font-size: 1.08rem;
  line-height: 1.15;
}

.admin-guided-card p {
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 600;
  margin: 0;
}

.association-checklist-panel {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  margin-bottom: 28px;
  padding: 24px;
}

.association-checklist {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.association-checklist a {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--brick);
  border-radius: var(--r-md);
  color: inherit;
  display: flex;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
}

.association-checklist a.is-done {
  border-left-color: var(--leaf);
}

.association-checklist span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 8px;
  text-transform: uppercase;
}

.association-checklist strong {
  line-height: 1.2;
}

.admin-steps-card {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
  margin-bottom: 24px;
  padding: 22px;
}

.admin-steps-card ol {
  counter-reset: step;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-steps-card li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 6px;
  padding: 16px 16px 16px 54px;
  position: relative;
}

.admin-steps-card li::before {
  align-items: center;
  background: var(--moss);
  border-radius: 50%;
  color: var(--white);
  content: counter(step);
  counter-increment: step;
  display: inline-flex;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  left: 14px;
  position: absolute;
  top: 15px;
  width: 30px;
}

.admin-steps-card li span {
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 600;
}

.admin-disclosure {
  margin: 26px 0;
  padding: 0;
}

.admin-disclosure summary,
.material-request-details summary {
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}

.admin-disclosure summary {
  padding: 18px 20px;
}

.admin-disclosure .admin-table {
  border-top: 1px solid var(--line);
  padding: 18px;
}

.material-request-details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: min(360px, 100%);
  padding: 14px;
}

.material-request-details[open] {
  background: var(--white);
  box-shadow: var(--shadow);
}

.material-request-details .admin-form {
  box-shadow: none;
  margin-top: 14px;
  padding: 14px;
}

@media (max-width: 980px) {
  .journey-grid,
  .journey-grid.three-columns,
  .admin-guided-grid,
  .association-checklist,
  .admin-steps-card ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-guided-panel,
  .association-checklist-panel,
  .admin-steps-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .journey-grid,
  .journey-grid.three-columns,
  .admin-guided-grid,
  .association-checklist,
  .admin-steps-card ol {
    grid-template-columns: 1fr;
  }

  .journey-card,
  .admin-guided-card {
    min-height: auto;
  }
}

/* ==========================================================================
   Menus deroulants de la navigation principale
   ========================================================================== */

.nav-group {
  align-items: center;
  display: flex;
  gap: 2px;
  position: relative;
}

.nav-group-toggle {
  background: none;
  border: 0;
  border-radius: var(--r);
  color: var(--sb-blanc);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0;
  width: 24px;
}

.nav-chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: block;
  height: 7px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
  width: 7px;
}

.nav-group-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.nav-group-toggle:hover,
.nav-group-toggle:focus-visible {
  background: rgba(255, 253, 249, 0.16);
}

.nav-submenu {
  background: var(--sb-blanc);
  border: 1px solid var(--sb-trait-fort);
  border-top: 3px solid var(--sb-or);
  border-radius: 0;
  box-shadow: none;
  left: 0;
  min-width: 280px;
  padding: 6px;
  position: absolute;
  top: 100%;
  z-index: 60;
}

/* Pont invisible qui couvre l'espace entre le lien et le panneau : sans lui,
   la souris quitte le groupe en descendant et le sous-menu se referme avant
   que l'on puisse cliquer un lien. */
.nav-submenu::before {
  bottom: 100%;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  right: 0;
}

.nav-submenu[hidden] {
  display: none;
}

.nav-submenu ul {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-submenu a {
  border-radius: var(--r);
  color: var(--ink);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 11px;
  text-decoration: none;
  white-space: normal;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: var(--sb-brique-pale);
}

.nav-submenu a.is-current {
  box-shadow: inset 3px 0 0 var(--sb-or);
  color: var(--sb-brique);
}

/* ==========================================================================
   En-tete compact sur mobile
   ========================================================================== */

@media (max-width: 900px) {
  /* Marque et boutons sur une ligne, recherche pleine largeur en dessous :
     elle reste atteignable sans ouvrir le menu. */
  .header-top {
    column-gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    row-gap: 10px;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-actions {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .accessibility-toggle,
  .menu-toggle {
    flex: 0 0 auto;
    font-size: 0.82rem;
    padding: 8px 12px;
    white-space: nowrap;
    width: auto;
  }

  .header-search {
    flex: 1 1 180px;
    min-width: 0;
    order: 3;
  }

  .header-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .main-nav {
    padding: 0 16px;
  }

  .nav-links {
    align-items: stretch;
    text-align: left;
  }

  .nav-links .nav-link {
    text-align: left;
  }

  .nav-group {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .nav-group > .nav-link {
    padding-right: 48px;
  }

  .nav-group-toggle {
    height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
  }

  /* En accordeon : le sous-menu pousse le contenu au lieu de le recouvrir. */
  .nav-submenu {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--sb-or);
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 8px 10px;
    min-width: 0;
    padding: 0 0 0 10px;
    position: static;
  }

  .nav-submenu a {
    color: var(--sb-blanc);
    padding: 11px 8px;
  }

  .nav-submenu a:hover,
  .nav-submenu a:focus-visible {
    background: rgba(255, 253, 249, 0.14);
  }

  .nav-submenu a.is-current {
    box-shadow: none;
    color: var(--sb-or-clair);
  }

  /* Pas de pont en accordeon : le sous-menu suit deja le lien dans le flux. */
  .nav-submenu::before {
    display: none;
  }
}

@media (max-width: 420px) {
  .nav-actions {
    flex-direction: row;
  }

  .accessibility-toggle,
  .menu-toggle {
    font-size: 0.78rem;
    padding: 7px 10px;
    width: auto;
  }

  .brand img {
    height: 44px;
  }

  .brand strong {
    font-size: 1.16rem;
  }

  .brand em {
    display: none;
  }
}

/* ==========================================================================
   Bandeau des mini-sites associatifs : lisibilite garantie
   ========================================================================== */

/* Un fond sombre est pose sous la teinte de l'association, afin que le texte
   blanc reste lisible quelle que soit la couleur choisie par le referent. */
.association-hero-overlay {
  background: color-mix(in srgb, color-mix(in srgb, var(--assoc-theme, var(--sb-brique)) 56%, #101820) 90%, transparent);
}

.association-hero > img {
  opacity: 0.75;
}

.association-hero .eyebrow {
  color: var(--assoc-secondary, var(--gold));
}



/* Les titres reviennent a une serif : la hierarchie repose de nouveau sur
   l'opposition serif / sans serif, et non plus sur la graisse. Le
   resserrement negatif, qui convenait a une grotesque, est retire.

   Spectral n'est chargee qu'en graisse 600 : demander 700 ferait fabriquer
   au navigateur un faux gras, plus epais et mal dessine. Tout ce qui porte
   la police de titrage est donc cale sur 600. */
h1,
h2,
h3,
h4,
.cartouche strong,
.side-box > h2,
.bloc > h2,
.mot-maire h2,
.vie-assos h2,
.avis > li > div > h3,
.agenda-avis > li > div > h3 {
  font-family: var(--font-titre);
  font-weight: 600;
  letter-spacing: 0;
}

/* Le nom de la mairie dans le bandeau utilitaire reste en Marianne : c'est
   de l'interface, pas du titrage. */
.brand-line {
  font-family: var(--font-texte);
  font-weight: 700;
}

.mot-maire-texte,
.mot-maire-signature {
  letter-spacing: 0;
}

.cartouche strong {
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Rubriques municipales reprises de la branche refonte-graphique-sautoir
   --------------------------------------------------------------------------
   Actes administratifs, marches publics, prevention, urbanisme, numeros
   utiles, travaux et projets, patrimoine. Les regles d'origine n'employaient
   que les variables d'alias (--ink, --paper, --moss...) : elles prennent donc
   la palette actuelle sans modification. Seules les formes ont ete alignees
   sur la charte : rayons, graisses et ombres.
   ========================================================================== */

.projects-module,
.heritage-module {
  background: var(--white);
}

.projects-status-group {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  padding-top: 20px;
}

.projects-status-group .publication-rubric-heading h3 {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  max-width: 62ch;
}

.projects-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.projects-list article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 10px;
  padding: 20px;
}

.projects-list h4 {
  font-family: var(--font-titre);
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
}

.projects-list p {
  margin: 0;
}

.project-period {
  font-weight: 700;
}

.project-location {
  color: var(--muted);
  font-weight: 600;
}

.project-photos {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.project-photos figure {
  display: grid;
  gap: 6px;
  margin: 0;
}

.project-photos img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r);
  object-fit: cover;
  width: 100%;
}

.project-photos figcaption {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.project-impact {
  background: var(--white);
  border-left: 3px solid var(--brick);
  border-radius: var(--r);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.project-funding {
  display: grid;
  gap: 6px;
  margin: 0;
}

.project-funding > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.project-funding dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 96px;
  text-transform: uppercase;
}

.project-funding dd {
  font-weight: 600;
  margin: 0;
}

.heritage-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.heritage-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.heritage-grid img {
  aspect-ratio: 4 / 3;
  background: var(--white);
  object-fit: cover;
  width: 100%;
}

.heritage-body {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.heritage-body h3 {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
}

.heritage-body p {
  margin: 0;
}

.heritage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.heritage-meta span {
  color: var(--brick);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.heritage-meta span + span {
  color: var(--muted);
}

.heritage-credit {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

.useful-numbers-module {
  background: var(--white);
}

.useful-numbers-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.useful-numbers-list li {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px 18px;
}

.useful-numbers-list li > a {
  background: var(--moss);
  border-radius: var(--r);
  color: var(--white);
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 104px;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
}

.useful-numbers-list strong {
  display: block;
  font-size: 1.05rem;
}

.useful-numbers-list p {
  color: var(--muted);
  margin: 0;
}

.urbanism-module,
.urbanism-documents {
  background: var(--white);
}

.urbanism-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.urbanism-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 8px;
  padding: 18px;
}

.urbanism-grid span {
  color: var(--brick);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.urbanism-grid h3 {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  line-height: 1.15;
  margin: 0;
}

.urbanism-grid p {
  color: var(--muted);
  margin: 0;
}

.local-rules-module,
.report-callout {
  background: var(--white);
}

.local-rules-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.local-rules-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 8px;
  padding: 18px;
}

.local-rules-grid span {
  color: var(--brick);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.local-rules-grid h3 {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
}

.local-rules-grid p {
  color: var(--muted);
  margin: 0;
}

.report-callout {
  border-left: 4px solid var(--brick);
}

.procurement-alert {
  background: var(--white);
  border-left: 4px solid var(--moss);
}

.procurement-contact {
  background: var(--white);
}

.contact-facts {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-facts li {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 10px;
}

.contact-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-facts li > span:first-child {
  color: var(--muted);
  flex: 0 0 110px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-facts a {
  font-weight: 700;
}

.official-acts-module {
  background: var(--white);
}

.official-acts-filters {
  margin-bottom: 0;
}

.official-acts-filter-fields {
  display: grid;
  gap: 12px;
  /* 3 ou 4 controles selon qu'une consultation est en cours : auto-fit evite
     qu'un champ orphelin occupe seul une deuxieme ligne. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.official-acts-filter-fields > div {
  display: grid;
  gap: 6px;
}

.official-acts-filter-fields label {
  font-weight: 700;
}

.official-acts-filters input,
.official-acts-filters select {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
}

.official-acts-filters button[type="submit"] {
  align-items: center;
  background: var(--moss);
  border: 0;
  border-radius: var(--r);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
}

.official-acts-years {
  display: grid;
  gap: 28px;
}

.official-acts-year {
  border-top-color: rgba(222, 216, 202, 0.9);
}

.official-acts-year .publication-rubric-heading h3 {
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  margin: 0;
}

.official-acts-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.official-acts-list article {
  align-content: start;
  display: grid;
  gap: 10px;
}

.official-acts-list h4 {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  line-height: 1.15;
  margin: 0;
}

.official-acts-list p {
  margin: 0;
}

.official-acts-list article > p:not(.date):not(.official-act-badges):not(.official-act-deadline):not(.privacy-note) {
  color: var(--muted);
}

.official-act-deadline {
  border-left: 3px solid var(--line);
  font-weight: 700;
  padding-left: 10px;
}

.official-act-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.official-act-category {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 10px;
}

.official-acts-footnote {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.official-acts-footnote p {
  color: var(--muted);
}

/* ==========================================================================
   Pagination des listes publiques
   ========================================================================== */

.pagination {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 18px;
}

.pagination-status {
  color: var(--ink-soft, var(--sb-ardoise));
  font-size: 0.88rem;
  margin: 0 0 12px;
}

.pagination ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination a,
.pagination span {
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: inline-block;
  font-weight: 600;
  min-width: 42px;
  padding: 9px 12px;
  text-align: center;
  text-decoration: none;
}

.pagination a {
  background: var(--white);
  color: var(--ink);
}

.pagination a:hover,
.pagination a:focus-visible {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--white);
}

.pagination [aria-current="page"] {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--white);
}

/* Bornes desactivees et separateurs : presents mais non cliquables. */
.pagination li span[aria-hidden="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint, var(--sb-gris));
  opacity: 0.55;
}

.archive-months {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.archive-months li {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.archive-months span {
  color: var(--ink-faint, var(--sb-gris));
  font-size: 0.88em;
}

/* ==========================================================================
   Services aux associations exposes cote public
   ========================================================================== */

/* Cartes purement informatives : meme presentation que les parcours, sans
   l'affordance de clic. */
.journey-card.is-static {
  cursor: default;
}

.journey-card.is-static:hover {
  transform: none;
}

.material-public-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 24px;
  padding: 22px 24px;
}

.material-public-list h3 {
  margin: 0 0 14px;
}

.material-public-list ul {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.material-public-list li {
  border-left: 3px solid var(--moss);
  padding-left: 12px;
}

.material-public-list li strong {
  display: block;
}

.material-public-list li p {
  color: var(--ink-soft, var(--sb-ardoise));
  font-size: 0.9rem;
  margin: 4px 0 0;
}

.material-quantity {
  color: var(--ink-faint, var(--sb-gris));
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 2px;
}

.association-subdomain-note {
  background: var(--paper);
  border-radius: var(--r-md);
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  margin-top: 6px;
  padding: 8px 12px;
}

/* Le libelle complet du bouton d'accessibilite n'apparait que lorsque la place
   le permet : sur mobile la barre doit rester sur une seule ligne. */
@media (max-width: 1600px) {
  .a11y-toggle-hint {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* CMS — catalogue des textes fixes du site public. */
.public-text-toolbar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 20px 0;
  padding: 20px;
}

.public-text-toolbar label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
}

.public-text-toolbar input {
  max-width: 720px;
  width: 100%;
}

.public-text-groups {
  display: grid;
  gap: 14px;
}

.public-text-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: clip;
}

.public-text-group > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 20px;
}

.public-text-group > summary span:first-child {
  display: grid;
  gap: 3px;
}

.public-text-group > summary small {
  color: var(--ink-soft, var(--sb-ardoise));
}

.public-text-group-body {
  border-top: 1px solid var(--line);
  padding: 20px;
}

.public-text-group-intro {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.public-text-group-intro p {
  margin: 0;
}

.public-text-form {
  margin: 0;
}

.public-text-field {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.public-text-field:first-of-type {
  border-top: 0;
}

.public-text-field.is-modified {
  border-left: 4px solid var(--moss);
  padding-left: 16px;
}

.public-text-field > label:first-child {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
}

.public-text-current {
  color: var(--ink-soft, var(--sb-ardoise));
  font-size: 0.9rem;
  margin: -2px 0 10px;
}

.public-text-more {
  margin: 18px 0 4px;
  width: 100%;
}

.public-text-more[hidden] {
  display: none !important;
}

.public-text-field input[type="text"],
.public-text-field textarea {
  width: 100%;
}

.public-text-source {
  color: var(--ink-soft, var(--sb-ardoise));
  font-size: 0.9rem;
  margin: 8px 0;
}

.public-text-reset {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .public-text-group > summary,
  .public-text-group-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-text-group-body {
    padding: 16px;
  }
}

/* Les cases des droits ne doivent jamais hériter de la largeur des champs. */
.admin-modal-panel .permission-option {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  min-width: 0;
}

.admin-modal-panel .permission-option input[type="checkbox"] {
  block-size: 20px;
  inline-size: 20px;
  margin: 2px 0 0;
  min-height: 20px;
  padding: 0;
}

.admin-modal-panel .permission-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-modal-panel .permission-option strong,
.admin-modal-panel .permission-option small {
  line-height: 1.35;
}

.admin-modal-panel .compact-form > button[type="submit"] {
  bottom: -1px;
  box-shadow: 0 -8px 18px rgba(39, 34, 28, 0.12);
  position: sticky;
  z-index: 3;
}

.admin-event.is-danger {
  border-left: 4px solid #b42318;
  padding-left: 12px;
}

@media (max-width: 700px) {
  .rich-editor-media-row,
  .rich-editor-media-row-external,
  .category-path-fields .form-split {
    grid-template-columns: 1fr;
  }

  .admin-modal-panel .compact-form > button[type="submit"] {
    min-height: 52px;
  }
}