/*
 * pages/service.css -- Modèle de page service standard
 * Commune de Silly -- Thème custom
 *
 * Layout 2 colonnes : contenu principal (gauche) + sidebar sticky (droite).
 * Sidebar = infos pratiques (horaires, équipe, coordonnées).
 * Contenu = actualités, missions, sections spécifiques au service.
 * Convention BEM stricte. Mobile-first.
 *
 * @package Silly
 */

/* ============================================
   SERVICE COLOR OVERRIDES
   Chaque service redéfinit --color-primary pour
   créer son propre « univers » visuel.
   Population utilise la couleur primaire par défaut
   (#336D94), donc aucun override n'est nécessaire.
   ============================================ */
.page-environnement {
  --color-primary: var(--color-environnement);
  --color-primary-dark: #8a9e07;
  --color-primary-ink: #697706;
  --color-primary-ink-dark: #566105;
}

/* Jeunesse (et Sports) : cyan #5AC1DA */
.page-jeunesse,
.page-sports {
  --color-primary: var(--color-sports);
  --color-primary-dark: #4ba8be;
  --color-primary-ink: #207A8F;
  --color-primary-ink-dark: #1B6476;
}

/* Seniors (CCCA - Conseil Consultatif Communal des Aînés) : vert-bleu #01747F */
.page-seniors {
  --color-primary: var(--color-ccca);
  --color-primary-dark: #015a63;
}

/* Mobilité : vert-émeraude #349980 (couleur officielle du service, alignée sur le logo). */
.page-mobilite {
  --color-primary: #349980;
  --color-primary-dark: #2a7a66;
  --color-primary-ink: #2B7E69;
  --color-primary-ink-dark: #236756;
}

/* Travaux : orange #FF8001 (couleur du pôle Voiries — couleur principale visible).
   Les 3 sous-pôles (Voiries / Espaces verts / Bâtiments) sont thématisés
   via --badge-color appliqué inline sur chaque card .service-card--pole. */
.page-travaux {
  --color-primary: var(--color-travaux-voiries);
  --color-primary-dark: #cc6601;
  --color-primary-ink: #B05800;
  --color-primary-ink-dark: #924900;
}

/* Espaces verts (pôle du service Travaux, présenté sur sa propre page) :
   vert clair #80C242 (--color-travaux-espaces-verts). */
.page-espaces-verts {
  --color-primary: var(--color-travaux-espaces-verts);
  --color-primary-dark: #6ba336;
  --color-primary-ink: #517C28;
  --color-primary-ink-dark: #436621;
}

/* BiblioLudothèque : bordeaux #B0024C */
.page-biblioludotheque {
  --color-primary: var(--color-biblioludo);
  --color-primary-dark: #8c023d;
}

/* Culture (Arts & Culture) : bleu marine #161B88.
   Partagé avec page-college-conseil et le pilier "Arts & Culture"
   du logo via la variable --color-arts-culture. */
.page-culture {
  --color-primary: var(--color-arts-culture);
  --color-primary-dark: #0e1268;
}

/* Bien-être animal : vert-émeraude #349980 (couleur du service). */
.page-bien-etre-animal {
  --color-primary: var(--color-bien-etre-animal, #349980);
  --color-primary-dark: #2a7a66;
  --color-primary-ink: #2B7E69;
  --color-primary-ink-dark: #236756;
}

/* Prévention et sécurité : orange #FF8003 (couleur dédiée du service). */
.page-prevention {
  --color-primary: #FF8003;
  --color-primary-dark: #cc6602;
  --color-primary-ink: #B05700;
  --color-primary-ink-dark: #924800;
}

/* Utilitaire d'accessibilité : visuellement masqué mais lu par les lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CTA banner : forcer le texte blanc sur le bouton dark au hover
   (évite l'héritage de --color-primary via la transition) */
.cta-banner .btn--dark,
.cta-banner .btn--dark:hover {
  color: var(--color-text-light);
}

/* ============================================
   PAGE HERO (internal pages)
   ============================================ */
.page-hero {
  background: var(--color-bg-dark);
  padding: calc(var(--total-header-height, 120px) + 60px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 79.2px;
  letter-spacing: -2.16px;
  color: var(--color-text-light);
}

.page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: rgba(255, 255, 255, 0.64);
  max-width: 560px;
  text-align: center;
}

/* ============================================
   SERVICE LAYOUT — 2 colonnes
   Contenu principal (gauche) + Sidebar (droite)
   ============================================ */
.service-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-padding) var(--container-padding);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

/* Variante sans sidebar : le contenu occupe toute la largeur.
   Utilisée par page.php quand la page n'a pas de parent, donc pas de carte
   « Retour au service ». Sans ce modificateur, la grille laisserait une
   colonne de 360px vide à droite. Le max-width du contenu reste borné par
   --content-width pour ne pas produire de lignes de texte trop longues. */
.service-layout--simple {
  grid-template-columns: minmax(0, 1fr);
}

.service-layout--simple .service-content {
  max-width: var(--content-width, 800px);
}

/* --- Contenu principal (colonne gauche) --- */
.service-content {
  display: flex;
  flex-direction: column;
  gap: 44px;
  min-width: 0;
}

/* --- Sidebar (colonne droite, sticky) --- */
.service-sidebar {
  position: sticky;
  top: calc(var(--total-header-height, 120px) + 32px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================
   SIDEBAR — Carte infos pratiques
   ============================================ */
.service-sidebar__card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* En-tête colorée de la carte sidebar */
.service-sidebar__card-header {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-sidebar__card-header svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.service-sidebar__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--color-text-light);
  text-transform: uppercase;
}


.service-sidebar__card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Paragraphe d'introduction en tête d'une carte sidebar (ex : carte Contact du bulletin) */
.service-sidebar__card-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- Horaires dans la sidebar --- */
.service-sidebar__hours {
  width: 100%;
  border-collapse: collapse;
}

.service-sidebar__hours td,
.service-sidebar__hours th {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.service-sidebar__hours tr:last-child td,
.service-sidebar__hours tr:last-child th {
  border-bottom: none;
}

.service-sidebar__hours-day {
  font-weight: 500;
  width: 100px;
  /* Un th de ligne (le jour, en-tête de sa ligne — WCAG 1.3.1) : sans le
     centrage que le navigateur donne à un th. */
  text-align: left;
}

.service-sidebar__hours-time {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.service-sidebar__hours-closed {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Note sous les horaires (info accueil téléphonique) */
.service-sidebar__hours-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.service-sidebar__hours-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* --- Contact dans la sidebar --- */
.service-sidebar__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Variante compacte : coordonnées sous le nom d'un agent dans un team-block */
.service-sidebar__contact-list--compact {
  gap: 8px;
}

.service-sidebar__contact-list--compact .service-sidebar__contact-link {
  font-size: 13px;
  line-height: 18px;
}

.service-sidebar__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.service-sidebar__contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: var(--color-primary);
}

.service-sidebar__contact-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  text-decoration: none;
  /* Une adresse sans espace (billetterie, e-mail long) se coupe plutôt que
     d'élargir la page sur mobile (fiche événement, 24 sept. 2026). */
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color var(--transition-base);
}

.service-sidebar__contact-link:hover {
  color: var(--color-primary-ink);
}

.service-sidebar__contact-address {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  font-style: normal;
}

/* --- Équipe dans la sidebar --- */
.service-sidebar__team-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* Quand l'équipe est le premier élément de la card (pas de contact général
   au-dessus, ex. page Urbanisme), on retire le divider et l'espacement haut. */
.service-sidebar__card-body > .service-sidebar__team-list:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.service-sidebar__team-intro {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

/* Bloc autonome par membre : avatar + nom + coordonnées */
.service-sidebar__team-block {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-sidebar__team-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-sidebar__team-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.service-sidebar__team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pastille bleue à trait blanc pour les liens « Démarches urbanisme » (sidebar) */
.urbanisme-demarche {
  align-items: center;
}

.urbanisme-demarche__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff; /* currentColor des icônes en trait → blanc sur la pastille colorée */
}

.urbanisme-demarche__icon svg {
  width: 17px;
  height: 17px;
  stroke: #fff;
}

/* Figure illustrative dans une notice urbanisme (ex. arbres palissés) */
.urbanisme-figure {
  margin: 16px 0 0;
}

.urbanisme-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.urbanisme-figure figcaption {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.service-sidebar__team-avatar-placeholder {
  width: 48px;
  height: 48px;
}

.service-sidebar__team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-text);
}

.service-sidebar__team-role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

/* Coordonnées intégrées dans le bloc membre */
.service-sidebar__member-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.service-sidebar__member-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Adresse commune en bas de la card contact */
.service-sidebar__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* Variante : adresse placée en TÊTE de la card contact (avant la liste équipe)
   -- pas de border-top puisqu'elle suit directement le header de la card. */
.service-sidebar__address--top {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
  padding-bottom: 4px;
}

/* Quand l'adresse est le PREMIER élément du corps de la card (pas de bloc
   équipe au-dessus, ex. sidebars CPAS sans interlocuteur dédié), on retire le
   divider/espacement parasites qui "traînaient" en haut de la card Contact. */
.service-sidebar__card-body > .service-sidebar__address:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* --- CTA sidebar --- */
.service-sidebar__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-sidebar__cta .btn {
  text-align: center;
  justify-content: center;
  width: 100%;
}

/* ============================================
   CONTENU — Sections (actualités, missions, etc.)
   Chaque section dans .service-content est un bloc
   avec en-tête + contenu, séparé par du gap.
   ============================================ */

/* --- Chaque section dans le contenu est un flex column --- */
.service-content > section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- En-tête de section --- */
.service-section__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.96px;
  color: var(--color-text);
}

/* --- Actualités (liste de cards horizontales) --- */
.service-news__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-news__more {
  margin: 16px 0 0;
}

/* --- Actualités : l'encart quand rien n'est encore publié ---------------
 *
 * Ces règles vivaient dans `pages/sports.css`, que seules les quatre pages
 * Sports servent : sur les dix-huit autres, l'encart sortait NU — une icône
 * seule au-dessus d'une phrase, sans cadre ni marge. Un composant rendu par
 * un template-part partagé a son style dans la feuille que le MODÈLE sert.
 */
.service-empty {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-alt)) 0%, var(--color-bg-alt) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  border-radius: var(--radius-lg);
}

.service-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
  /* L'encre, pas l'aplat : sur un service clair (Sports #5AC1DA) le trait
     dessiné dans la pastille doit rester lisible. */
  color: var(--color-primary-ink, var(--color-primary));
}

.service-empty__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.service-empty__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
}

.service-empty__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 60ch;
}

.service-empty__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-ink, var(--color-primary));
  text-decoration: none;
}

.service-empty__link svg {
  transition: transform 0.25s ease;
}

