/* ==========================================================================
   BIRD HUNTER 65 — Feuille de style
   Domaine de chasse privée · Tournay (Hautes-Pyrénées)

   Organisation du fichier :
     1.  Variables (couleurs, tailles)
     2.  Base & typographie
     3.  Boutons
     4.  En-tête + navigation
     5.  Hero (grande image d'accueil)
     6.  Bandeau repères
     7.  Sections génériques
     8.  Le Domaine
     9.  Nos offres (6 cartes)
     10. La journée type
     11. Bergerie
     12. Avis
     13. Contact (carte + formulaire)
     14. Pied de page
     15. Barre d'appel mobile
     16. Animations
     17. Page Mentions légales
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   Pour changer les couleurs du site, il suffit de modifier ici.
   ========================================================================== */
:root{
  --vert-nuit:#232B1A;      /* pied de page */
  --vert-fonce:#2E3823;     /* en-tête */
  --vert:#424D2D;           /* couleur principale de la marque */
  --vert-clair:#5F6E44;
  --creme:#F7F3E9;          /* fonds clairs */
  --creme-2:#EFE8D8;
  --ocre:#A9691F;           /* accent : prix, liens importants */
  --ocre-clair:#C98A3C;
  --encre:#1E2116;          /* texte courant */
  --gris:#5C5F52;           /* texte secondaire */
  --blanc:#FFFFFF;

  --ombre:0 2px 8px rgba(30,33,22,.07), 0 12px 28px rgba(30,33,22,.07);
  --ombre-forte:0 6px 16px rgba(30,33,22,.12), 0 20px 44px rgba(30,33,22,.14);
  --radius:16px;
  --hauteur-header:84px;

  /* Largeur du contenu */
  --largeur:1180px;
}


/* ==========================================================================
   2. BASE & TYPOGRAPHIE
   Texte volontairement grand (18px) et très contrasté : le site s'adresse
   à des chasseurs de tous âges, la lisibilité prime sur l'esthétique.
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hauteur-header) + 16px);-webkit-text-size-adjust:100%}

body{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px;
  line-height:1.75;
  color:var(--encre);
  background:var(--blanc);
  overflow-x:hidden;
  padding-top:var(--hauteur-header);
}

h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--vert);line-height:1.2;font-weight:700}
h1{font-size:clamp(2.4rem,7vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.6vw,1.55rem)}

p{margin-bottom:1.1rem}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
strong{font-weight:700}

.container{width:min(92%,var(--largeur));margin-inline:auto}

/* Lien d'évitement (accessibilité clavier) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--ocre);color:#fff;padding:14px 22px;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0}

/* Contour de focus visible partout : indispensable pour la navigation clavier */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ocre-clair);
  outline-offset:3px;
  border-radius:6px;
}

/* Titre de section : trait ocre sous le titre */
.titre-section{text-align:center;margin-bottom:2.6rem}
.titre-section h2{margin-bottom:.9rem}
.titre-section p{color:var(--gris);max-width:62ch;margin-inline:auto;font-size:1.05rem}
.titre-section::after{
  content:"";display:block;width:74px;height:4px;border-radius:2px;
  background:var(--ocre);margin:1.4rem auto 0;
}
.titre-section.sur-image h2,
.titre-section.sur-image p{color:#fff}


/* ==========================================================================
   3. BOUTONS
   Cibles tactiles larges (min. 54px de haut) et libellés explicites.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:56px;padding:15px 30px;
  font-family:inherit;font-size:1.05rem;font-weight:700;line-height:1.25;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
  text-align:center;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:22px;height:22px;flex:none;fill:currentColor}

.btn-principal{background:var(--ocre);color:#fff;box-shadow:0 8px 22px rgba(169,105,31,.32)}
.btn-principal:hover{background:var(--ocre-clair)}

.btn-vert{background:var(--vert);color:#fff;box-shadow:0 8px 22px rgba(66,77,45,.3)}
.btn-vert:hover{background:var(--vert-clair)}

.btn-clair{background:#fff;color:var(--vert);border-color:var(--vert)}
.btn-clair:hover{background:var(--creme)}

.btn-contour-blanc{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-contour-blanc:hover{background:#fff;color:var(--vert)}

.groupe-btn{display:flex;flex-wrap:wrap;gap:14px}
.groupe-btn.centre{justify-content:center}


/* ==========================================================================
   4. EN-TÊTE + NAVIGATION
   ========================================================================== */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--hauteur-header);
  background:var(--vert-fonce);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.entete-inner{display:flex;align-items:center;gap:20px;height:100%}

