/* =========================================================
   ST Création Paysage — démonstration « image figée »
   CSS séparé, mobile-first, aucune dépendance externe.
   ========================================================= */

/* ---------- 0. Garde-fou ---------- */
/* Un élément portant l'attribut [hidden] doit rester invisible, quelle
   que soit la règle d'affichage qui le concerne par ailleurs. Sans ce
   garde-fou, une règle plus spécifique comme « .admin__etat {
   display: flex } » annule silencieusement l'attribut : le JavaScript
   croit masquer un écran, le navigateur continue de l'afficher, et
   tous les états se superposent. Vécu le 28/07/2026. */
[hidden] { display: none !important; }

/* ---------- 1. Jetons ---------- */
:root {
  /* Couleurs pipetées sur le logo */
  --encre:        #23261E;
  --encre-clair:  #3B4034;
  --ivoire:       #F5F2EA;
  --ivoire-creux: #EBE7DC;
  --orange:       #F2653B;
  --orange-fonce: #B94530;
  --blanc:        #FFFFFF;

  /* Typographie : piles système, zéro webfont à charger */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Rythme */
  --nav-h: 56px;
  --cadre: 10px;
  --gouttiere: 20px;
  --section-y: 64px;

  /* Mouvement — une seule courbe pour tout le site */
  --transition: 260ms cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px) {
  :root {
    --nav-h: 68px;
    --cadre: 16px;
    --gouttiere: 48px;
    --section-y: 104px;
  }
}

/* Le cadre peut être retiré (comparaison plein-bord) */
.sans-cadre { --cadre: 0px; }

/* ---------- 2. Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; }

a { color: inherit; }

/* Focus clavier visible partout, sans exception */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: var(--encre);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 14px;
}
.saut-contenu:focus { left: 8px; top: 8px; }

/* ---------- 3. Le cadre ---------- */
/* Calque inerte posé par-dessus : ne perturbe aucun flux. */
.cadre {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  border: var(--cadre) solid var(--encre);
  transition: border-width var(--transition);
}

/* ---------- 4. Navigation ---------- */
.nav {
  position: fixed;
  top: var(--cadre);
  left: var(--cadre);
  right: var(--cadre);
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--encre);
  border-bottom: 1px solid rgba(245, 242, 234, .14);
  transition: top var(--transition), left var(--transition), right var(--transition);
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img {
  height: 34px;
  width: auto;
  transition: transform var(--transition);
}
.nav__logo:hover img,
.nav__logo:focus-visible img { transform: scale(1.06); }

.nav__liens {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  position: relative;
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivoire);
  padding: 6px 0;
  transition: color var(--transition);
}

/* Soulignement orange qui se déploie depuis la gauche */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__lien:hover::after,
.nav__lien:focus-visible::after { transform: scaleX(1); }

/* Réseaux dans la nav : masqués en mobile (la place manque et
   le pied de page les porte déjà), visibles dès la tablette. */
.nav__reseaux {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.nav__reseaux a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ivoire);
  transition: color var(--transition), transform var(--transition);
}
.nav__reseaux a:hover,
.nav__reseaux a:focus-visible { color: var(--orange); transform: scale(1.12); }
.nav__reseaux svg { width: 21px; height: 21px; }

@media (min-width: 768px) {
  .nav__reseaux { display: flex; }
}

@media (min-width: 900px) {
  .nav { padding: 0 28px; }
  .nav__logo img { height: 42px; }
  .nav__liens { gap: 30px; }
  .nav__lien { font-size: 13px; }
}

/* ---------- 5. Le hero et son image figée ---------- */
/* Deux couches distinctes. Aucun background-attachment, aucun
   calcul au défilement : l'image est simplement immobile et le
   contenu opaque remonte par-dessus. */

.hero {
  position: relative;      /* repère pour le repli en absolute */
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--cadre) + 24px) var(--gouttiere) 56px;
}

.hero__media {
  position: fixed;         /* <- la mécanique tient dans cette ligne */
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La pergola est en portrait : on cale le cadrage sur la zone utile
     (pergola + bassin) pour que le recadrage desktop ne la coupe pas. */
  object-position: center 42%;
}

/* Voile : garantit le contraste quelle que soit la photo publiée */
.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(35, 38, 30, .58) 0%,
    rgba(35, 38, 30, .38) 38%,
    rgba(35, 38, 30, .88) 100%
  );
}

.hero__contenu { position: relative; max-width: 780px; }

