/* =========================================================================
   MONT FÉBÉ — Design system
   Variables CSS pour une palette facilement modifiable depuis un seul endroit.
   ========================================================================= */
:root {
  --color-primary: #063F2B;
  --color-dark: #022D20;
  --color-gold: #C9A44C;
  --color-gold-dark: #B08A3E;
  --color-champagne: #E5D4A3;
  --color-cream: #F6F1E5;
  --color-bg: #FAF8F2;
  --color-text: #17211D;
  --color-muted: #6F7772;
  --color-white: #FFFFFF;
  --color-danger: #9B3B3B;
  --color-success: #2F6F4E;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-soft: 0 10px 30px rgba(2, 45, 32, 0.08);
  --shadow-card: 0 6px 18px rgba(2, 45, 32, 0.10);
  --shadow-lift: 0 16px 36px rgba(2, 45, 32, 0.14);
  --shadow-gold: 0 8px 20px rgba(201, 164, 76, 0.28);
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-height: 68px;
  --bottomnav-height: 64px;
  --container-max: 1180px;

  /* Échelle d'espacement, pour une cadence régulière entre les sections. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.16s var(--ease);
  --transition-base: 0.24s var(--ease);
  --transition-slow: 0.4s var(--ease);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h1 { font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Icônes Lucide : gabarit par défaut cohérent sur tout le site. Les règles
   plus spécifiques ci-dessous (boutons, navigation, cartes...) priment sur
   cette valeur de base grâce à la spécificité CSS des sélecteurs de classe. */
.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.75px;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.muted { color: var(--color-muted); }
.gold-text { color: var(--color-gold); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  font-weight: 700;
}
.eyebrow .lucide { width: 15px; height: 15px; }

/* Titre compact utilisé sur les pages privées sans bandeau (profil, réservations...). */
.page-title { font-size: 22px; margin: 4px 0 0; }

/* ---------------- Buttons ---------------- */
/* Forme signature Mont Fébé : coins carrés, avec l'angle haut-gauche et
   l'angle bas-droit coupés en diagonale (les angles haut-droit et bas-gauche
   restent droits). Le box-shadow classique est remplacé par un filter
   drop-shadow, seul capable de suivre correctement cette découpe. */
.btn {
  --btn-cut: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 0;
  clip-path: polygon(
    var(--btn-cut) 0, 100% 0,
    100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%,
    0 100%, 0 var(--btn-cut)
  );
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base), filter var(--transition-base);
  line-height: 1;
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: 2.5px solid var(--color-gold);
  outline-offset: 2px;
}
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.btn .lucide { width: 18px; height: 18px; }

.btn-primary { background: var(--color-primary); color: var(--color-white); filter: drop-shadow(0 6px 14px rgba(6,63,43,0.28)); }
.btn-primary:hover { background: var(--color-dark); filter: drop-shadow(0 8px 18px rgba(6,63,43,0.34)); }

.btn-secondary { background: var(--color-white); color: var(--color-primary); border-color: rgba(6,63,43,0.28); }
.btn-secondary:hover { background: var(--color-cream); border-color: var(--color-primary); }

.btn-gold { background: var(--color-gold); color: var(--color-dark); filter: drop-shadow(0 6px 14px rgba(201,164,76,0.35)); }
.btn-gold:hover { background: var(--color-gold-dark); }

.btn-ghost { background: rgba(255,255,255,0.14); color: var(--color-white); border-color: rgba(255,255,255,0.5); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.8); }

