/* CSS Variables */
:root {
  --brand: #A8C686;
  --brand-2: #B8D596;
  --brand-dark: #97B875;
  --ink: #1f2421;
  --paper: #ffffff;
  --bg: #f7f4ee;
  --shadow: rgba(31, 36, 33, 0.1);
  --shadow-dark: rgba(31, 36, 33, 0.15);
  --text-main: #171A1F;   /* texte courant */
  --text-gold: #AA916D;   /* liens et accents */
  --title-sauge: #5FA38B; /* titres uniquement */
  --sauge: #5FA38B; /* vert sauge foncé (comme le gros titre) */
  --gold: #AA916D; /* brun doré */
  --gold-hover: #8F7654;
  --gold-light: #C2A982; /* doré clair */
  --text-muted: #7A6A58;
  --radius: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll confortable sous la nav sticky */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* Empêcher le scroll horizontal */
}

section {
  scroll-margin-top: 90px;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-main);
  background: var(--bg);
  overflow-x: hidden; /* Empêcher le scroll horizontal */
  width: 100%;
  max-width: 100vw; /* Sécurité supplémentaire */
}

/* Système de couleurs dorées et vert sauge pour titres */
body, p, span, li, div, section {
  color: var(--text-main);
}

/* Titres en vert sauge uniquement */
h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .accordion-title, .modal-title,
.hero-title, .page-title {
  color: var(--title-sauge) !important;
}

/* Liens dans les titres héritent de la couleur du titre */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit !important;
}

/* Autres éléments en doré */
a, strong, .btn {
  color: var(--text-gold) !important;
}

/* Header - navigation en vert sauge */
header .navbar-brand,
header .nav-links a,
.nav .navbar-brand,
.nav-links a {
  color: var(--title-sauge) !important;
}

/* Bandeau supérieur - texte en beige clair */
.topbar,
.topbar span,
.topbar p,
.topbar a {
  color: #EBE1DA !important;
}

/* ===== Colonne gauche : Adresse / Téléphone / Horaires ===== */
/* Cible plusieurs noms de conteneurs pour s'adapter au projet */
.contact-info, .contact-infos, .infos, .info-list, .sidebar, .left-col, .left-panel {
  color: var(--gold);
}
.contact-info *,.contact-infos *,.infos *,.info-list *,.sidebar *,.left-col *,.left-panel *{
  color: var(--gold) !important;
}
.contact-info a,.contact-infos a,.infos a,.info-list a,.sidebar a,.left-col a,.left-panel a{
  color: var(--gold) !important;
  text-decoration: none;
}
.contact-info a:hover,.contact-infos a:hover,.infos a:hover,.info-list a:hover,.sidebar a:hover,.left-col a:hover,.left-panel a:hover{
  color: var(--gold-hover) !important;
}

/* ===== Icône du bouton téléphone flottant : blanche ===== */
/* Laisser le background tel quel, ne changer que l'icône */
.fab svg, .floating-call svg, .btn-call svg, .call-button svg,
.fab i,   .floating-call i,   .btn-call i,   .call-button i {
  color:#FFFFFF !important;
  fill:#FFFFFF !important;
  stroke:#FFFFFF !important;
}

/* si l'icône est chargée en img/masque, sécurité : */
.fab img.icon, .floating-call img.icon, .btn-call img.icon, .call-button img.icon {
  filter: brightness(0) invert(1) !important; /* rend blanc */
}

/* ===== Titres des sections accordéon ===== */
details summary,
.accordion-header,
.accordion-title,
.toggle-title {
  color: var(--gold) !important;
  font-weight: 600;
  cursor: pointer;
}

.section-title {
  font-weight: 600;
  cursor: pointer;
}

/* Option : hover un peu plus foncé */
details summary:hover,
.accordion-header:hover,
.accordion-title:hover,
.toggle-title:hover {
  color: var(--gold-hover) !important;
}

/* ===== Contenu des prestations en brun doré (hors prix) ===== */
/* Intérieur des sections (prestations + durées) */
.accordion-content,
details .content,
.service-item,
.service-title,
.service-description,
.service-duration,
.tarifs-ui .tarif-item,
.tarifs-ui .tarif-item .title,
.tarifs-ui .tarif-item .duration,
.tarif-panel,
.category-subtitle,
.info-dot {
  color: var(--gold) !important;
}

/* Les prix restent verts → on les exclut */
.service-price,
.price,
.tarif,
.tarifs-ui .tarif-item .price {
  color: #A8C686 !important; /* garder la couleur verte d'origine */
}

/* Utilities */
.container, .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px); /* Gouttières fluides : 16px mobile -> 40px desktop */
  width: 100%;
  box-sizing: border-box;
}

.section {
  padding: clamp(40px, 8vw, 80px) 0; /* Espacements verticaux adaptatifs */
  overflow-x: hidden; /* Sécurité anti-débordement */
}

.grid {
  display: grid;
  gap: clamp(16px, 3vw, 32px); /* Gap adaptatif */
  width: 100%;
}

.g2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); /* Éviter débordement */
}

.g3 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); /* Éviter débordement */
}

/* Responsive grilles : forcer 1 colonne sur très petit mobile */
@media (max-width: 360px) {
  .g2, .g3 {
    grid-template-columns: 1fr;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  background: transparent;
  color: var(--brand);
}

.btn:hover {
  background: var(--brand);
  color: #EBE1DA;
  transform: translateY(-2px);
}

.btn.primary {
  background: var(--brand);
  color: #EBE1DA;
}

.btn.primary:hover {
  background: var(--brand-dark);
}

.btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #EBE1DA;
}

.btn-whatsapp:hover {
  background: #128C7E;
  border-color: #128C7E;
}

.btn-facebook {
  background: #1877F2;
  border-color: #1877F2;
  color: #EBE1DA;
}

.btn-facebook:hover {
  background: #166FE5;
  border-color: #166FE5;
}

.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 4px 20px var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-dark);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--ink);
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--brand);
  text-align: center;
  margin-bottom: 48px;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* Responsive h3 */
  color: var(--ink);
  word-wrap: break-word; /* Éviter débordement des longs titres */
  hyphens: auto;
}