.service-empty__link:hover svg,
.service-empty__link:focus-visible svg {
  transform: translateX(3px);
}

.service-empty__link:hover,
.service-empty__link:focus-visible {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .service-empty {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-empty__link svg {
    transition: none;
  }

  .service-empty__link:hover svg,
  .service-empty__link:focus-visible svg {
    transform: none;
  }
}

/* --- Chiffres clés -------------------------------------------------------
 *
 * Le même dessin que `.cc-stat` des pages Vie politique, sous un autre nom et
 * dans CETTE feuille : `politique.css` n'est servie que sur cinq pages, et
 * `.page-college-conseil .cc-intro__stats` y porte une surcharge propre à sa
 * page. Réemployer la classe aurait lié le bloc au sort de ces cinq pages.
 */
.service-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 8px 0 0;
}

.service-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.service-stat__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.05;
  color: var(--color-primary-ink, var(--color-primary));
  font-variant-numeric: tabular-nums;
}

.service-stat__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

/* --- Encart à télécharger : le poids du fichier, à côté du bouton --------
 *
 * `.service-charte__card` et ses enfants existent déjà plus haut dans cette
 * feuille — le bloc reprend leur dessin à l'identique. Seul le poids est
 * nouveau : il est CALCULÉ depuis le fichier, jamais saisi.
 */
.service-charte__poids {
  /* `align-self` plutôt qu'un `align-items` sur le parent : la règle
     `.service-charte__actions` existe déjà plus bas et sert quatre pages en
     ligne. On ne la touche pas pour un ajout qui ne concerne que ce bloc. */
  align-self: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Photo pleine largeur dans les missions --- */
.service-missions__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-missions__photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* Modificateur --full : photo affichée en entier (non recadrée), à sa taille
   naturelle et alignée à gauche, sans fond. Opt-in via la clé 'full'. */
.service-missions__photo--full {
  width: fit-content;
  max-width: 100%;
}

.service-missions__photo--full img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
}

/* Illustration légendée : une <figure> (champ « Légende sous l'image »). Le
   radius ne coupe plus l'image mais la figure entière ; la légende sort
   sous l'image, en petit et en couleur secondaire. */
.service-missions__photo--legendee {
  margin: 0;
}

.service-missions__photo-legende {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
}

/* --- Missions --- */
.service-missions__intro p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.service-missions__intro p:last-child {
  margin-bottom: 0;
}

/* Variante justifiée (ex. « Votre commune en quelques pages » du bulletin) :
   texte justifié avec césure, dernière ligne alignée à gauche pour éviter
   les grands espaces en fin de paragraphe. */
.service-missions__intro--justify p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* Quand .service-missions__intro est appliqué directement sur un <p>
   (intro courte avant une grille/card), reprendre la typo et neutraliser
   la marge user-agent pour éviter un écart cumulé trop grand avec le bloc suivant. */
p.service-missions__intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
  margin: 0;
}

.service-missions__subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* Intertitres d'un bloc « Texte mis en forme ».
   L'éditeur ne pose pas de classe : la mise en forme doit venir de l'enveloppe,
   sinon les h3 et h4 saisis par un agent sortent au style par défaut du
   navigateur. Sélecteur en enfant direct pour ne pas atteindre les titres de
   cartes, qui vivent plus bas dans la grille. */
.service-missions__services > h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.service-missions__services > h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.service-missions__services > ul,
.service-missions__services > ol {
  margin: 0 0 var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
}

.service-missions__services > p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* Un bloc « Texte » range son texte mis en forme dans l'enveloppe des
   paragraphes (.service-missions__intro), pour que ses paragraphes gardent
   exactement le style qu'avaient les « Texte simple ». Les intertitres et
   listes qu'il peut porter reprennent, à l'identique, les règles ci-dessus. */
.service-missions__intro > h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.service-missions__intro > h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.service-missions__intro > ul,
.service-missions__intro > ol {
  margin: 0 0 var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
}

/* --- Service Cards Grid --- */
.service-missions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.service-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.service-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.service-card__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.service-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.51px;
  color: var(--color-text);
}

.service-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: -0.39px;
  color: var(--color-text-secondary);
}

/* --- Service Card variante "étape" (procédure numérotée) --- */
.service-card--step {
  padding-top: 28px;
}

.service-card__step {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--color-primary);
  opacity: 0.32;
  margin-bottom: 4px;
}

/* --- Service Card variante "lien" (card cliquable vers une sous-page) --- */
.service-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.service-card--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.service-card__more {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--color-primary);
}

.service-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.service-card--link:hover .service-card__more svg,
.service-card--link:focus-visible .service-card__more svg {
  transform: translateX(3px);
}

/* ============================================
   SERVICE LIST — Liste de démarches
   Liste en 2 colonnes avec icône check.
   Utilisée pour les listes d'actes/démarches.
   ============================================ */
.service-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 24px;
}

.service-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Une adresse e-mail sans espace (direction@hautesennelogement.be) ne
     déborde plus de la colonne à 320 px. */
  overflow-wrap: anywhere;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text);
}

.service-list__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .service-list__items {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

/* --- Notice / Info Box --- */
.service-notice {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.service-notice__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.service-notice strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  display: block;
  margin-bottom: 4px;
}

.service-notice p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Le style bloc de .service-notice strong ne vise que le titre de l'encadre :
   un <strong> a l'interieur d'un paragraphe (ex : un numero) reste en ligne. */
.service-notice p strong {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

/* --- Figure illustrative (image + légende) dans le contenu service --- */
.service-figure {
  margin: 0 0 var(--space-xl);
}

.service-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-natural);
}

.service-figure__caption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --- Section Charte agricole (Environnement) --- */
.service-charte__image {
  width: 120px;
  height: auto;
  border-radius: var(--radius-sm);
}

.service-charte__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 32px;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-charte__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
}

.service-charte__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
}

.service-charte__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
  transition: gap var(--transition-base);
}

.service-charte__link:hover {
  gap: 12px;
}

.service-charte__link svg {
  width: 16px;
  height: 16px;
}

/* --- e-Guichet CTA (dans le contenu) --- */
.service-eguichet__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 32px;
  align-items: center;
}

.service-eguichet__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-eguichet__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
}

.service-eguichet__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.45px;
  color: var(--color-text-secondary);
}

/* Petite note (info complémentaire) sous la description e-guichet */
.service-eguichet__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  font-style: italic;
  background: var(--color-bg);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.service-eguichet__note-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-primary);
}

.service-eguichet__note svg {
  color: var(--color-primary);
}

.service-eguichet__actions {
  display: flex;
  gap: 12px;
  margin-top: var(--space-sm);
}

.service-eguichet__image {
  flex: 0 0 auto;
  max-width: 260px;
}

.service-eguichet__image img,
.service-eguichet__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ============================================
   CTA BANNER (pleine largeur, sous le layout)
   ============================================ */
.cta-banner {
  background: var(--color-primary);
}

.cta-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 67.2px;
  letter-spacing: -1.68px;
  color: var(--color-text-light);
  max-width: 480px;
}

.cta-banner__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.cta-banner__body .cta-banner__title {
  max-width: none;
}

.cta-banner__text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* Les liens de la bannière sont sans classe : a:not([class]):hover (base.css,
   spécificité 0,2,1) l'emportait sur .cta-banner__text a (0,1,1) et les faisait
   virer au bleu foncé sur fond bleu. On fixe donc explicitement l'état survolé. */
.cta-banner__text a:hover,
.cta-banner__text a:focus-visible {
  color: var(--color-text-light);
}

.cta-banner__text a {
  color: var(--color-text-light);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ============================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .page-hero__title {
    font-size: 48px;
    line-height: 52px;
  }

  .service-layout {
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }

  .service-section__title {
    font-size: 28px;
    line-height: 34px;
  }

  .service-missions__grid {
    grid-template-columns: 1fr;
  }

  .service-eguichet__card {
    flex-direction: column;
  }

  .service-eguichet__image {
    max-width: 100%;
  }

  .cta-banner__title {
    font-size: 40px;
    line-height: 48px;
  }
}

/* ============================================
   RESPONSIVE — MOBILE (max 768px)
   La sidebar passe sous le contenu
   ============================================ */
@media (max-width: 768px) {
  .page-hero {
    padding: calc(var(--total-header-height, 80px) + 40px) 0 48px;
  }

  .page-hero__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.08px;
  }

  .page-hero__subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .service-layout {
    /* minmax(0, 1fr) et non 1fr : une piste « 1fr » ne descend pas sous la
       largeur minimale de son contenu, et le bouton de la colonne de droite
       élargissait la page à 406 px sur un écran de 375 (Infrastructures
       sportives, revue du 24 sept. 2026). */
    grid-template-columns: minmax(0, 1fr);
    padding-top: 48px;
    padding-bottom: 48px;
    gap: 48px;
  }

  .service-sidebar {
    position: static;
  }

  .service-content {
    gap: 48px;
  }

  .service-section__title {
    font-size: 24px;
    line-height: 30px;
  }

  /* Le sous-titre d'un bloc est un <h3> de son flux de texte : sur mobile il
     suit le même repli que .service-missions__subtitle, sinon il ferait la
     taille du titre de section (24 px) et la hiérarchie se perdrait. */
  .service-missions__subtitle,
  .service-missions__intro > h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .service-eguichet__card {
    padding: 24px;
    gap: 24px;
  }

  .service-eguichet__title {
    font-size: 20px;
    line-height: 26px;
  }

  .service-eguichet__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-charte__card {
    padding: 24px;
  }

  .service-charte__title {
    font-size: 20px;
    line-height: 26px;
  }

  .cta-banner__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 48px var(--container-padding);
  }

  .cta-banner__title {
    font-size: 32px;
    line-height: 38px;
    max-width: 100%;
  }

  .cta-banner__body {
    max-width: 100%;
    align-items: center;
  }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (max 375px)
   ============================================ */
@media (max-width: 375px) {
  .page-hero__title {
    font-size: 28px;
    line-height: 34px;
  }

  .service-card {
    padding: 20px 16px;
  }
}

/* ============================================
   === Salles === (Gestion des salles)
   Grille de cards salles : photo + capacité +
   équipements + tarif + bouton de réservation.
   ============================================ */
.salles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.salle-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base);
}

.salle-card:hover {
  box-shadow: var(--shadow-natural);
}

/* --- Galerie de la salle : UNE grande photo cliquable ---
   Chaque <li> est un .ecole-gallery__item (lightbox partagée).
   Seule la photo principale (.salle-card__media) est visible ; les autres
   photos (.salle-card__thumb) restent dans le DOM mais sont masquées
   (elles alimentent la navigation préc./suiv. de la lightbox).
   On combine .salle-card__gallery.ecole-gallery pour passer DEVANT la règle
   grille de .ecole-gallery (qui s'applique aussi vu la double classe). */