.btn-block { width: 100%; }
.btn-sm { --btn-cut: 8px; min-height: 38px; padding: 8px 18px; font-size: 13px; }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { background: #832f2f; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(6,63,43,0.08);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 10px; transition: opacity var(--transition-fast); }
.brand:hover { opacity: 0.85; }
.brand-mark {
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201,164,76,0.5);
}
.brand-mark-lg { width: 64px; height: 64px; min-width: 64px; margin: 0 auto 14px; border-width: 2px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--color-dark); }
.brand-subtitle { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-dark); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  border: 1px solid rgba(6,63,43,0.12);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.icon-btn:hover { background: var(--color-cream); border-color: rgba(6,63,43,0.24); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .lucide, .icon-btn svg { width: 19px; height: 19px; }

.desktop-nav { display: none; }
.desktop-nav a {
  padding: 9px 15px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text);
  border-radius: 999px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.desktop-nav a:hover, .desktop-nav a.active { background: rgba(6,63,43,0.08); color: var(--color-primary); }
/* Le bouton plein ("Réserver") du header doit garder son texte clair, sans
   se faire écraser par la couleur de texte par défaut des liens de
   navigation. Le bouton "Connexion", lui, reste en style secondaire (contour). */
.desktop-nav a.btn-primary, .desktop-nav a.btn-primary:hover { color: var(--color-white); }
.desktop-nav a.btn-secondary {
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-primary);
  margin-left: 6px;
}
.desktop-nav a.btn-secondary:hover { color: var(--color-white); background: var(--color-primary); }

/* ---------------- Mobile drawer menu ---------------- */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(2,45,32,0.5);
  z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw);
  background: var(--color-white); z-index: 91; transform: translateX(100%);
  transition: transform var(--transition-slow); padding: 22px; overflow-y: auto;
  box-shadow: -20px 0 50px rgba(2,45,32,0.18);
}
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.drawer nav { display: flex; flex-direction: column; gap: 3px; }
.drawer nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px;
  border-radius: var(--radius-sm); font-weight: 500; color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}
.drawer nav a:hover { background: var(--color-cream); color: var(--color-primary); padding-left: 16px; }
.drawer nav a svg { width: 19px; height: 19px; color: var(--color-primary); }
.drawer-divider { height: 1px; background: rgba(6,63,43,0.1); margin: 14px 0; }

/* ---------------- Bottom mobile navigation ---------------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--bottomnav-height);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(6,63,43,0.1);
  display: flex;
  box-shadow: 0 -8px 24px rgba(2,45,32,0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 10.5px; color: var(--color-primary); font-weight: 600;
  padding: 0 2px;
  transition: color var(--transition-fast);
}
.bottom-nav a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Icônes "remplies" vert forêt : un aplat de couleur en fond (fill-opacity
   légère) combiné à un trait plus épais, pour rester lisibles à distance
   tout en conservant le détail interne de chaque icône (coche, points...). */
