/* ==========================================================================
   AERIAL POLE — Feuille de styles unique du site
   --------------------------------------------------------------------------
   Le fichier est rangé dans le même ordre que la page, du haut vers le bas.
   Pour retrouver un style : cherche le nom de la section dans les grands
   titres en commentaire ci-dessous.

   Les couleurs ne sont JAMAIS écrites en dur dans le reste du fichier :
   elles passent toutes par les variables déclarées juste en dessous.
   Changer une couleur du site = changer une seule ligne ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE ET RÉGLAGES GÉNÉRAUX
   -------------------------------------------------------------------------- */

:root {
  --vert-fonce: #3D4A33;    /* titres, fonds forts, boutons principaux */
  --vert-sauge: #7D8C6A;    /* accents, pastilles, icônes, sur-titres */
  --vert-clair: #A8B597;    /* survols, texte secondaire sur fond vert */
  --beige-sable: #D9C7AC;   /* accents chauds, séparateurs */
  --beige-clair: #EFE6D8;   /* fonds de sections alternées */
  --creme: #FAF6EF;         /* fond principal */
  --texte: #2C3327;         /* texte courant */
  --blanc-casse: #FFFDF9;   /* cartes, texte sur fond vert */
  --rouge-erreur: #a03a2c;  /* messages d'erreur du formulaire */

  /* Traits et voiles réutilisés à plusieurs endroits */
  --trait-clair: 1px solid rgba(61, 74, 51, 0.08);
  --trait-sur-vert: 1px solid rgba(255, 253, 249, 0.14);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compense la hauteur du bandeau collant quand on clique sur un lien d'ancre */
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: var(--vert-sauge);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--vert-fonce); }

input, select, textarea, button { font-family: inherit; }

/* Contour visible quand on navigue au clavier (accessibilité) */
:focus-visible {
  outline: 2px solid var(--vert-sauge);
  outline-offset: 3px;
}
.section--vert :focus-visible,
.pied :focus-visible,
.lightbox :focus-visible { outline-color: var(--vert-clair); }

/* Lien « Aller au contenu » : invisible, apparaît à la première tabulation */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
}
.lien-evitement:focus {
  left: 0;
  color: var(--creme);
}

/* Petite flèche flottante du bas du hero */
@keyframes ap-flottement {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}

/* --------------------------------------------------------------------------
   2. BLOCS DE SECTION RÉUTILISABLES
   -------------------------------------------------------------------------- */

.section { padding: clamp(76px, 9vw, 132px) 24px; }
.section--creme { background: var(--creme); }
.section--beige { background: var(--beige-clair); }
.section--vert  { background: var(--vert-fonce); color: var(--blanc-casse); }

.conteneur { max-width: 1120px; margin: 0 auto; }
.conteneur--etroit  { max-width: 900px; }   /* tarifs, préjugés, conseils */
.conteneur--faq     { max-width: 820px; }
.conteneur--contact { max-width: 1080px; }

/* En-tête centré d'une section : sur-titre + titre + chapô */
.entete-section { text-align: center; }
.entete-section--large  { max-width: 720px; margin: 0 auto 56px; }
.entete-section--moyen  { max-width: 680px; margin: 0 auto 56px; }
.entete-section--simple { margin-bottom: 48px; }
.entete-section--haut   { margin-bottom: 52px; }

.sur-titre {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--vert-sauge);
  font-weight: 500;
  margin: 0 0 14px;
}
.sur-titre--clair { color: var(--vert-clair); }

.titre-section {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  color: var(--vert-fonce);
  line-height: 1.1;
  margin: 0 0 22px;
}
.titre-section--sur-vert { color: var(--blanc-casse); }
.titre-section--fin        { margin-bottom: 0; }    /* quand rien ne suit */
.titre-section--rapproche  { margin-bottom: 18px; }
.titre-section--serre      { margin-bottom: 16px; }

.chapo { font-size: 1.08rem; margin: 0; }
.chapo--centre { max-width: 560px; margin: 0 auto; }
.chapo strong { font-weight: 500; color: var(--vert-fonce); }

/* Motif de feuillage en filigrane, purement décoratif */
.feuillage { position: absolute; pointer-events: none; }
.feuillage--concept  { top: -30px; right: -30px; opacity: 0.28; }
.feuillage--prejuges { bottom: -40px; left: -40px; opacity: 0.35; }

