/* ============================================================
   ANDY LOUNCH — Feuille de style unique partagée par les 6 pages
   Palette "africain chaleureux" :
     terracotta (terre cuite) / jaune soleil / vert feuille / crème
   Organisation du fichier :
     1) Variables et remise à zéro      5) Grilles de plats & filtres
     2) Styles de base (texte, boutons) 6) Galerie & lightbox
     3) En-tête et menu de navigation   7) Formulaires
     4) Héros, atouts, bandeaux         8) Pied de page + responsive
   ============================================================ */

/* ---------- 1) VARIABLES ET REMISE À ZÉRO ---------- */

:root { /* :root = l'élément <html> ; on y déclare des "variables CSS" réutilisables partout */
  --terracotta: #C1502E;        /* Couleur principale : orange terre cuite */
  --terracotta-fonce: #A3421F;  /* Version plus sombre : survol des boutons */
  --jaune: #E8A33D;             /* Jaune soleil : accents, icônes, prix */
  --vert: #4A7C59;              /* Vert feuille : boutons secondaires, surtitres */
  --vert-fonce: #3B6347;        /* Vert plus sombre : survol */
  --brun: #2B1D14;              /* Brun très foncé : fonds sombres (bandeau, footer) */
  --texte: #3E2C22;             /* Couleur du texte courant : brun foncé lisible */
  --creme: #FDF6EC;             /* Fond général : crème clair et doux */
  --creme-fonce: #F7EAD9;       /* Fond alternatif des sections paires */
  --blanc: #FFFFFF;             /* Blanc pur : cartes */
  --ombre: 0 8px 22px rgba(43, 29, 20, 0.12);        /* Ombre douce standard */
  --ombre-forte: 0 14px 30px rgba(43, 29, 20, 0.18); /* Ombre accentuée : survols */
  --police-titres: 'Poppins', 'Segoe UI', sans-serif; /* Police des titres (avec secours) */
  --police-texte: 'Nunito Sans', 'Segoe UI', sans-serif; /* Police du texte courant */
  --arrondi: 16px;              /* Rayon d'arrondi standard des cartes */
}

* { /* Le sélecteur * vise TOUS les éléments de la page */
  margin: 0;         /* Supprime les marges par défaut du navigateur */
  padding: 0;        /* Supprime les espacements par défaut */
  box-sizing: border-box; /* La largeur inclut padding et bordure : le calcul des largeurs devient intuitif */
}

html { scroll-behavior: smooth; } /* Le défilement (ancres, retour en haut) devient fluide */

body { /* Style général de toute la page */
  font-family: var(--police-texte); /* Police du texte courant */
  color: var(--texte);              /* Couleur du texte */
  background-color: var(--creme);   /* Fond crème */
  line-height: 1.6;                 /* Hauteur de ligne : aère la lecture */
  padding-top: 72px;                /* Évite que le contenu passe sous l'en-tête fixe (72px de haut) */
}

img { max-width: 100%; display: block; } /* Les images ne débordent jamais de leur conteneur */

h1, h2, h3 { font-family: var(--police-titres); color: var(--brun); line-height: 1.25; } /* Titres : police + couleur + interligne serré */

a { text-decoration: none; color: inherit; } /* Les liens gardent leur couleur, sans soulignement */

/* ---------- CLASSES UTILITAIRES (utilisées partout) ---------- */

.conteneur { /* Limite la largeur du contenu et le centre : sert de "cadre" à chaque section */
  max-width: 1100px; /* Largeur maximale sur grand écran */
  margin: 0 auto;    /* Centrage horizontal automatique */
  padding: 0 20px;   /* Marges intérieures : le texte ne touche pas les bords sur mobile */
}

.section { padding: 70px 0; } /* Espacement vertical commun à toutes les sections */

.centre { text-align: center; margin-top: 36px; } /* Centre les boutons "voir plus" */
.centre .btn { margin: 6px; } /* Petit espace entre deux boutons côte à côte */

.texte-centre { text-align: center; max-width: 640px; margin: 0 auto 24px; } /* Paragraphe centré et limité en largeur */