.salle-card__gallery.ecole-gallery {
  display: block;
  grid-template-columns: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Photos secondaires : présentes pour la lightbox, jamais affichées dans la carte */
.salle-card__thumb {
  display: none;
}

/* --- Média (photo principale + badge capacité + mention galerie) ---
   Double classe .salle-card__media.ecole-gallery__item pour surcharger la
   règle générique .ecole-gallery__item (carré 1/1, lift au survol) qui est
   définie plus bas dans le fichier. */
.salle-card__media.ecole-gallery__item {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-bg-alt);
  cursor: zoom-in;
  outline: none;
  transform: none;
  box-shadow: none;
  transition: box-shadow 0.25s ease;
}

.salle-card__media.ecole-gallery__item:hover {
  transform: none;
  box-shadow: none;
}

.salle-card__media.ecole-gallery__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -3px;
}

/* Voile sombre subtil au survol/focus pour signaler le clic */
.salle-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0) 55%, rgba(26, 26, 46, 0.28) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.salle-card__media:hover::after,
.salle-card__media:focus-visible::after {
  opacity: 1;
}

.salle-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.salle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.salle-card__media:hover .salle-card__img,
.salle-card__media:focus-visible .salle-card__img {
  transform: scale(1.04);
}

.salle-card__capacity-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(26, 26, 46, 0.85);
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.salle-card__capacity-badge svg {
  flex-shrink: 0;
}

/* Mention "Voir les X photos" : pastille toujours visible en bas à gauche,
   invite explicitement au clic pour ouvrir la galerie en plein écran. */
.salle-card__gallery-cue {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(51, 109, 148, 0.94);
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, background 0.25s ease;
  pointer-events: none;
}

.salle-card__media:hover .salle-card__gallery-cue,
.salle-card__media:focus-visible .salle-card__gallery-cue {
  transform: translateY(-2px);
  background: var(--color-primary);
}

.salle-card__gallery-cue svg {
  flex-shrink: 0;
}

/* --- Corps de la card --- */
.salle-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.salle-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.6px;
  color: var(--color-text);
  margin: 0;
}

.salle-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin: -6px 0 0;
}

.salle-card__location svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Specs (liste équipements) --- */
.salle-card__specs {
  list-style: none;
  padding: 14px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.salle-card__spec {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.salle-card__spec svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* --- Tarif --- */
.salle-card__pricing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.salle-card__price-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.salle-card__price-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  text-align: right;
}

/* --- Actions (boutons) --- */
.salle-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.salle-card__actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* --- Sous-groupes de la section « Nos salles » (particuliers / associations) --- */
.salles-group + .salles-group {
  margin-top: 40px;
}

.salles-group__header {
  margin-bottom: 20px;
}

.salles-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.6px;
  color: var(--color-text);
  margin: 0;
}

.salles-group__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
}

.salles-group__title-icon svg {
  stroke: #fff;
}

.salles-group__intro {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
}

.salles-group .service-notice {
  margin-bottom: 20px;
}

/* --- Salle indisponible : image atténuée + filigrane « Indisponible » --- */
.salle-card--unavailable .salle-card__img {
  filter: grayscale(0.5) brightness(0.82);
}

.salle-card__unavailable-flag {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.salle-card__unavailable-flag-label {
  transform: rotate(-9deg);
  padding: 8px 30px;
  background: rgba(26, 26, 46, 0.9);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.salle-card__unavailable-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.salle-card__unavailable-note svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .salles-group + .salles-group {
    margin-top: 32px;
  }

  .salles-group__title {
    font-size: 18px;
    line-height: 23px;
  }

  .salle-card__unavailable-flag-label {
    font-size: 16px;
    padding: 7px 22px;
  }
}

/* ============================================
   === Procédure de réservation === (Salles)
   Étapes numérotées en colonne.
   ============================================ */
.procedure-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: procedure;
}

.procedure-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.procedure-step__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.4px;
}

.procedure-step__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}

.procedure-step__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -0.54px;
  color: var(--color-text);
  margin: 0;
}

.procedure-step__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   RESPONSIVE — Salles & Procédure
   ============================================ */
@media (max-width: 1024px) {
  .salles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .salle-card__body {
    padding: 18px;
  }

  .salle-card__title {
    font-size: 18px;
    line-height: 22px;
  }

  .procedure-step {
    padding: 20px;
    gap: 14px;
  }

  .procedure-step__number {
    width: 36px;
    height: 36px;
    font-size: 16px;
    line-height: 36px;
  }

  .procedure-step__title {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 375px) {
  .salle-card__capacity-badge,
  .salle-card__gallery-cue {
    font-size: 11px;
    padding: 5px 8px;
  }
}

/* ============================================
   === Travaux === Pôles (3 cards thématiques)
   Variante de .service-card avec barre de couleur
   propre par pôle (Voiries / Espaces verts / Bâtiments).
   Couleur injectée via --badge-color inline.
   ============================================ */
/* Les 3 pôles sont empilés verticalement : chaque carte occupe toute
   la largeur (beaucoup de compétences à lister). */
.service-poles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Carte pôle en pleine largeur : identité à gauche, liste des
   compétences en 2 colonnes à droite, responsable en bas sur toute
   la largeur. La barre supérieure utilise la couleur du pôle
   (--badge-color) plutôt que --color-primary. */
.service-card--pole {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 28px 26px 24px;
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  grid-template-areas:
    "icon    list"
    "title   list"
    "desc    list"
    "contact contact";
  align-items: start;
  gap: 12px 48px;
}

.service-card__accent--pole {
  background: var(--badge-color, var(--color-primary));
  height: 4px;
}

.service-card--pole .service-card__icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  color: var(--badge-color, var(--color-primary));
  stroke: var(--badge-color, var(--color-primary));
  margin-bottom: 2px;
}

/* Description du pôle : colonne de gauche, sous le titre. */
.service-card--pole .service-card__desc {
  grid-area: desc;
}

.service-card__pole-title {
  grid-area: title;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.66px;
  color: var(--color-text);
  margin: 0;
}

.service-card__pole-list {
  grid-area: list;
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 40px;
}

.service-card__pole-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  break-inside: avoid;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

.service-card__pole-list li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--badge-color, var(--color-primary));
  opacity: 0.85;
}

.service-card__pole-contact {
  grid-area: contact;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-card__pole-contact-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.service-card__pole-contact-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

/* Petite pastille colorée à côté du rôle (sidebar équipe) */
.service-sidebar__team-tag {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: 6px;
  vertical-align: middle;
  background: var(--color-primary);
}

/* ============================================
   === Travaux === Chantiers en cours
   Liste de chantiers avec statut + métadonnées.
   Bordure latérale colorée par pôle concerné.
   ============================================ */
.chantiers-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chantier-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--badge-color, var(--color-primary));
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.chantier-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.chantier-item__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 16px;
  white-space: nowrap;
}

.chantier-item__status--ongoing {
  background: rgba(52, 153, 28, 0.12);
  color: #2c8016;
}

.chantier-item__status--upcoming {
  background: rgba(51, 109, 148, 0.12);
  color: var(--color-primary);
  color: #336D94;
}

.chantier-item__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.chantier-item__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chantier-item__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.6px;
  color: var(--color-text);
  margin: 0;
}

.chantier-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

.chantier-item__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 8px 0 0;
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.chantier-item__meta-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
}

.chantier-item__meta-row dt {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.chantier-item__meta-row dd {
  margin: 0;
  color: var(--color-text);
}

/* ============================================
   RESPONSIVE — Travaux
   ============================================ */
@media (max-width: 1024px) {
  /* Tablette et mobile : la carte pôle repasse en colonne simple
     (identité, compétences, responsable les uns sous les autres). */
  .service-card--pole {
    display: flex;
    gap: 14px;
  }

  .service-card__pole-contact {
    margin-top: auto;
  }

  .service-card__pole-list {
    columns: 1;
  }

  .chantier-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .service-card--pole {
    padding: 24px 18px 20px;
  }

  .service-card__pole-title {
    font-size: 20px;
    line-height: 24px;
  }

  .chantier-item {
    padding: 20px;
  }

  .chantier-item__title {
    font-size: 18px;
    line-height: 22px;
  }

  .chantier-item__meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .chantier-item__meta-row dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
}

/* ============================================
   === Direction générale === Leader card
   Carte de présentation du Directeur général :
   photo / avatar à gauche, biographie à droite.
   Variante "encart de focus" pour mettre en avant
   une personne (directeur, responsable de service).
   ============================================ */
.leader-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  align-items: start;
}

.leader-card__media {
  width: 200px;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.leader-card__media img,
.leader-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leader-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.leader-card__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.leader-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.78px;
  color: var(--color-text);
  margin: 0;
}

.leader-card__role {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-primary);
  margin: 0;
}

.leader-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: var(--color-text-secondary);
  margin: 0;
}

.leader-card__meta {
  list-style: none;
  padding: 12px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leader-card__meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.leader-card__meta-item svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Liens dans la service-list (Direction générale -- coordination services) */
.service-list__item a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
  font-weight: 500;
}

.service-list__item a:hover,
.service-list__item a:focus-visible {
  color: var(--color-primary-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   RESPONSIVE — Leader card
   ============================================ */
@media (max-width: 1024px) {
  .leader-card {
    grid-template-columns: 160px 1fr;
    gap: 24px;
    padding: 24px;
  }

  .leader-card__media {
    width: 160px;
    height: 200px;
  }

  .leader-card__name {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .leader-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
    text-align: left;
  }

  .leader-card__media {
    width: 140px;
    height: 168px;
  }

  .leader-card__name {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ============================================
   === Ressources humaines === Offres d'emploi
   Cards verticales d'offres : header (type de
   contrat + deadline), titre, description,
   métadonnées (lieu, durée, niveau) et lien.
   ============================================ */
.job-offers {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.job-offer {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.job-offer:hover {
  box-shadow: var(--shadow-natural);
  transform: translateY(-2px);
}

.job-offer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.job-offer__type {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.job-offer__type--temp {
  background: var(--color-accent);
}

.job-offer__deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.job-offer__deadline svg {
  stroke: var(--color-text-secondary);
  flex-shrink: 0;
}

.job-offer__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0;
}

.job-offer__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
  margin: 0;
}

.job-offer__meta {
  list-style: none;
  padding: 12px 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  border-top: 1px solid var(--color-border);
}

.job-offer__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text);
  font-weight: 500;
}

.job-offer__meta li svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
}

/* Actions d'une offre : bouton « Postuler » + lien PDF facultatif */
.job-offer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}

/* Lien « Offre détaillée (PDF) » */
.job-offer__doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

.job-offer__doc:hover,
.job-offer__doc:focus-visible {
  color: var(--color-primary-ink-dark);
  text-decoration: underline;
}