/* --------------------------------------------------------------------------
   3. BOUTONS
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  border-radius: 999px;
  text-align: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Bouton plein vert foncé, utilisé dans l'en-tête, la section À propos et le formulaire */
.bouton--plein {
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 11px 22px;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.bouton--plein:hover { background: var(--vert-sauge); color: var(--blanc-casse); }

/* Version grand format du bouton plein (encart À propos) */
.bouton--plein-large {
  padding: 15px 30px;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

/* Boutons du hero : la photo est sombre, on inverse les couleurs */
.bouton--hero-clair {
  background: var(--creme);
  color: var(--vert-fonce);
  padding: 17px 34px;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.bouton--hero-clair:hover { background: var(--beige-sable); color: var(--vert-fonce); }

.bouton--hero-contour {
  background: rgba(44, 51, 39, 0.25);
  color: var(--blanc-casse);
  padding: 17px 32px;
  border: 1.5px solid rgba(255, 253, 249, 0.7);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.bouton--hero-contour:hover {
  background: var(--blanc-casse);
  border-color: var(--blanc-casse);
  color: var(--vert-fonce);
}

/* --------------------------------------------------------------------------
   4. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--trait-clair);
}
.entete__interieur {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.entete__logo { display: flex; align-items: center; }
.entete__logo img { height: 46px; width: auto; }

.nav-bureau { display: flex; align-items: center; gap: 34px; }
/* Le :not(.bouton) est indispensable : le CTA « Réserver mon premier cours »
   est un lien situé dans la navigation. Sans cette exclusion, cette règle
   l'emporterait sur .bouton--plein et son texte s'afficherait en sombre
   sur le fond vert foncé, donc illisible. */
.nav-bureau a:not(.bouton) {
  color: var(--texte);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

/* Bouton burger : masqué sur grand écran, affiché en dessous de 920px */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--vert-fonce);
  cursor: pointer;
}

/* Menu plein écran du mobile */
.menu-mobile {
  position: fixed;
  inset: 74px 0 0 0;
  z-index: 49;
  background: var(--creme);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile a:not(.bouton) {
  color: var(--vert-fonce);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  padding: 12px 0;
  border-bottom: var(--trait-clair);
}
.menu-mobile .bouton {
  margin-top: 18px;
  border-bottom: none;
  font-family: 'Jost', sans-serif;
  padding: 16px;
  font-size: 1rem;
}

@media (max-width: 920px) {
  .nav-bureau { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 921px) {
  .menu-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   5. HERO (grande image d'accueil)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Voile sombre pour que le texte blanc reste lisible sur la photo */
.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(44, 51, 39, 0.52) 0%,
    rgba(44, 51, 39, 0.34) 40%,
    rgba(44, 51, 39, 0.62) 100%);
}
.hero__contenu {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 120px 24px 96px;
  text-align: center;
}
.hero__manuscrit {
  font-family: 'Parisienne', cursive;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--beige-sable);
  margin: 0 0 6px;
}
.hero__titre {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.04;
  color: var(--blanc-casse);
  margin: 0 0 22px;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 24px rgba(44, 51, 39, 0.35);
}
.hero__texte {
  max-width: 560px;
  margin: 0 auto 38px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--blanc-casse);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.hero__fleche {
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 2;
  color: var(--blanc-casse);
  animation: ap-flottement 2.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. BANDEAU DE RÉASSURANCE
   -------------------------------------------------------------------------- */

.reassurance { background: var(--vert-fonce); padding: 44px 24px; }
.reassurance__grille {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}
.reassurance__item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--blanc-casse);
  justify-content: center;
  text-align: left;
}
.reassurance__item span { font-size: 0.98rem; line-height: 1.35; }
.reassurance__item strong { font-weight: 500; }
.reassurance__item svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   7. SECTION « LE CONCEPT »
   -------------------------------------------------------------------------- */

/* overflow caché : le motif de feuillage dépasse volontairement du cadre,
   sans cela il ferait défiler la page vers la droite sur mobile */
.section--concept { position: relative; overflow: hidden; }
.section--concept .conteneur { position: relative; }

.grille-concept {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-bottom: 44px;
}
.carte {
  background: var(--blanc-casse);
  border-radius: 24px;
  padding: 30px;
}
.carte h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--vert-fonce);
  margin: 0 0 10px;
}
.carte p { margin: 0; font-size: 0.98rem; }

/* Encart « Et s'il pleut ? » : texte à gauche, photo à droite */
.encart-pluie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 56px;
}
.encart-pluie__texte {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 30px;
}
.encart-pluie__texte svg { flex-shrink: 0; }
.encart-pluie__texte p { margin: 0; font-size: 1.02rem; flex: 1; min-width: 200px; }
.encart-pluie__texte strong { font-weight: 600; }
.encart-pluie img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. GALERIE PHOTO ET AGRANDISSEMENT (LIGHTBOX)
   -------------------------------------------------------------------------- */