.bottom-nav a svg {
  width: 24px; height: 24px;
  fill: currentColor; fill-opacity: 0.22;
  stroke-width: 2.25px;
  transition: transform var(--transition-fast), fill-opacity var(--transition-fast);
}
.bottom-nav a.active { color: var(--color-primary); font-weight: 700; }
.bottom-nav a.active svg { fill-opacity: 0.32; transform: translateY(-1px); }
.bottom-nav a.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--color-gold);
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(2,45,32,0.32) 0%, rgba(2,45,32,0.58) 55%, rgba(2,45,32,0.94) 100%),
    var(--hero-image, linear-gradient(135deg, #0a4a33, #063F2B)) center/cover no-repeat;
}
.hero-content {
  padding: 48px 0 40px; position: relative; z-index: 2;
  animation: fébé-fade-up 0.7s var(--ease) both;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-title {
  color: var(--color-white); font-size: 34px; margin: 12px 0 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.hero-subtitle { font-size: 16px; color: rgba(255,255,255,0.9); max-width: 480px; margin: 0 auto 28px; }
.hero-actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px; width: 100%; max-width: 300px; margin: 0 auto;
}
.hero-actions .btn { width: 100%; }

@keyframes fébé-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero {
  position: relative;
  min-height: 260px;
  display: flex; align-items: flex-end;
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(2,45,32,0.22) 0%, rgba(2,45,32,0.88) 100%),
    var(--hero-image, linear-gradient(135deg, #0a4a33, #063F2B)) center/cover no-repeat;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  margin-bottom: 34px;
}
.page-hero .container { padding-bottom: 30px; }
.page-hero h1 { color: var(--color-white); margin: 8px 0 6px; font-size: 27px; text-shadow: 0 2px 16px rgba(0,0,0,0.22); }
.page-hero p { color: rgba(255,255,255,0.88); max-width: 520px; margin: 0; }

/* ---------------- Sections ---------------- */
section { padding: var(--space-7) 0; }
.section-head { margin-bottom: var(--space-6); }
.section-head h2 {
  font-size: 25px; margin: 8px 0 0; padding-bottom: 16px; position: relative; display: inline-block;
}
.section-head h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 3px;
  background: var(--color-gold);
}
.section-head p { color: var(--color-muted); max-width: 560px; margin-top: 14px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-cream { background: var(--color-cream); border-radius: var(--radius-xl); }

/* ---------------- Quick access grid ---------------- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.quick-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 20px 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.quick-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(201,164,76,0.35); }
.quick-item .quick-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--color-cream); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.quick-item:hover .quick-icon { background: var(--color-primary); color: var(--color-champagne); }
.quick-item .quick-icon.gold { background: rgba(201,164,76,0.18); color: var(--color-gold-dark); }
.quick-item:hover .quick-icon.gold { background: var(--color-gold); color: var(--color-dark); }
.quick-item .quick-icon svg { width: 21px; height: 21px; }
.quick-item span { font-size: 12.5px; font-weight: 600; color: var(--color-text); letter-spacing: 0.01em; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(201,164,76,0.3); }
.card-media { position: relative; aspect-ratio: 4/3; background: var(--color-cream); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.card:hover .card-media img { transform: scale(1.05); }
.card-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(2,45,32,0.88); color: var(--color-white);
  font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 17px; margin: 0 0 7px; transition: color var(--transition-fast); }
.card:hover .card-title { color: var(--color-primary); }
.card-desc { color: var(--color-muted); font-size: 13.5px; margin-bottom: 10px; line-height: 1.6; }
.card-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--color-muted); margin-bottom: 12px; flex-wrap: wrap; }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta svg { width: 15px; height: 15px; color: var(--color-gold-dark); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.price-tag { font-family: var(--font-serif); font-weight: 700; color: var(--color-primary); font-size: 16px; }
.price-tag small { font-family: var(--font-sans); font-weight: 500; color: var(--color-muted); font-size: 11.5px; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

/* ---------------- Petites cartes de caractéristiques (icône + libellé) ---------------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.feature-item {
  display: flex; align-items: center; gap: 13px;
  background: var(--color-white); border-radius: var(--radius-md); padding: 16px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(201,164,76,0.3); }
.feature-item .feature-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: 50%;
  background: var(--color-cream); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.feature-item .feature-icon svg { width: 20px; height: 20px; }
.feature-item p { font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.4; }

/* ---------------- Badges d'icônes colorés (grilles de services/loisirs) ---------------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 16px 8px;
  background: var(--color-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(201,164,76,0.3); }
.tile span.tile-label { font-size: 12px; font-weight: 600; color: var(--color-text); line-height: 1.3; }

.icon-badge {
  width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.icon-badge .lucide, .icon-badge svg { width: 22px; height: 22px; }
.icon-badge-green { background: rgba(6,63,43,0.09); color: var(--color-primary); }
.icon-badge-gold { background: rgba(201,164,76,0.16); color: var(--color-gold-dark); }
.icon-badge-cream { background: var(--color-cream); color: var(--color-primary); }
.tile:hover .icon-badge, .list-row:hover .icon-badge { background: var(--color-primary); color: var(--color-champagne); transform: scale(1.05); }

/* ---------------- Lignes de liste (points d'intérêt, découverte) ---------------- */
.list-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 13px 15px; margin-bottom: 10px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.list-row:hover { transform: translateX(4px); box-shadow: var(--shadow-lift); }
.list-row-body { flex: 1; min-width: 0; }
.list-row-title { font-size: 14.5px; font-weight: 600; color: var(--color-dark); margin-bottom: 2px; }
.list-row-desc { font-size: 12.5px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-desc.wrap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
.list-row-meta { font-size: 11.5px; color: var(--color-gold-dark); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.list-row-chevron { color: var(--color-muted); flex-shrink: 0; }

/* ---------------- Carte de salutation (accueil, utilisateur connecté) ---------------- */
.greeting-card {
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  color: var(--color-white);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-soft);
}
.greeting-card .eyebrow { color: var(--color-champagne); }
.greeting-card h2 { color: var(--color-white); font-size: 20px; margin: 6px 0 4px; }
.greeting-card p { color: rgba(255,255,255,0.78); font-size: 13.5px; margin-bottom: 16px; }
.greeting-next {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.greeting-next-info { font-size: 13px; color: rgba(255,255,255,0.85); }
.greeting-next-info strong { display: block; color: var(--color-white); font-size: 14.5px; margin-bottom: 2px; }

/* ---------------- Menu façon paramètres (profil) ---------------- */
.settings-menu { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06); overflow: hidden; }
.settings-menu a, .settings-menu button {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 16px; border-bottom: 1px solid rgba(6,63,43,0.06);
  background: none; border-left: none; border-right: none; border-top: none;
  font-size: 14px; font-weight: 500; color: var(--color-text); text-align: left; cursor: pointer;
  transition: background-color var(--transition-fast);
}
.settings-menu a:last-child, .settings-menu button:last-child { border-bottom: none; }
.settings-menu a:hover, .settings-menu button:hover { background: var(--color-cream); }
.settings-menu .icon-badge { width: 38px; height: 38px; min-width: 38px; }
.settings-menu .icon-badge svg { width: 18px; height: 18px; }
.settings-menu-label { flex: 1; }
.settings-menu-chevron { color: var(--color-muted); }
.settings-menu a.danger, .settings-menu button.danger { color: var(--color-danger); }
.settings-menu a.danger .icon-badge, .settings-menu button.danger .icon-badge { background: #fbeaea; color: var(--color-danger); }

/* ---------------- Carte de réservation compacte (mes réservations) ---------------- */
.res-card {
  display: flex; gap: 13px; align-items: center;
  background: var(--color-white); border-radius: var(--radius-md); padding: 12px;
  margin-bottom: 12px; box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.res-card-media { width: 76px; height: 76px; min-width: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-cream); }
.res-card-media img { width: 100%; height: 100%; object-fit: cover; }
.res-card-body { flex: 1; min-width: 0; }
.res-card-ref { font-size: 11px; color: var(--color-gold-dark); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 2px; }
.res-card-title { font-weight: 600; font-size: 14.5px; color: var(--color-dark); margin-bottom: 3px; }
.res-card-dates { font-size: 12.5px; color: var(--color-muted); margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.res-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------------- Compteur numérique (personnes, quantité) ---------------- */
.qty-stepper { display: flex; align-items: center; gap: 0; border: 1.5px solid rgba(6,63,43,0.16); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white); }
.qty-stepper button {
  width: 46px; height: 46px; flex-shrink: 0; border: none; background: var(--color-cream);
  color: var(--color-primary); font-size: 18px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--transition-fast);
}
.qty-stepper button:hover { background: var(--color-champagne); }
.qty-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-stepper input {
  flex: 1 1 auto; min-width: 0; border: none; border-radius: 0; text-align: center; min-height: 46px;
  font-size: 15px; font-weight: 600; color: var(--color-text); background: transparent; padding: 0;
}
.qty-stepper input:focus { outline: none; box-shadow: none; }
/* Masque les flèches natives du champ nombre : les boutons +/- suffisent. */
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input[type=number] { -moz-appearance: textfield; }

/* ---------------- Placeholder image ---------------- */
.placeholder-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-cream), var(--color-champagne));
  color: var(--color-primary);
}
.placeholder-img svg { width: 34px; height: 34px; opacity: 0.55; }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: var(--space-4); }
label, .form-label {
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--color-dark);
}
.form-control, .form-select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=tel], textarea, select {
  width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(6,63,43,0.16);
  background: var(--color-white);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea { min-height: 96px; padding-top: 12px; }
.form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6,63,43,0.12);
}
.form-control:hover, .form-select:hover, select:hover { border-color: rgba(6,63,43,0.3); }
.form-check-input { width: auto; min-height: 0; accent-color: var(--color-primary); }
.form-help { font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.form-errors { color: var(--color-danger); font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
/* Mobile-first : une seule colonne par défaut (360-412px), pour des champs
   de date/nombre confortables au toucher. Élargi en 2 puis 4 colonnes
   uniquement à partir des breakpoints tablette/desktop ci-dessous. */
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
fieldset { border: none; padding: 0; margin: 0; }

.search-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(6,63,43,0.06);
}

/* ---------------- Aperçu d'image dans les formulaires d'administration ---------------- */
.image-field-group { display: flex; flex-direction: column; gap: 10px; }
.image-preview {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-cream); border-radius: var(--radius-md); padding: 10px;
  border: 1px solid rgba(6,63,43,0.08);
}
.image-preview img {
  width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm);
  flex-shrink: 0; background: var(--color-white);
}
.image-preview-label { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.image-preview-label strong { display: block; color: var(--color-dark); font-size: 13px; margin-bottom: 2px; }

/* Carte de choix de méthode de paiement (réservation). */
.payment-option {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; margin-bottom: 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(6,63,43,0.14);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.payment-option:hover { border-color: var(--color-primary); }
.payment-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(6,63,43,0.04);
  box-shadow: 0 0 0 3px rgba(6,63,43,0.08);
}
.payment-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.payment-option.disabled { opacity: 0.55; cursor: not-allowed; }
.payment-option-body { flex: 1; }
.payment-option-title { font-weight: 600; font-size: 14.5px; color: var(--color-dark); }

/* ---------------- Alerts / messages ---------------- */
.messages { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.alert {
  padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent;
  animation: fébé-fade-up 0.3s var(--ease) both;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.alert-success { background: #eaf5ee; color: var(--color-success); border-color: #cfe9d9; }
.alert-error { background: #fbeaea; color: var(--color-danger); border-color: #f3d3d3; }
.alert-info { background: var(--color-cream); color: var(--color-dark); border-color: var(--color-champagne); }
.alert-warning { background: #fdf3e2; color: #8a611b; border-color: #f5e2b8; }

/* ---------------- Badges / status ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; }
.badge svg { width: 13px; height: 13px; }
.badge-pending { background: #fdf3e2; color: #8a611b; }
.badge-confirmed { background: #eaf5ee; color: var(--color-success); }
.badge-cancelled { background: #fbeaea; color: var(--color-danger); }
.badge-completed { background: #e8ecf5; color: #3c4f8a; }
.badge-paid { background: #eaf5ee; color: var(--color-success); }
.badge-failed { background: #fbeaea; color: var(--color-danger); }
.badge-neutral { background: var(--color-cream); color: var(--color-muted); }

/* ---------------- Bouton d'installation persistant (PWA) ---------------- */
.install-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom) + 14px);
  z-index: 65;
  animation: fébé-fade-up 0.4s var(--ease) both;
}
.install-fab[hidden] { display: none; }
@media (min-width: 768px) {
  .install-fab { bottom: 24px; right: 24px; }
}

/* ---------------- Dégagement de bas de page ---------------- */
/* Sans pied de page, c'est main qui garantit que le dernier contenu de
   chaque page ne soit jamais masqué par la barre de navigation fixe. */
main { display: block; padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom) + 24px); }

@media (min-width: 768px) {
  main { padding-bottom: 40px; }
  .bottom-nav { display: none; }
}

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 8px; border-bottom: 1px solid rgba(6,63,43,0.12); margin-bottom: 24px; overflow-x: auto; }
.tab {
  padding: 10px 4px; font-weight: 600; font-size: 14px; color: var(--color-muted);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-right: 22px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--color-primary); }