.job-offer__doc svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Responsive — offres d'emploi */
@media (max-width: 768px) {
  .job-offer {
    padding: 20px 22px;
  }

  .job-offer__title {
    font-size: 18px;
    line-height: 24px;
  }

  .job-offer__desc {
    font-size: 14px;
    line-height: 22px;
  }

  .job-offer__meta {
    gap: 6px 16px;
  }

  .job-offer__meta li {
    font-size: 13px;
  }

  .job-offer__header {
    gap: 6px;
  }

  .job-offer__type {
    font-size: 10px;
    padding: 4px 8px;
  }

  .job-offer__deadline {
    font-size: 12px;
  }
}

/* ============================================
   === Bulletins ===
   Archive de PDF téléchargeables (Bulletin communal,
   Avis & enquêtes…). Comporte :
   - .bulletin-featured : encart « dernier numéro »
     (cover grande à gauche + résumé/actions à droite).
   - .bulletin-grid + .bulletin-card : grille des
     anciens numéros (cover + date + poids PDF +
     bouton de téléchargement).
   ============================================ */

/* --- Encart « Dernier numéro » (mise en avant) --- */
.bulletin-featured {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  align-items: start;
}

.bulletin-featured__cover {
  position: relative;
  width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-natural);
}

.bulletin-featured__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bulletin-featured__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.bulletin-featured__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bulletin-featured__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.bulletin-featured__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.84px;
  color: var(--color-text);
  margin: 0;
}

.bulletin-featured__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: var(--color-text-secondary);
  margin: 0;
}

.bulletin-featured__meta {
  list-style: none;
  padding: 14px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.bulletin-featured__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text);
  font-weight: 500;
}

.bulletin-featured__meta li svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.bulletin-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* --- Grille des anciens numéros --- */
.bulletin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bulletin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bulletin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.bulletin-card__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.bulletin-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.bulletin-card:hover .bulletin-card__cover img {
  transform: scale(1.04);
}

.bulletin-card__weight {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(26, 26, 46, 0.85);
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -0.22px;
  backdrop-filter: blur(4px);
}

.bulletin-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bulletin-card__date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.bulletin-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.34px;
  color: var(--color-text);
  margin: 0;
}

.bulletin-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
}

.bulletin-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 20px 20px;
  padding: 10px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.bulletin-card__download:hover,
.bulletin-card__download:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}

.bulletin-card__download svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* --- Encart générique « action » (Recevoir / Soumettre)
       Réutilise la pattern .service-notice mais avec
       icône colorée et structure plus respirante. --- */
.bulletin-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Variante à une seule carte (ex. bulletin : « Contribuer au bulletin » seul) :
   la carte occupe toute la largeur de la colonne de contenu. */
.bulletin-actions--single {
  grid-template-columns: 1fr;
}

.bulletin-action {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bulletin-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.bulletin-action__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(51, 109, 148, 0.12);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bulletin-action__icon svg {
  width: 22px;
  height: 22px;
}

.bulletin-action__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -0.36px;
  color: var(--color-text);
  margin: 0;
}

.bulletin-action__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

.bulletin-action__meta {
  list-style: none;
  padding: 12px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bulletin-action__meta li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.bulletin-action__meta li svg {
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.bulletin-action__cta {
  margin-top: auto;
  padding-top: 12px;
}

/* --- Sidebar : calendrier des prochaines parutions --- */
.bulletin-schedule {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bulletin-schedule__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.bulletin-schedule__item--past {
  opacity: 0.55;
  border-left-color: var(--color-border);
}

.bulletin-schedule__date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text);
  display: block;
}

.bulletin-schedule__label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-secondary);
  display: block;
  margin-top: 2px;
}

/* ============================================
   RESPONSIVE — Bulletins
   ============================================ */
@media (max-width: 1024px) {
  .bulletin-featured {
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 24px;
  }

  .bulletin-featured__cover {
    width: 220px;
  }

  .bulletin-featured__title {
    font-size: 24px;
    line-height: 30px;
  }

  .bulletin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .bulletin-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bulletin-featured {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .bulletin-featured__cover {
    width: 180px;
    margin: 0 auto;
  }

  .bulletin-featured__title {
    font-size: 22px;
    line-height: 28px;
  }

  .bulletin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .bulletin-card__body {
    padding: 14px 16px;
  }

  .bulletin-card__title {
    font-size: 15px;
    line-height: 20px;
  }

  .bulletin-card__download {
    margin: 10px 16px 16px;
    padding: 9px 12px;
    font-size: 12px;
  }
}

@media (max-width: 375px) {
  .bulletin-grid {
    grid-template-columns: 1fr;
  }

  .bulletin-featured__cover {
    width: 160px;
  }
}

/* ============================================
   PAGE MARCHE DOMINICAL
   Couleur thematique : rouge Slow Food (#EE0F0D)
   Le marche est en lien fort avec Slow Food /
   les Saveurs de Silly et les circuits courts.
   ============================================ */
.page-marche-dominical {
  --color-primary: var(--color-slowfood);
  --color-primary-dark: #c10d0b;
  --color-primary-ink: #E00E0C;
  --color-primary-ink-dark: #BC0C0A;
}

/* Encart pratique "Quand et ou" */
.marche-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0 32px;
}

@media (min-width: 768px) {
  .marche-info {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.marche-info__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.marche-info__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.marche-info__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: var(--shadow-natural);
}

.marche-info__icon svg {
  width: 24px;
  height: 24px;
}

.marche-info__content {
  flex: 1;
  min-width: 0;
}

.marche-info__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 4px;
  display: block;
}

.marche-info__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 4px;
}

.marche-info__detail {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Grille d'exposants (categories de produits) */
.exposants-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 600px) {
  .exposants-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .exposants-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.exposant-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.exposant-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
  opacity: 0.85;
}

.exposant-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: var(--color-primary);
}

.exposant-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-top: 6px;
}

.exposant-card__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.exposant-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.exposant-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Section esprit du marche (Slow Food / Cittaslow) */
.marche-spirit {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-alt)) 0%, var(--color-bg-alt) 100%);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  margin: 20px 0 32px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
}

@media (min-width: 768px) {
  .marche-spirit {
    padding: 48px 40px;
  }
}

.marche-spirit__intro {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: 24px;
}

.marche-spirit__values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  .marche-spirit__values {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.marche-spirit__value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.marche-spirit__value-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.marche-spirit__value-icon svg {
  width: 20px;
  height: 20px;
}

.marche-spirit__value-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.marche-spirit__value-desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Encart "Devenir exposant" */
.marche-exposant-cta {
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .marche-exposant-cta {
    padding: 36px;
  }
}

.marche-exposant-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.marche-exposant-cta__steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marche-exposant-cta__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.5;
}

.marche-exposant-cta__step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.marche-exposant-cta__docs {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marche-exposant-cta__doc-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

.marche-exposant-cta__doc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--color-border);
}

.marche-exposant-cta__doc:hover,
.marche-exposant-cta__doc:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-alt));
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}

.marche-exposant-cta__doc-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.marche-exposant-cta__doc-text {
  flex: 1;
  min-width: 0;
}

.marche-exposant-cta__doc-meta {
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.marche-exposant-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ============================================
   BIBLIOLUDOTHÈQUE -- Composants spécifiques
   Collections, animations régulières, inscription, socials sidebar.
   ============================================ */

/* Grille des collections (livres adultes, jeunesse, BD, jeux, DVD...) */
.biblio-collections__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .biblio-collections__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .biblio-collections__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.biblio-collection {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.biblio-collection:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-natural);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.biblio-collection__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.biblio-collection__icon svg {
  width: 22px;
  height: 22px;
}

.biblio-collection__body {
  flex: 1;
  min-width: 0;
}

.biblio-collection__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.3;
}

.biblio-collection__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Animations régulières -- cards */
.biblio-animations__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .biblio-animations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.biblio-animation {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-natural);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.biblio-animation:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.biblio-animation__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.biblio-animation__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.biblio-animation__icon svg {
  width: 22px;
  height: 22px;
}

.biblio-animation__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.biblio-animation__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.biblio-animation__meta svg {
  width: 13px;
  height: 13px;
}

.biblio-animation__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* Encart inscription / modalités */
.biblio-inscription {
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 768px) {
  .biblio-inscription {
    padding: 36px;
  }
}

.biblio-inscription__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.biblio-inscription__intro {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.biblio-inscription__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.biblio-inscription__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.55;
}

.biblio-inscription__item-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.biblio-inscription__item-icon svg {
  width: 12px;
  height: 12px;
}

.biblio-inscription__item-text strong {
  font-family: var(--font-heading);
  font-weight: 700;
  display: block;
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.biblio-inscription__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* ============================================
   BiblioLudothèque — Tableau des tarifs de prêt
   Données réelles (ROI 2021). En-têtes colorés par
   la couleur du service (bordeaux via --color-primary).
   ============================================ */
.biblio-tarifs {
  margin-top: 4px;
}

.biblio-tarifs__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.3;
}

/* Permet le défilement horizontal du tableau sur petits écrans */
.biblio-tarifs__scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.biblio-tarifs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 460px;
}

.biblio-tarifs__table thead th {
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  white-space: nowrap;
}

.biblio-tarifs__table tbody th,
.biblio-tarifs__table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
  line-height: 1.45;
}

.biblio-tarifs__table tbody th {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.biblio-tarifs__table tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.biblio-tarifs__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.biblio-tarifs__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* Liens réseaux sociaux dans le sidebar */
.service-sidebar__socials {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.service-sidebar__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-sidebar__social:hover,
.service-sidebar__social:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-alt));
  color: var(--color-primary-ink-dark);
  border-color: var(--color-primary);
}

.service-sidebar__social svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   === Culture === Footer section grands rendez-vous
   Note + bouton vers l'agenda, sous la grille d'event-card
   (la grille elle-même réutilise .agenda__grid / .event-card).
   ============================================ */
.culture-rdv-footer {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 28px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

/* Variante sans fond : bouton seul rapproché de la grille (ex. « Consulter l'agenda complet ») */
.culture-rdv-footer--bare {
  margin-top: 20px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.culture-rdv-footer__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0;
}


/* ============================================
   === PAGE AVIS ET ENQUETES ===
   Page d'archives de documents administratifs
   (enquetes publiques, ordonnances, reglements).
   Reutilise .bulletin-grid / .bulletin-card et ajoute :
   - .avis-filters : barre de filtres par categorie/statut/annee
   - .avis-status : badge de statut (en cours / cloture)
   - .avis-spotlight : encart « avis en cours »
   - .avis-card : variante de bulletin-card sans cover image
   - .avis-steps : procedure « comment participer »
   - .avis-legal : encart cadre legal
   ============================================ */

/* --- Barre de filtres --- */
.avis-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.avis-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.avis-filters__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 8px 0 0;
  min-width: 88px;
}

.avis-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.avis-filters__chip:hover,
.avis-filters__chip:focus-visible {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.avis-filters__chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}