p {
  margin-bottom: 16px;
  opacity: 0.9;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Images fluides globalement */
img, picture, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Word-break pour éviter les débordements */
p, li, td, th, div, span {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Empêcher les URLs et mots longs de déborder */
a, code, pre {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Topbar */
.topbar,
header .topbar,
.banner,
.ribbon {
  background-color: var(--sauge) !important;
  color: #EBE1DA !important;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.topbar span,
.topbar p,
.topbar a {
  color: #EBE1DA !important;
  text-decoration: none;
  font-weight: 500;
}

.topbar a:hover {
  text-decoration: underline;
}

/* Header - sticky et au-dessus de tout */
.site-header,
.header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10010; /* Au-dessus de la modal (10009) et du FAB (10005) */
  background: var(--header-bg, var(--paper));
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 10px var(--shadow);
}

.site-header .container,
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.brand,
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-heading);
}

.brand-title,
.brand-text {
  font-weight: 700;
  color: var(--sauge) !important;
  font-size: 1.25rem;
}

.brand-logo,
.logo-lisa {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  object-fit: cover;
  background: #fff;
  padding: 2px;
  border: 1px solid #D2BA9E;
}

/* Pill "Nouveautés" visible sur tous les écrans */
.nav-pill-nouveautes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pill-bg, #5FA38B);
  color: var(--pill-color, #fff);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 6px 18px rgba(95, 163, 139, 0.2);
  text-decoration: none;
  height: 40px;
  min-width: 96px;
  margin: 0 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-pill-nouveautes:hover,
.nav-pill-nouveautes:focus {
  background: #4d8a76;
  box-shadow: 0 8px 22px rgba(95, 163, 139, 0.3);
  transform: translateY(-1px);
  color: #fff !important;
}

.nav-pill-nouveautes:active {
  transform: translateY(0);
}

/* Mobile : forcer la visibilité du pill */
@media (max-width: 1024px) {
  .nav-pill-nouveautes {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.75rem;
    padding: 6px 12px;
    height: 36px;
    min-width: 80px;
    margin: 0 4px;
  }

  /* Ajuster la hauteur du header en mobile */
  .site-header,
  .header {
    --header-height: 56px;
  }
}

/* === MEDIA QUERIES OPTIMISÉES POUR TOUS LES APPAREILS === */

/* Très petit mobile : 360px et moins */
@media (max-width: 360px) {
  .container, .wrap {
    padding: 0 12px; /* Gouttières minimales */
  }
  
  .section {
    padding: 32px 0; /* Moins d'espace vertical */
  }
  
  .brand-title, .brand-text {
    font-size: 1.1rem; /* Titre brand plus petit */
  }
  
  .brand-logo, .logo-lisa {
    height: 28px;
    width: 28px;
  }
}

/* Petit mobile : 361px - 390px (iPhone 12, etc.) */
@media (min-width: 361px) and (max-width: 390px) {
  .container, .wrap {
    padding: 0 14px;
  }
  
  .brand-logo, .logo-lisa {
    height: 30px;
    width: 30px;
  }
}

/* Mobile moyen : 391px - 640px */
@media (min-width: 391px) and (max-width: 640px) {
  .container, .wrap {
    padding: 0 16px;
  }
  
  .brand-logo, .logo-lisa {
    height: 32px;
    width: 32px;
  }
}

/* Tablette : 641px - 768px */
@media (min-width: 641px) and (max-width: 768px) {
  .container, .wrap {
    padding: 0 clamp(20px, 3vw, 32px);
  }
  
  h1 {
    font-size: clamp(2.25rem, 4vw, 2.75rem);
  }
}

/* Tablette large / petit laptop : 769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .container, .wrap {
    padding: 0 clamp(24px, 3vw, 36px);
  }
}

/* Desktop large : 1025px - 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
  .container, .wrap {
    padding: 0 clamp(32px, 3vw, 40px);
  }
}

/* Très grand écran : au-delà de 1440px */
@media (min-width: 1441px) {
  .container, .wrap {
    max-width: 1400px;
    padding: 0 40px;
  }
}

.hero {
  position: relative;
  background-image: url("./assets/hero/lisa-cover-garden.jpg");
  background-size: cover;
  background-position: 40% 50%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  width: 100%;
  overflow: hidden; /* Empêcher débordement */
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

.hero h1,
.hero p {
  position: relative;
  z-index: 2;
}

/* Hamburger button */
.hamburger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  width: 26px;
  height: 2px;
  background: #333;
  display: block;
  transition: transform .25s, opacity .25s;
}

/* Animation hamburger actif */
.hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav desktop - CACHÉ par défaut, affiché uniquement sur desktop */
.nav {
  display: none;
}

/* Bouton hamburger - CACHÉ par défaut, affiché sur mobile */
.hamburger {
  display: none;
}

/* Menu header (MENU) - caché par défaut */
.menu-header {
  display: none;
}

/* Bouton de fermeture du menu (X) - caché par défaut */
.nav-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.nav-close span {
  font-size: 28px;
  color: var(--sauge);
  line-height: 1;
}

.nav-close:hover {
  background-color: rgba(95, 163, 139, 0.1);
}

/* Desktop (769px et plus) : menu horizontal classique */
@media (min-width: 769px) {
  .nav {
    display: flex;
  }

  .nav ul,
  .nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav a,
  .nav-links a,
  .nav-links .nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: var(--transition);
  }

  .nav a:hover,
  .nav-links a:hover,
  .nav-links .nav-link:hover {
    color: var(--sauge);
  }

  /* Badge Nouveautés sur desktop */
  .nav-link-badge {
    background: linear-gradient(135deg, #5FA38B, #4d8a76) !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
  }

  .nav-link-badge:hover {
    background: linear-gradient(135deg, #4d8a76, #5FA38B) !important;
  }
}

/* ========================================
   NAVIGATION MOBILE FINAL (max-width: 991px)
   Ne pas toucher au desktop !
   ======================================== */
@media (max-width: 991px) {
  
  /* PAS D'OVERLAY - détection de clics via JavaScript */
  
  /* Menu mobile - panneau coulissant à droite */
  #menu-drawer,
  .nav {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 380px;
    background: #ffffff !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: block !important;
    padding: 70px 20px 32px 20px;
    z-index: 200 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Menu OUVERT */
  body.menu-mobile-open #menu-drawer,
  body.menu-mobile-open .nav {
    transform: translateX(0);
  }

  /* Scroll-lock quand menu ouvert */
  body.menu-mobile-open {
    overflow: hidden !important;
  }

  /* Masquer bouton X de fermeture */
  .nav-close {
    display: none !important;
  }

  /* Liens - FORCER la cliquabilité */
  #menu-drawer a,
  .nav a,
  .nav-links a {
    display: block !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-tap-highlight-color: rgba(95, 163, 139, 0.2) !important;
    touch-action: manipulation !important;
  }

  /* Titre MENU en haut */
  .menu-header {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
  }

  /* Liste des liens - FORCER position static pour rester dans le panneau */
  .nav ul,
  .nav-links {
    position: static !important;
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .nav li {
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
  }

  .nav li:last-child {
    margin-bottom: 0 !important;
  }

  /* TOUS les liens normaux (sauf badge) - TEXTE TRÈS VISIBLE */
  .nav a:not(.nav-link-badge),
  .nav-links a:not(.nav-link-badge),
  .nav-links .nav-link:not(.nav-link-badge) {
    display: block !important;
    width: 100%;
    padding: 18px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c2c2c !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: left !important;
    line-height: 1.4;
  }

  .nav a:not(.nav-link-badge):hover,
  .nav-links a:not(.nav-link-badge):hover,
  .nav-links .nav-link:not(.nav-link-badge):hover {
    background-color: rgba(95, 163, 139, 0.1) !important;
    color: #5FA38B !important;
  }

  /* Badge "Nouveautés" - style pilule arrondie - HAUTE PRIORITÉ */
  .nav .nav-links .nav-link-badge,
  .nav-links .nav-link-badge,
  a.nav-link-badge {
    display: block !important;
    background: linear-gradient(135deg, #5FA38B, #4d8a76) !important;
    background-color: #5FA38B !important;
    color: #ffffff !important;
    padding: 14px 24px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(95, 163, 139, 0.3) !important;
    transition: all 0.3s ease !important;
    margin: 0 0 18px 0 !important;
  }

  .nav .nav-links .nav-link-badge:hover,
  .nav-links .nav-link-badge:hover,
  a.nav-link-badge:hover {
    background: linear-gradient(135deg, #4d8a76, #5FA38B) !important;
    background-color: #4d8a76 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(95, 163, 139, 0.4) !important;
    color: #ffffff !important;
  }

  .hamburger {
    display: flex;
  }
}

/* Tablette : ajuste tailles si besoin */
@media (min-width: 769px) and (max-width: 1024px) {
  .brand-title {
    font-size: 1.35rem;
  }

  .nav ul {
    gap: 16px;
  }
}

/* Empêcher le scroll quand menu ouvert */
.body-locked {
  overflow: hidden;
}

/* Hero Static */
.hero.static {
  position: relative;
  min-height: 72vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero.static .hero-bg {
  position: absolute;
  inset: 0;
}

.hero.static::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.46), rgba(0,0,0,.28));
}

.hero-inner {
  position: relative;
  color: #EBE1DA;
  text-align: center;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}


.hero .btn {
  margin-right: 8px;
  border-color: #fff;
  color: #EBE1DA;
}

.hero .btn.primary {
  background: #fff;
  border-color: #fff;
  color: #111;
}

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero h1 {
  color: #5FA38B;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.25);
  margin-bottom: 24px;
}

.hero p,
.hero .subtitle,
.hero .lead,
.hero .description,
.hero-text-secondary {
  color: #EBE1DA;
  opacity: 0.95;
  text-shadow: 0 2px 8px rgba(0,0,0,0.30);
  font-size: 1.2rem;
  margin-bottom: 32px;
}

/* Scroller */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(320px, 85vw), 1fr); /* Éviter débordement sur petits écrans */
  gap: clamp(10px, 2vw, 14px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  width: 100%; /* Empêcher débordement du conteneur */
  max-width: 100%;
  -webkit-overflow-scrolling: touch; /* Smooth scroll sur iOS */
}

.scroller img {
  width: 100%;
  height: clamp(180px, 25vw, 200px); /* Hauteur adaptative */
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  scroll-snap-align: start;
  cursor: zoom-in;
}

.scroller::-webkit-scrollbar {
  height: 0;
}

/* Mobile : scroller encore plus petit */
@media (max-width: 390px) {
  .scroller {
    grid-auto-columns: minmax(min(280px, 90vw), 1fr);
    gap: 10px;
  }
  
  .scroller img {
    height: 160px;
  }
}

/* Cards mini */
.cards-mini .mini {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  padding: 16px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

.cards-mini .mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

.cards-mini .mini span {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
}

.cards-mini .mini h3 {
  color: var(--gold) !important;
  font-weight: 600;
  font-size: 1.2rem;
  margin: .3em 0 .2em;
}

.cards-mini .mini p {
  color: var(--gold-light) !important;
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 500;
}

/* Details cards */
details.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  padding: 14px;
  margin-bottom: 16px;
}

details.card summary {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

details.card summary:hover {
  background-color: var(--bg);
}

details.card[open] summary {
  margin-bottom: 12px;
}

/* Price list */
.plist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.pitem:last-child {
  border-bottom: none;
}

.pitem .price {
  font-weight: 600;
  color: var(--brand);
  font-size: 1.1rem;
}

/* Tarifs images - responsive grid 1→2 colonnes */
.tarifs-imgs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.tarifs-imgs img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Desktop : 2 colonnes pour les cartes d'images */
@media (min-width: 768px) {
  .tarifs-imgs {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* Mobile : full width et images bien lisibles */
@media (max-width: 375px) {
  .tarifs-imgs {
    gap: 12px;
  }
}

/* ===== À propos — bloc déroulant ===== */
:root {
  --about-bg: #f7f4ee;             /* fond clair de la page */
  --about-accent: #A8C686;         /* vert amande du site */
  --about-radius: 14px;
}

/* ====== Scope strict À PROPOS ====== */

/* Tous les titres de sections en vert sauge */

/* À propos : Titres & sous-titres en vert sauge */
#about h1, #about h2, #about h3,
.about h1, .about h2, .about h3,
#about .section-title, .about .section-title,
#about .subtitle, .about .subtitle {
  color: #5FA38B !important; /* vert sauge */
  font-weight: 600;
}

/* À propos : Corps du texte en doré doux */
#about p, #about li,
.about p, .about li,
#about .text, .about .text {
  color: #D2BA9E !important; /* doré doux */
  line-height: 1.75;
}

/* À propos : Petites notes / signature */
#about .signature, .about .signature,
#about small, .about small {
  color: #D2BA9E !important;
  font-style: italic;
}

/* Protection : prix/boutons gardent leur couleur héritée */
#about .price, .about .price,
#about .btn, .about .btn { 
  color: inherit !important; 
}

/* === NOUVEAUTÉS — centrage & style propre === */
/* Couleurs thème */
:root{
  --sauge:#5FA38B;
  --dore:#D2BA9E;
  --ivoire:#EBE1DA;
  --encre:#2f2b26;
}

/* Overlay centré, paddings safe-area - EXIGENCE : toujours au-dessus de tout */
.modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* EXIGENCE : Espace haut = safe-area + 24px minimum */
  padding: max(env(safe-area-inset-top, 24px), 24px) 
           max(env(safe-area-inset-right, 16px), 16px) 
           max(env(safe-area-inset-bottom, 16px), 16px) 
           max(env(safe-area-inset-left, 16px), 16px);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px) saturate(115%);
  z-index: 10000; /* EXIGENCE : Au-dessus de tout (header 1000, nav 1100, FAB 1000) */
  overflow: hidden; /* Pas de scroll sur l'overlay */
}
.modal.hidden{ 
  display: none; 
}

.modal-panel{
  width: min(900px, 100%); /* Largeur max 900px comme requis */
  /* Hauteur maximale = 100% de la hauteur visible */
  max-height: calc(100dvh - max(env(safe-area-inset-top, 24px), 24px) - max(env(safe-area-inset-bottom, 16px), 16px) - 48px);
  /* Fallback pour navigateurs sans dvh */
  max-height: calc(100vh - max(env(safe-area-inset-top, 24px), 24px) - max(env(safe-area-inset-bottom, 16px), 16px) - 48px);
  overflow-y: auto; /* Scroll interne uniquement */
  overflow-x: hidden; /* Jamais de scroll horizontal */
  -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
  /* fond + bord élégant (gradient border) */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #EAD9C7, #5FA38B33) border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(0,0,0,.22);
  /* Padding interne régulier avec safe-area */
  padding: max(env(safe-area-inset-top, 24px), 24px) 24px max(env(safe-area-inset-bottom, 20px), 20px);
  position: relative;

  /* animation douce d'apparition */
  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.modal.open .modal-panel{ 
  transform: none; 
  opacity: 1; 
}

/* bouton croix - toujours visible */
.modal-x{
  position: sticky; /* Sticky pour rester visible pendant le scroll */
  top: 0.6rem;
  right: 0.6rem;
  float: right;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 10px;
  z-index: 10; /* Au-dessus du contenu */
  margin-bottom: -2.5rem; /* Compenser pour ne pas pousser le contenu */
}
.modal-x:hover{ background: #f6f2ee; }

/* En-tête centré (pills) */
.modal-head{
  display:flex; justify-content:center; align-items:center;
  gap:.6rem; margin:.25rem 0 .75rem;
}
.pill{
  display:inline-flex; align-items:center;
  font-weight:600; font-size:.9rem;
  padding:.38rem .65rem; border-radius:999px;
  border:1px solid transparent;
}
.pill-sage{ color:#2c6e5b; background:#EAF4F0; border-color:#5FA38B20; }
.pill-muted{ color:#6b5b4d; background:#FFF8F2; border-color:#D2BA9E66; }

/* === STYLES AMÉLIORÉS POUR LE MODAL NOUVEAUTÉS === */
/* En-tête amélioré pour le modal Nouveautés */
#nouveautes-modal .modal-head{
  display:flex; justify-content:space-between; align-items:center;
  margin:.25rem 0 1.5rem; position: relative;
}

#nouveautes-modal .news-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--title-sauge);
  margin: 0;
  flex: 1;
  text-align: center;
}

#nouveautes-modal .news-badge {
  position: absolute;
  top: -8px;
  right: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #EAF3EF;
  color: var(--sauge);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Amélioration du panneau modal */
#nouveautes-modal .modal-panel {
  background: #FEFCFA;
  border-radius: 24px;
  box-shadow: 0 32px 64px rgba(0,0,0,.15);
  padding: 28px 28px 24px;
}

/* EXIGENCE : Aucun débordement possible dans la modal */
#nouveautes-modal .modal-panel,
#nouveautes-modal .modal-panel * {
  box-sizing: border-box !important;
}

#nouveautes-modal .news-content,
#nouveautes-modal .news-list,
#nouveautes-modal .news-items,
#nouveautes-modal .news-item-featured {
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Contenu des nouveautés */
.news-content {
  margin: 1rem 0;
}

.news-list {
  max-width: 100%;
}

/* Item featured avec image */
.news-item-featured {
  background: #F9F7F4;
  border-radius: 16px;
  padding: 20px;
  margin: 0 0 16px 0 !important;
  border: 1px solid #EAE2D9;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.news-item-featured::before {
  display: none !important;
}

.news-subtext {
  font-size: 0.95rem;
  color: #6b5b4d;
  margin-top: 6px;
  display: block;
}

/* Image dans le modal - EXIGENCE : jamais plus large que le cadre */
.news-image-container {
  margin-top: 16px;
  text-align: center;
  max-width: 100% !important;
  overflow: hidden !important;
}

.news-image {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block !important;
  object-fit: cover !important;
}

.news-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.image-caption {
  font-size: 0.8rem;
  color: #8b7d72;
  margin-top: 8px;
  font-style: italic;
}

/* Amélioration des autres items de la liste */
#nouveautes-modal .news-items li:not(.news-item-featured) {
  line-height: 1.6;
  margin: 12px 0;
  padding-left: 1.2rem;
}