.tab.active { color: var(--color-primary); border-color: var(--color-gold); }

/* ---------------- Gallery ---------------- */
.gallery-filters { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 22px; padding-bottom: 4px; }
.gallery-filters a {
  padding: 9px 17px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--color-white); border: 1px solid rgba(6,63,43,0.14); color: var(--color-text); white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.gallery-filters a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gallery-filters a.active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-grid figure {
  position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 1; cursor: pointer; background: var(--color-cream);
  box-shadow: 0 2px 10px rgba(2,45,32,0.06);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figure::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 10px 9px;
  font-size: 11.5px; font-weight: 600; color: var(--color-white);
  background: linear-gradient(180deg, transparent, rgba(2,45,32,0.82));
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-grid figure[data-caption]:not([data-caption=""])::after { opacity: 1; transform: translateY(0); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(2,45,32,0.9); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-overlay img {
  max-height: 80vh; max-width: 100%; border-radius: var(--radius-md);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  transform: scale(0.97); transition: transform var(--transition-base);
}
.modal-overlay.open img { transform: scale(1); }
.modal-caption {
  color: rgba(255,255,255,0.85); font-size: 13.5px; text-align: center; min-height: 1.2em;
}
.modal-close {
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color var(--transition-fast);
}
.modal-close:hover { background: rgba(255,255,255,0.3); }

/* ---------------- Booking summary ---------------- */
.summary-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(6,63,43,0.08);
  position: sticky;
  top: calc(var(--header-height) + 12px);
}
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; border-bottom: 1px dashed rgba(6,63,43,0.14); }
.summary-row:last-child { border-bottom: none; }
.summary-total { font-family: var(--font-serif); font-size: 21px; font-weight: 700; color: var(--color-primary); }

.stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-muted); transition: color var(--transition-base); }
.step-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-cream); color: var(--color-muted);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.step.active .step-num { background: var(--color-primary); color: white; }
.step.active { color: var(--color-primary); }
.step-sep { width: 20px; height: 1px; background: rgba(6,63,43,0.15); }

/* ---------------- Confirmation ---------------- */
.confirm-hero { text-align: center; padding: 34px 0 10px; }
.confirm-icon {
  width: 78px; height: 78px; border-radius: 50%; background: #eaf5ee; color: var(--color-success);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  animation: fébé-pop 0.4s var(--ease) both;
}
.confirm-icon svg { width: 38px; height: 38px; }
@keyframes fébé-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
.reference-box {
  display: inline-block; background: var(--color-cream); padding: 11px 24px; border-radius: 999px;
  font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.04em; color: var(--color-primary);
  margin: 12px 0 28px; border: 1px solid rgba(201,164,76,0.4);
}

.recap-table { width: 100%; border-collapse: collapse; }
.recap-table td { padding: 12px 0; font-size: 14.5px; border-bottom: 1px solid rgba(6,63,43,0.08); }
.recap-table td:first-child { color: var(--color-muted); width: 45%; }
.recap-table td:last-child { text-align: right; font-weight: 600; }

/* ---------------- Auth pages ---------------- */
.auth-wrap { max-width: 420px; margin: 30px auto; }
.auth-card { background: var(--color-white); border-radius: var(--radius-xl); padding: 32px 26px; box-shadow: var(--shadow-soft); border: 1px solid rgba(6,63,43,0.06); }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-muted); }
.auth-switch a { color: var(--color-primary); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* ---------------- Empty state ---------------- */
.empty-state { text-align: center; padding: 56px 20px; color: var(--color-muted); }
.empty-state svg { width: 44px; height: 44px; margin-bottom: 16px; opacity: 0.45; color: var(--color-primary); }

/* ---------------- Utility ---------------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.hidden { display: none !important; }

/* =========================================================================
   Interface d'administration
   ========================================================================= */
.admin-shell { display: flex; min-height: 100vh; background: var(--color-bg); }
.admin-sidebar {
  width: 254px; background: var(--color-dark); color: rgba(255,255,255,0.85);
  padding: 22px 14px; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto;
  transform: translateX(-100%); transition: transform var(--transition-slow); z-index: 80;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.admin-sidebar.open { transform: translateX(0); }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 24px; color: white; }
.admin-brand strong { font-family: var(--font-serif); font-size: 16px; }
.admin-nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.68); margin-bottom: 2px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.admin-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav a:hover { background: rgba(255,255,255,0.07); color: white; }
.admin-nav a.active {
  background: rgba(201,164,76,0.16);
  color: var(--color-champagne);
  font-weight: 600;
}
.admin-nav a.active::before {
  content: "";
  position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-gold);
}
.admin-nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin: 18px 10px 8px; font-weight: 600; }