.avis-filters__chip--active:hover,
.avis-filters__chip--active:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-light);
}

/* --- Badge de statut --- */
.avis-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.avis-status--ongoing {
  background: rgba(255, 128, 1, 0.12);
  color: var(--color-accent);
}

.avis-status--ongoing::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 128, 1, 0.2);
  flex-shrink: 0;
}

.avis-status--closed {
  background: rgba(85, 85, 85, 0.1);
  color: var(--color-text-secondary);
}

.avis-status--closed::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  flex-shrink: 0;
}

/* --- Encart « Avis en cours » (mise en avant) --- */
.avis-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.avis-spotlight__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.avis-spotlight__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.avis-spotlight__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.avis-spotlight__category {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--badge-color, var(--color-primary));
  color: var(--color-text-light);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.avis-spotlight__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--color-text);
  margin: 0;
}

.avis-spotlight__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

.avis-spotlight__meta {
  list-style: none;
  padding: 12px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avis-spotlight__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.avis-spotlight__meta li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

.avis-spotlight__meta strong {
  font-weight: 700;
  color: var(--color-text);
}

.avis-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

/* Type d'avis (petit label au-dessus du titre) */
.avis-spotlight__type {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Liste des documents telechargeables de l'avis */
.avis-spotlight__docs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.avis-spotlight__doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.avis-spotlight__doc:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
  background: var(--color-bg);
}

.avis-spotlight__doc svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Variante de bulletin-card pour avis sans cover image
       (icone PDF + meta + bouton dl). --- */
.avis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.avis-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-natural);
}

.avis-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.avis-card__icon svg {
  width: 44px;
  height: 44px;
}

.avis-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--badge-color, var(--color-primary));
  color: var(--color-text-light);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.avis-card__weight {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(26, 26, 46, 0.78);
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 15px;
}

.avis-card__body {
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.avis-card__date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.avis-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: var(--color-text);
  margin: 0;
}

.avis-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
}

.avis-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 16px;
}

.avis-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.avis-card__download:hover,
.avis-card__download:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}

.avis-card__download svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* --- Procedure « Comment participer » (4 etapes) --- */
.avis-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.avis-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 22px 70px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.avis-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.avis-step__number {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}

.avis-step__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.32px;
  color: var(--color-text);
  margin: 0;
}

.avis-step__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- Encart « Cadre legal » (references reglementaires) --- */
.avis-legal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.avis-legal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avis-legal__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.avis-legal__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}

.avis-legal__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.avis-legal__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  margin: 0;
}

.avis-legal__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- Alerte newsletter (sidebar) --- */
.service-sidebar__alert-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}

.service-sidebar__alert-btn {
  width: 100%;
  justify-content: center;
}

/* --- Compteur d'avis en cours (badge inline) --- */
.avis-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-accent);
  color: var(--color-text-light);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  margin-left: 10px;
  vertical-align: 3px;
}

/* ============================================
   RESPONSIVE — Page avis et enquetes
   ============================================ */
@media (max-width: 1024px) {
  .avis-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .avis-filters {
    padding: 16px 18px;
  }

  .avis-filters__label {
    min-width: 100%;
    margin-bottom: 4px;
  }

  .avis-spotlight__card {
    padding: 18px;
  }

  .avis-spotlight__title {
    font-size: 16px;
    line-height: 22px;
  }

  .avis-step {
    padding: 18px 18px 18px 64px;
  }

  .avis-step__number {
    top: 18px;
    left: 18px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .avis-legal {
    padding: 18px;
  }

  .avis-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

@media (max-width: 375px) {
  .avis-filters__chip {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ============================================
   PAGE POLICE — composants spécifiques
   Réutilise les patterns service.css existants.
   ============================================ */

/* --- Notice variante « alerte » (encadré urgence) --- */
.service-notice--alert {
  background: rgba(217, 32, 39, 0.07);
  border-left-color: var(--color-urgence);
}

.service-notice--alert .service-notice__icon {
  color: var(--color-urgence);
}

/* --- Notice variante « mise en évidence » (encart accent, ex. domaine public) --- */
.service-notice--highlight {
  background: rgba(255, 128, 1, 0.07);
  border-left-color: var(--color-accent);
}

.service-notice--highlight .service-notice__icon {
  color: var(--color-accent);
}

.service-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* --- Section RGP : resserre l'espacement entre les paragraphes --- */
/* (le .service-charte__card a un gap de 20px ; on regroupe les paragraphes
   dans un conteneur dédié pour réduire leur écart à 8px). */
.service-charte__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Groupe de boutons dans une carte charte (formulaire PDF + e-mail) --- */
.service-charte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Note informative en bas d'une carte charte (icône + texte) --- */
.service-charte__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.service-charte__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* --- Boutons d'un encadré d'alerte --- */
/* Le bloc « Encadré » n'a pas de champ de style : c'est la variante « alerte »
   qui colore ses boutons. Le premier bouton en rouge plein (le 101 de la
   page Police), le second en contour rouge (le 112) — le même dessin que
   .btn--urgence / .btn--urgence-outline ci-dessous, obtenu par la variante. */
.service-notice--alert .btn--primary {
  background: var(--color-urgence);
  color: var(--color-text-light);
  border-color: var(--color-urgence);
}

.service-notice--alert .btn--primary:hover,
.service-notice--alert .btn--primary:focus-visible {
  background: var(--color-urgence-dark);
  border-color: var(--color-urgence-dark);
  color: var(--color-text-light);
}

.service-notice--alert .btn--secondary {
  background: transparent;
  color: var(--color-urgence);
  border-color: var(--color-urgence);
}

.service-notice--alert .btn--secondary:hover,
.service-notice--alert .btn--secondary:focus-visible {
  background: var(--color-urgence);
  border-color: var(--color-urgence);
  color: var(--color-text-light);
}

/* --- Boutons d'urgence (101 / 112) --- */
/* 101 : rouge plein (action prioritaire). */
.btn--urgence {
  background: var(--color-urgence);
  color: var(--color-text-light);
  border-color: var(--color-urgence);
}

.btn--urgence:hover {
  background: var(--color-urgence-dark);
  border-color: var(--color-urgence-dark);
  color: var(--color-text-light);
}

/* 112 : rouge en bouton secondaire (transparent, bordure + texte rouge). */
.btn--urgence-outline {
  background: transparent;
  color: var(--color-urgence);
  border-color: var(--color-urgence);
}

.btn--urgence-outline:hover {
  background: var(--color-urgence);
  border-color: var(--color-urgence);
  color: var(--color-text-light);
}

/* --- Liste de liens utiles --- */
.service-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-links__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.service-links__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.service-links__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.service-links__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.service-links__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text);
  /* Une adresse e-mail en titre de lien (Environnement) se coupe au lieu de
     sortir de l'écran à 375 px (retest du 24 sept. 2026). */
  overflow-wrap: anywhere;
}

.service-links__url {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.service-links__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Note discrète dans la sidebar --- */
.service-sidebar__note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* Quand la note est le premier element du card-body (pas de contenu au-dessus),
   on retire le divider et l'espacement haut (ex. cards « Sur rendez-vous »). */
.service-sidebar__card-body > .service-sidebar__note:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.service-sidebar__note strong {
  color: var(--color-text);
  font-weight: 700;
}

@media (max-width: 768px) {
  .service-notice__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .service-notice__actions .btn {
    justify-content: center;
  }
}

/* ============================================
   === Travaux === Équipe (grille de fiches détaillées)
   Cards d'agents avec barre de couleur par pôle,
   coordonnées (tél, email, adresse) et horaires propres.
   Couleur injectée via --badge-color inline.
   ============================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.team-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.team-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--badge-color, var(--color-primary));
}

.team-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-card__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.team-card__avatar svg {
  width: 56px;
  height: 56px;
}

.team-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -0.36px;
  color: var(--color-text);
  margin: 0;
}

.team-card__role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 0;
}

.team-card__pole-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 9px;
  background: var(--badge-color, var(--color-primary));
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.team-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.team-card__contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-card__contact-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.team-card__contact-label svg {
  flex-shrink: 0;
  color: var(--badge-color, var(--color-primary));
}

.team-card__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-card__contact-list li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  word-break: break-word;
}

.team-card__contact-list a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.team-card__contact-list a:hover,
.team-card__contact-list a:focus-visible {
  color: var(--badge-color, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.team-card__contact-note {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.team-card__address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.team-card__hours {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  margin: 0;
}

/* Note dans la sidebar : lien vers la section équipe */
.service-sidebar__team-link-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.service-sidebar__team-link-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* ============================================
   RESPONSIVE — Team grid
   ============================================ */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .team-card {
    padding: 20px 18px 18px;
  }

  .team-card__name {
    font-size: 17px;
    line-height: 22px;
  }

  .team-card__avatar,
  .team-card__avatar svg {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   PAGE ENSEIGNEMENT -- specificites
   ============================================================ */

/* --- TOGGLE HORAIRES par personne (sidebar) --- */
.service-sidebar__person {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow var(--transition-base, 0.2s ease);
}

.service-sidebar__person[open] {
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.service-sidebar__person-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.service-sidebar__person-summary::-webkit-details-marker {
  display: none;
}

.service-sidebar__person-summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.service-sidebar__person .service-sidebar__team-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.service-sidebar__person-id {
  flex: 1;
  min-width: 0;
}

/* Tag de pôle (sidebar Travaux : Voiries / Bâtiments / Espaces verts) */
.service-sidebar__person-pole {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pole-color, var(--color-primary));
  color: #fff;
}

.service-sidebar__person-chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.25s ease;
}

.service-sidebar__person[open] .service-sidebar__person-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.service-sidebar__person-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--color-border);
  margin-top: 14px;
}

.service-sidebar__person-body .service-sidebar__contact-list {
  margin-top: 14px;
  margin-bottom: 14px;
  list-style: none;
  padding: 0;
}

.service-sidebar__person-body .service-sidebar__hours {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13.5px;
  margin-bottom: 10px;
}

.service-sidebar__person-body .service-sidebar__hours td,
.service-sidebar__person-body .service-sidebar__hours th {
  padding: 5px 0;
  border-bottom: 1px solid var(--color-bg-alt);
}

.service-sidebar__person-body .service-sidebar__hours-day {
  font-weight: 500;
  color: var(--color-text);
  width: 30%;
}

.service-sidebar__person-body .service-sidebar__hours-time {
  text-align: right;
  color: var(--color-text-secondary);
}

.service-sidebar__person-body .service-sidebar__hours-closed {
  color: var(--color-text-secondary);
  font-style: italic;
  opacity: 0.7;
}

.service-sidebar__person-body .service-sidebar__hours-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 8px 0 0;
}

.service-sidebar__person-body .service-sidebar__hours-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}