.hero__surtitre {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivoire);
  opacity: .82;
  margin: 0 0 18px;
}

.hero__titre {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 8vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--blanc);
  text-wrap: balance;
  margin: 0 0 28px;
}

/* La marque vit DANS le h1 : un seul titre, mais qui porte
   à la fois le nom de l'entreprise et ce qu'elle fait. */
.hero__marque {
  display: block;
  font-family: var(--mono);
  font-size: clamp(.78rem, 2.6vw, .95rem);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.2;
  margin-bottom: 14px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 6 bis. Indicateur de défilement ---------- */
/* Discret à dessein : un trait fin, pas un bouton — l'œil doit le
   remarquer sans qu'il concurrence les CTA du hero. */
.hero__indice {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: rgba(245, 242, 234, .78);
  animation: respirer-indice 2.6s ease-in-out infinite;
  transition: color var(--transition), opacity var(--transition);
}
.hero__indice:hover,
.hero__indice:focus-visible { color: var(--orange); }
.hero__indice svg { width: 20px; height: 10px; }

@keyframes respirer-indice {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (min-width: 900px) { .hero__indice { bottom: 36px; } }

/* ---------- 6. Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              color var(--transition), border-color var(--transition);
}
.bouton:hover { transform: scale(1.035); }

.bouton--plein {
  background: var(--orange);
  color: var(--encre);
}
.bouton--plein:hover { background: var(--orange-fonce); color: var(--blanc); }

.bouton--contour {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, .55);
}
.bouton--contour:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--blanc);
}

/* Sur fond clair */
.bouton--sombre {
  background: var(--encre);
  color: var(--ivoire);
  align-self: flex-start;
}
.bouton--sombre:hover { background: var(--orange-fonce); color: var(--blanc); }

.bouton svg { width: 16px; height: 16px; flex: none; }

/* ---------- 7. La feuille de contenu ---------- */
/* Fond opaque : c'est elle qui recouvre l'image figée. */
.feuille {
  position: relative;
  z-index: 2;
  background: var(--ivoire);
  border-top: 2px solid var(--orange);   /* la couture */
}

.section { padding: var(--section-y) var(--gouttiere); }
.section--creux { background: var(--ivoire-creux); }

/* Les ancres s'arrêtent sous la nav fixe, pas dessous */
.feuille, .section, .pied { scroll-margin-top: calc(var(--nav-h) + var(--cadre)); }

.section__oeil {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-fonce);
  margin: 0 0 14px;
}

.section__titre {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.section__texte {
  max-width: 62ch;
  margin: 0 0 36px;
  color: #414539;
}

.section__texte:last-child { margin-bottom: 0; }

/* ---------- 8. Prestations ---------- */
.prestations {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(35, 38, 30, .16);
}
.prestations li {
  border-bottom: 1px solid rgba(35, 38, 30, .16);
  padding: 16px 0;
  font-family: var(--serif);
  font-size: 1.2rem;
}
.prestations span {
  display: block;
  font-family: var(--sans);
  font-size: .92rem;
  color: #5B6053;
  margin-top: 2px;
}

@media (min-width: 760px) {
  .prestations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
  }
}

/* ---------- 9. Grille de chantiers ---------- */
.chantiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) { .chantiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .chantiers { grid-template-columns: repeat(3, 1fr); } }

.carte {
  margin: 0;
  background: var(--encre);
}

.carte__cadre {
  overflow: hidden;         /* indispensable au recadrage du zoom */
  aspect-ratio: 4 / 3;
}

.carte__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}

.carte:hover .carte__cadre img,
.carte:focus-within .carte__cadre img { transform: scale(1.05); }

.carte figcaption {
  padding: 12px 14px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ivoire);
}
.carte figcaption b {
  display: block;
  font-weight: 400;
  color: var(--orange);
  margin-bottom: 3px;
}

/* ---------- 9 bis. FAQ (accordéon natif, sans JS) ---------- */
.faq {
  margin: 0;
  border-top: 1px solid rgba(35, 38, 30, .16);
}

.faq__item { border-bottom: 1px solid rgba(35, 38, 30, .16); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--encre);
}
/* Retire le triangle par défaut du navigateur, sur tous les moteurs */
.faq__question::marker,
.faq__question::-webkit-details-marker { display: none; }

/* Chevron : pilote uniquement par l'attribut [open] — CSS pur,
   fonctionne même si le site tourne sans JavaScript du tout. */
