/* ============================================================
   Pour le Collet et les Tréteaux : « fond + cartes » :
   photo plein écran derrière le contenu,
   posé dans des cartes beige clair OPAQUES, l'image étant trop
   chargée pour la moindre transparence. Polices système en
   attendant les .woff2 auto-hébergées (fonts/). Contrastes AA,
   focus clavier visible, une seule colonne fluide de 360 px au
   grand écran.
   ============================================================ */

:root {
  --encre: #1a1a1a;        /* texte : contraste 15:1 sur les cartes */
  --carte: #fbf5e9;        /* cartes beige clair chaud */
  --fond: #7b7f77;         /* vert-gris moyen de la photo : prend
                              le relais si l'image ne charge pas */
  --accent: #8a1f11;       /* rouge brique : liens (8:1 sur carte) */
  --trait: #d8d3c8;        /* filets discrets */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 42rem;
  /* Le grand padding bas est le « final sur le mas » : après la
     dernière carte, ~75 % de la hauteur d'écran de vide pour que le
     bas de la photo (le mas) apparaisse seul en fin de scroll. */
  padding: 1.25rem 1rem 75vh;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--encre);
  background-color: var(--fond);
  overflow-wrap: break-word;
}

/* Photo du mas dans le paysage, plein écran sous le contenu, calée
   sur son bord INFÉRIEUR : le mas reste visible en bas du viewport.
   Pseudo-élément fixé au viewport plutôt que background-attachment:
   fixed, ignoré ou saccadé sur la plupart des navigateurs mobiles.
   Pas de voile : la photo est calme, les cartes opaques suffisent. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/images/fond2-petit.webp") center bottom / cover no-repeat;
}

/* Grand écran : version plus définie de l'image. */
@media (min-width: 800px) {
  body::before {
    background-image: url("/images/fond2-grand.webp");
  }
}

/* --- Liens et focus clavier ------------------------------- */

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lien d'évitement : invisible jusqu'au focus clavier. Sur carte,
   sinon il serait illisible sur la mosaïque. */
.evitement {
  position: absolute;
  left: -100vw;
}

.evitement:focus {
  position: static;
  display: inline-block;
  padding: 0.5rem;
  background: var(--carte);
  border-radius: 0.5rem;
}

/* --- Les cartes -------------------------------------------- */