.admin-main { flex: 1; width: 100%; min-width: 0; }
.admin-topbar {
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: var(--color-white); border-bottom: 1px solid rgba(6,63,43,0.08);
  position: sticky; top: 0; z-index: 40;
}
.admin-content { padding: 22px 16px 60px; max-width: 1300px; }

/* Recherche globale du header admin : masquée sur mobile étroit pour éviter
   tout débordement du topbar (accessible autrement depuis le menu latéral). */
.admin-topbar-search { display: none; }
@media (min-width: 768px) {
  .admin-topbar-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--color-cream); border-radius: 999px; padding: 8px 16px;
    color: var(--color-muted); flex: 1; max-width: 320px; margin: 0 20px;
  }
  .admin-topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
  .admin-topbar-search input {
    border: none; background: none; min-height: auto; padding: 0; font-size: 13.5px; width: 100%;
  }
  .admin-topbar-search input:focus { outline: none; box-shadow: none; }
}

.notif-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--color-gold); color: var(--color-dark);
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--color-white);
}

/* Petit badge "+" superposé sur l'icône d'une tuile d'action rapide
   (ajouter une chambre, un service...), pour signaler clairement l'action. */
.tile-add-icon { position: relative; }
.tile-add-icon::after {
  content: "+";
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-gold); color: var(--color-dark);
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-white);
}