.faq__icone {
  flex: none;
  width: 12px;
  height: 12px;
  position: relative;
}
.faq__icone::before,
.faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--orange-fonce);
  transform: translate(-50%, -50%);
  transition: transform var(--transition);
}
.faq__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icone::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__reponse { padding: 0 32px 22px 0; }
.faq__reponse > p { margin: 0; color: #414539; }

/* ---------- 10. Bandeau de communes ---------- */
/* Mobile : liste qui s'enroule, entièrement lisible et indexable.
   Tablette et desktop : la même liste défile en boucle. */
.bandeau {
  border-bottom: 1px solid rgba(35, 38, 30, .14);
  background: var(--ivoire);
  /* Mobile : une ligne qu'on fait défiler au doigt, pas un bloc replié.
     Le fondu sur les bords est l'indice visuel qu'il y a plus à voir —
     pas besoin d'une flèche ou d'un texte d'aide. */
  padding: 16px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.bandeau::-webkit-scrollbar { display: none; }

.bandeau__piste {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  /* Le padding fait office de marge de respiration au début/fin du
     glissement — impossible d'utiliser la marge du conteneur, qui
     casserait le fondu. */
  padding: 0 var(--gouttiere);
  gap: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4A4F42;
  white-space: nowrap;
}
.bandeau__piste li::after {
  content: "·";
  margin: 0 11px;
  color: var(--orange);
}
.bandeau__piste li:last-child::after { content: ""; margin: 0; }

/* La copie décorative n'existe que pour la boucle : inutile en mobile */
.bandeau__piste[aria-hidden="true"] { display: none; }

@media (min-width: 768px) {
  .bandeau {
    display: flex;
    overflow: hidden;
    padding: 20px 0;
    -webkit-overflow-scrolling: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .bandeau__piste {
    flex-wrap: nowrap;
    flex: none;
    gap: 0;
    padding: 0;
    animation: defile 46s linear infinite;
  }
  .bandeau__piste[aria-hidden="true"] { display: flex; }
  .bandeau__piste li { white-space: nowrap; }
  .bandeau__piste li:last-child::after { content: "·"; margin: 0 11px; }
  .bandeau:hover .bandeau__piste { animation-play-state: paused; }
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- 10 bis. Zone d'intervention ---------- */
.zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.zone__carte svg {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin: 0 auto;
  display: block;
}

.zone__anneaux circle {
  fill: none;
  stroke: rgba(35, 38, 30, .18);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.zone__anneaux .zone__limite {
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: none;
}

.zone__graduations text {
  font-family: var(--mono);
  font-size: 13px;
  fill: rgba(35, 38, 30, .42);
}

.zone__reperes circle { fill: #6B7060; }
.zone__reperes text {
  font-family: var(--mono);
  font-size: 15px;
  fill: #414539;
}

.zone__centre circle { fill: var(--orange); }
.zone__centre text {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .12em;
  fill: var(--encre);
}

@media (min-width: 900px) {
  .zone { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .zone__carte svg { max-width: none; }
}

/* ---------- 11. Pied de page ---------- */
.pied {
  position: relative;
  z-index: 2;
  background: var(--encre);
  color: var(--ivoire);
  padding: 44px var(--gouttiere) 28px;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}

/* Le logo occupe toute la hauteur de la colonne, calé à gauche :
   centré, il aurait ressemblé à n'importe quel pied de page. */
.pied__marque {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.pied__marque img {
  height: auto;
  width: 100%;
  max-width: 240px;
}

.pied__infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pied__ligne {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
}
.pied__ligne a { color: var(--ivoire); text-decoration: none; border-bottom: 1px solid rgba(245,242,234,.3); }
.pied__ligne a:hover { color: var(--orange); border-color: var(--orange); }

.pied__reseaux {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.pied__reseaux a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ivoire);
  border: 1px solid rgba(245, 242, 234, .26);
  border-radius: 50%;
  transition: color var(--transition), border-color var(--transition),
              transform var(--transition);
}
.pied__reseaux a:hover,
.pied__reseaux a:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  transform: scale(1.08);
}
.pied__reseaux svg { width: 22px; height: 22px; }

.pied__bas {
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 242, 234, .14);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  opacity: .6;
}
.pied__bas a { color: var(--ivoire); text-decoration: underline; text-underline-offset: 2px; }
.pied__bas a:hover { color: var(--orange); }

@media (min-width: 760px) {
  .pied { padding: 64px var(--gouttiere) 32px; }
  .pied__grille {
    grid-template-columns: minmax(180px, 30%) 1fr;
    gap: 56px;
    min-height: 210px;
  }
  /* Le logo REMPLIT la hauteur de la rangée au lieu de la dicter */
  .pied__marque { height: 100%; }
  .pied__marque img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
}

/* ---------- 12. Retour en haut ---------- */
.haut {
  position: fixed;
  right: calc(var(--cadre) + 14px);
  bottom: calc(var(--cadre) + 14px);
  z-index: 46;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--encre);
  color: var(--ivoire);
  border: 1px solid rgba(245, 242, 234, .28);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background var(--transition);
}
.haut.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.haut:hover { background: var(--orange); color: var(--encre); }
.haut svg { width: 17px; height: 17px; }

/* ---------- 13. Panneau de démonstration (à retirer en production) ---------- */
.demo {
  position: fixed;
  left: calc(var(--cadre) + 10px);
  bottom: calc(var(--cadre) + 10px);
  z-index: 46;
  background: rgba(35, 38, 30, .94);
  border: 1px solid rgba(245, 242, 234, .22);
  color: var(--ivoire);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  max-width: 220px;
}
.demo p { margin: 0 0 9px; opacity: .6; letter-spacing: .06em; text-transform: uppercase; }
.demo label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; }
.demo input { accent-color: var(--orange); }

/* Repère invisible pour piloter le bouton retour-en-haut
   sur les pages qui n'ont pas de hero. */
main { position: relative; }
.sentinelle-haut {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

/* ---------- 15. Espace admin ---------- */
.corps-admin { background: var(--ivoire); }

.nav__etiquette {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}

.nav__session {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ivoire);
}
.nav__session-email { opacity: .75; }
.nav__session-deconnexion {
  background: transparent;
  border: 1px solid rgba(245, 242, 234, .4);
  color: var(--ivoire);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  transition: border-color var(--transition), color var(--transition);
}
.nav__session-deconnexion:hover { border-color: var(--orange); color: var(--orange); }

.admin {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--cadre) + 48px) var(--gouttiere) 80px;
}

.admin__etat { display: flex; min-height: 60vh; align-items: center; justify-content: center; text-align: center; }
.admin__etat-contenu { max-width: 480px; }
.admin__etat .bouton { margin-top: 8px; }

/* Formulaires de connexion et de mot de passe : alignés à gauche à
   l'intérieur d'un bloc centré — un champ de saisie centré se remplit
   mal du regard. */
.admin__formulaire-auth {
  margin-top: 28px;
  text-align: left;
}
.admin__formulaire-auth .champ { margin-bottom: 18px; }
.admin__formulaire-auth .bouton { width: 100%; justify-content: center; }
.admin__formulaire-auth .admin__statut { margin-top: 14px; text-align: center; }

.admin__lien-discret {
  margin-top: 18px;
  background: none;
  border: none;
  padding: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--encre-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.admin__lien-discret:hover { color: var(--orange-fonce); }

.admin__onglets {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(35, 38, 30, .16);
  margin-bottom: 40px;
}
.admin__onglet {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 4px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6B7060;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.admin__onglet.est-actif { color: var(--encre); border-color: var(--orange); }

.admin__titre-section {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 20px;
}

/* --- Formulaire (photos et structure de champ générique) --- */
.admin__formulaire {
  background: var(--blanc);
  border: 1px solid rgba(35, 38, 30, .12);
  padding: 28px;
  margin-bottom: 48px;
}

.champ { margin-bottom: 20px; }
.champ label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.champ__optionnel { color: #8A8F80; text-transform: none; letter-spacing: 0; }
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="password"],
.champ textarea,
.champ input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(35, 38, 30, .25);
  background: var(--ivoire);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--encre);
}
.champ input:focus-visible,
.champ textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.champ textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
.champ__aide { margin: 6px 0 0; font-size: 12.5px; color: #6B7060; }

.admin__apercu { margin-bottom: 20px; }
.admin__apercu img { max-width: 220px; border: 1px solid rgba(35, 38, 30, .16); }

.admin__statut {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: #3B7A4A;
  min-height: 1.4em;
}
.admin__statut--erreur { color: #B23A2E; }

/* --- Grille de gestion des photos --- */
.admin__vide { color: #6B7060; font-family: var(--mono); font-size: 13px; }

.admin__grille-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.admin__carte-photo {
  background: var(--blanc);
  border: 1px solid rgba(35, 38, 30, .12);
}
.admin__carte-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.admin__carte-photo-legende {
  padding: 10px 12px 0;
  font-size: 13px;
  color: #414539;
  margin: 0;
}
.admin__carte-photo-supprimer {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  background: none;
  border: none;
  border-top: 1px solid rgba(35, 38, 30, .12);
  color: #B23A2E;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.admin__carte-photo-supprimer:hover { background: rgba(178, 58, 46, .08); }

/* --- Éditeur de FAQ --- */
.admin__liste-faq { margin-bottom: 20px; }
.admin__ligne-faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--blanc);
  border: 1px solid rgba(35, 38, 30, .12);
  padding: 16px;
  margin-bottom: 12px;
}
.admin__champ-faq {
  width: 100%;
  border: 1px solid rgba(35, 38, 30, .25);
  background: var(--ivoire);
  padding: 9px 11px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--encre);
}
.admin__champ-faq--reponse { min-height: 70px; resize: vertical; }
.admin__champ-faq:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.admin__ligne-faq-supprimer {
  justify-self: start;
  background: none;
  border: none;
  padding: 4px 0;
  color: #B23A2E;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.bouton--contour-sombre {
  background: transparent;
  color: var(--encre);
  border-color: rgba(35, 38, 30, .35);
}
.bouton--contour-sombre:hover { background: rgba(35, 38, 30, .06); border-color: var(--encre); }

.admin__actions-faq {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(35, 38, 30, .16);
}

@media (min-width: 640px) {
  .admin__ligne-faq { grid-template-columns: 1fr 1fr auto; align-items: start; }
  .admin__ligne-faq-supprimer { align-self: center; }
}
.page-legale { max-width: 74ch; }

.page-legale__bloc { margin-bottom: 40px; }
.page-legale__bloc:last-child { margin-bottom: 0; }

.page-legale__bloc h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 0 12px;
}

.page-legale__bloc p {
  margin: 0 0 12px;
  color: #414539;
}
.page-legale__bloc p:last-child { margin-bottom: 0; }

.page-legale__bloc a { color: var(--orange-fonce); }

/* ---------- 14 ter. Mouvement réduit ---------- */
/* Repli complet : l'image redevient solidaire du hero et défile
   normalement. Aucun mouvement relatif, aucun défilement animé. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media { position: absolute; }
  .bandeau__piste { animation: none !important; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Le mobile n'a pas d'animation automatique (défilement au doigt =
   geste de l'utilisateur, pas un mouvement à neutraliser) : seul le
   repli desktop/tablette (marquee en boucle) a besoin d'un remplacement
   statique. */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .bandeau__piste[aria-hidden="true"] { display: none !important; }
  .bandeau { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .bandeau__piste { flex-wrap: wrap; padding: 0; }
}

/* Même repli, déclenché manuellement pour la démonstration */
.mouvement-reduit { scroll-behavior: auto; }
.mouvement-reduit .hero__media { position: absolute; }
.mouvement-reduit .carte__cadre img { transition: none; }
.mouvement-reduit .carte:hover .carte__cadre img { transform: none; }
.mouvement-reduit .bandeau__piste { animation: none; }

@media (min-width: 768px) {
  .mouvement-reduit .bandeau { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mouvement-reduit .bandeau__piste { flex-wrap: wrap; padding: 0; }
  .mouvement-reduit .bandeau__piste[aria-hidden="true"] { display: none; }
}


/* ---------- Formulaire de contact ---------- */

.formulaire { margin-top: 32px; max-width: 720px; }

/* Deux colonnes dès qu'il y a la place : quatre champs courts empilés
   donnent une impression de questionnaire interminable. */
.formulaire__grille { display: grid; gap: 0 24px; }
@media (min-width: 640px) {
  .formulaire__grille { grid-template-columns: 1fr 1fr; }
}

.formulaire .bouton { margin-top: 4px; }

.formulaire__mention {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: #6B7060;
  max-width: 46ch;
}
.formulaire__mention a { text-decoration: underline; text-underline-offset: 2px; }

/* Leurre anti-robot. Volontairement pas [hidden] ni display:none via une
   classe utilitaire : le champ doit rester dans le document et être
   envoyé avec le formulaire. Il est simplement sorti du flux visuel et
   du parcours au clavier. */
.leurre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien vers l'espace d'administration : présent pour qui le cherche,
   discret pour les autres. */
.pied__admin { opacity: .55; }
.pied__admin:hover, .pied__admin:focus-visible { opacity: 1; }