#nouveautes-modal .news-items li:not(.news-item-featured)::before {
  top: 0.7rem;
}

/* Amélioration des boutons */
#nouveautes-modal .modal-foot {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 1.5rem;
}

#nouveautes-modal .btn {
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

#nouveautes-modal .btn-primary {
  background: var(--sauge);
  box-shadow: 0 2px 8px rgba(95,163,139,.25);
}

#nouveautes-modal .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(95,163,139,.35);
}

#nouveautes-modal .btn-ghost {
  border: 1px solid #D2BA9E;
}

#nouveautes-modal .btn-ghost:hover {
  background: #F9F5F1;
  transform: translateY(-1px);
}

/* Intro centrée */
.modal-intro{ text-align:center; color:#6b5b4d; margin:0 0 .6rem; }

/* Liste propre, bullets indépendants du bord */
.news-items{ margin:0 0 1rem; padding:0; list-style:none; color:var(--encre); }
.news-items li{
  position:relative;
  margin:.48rem 0;
  padding-left:1.05rem;         /* espace pour la puce */
}
.news-items li::before{
  content:"";
  position:absolute; left:0; top:.58rem;
  width:.44rem; height:.44rem; border-radius:50%;
  background: var(--sauge);
  box-shadow: 0 0 0 3px #EAF4F0; /* halo doux */
}

/* Pied centré */
.modal-foot{
  display:flex; justify-content:center; gap:.6rem; align-items:center;
}

/* Boutons */
.btn{
  border-radius:999px; padding:.6rem .95rem; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--sauge); color:#fff; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ background:transparent; color:#6b5b4d; border-color:var(--dore); }
.btn-ghost:hover{ background:#f9f5f1; }

/* Scrollbar discrète dans la modale (optionnel) */
.modal-panel::-webkit-scrollbar{ width:10px }
.modal-panel::-webkit-scrollbar-thumb{
  background:#e9e1da; border-radius:10px; border:3px solid #fff;
}


/* === Variables FAB (Floating Action Buttons) et Header === */
:root { 
  --sauge: #5FA38B;
  --fab-gap: clamp(12px, 2.5vh, 24px);
  --fab-size: clamp(56px, 10vw, 72px);
  --header-height: 64px; /* Ajusté dynamiquement par JS */
  --header-bg: #FEFCFA;
  --pill-bg: #5FA38B;
  --pill-color: #fff;
}

/* Cible plusieurs variantes possibles du bouton */
#newsBtn,
.nav .btn-nouveautes,
[aria-controls="news-modal"],
[data-modal="news"],
.site-header nav .news-btn,
.site-header nav a[href*="nouveaut"] {
  background: var(--sauge);
  color: #fff !important;
  border: 1px solid var(--sauge);
  border-radius: 999px;
  padding: .45rem .85rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 0 #4b806a inset, 0 8px 20px rgba(95,163,139,.18);
  transition: filter .15s ease, box-shadow .2s ease, transform .08s ease;
}

/* Effets au survol / focus */
#newsBtn:hover,
.nav .btn-nouveautes:hover,
[aria-controls="news-modal"]:hover,
[data-modal="news"]:hover,
.site-header nav .news-btn:hover,
.site-header nav a[href*="nouveaut"]:hover {
  filter: brightness(.95);
  box-shadow: 0 1px 0 #4b806a inset, 0 10px 24px rgba(95,163,139,.28);
  transform: translateY(-1px);
}

#newsBtn:focus-visible,
.nav .btn-nouveautes:focus-visible,
[aria-controls="news-modal"]:focus-visible,
[data-modal="news"]:focus-visible,
.site-header nav .news-btn:focus-visible,
.site-header nav a[href*="nouveaut"]:focus-visible {
  outline: 2px solid #EAF4F0;
  outline-offset: 2px;
}

.about-text {
  position: relative;
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--text-main);
}

.about-text.about-collapsed {
  max-height: 28rem;               /* hauteur visible initiale */
  overflow: hidden;
  transition: max-height 300ms ease;
}

/* dégradé de fin quand c'est replié */
.about-text.about-collapsed:not(.expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5.5rem;
  background: linear-gradient(180deg, rgba(247,244,238,0) 0%, var(--about-bg) 90%);
  pointer-events: none;
  border-bottom-left-radius: var(--about-radius);
  border-bottom-right-radius: var(--about-radius);
}

/* État ouvert */
.about-text.expanded {
  max-height: 200rem;              /* "grand" pour laisser tout le texte */
  overflow: visible;
}
.about-text.expanded::after { 
  display: none; 
}

/* Bouton */
.about-actions {
  margin-top: 1rem;
}
.about-toggle {
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--about-accent);
  color: var(--about-accent);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  cursor: pointer;
}
.about-toggle:hover {
  background: var(--about-accent);
  color: #EBE1DA;
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .about-text.about-collapsed { 
    transition: none; 
  }
}

