/* ---------------------------------------------------------------------------
   Jetons de design
   Les couleurs de TEXTE sont validées WCAG 2.1 AA (RGAA 4.1, critère 3.2) :
   contraste >= 4.5:1 sur tous les fonds clairs du site
   (#FFFFFF, #FCFAF3, #F6F2E8, #EDEFE3, #E7E3D6).
   --accent reste réservé aux usages décoratifs (bordures, aplats, gros titres
   >= 24px qui relèvent du seuil 3:1).
--------------------------------------------------------------------------- */
:root {
  --accent: #A9683C;        /* décoratif : bordures, aplats, titres >= 24px   */
  --accent-text: #8A5230;   /* texte et liens (>= 4.91:1 partout)             */
  --accent-dark: #7A4829;
  --alert-bg: #9C5F35;      /* bandeau d'alerte (4.82:1 avec #FBF8F0)         */
  --muted: #696558;         /* texte secondaire, métadonnées (>= 4.54:1)      */
  --radius: 14px;
  --radius-sm: 10px;
  --focus: #1A2D21;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #F6F2E8;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #2A2620;
}
::selection { background: #2C4632; color: #FBF8F0; }
img { max-width: 100%; }
a { color: inherit; }

/* ---------------------------------------------------------------------------
   Accessibilité
--------------------------------------------------------------------------- */

/* Lien d'évitement (RGAA 12.7) : visible dès la prise de focus au clavier */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 999;
  background: #FBF8F0;
  color: #1A2D21;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6);
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Prise de focus toujours visible et contrastée (RGAA 10.7) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sur fonds sombres, un contour clair reste lisible */
header :focus-visible,
footer :focus-visible,
.on-dark :focus-visible {
  outline-color: #FBF8F0;
}

/* Contenu réservé aux lecteurs d'écran (RGAA 10.13) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Respect de la préférence « moins d'animations » (RGAA 13.8) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Panneaux dépliants par année (page Documents)
   Repose sur <details>/<summary> : le clavier et les lecteurs d'écran sont
   gérés nativement par le navigateur, sans JavaScript ni ARIA à maintenir.
--------------------------------------------------------------------------- */
.annee {
  background: #FFFFFF;
  border: 1px solid #E6DFCE;
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.annee__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  user-select: none;
  /* masque le triangle par défaut, remplacé par notre chevron */
  list-style: none;
}
.annee__tete::-webkit-details-marker { display: none; }
.annee__tete:hover { background: #FCFAF3; }

.annee__chevron {
  flex: none;
  color: var(--accent-text);
  transition: transform .2s ease;
}
.annee[open] .annee__chevron { transform: rotate(90deg); }

.annee__titre {
  font-family: 'Spectral', serif;
  font-size: 24px;
  font-weight: 600;
  color: #2A2620;
  margin: 0;
  flex: 1;
}
.annee__compte {
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
}

.annee__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 18px 18px;
  border-top: 1px solid #EFEAD9;
}

/* ---------------------------------------------------------------------------
   Cadres image : placeholder si la photo n'est pas encore fournie
--------------------------------------------------------------------------- */
.slot {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(44, 70, 50, .10), rgba(169, 104, 60, .10)),
    #E7E3D6;
}
.slot__ph {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 8px 12px;
  z-index: 0;
}

/* Dès qu'une image est présente, le cadre s'efface complètement : sinon, en
   mode « contain », le fond et le libellé transparaissent dans les bandes
   laissées libres de part et d'autre de l'image.
   Si l'image échoue au chargement, site.js la retire du document : le sélecteur
   ne s'applique plus et le cadre de remplacement réapparaît. */
.slot:has(img) { background: none; }
.slot:has(img) .slot__ph { display: none; }
.slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.slot[data-fit="contain"] > img { object-fit: contain; }

/* ---------------------------------------------------------------------------
   Adaptation aux petits écrans et au zoom (RGAA 10.11 — 320px / 200%)
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-collapse { grid-template-columns: 1fr !important; }
  .hide-mobile { display: none !important; }
}

/* Cartes d'actualité de l'accueil : sur petit écran, la photo passe au-dessus
   du texte (côte à côte, la carte débordait de l'écran). */
@media (max-width: 560px) {
  .carte-actu { flex-direction: column; }
  .carte-actu > .slot { width: 100% !important; height: 180px !important; }
}