.galerie-mention {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--vert-sauge);
}
.galerie-mention span {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Mosaïque à 3 colonnes fixes : la première photo occupe 2x2 cases */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.galerie__item {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  display: block;
  transition: box-shadow .25s ease;
}
.galerie__item:hover { box-shadow: 0 18px 40px -22px rgba(61, 74, 51, 0.65); }
.galerie__item--grand {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.galerie__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandeau de légende, toujours visible (le survol n'existe pas sur mobile) */
.galerie__legende {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(44, 51, 39, 0) 0%, rgba(44, 51, 39, 0.78) 100%);
  color: var(--blanc-casse);
  font-size: 0.86rem;
  text-align: left;
}
.galerie__legende svg { flex-shrink: 0; }
.galerie__item--grand .galerie__legende {
  gap: 12px;
  padding: 16px 18px;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie__item {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 440px) {
  .galerie { grid-template-columns: 1fr; }
}

/* Photo agrandie en plein écran */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(44, 51, 39, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox[hidden] { display: none; }
.lightbox__fermer {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 249, 0.15);
  color: var(--blanc-casse);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  object-fit: contain;
}
.lightbox figcaption {
  color: var(--blanc-casse);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   9. SECTION « LES COURS »
   -------------------------------------------------------------------------- */

.grille-cours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.carte-cours {
  background: var(--blanc-casse);
  border: var(--trait-clair);
  border-radius: 28px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
/* La carte du milieu est mise en avant en vert foncé */
.carte-cours--vedette {
  background: var(--vert-fonce);
  color: var(--blanc-casse);
  border: none;
}
.carte-cours h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.85rem;
  color: var(--vert-fonce);
  margin: 0 0 4px;
}
.carte-cours--vedette h3 { color: var(--blanc-casse); }
.carte-cours__format {
  margin: 0 0 20px;
  color: var(--vert-sauge);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
}
.carte-cours--vedette .carte-cours__format { color: var(--vert-clair); }
.carte-cours__texte { margin: 0; font-size: 1rem; }

/* --------------------------------------------------------------------------
   10. SECTION « TARIFS »
   -------------------------------------------------------------------------- */

.carte-tarifs {
  background: var(--blanc-casse);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(61, 74, 51, 0.4);
}
.ligne-tarif {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 30px;
  border-bottom: var(--trait-clair);
}
.ligne-tarif:last-child { border-bottom: none; }
.ligne-tarif__libelle { font-size: 1.05rem; }
.ligne-tarif__precision { color: var(--vert-sauge); font-size: 0.9rem; }
.ligne-tarif__prix {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  color: var(--vert-fonce);
  font-weight: 500;
  white-space: nowrap;
}
.ligne-tarif__unite {
  font-size: 0.9rem;
  font-family: 'Jost', sans-serif;
  color: var(--vert-sauge);
}

/* Carte des tarifs étudiants, volontairement mise en avant en vert foncé */
.carte-etudiants {
  margin-top: 22px;
  background: var(--vert-fonce);
  color: var(--blanc-casse);
  border-radius: 28px;
  padding: 30px;
}
.carte-etudiants__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.carte-etudiants h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0;
}
.carte-etudiants .ligne-tarif { padding: 14px 0; border-bottom: none; }
.carte-etudiants .ligne-tarif__precision { color: var(--vert-clair); }
.carte-etudiants .ligne-tarif__prix { color: var(--blanc-casse); }
.carte-etudiants__precision { margin: 16px 0 0; font-size: 0.92rem; color: var(--vert-clair); }

.note-tarifs {
  text-align: center;
  margin: 26px 0 0;
  font-size: 0.86rem;
  color: var(--vert-sauge);
}

/* --------------------------------------------------------------------------
   11. SECTION « À PROPOS »
   -------------------------------------------------------------------------- */

.grille-apropos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
/* Le portrait reste visible pendant qu'on fait défiler le texte */
.apropos__portrait { position: sticky; top: 100px; }
.apropos__cadre {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
}
.apropos__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 30%;
}
.apropos__titre {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--vert-fonce);
  line-height: 1.12;
  margin: 0 0 26px;
}
.apropos__chapo { font-size: 1.12rem; color: var(--vert-fonce); margin: 0 0 22px; }
.apropos__texte p { margin: 0 0 18px; }
.apropos__texte strong { font-weight: 500; color: var(--vert-fonce); }
.apropos__sous-titre {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--vert-fonce);
  margin: 38px 0 20px;
}
.liste-atouts { display: flex; flex-direction: column; gap: 16px; }
.atout { display: flex; gap: 16px; align-items: flex-start; }
.atout__puce {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert-sauge);
  margin-top: 9px;
}
.atout p { margin: 0; }
.atout strong { font-weight: 600; color: var(--vert-fonce); }