.service-sidebar__contact-meta {
  display: block;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* --- CARTE INTERACTIVE INTEGREE dans une page service --- */
/* Quand un ancetre porte data-carte-filter (page Enseignement = "ecoles",
   page Gestion des salles = "salles"...), on masque les filtres et la legende
   (categorie deja verrouillee) et on aere un peu le layout pour qu'il s'integre
   dans la colonne de contenu plus etroite. Selecteur generique sur l'attribut
   pour couvrir toutes les pages service qui integrent la carte filtree. */
[data-carte-filter] .carte__sidebar,
[data-carte-filter] .carte__map-legend {
  display: none;
}

[data-carte-filter] .carte__main {
  background: transparent;
  padding: 0;
  margin-top: 24px;
}

[data-carte-filter] .carte__main-inner {
  padding: 0;
  max-width: none;
}

[data-carte-filter] .carte__layout {
  display: block;
  gap: 0;
}

[data-carte-filter] .carte__map-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 420px;
}

[data-carte-filter] .carte__map {
  min-height: 420px;
}

/* --- LISTE DES ECOLES (liens directs sous la carte) --- */
.service-ecoles-links {
  margin-top: 28px;
}

.service-ecoles-links__title {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text);
}

.service-ecoles-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.service-ecoles-links__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-ecoles-links__item:hover,
.service-ecoles-links__item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
}

.service-ecoles-links__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.service-ecoles-links__pin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}

.service-ecoles-links__item--libre .service-ecoles-links__pin {
  background: var(--color-secondary);
}

.service-ecoles-links__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
}

.service-ecoles-links__label strong {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.service-ecoles-links__label small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}

.service-ecoles-links__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-ecoles-links__pin svg {
  width: 18px;
  height: 18px;
}

.service-ecoles-links__item:hover .service-ecoles-links__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* --- CARDS PMS --- */
.service-pms__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.service-pms-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-pms-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.service-pms-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.service-pms-card__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(51, 109, 148, 0.1);
  color: var(--color-primary);
  margin-bottom: 8px;
}

.service-pms-card__badge--libre {
  background: rgba(52, 153, 128, 0.12);
  color: var(--color-secondary);
}

.service-pms-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}

.service-pms-card__subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.service-pms-card__details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-pms-card__details li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 18px;
  color: var(--color-text);
}

.service-pms-card__details li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--color-primary);
}

.service-pms-card__details a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.service-pms-card__details a:hover {
  text-decoration: underline;
}

/* ============================================================
   SOUS-PAGES ÉCOLES -- design enrichi
   ============================================================ */

/* --- Section-tag avec icône Lucide (utilisé dans les sous-pages école) --- */
.section-tag__icon--lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}

.section-tag__icon--lucide svg {
  width: 18px;
  height: 18px;
}

/* --- Section école : intro courte sous le header --- */
.ecole-section__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  max-width: 720px;
}

.ecole-section__intro p {
  margin: 0;
}

/* Le texte d'un bloc est un flux, sur les seize types : un bloc de famille B
   qui n'avait qu'un paragraphe d'introduction peut désormais porter un
   sous-titre, une liste, plusieurs paragraphes. Mêmes règles que le texte mis
   en forme d'une fiche (.ecole-content), pour qu'un sous-titre soit le même
   sous-titre d'un bloc à l'autre. Sans effet sur un paragraphe seul. */
.ecole-section__intro > * + * {
  margin-top: 14px;
}

.ecole-section__intro h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--color-text);
}

.ecole-section__intro ul,
.ecole-section__intro ol {
  margin: 0;
  padding-left: 22px;
}

.ecole-section__intro li {
  margin-bottom: 6px;
  line-height: 24px;
}

/* --- Type "cards" : grille d'items visuels --- */
.ecole-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.ecole-mini-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.ecole-mini-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  opacity: 0.85;
}

.ecole-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.ecole-mini-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(51, 109, 148, 0.08);
  border-radius: var(--radius-sm);
  box-sizing: content-box;
  color: var(--color-primary);
}

.ecole-mini-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}

.ecole-mini-card__desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Une carte liée à une page (famille B) : la carte entière est le lien,
   comme `service-card--link` en famille A. */
.ecole-mini-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ecole-mini-card--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.ecole-mini-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-primary);
}

.ecole-mini-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.ecole-mini-card--link:hover .ecole-mini-card__more svg,
.ecole-mini-card--link:focus-visible .ecole-mini-card__more svg {
  transform: translateX(3px);
}

/* --- Type "highlights" : liste a points avec checks --- */
.ecole-highlight-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

.ecole-highlight-list--compact {
  grid-template-columns: 1fr;
  gap: 8px;
}

.ecole-highlight-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

/* Lien de réservation externe accolé à une infrastructure de la liste
   « Infrastructures disponibles » (page Gestion des salles). */
.salles-assoc__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.salles-assoc__link:hover,
.salles-assoc__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.salles-assoc__link svg {
  flex-shrink: 0;
}

.ecole-highlight-list__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(51, 109, 148, 0.12);
  color: var(--color-primary);
}

.ecole-highlight-list__text {
  flex: 1;
}

.ecole-highlight-list__text strong {
  font-weight: 700;
  color: var(--color-text);
}

/* --- Type "groups" : groupes thematiques avec titre + liste --- */
.ecole-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* Deux colonnes de 126 px à 320 px : les cartes débordaient (École de
   Hoves, Permis de conduire). Une colonne sous 480 px. */
@media (max-width: 480px) {
  .ecole-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Variante 1 colonne explicite si besoin (groupes denses) */
.ecole-groups--single {
  grid-template-columns: 1fr;
}

.ecole-group {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 20px 22px 22px;
  border-left: 3px solid var(--color-primary);
}

.ecole-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 14px;
}

.ecole-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.ecole-group .ecole-highlight-list {
  margin-top: 0;
}

.ecole-group .ecole-highlight-list__check {
  background: var(--color-bg);
}

/* --- Type "text" : contenu HTML libre --- */
.ecole-content > * + * {
  margin-top: 14px;
}

.ecole-content p {
  margin: 0;
  line-height: 26px;
}

.ecole-content h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--color-text);
}

.ecole-content ul {
  margin: 0;
  padding-left: 22px;
}

/* Le « sous-sous-titre » (h4) de l'éditeur : sans règle, il sortait plus
   grand que le sous-titre (h3, 17 px). */
.ecole-content h4,
.ecole-section__intro h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--color-text);
}

.ecole-content li {
  margin-bottom: 6px;
  line-height: 24px;
}

/* ============================================================
   SIDEBAR D'UNE FICHE ÉCOLE
   ============================================================ */

/* Card "identite" (header de la sidebar : avatar + nom directeur·trice) */
.ecole-sidebar__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, rgba(51, 109, 148, 0.06), rgba(51, 109, 148, 0.02));
  border: 1px solid rgba(51, 109, 148, 0.18);
}

.ecole-sidebar__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.ecole-sidebar__identity-body {
  flex: 1;
  min-width: 0;
}

.ecole-sidebar__identity-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.ecole-sidebar__identity-name {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
}

.ecole-sidebar__identity-role {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Liste de contact (sidebar fiche école) -- alignement icone/texte propre */
.ecole-sidebar__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ecole-sidebar__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ecole-sidebar__contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(51, 109, 148, 0.10);
  color: var(--color-primary);
}

.ecole-sidebar__contact-icon svg {
  width: 16px;
  height: 16px;
}

