/* ==========================================================================
   Composants. Un bloc par composant récurrent relevé dans le prototype.
   ========================================================================== */

/* --- En-tête --------------------------------------------------------------
   Mesuré : à 16 px, la barre occupe 1166 px sur 1280. À 18 px elle en occupe
   1230. On reste à 16 px — c'est le plancher accordé pour la navigation. */
.en-tete {
  position: sticky; top: 0; z-index: 30;   /* reste au-dessus du tiroir ouvert */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-8);
  padding: var(--esp-4) var(--esp-12);
  background: var(--creme-haut);
  border-bottom: var(--filet);
}
.en-tete__nav {
  display: flex;
  gap: 28px;
  font-size: var(--taille-nav);
  font-weight: var(--poids-medium);
}
/* 44 px de cible tactile, comme partout ailleurs. Le prototype ne les avait
   que sur les boutons ; pour un lectorat senior, un lien de navigation de
   26 px de haut se rate au doigt. */
.en-tete__nav a {
  display: inline-flex; align-items: center;
  min-height: var(--cible-tactile-min);
  color: var(--vert-profond); text-decoration: none;
}
.en-tete__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vert-coteau); }
.en-tete__actions { display: flex; align-items: center; gap: var(--esp-4); flex: none; }
.en-tete__logo { display: inline-flex; align-items: center; gap: var(--esp-3); min-height: var(--cible-tactile-min); text-decoration: none; flex: none; }
.en-tete__symbole { width: 40px; height: 40px; flex: none; }
/* Logotype provisoire. Le fichier de marque contient encore du texte vivant
   en Aesthet Nova : tant qu'il n'est pas réexporté en courbes, le nom est posé
   en Outfit plutôt que de rendre de fausses lettres chez les visiteurs. */
.en-tete__mot {
  display: inline-flex; align-items: center;
  min-height: var(--cible-tactile-min);
  font-family: var(--font-texte); font-size: var(--taille-h3);
  font-weight: var(--poids-semibold); letter-spacing: -0.01em;
  color: var(--vert-profond);
}

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile-min);
  padding: 0 var(--esp-6);
  border-radius: var(--rayon);
  font-family: var(--font-texte);          /* jamais Fraunces dans un bouton */
  font-size: var(--taille-nav);
  font-weight: var(--poids-medium);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.bouton--primaire   { background: var(--vert-coteau); color: var(--creme-calcaire); }
/* Dessiné pour se poser sur la photo du bandeau. Le filet le garde lisible
   tant que la photo n'est pas là, et ne se voit plus une fois dessus. */
.bouton--secondaire { background: var(--creme-calcaire); color: var(--vert-profond);
                      border-color: rgba(104, 112, 80, 0.4); }
.bouton--contour    { border-color: var(--vert-coteau); color: var(--vert-profond); background: transparent; }
.bouton--grand      { min-height: 52px; padding: 0 var(--esp-8); font-size: var(--taille-corps); font-weight: var(--poids-semibold); }

/* --- Bascule de langue ---------------------------------------------------- */
.bascule-langue { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--taille-legende); font-weight: var(--poids-semibold); }
.bascule-langue__actif,
.bascule-langue__autre {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile-min); min-width: var(--cible-tactile-min);
  padding: 0 var(--esp-2); border-radius: var(--rayon-petit);
}
.bascule-langue__actif { background: var(--vert-pale); }
.bascule-langue__autre { color: var(--vert-coteau); text-decoration: none; }

/* --- Pied de page ---------------------------------------------------------
   5 colonnes, miroir de la navigation. Mesuré : 211 px par colonne à 1280 px. */
.pied {
  background: var(--vert-profond);
  color: var(--creme-calcaire);
  padding: var(--esp-16) var(--esp-12) var(--esp-8);
  display: flex; flex-direction: column; gap: var(--esp-12);
  font-size: var(--taille-nav);
}
.pied a { color: var(--creme-calcaire); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__plan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-8); }
.pied__colonne { display: flex; flex-direction: column; }
.pied__colonne a { display: inline-flex; align-items: center; min-height: var(--cible-tactile-min); }
.pied__titre {
  font-size: var(--taille-legende); font-weight: var(--poids-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pied__milieu,
.pied__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-8); flex-wrap: wrap; }
.pied__milieu { padding-top: var(--esp-8); border-top: 1px solid rgba(242, 247, 228, 0.3); }
/* flex-wrap : les trois pastilles de réseaux débordaient sous 330 px, en
   provoquant un défilement horizontal de toute la page. */