main, .membres, .pied {
  background: var(--carte);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* --- En-tête : bannière + menu en boutons ------------------ */

.entete {
  margin-bottom: 1.5rem;
}

/* Masqué visuellement, lu par les lecteurs d'écran : le titre du
   site, peint dans l'image de la bannière, et l'étiquette du champ
   de Restez informé·es. */
.visuellement-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La bannière, cliquable vers l'accueil, sans carte autour. */
.banniere {
  display: block;
  border-radius: 0.75rem;
}

.banniere img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Le menu : des boutons en rangée, à cheval sur le bord bas de la
   bannière (la marge négative les remonte sur l'image ; en cas de
   passage sur deux rangées à 360 px, seule la première chevauche). */
.entete nav ul {
  list-style: none;
  margin: -1.2rem 0 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.entete nav a {
  display: inline-block;
  background: var(--carte);
  color: var(--encre);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.entete nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

.entete nav a[aria-current="page"] {
  background: var(--accent);
  color: #ffffff; /* contraste 9:1 sur le rouge brique */
}

/* Sur le bouton rouge, le liseré de focus rouge serait invisible. */
.entete nav a[aria-current="page"]:focus-visible {
  outline-color: #ffffff;
}

/* --- Contenu ---------------------------------------------- */

h1, h2, h3 {
  line-height: 1.25;
}

h1 {
  font-size: 1.8rem;
}

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

.date {
  color: #55504a; /* contraste 7:1 sur le fond */
  font-size: 0.9rem;
}

/* --- Listes de billets (actus, programmation) -------------- */

.liste-billets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-billets li {
  border-top: 1px solid var(--trait);
  padding: 1.25rem 0;
}

.liste-billets h2 {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}

.liste-billets p {
  margin: 0.25rem 0 0;
}

/* --- Appel au don ------------------------------------------ */

.appel {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: center;
  margin: 2rem auto 0.75rem;
}

.appel-bouton {
  text-align: center;
  margin: 0 0 2rem;
}

.bouton {
  display: inline-block;
  background: var(--accent);
  color: #ffffff; /* contraste 9:1 sur le rouge brique */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  font-family: inherit;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
}

.bouton:hover {
  background: #6e170c;
}

/* --- Codes maison pour les rédacteurs (voir aide/) ---------- */

/* Texte centré. */
.centre {
  text-align: center;
}

/* Texte en petit : même gris que les dates (contraste 7:1). */
.petit {
  color: #55504a;
  font-size: 0.9rem;
}

/* Ligne de séparation : le « --- » du Markdown. */
hr {
  border: none;
  border-top: 1px solid var(--trait);
  width: 60%;
  margin: 2rem auto;
}

/* Texte surligné, façon marqueur (balise mark). Le texte garde sa
   couleur : contraste inchangé sur le jaune paille. */
mark {
  background: #f8e08e;
  color: inherit;
  padding: 0 0.15em;
  border-radius: 0.2em;
}

/* Petit encadré, dans l'esprit des encadrés de l'accueil. */
.encadre {
  background: #ffffff;
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

/* Image avec légende. */
.figure {
  margin: 1.5rem 0;
  text-align: center;
}

.figure figcaption {
  color: #55504a; /* contraste 7:1 */
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* --- Dernières nouvelles (accueil) -------------------------- */

/* Encadrés en colonnes quand la place le permet, empilés sinon. */
.dernieres-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.dernieres-encadre {
  background: #ffffff; /* légèrement distinct de la carte beige */
  border: 1px solid var(--trait);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
}

.dernieres-encadre .date {
  margin: 0 0 0.3rem;
}

.dernieres-encadre h3 {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.dernieres-encadre p {
  margin: 0;
}

.dernieres-suite {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.dernieres-tout {
  margin: 0.9rem 0 0;
  font-weight: bold;
}

/* --- Pied de page ------------------------------------------ */

.membres, .pied {
  margin-top: 1.25rem;
}

/* --- Bloc « Restez informé·es » ---------------------------- */

/* Titre, champ et bouton sur une ligne en grand écran ; la ligne
   se replie et s'empile toute seule à 360 px. */
.infolettre-bloc {
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
}

.infolettre-titre {
  display: inline-block;
  font-size: 1.05rem;
  margin: 0 0.9rem 0.5rem 0;
  vertical-align: middle;
}

.infolettre-zone {
  display: inline-block;
  vertical-align: middle;
}

.infolettre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.infolettre-champ {
  flex: 1 1 11rem;
  min-width: 0;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid #6b6459; /* 4,7:1 sur la carte : repérable */
  border-radius: 0.5rem;
  background: #ffffff;
}

.infolettre-champ::placeholder {
  color: #55504a; /* 7:1 sur fond blanc */
}

/* Le bouton du formulaire, plus compact que le bouton de don. */
.infolettre .bouton {
  font-size: 1rem;
  padding: 0.45rem 1rem;
}

/* Champ piège anti-robots : jamais affiché. */
.piege {
  display: none;
}

.infolettre-note {
  font-size: 0.85rem;
  color: #55504a; /* 7:1 sur la carte */
  margin: 0;
}

.infolettre-merci {
  font-weight: bold;
  margin: 0 0 0.5rem;
}

/* Miniatures des billets (encadrés de l'accueil et listes). */
.mini {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.mini-liste {
  max-width: 24rem;
}

/* Date d'événement, mise en évidence (rouge brique ~8:1 sur blanc). */
.evenement {
  color: var(--accent);
  font-weight: bold;
  margin: 0 0 0.25rem;
}

.evenement-page {
  font-size: 1.1rem;
}

/* Icône maison du menu (bouton accueil). */
.icone-maison {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* Coordonnées et liens du pied commun. */
.pied-coordonnees {
  color: #55504a; /* contraste 7:1 */
  font-size: 0.9rem;
  margin: 1.5rem 0 0.5rem;
}

.pied-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Navigation du pied : le style des boutons du menu, un peu
   compacté ; un fin liseré les détache de la carte beige. */
.bouton-pied {
  display: inline-block;
  background: var(--carte);
  color: var(--encre);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--trait);
  border-radius: 0.6rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.bouton-pied:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

/* Le coin des membres (page À propos, templates/page.html) : les
   boutons beige du pied, en rangée, alignés sous le titre. */
.membres-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Appel aux rédacteurs, sous les boutons, en couleur d'accent. */
.membres-note {
  font-size: 0.85rem;
}

.membres-appel {
  font-size: 0.9rem;
  color: var(--accent);
  font-style: italic;
  margin-top: 1rem;
}

/* Astérisque de renvoi, du bouton Rédiger des articles vers
   l'appel aux rédacteurs ; line-height 0 pour que l'exposant
   ne grossisse pas le bouton. */
.membres sup {
  line-height: 0;
}

/* Fond rosé pastel : le rouge d'accent dilué dans le beige des
   cartes, pour distinguer la carte des membres sans nouvelle
   couleur. Un navigateur sans color-mix garde le fond beige. */
.membres {
  background: color-mix(in srgb, var(--accent) 12%, var(--carte));
}

/* Le bouton de don du pied, compacté comme celui du formulaire. */
.pied-liens .bouton {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}


/* --- Confort ----------------------------------------------- */

/* Aucune animation sur le site ; ce garde-fou neutralise toute
   animation qui serait ajoutée plus tard sans y penser. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}