.ecole-sidebar__contact-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.ecole-sidebar__contact-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.ecole-sidebar__contact-link:hover,
.ecole-sidebar__contact-link:focus-visible {
  color: var(--color-primary-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lien externe : icône sur la MÊME ligne, alignée au texte */
.ecole-sidebar__contact-link--external {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ecole-sidebar__external-icon {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.7;
}

.ecole-sidebar__contact-meta {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.ecole-sidebar__contact-address {
  font-style: normal;
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
}

/* Bouton itinéraire (large, dans la card contact) */
.ecole-sidebar__itinerary {
  margin-top: 18px;
}

/* Bouton "Retour" -- inline-flex, NE prend PAS toute la largeur */
.ecole-back {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.btn--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.ecole-back .btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Bouton block (force la largeur 100%) -- pour la sidebar uniquement */
.btn--block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.btn--block svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE -- pages école + enseignement
   ============================================================ */
@media (max-width: 1024px) {
  .service-ecoles-links__list {
    grid-template-columns: 1fr;
  }

  .service-pms__grid {
    grid-template-columns: 1fr;
  }

  .ecole-cards-grid {
    grid-template-columns: 1fr;
  }

  .ecole-highlight-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ecole-sidebar__identity {
    flex-direction: column;
    text-align: center;
  }

  .ecole-sidebar__avatar {
    width: 56px;
    height: 56px;
  }

  .ecole-sidebar__avatar svg {
    width: 56px;
    height: 56px;
  }

  .ecole-mini-card__icon {
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   DÉMARCHES — liens du hub Population vers les sous-pages
   Réutilise le pattern .service-ecoles-links avec une description
   par démarche et une barre d'accent colorée à gauche.
   ============================================ */
.service-demarches-links {
  margin-top: 8px;
}

.service-demarches-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Chaque cellule de grille s'etire : le <li> remplit la hauteur de la ligne */
.service-demarches-links__list > li {
  display: flex;
}

.service-demarches-links__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-demarches-links__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
}

.service-demarches-links__item:hover,
.service-demarches-links__item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
}

.service-demarches-links__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.service-demarches-links__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.service-demarches-links__icon svg {
  width: 22px;
  height: 22px;
}

.service-demarches-links__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
}

.service-demarches-links__label strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}

.service-demarches-links__label small {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.service-demarches-links__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-demarches-links__item:hover .service-demarches-links__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ============================================
   TARIFS — liste tarifaire des sous-pages démarches
   ============================================ */
.demarche-tarifs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demarche-tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.demarche-tarif__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.demarche-tarif__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text);
}

.demarche-tarif__note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.demarche-tarif__amount {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Intro de groupe (type 'groups' avec un paragraphe sous le sous-titre) */
.ecole-group__intro {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

/* Marge de l'encadré notice quand il suit le contenu d'une section démarche */
.demarche-notice {
  margin-top: 20px;
}

/* Illustration d'une section démarche (ex : nuage du Registre des Étoiles).
   Pas de cadre ni de fond : l'illustration est transparente / blanc sur blanc
   et s'intègre directement au contenu. */
.demarche-illustration {
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.demarche-illustration img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

/* Espace supplémentaire avant un bouton CTA en fin de bloc de texte */
.ecole-content .demarche-cta-line {
  margin-top: 22px;
}

@media (max-width: 768px) {
  .demarche-illustration img {
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .service-demarches-links__list {
    grid-template-columns: 1fr;
  }

  .demarche-tarif {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
  }

  .demarche-tarif__amount {
    font-size: 18px;
  }
}

/* ============================================================
   GALERIE PHOTOS -- sous-pages école
   ============================================================ */
.ecole-section--gallery .ecole-section__intro {
  margin-bottom: 18px;
}

.ecole-gallery {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ecole-gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  cursor: zoom-in;
  outline: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ecole-gallery__item:hover,
.ecole-gallery__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.ecole-gallery__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.ecole-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ecole-gallery__item:hover img {
  transform: scale(1.05);
}

.ecole-gallery__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 109, 148, 0);
  color: #fff;
  opacity: 0;
  transition: background 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

.ecole-gallery__zoom svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.ecole-gallery__item:hover .ecole-gallery__zoom,
.ecole-gallery__item:focus-visible .ecole-gallery__zoom {
  background: rgba(51, 109, 148, 0.35);
  opacity: 1;
}

@media (max-width: 768px) {
  .ecole-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

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

/* ============================================================
   LIGHTBOX (overlay plein écran)
   ============================================================ */
.ecole-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.ecole-lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.ecole-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.92);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.ecole-lightbox__stage {
  position: relative;
  z-index: 1;
  width: min(94vw, 1400px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecole-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ecole-lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  background: #111;
}

.ecole-lightbox__caption {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  max-width: 720px;
  margin: 0;
  padding: 0 12px;
}

.ecole-lightbox__caption:empty {
  display: none;
}

.ecole-lightbox__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ecole-lightbox__btn:hover,
.ecole-lightbox__btn:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
  outline: none;
}

.ecole-lightbox__btn--close {
  top: 0;
  right: 0;
}

.ecole-lightbox__btn--prev {
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.ecole-lightbox__btn--prev:hover,
.ecole-lightbox__btn--prev:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

.ecole-lightbox__btn--next {
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.ecole-lightbox__btn--next:hover,
.ecole-lightbox__btn--next:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

.ecole-lightbox__btn[hidden] {
  display: none;
}

.ecole-lightbox__counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .ecole-lightbox__btn--prev,
  .ecole-lightbox__btn--next {
    top: auto;
    bottom: -56px;
    transform: none;
  }
  .ecole-lightbox__btn--prev {
    left: calc(50% - 56px);
  }
  .ecole-lightbox__btn--next {
    right: calc(50% - 56px);
  }
  .ecole-lightbox__counter {
    bottom: -36px;
  }
  .ecole-lightbox__btn--prev:hover,
  .ecole-lightbox__btn--next:hover {
    transform: scale(1.05);
  }
}

/* ============================================================
   PAGE ALE -- Conseil d'administration (ASBL) repliable
   ============================================================ */

.service-board {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
  transition: box-shadow var(--transition-base, 0.2s ease),
    border-color var(--transition-base, 0.2s ease);
}

.service-board[open] {
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.service-board__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
}

.service-board__summary::-webkit-details-marker {
  display: none;
}

.service-board__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.service-board__chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.25s ease, color 0.25s ease;
}

.service-board[open] .service-board__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.service-board__list {
  list-style: none;
  margin: 0;
  padding: 4px 20px 16px;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 24px;
}

.service-board__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-bg-alt);
}

.service-board__name {
  font-weight: 500;
  color: var(--color-text);
}

.service-board__role {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .service-board__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SERVICE ACCESS — Cards de renvoi vers sous-pages
   Grille de cards cliquables (page racine Finances).
   ============================================ */
.service-access__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--block-gap);
}

.service-access__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-access__card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.service-access__card:hover,
.service-access__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.service-access__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  margin-bottom: 4px;
}

.service-access__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

.service-access__card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.service-access__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary);
}

.service-access__card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.service-access__card:hover .service-access__card-link svg {
  transform: translateX(3px);
}

/* ============================================
   SERVICE ANCHORS — Menu d'ancres en haut de page
   ============================================ */
.service-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

/* Décalage des sections ancrées pour ne pas masquer le titre
   sous le header sticky lors d'un clic sur une ancre. */
.service-content section[id] {
  scroll-margin-top: calc(var(--total-header-height, 120px) + 24px);
}

.service-anchors__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.service-anchors__link svg {
  color: var(--color-primary);
}

.service-anchors__link:hover,
.service-anchors__link:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}

.service-anchors__link:hover svg,
.service-anchors__link:focus-visible svg {
  color: var(--color-text-light);
}

/* DOC LIST : le composant `.doc-list` vit dans components.css depuis le
   24 sept. 2026 (servi partout, fiches d'actualité comprises). Ne pas le
   recopier ici : deux copies finissent toujours par diverger. */

/* ============================================
   SIDEBAR — Lien retour (sous-pages)
   ============================================ */
.service-sidebar__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary-ink);
  text-decoration: none;
  transition: gap 0.25s ease;
}

.service-sidebar__back-link svg {
  transition: transform 0.25s ease;
}

.service-sidebar__back-link:hover svg,
.service-sidebar__back-link:focus-visible svg {
  transform: translateX(-3px);
}

@media (max-width: 768px) {
  .service-access__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SUBSIDES TABLE — Tableau des montants octroyés
   ============================================ */
.subsides-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.subsides-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
}

.subsides-table__caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-secondary);
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.subsides-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-alt);
  padding: 12px 18px;
  border-bottom: 2px solid var(--color-border);
}

.subsides-table__amount-col {
  text-align: right;
  white-space: nowrap;
}

.subsides-table td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.subsides-table tbody tr:last-child td {
  border-bottom: none;
}

.subsides-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-bg-alt) 50%, transparent);
}

.subsides-table__amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-primary);
}

.subsides-table__notes {
  margin: 12px 2px 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ============================================
   SIDEBAR — Carte « Retour au service parent »
   Pattern reutilisable sur toutes les sous-pages.
   Desktop : en haut de la sidebar (ordre naturel du DOM).
   Mobile  : la sidebar passe sous le contenu et la carte
             retour est repoussee tout en bas de la colonne.
   ============================================ */
.service-sidebar__card--back .service-sidebar__card-body {
  padding: 16px 20px;
}

@media (max-width: 768px) {
  .service-sidebar__card--back {
    order: 99;
  }
}

/* ============================================================
   SERVICE FIGURE -- variante « contenue » (photo d'archive basse résolution)
   Modificateur de .service-figure pour les petites photos (ex. bâtiments
   MCAE / Petits Fripons, 300x225) qui deviendraient floues si étirées en
   bannière pleine largeur. Affichage encadré, taille naturelle plafonnée.
   N'affecte PAS le composant .service-figure partagé (classement-archives...).
   ============================================================ */
.service-figure--contained {
  max-width: 420px;
  margin: 0 0 var(--space-md);
}

.service-figure--contained .service-figure__img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

@media (max-width: 768px) {
  .service-figure--contained {
    max-width: 100%;
  }
}

/* ============================================================
   PETITE ENFANCE -- ajustements sidebar
   ============================================================ */
/* Liste de contacts secondaires sous un bloc équipe (ex. Decroly chez les Fripons) */
.service-sidebar__team-block + .service-sidebar__contact-list {
  margin-top: 12px;
}

/* Tableau d'horaires placé après une adresse (ex. La Babillarde) */
.service-sidebar__address + .service-sidebar__hours {
  margin-top: 14px;
}

/* Card secteur d'une accueillante conventionnée : icône + libellé alignés */
.accueillante-card__secteur {
  display: flex;
  align-items: center;
  gap: 4px;
}

.accueillante-card__secteur-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ============================================================
   PETITE ENFANCE -- carte partenaire (asbl La Babillarde)
   Logo + texte de présentation côte à côte (desktop), empilés (mobile).
   ============================================================ */
.petite-enfance-partner {
  display: flex;
  gap: 28px;
  align-items: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.petite-enfance-partner__logo {
  flex-shrink: 0;
  width: 200px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.petite-enfance-partner__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.petite-enfance-partner__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.petite-enfance-partner__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .petite-enfance-partner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }

  .petite-enfance-partner__logo {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ============================================
   JEUNESSE — Sous-titre de section (sépare 2 sous-blocs dans une même section)
   Ex : « Stages durant les congés scolaires » sous la section Plaines.
   ============================================ */
.service-section__header--sub {
  margin-top: 8px;
}

.service-section__subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  color: var(--color-text);
}

/* ============================================
   JEUNESSE — Tableaux de données (dates plaines, tarifs)
   Calqué sur .biblio-tarifs : en-têtes colorés par --color-primary
   (cyan via .page-jeunesse), scroll horizontal sur petit écran.
   Réutilisable par d'autres pages services au besoin.
   ============================================ */
.jeunesse-table {
  margin-top: 4px;
}

.jeunesse-table__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.3;
}

.jeunesse-table__scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.jeunesse-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 460px;
}

/* Sur téléphone, un tableau de deux ou trois colonnes tient dans l'écran : sa
   largeur minimale poussait la seconde colonne HORS du cadre défilant, sans
   indice — les montants des subsides étaient invisibles (revue du 24 sept.
   2026). Les tableaux de quatre colonnes et plus gardent le défilement. */
@media (max-width: 768px) {
  .jeunesse-table__table:not(:has(tr > :nth-child(4))) {
    min-width: 0;
  }
}

.jeunesse-table__table thead th {
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  white-space: nowrap;
}

.jeunesse-table__table tbody th,
.jeunesse-table__table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
  line-height: 1.45;
}

.jeunesse-table__table tbody th {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.jeunesse-table__table tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.jeunesse-table__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.jeunesse-table__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* ============================================
   JEUNESSE — Deux colonnes (Formation BACV : « Qui es-tu ? » / « Ce qu'on propose »)
   ============================================ */
.jeunesse-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.jeunesse-cols__col .service-missions__subtitle {
  font-size: 20px;
  line-height: 26px;
}

@media (max-width: 768px) {
  .jeunesse-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

/* ============================================
   JEUNESSE — Grille de cards « hub » vers les sous-pages (page mère).
   Cards cliquables reprenant le look des .service-card (barre couleur en
   haut + hover levé), avec flèche, sur le modèle de la page Enseignement.
   ============================================ */
.jeunesse-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--block-gap, 24px);
}

.jeunesse-hub-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 20px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.jeunesse-hub-card:hover,
.jeunesse-hub-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.jeunesse-hub-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.jeunesse-hub-card__icon {
  flex-shrink: 0;
  display: inline-flex;
}

.jeunesse-hub-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.jeunesse-hub-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.51px;
  color: var(--color-text);
}

.jeunesse-hub-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-secondary);
}