/* Grille */
.about-grid { 
  display: grid; 
  gap: 1.25rem; 
}
@media (min-width: 960px) {
  .about-grid {
    grid-template-columns: 1fr 1fr; /* texte / images */
    align-items: start;
  }
  .about-actions { 
    grid-column: 1 / span 1; 
  }
}

/* About - compatibilité anciens styles */
.about-text p {
  margin-bottom: 1rem;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gallery img:first-child {
  grid-column: 1 / -1;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: zoom-in;
}

/* ===== Galerie harmonisée ===== */
.section-galerie {
  padding: 60px 0;
  background: #FAF7F2;
}

.galerie-title {
  text-align: center;
  font-size: clamp(30px, 3.5vw, 44px);
  color: #5FA38B;
  margin-bottom: 10px;
}

.galerie-subtitle {
  text-align: center;
  color: rgba(0,0,0,0.55);
  font-style: italic;
  margin-bottom: 35px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); /* Éviter débordement */
  gap: clamp(12px, 2vw, 20px); /* Gap adaptatif */
  width: 100%;
}

/* Sur très petit mobile : 1 colonne */
@media (max-width: 360px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-item {
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.hint {
  text-align: center;
  color: #666;
  font-style: italic;
  margin-bottom: 32px;
}

/* Data-driven tarifs */
.tarifs-accordions details.card{margin-bottom:14px}
.tarifs-accordions .plist{display:grid;grid-template-columns:1fr auto;gap:10px 14px}
.tarifs-accordions .plist li{display:contents;border-top:1px solid #eee;padding-top:10px}
.tarifs-accordions .plist li:first-child{border-top:0;padding-top:0}
.tarifs-imgs{display:grid;gap:12px}
.tarifs-imgs img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* Mise en évidence temporaire quand on ouvre un accordéon depuis l'aperçu */
details.card.pulse {
  box-shadow: 0 0 0 3px rgba(168,198,134,.25), 0 12px 30px rgba(0,0,0,.08);
  transition: box-shadow .3s ease;
}

/* Contact */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  width: 24px;
  height: 24px;
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-item strong {
  color: var(--brand);
}

.contact-item a {
  color: var(--ink);
  text-decoration: none;
}

.contact-item a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contact-buttons .btn {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

.map-container {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  height: 400px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--brand);
  color: #EBE1DA;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.map-link:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

/* Footer */
.footer {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  padding: 40px 0;
  margin-top: 60px;
}

.footer p {
  margin: 0;
  opacity: 0.8;
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: var(--brand);
  color: #EBE1DA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px var(--shadow-dark);
  z-index: 1000;
  transition: var(--transition);
}

.fab:hover {
  background: var(--brand-dark);
  transform: scale(1.1);
}

/* Mobile : position gérée par vyrel-fix plus bas */

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  padding: 16px;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lightbox .close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
  .container, .wrap {
    padding: 0 16px;
  }

  .burger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 73px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 73px);
    background: var(--bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    transition: right 0.3s ease;
    box-shadow: 0 4px 20px var(--shadow);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links li {
    margin: 16px 0;
  }

  .nav-links a {
    font-size: 1.2rem;
  }

  .g2, .g3 {
    grid-template-columns: 1fr;
  }

  .hero.static {
    min-height: 60vh;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
  }

  .cta-row .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .scroller {
    grid-auto-columns: minmax(280px, 1fr);
  }

  .contact-buttons .btn {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* FAB position gérée par vyrel-fix */

  .fab svg {
    width: 20px;
    height: 20px;
  }

  .hero.static {
    min-height: 50vh;
  }

  .section {
    padding: 60px 0;
  }

  .lightbox .close {
    font-size: 30px;
    top: 10px;
    right: 20px;
  }

  .scroller {
    grid-auto-columns: minmax(240px, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    gap: 14px;
  }
  .gallery-item {
    aspect-ratio: 1 / 1;
  }
}

/* Focus styles for accessibility */
button:focus,
a:focus,
summary:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ======================
   NOUVEAU STYLE TARIFS UI
   ====================== */

/* Variables pour tarifs si pas encore définies */
:root {
  --tarifs-brand: #A8C686;
  --tarifs-ink: var(--text-main);
  --tarifs-muted: var(--text-main);
  --tarifs-card: #fff;
  --tarifs-border: #e6ebe7;
  --tarifs-shadow: 0 6px 24px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --tarifs-radius: 14px;
}

/* Accordéons de catégories (garder le style existant) */
.tarifs-ui .tarif-group {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  padding: 14px;
  margin-bottom: 16px;
}

.tarifs-ui .tarif-group summary {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.tarifs-ui .tarif-group summary:hover {
  background-color: var(--bg);
}

.tarifs-ui .tarif-group[open] summary {
  margin-bottom: 12px;
}

/* Cartes de contenu des catégories */
.tarifs-ui .group-card {
  background: var(--tarifs-card);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Items - nouvelle structure avec bouton direct */
.tarifs-ui .tarif-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e8efe9;
  padding: .9rem 1rem;
  border-radius: .8rem;
  transition: box-shadow .15s ease;
  font: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: .5rem;
}

.tarifs-ui .tarif-item:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.tarifs-ui .tarif-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tarifs-ui .tarif-item:not(.has-details) {
  cursor: default;
}

.tarifs-ui .tarif-item:not(.has-details):hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.tarifs-ui .tarif-item .title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--tarifs-ink);
}

.tarifs-ui .tarif-item .duration {
  color: #7a877f;
  font-weight: 400;
}

.tarifs-ui .tarif-item .price {
  margin-left: auto;
  font-weight: 700;
  color: #A8C686;
  background: rgba(168,198,134,.08);
  padding: .25rem .6rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Pastille info */
.info-dot {
  font-size: .85rem;
  opacity: .55;
}

/* Chevron rotatif */
.chevron {
  width: .7rem;
  height: .7rem;
  margin-left: .6rem;
  border-right: 2px solid #A8C686;
  border-bottom: 2px solid #A8C686;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.tarif-item[aria-expanded="true"] .chevron {
  transform: rotate(135deg);
}

/* Panel descriptif */
.tarif-panel {
  margin-top: .35rem;
  margin-bottom: .6rem;
  padding: .8rem 1rem .9rem 1rem;
  background: #f7faf8;
  border-left: 3px solid rgba(168,198,134,.3);
  border-radius: .6rem;
  color: var(--text-main);
  line-height: 1.6;
}

/* Items sans description = pas d'indices visuels */
.tarif-item:not(.has-details) .chevron,
.tarif-item:not(.has-details) .info-dot {
  display: none;
}

/* Sous-titre de catégorie */
.tarifs-ui .category-subtitle {
  font-style: italic;
  color: var(--tarifs-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.tarifs-ui .chevron {
  width: 18px; 
  height: 18px;
  border: 1px solid var(--tarifs-border);
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: transform .2s ease, background .2s ease;
}

.tarifs-ui .chevron::before {
  content: "";
  position: absolute; 
  inset: 0;
  margin: auto;
  width: 6px; 
  height: 6px;
  border-right: 2px solid var(--tarifs-muted);
  border-bottom: 2px solid var(--tarifs-muted);
  transform: rotate(45deg);
}

.tarifs-ui details[open] .chevron { 
  transform: rotate(180deg); 
  background: rgba(168,198,134,.06); 
}

/* Panneau descriptif */
.tarifs-ui .tarif-desc {
  padding: .35rem 1rem 1rem 1rem;
  margin: .15rem 0 0 0;
  color: var(--tarifs-muted);
  line-height: 1.6;
  border-left: 2px solid var(--tarifs-border);
  margin-left: 1rem;
  font-style: normal;
  border-bottom: none;
}

/* Lignes simples (sans description) */
.tarifs-ui .tarif-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem; 
  align-items: center;
  padding: .9rem 1rem;
  border-radius: 12px;
  border-bottom: 1px dashed var(--tarifs-border);
}

.tarifs-ui .tarif-row:hover { 
  background: rgba(168,198,134,.04); 
}

.tarifs-ui .tarif-row:last-child {
  border-bottom: none;
}

/* Accessibilité focus */
.tarifs-ui .tarif-summary:focus {
  outline: 3px solid rgba(168,198,134,.35);
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 560px) {
  .tarifs-ui .tarif-summary {
    grid-template-columns: 1fr auto 24px;
    padding: .85rem .85rem;
  }
  
  .tarifs-ui .price { 
    padding: .2rem .5rem; 
  }
  
  .tarifs-ui .tarif-desc { 
    margin-left: .5rem; 
    border-left-width: 1px; 
  }
}

/* Lien PDF */
.pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  background: var(--brand);
  color: #EBE1DA;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.pdf-download:hover {
  background: #97B875;
  color: #EBE1DA;
}

.pdf-download svg {
  width: 16px;
  height: 16px;
}

/* Style pour les liens dans le footer */
.footer a {
  color: #cccccc !important;
  text-decoration: none;
}

.footer a:hover {
  color: #EBE1DA !important;
  text-decoration: underline !important;
}


/* Style spécifique pour le bouton WhatsApp */
.btn[href*="wa.me"], 
.btn[href*="whatsapp"] {
  background: var(--brand) !important;
  color: #EBE1DA !important;
  border: none !important;
  cursor: pointer;
}

.btn[href*="wa.me"]:hover, 
.btn[href*="whatsapp"]:hover {
  background: var(--brand-dark) !important;
  color: #EBE1DA !important;
}

/* === Rangée d'icônes de contact === */
.contact-icons{
  display:flex; gap:14px; margin:14px 0 22px; flex-wrap:wrap; align-items:center;
}
.icon-pill{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#5FA38B; transition:transform .15s ease, box-shadow .15s ease;
}
.icon-pill svg{ width:22px; height:22px; }
.icon-pill svg path{ fill:#fff; }
.icon-pill:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.15); }

/* Couleurs officielles */
.icon-pill.call{ background:#5FA38B; }       /* vert sauge site */
.icon-pill.whatsapp{ background:#25D366; }  /* WhatsApp vert */
.icon-pill.facebook{ background:#1877F2; }  /* Facebook bleu */
.icon-pill.insta{ background:#E1306C; }     /* Instagram rose/rouge */

@media(max-width:640px){
  .contact-icons{ justify-content:flex-start; }
}

/* === Section Avis === */
.avis { padding: 48px 0; background: #f6f1ea; } /* léger contraste sur fond crème */
.avis .container { 
  max-width: 980px; 
  margin: 0 auto; 
  padding: 0 clamp(12px, 3vw, 16px); /* Padding adaptatif */
  width: 100%;
  box-sizing: border-box;
}
.avis h2 {
  font-size: 2rem; margin: 0 0 16px; color: #5FA38B; font-weight: 800;
}
.avis-summary { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 18px; }
.avis-summary .stars svg { width:22px; height:22px; fill: #D2BA9E; }
.avis-summary p { margin: 0; color:#6b5f4e; }
.btn-avis{
  display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none;
  background:#5FA38B; color:#fff; font-weight:700; transition:transform .15s, box-shadow .15s;
}
.btn-avis:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(95,163,139,.22); }

.avis-grid{
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
}

/* Tablette : 2 colonnes */
@media (max-width:900px){ 
  .avis-grid{ 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

/* Mobile : 1 colonne */
@media (max-width:560px){ 
  .avis-grid{ 
    grid-template-columns: 1fr; 
  } 
}

/* Très petit mobile : sécurité supplémentaire */
@media (max-width:390px){ 
  .avis-grid{ 
    gap: 12px;
  } 
}

.avis-card{
  background:#fff; border:1px solid #e7dfd4; border-radius:16px; padding:14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.avis-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.avis-author{ font-weight:700; color:#3c3c3c; }
.avis-stars span{ color:#D2BA9E; letter-spacing:.8px; font-weight:800; }
.avis-text{ color:#5a5246; line-height:1.5; margin: 6px 0 10px; }
.avis-date{ font-size:.9rem; color:#9a8f83; }
.avis-date:empty { display:none; }

:root{ --cream:#EDE8E4; }

/* Bouton "Laisser un avis" */
.btn-avis{
  color: var(--cream) !important;
}
.btn-avis:hover,
.btn-avis:focus{
  color: var(--cream) !important;
}
/* Si le libellé du bouton est dans un <span> interne */
.btn-avis span{ color: inherit !important; }

/* Section À propos (prends les principaux sélecteurs possibles) */
#apropos, .apropos, .section-about, .about{
  color: var(--cream) !important;
}
#apropos h1, #apropos h2, #apropos h3,
#apropos p,  #apropos li,
.section-about h1, .section-about h2, .section-about h3,
.section-about p,  .section-about li,
.about h1, .about h2, .about h3,
.about p,  .about li{
  color: var(--cream) !important;
}

/* (Option lisibilité sur fond clair) */
.section-about p{ text-shadow: 0 1px 0 rgba(0,0,0,.03); }

/* Print styles */
@media print {
  .header,
  .fab,
  .lightbox,
  .mentions-modal {
    display: none;
  }
}

/* Flyers grid styling */
.flyers-grid{ 
  display: flex;
  flex-wrap: wrap; /* Permet retour à la ligne */
  justify-content: center;
  gap: clamp(16px, 3vw, 30px); /* Gap adaptatif */
  margin: clamp(24px, 5vw, 40px) auto;
  max-width: 1200px;
  width: 100%;
  padding: 0 16px; /* Padding pour éviter débordement */
  box-sizing: border-box;
}
@media (max-width:900px){ 
  .flyers-grid{ 
    flex-direction: column;
    align-items: center;
    gap: 20px;
  } 
}
.flyer .flyer-img,
.flyer-img{
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
  border: none;
  background: none;
  clip-path: inset(0% 2% 2% 2%);
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  border-radius: 8px;
}

@media (max-width:600px){ 
  .flyer-img{
    max-width: min(400px, 100%); /* Ne jamais dépasser l'écran */
  } 
}

/* Très petit mobile : encore plus petit */
@media (max-width:390px){ 
  .flyer-img{
    max-width: 100%;
    border-radius: 6px;
  }
}

/* Footer text color */
footer,
footer p,
footer span {
  color: #F5F3EC !important;
}

/* === FORCER COULEUR BOUTONS MODAL NOUVEAUTÉS === */
/* Force la couleur du texte du bouton "Prendre RDV" à être blanc cassé comme le bouton header */
.modal-foot .btn-primary,
.modal-foot .btn-primary span,
#nouveautes-modal .modal-foot .btn-primary,
#nouveautes-modal .modal-foot .btn-primary span {
  color: #FDFDFD !important;
  fill: #FDFDFD !important;
}

/* Améliore la lisibilité du bouton "Fermer" avec vert sauge */
.modal-foot .btn-ghost,
.modal-foot .btn-ghost span,
#nouveautes-modal .modal-foot .btn-ghost,
#nouveautes-modal .modal-foot .btn-ghost span {
  color: #5FA38B !important;
  fill: #5FA38B !important;
}

/* Effet hover pour le bouton "Fermer" avec fond sauge transparent */
.modal-foot .btn-ghost:hover,
#nouveautes-modal .modal-foot .btn-ghost:hover {
  background-color: #5FA38B15 !important;
  color: #5FA38B !important;
}

/* === CONTACT INFO STYLES === */
.contact-item .info {
  font-size: 0.9em;
  color: #5FA38B;   /* vert de la charte */
  font-style: italic;
}

.contact-item .parking {
  font-size: 0.9em;
  color: #444;
  display: block;
  margin-top: 2px;
}

/* === BOUTON TÉLÉPHONE FAB === */
:root{
  --brand-green: #5FA38B;
  --brand-green-hover: #4c8d76;
}

.call-fab,
.phone-button,
.floating-call,
.phone-fab,
.call-button,
a[href^="tel:"].fab,
a[href^="tel:"][class*="call"],
a[href^="tel:"][class*="phone"]{
  background-color: var(--brand-green) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(95,163,139,.35) !important;
}

.call-fab:hover,
.phone-button:hover,
.floating-call:hover,
.phone-fab:hover,
.call-button:hover,
a[href^="tel:"].fab:hover,
a[href^="tel:"][class*="call"]:hover,
a[href^="tel:"][class*="phone"]:hover{
  background-color: var(--brand-green-hover) !important;
}

.call-fab svg{
  width: 24px;
  height: 24px;
}

.call-fab svg *,
.phone-button svg *,
.floating-call svg *,
.phone-fab svg *,
.call-button svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* ===== AMÉLIORATIONS RESPONSIVE GLOBALES ===== */

/* Mobile : amélioration de la lisibilité et de l'espacement */
@media (max-width: 768px) {
  /* Titres plus lisibles sur mobile */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.35rem !important;
  }

  /* Textes centrés sur mobile pour sections principales */
  .hero-inner,
  .section-title,
  .galerie-title,
  .galerie-subtitle {
    text-align: center;
  }

  /* Boutons bien espacés et lisibles */
  .btn,
  .contact-buttons .btn {
    padding: 14px 24px;
    font-size: 16px;
    width: 100%;
    max-width: none;
  }

  /* Conteneur avec padding adapté */
  .container,
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Sections avec espacement cohérent */
  .section,
  section {
    padding: 40px 0;
  }

  /* Cards et éléments bien espacés */
  .card {
    margin-bottom: 20px;
  }

  /* Grid responsive pour petits écrans */
  .grid,
  .cards-mini {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Contact info empilée verticalement */
  .contact-info {
    gap: 20px;
  }

  .contact-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .contact-buttons .btn {
    min-width: 100%;
  }

  /* FAB (bouton flottant) - position gérée par vyrel-fix */
}

/* Tablette : ajustements intermédiaires */
@media (min-width: 769px) and (max-width: 1024px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  .container,
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Grid à 2 colonnes sur tablette */
  .cards-mini {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Très petits écrans (≤375px) */
@media (max-width: 375px) {
  h1 {
    font-size: 1.75rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  .brand-title,
  .brand-text {
    font-size: 1.1rem !important;
  }

  .nav a,
  .nav-links a,
  .nav-links .nav-link {
    font-size: 16px;
    padding: 16px 10px;
  }
}

/* ============================================
   FAB "Nouveautés" (Floating Action Button)
   ============================================ */

.nouveautes-fab {
  position: fixed;
  right: clamp(12px, 3vw, 20px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fab-gap));
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 9999px;
  display: grid;
  place-items: center;
  z-index: 10005; /* Sous le header (10010) et la modal (10009) */
  background: var(--sauge);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(95, 163, 139, 0.25);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.nouveautes-fab:hover,
.nouveautes-fab:focus {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(95, 163, 139, 0.35);
}

.nouveautes-fab:active {
  transform: scale(0.95);
}

.nouveautes-fab svg {
  width: clamp(24px, 5vw, 32px);
  height: clamp(24px, 5vw, 32px);
  stroke: #fff;
  fill: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Animation pulse subtile pour attirer l'attention */
@keyframes fab-pulse {
  0%, 100% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(95, 163, 139, 0.25);
  }
  50% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(95, 163, 139, 0.45);
  }
}

.nouveautes-fab {
  animation: fab-pulse 3s ease-in-out infinite;
}

/* Tablette : ajustement position */
@media (min-width: 768px) {
  .nouveautes-fab {
    right: max(20px, 2vw);
  }
}

/* Desktop : cacher le FAB (navigation normale suffit) */
@media (min-width: 1025px) {
  .nouveautes-fab {
    display: none;
  }
}

/* ========================================
   Z-INDEX HIERARCHY - FIX
   ======================================== */
:root {
  --z-header: 100;
  --z-fab: 900;
  --z-drawer: 3000;
  --z-sheet: 4000;
}

.site-header,
header.site-header {
  z-index: var(--z-header) !important;
  position: sticky;
  top: 0;
}

/* fix stacking - ne pas overrider le z-index mobile */
.drawer {
  z-index: var(--z-drawer, 3000) !important;
}

.sheet,
#nouveautes-modal {
  z-index: var(--z-sheet, 4000) !important;
}

/* ========================================
   NOUVEAUTÉS : VISIBILITY RULES
   ======================================== */

/* --- Pill "Nouveautés" dans le header : CACHÉ partout --- */
.nav-pill-nouveautes {
  display: none !important;
}

/* --- Item "Nouveautés" dans le menu hamburger : VISIBLE partout --- */
/* (Pas de règles de masquage - le menu item reste visible) */

/* --- FABs --- */
/* Cacher le FAB étoile Nouveautés partout (toutes résolutions) */
.nouveautes-fab,
.fab-star,
[data-fab="nouveautes"],
a[data-testid="fab-nouveautes"] {
  display: none !important;
}

/* Conserver le FAB téléphone visible partout */
.call-fab,
.fab-phone,
[data-fab="phone"] {
  display: inline-flex !important;
  z-index: var(--z-fab) !important;
}

#nouveautes-modal.hidden {
  display: none !important;
}

#nouveautes-modal:not(.hidden) {
  display: flex !important;
}

/* ========================================
   MODAL SCROLL FIX - iOS & Android
   ======================================== */

/* Quand une modale est ouverte, on empêche le scroll de la page */
html.modal-open,
body.modal-open {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Le corps de la modale scrolle mais ne "passe" pas le scroll aux parents */
.news-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  min-height: 0;
  flex: 1 1 auto;
}

/* Images dans la modale - clickables mais pas draggables */
.news-content img {
  user-select: none;
  -webkit-user-drag: none;
  max-width: 100%;
  height: auto;
  touch-action: auto; /* Permet le click ET le scroll */
}

/* Assure que les cartes n'ont pas d'overflow qui bloque */
.news-image-container,
.news-item-featured {
  overflow: visible !important;
}

/* ========================================
   TARIFS — LAYOUT RESPONSIVE (Mobile First)
   ======================================== */
/* Tarifs grid layout */
#tarifs .tarif-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title price" "meta price";
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
}
#tarifs .tarif-title,
#tarifs .tarif-item .title {
  grid-area: title;
  margin: 0;
  line-height: 1.2;
}
#tarifs .tarif-meta,
#tarifs .tarif-item .duration {
  grid-area: meta;
  color: #8a7f73;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#tarifs .tarif-price,
#tarifs .tarif-item .price {
  grid-area: price;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
#tarifs .tarif-toggle,
#tarifs .tarif-item .chevron {
  margin-left: 8px;
}
#tarifs .tarif-price > *,
#tarifs .tarif-item .price > * {
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  #tarifs .tarif-item {
    padding: 16px 18px;
    gap: 10px 16px;
  }
}
@media (min-width: 1024px) {
  #tarifs .tarif-item {
    padding: 18px 20px;
  }
}
#tarifs {
  padding-bottom: 80px;
}

/* ========================================
   POINTER EVENTS - Menu links
   ======================================== */
/* make links clickable */
.drawer__panel a, 
.drawer__panel button,
.nav a,
.nav button,
#siteNav a,
#siteNav button {
  pointer-events: auto !important;
}

/* ========================================
   BOUTON NOUVEAUTÉS - Styling
   ======================================== */
:root {
  --brand-green: #3f7f68;
}

/* Bouton header (pilule) si existant */
.btn-nouveautes {
  background: var(--brand-green) !important;
  color: #fff !important;
  border: none;
  text-decoration: none;
}

/* Lien "Nouveautés" dans le menu (le gros bouton vert) */
#openNouveautes {
  background: var(--brand-green) !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0;
  display: block;
  text-align: center;
}

/* états : pas de gris/violet après clic */
#openNouveautes:link,
#openNouveautes:visited,
#openNouveautes:hover,
#openNouveautes:active,
.btn-nouveautes:link,
.btn-nouveautes:visited,
.btn-nouveautes:hover,
.btn-nouveautes:active {
  color: #fff !important;
  text-decoration: none !important;
}

/* Au cas où un span avec emoji reste dans le bouton, masque-le */
#openNouveautes .emoji, 
.btn-nouveautes .emoji {
  display: none !important;
}

/* ========================================
   NAV DESKTOP — alignement parfait
   ======================================== */
@media (min-width: 1024px) {
  /* conteneur des liens du header */
  header nav ul,
  header .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* chaque lien */
  header nav ul > li,
  header .nav-links > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* style commun à tous les liens du header */
  header nav a,
  header .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;          /* même hauteur pour tous */
    padding: 0 16px !important;        /* même padding */
    line-height: 1 !important;
    border-radius: 9999px !important;  /* pilule */
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 600;
  }

  /* liens "texte" (par défaut) */
  header nav a:not(.is-cta),
  header .nav-links a:not(.is-cta) {
    background: transparent !important;
    color: #27745e !important; /* vert texte du header */
  }

  /* le seul bouton rempli = Nouveautés */
  header nav a.is-cta,
  header .nav-links a.is-cta {
    background: var(--brand-green, #3f7f68) !important;
    color: #fff !important;
  }
}

/* ================= vyrel-fix: FAB téléphone mobile ================= */
@media (max-width: 991px){

  /* FAB téléphone : position FIXE et stable */
  .fab,
  .call-fab,
  .r-fab-call,
  a[href^="tel:"].fab,
  a.fab.call-fab {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 16px) !important;
    z-index: 1000 !important;
    width: 56px !important;
    height: 56px !important;
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Empêche les parents d'imposer une boîte de conteneur au "fixed" */
  .r-fab-root { 
    transform: none !important; 
    filter: none !important; 
    perspective: none !important; 
  }
}

/* ===== Désactivation totale des styles mobiles sur la modale ===== */
/* La modale Nouveautés garde son apparence desktop sur tous les écrans */
#nouveautes-modal .modal-panel {
  max-width: 800px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* === Fix header Nouveautés — anti chevauchement propre === */
#nouveautes-modal .modal-header,
.nouveautes-modal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* sépare le titre/badge et le X */
  flex-wrap: wrap;                 /* si pas assez de place, badge passe dessous */
  gap: 0.5rem;                     /* petit espace entre éléments */
  padding: 0.75rem 1.5rem 0.75rem 1rem;  /* laisse de l'air autour */
}

/* Regroupe le titre et le badge dans un même bloc à gauche */
#nouveautes-modal .modal-header .header-left,
.nouveautes-modal .modal-header .header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* S'il n'y a pas de .header-left, on aligne directement les deux premiers éléments */
#nouveautes-modal .modal-header h1,
#nouveautes-modal .modal-header h2,
#nouveautes-modal .modal-header .title,
#nouveautes-modal .modal-header .badge,
.nouveautes-modal .modal-header h1,
.nouveautes-modal .modal-header h2,
.nouveautes-modal .modal-header .title,
.nouveautes-modal .modal-header .badge {
  margin: 0;
  flex: 0 0 auto;
}

/* Badge : ne passe jamais sous le X */
#nouveautes-modal .modal-header .badge,
#nouveautes-modal .modal-header [class*="badge"],
.nouveautes-modal .modal-header .badge,
.nouveautes-modal .modal-header [class*="badge"] {
  order: 2;
  white-space: nowrap;
  background-color: #f7f7f7; /* garde ton style neutre */
  padding: 4px 10px;
  border-radius: 9999px;
}

/* Bouton X : reste à droite mais sans recouvrir */
#nouveautes-modal .modal-header .btn-close,
#nouveautes-modal .modal-header .close,
#nouveautes-modal .modal-header [data-close],
.nouveautes-modal .modal-header .btn-close,
.nouveautes-modal .modal-header .close,
.nouveautes-modal .modal-header [data-close] {
  position: static;     /* dans le flux, pas absolute */
  flex: 0 0 auto;
  margin-left: auto;    /* pousse à droite */
  transform: none;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajustement mobile : si ça serre trop, badge descend dessous */
@media (max-width: 480px) {
  #nouveautes-modal .modal-header,
  .nouveautes-modal .modal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #nouveautes-modal .modal-header .btn-close,
  .nouveautes-modal .modal-header .btn-close {
    align-self: flex-end;
  }
}

/* ===== Fix global header Nouveautés — anti-chevauchement universel ===== */
:root{
  --nv-x-size: 44px;
  --nv-x-gap:  12px;
}

:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header){
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  padding-right: calc(var(--nv-x-size) + var(--nv-x-gap)) !important;
  min-height: max(56px, var(--nv-x-size) + 8px) !important;
}

:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header)
:is(.modal-x,.btn-close,.close,[data-close],[aria-label*="close" i],[aria-label*="fermer" i]){
  position: absolute !important;
  right: var(--nv-x-gap) !important;
  top:  var(--nv-x-gap) !important;
  width: var(--nv-x-size) !important;
  height: var(--nv-x-size) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 3 !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
}

:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header)
:is(.news-badge,.badge,[class*="badge"],[class*="chip"],[class*="tag"]){
  flex: 0 1 auto !important;
  max-width: calc(100% - (var(--nv-x-size) + var(--nv-x-gap) + 20px)) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

@media (max-width: 420px){
  :is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
  :is(.modal-head,.modal-header,header,.card-header,.section__header){
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  :is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
  :is(.modal-head,.modal-header,header,.card-header,.section__header)
  :is(.news-badge,.badge,[class*="badge"],[class*="chip"],[class*="tag"]){
    max-width: 100% !important;
    white-space: normal;
  }
}

/* === Header Nouveautés — centrage titre & suppression du badge === */

/* Masque le badge sur toutes les tailles d'écran */
:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header)
:is(.badge,[class*="badge"],[class*="chip"],[class*="tag"]){
  display: none !important;
}

/* Centre le titre "✨ Nouveautés" sur desktop et mobile */
:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header)
:is(h1,h2,h3,[class*="title"]){
  flex: 1 1 100%;
  text-align: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Ajuste la hauteur et l'espacement du header */
:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-head,.modal-header,header,.card-header,.section__header){
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 1.5rem !important;
  min-height: 64px !important;
  gap: 0 !important;
}