/* ---------------------------------------------------------------------------
   Calendrier des disponibilités (page Salle des fêtes)
   Un tableau par mois : caption, en-têtes de colonnes (RGAA 5.x).
   Une journée réservée est signalée par la couleur, par un texte barré ET par
   une mention pour les lecteurs d'écran : l'information ne repose pas sur la
   couleur seule (RGAA 3.1).
--------------------------------------------------------------------------- */
.cal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cal__mois {
  background: #FFFFFF;
  border: 1px solid #E6DFCE;
  border-radius: var(--radius);
  padding: 18px 16px 14px;
}
.cal__mois table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cal__mois caption {
  caption-side: top;
  text-align: left;
  font-family: 'Spectral', serif;
  font-size: 20px;
  font-weight: 600;
  color: #2A2620;
  padding: 0 4px 12px;
}
.cal__mois th {
  padding: 4px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.cal__mois th abbr { text-decoration: none; }
.cal__mois td {
  padding: 2px;
  text-align: center;
  vertical-align: middle;
}
.cal__jour {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2A2620;
}
/* journée déjà passée : atténuée (contraste conservé, 5.83:1 sur blanc) */
.cal__jour--passe { color: var(--muted); font-weight: 400; }
/* journée réservée : fond terracotta, chiffre barré (5.94:1) */
.cal__jour--reserve {
  background: var(--accent-text);
  color: #FBF8F0;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.cal__jour--reserve.cal__jour--passe { background: #B99C87; color: #2A2620; font-weight: 600; }

.cal__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin-top: 22px;
  color: #4A4438;
  font-size: 14.5px;
}
.cal__legende span { display: inline-flex; align-items: center; gap: 10px; }
.cal__pastille {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #D8D0BC;
  background: #FFFFFF;
}
.cal__pastille--reserve { background: var(--accent-text); border-color: var(--accent-text); }

@media (max-width: 900px) {
  .cal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cal { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Menu de navigation principal (partials/header.ejs)
   Construit à partir de src/data/navigation.js, comme le plan du site.
   Menus déroulants en <details>/<summary> : clavier et lecteurs d'écran gérés
   nativement ; site.js n'ajoute que la fermeture automatique.
--------------------------------------------------------------------------- */
.entete__barre { position: relative; }
.menu ul { list-style: none; margin: 0; padding: 0; }

.menu__barre { display: flex; align-items: center; gap: 26px; }
.menu__barre > li { position: relative; }

.menu__lien,
.menu__titre {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(251, 248, 240, .82);
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  cursor: pointer;
}
.menu__titre { list-style: none; user-select: none; }
.menu__titre::-webkit-details-marker { display: none; }
.menu__lien:hover, .menu__titre:hover,
.menu__groupe[open] > .menu__titre { color: #FBF8F0; }
.menu__lien--actif { color: #FBF8F0; border-bottom-color: #DCC9A8; }
.menu__lien:focus-visible, .menu__titre:focus-visible,
.menu__page:focus-visible, .menu__contact:focus-visible,
.menu-mobile__bouton:focus-visible, .menu-mobile__lien:focus-visible {
  outline: 3px solid #DCC9A8; outline-offset: 3px; border-radius: 4px;
}
.menu__chevron { transition: transform .2s ease; }
.menu__groupe[open] .menu__chevron { transform: rotate(180deg); }

.menu__panneau {
  position: absolute; top: calc(100% + 14px); left: -18px; z-index: 50;
  width: 340px; padding: 10px !important;
  background: #FFFFFF; border: 1px solid #E6DFCE; border-radius: var(--radius);
  box-shadow: 0 22px 44px -18px rgba(26, 45, 33, .45);
}
/* Dernier menu déroulant (avant « Contact ») : ouvert vers la gauche. */
.menu__barre > li:nth-last-child(2) .menu__panneau { left: auto; right: -18px; }

.menu__page {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none;
}
.menu__page:hover { background: #F6F2E8; }
.menu__page[aria-current="page"] { background: #EDEFE3; }
.menu__page-titre { display: block; color: #2A2620; font-weight: 600; font-size: 15px; }
.menu__page-desc { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }

.menu__contact {
  display: inline-flex; align-items: center; text-decoration: none;
  font-weight: 600; font-size: 15px; color: #243B2D;
  background: #DCC9A8; padding: 9px 18px; border-radius: 999px;
}
.menu__contact:hover { background: #FBF8F0; }

/* Mobile : bouton « Menu » et panneau dépliant */
.menu-mobile { display: none; }
.menu-mobile__bouton {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; user-select: none;
  color: #FBF8F0; font-weight: 700; font-size: 15px;
  border: 1px solid rgba(251, 248, 240, .45); border-radius: 999px; padding: 9px 16px;
}
.menu-mobile__bouton::-webkit-details-marker { display: none; }
.menu-mobile__panneau {
  position: absolute; left: 16px; right: 16px; top: calc(100% - 6px); z-index: 50;
  background: #FFFFFF; border: 1px solid #E6DFCE; border-radius: var(--radius);
  box-shadow: 0 22px 44px -18px rgba(26, 45, 33, .45);
  padding: 14px 18px 18px; max-height: 75vh; overflow-y: auto;
}
.menu-mobile__rubrique {
  margin: 16px 0 4px; color: var(--accent-text);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.menu-mobile__lien {
  display: block; padding: 9px 4px; color: #2A2620; font-weight: 600; font-size: 16px;
  text-decoration: none; border-bottom: 1px solid #EFEAD9;
}
.menu-mobile__lien[aria-current="page"] { color: var(--accent-text); }
.menu-mobile__contact { margin-top: 16px; }

@media (max-width: 900px) {
  .menu__barre { display: none; }
  .menu-mobile { display: block; }
}

/* Module Synbird (page /rendez-vous) : la mention « * Champ obligatoire » est
   affichée par le module à 60 % d'opacité, soit un contraste de 4,1:1, sous le
   seuil RGAA de 4,5:1. On la rétablit à pleine opacité. */
.synbird-widget .color__grey { opacity: 1 !important; }

/* En-tête de l'accueil : photo de la mairie sous un voile vert.
   La mairie souhaite que le bâtiment se voie en entier. L'en-tête n'ayant pas
   les proportions de la photo, celle-ci est montrée entière (contain),
   centrée, sur un fond fait de la même photo floutée, bords fondus. */
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
.hero-voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(95deg, rgba(26,45,33,.94) 0%, rgba(26,45,33,.80) 44%, rgba(26,45,33,.42) 100%);
}
.hero-photo::before {
  content: ""; position: absolute; inset: -40px; z-index: 0;
  background: url("/static/images/mairie-2026.jpg") center / cover no-repeat;
  filter: blur(22px) brightness(.85);
}
.hero-photo .slot { background: none; }
.hero-photo .slot > img {
  object-fit: contain; object-position: center;
  /* Grand écran : bords gauche et droit fondus (photo de 767 px de large à
     la hauteur de l'en-tête). Téléphone : haut et bas fondus. */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 384px), #000 calc(50% - 300px), #000 calc(50% + 300px), transparent calc(50% + 384px));
  mask-image: linear-gradient(90deg, transparent calc(50% - 384px), #000 calc(50% - 300px), #000 calc(50% + 300px), transparent calc(50% + 384px));
}
/* Grand écran : texte à gauche sur fond vert, mairie entière à droite (à la
   hauteur de l'en-tête, 1290 × 942 → 767 px de large), fondue côté texte. */
@media (min-width: 1000px) {
  .hero-photo { left: auto; width: 767px; max-width: 62%; }
  .hero-photo::before { display: none; }
  .hero-photo .slot > img {
    object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px);
    mask-image: linear-gradient(90deg, transparent 0, #000 160px);
  }
  .hero-voile {
    background: linear-gradient(90deg,
      rgba(26,45,33,.97) 0%,
      rgba(26,45,33,.97) calc(100% - min(767px, 62%)),
      rgba(26,45,33,.35) calc(100% - min(767px, 62%) + 200px),
      rgba(26,45,33,.10) 100%);
  }
}
@media (max-width: 767px) {
  .hero-photo .slot > img {
    -webkit-mask-image: linear-gradient(180deg, transparent calc(50% - 50vw * .73), #000 calc(50% - 50vw * .73 + 50px), #000 calc(50% + 50vw * .73 - 50px), transparent calc(50% + 50vw * .73));
    mask-image: linear-gradient(180deg, transparent calc(50% - 50vw * .73), #000 calc(50% - 50vw * .73 + 50px), #000 calc(50% + 50vw * .73 - 50px), transparent calc(50% + 50vw * .73));
  }
}