.dashboard-section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted);
  margin: 28px 0 14px;
}
.dashboard-section-title svg { width: 15px; height: 15px; color: var(--color-gold-dark); }
.dashboard-section-title:first-child { margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.stat-card {
  background: var(--color-white); border-radius: var(--radius-md); padding: 20px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-card .stat-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--color-cream); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 13px;
}
.stat-card .stat-icon svg { width: 19px; height: 19px; }
.stat-icon-gold { background: rgba(201,164,76,0.16) !important; color: var(--color-gold-dark) !important; }
.stat-icon-success { background: #eaf5ee !important; color: var(--color-success) !important; }
.stat-icon-danger { background: #fbeaea !important; color: var(--color-danger) !important; }
.stat-value { font-family: var(--font-serif); font-size: 25px; font-weight: 700; color: var(--color-dark); }
.stat-label { font-size: 12.5px; color: var(--color-muted); margin-top: 4px; }

.panel { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid rgba(6,63,43,0.06); margin-bottom: var(--space-5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid rgba(6,63,43,0.08); flex-wrap: wrap; gap: 10px; }
.panel-head h3 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 9px; }
.panel-head h3 svg { width: 18px; height: 18px; color: var(--color-gold-dark); }
.panel-body { padding: 20px; }

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); padding: 12px 14px; border-bottom: 1px solid rgba(6,63,43,0.1); white-space: nowrap; }
.data-table td { padding: 14px; font-size: 13.5px; border-bottom: 1px solid rgba(6,63,43,0.06); vertical-align: middle; }
.data-table td svg { width: 16px; height: 16px; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(6,63,43,0.025); }

.filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filters-bar > * { min-width: 140px; }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 10px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-chart .bar { width: 60%; background: linear-gradient(180deg, var(--color-gold), var(--color-primary)); border-radius: 6px 6px 2px 2px; min-height: 3px; transition: opacity var(--transition-base); }
.bar-chart .bar-col:hover .bar { opacity: 0.8; }
.bar-chart .bar-label { font-size: 10.5px; color: var(--color-muted); }

.action-row { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 992px) {
  .admin-sidebar { transform: translateX(0); position: sticky; height: 100vh; }
  .admin-content { padding: 30px 34px 60px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .admin-menu-toggle { display: none; }
}

/* =========================================================================
   Responsive — desktop
   ========================================================================= */
@media (min-width: 480px) {
  /* Au-delà des priorités 360/375/390/412px, deux colonnes redeviennent
     confortables pour les paires de champs (dates, nom/prénom...). */
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) {
  .quick-grid { grid-template-columns: repeat(6, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .hero { min-height: 86vh; }
  .hero-content { max-width: 720px; margin: 0 auto; }
  .hero-title { font-size: 47px; }
  .hero-subtitle { font-size: 18px; }
  .field-row { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .section-head h2 { font-size: 29px; }
}

@media (min-width: 900px) {
  .desktop-nav { display: flex; align-items: center; gap: 2px; }
  .mobile-menu-btn { display: none; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .booking-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
  .tile-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1024px) {
  .container { padding: 0 32px; }
  .page-hero h1 { font-size: 34px; }
}