.pied__reseaux { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.pied__reseaux a {
  display: inline-flex; align-items: center; min-height: var(--cible-tactile-min);
  padding: 0 var(--esp-5, 1.25rem); border-radius: var(--rayon);
  border: 1px solid rgba(242, 247, 228, 0.5);
}
.pied__langue { display: flex; align-items: center; gap: var(--esp-4); }
.pied__langue .bascule-langue__actif { background: var(--creme-calcaire); color: var(--vert-profond); }
.pied__langue .bascule-langue__autre { color: var(--creme-calcaire); border: 1px solid rgba(242, 247, 228, 0.5); border-radius: var(--rayon-petit); }
.pied__mentions { display: flex; gap: var(--esp-6); flex-wrap: wrap; }
.pied__mentions a { display: inline-flex; align-items: center; min-height: var(--cible-tactile-min); }

/* --- Tiroir mobile --------------------------------------------------------
   Masqué par défaut et révélé par menu.js : sans JavaScript, pas de bouton
   mort dans l'en-tête. */
.en-tete__bascule {
  display: none;
  width: var(--cible-tactile-min); height: var(--cible-tactile-min);
  flex: none; padding: 0;
  border: 0; border-radius: var(--rayon);
  background: var(--vert-coteau);
  cursor: pointer;
}
.en-tete__barres,
.en-tete__barres::before,
.en-tete__barres::after {
  display: block; width: 20px; height: 2px; margin: 0 auto;
  background: var(--creme-calcaire); content: "";
}
.en-tete__barres::before { transform: translateY(-6px); }
.en-tete__barres::after  { transform: translateY(4px); }

/* Tiroir ouvert : le bouton devient une croix, au même endroit et avec la
   même cible tactile. C'est le seul moyen de refermer à la souris. */
[aria-expanded="true"] .en-tete__barres { background: transparent; }
[aria-expanded="true"] .en-tete__barres::before { transform: rotate(45deg); }
[aria-expanded="true"] .en-tete__barres::after  { transform: rotate(-45deg) translateY(0); }
[aria-expanded="true"] .en-tete__barres::after  { margin-top: -2px; }

.tiroir {
  position: fixed; inset: 0; z-index: 20;
  /* L'en-tête reste visible au-dessus : on démarre sous lui. */
  padding: calc(var(--hauteur-entete) + var(--esp-4)) var(--esp-4) var(--esp-8);
  background: var(--creme-haut);
  overflow-y: auto;
}
.tiroir[hidden] { display: none; }
.tiroir__nav { display: flex; flex-direction: column; }
/* 24 px en Outfit 600 : c'est de la navigation. */
.tiroir__nav a {
  display: flex; align-items: center;
  min-height: 56px;
  font-size: var(--taille-h3);
  font-weight: var(--poids-semibold);
  color: var(--vert-profond);
  text-decoration: none;
  border-bottom: 1px solid rgba(104, 112, 80, 0.25);
}
.tiroir__nav a[aria-current="page"] { color: var(--vert-coteau); }
/* Sélecteur qualifié `.tiroir__nav a.tiroir__contact` (0,2,1) et non
   `.tiroir__contact` (0,1,0) : la règle de navigation `.tiroir__nav a` (0,1,1)
   la battait, et imposait sa couleur de texte au bouton. Résultat, vert profond
   sur vert coteau — 1,89:1, là où le RGAA demande 4,5:1. C'est aussi ce qui
   obligeait à un `!important` sur la bordure, désormais inutile. */
.tiroir__nav a.tiroir__contact {
  margin-top: var(--esp-6);
  border-bottom: 0;
  justify-content: center;
  color: var(--creme-calcaire);
}
body.tiroir-ouvert { overflow: hidden; }

/* Sous 400 px, le mot-symbole est retiré : il ne reste que le symbole, comme
   le cadre 390 px du proto. Le lien garde son intitulé par le texte caché, la
   marque n'est donc pas perdue pour un lecteur d'écran. À 18 px le mot tiendrait
   encore à 375 px mais plus à 360, et un en-tête qui déborde sur un téléphone
   courant n'est pas rattrapable au pixel près. */
@media (max-width: 400px) {
  .en-tete__mot { display: none; }
}

@media (max-width: 900px) {
  .en-tete { padding: var(--esp-3) var(--esp-4); gap: var(--esp-2); }
  .en-tete__nav { display: none; }        /* remplacée par le tiroir */
  /* Le bouton de contact déborderait à 375 px : il passe dans le tiroir. */
  .en-tete__contact { display: none; }
  .en-tete__bascule:not([hidden]) { display: block; }
  /* Le mot-symbole descend à 18 px. La règle d'origine visait
     `.en-tete__logo-provisoire`, une classe disparue à un renommage : elle
     ne s'appliquait plus, et le mot restait à 24 px — 7 px de débordement
     horizontal de l'en-tête à 375 px. */
  .en-tete__mot { font-size: var(--taille-corps); }
  .pied { padding: var(--esp-12) var(--esp-4) var(--esp-6); }
  .pied__plan { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
  .pied__milieu, .pied__bas { flex-direction: column; align-items: flex-start; }
}

/* --- Mise en page générale ------------------------------------------------ */
html { background: var(--creme-calcaire); }
main { min-height: 50vh; }

@media (max-width: 900px) {
}

/* --- Vignette et trames d’attente ------------------------------------------
   Partagées par le gabarit fiche (triptyque « À proximité ») et par le gabarit
   carte et liste. Elles vivent ici, et non dans une feuille de gabarit : une
   feuille de gabarit n’est chargée que sur son gabarit. */
/* --- Trame d'attente ---------------------------------------------------------
   Aucune photo n'est disponible avant plusieurs semaines. Plutôt qu'un aplat
   gris, on pose le motif de la charte : le filigrane en trame régulière sur
   aplat vert coteau. Le jour où une photo arrive, le champ image de Decap se
   remplit et l'<img> prend la place — aucun gabarit à retoucher. */
.trame,
.vignette__image,
.situer__carte,
.facade--attente {
  background-color: var(--vert-coteau);
  background-image: url("/statique/images/motifs/filigrane-blanc.svg");
  background-repeat: repeat;
  background-size: 96px auto;
  background-position: center;
}


.vignette {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
}
.vignette__image { height: 150px; }
.vignette__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vignette__corps { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.vignette__meta  { font-size: var(--taille-legende); color: var(--vert-coteau); }
/* 24 px en Outfit 600 — jamais en police d’affichage. */
.vignette__nom   { font-size: var(--taille-h3); }
.vignette__lien  { display: inline-flex; align-items: center; min-height: var(--cible-tactile-min); font-weight: var(--poids-medium); }

/* Toute la vignette est cliquable, et elle grandit au survol.
   Le lien « Voir la fiche » reste le SEUL lien de la carte : son ::after est
   étiré sur toute la vignette. Envelopper la carte entière dans un <a> ferait
   lire tout son contenu comme un intitulé de lien par un lecteur d'écran. */
.vignette { position: relative; transition: transform 160ms ease, box-shadow 160ms ease; }
.vignette__lien::after { content: ""; position: absolute; inset: 0; }
.vignette:has(.vignette__lien):hover,
.vignette:has(.vignette__lien):focus-within {
  transform: scale(1.03);
  box-shadow: var(--ombre-carte);
  z-index: 1;                      /* passe au-dessus des voisines en grandissant */
}
.vignette:has(.vignette__lien):hover .vignette__lien { text-decoration-thickness: 2px; }
/* Le contour de focus se pose sur la carte, puisque c'est elle la cible. */
.vignette:has(.vignette__lien:focus-visible) { outline: 3px solid var(--vert-profond); outline-offset: 3px; }
.vignette__lien:focus-visible { outline: none; }
/* Un lien secondaire dans la carte (crédit, etc.) doit rester atteignable. */
.vignette a:not(.vignette__lien) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .vignette { transition: none; }
  .vignette:has(.vignette__lien):hover,
  .vignette:has(.vignette__lien):focus-within { transform: none; }
}

/* --- Drapeau de contenu fictif --------------------------------------------- */
.drapeau-fictif {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  border: 1px dashed var(--alerte);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--alerte);
  font-size: var(--taille-legende);
}
.drapeau-fictif--vignette { padding: var(--esp-1) var(--esp-2); }

/* --- Champ de formulaire ---------------------------------------------------
   Composant partagé par tous les formulaires. Le corps reste à 18 px : un
   libellé de formulaire n'est pas une légende. */
.champ { display: flex; flex-direction: column; gap: var(--esp-2); }
.champ__libelle { font-size: var(--taille-corps); font-weight: var(--poids-medium); }
.champ__facultatif { font-weight: var(--poids-regular); color: var(--vert-coteau); }

.champ__saisie {
  min-height: 52px;
  padding: 0 var(--esp-4);
  border: 1px solid rgba(104, 112, 80, 0.4);
  border-radius: var(--rayon);
  background: var(--surface);
  font-family: var(--font-texte);   /* jamais la police d'affichage */
  font-size: var(--taille-corps);
  color: var(--vert-profond);
}
textarea.champ__saisie { padding: var(--esp-3) var(--esp-4); min-height: 8rem; line-height: var(--interligne-corps); }

.champ__radios { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.champ__radio,
.champ__consentement {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: var(--cible-tactile-min);
  cursor: pointer;
}
.champ__radio {
  padding: 0 var(--esp-4);
  border: 1px solid rgba(104, 112, 80, 0.4);
  border-radius: var(--rayon-pastille);
  background: var(--surface);
}
.champ__consentement { align-items: flex-start; max-width: var(--largeur-lecture); }
.champ__consentement input { margin-top: 0.4rem; }
.champ__radio input,
.champ__consentement input { width: 20px; height: 20px; flex: none; accent-color: var(--vert-coteau); }

.champ__aide { font-size: var(--taille-legende); color: var(--vert-coteau); max-width: var(--largeur-lecture); }

/* État d'erreur. La couleur ne porte JAMAIS l'information seule : le message
   écrit est toujours là, et aria-invalid le dit aux technologies d'assistance. */
.champ__erreur {
  display: flex; align-items: center; gap: var(--esp-2);
  font-size: var(--taille-corps);
  font-weight: var(--poids-medium);
  color: var(--alerte);
}
.champ__erreur[hidden] { display: none; }
.champ__erreur::before { content: "!"; flex: none;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--alerte); color: var(--surface);
  font-size: var(--taille-legende); line-height: 1.25rem; text-align: center; }
.champ--erreur .champ__saisie,
.champ--erreur .champ__radio { border: 2px solid var(--alerte); }

/* --- Résumé d'erreurs ------------------------------------------------------ */
.resume-erreurs {
  padding: var(--esp-6);
  border: 2px solid var(--alerte);
  border-radius: var(--rayon);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--esp-3);
  max-width: var(--largeur-lecture);
}
.resume-erreurs[hidden] { display: none; }
.resume-erreurs__titre { font-family: var(--font-texte); font-size: var(--taille-h3); color: var(--alerte); }
.resume-erreurs__liste { margin: 0; padding-left: var(--esp-6); display: grid; gap: var(--esp-2); }
.resume-erreurs__liste a { color: var(--alerte); }

/* --- Champ piège anti-spam -------------------------------------------------
   Masqué à l'œil sans display:none — certains robots ignorent ce qui n'est pas
   rendu. aria-hidden et tabindex="-1" (posés dans le gabarit) le retirent des
   technologies d'assistance et de l'ordre de tabulation : un humain ne peut pas
   le remplir par accident. */
.piege {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}