.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:60px;width:auto;border-radius:50%;background:var(--creme)}
.logo-texte{display:flex;flex-direction:column;line-height:1.15}
.logo-texte .nom{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:#fff}
.logo-texte .lieu{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#C9D2B8}

.nav-principale{margin-left:auto}
.nav-liste{display:flex;align-items:center;gap:4px}
.nav-liste a{
  display:block;padding:11px 14px;border-radius:10px;
  font-size:.98rem;font-weight:600;color:#EDF1E4;
  transition:background .2s ease,color .2s ease;
}
.nav-liste a:hover,.nav-liste a.actif{background:rgba(255,255,255,.13);color:#fff}

/* Bouton téléphone toujours visible dans l'en-tête (desktop) */
.tel-entete{
  flex:none;display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;
  background:var(--ocre);color:#fff;font-weight:700;font-size:1rem;white-space:nowrap;
  transition:background .2s ease,transform .15s ease;
}
.tel-entete:hover{background:var(--ocre-clair);transform:translateY(-2px)}
.tel-entete svg{width:20px;height:20px;fill:currentColor;flex:none}

/* Bouton hamburger (mobile uniquement) */
.burger{
  display:none;flex:none;margin-left:auto;
  width:52px;height:52px;border:0;border-radius:12px;
  background:rgba(255,255,255,.12);cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:26px;height:3px;border-radius:2px;background:#fff;position:relative;transition:.25s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:26px;height:3px;border-radius:2px;background:#fff;transition:.25s;
}
.burger span::before{top:-9px}
.burger span::after{top:9px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  min-height:clamp(520px,84vh,760px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--vert-fonce) url('../imagesbirdhunter/hero.jpg') center/cover no-repeat;
}
/* Voile sombre pour garantir le contraste du texte blanc */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(25,30,18,.62) 0%,rgba(25,30,18,.42) 45%,rgba(25,30,18,.78) 100%);
}
.hero-contenu{position:relative;z-index:2;padding:5rem 1rem;max-width:900px}
.hero-contenu .sur-titre{
  display:inline-block;margin-bottom:1.1rem;padding:9px 20px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.hero-contenu h1{color:#fff;margin-bottom:1rem;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.hero-contenu .accroche{
  font-family:'Playfair Display',serif;font-size:clamp(1.15rem,2.7vw,1.6rem);
  color:#F2EEE2;margin-bottom:2.3rem;text-shadow:0 2px 12px rgba(0,0,0,.5);
}


/* ==========================================================================
   6. BANDEAU REPÈRES (chiffres clés)
   ========================================================================== */
.reperes{background:var(--vert);color:#fff;padding:2.2rem 0}
.reperes-grille{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));text-align:center}
.repere .valeur{
  font-family:'Playfair Display',serif;font-size:clamp(1.7rem,3.6vw,2.3rem);
  font-weight:700;color:#fff;line-height:1.1;
}
.repere .libelle{font-size:.95rem;color:#D6DEC6;margin-top:.3rem}


/* ==========================================================================
   7. SECTIONS GÉNÉRIQUES
   ========================================================================== */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section--creme{background:var(--creme)}
.section--blanc{background:var(--blanc)}


/* ==========================================================================
   8. LE DOMAINE
   ========================================================================== */
.domaine-grille{display:grid;gap:clamp(2rem,5vw,3.6rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.domaine-grille{grid-template-columns:1.05fr .95fr}}

.domaine-texte h2{margin-bottom:1.5rem}
.domaine-texte p{color:#33372A}
/* Mise en avant de la formule repas, déjà présente dans le texte */
.domaine-encart{
  margin-top:1.6rem;padding:1.2rem 1.4rem;
  background:#fff;border-left:5px solid var(--ocre);border-radius:0 12px 12px 0;
  box-shadow:var(--ombre);
}
.domaine-encart p{margin:0}

.domaine-image{position:relative}
.domaine-image img{width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--ombre-forte)}


/* ==========================================================================
   9. NOS OFFRES — 6 cartes
   ========================================================================== */
.offres-grille{display:grid;gap:1.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr))}

.offre{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre);border:1px solid rgba(66,77,45,.1);
  transition:transform .22s ease,box-shadow .22s ease;
}
.offre:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}