.encart-cta {
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--beige-clair);
  border-radius: 24px;
}
.encart-cta p {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--vert-fonce);
}

@media (max-width: 700px) {
  /* En dessous de deux colonnes, le portrait ne doit plus rester collé */
  .apropos__portrait { position: static; }
}

/* --------------------------------------------------------------------------
   12. SECTION « LES PRÉJUGÉS »
   -------------------------------------------------------------------------- */

.section--prejuges { position: relative; overflow: hidden; }
.section--prejuges .conteneur { position: relative; }

.liste-prejuges { display: flex; flex-direction: column; gap: 2px; }
.prejuge { padding: 22px 4px; border-bottom: var(--trait-sur-vert); }
.prejuge:last-child { border-bottom: none; }
.prejuge p { margin: 0; font-size: 1.08rem; }
.prejuge strong { font-weight: 600; color: var(--vert-clair); }

/* --------------------------------------------------------------------------
   13. SECTION « 5 CONSEILS »
   -------------------------------------------------------------------------- */

.liste-conseils { display: flex; flex-direction: column; gap: 18px; }
.conseil {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--blanc-casse);
  border-radius: 24px;
  padding: 26px 28px;
}
.conseil__numero {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vert-sauge);
  color: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 500;
}
.conseil p { margin: 0; }
.conseil strong { font-weight: 600; color: var(--vert-fonce); }

/* --------------------------------------------------------------------------
   14. FAQ (accordéon)
   -------------------------------------------------------------------------- */

.liste-faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--blanc-casse);
  border-radius: 20px;
  padding: 6px 24px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--vert-fonce);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
/* Masque la petite flèche par défaut du navigateur, remplacée par notre « + » */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__plus {
  color: var(--vert-sauge);
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item p { margin: 0 0 20px; font-size: 1rem; }

/* --------------------------------------------------------------------------
   15. SECTION « CONTACT ET RÉSERVATION »
   -------------------------------------------------------------------------- */

.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: start;
}

.formulaire {
  background: var(--blanc-casse);
  border: var(--trait-clair);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.champs-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}
.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--vert-fonce);
  letter-spacing: 0.02em;
}
.champ input,
.champ select,
.champ textarea {
  padding: 13px 14px;
  border: 1px solid rgba(61, 74, 51, 0.2);
  border-radius: 12px;
  background: var(--creme);
  font-size: 1rem;
  color: var(--texte);
}
.champ textarea { resize: vertical; }
.champ__consigne {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--vert-sauge);
  letter-spacing: 0;
  line-height: 1.5;
}
/* Message d'erreur affiché sous le champ concerné */
.erreur { color: var(--rouge-erreur); font-size: 0.8rem; }
/* Le champ en erreur est aussi souligné en rouge, pas seulement par le texte */
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--rouge-erreur); }

.champ-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
}
.champ-consentement input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #3D4A33;
}
.lien-confidentialite { color: var(--vert-sauge); text-decoration: underline; }

/* Champ piège anti-robot : invisible pour les visiteurs */
.pot-de-miel { display: none; }