.cache { display: none !important; } /* Masque un élément (plats filtrés, lightbox, messages) — !important : priorité maximale */

/* ---------- 2) BOUTONS ---------- */

.btn { /* Style de base commun aux 4 types de boutons */
  display: inline-block;          /* Accepte padding et marges tout en restant dans le texte */
  padding: 13px 26px;             /* Taille "clic confortable" */
  border-radius: 999px;           /* Bordures très arrondies = forme "pilule" */
  font-family: var(--police-titres);
  font-weight: 700;               /* Texte en gras */
  font-size: 0.95rem;
  border: 2px solid transparent;  /* Bordure transparente par défaut (utile pour .btn-contour) */
  cursor: pointer;                /* Curseur "main" au survol */
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; /* Animations douces */
}

.btn:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); } /* Le bouton "monte" légèrement au survol */

.btn-primaire { background-color: var(--terracotta); color: var(--blanc); } /* Bouton principal : terracotta */
.btn-primaire:hover { background-color: var(--terracotta-fonce); }          /* Assombrit au survol */

.btn-secondaire { background-color: var(--vert); color: var(--blanc); }     /* Bouton secondaire : vert feuille */
.btn-secondaire:hover { background-color: var(--vert-fonce); }

.btn-contour { background-color: transparent; border-color: var(--terracotta); color: var(--terracotta); } /* Bouton bordure */
.btn-contour:hover { background-color: var(--terracotta); color: var(--blanc); } /* Se remplit au survol */

.btn-large { width: 100%; padding: 15px; font-size: 1rem; } /* Bouton pleine largeur (formulaires) */

/* ---------- 3) EN-TÊTE ET MENU DE NAVIGATION ---------- */

.entete { /* Barre de navigation fixée en haut de l'écran */
  position: fixed;            /* Reste collée en haut même quand on fait défiler */
  top: 0; left: 0; right: 0;  /* Occupe toute la largeur */
  z-index: 100;               /* Passe AU-DESSUS de tout le reste */
  background-color: rgba(253, 246, 236, 0.94); /* Crème légèrement transparent */
  backdrop-filter: blur(8px); /* Floute ce qui passe derrière (effet verre dépoli) */
  transition: box-shadow 0.3s ease; /* Transition douce de l'ombre */
}

.entete.scrolle { box-shadow: 0 2px 14px rgba(43, 29, 20, 0.15); } /* Ombre ajoutée par script.js dès qu'on défile */

.navbar { /* Ligne intérieure de l'en-tête */
  display: flex;              /* Logo à gauche, liens à droite */
  align-items: center;        /* Alignés verticalement au centre */
  justify-content: space-between; /* Espace maximal entre logo et liens */
  height: 72px;               /* Hauteur fixe : c'est la valeur du padding-top du body */
}

.logo { /* Le nom du restaurant */
  font-family: var(--police-titres);
  font-size: 1.45rem;
  font-weight: 800;           /* Très gras */
  color: var(--brun);
  letter-spacing: 1px;        /* Légèrement espacé */
}

.logo span { color: var(--terracotta); } /* Le mot "LOUNCH" prend la couleur terracotta */

.nav-liens { /* La liste des liens du menu */
  display: flex;      /* Liens alignés en ligne */
  gap: 4px;           /* Petit espace entre chaque lien */
  list-style: none;   /* Supprime les puces de la liste */
}

.nav-liens a { /* Chaque lien du menu */
  display: block;
  padding: 8px 14px;
  border-radius: 999px;             /* Forme pilule */
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texte);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-liens a:hover { background-color: rgba(193, 80, 46, 0.12); color: var(--terracotta); } /* Fond orangé pâle au survol */

.nav-liens a.actif { background-color: var(--terracotta); color: var(--blanc); } /* Page actuelle : pilule pleine */

.burger { /* Bouton hamburger : caché sur PC, montré sur mobile */
  display: none;         /* Invisible par défaut */
  flex-direction: column; /* Les 3 traits empilés verticalement */
  gap: 5px;               /* Espace entre les traits */
  background: none;       /* Supprime le style du bouton natif */
  border: none;
  padding: 10px;
  cursor: pointer;
}