.offre-image{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--creme-2)}
.offre-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.offre:hover .offre-image img{transform:scale(1.05)}
/* Étiquette « saison / jours » posée sur l'image */
.offre-etiquette{
  position:absolute;left:14px;top:14px;
  padding:7px 15px;border-radius:999px;
  background:rgba(35,43,26,.86);color:#fff;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  backdrop-filter:blur(4px);
}

.offre-corps{display:flex;flex-direction:column;flex:1;padding:1.6rem 1.5rem 1.7rem}
.offre-corps h3{margin-bottom:1rem}

/* Liste des caractéristiques, avec puce en chevron ocre */
.offre-details{margin-bottom:1.4rem}
.offre-details li{
  position:relative;padding-left:1.7rem;margin-bottom:.55rem;
  font-size:1rem;line-height:1.55;color:#3A3E31;
}
.offre-details li::before{
  content:"";position:absolute;left:.25rem;top:.62em;
  width:8px;height:8px;border-right:2.5px solid var(--ocre);border-bottom:2.5px solid var(--ocre);
  transform:rotate(-45deg);
}

/* Bloc prix : c'est l'information la plus cherchée, elle doit sauter aux yeux */
.offre-prix{
  margin-top:auto;padding-top:1.2rem;border-top:2px dashed rgba(66,77,45,.2);
}
.offre-prix .montant{
  font-family:'Playfair Display',serif;font-size:1.85rem;font-weight:700;
  color:var(--ocre);line-height:1.15;display:block;
}
.offre-prix .montant .unite{font-size:1rem;font-family:inherit;color:var(--gris);font-weight:400}
.offre-prix .second{display:block;margin-top:.35rem;font-size:1.02rem;color:#3A3E31}
.offre-prix .second b{color:var(--vert)}
.offre-prix .mention{display:block;margin-top:.45rem;font-size:.9rem;color:var(--gris)}

.offre .btn{margin-top:1.3rem;width:100%}

/* Rappel sous la grille */
.offres-note{
  margin-top:2.6rem;padding:1.4rem 1.6rem;border-radius:var(--radius);
  background:#fff;border:1px solid rgba(66,77,45,.14);box-shadow:var(--ombre);
  text-align:center;color:#3A3E31;
}
.offres-note strong{color:var(--vert)}


/* ==========================================================================
   10. LA JOURNÉE TYPE
   ========================================================================== */
.journee{
  position:relative;
  background:var(--vert-fonce) url('../imagesbirdhunter/organisation.jpg') center/cover no-repeat;
  background-attachment:scroll;
  color:#fff;
}
.journee::after{content:"";position:absolute;inset:0;background:rgba(24,29,17,.8)}
.journee .container{position:relative;z-index:2}

/* Frise chronologique : horizontale sur ordinateur, verticale sur mobile.
   Le texte n'est jamais comprimé, chaque étape garde sa place. */
.horaires{
  display:flex;justify-content:center;
  max-width:1040px;margin-inline:auto;
}
.horaire{
  position:relative;flex:1 1 0;min-width:0;
  padding:2.6rem .7rem 0;text-align:center;
}
/* Le trait qui relie les étapes */
.horaire::before{
  content:"";position:absolute;top:11px;left:0;right:0;height:2px;
  background:rgba(255,255,255,.28);
}
.horaire:first-child::before{left:50%}
.horaire:last-child::before{right:50%}
/* La pastille de chaque étape */
.horaire::after{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--ocre-clair);box-shadow:0 0 0 4px rgba(24,29,17,.85);
}
.horaire .heure{
  display:block;margin-bottom:.35rem;
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--ocre-clair);
}
.horaire .quoi{display:block;font-size:1rem;color:#F1EEE4;line-height:1.5;text-wrap:balance}

/* Frise verticale sur petits écrans */
@media (max-width:860px){
  .horaires{flex-direction:column;max-width:460px;gap:0}
  .horaire{
    display:flex;align-items:baseline;gap:1rem;
    text-align:left;padding:0 0 1.7rem 2.4rem;
  }
  .horaire::before{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .horaire:first-child::before{top:10px;left:7px}
  .horaire:last-child::before{bottom:auto;height:10px;right:auto}
  .horaire::after{top:3px;left:0;transform:none;width:16px;height:16px}
  .horaire .heure{flex:none;min-width:62px;margin-bottom:0;font-size:1.25rem}
}

.journee-info{
  max-width:760px;margin:2.2rem auto 0;padding:1.15rem 1.5rem;
  border-radius:14px;background:rgba(169,105,31,.2);border:1px solid rgba(201,138,60,.5);
  text-align:center;color:#FBF6EC;font-size:1.05rem;
}


/* ==========================================================================
   11. BERGERIE
   ========================================================================== */
/* Photo aérienne réelle du domaine : affichée en entier, jamais rognée */
.bergerie{background:var(--vert-fonce);color:#fff}
.bergerie-grille{display:grid;gap:clamp(2rem,5vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.bergerie-grille{grid-template-columns:1fr 1fr}}

.bergerie-texte h2{color:#fff;margin-bottom:1.4rem}
.bergerie-texte p{color:#E4E0D3}
.bergerie-texte .groupe-btn{margin-top:2rem}

.bergerie-photo img{
  width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
.bergerie-photo figcaption{
  margin-top:.9rem;text-align:center;font-size:.92rem;color:#AEB79C;font-style:italic;
}


/* ==========================================================================
   12. AVIS
   Grille sur grand écran, défilement horizontal « au doigt » sur mobile.
   ========================================================================== */
/* Largeur plafonnée à 3 cartes par ligne : avec 5 avis on obtient 3 + 2 centrés,
   plutôt qu'une carte isolée en bas de grille. */
.avis-grille{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;
  max-width:1060px;margin-inline:auto;
}
.avis{
  flex:1 1 280px;max-width:330px;
  display:flex;flex-direction:column;
  padding:1.7rem 1.6rem;border-radius:var(--radius);
  background:#fff;box-shadow:var(--ombre);border:1px solid rgba(66,77,45,.1);
}
.avis .etoiles{color:#E0A32B;font-size:1.2rem;letter-spacing:.14em;margin-bottom:.85rem}
.avis blockquote{font-size:1.05rem;line-height:1.65;color:#33372A;font-style:italic;flex:1}
.avis blockquote::before{content:"« "}
.avis blockquote::after{content:" »"}
.avis .auteur{margin-top:1.1rem;font-weight:700;color:var(--vert);font-style:normal}

@media (max-width:640px){
  .avis{flex:1 1 100%;max-width:none}
}


/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.contact-grille{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:960px){.contact-grille{grid-template-columns:1fr 1fr;align-items:start}}

.bloc-contact{
  background:#fff;border-radius:var(--radius);padding:1.9rem 1.7rem;
  box-shadow:var(--ombre);border:1px solid rgba(66,77,45,.1);
}
.bloc-contact h3{margin-bottom:.9rem}

/* Coordonnées : gros caractères, cliquables */
.coordonnees{margin:1.5rem 0 0;display:grid;gap:1rem}
.coordonnee{display:flex;align-items:flex-start;gap:.95rem}
.coordonnee .ico{
  flex:none;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;background:var(--creme);color:var(--vert);
}
.coordonnee .ico svg{width:23px;height:23px;fill:currentColor}
.coordonnee .libelle{display:block;font-size:.85rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gris)}
.coordonnee .valeur{display:block;font-size:1.15rem;font-weight:700;color:var(--encre);line-height:1.4}
.coordonnee a.valeur{color:var(--vert);text-decoration:underline;text-underline-offset:3px}
.coordonnee a.valeur:hover{color:var(--ocre)}

/* Carte Google Maps */
.carte{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);
  border:1px solid rgba(66,77,45,.1);background:var(--creme-2);
  aspect-ratio:4/3;
}
.carte iframe{width:100%;height:100%;border:0;display:block}

/* --- Formulaire --- */
.formulaire{display:grid;gap:1.1rem;margin-top:1.6rem}
.champ{display:grid;gap:.45rem}
.champ label{font-weight:700;font-size:1rem;color:var(--encre)}
.champ label .requis{color:var(--ocre)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:14px 16px;min-height:54px;
  font-family:inherit;font-size:1.02rem;color:var(--encre);
  background:var(--creme);border:2px solid rgba(66,77,45,.22);border-radius:12px;
  transition:border-color .2s ease,background .2s ease;
}
.champ textarea{min-height:140px;resize:vertical;line-height:1.6}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23424D2D'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:26px;padding-right:48px;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--vert);background:#fff;outline:none;
  box-shadow:0 0 0 4px rgba(66,77,45,.13);
}
.champ-double{display:grid;gap:1.1rem}
@media (min-width:560px){.champ-double{grid-template-columns:1fr 1fr}}

/* Piège à robots : invisible pour les humains */
.pot-de-miel{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}

.form-mention{font-size:.9rem;color:var(--gris);line-height:1.55}
.form-mention a{color:var(--vert);text-decoration:underline}

/* Message de retour après envoi */
.form-message{
  padding:1.05rem 1.3rem;border-radius:12px;font-size:1rem;line-height:1.6;
  display:none;
}
.form-message.visible{display:block}
.form-message.succes{background:#E9F2E1;border:1px solid #7FA65E;color:#2C4318}
.form-message.erreur{background:#FBEDE6;border:1px solid #C98A3C;color:#7A3E10}
.form-message a{color:inherit;font-weight:700;text-decoration:underline}


/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */
.pied{background:var(--vert-nuit);color:#DDE3D2;padding:3rem 0 6rem}
@media (min-width:768px){.pied{padding-bottom:2.4rem}}

.pied-grille{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media (min-width:760px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr}}

.pied h4{color:#fff;font-size:1.15rem;margin-bottom:1rem}
.pied p{font-size:.98rem;line-height:1.7;margin-bottom:.6rem}
.pied a{color:#DDE3D2;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-liens li{margin-bottom:.6rem}

.pied-logo{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.pied-logo img{height:56px;width:auto;border-radius:50%;background:var(--creme)}
.pied-logo .nom{font-family:'Playfair Display',serif;font-size:1.25rem;color:#fff;font-weight:700}

.reseaux{display:flex;gap:12px;margin-top:1rem}
.reseaux a{
  display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.1);transition:background .2s ease,transform .15s ease;
}
.reseaux a:hover{background:var(--ocre);transform:translateY(-2px)}
.reseaux img{width:24px;height:24px}

.pied-bas{
  margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:center;
  text-align:center;font-size:.92rem;color:#AEB79C;
}
.pied-bas .sep{opacity:.4}


/* ==========================================================================
   15. BARRE D'APPEL MOBILE
   Toujours accessible en bas d'écran sur téléphone : le réflexe principal
   des visiteurs est d'appeler.
   ========================================================================== */
.barre-appel{
  display:none;
  position:fixed;inset:auto 0 0 0;z-index:999;
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(35,43,26,.97);box-shadow:0 -4px 18px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
}
.barre-appel .btn{flex:1;min-height:52px;padding:12px 14px;font-size:1rem}


/* ==========================================================================
   16. ANIMATIONS
   ========================================================================== */
/* Apparition douce au défilement */
.apparition{
  opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
}
.apparition.visible{opacity:1;transform:none}

/* Décalage en cascade : les éléments d'une même rangée arrivent l'un après
   l'autre. Le délai est posé par script.js via --retard. */
.apparition[style*="--retard"]{transition-delay:var(--retard)}

/* Léger zoom lent sur l'image d'accueil (effet « respiration ») */
@keyframes respiration{
  from{transform:scale(1)}
  to{transform:scale(1.07)}
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:inherit;background-attachment:scroll;
  animation:respiration 26s ease-in-out infinite alternate;
  transform-origin:center 60%;
}

/* Descente du contenu d'accueil au chargement */
@keyframes entree-haut{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
.hero-contenu > *{animation:entree-haut .8s cubic-bezier(.22,.61,.36,1) backwards}
.hero-contenu .sur-titre{animation-delay:.1s}
.hero-contenu h1{animation-delay:.22s}
.hero-contenu .accroche{animation-delay:.34s}
.hero-contenu .groupe-btn{animation-delay:.46s}

/* Soulignement animé des liens du menu */
.nav-liste a{position:relative}
.nav-liste a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--ocre-clair);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav-liste a:hover::after,.nav-liste a.actif::after{transform:scaleX(1)}

/* La pastille de la frise se pose en douceur */
.horaire::after{transition:transform .4s ease,box-shadow .3s ease}
.horaire:hover::after{transform:translateX(-50%) scale(1.25)}
@media (max-width:860px){.horaire:hover::after{transform:scale(1.25)}}

/* Les avis se soulèvent légèrement au survol */
.avis{transition:transform .22s ease,box-shadow .22s ease}
.avis:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}

/* L'en-tête se resserre une fois la page défilée */
.entete{transition:height .28s ease,background .28s ease,box-shadow .28s ease}
.entete.reduit{height:70px;background:rgba(46,56,35,.97);backdrop-filter:blur(8px)}
.entete.reduit .logo img{height:48px;transition:height .28s ease}
.logo img{transition:height .28s ease}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .apparition{opacity:1;transform:none}
  .hero::before{animation:none}
  .hero-contenu > *{animation:none}
}


/* ==========================================================================
   17. PAGE MENTIONS LÉGALES
   ========================================================================== */
.page-legale{background:var(--creme);padding:clamp(2.5rem,6vw,4.5rem) 0}
.page-legale .container{max-width:880px}
.legal-carte{
  background:#fff;border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.8rem);
  box-shadow:var(--ombre);border:1px solid rgba(66,77,45,.1);
}
.legal-carte h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:2.2rem 0 .9rem;padding-top:1.4rem;border-top:1px solid rgba(66,77,45,.14)}
.legal-carte h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal-carte p{margin-bottom:.75rem;font-size:1.02rem}
.legal-carte a{color:var(--vert);text-decoration:underline;text-underline-offset:3px}
.legal-carte a:hover{color:var(--ocre)}
.legal-maj{color:var(--gris);font-size:.98rem;margin-bottom:1.8rem}


/* ==========================================================================
   RESPONSIVE — tablette & mobile
   ========================================================================== */
@media (max-width:1080px){
  .nav-liste a{padding:11px 10px;font-size:.93rem}
  .tel-entete{padding:12px 16px;font-size:.94rem}
}

@media (max-width:960px){
  :root{--hauteur-header:76px}

  .burger{display:flex}
  .tel-entete{display:none}          /* remplacé par la barre d'appel en bas */
  .logo-texte{display:none}
  .logo img{height:52px}

  /* Menu déroulant plein écran */
  .nav-principale{
    position:fixed;inset:var(--hauteur-header) 0 0 0;
    background:var(--vert-fonce);
    padding:1.5rem 6% 3rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    margin-left:0;
  }
  .nav-principale.ouvert{transform:translateX(0)}
  .nav-liste{flex-direction:column;align-items:stretch;gap:6px}
  .nav-liste a{
    padding:17px 18px;font-size:1.12rem;border-radius:12px;
    background:rgba(255,255,255,.07);
  }

  .barre-appel{display:flex}
}

@media (max-width:600px){
  body{font-size:17px}
  .hero{min-height:clamp(470px,78vh,600px)}
  .hero-contenu{padding:3.5rem 1rem}
  .groupe-btn .btn{width:100%}
  .bloc-contact{padding:1.5rem 1.25rem}

  /* Cartes d'offres allégées : image moins haute, texte et prix resserrés,
     pour que le défilement reste rapide sur téléphone. */
  .offres-grille{gap:1.3rem}
  .offre-image{aspect-ratio:16/9}
  .offre-corps{padding:1.15rem 1.15rem 1.25rem}
  .offre-corps h3{font-size:1.18rem;margin-bottom:.75rem}
  .offre-details{margin-bottom:1rem}
  .offre-details li{font-size:.95rem;margin-bottom:.4rem;padding-left:1.5rem;line-height:1.45}
  .offre-prix{padding-top:.9rem}
  .offre-prix .montant{font-size:1.5rem}
  .offre-prix .montant .unite{font-size:.9rem}
  .offre-prix .second{font-size:.95rem}
  .offre-prix .mention{font-size:.85rem}
  .offre .btn{margin-top:1rem;min-height:50px;padding:12px 20px;font-size:1rem}
  .offre-etiquette{font-size:.76rem;padding:6px 12px;left:10px;top:10px}

  /* Avis un peu plus compacts également */
  .avis{padding:1.35rem 1.25rem}
  .avis blockquote{font-size:1rem}
}