.message-envoi { border-radius: 14px; padding: 16px 18px; font-size: 0.95rem; }
.message-envoi[hidden] { display: none; }
.message-envoi--succes { background: var(--vert-clair); color: var(--vert-fonce); }
.message-envoi--echec  { background: #f4e2de; color: var(--rouge-erreur); }
.message-envoi strong { font-weight: 600; }
.message-envoi a { color: inherit; text-decoration: underline; }

.bouton-envoyer {
  background: var(--vert-fonce);
  color: var(--creme);
  border: none;
  padding: 17px;
  border-radius: 999px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .25s ease;
}
.bouton-envoyer:hover { background: var(--vert-sauge); }
.bouton-envoyer[disabled] { opacity: 0.6; cursor: progress; }

/* Colonne de droite : réseaux, email, lieu */
.colonne-contact { display: flex; flex-direction: column; gap: 24px; }
.bloc-contact { border-radius: 28px; padding: 32px; }
.bloc-contact--vert { background: var(--vert-fonce); color: var(--blanc-casse); }
.bloc-contact--beige { background: var(--beige-clair); }
.bloc-contact--vert h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.bloc-contact__intro { margin: 0 0 22px; font-size: 0.95rem; color: var(--vert-clair); }
.bloc-contact__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bloc-contact__entete h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--vert-fonce);
  margin: 0;
}
.bloc-contact__principal { margin: 0 0 8px; font-size: 1.1rem; }
.bloc-contact--beige .bloc-contact__principal { color: var(--vert-fonce); }
.bloc-contact__precision { margin: 0; font-size: 0.92rem; }

.lien-reseau {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--blanc-casse);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 253, 249, 0.15);
}
.lien-reseau:last-child { border-bottom: none; }
.lien-reseau:hover { color: var(--vert-clair); }
.lien-reseau span { font-size: 1.05rem; }

.lien-email {
  color: var(--vert-fonce);
  text-decoration: underline;
  text-decoration-color: var(--vert-clair);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   16. PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied {
  background: var(--vert-fonce);
  color: var(--blanc-casse);
  padding: clamp(56px, 7vw, 84px) 24px 40px;
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: var(--trait-sur-vert);
}
.pied__logo { height: 54px; width: auto; margin: 0 0 16px; }
.pied__adresse { margin: 0; color: var(--vert-clair); font-size: 0.95rem; }
.pied__titre {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--vert-clair);
  margin: 0 0 16px;
}
.pied__liens { display: flex; flex-direction: column; gap: 10px; }
.pied__liens a { color: var(--blanc-casse); font-size: 0.95rem; }
.pied__liens a:hover { color: var(--vert-clair); }
.pied__signature {
  font-family: 'Parisienne', cursive;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--vert-clair);
  text-align: center;
  margin: 40px 0 24px;
  line-height: 1.4;
}
.pied__copyright {
  text-align: center;
  margin: 0;
  font-size: 0.82rem;
  color: var(--vert-clair);
}

/* --------------------------------------------------------------------------
   17. PAGES LÉGALES (mentions légales et confidentialité)
   -------------------------------------------------------------------------- */

.page-legale {
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.entete-legale { border-bottom: var(--trait-clair); }
.entete-legale__interieur {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entete-legale img { height: 42px; width: auto; }
.lien-retour { font-size: 0.9rem; color: var(--texte); }

.main-legale {
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 24px;
}
.titre-legal {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--vert-fonce);
  line-height: 1.1;
  margin: 0 0 40px;
}
.titre-legal--avec-intro { margin-bottom: 30px; }
.intro-legale { margin: 0 0 40px; }

.section-legale { margin-bottom: 36px; }
.section-legale:last-child { margin-bottom: 0; }
.section-legale h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--vert-fonce);
  margin: 0 0 14px;
}
.section-legale p { margin: 0 0 6px; }
.section-legale p:last-child { margin-bottom: 0; }
.section-legale ul { margin: 0; padding-left: 22px; }
.section-legale li { margin-bottom: 6px; }
.section-legale strong { font-weight: 500; }

.pied-legal {
  background: var(--vert-fonce);
  color: var(--blanc-casse);
  padding: 36px 24px;
  text-align: center;
}
.pied-legal img { height: 44px; width: auto; margin: 0 auto 12px; }
.pied-legal__lieu { margin: 0 0 14px; font-size: 0.9rem; color: var(--vert-clair); }
.pied-legal__copyright { margin: 0; font-size: 0.82rem; color: var(--vert-clair); }
.pied-legal__copyright a { color: var(--blanc-casse); }
.pied-legal__copyright a:hover { color: var(--vert-clair); }

/* --------------------------------------------------------------------------
   18. RESPECT DES PRÉFÉRENCES D'ANIMATION
   Certaines personnes règlent leur téléphone pour supprimer les animations
   (mal des transports, troubles vestibulaires). On les respecte.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .hero__fleche { animation: none; transform: translateX(-50%); }
}