.burger span { /* Un trait du burger */
  width: 26px; height: 3px;       /* Longueur et épaisseur */
  background-color: var(--brun);  /* Couleur du trait */
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease; /* Pour l'animation en croix */
}

.burger.actif span:nth-child(1) { transform: translateY(8px) rotate(45deg); }  /* Trait 1 tourné à 45° = croix */
.burger.actif span:nth-child(2) { opacity: 0; }                                /* Trait 2 disparaît */
.burger.actif span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }/* Trait 3 tourné à -45° */

/* ---------- 4) HÉROS, ATOUTS, BANDEAUX ---------- */

.hero { /* Grande bannière d'accueil : texte à gauche, photo à droite */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* 2 colonnes : un peu plus de place pour le texte */
  gap: 44px;                            /* Espace entre les 2 colonnes */
  align-items: center;                  /* Centrées verticalement */
  max-width: 1100px;                    /* Le héros sert aussi de conteneur */
  margin: 0 auto;
  padding: 48px 20px 64px;              /* Marges intérieures */
  min-height: calc(100vh - 72px);       /* Remplit presque tout l'écran (100vh moins l'en-tête) */
}

.hero-slogan { color: var(--vert); font-weight: 700; letter-spacing: 1px; margin-bottom: 14px; } /* Accroche au-dessus du titre */

.hero-titre { /* Grand titre d'accueil */
  font-size: clamp(2rem, 4.5vw, 3.1rem); /* Taille fluide : s'adapte à la largeur de l'écran */
  font-weight: 800;
  margin-bottom: 18px;
}

.hero-titre span { color: var(--terracotta); } /* Le passage coloré au centre du titre */

.hero-description { font-size: 1.08rem; max-width: 520px; margin-bottom: 28px; } /* Paragraphe d'introduction */

.hero-boutons { display: flex; flex-wrap: wrap; gap: 14px; } /* Les 2 boutons alignés, retour à la ligne si étroit */

.hero-image img { /* Photo du héros */
  width: 100%;
  aspect-ratio: 4 / 3;      /* Rectangle régulier quelle que soit l'image d'origine */
  object-fit: cover;        /* L'image "remplit" le cadre sans se déformer */
  border-radius: 22px;
  box-shadow: var(--ombre-forte);
  border: 6px solid var(--blanc); /* Bord blanc : effet photo encadrée */
}

.section-surtitre { /* Petit texte au-dessus des grands titres de section */
  color: var(--vert);
  text-transform: uppercase; /* Tout en majuscules */
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.section-titre { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 30px; } /* Grand titre de section */

.accueil-menu { background-color: var(--creme-fonce); } /* Teinte légèrement plus foncée pour alterner les sections */

.section-deux-colonnes { /* Grille générique image + texte (accueil, à propos) */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  gap: 44px;
  align-items: center;
}

.image-arrondie {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: var(--ombre);
  border: 6px solid var(--blanc);
}

.atouts-grille { /* Grille des cartes "atouts" et "valeurs" */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonnes automatiques : 3 sur PC, 1 sur mobile */
  gap: 24px;
}

.atout-carte { /* Une carte d'atout */
  background-color: var(--blanc);
  border-top: 4px solid var(--jaune); /* Liseré jaune en haut */
  border-radius: var(--arrondi);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--ombre);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.atout-carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); } /* La carte "saute" au survol */

.atout-icone { font-size: 2.6rem; display: block; margin-bottom: 12px; } /* L'emoji géant sert d'icône */

.atout-carte h3 { margin-bottom: 10px; } /* Espace sous le titre de la carte */

.bandeau-info { background-color: var(--brun); } /* Fond brun foncé (horaires, statistiques) */

.bandeau-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 3 colonnes souples */
  gap: 30px;
  text-align: center;
}

.bandeau-item { color: var(--creme); } /* Texte clair sur fond sombre */

.bandeau-item h3 { color: var(--jaune); margin-bottom: 8px; } /* Titres en jaune soleil */