.jeunesse-hub-card__arrow {
  flex-shrink: 0;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.jeunesse-hub-card:hover .jeunesse-hub-card__arrow,
.jeunesse-hub-card:focus-visible .jeunesse-hub-card__arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .jeunesse-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ÉCONOMIE LOCALE (/ma-commune/economie-locale)
   Deux listes propres à la page : les prochains rendez-vous (.eco-actus)
   et les catégories du répertoire d'acteurs locaux (.eco-categories).
   ============================================ */

/*
 * Un panneau d'onglets peut enchaîner plusieurs blocs (grille de cards, encart,
 * liste de documents) suivis d'un nouveau sous-titre. Sans marge haute, ce
 * sous-titre se colle au bloc précédent : on rétablit une respiration, sauf
 * pour le premier sous-titre du panneau qui garde le rythme de l'onglet.
 */
.cpas-tabs__panel .service-missions__subtitle {
  margin-top: var(--space-2xl);
}

.cpas-tabs__panel > .service-missions__subtitle:first-child {
  margin-top: 0;
}

.eco-actus {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eco-actu {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.eco-actu__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eco-actu__icon svg {
  width: 18px;
  height: 18px;
}

.eco-actu__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.eco-actu__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-text);
}

.eco-actu__meta {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.eco-categories {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.eco-category {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.eco-category:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
}

.eco-category__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-primary);
}

.eco-category__icon svg {
  width: 20px;
  height: 20px;
}

.eco-category__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}

/* Lien « en savoir plus » au pied d'une .service-card (page Économie locale). */
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
}

.service-card__link:hover,
.service-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-card__link svg {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .eco-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .eco-categories {
    grid-template-columns: 1fr;
  }

  .eco-actu {
    align-items: flex-start;
  }
}

/* ============================================
   PARTENAIRES / LIEUX — liste de pastilles (chips)
   ============================================ */
.culture-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.culture-chips__item {
  padding: 8px 15px;
  border-radius: var(--radius-full, 50px);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ============================================================
   BLOCS v2 — le vocabulaire étendu du moteur de sections
   (template-parts/section-render.php). Un composant PARTAGÉ vit
   ici, dans la feuille que le MODÈLE sert : une règle posée dans
   une feuille de page ne suit pas le bloc sur les autres pages.
   ============================================================ */

/* --- Niveau du titre de bloc : un h3 ou un h4 garde la classe du titre
   de section (mêmes marges, même graisse) et prend la taille de son
   rang. Ses enfants descendent d'un cran, leur classe porte leur taille. --- */
.service-section__title--n3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.service-section__title--n4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* --- Un bloc SANS étiquette, en h3 ou h4, porte son icône à gauche de son
   titre : le tracé Lucide en 22 px et couleur primaire (style pastille), ou
   le glyphe plein dans son carré de 28 px (style glyphe). --- */
.service-section__title--icone {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-section__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.service-section__title-icon svg {
  display: block;
}

/* Les sous-titres d'un flux décalés sous un bloc en h3/h4 : h5 et h6
   reprennent le dessin du h4, la hiérarchie se lit par la taille du bloc. */
.service-missions__intro > h5,
.service-missions__intro > h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.ecole-content h5,
.ecole-content h6,
.ecole-section__intro h5,
.ecole-section__intro h6 {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--color-text);
}

/* --- Encadré d'information : le corps, le titre, les actions ---
   Le `<p style="margin-bottom:16px">` historique est remplacé par ces
   règles : le dernier élément du corps ne pousse rien, et les actions
   gardent leur écart de 16 px (déjà porté par .service-notice__actions). */
.service-notice__body {
  flex: 1;
  min-width: 0;
}

.service-notice__body > :last-child {
  margin-bottom: 0;
}

.service-notice__body p + .service-notice__actions {
  margin-top: 16px;
}

/* Un encadré peut porter plusieurs paragraphes, des sous-titres et des
   listes : sans ces écarts, deux paragraphes se collaient (margin 0). */
.service-notice__body > p + p,
.service-notice__body > ul + p,
.service-notice__body > ol + p,
.service-notice__body > * + ul,
.service-notice__body > * + ol {
  margin-top: 8px;
}

.service-notice__body > * + h3,
.service-notice__body > * + h4,
.service-notice__body > * + h5,
.service-notice__body > * + h6 {
  margin-top: 12px;
}

.service-notice__body h3,
.service-notice__body h4,
.service-notice__body h5,
.service-notice__body h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.service-notice__body ul,
.service-notice__body ol {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
}

.service-notice__body ul {
  list-style: disc;
}

.service-notice__body ol {
  list-style: decimal;
}

.service-notice__body li + li {
  margin-top: 4px;
}

/* Variante « carte d'action » : le dessin de la carte e-Guichet
   (.service-eguichet__card) — fond gris, grand radius, titre en 24 px,
   bouton large — sans le filet de couleur d'un encadré. */
.service-notice--carte {
  padding: 32px;
  gap: 24px;
  border-left: 0;
  border-radius: var(--radius-lg);
  align-items: flex-start;
}

.service-notice--carte .service-notice__icon {
  width: 32px;
  height: 32px;
  margin-top: 0;
}

.service-notice--carte .service-notice__title {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.72px;
  margin-bottom: 8px;
}

.service-notice--carte .service-notice__body > p {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.45px;
}

.service-notice--carte .service-notice__actions .btn {
  padding: 12px 20px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.3px;
}

/* --- Grille de cartes : icône à gauche, image, label, points ---
   Famille A (.service-card) et famille B (.ecole-mini-card) reçoivent les
   mêmes options ; seul le préfixe change. */
.service-card__media,
.ecole-mini-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.ecole-mini-card__media {
  margin-bottom: 12px;
}

.service-card__label,
.ecole-mini-card__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary-ink, var(--color-primary));
}

.ecole-mini-card__label {
  margin-bottom: 4px;
}

.service-card__puces,
.ecole-mini-card__puces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ecole-mini-card__puces {
  margin-top: 10px;
}

.service-card__puce,
.ecole-mini-card__puce {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text);
}

.service-card__puce-icon,
.ecole-mini-card__puce-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-primary);
}

/* L'icône à gauche du titre : une grille à deux colonnes, l'icône dans la
   première sur toute la hauteur du bloc titre + label, le reste dans la
   seconde. Le filet de couleur reste en position absolue, hors grille. */
.service-card--icone-gauche,
.ecole-mini-card--icone-gauche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}

.service-card--icone-gauche {
  row-gap: 8px;
}

.ecole-mini-card--icone-gauche {
  row-gap: 4px;
}

.service-card--icone-gauche > *,
.ecole-mini-card--icone-gauche > * {
  grid-column: 2;
}

.service-card--icone-gauche > .service-card__accent,
.ecole-mini-card--icone-gauche > .ecole-mini-card__accent {
  grid-column: 1 / -1;
}

.service-card--icone-gauche > .service-card__icon,
.ecole-mini-card--icone-gauche > .ecole-mini-card__icon,
.service-card--icone-gauche > .service-card__media,
.ecole-mini-card--icone-gauche > .ecole-mini-card__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
}

.service-card--icone-gauche > .service-card__media,
.ecole-mini-card--icone-gauche > .ecole-mini-card__media {
  width: 72px;
  aspect-ratio: 1;
}

.service-card--icone-gauche .service-card__more,
.ecole-mini-card--icone-gauche .ecole-mini-card__more {
  margin-top: 4px;
}

/* --- Étiquettes : une icône devant le mot, ou un logo seul --- */
.culture-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.culture-chips__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.culture-chips__item--logo {
  background: var(--color-bg);
  padding: 8px 14px;
}

.culture-chips__img {
  display: block;
  width: auto;
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
}

/* --- Étiquette-lien : le <a> porte le dessin de l'étiquette, le survol le dit --- */
.culture-chips__item--lien {
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.culture-chips__item--lien:hover,
.culture-chips__item--lien:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}

/* --- Liste de liens sur deux colonnes --- */
.service-links--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-links--2col .service-links__link {
  height: 100%;
}

/* --- Étapes numérotées sur deux colonnes --- */
.procedure-steps--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Encart à télécharger avec sa vignette à gauche --- */
.service-charte__card--illustree {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.service-charte__card--illustree .service-charte__image {
  flex-shrink: 0;
}

.service-charte__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* --- Questions fréquentes : accordéon <details>/<summary>, le dessin de
   la FAQ Tourisme (tourisme.css) porté ici pour le bloc partagé. --- */
.service-faq {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 24px;
  box-shadow: var(--shadow-natural);
}

.service-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.service-faq__item:last-child {
  border-bottom: none;
}

.service-faq__question {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.service-faq__question::-webkit-details-marker {
  display: none;
}

.service-faq__question:hover {
  color: var(--color-primary-ink, var(--color-primary));
}

.service-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.service-faq__item[open] .service-faq__icon {
  transform: rotate(180deg);
}

.service-faq__answer {
  padding: 0 4px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.service-faq__answer p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.service-faq__answer ul,
.service-faq__answer ol {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.service-faq__answer ul {
  list-style: disc;
}

.service-faq__answer ol {
  list-style: decimal;
}

.service-faq__answer h3,
.service-faq__answer h4,
.service-faq__answer h5,
.service-faq__answer h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  color: var(--color-text);
  margin: 0;
}

/* --- Équipe : compléments de .team-card, et la disposition compacte --- */
.team-card__avatar img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.team-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
}

.team-card__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.team-card__contact-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--badge-color, var(--color-primary));
}

.team-card__contact-item .team-card__address {
  margin: 0;
}

/* Compacte : photo, nom et fonction sur trois colonnes, sans coordonnées. */
.team-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.team-grid--compact .team-card {
  padding: 20px 18px 18px;
  gap: 0;
}

/* --- Responsive des blocs v2 --- */
@media (max-width: 1024px) {
  .team-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .service-section__title--n3 {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .service-section__title--n4 {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .service-notice--carte {
    padding: 24px;
    gap: 16px;
  }

  .service-notice--carte .service-notice__title {
    font-size: 20px;
    line-height: 26px;
  }

  .service-links--2col,
  .procedure-steps--2col {
    grid-template-columns: 1fr;
  }

  .service-charte__card--illustree {
    flex-direction: column;
  }

  .service-faq {
    padding: 2px 16px;
  }

  .service-faq__question {
    font-size: 15px;
    padding: 14px 2px;
  }

  .team-grid--compact {
    grid-template-columns: 1fr;
  }

  .culture-chips__img {
    max-height: 40px;
  }
}

/* --- Encadré libre de la colonne de droite : le texte, puis son bouton --- */
.service-sidebar__libre > * + * {
  margin-top: 10px;
}

.service-sidebar__libre p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
}

.service-sidebar__libre ul,
.service-sidebar__libre ol {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
}

.service-sidebar__libre ul {
  list-style: disc;
}

.service-sidebar__libre ol {
  list-style: decimal;
}

.service-sidebar__libre-bouton {
  margin-top: 16px;
}

.service-sidebar__libre:empty + .service-sidebar__libre-bouton,
.service-sidebar__card-body > .service-sidebar__libre-bouton:first-child {
  margin-top: 0;
}