/* === Fixe la croix "X" de fermeture — visible en haut à droite (toutes tailles) === */

:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-x,.btn-close,.close,[data-close],[aria-label*="close" i],[aria-label*="fermer" i]) {
  position: fixed !important;       /* fixe dans le viewport */
  top: 16px !important;             /* espace par rapport au bord supérieur */
  right: 16px !important;           /* espace par rapport au bord droit */
  z-index: 9999 !important;         /* toujours au-dessus du contenu */
  background: #fff !important;      /* fond identique au header */
  border-radius: 12px !important;   /* garde ton style arrondi */
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* léger relief */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* effet hover subtil */
:is(#nouveautes-modal,.nouveautes-modal,[data-modal="nouveautes"])
:is(.modal-x,.btn-close,.close,[data-close]):hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Anti-CLS */
/* Logo header – taille contrôlée sans déformation */
.brand-logo {
  height: 48px;
  width: auto;
  max-width: 160px;
}

@media (max-width: 768px) {
  .brand-logo {
    height: 40px;
  }
}

.scroller img,
.gallery-grid img,
.about .gallery img,
.flyer-img { 
  aspect-ratio: 4 / 3; 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* Body lock quand menu ouvert */
body.nav-open { 
  overflow: hidden; 
}

/* FAB hide on scroll */
.fab.hidden { 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .2s ease; 
}
/* ==== Galerie: supprimer bandes blanches sur mobile ==== */
.section-galerie .gallery-grid { gap: 12px; }
.section-galerie figure.gallery-item {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
}

.section-galerie figure.gallery-item img,
.scroller img,
.about .gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Variante mobile : format plus panoramique */
@media (max-width: 480px){
  .section-galerie figure.gallery-item img {
    aspect-ratio: 16 / 9;
  }
}