.compteur { /* Le grand nombre animé (page À propos) */
  display: block;
  font-family: var(--police-titres);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--jaune);
}

.bandeau-item p:last-child { margin-top: 4px; } /* Légende sous le compteur */

/* ---------- 5) BANNIÈRES DE PAGE, GRILLES DE PLATS, FILTRES ---------- */

.page-banniere { /* Bandeau de titre des 5 pages intérieures */
  background-image: linear-gradient(rgba(43, 29, 20, 0.78), rgba(43, 29, 20, 0.78)), url('images/hero2.jpg');
  /* Superpose un voile brun semi-transparent SUR une photo : le texte reste lisible */
  background-size: cover;   /* La photo couvre toute la bannière */
  background-position: center;
  text-align: center;
  padding: 72px 0 64px;
  color: var(--creme);
}

.page-banniere h1 {
  color: var(--blanc);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  margin-bottom: 10px;
}

.page-banniere h1 span { color: var(--jaune); } /* Mot coloré du titre */

.page-banniere p { color: #EADFD3; font-size: 1.05rem; } /* Sous-titre clair */

.filtres { /* Zone des boutons de tri du menu */
  display: flex;
  flex-wrap: wrap;      /* Retour à la ligne sur petit écran */
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.bouton-filtre { /* Un bouton de catégorie */
  padding: 10px 24px;
  border-radius: 999px;
  border: 2px solid var(--terracotta);
  background-color: transparent;
  color: var(--terracotta);
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.bouton-filtre:hover { background-color: rgba(193, 80, 46, 0.12); transform: translateY(-2px); } /* Survol léger */

.bouton-filtre.actif { background-color: var(--terracotta); color: var(--blanc); } /* Catégorie sélectionnée */

.grille-plats { /* Grille des cartes de plats (accueil + menu) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes auto : 3 → 2 → 1 selon l'écran */
  gap: 26px;
}

.carte-plat { /* Une carte de plat */
  background-color: var(--blanc);
  border-radius: var(--arrondi);
  overflow: hidden;              /* Coupe la photo selon les coins arrondis */
  box-shadow: var(--ombre);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;        /* Photo au-dessus du texte */
}

.carte-plat:hover { transform: translateY(-7px); box-shadow: var(--ombre-forte); }

.carte-image { /* La photo du plat */
  width: 100%;
  height: 200px;       /* Hauteur fixe : toutes les photos alignées */
  object-fit: cover;   /* Remplit le cadre sans déformation */
}

.carte-contenu { padding: 18px 20px 22px; } /* Zone de texte de la carte */

.carte-entete { /* Ligne "nom du plat ---- prix" */
  display: flex;
  justify-content: space-between; /* Nom à gauche, prix à droite */
  align-items: baseline;          /* Alignés sur leur ligne de base */
  gap: 10px;
  margin-bottom: 8px;
}

.carte-entete h3 { font-size: 1.15rem; } /* Nom du plat */

.prix { /* Le prix en FCFA */
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--terracotta);
  white-space: nowrap; /* Le prix ne se coupe jamais sur 2 lignes */
}

.carte-contenu p { font-size: 0.94rem; } /* Description un peu plus petite */

.aucun-resultat { /* Message "aucun plat trouvé" */
  text-align: center;
  font-weight: 700;
  color: var(--terracotta);
  margin-top: 20px;
}

/* ---------- 6) GALERIE ET LIGHTBOX ---------- */

.grille-galerie { /* Mosaïque de photos */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.galerie-item { /* Un vignette cliquable */
  position: relative; /* Repère pour positionner la légende par-dessus */
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.galerie-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.45s ease; /* Pour l'effet de zoom au survol */
}

.galerie-item:hover img { transform: scale(1.08); } /* La photo zoome doucement */

.galerie-legende { /* Étiquette qui apparaît en bas de la photo */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 12px;
  background: linear-gradient(transparent, rgba(43, 29, 20, 0.85)); /* Dégradé : lisibilité du texte */
  color: var(--blanc);
  font-weight: 700;
  opacity: 0;            /* Invisible au repos */
  transition: opacity 0.3s ease;
}

.galerie-item:hover .galerie-legende { opacity: 1; } /* Apparaît au survol */

.lightbox { /* Fenêtre d'agrandissement plein écran */
  position: fixed;
  inset: 0;                    /* top/right/bottom/left = 0 : couvre tout */
  background-color: rgba(20, 12, 7, 0.88); /* Fond sombre semi-transparent */
  z-index: 300;                /* Au-dessus de tout, même de l'en-tête */
  display: flex;               /* Contenu centré */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

#lightbox-image {
  max-width: min(900px, 92vw); /* Jamais plus large que l'écran */
  max-height: 78vh;            /* Jamais plus haute que 78 % de l'écran */
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

#lightbox-texte { color: var(--blanc); font-weight: 700; font-size: 1.05rem; }

#lightbox-fermer { /* La croix de fermeture */
  position: absolute;
  top: 16px; right: 22px;
  background: none;
  border: none;
  color: var(--blanc);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- 7) FORMULAIRES (réservation + contact) ---------- */

.reservation-grille { /* Page réservation : formulaire + infos */
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* Le formulaire prend plus de place */
  gap: 36px;
  align-items: start; /* Alignées en haut */
}

.contact-grille { /* Page contact : formulaire + carte */
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: stretch; /* Le formulaire et la carte ont la même hauteur */
}

.formulaire { /* Le bloc blanc du formulaire */
  background-color: var(--blanc);
  border-radius: var(--arrondi);
  box-shadow: var(--ombre);
  padding: 30px;
}

.formulaire h2 { margin-bottom: 22px; font-size: 1.4rem; }

.champ { margin-bottom: 18px; } /* Bloc étiquette + champ + erreur */

.champ label { /* L'étiquette au-dessus du champ */
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.champ em { color: var(--terracotta); font-style: normal; font-weight: 800; } /* L'étoile * en terracotta */

.champ input,
.champ select,
.champ textarea { /* Les 3 types de champs ont le même style */
  width: 100%;              /* Champ pleine largeur */
  padding: 12px 14px;
  border: 2px solid #E3D5C5; /* Bordure beige */
  border-radius: 10px;
  font-family: var(--police-texte);
  font-size: 1rem;
  color: var(--texte);
  background-color: var(--creme);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus { /* Quand l'utilisateur clique dans le champ */
  outline: none; /* Supprime le contour bleu par défaut */
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(193, 80, 46, 0.15); /* Halo orangé */
}

.champ textarea { resize: vertical; } /* Autorise l'agrandissement vertical seulement */

.champ-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* 2 champs côte à côte */

.message-erreur { display: none; color: #B3261E; font-size: 0.85rem; margin-top: 5px; } /* Erreur cachée par défaut */
.message-erreur.visible { display: block; } /* Affichée par script.js si besoin */

.erreur-input { border-color: #B3261E !important; background-color: #FBEAE8; } /* Champ invalide : bordure rouge */

.message-succes { /* Le bandeau vert de confirmation */
  margin-top: 18px;
  padding: 14px 16px;
  background-color: #E7F3EA;
  border: 2px solid var(--vert);
  border-radius: 10px;
  color: var(--vert-fonce);
  font-weight: 700;
}

.infos-reservation { /* Colonne droite de la page réservation */
  background-color: var(--creme-fonce);
  border-radius: var(--arrondi);
  padding: 30px;
}

.infos-reservation h2 { margin-bottom: 18px; font-size: 1.4rem; }

.info-carte { /* Petite carte d'information */
  background-color: var(--blanc);
  border-left: 4px solid var(--jaune);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--ombre);
}

.info-carte h3 { font-size: 1.05rem; margin-bottom: 6px; }

.lien-texte { color: var(--terracotta); font-weight: 700; } /* Lien téléphone / email */
.lien-texte:hover { text-decoration: underline; }

.carte-wrapper { /* Conteneur de la carte Google Maps */
  min-height: 420px;
  border-radius: var(--arrondi);
  overflow: hidden;
  box-shadow: var(--ombre);
  border: 6px solid var(--blanc);
}

.carte-wrapper iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* ---------- 8) PIED DE PAGE, RETOUR HAUT, RESPONSIVE ---------- */

.pied-page { /* Le pied de page brun */
  background-color: #1F140D; /* Brun encore plus foncé que --brun */
  color: #D8C9BD;            /* Texte beige clair */
  margin-top: 70px;
  padding-top: 50px;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr; /* Colonne logo plus large */
  gap: 36px;
  padding-bottom: 40px;
}

.logo-pied { color: var(--blanc); font-size: 1.5rem; display: inline-block; margin-bottom: 12px; }

.pied-colonne p { font-size: 0.95rem; max-width: 320px; }

.pied-colonne h3 { color: var(--jaune); font-size: 1.05rem; margin-bottom: 14px; } /* Titres des colonnes */

.pied-liens { list-style: none; } /* Pas de puces */

.pied-liens li { margin-bottom: 9px; font-size: 0.95rem; }

.pied-liens a:hover { color: var(--jaune); } /* Lien du footer qui s'éclaire */

.pied-bas { /* Barre de copyright */
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* Fine ligne de séparation */
  text-align: center;
  padding: 18px 20px;
  font-size: 0.88rem;
}

#retour-haut { /* Bouton flottant "revenir en haut" */
  position: fixed;
  bottom: 22px; right: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;              /* Cercle parfait */
  background-color: var(--terracotta);
  color: var(--blanc);
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 150;
  opacity: 0;                      /* Invisible au départ */
  visibility: hidden;
  pointer-events: none;            /* Non cliquable quand invisible */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#retour-haut.visible { opacity: 1; visibility: visible; pointer-events: auto; } /* Montré par script.js après 400px de scroll */

#retour-haut:hover { transform: translateY(-4px); background-color: var(--terracotta-fonce); }

/* ======== ÉCRANS MOYENS (tablettes, ≤ 900px) ======== */
@media (max-width: 900px) {

  .burger { display: flex; } /* Le burger apparaît */

  .nav-liens { /* Le menu devient un panneau déroulant */
    position: fixed;
    top: 72px;               /* Juste sous l'en-tête */
    left: 0; right: 0;
    background-color: var(--creme);
    flex-direction: column;  /* Liens empilés verticalement */
    gap: 4px;
    padding: 18px 20px 24px;
    box-shadow: 0 12px 24px rgba(43, 29, 20, 0.18);
    opacity: 0;              /* Caché au départ... */
    visibility: hidden;
    transform: translateY(-12px); /* ...et légèrement décalé vers le haut */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  .nav-liens.ouvert { opacity: 1; visibility: visible; transform: translateY(0); } /* Classe ajoutée par script.js : panneau visible */

  .nav-liens a { padding: 13px 16px; border-radius: 12px; } /* Liens plus hauts : faciles à toucher au doigt */

  .hero { grid-template-columns: 1fr; padding-top: 36px; min-height: auto; } /* Héros : 1 colonne (texte puis photo) */

  .section-deux-colonnes { grid-template-columns: 1fr; } /* Image + texte empilés */

  .reservation-grille,
  .contact-grille { grid-template-columns: 1fr; } /* Formulaires pleine largeur */

  .bandeau-grille { grid-template-columns: 1fr; gap: 22px; } /* Statistiques empilées */
}

/* ======== PETITS ÉCRANS (téléphones, ≤ 640px) ======== */
@media (max-width: 640px) {

  .section { padding: 52px 0; } /* Moins d'air vertical sur mobile */

  .hero-boutons { flex-direction: column; } /* Boutons empilés */

  .hero-boutons .btn { text-align: center; } /* Texte centré dans le bouton pleine largeur */

  .champ-ligne { grid-template-columns: 1fr; } /* Date et heure empilées */

  .pied-grille { grid-template-columns: 1fr; gap: 28px; } /* Footer en 1 colonne */

  .page-banniere { padding: 54px 0 46px; } /* Bannière plus compacte */

  .carte-image { height: 180px; } /* Photos un peu moins hautes */

  .formulaire { padding: 22px; } /* Formulaire moins large en padding */
}