/* ============================================================
 *  SHOOT EVENTS - site.css
 *  Styles spécifiques de la page one-page.
 *  charte.css est la source de vérité : ici, uniquement des
 *  tokens var(--*), aucune valeur hex/spacing/radius hardcodée.
 *  Mobile-first : on surcharge avec @media (min-width: ...).
 * ============================================================ */


/* ============================================================
   00. ACCESSIBILITÉ - Skip link + focus visibles
   ============================================================ */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: var(--z-toast);
  background-color: var(--or-500);
  color: var(--n-900);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  transition: top var(--duration-fast) var(--easing-standard);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--or-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Texte lisible sur fond sombre (atténué) */
.text-on-dark { color: rgba(250, 248, 243, 0.7); }

/* Honeypot anti-spam : retiré du flux visuel et du parcours clavier, mais
   toujours présent dans le DOM pour piéger les bots. On évite display:none /
   visibility:hidden que certains bots savent détecter pour ignorer le champ. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================
   01. RYTHME DES SECTIONS - Alternance sombre / clair
   ============================================================ */

.section-dark {
  position: relative;
  background-color: var(--noir);
  color: var(--n-0);
  overflow: hidden;
}
.section-dark h2,
.section-dark h3 { color: var(--n-0); }

.section-cream { background-color: var(--n-50); }

/* Filet doré fin en haut des sections sombres */
.section-dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-500), transparent);
  opacity: 0.5;
}

/* Grain cinématographique global subtil */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background-image: url("../assets/img/textures/grain.png");
  background-size: 160px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}


/* ============================================================
   02. NAVIGATION
   ============================================================ */

/* Nav au-dessus du menu mobile plein écran pour garder le burger cliquable */
.nav { z-index: var(--z-toast); }

/* --- Navbar légèrement agrandie (override de charte.css) --- */
.nav { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.nav-logo { height: 38px; }                 /* logo un peu plus grand que l'origine */
.nav-link { font-size: var(--text-base); }   /* texte des liens légèrement agrandi */
.nav-links { gap: var(--space-8); }
/* Bouton CTA de la navbar (il utilise .btn-sm en HTML) */
.nav-cta.btn-sm {
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-5);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-cta { display: none; }

/* Quand la nav devient solide, on peut afficher le CTA texte sombre */
.nav-solid .nav-link { color: var(--n-0); }

/* Burger */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  position: relative;
  z-index: var(--z-toast); /* reste cliquable au-dessus du menu plein écran */
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 22px;
  background-color: var(--n-0);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 768px) {
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(14, 13, 11, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--easing-standard), visibility var(--duration-base);
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.mobile-menu-link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--n-0);
  transition: var(--transition-fast);
}
.mobile-menu-link:hover { color: var(--or-400); }
.mobile-menu-cta { margin-top: var(--space-4); }


/* ============================================================
   03. HERO
   ============================================================ */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: saturate(1.05) contrast(1.05);
}
/* Vidéo optionnelle (désactivée par défaut, voir ASSETS.md) */
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 75% 30%, rgba(172, 139, 78, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.75) 55%, var(--noir) 100%);
}

/* Sur mobile : vidéo plus visible (moins d'opacité dessus, overlay allégé) */
@media (max-width: 767.98px) {
  .hero-bg-video { opacity: 0.92; }
  .hero-bg-overlay {
    background:
      radial-gradient(120% 80% at 75% 30%, rgba(172, 139, 78, 0.14), transparent 60%),
      linear-gradient(180deg, rgba(14,13,11,0.2) 0%, rgba(14,13,11,0.4) 65%, var(--noir) 100%);
  }
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
}
.hero-content { max-width: 660px; }

/* Indicateur de scroll : invite à descendre dans le site */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: var(--z-raised);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: rgba(250, 248, 243, 0.75);
  transition: color var(--duration-base) var(--easing-standard);
}
.hero-scroll:hover { color: var(--or-400); }
.hero-scroll-text {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.hero-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(172, 139, 78, 0.5);
  color: var(--or-400);
  animation: hero-scroll-bounce 1.8s var(--easing-standard) infinite;
}
.hero-scroll-arrow i,
.hero-scroll-arrow svg { width: 18px; height: 18px; }

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
}
@media (min-width: 768px) {
  .hero-scroll { bottom: var(--space-8); }
}

/* Anneau / mark qui tourne (caché sous le texte sur mobile, visible en grand desktop) */
.hero-ring {
  position: absolute;
  top: 50%;
  right: -28%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  z-index: var(--z-base);
  opacity: 0.35;
  pointer-events: none;
}
.hero-ring-mark,
.hero-ring-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-ring-mark { animation: spin 38s linear infinite; }
.hero-ring-orbit { animation: spin 60s linear infinite reverse; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.rotate-word {
  display: inline-block;
}

@media (min-width: 768px) {
  .hero-ring { width: 460px; height: 460px; right: -12%; opacity: 0.45; }
}
@media (min-width: 1024px) {
  .hero-ring { width: 560px; height: 560px; right: 2%; opacity: 0.55; }
}


/* ============================================================
   04. COMMENT - Étapes
   ============================================================ */

/* Section split : photo de l'installation à gauche (fondue vers le noir),
   frise verticale des étapes à droite sur fond sombre. */
.comment-arc {
  position: absolute;
  top: 0;
  right: -120px;
  width: 420px;
  height: auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: var(--z-base);
}
.comment .container { position: relative; z-index: var(--z-raised); }

.comment-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .comment-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* --- Colonne photo --- */
.comment-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(172, 139, 78, 0.18), var(--shadow-xl);
}
.comment-media-img {
  display: block;
  width: 100%;
  height: auto;                 /* format de la photo préservé, jamais déformé ni pixélisé */
  object-fit: contain;
  /* Adoucit les lumières trop intenses (spots, barres LED) tout en gardant la chaleur dorée */
  filter: brightness(0.82) contrast(0.96) saturate(1.02);
}
/* Fondu harmonieux entre la photo et le côté noir (vers la droite en desktop, vers le bas en mobile) */
.comment-media-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(14, 13, 11, 0.85) 100%);
}
@media (min-width: 900px) {
  .comment-media { box-shadow: none; border-radius: 0; }
  .comment-media-img { border-radius: var(--radius-lg); }
  .comment-media-fade {
    border-radius: var(--radius-lg);
    background:
      linear-gradient(90deg, transparent 48%, rgba(14, 13, 11, 0.55) 80%, var(--noir) 100%),
      linear-gradient(180deg, transparent 78%, rgba(14, 13, 11, 0.5) 100%);
  }
}

/* --- Colonne contenu (titre + frise) --- */
.comment-content { position: relative; }
.comment .section-header {
  text-align: left;
  align-items: flex-start;
  margin-bottom: var(--space-10);
}
.comment .section-header .gold-line { margin-inline: 0; }

/* Kicker en clair */
.kicker-light { color: var(--n-0); }

/* Frise verticale : trait doré reliant les pastilles numérotées */
.comment-steps {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}
.comment-steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--or-500), rgba(172, 139, 78, 0.15));
  z-index: var(--z-base);
}

.step-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.step-marker {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--or-gradient);
  box-shadow: var(--shadow-glow-soft);
}
.step-marker-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--noir);
}
.step-body { padding-top: var(--space-1); }
.step-title { margin-bottom: var(--space-2); }
.step-desc { max-width: 46ch; }

.comment-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-10);
}


/* ============================================================
   05. PRESTATIONS - Cartes photo
   ============================================================ */

.prestations-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.presta-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  display: flex;
  align-items: stretch;
  isolation: isolate;
}
.presta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-below);
  transition: transform var(--duration-slow) var(--easing-standard);
}
.presta-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  background: linear-gradient(180deg, rgba(14,13,11,0.05) 0%, rgba(14,13,11,0.45) 50%, rgba(14,13,11,0.92) 100%);
}
.presta-body {
  position: absolute;
  top: 62%;
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  padding: 0 var(--space-8);
  color: var(--n-0);
}
.presta-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--n-0);
  margin-bottom: var(--space-2);
}
.presta-desc {
  font-size: var(--text-base);
  color: rgba(250, 248, 243, 0.8);
  max-width: 38ch;
}
.presta-card:hover .presta-img { transform: scale(1.06); }
.presta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--easing-standard);
  pointer-events: none;
}
.presta-card:hover::after { border-color: rgba(172, 139, 78, 0.6); }

@media (min-width: 640px) {
  .prestations-grid { grid-template-columns: repeat(2, 1fr); }
  .presta-card:first-child { grid-column: span 2; }
}
@media (min-width: 900px) {
  .prestations-grid { grid-template-columns: repeat(3, 1fr); }
  .presta-card:first-child { grid-column: auto; }
}

/* --- Nos animations : cartes produits --- */
.products-header { margin-top: var(--space-16); }

/* Section "Pour qui" : espace supplémentaire au-dessus */
.pour-qui-header { margin-top: var(--space-24); }

.products-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(14, 13, 11, 0.04);
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--or-300);
  box-shadow: var(--shadow-glow-soft);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--n-0);
}
.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--easing-standard);
}
.product-card:hover .product-img { transform: scale(1.05); }

.product-soon-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--noir);
  background: var(--or-gradient-h);
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
}

.product-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
  justify-content: space-between;
}
.product-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--n-900);
}
.product-desc {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: var(--leading-relaxed);
  flex: 1;
}
.product-cta { margin-top: 0; }

/* Image photobooth 360° : dézoomée pour voir le photobooth entier, fond blanc comme la photo */
.product-img-zoom-out {
  object-fit: contain;
  background-color: var(--n-0);
}

/* Cartes "à venir" : même rendu visuel que la carte active */


/* ============================================================
   06. GALERIE - Masonry + filtres + lightbox
   ============================================================ */

/* Note : les filtres de catégorie (pills Tout/Mariage/…) ne sont pas
   implémentés dans cette version. Le CSS associé a été retiré. La logique
   lightbox reste tolérante aux items masqués (.is-hidden) pour faciliter
   l'ajout futur de filtres sans rien casser. */

/* Masonry via colonnes CSS */
.galerie-grid {
  column-count: 2;
  column-gap: var(--space-4);
}
.galerie-item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  break-inside: avoid;
  background-color: var(--n-900);
  transition: transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
}
.galerie-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-slow) var(--easing-standard), opacity var(--duration-base);
}
.galerie-item:hover { box-shadow: var(--shadow-glow-soft); transform: translateY(-2px); }
.galerie-item:hover img { transform: scale(1.05); }

.galerie-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-raised);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--noir);
  background: var(--or-gradient-h);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.galerie-play {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 13, 11, 0.25);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}
.galerie-play i, .galerie-play svg {
  width: 48px;
  height: 48px;
  color: var(--n-0);
  fill: rgba(172, 139, 78, 0.9);
  stroke: var(--n-0);
}
.galerie-item:hover .galerie-play { opacity: 1; }

/* Items vidéo dans la galerie */
.galerie-item-video {
  cursor: pointer;
}
/* Poster · donne la hauteur au conteneur, toujours visible sauf quand la vidéo joue */
.galerie-video-poster {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  transition: opacity var(--duration-base) var(--easing-standard),
              transform var(--duration-slow) var(--easing-standard);
}
.galerie-item-video:hover .galerie-video-poster { transform: scale(1.05); }
/* Quand la vidéo joue : on cache le poster et on révèle la vidéo */
.galerie-item-video.is-playing .galerie-video-poster { opacity: 0; }

/* La vidéo est en dessous du poster par défaut (invisible) */
.galerie-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
  transition: transform var(--duration-slow) var(--easing-standard);
}
.galerie-item-video.is-playing .galerie-video { z-index: 3; transform: scale(1); }
.galerie-item-video:hover .galerie-video { transform: scale(1.05); }

/* Icône play toujours au-dessus */
.galerie-play-video { opacity: 1; background-color: rgba(14, 13, 11, 0.35); z-index: 4; }
.galerie-item-video.is-playing .galerie-play-video { opacity: 0; }

/* Masquage filtre */
.galerie-item.is-hidden { display: none; }

@media (min-width: 640px) { .galerie-grid { column-count: 3; } }
@media (min-width: 1024px) { .galerie-grid { column-count: 4; } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(14, 13, 11, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--easing-standard), visibility var(--duration-base);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img,
.lightbox-video {
  max-width: min(92vw, 1000px);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}
.lightbox-video { display: block; background-color: var(--noir); }
.lightbox-img[hidden], .lightbox-video[hidden] { display: none; }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--n-0);
  background-color: rgba(172, 139, 78, 0.15);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}
.lightbox-close:hover,
.lightbox-nav:hover { background-color: var(--or-500); color: var(--noir); }
.lightbox-close { top: var(--space-6); right: var(--space-6); }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }
.lightbox-close i, .lightbox-nav i,
.lightbox-close svg, .lightbox-nav svg { width: 22px; height: 22px; }


/* ============================================================
   07. EQUIPMENT - Split storytelling matériel
   ============================================================ */

.equipment-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
.equipment-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.equipment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.equipment-float {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--noir);
  background: var(--or-gradient-h);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow-soft);
}
.equipment-float i, .equipment-float svg { width: 18px; height: 18px; }

.equipment-list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.equipment-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  color: var(--n-700);
}
.equipment-list i, .equipment-list svg {
  width: 20px;
  height: 20px;
  color: var(--or-500);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .equipment-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}


/* ============================================================
   08. TARIFS
   ============================================================ */

.tarifs-note {
  text-align: center;
  max-width: 680px;
  margin: var(--space-8) auto 0;
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: var(--leading-relaxed);
}

/* --- Sélecteur d'offre : On s'occupe de tout / Location seule --- */
.offer-switch {
  display: flex;
  gap: var(--space-1);
  max-width: 460px;
  margin: 0 auto var(--space-8);
  padding: var(--space-1);
  background-color: var(--n-0);
  border: 1.5px solid var(--n-200);
  border-radius: var(--radius-full);
}
.offer-switch-btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background-color: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.offer-switch-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--n-700);
}
.offer-switch-btn:hover { background-color: var(--or-50); }
.offer-switch-btn.is-active {
  background: var(--or-gradient-h);
  box-shadow: var(--shadow-glow-soft);
}
.offer-switch-btn.is-active .offer-switch-label { color: var(--noir); }

/* --- Panneaux d'offre --- */
.offer-panel[hidden] { display: none; }
.offer-panel.is-active { animation: offer-fade var(--duration-base) var(--easing-standard); }
@keyframes offer-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.offer-intro {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  text-align: center;
  font-size: var(--text-md);
  color: var(--n-600);
  line-height: var(--leading-relaxed);
}

/* --- Cartes de prix simplifiées (toutes identiques, sans badge) --- */
.price-simple-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-inline: auto;
}
.price-simple-grid-3 { max-width: 860px; }

.price-simple {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-6);
  background-color: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(14, 13, 11, 0.04);
  overflow: hidden;
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard);
}
/* Liseré doré en haut, révélé au survol */
.price-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--or-gradient-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--easing-standard);
}
.price-simple:hover {
  border-color: var(--or-300);
  box-shadow: var(--shadow-glow-soft);
  transform: translateY(-4px);
}
.price-simple:hover::before { transform: scaleX(1); }

.price-simple-duration {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--n-600);
}
.price-simple-amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--n-900);
  line-height: 1;
}
/* le "€" plus discret que le chiffre */
.price-simple-amount .price-cur {
  font-size: 0.5em;
  font-weight: var(--weight-medium);
  color: var(--or-500);
  vertical-align: super;
  margin-left: 2px;
}
.price-simple-amount-quote {
  font-size: var(--text-2xl);
  color: var(--or-600);
}
.price-simple-cta {
  width: 100%;
  margin-top: var(--space-2);
}

@media (min-width: 640px) {
  .price-simple-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .price-simple-grid,
  .price-simple-grid-3 { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   10. CONTACT
   ============================================================ */

.contact-form-intro {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgba(250, 248, 243, 0.7);
  margin-bottom: var(--space-6);
}
.contact-form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}
.contact-form .field { margin-bottom: var(--space-4); }
.contact-form-row .field { margin-bottom: 0; }

/* Inputs sur fond sombre */
.contact .input,
.contact .textarea,
.contact .select {
  background-color: rgba(250, 248, 243, 0.04);
  border-color: rgba(172, 139, 78, 0.25);
  color: var(--n-0);
}
.contact .input::placeholder,
.contact .textarea::placeholder { color: rgba(250, 248, 243, 0.4); }
.contact .field-label { color: rgba(250, 248, 243, 0.75); }
.contact .input:focus,
.contact .textarea:focus,
.contact .select:focus {
  border-color: var(--or-500);
  background-color: rgba(250, 248, 243, 0.06);
}
.contact .select option { color: var(--n-900); }

.contact-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(172, 139, 78, 0.18);
  border-radius: var(--radius);
  transition: var(--transition-fast);
}
a.contact-line:hover,
.contact-line-btn:hover {
  border-color: rgba(172, 139, 78, 0.5);
  background-color: rgba(172, 139, 78, 0.06);
}
/* Variante bouton : ouvre le popup de réservation */
.contact-line-btn {
  width: 100%;
  text-align: left;
  background-color: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background-color: rgba(172, 139, 78, 0.15);
  color: var(--or-300);
  flex-shrink: 0;
}
.contact-icon i, .contact-icon svg { width: 22px; height: 22px; }
.contact-line-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--n-0);
  font-size: var(--text-base);
}
.contact-line-sub {
  display: block;
  font-size: var(--text-sm);
  color: rgba(250, 248, 243, 0.55);
}
.contact-whatsapp i, .contact-whatsapp svg { width: 22px; height: 22px; }
.contact-submit { width: 100%; }
.contact-form-feedback {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background-color: rgba(172, 139, 78, 0.12);
  color: var(--or-200);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

@media (min-width: 560px) {
  .contact-form-row { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   11. FOOTER
   ============================================================ */

.footer-inner {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: start;
}
.footer-brand .footer-text { max-width: 34ch; margin-top: var(--space-2); }
/* Le wordmark a été retiré : on affiche le mark (symbole carré) */
.footer-logo { height: 40px; width: 40px; }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-link {
  font-size: var(--text-sm);
  color: rgba(250, 248, 243, 0.6);
  transition: var(--transition-fast);
}
.footer-link:hover { color: var(--or-300); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: rgba(250, 248, 243, 0.06);
  color: rgba(250, 248, 243, 0.7);
  transition: var(--transition-fast);
}
.footer-social-link:hover { background-color: var(--or-500); color: var(--noir); }
.footer-social-link i, .footer-social-link svg { width: 20px; height: 20px; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: flex-start;
}
.footer-credit a { color: var(--or-400); }
.footer-credit a:hover { color: var(--or-300); }

@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; align-items: center; }
}


/* ============================================================
   12. PREFERS-REDUCED-MOTION
   On désactive les grosses animations et on révèle tout.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-ring-mark,
  .hero-ring-orbit { animation: none !important; }
  .legal-popup,
  .legal-popup-modal { transition: none !important; }
}


/* ============================================================
   13. PIED DE PAGE - Liens légaux
   ============================================================ */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.footer-sep-dot { color: rgba(250, 248, 243, 0.35); }


/* ============================================================
   14. (Bannière cookies retirée)
   Le site ne dépose aucun traceur soumis à consentement ; la
   bannière et son CSS associé ont été supprimés. Voir le commentaire
   dans index.html à l'emplacement de l'ancienne bannière.
   ============================================================ */


/* ============================================================
   15. POPUPS LÉGALES (mentions / confidentialité)
   ============================================================ */

.legal-popup {
  position: fixed;
  inset: 0;
  /* Au-dessus de la bannière cookies (z-toast) : la bannière renvoie vers
     la politique de confidentialité, la modale doit donc passer devant. */
  z-index: calc(var(--z-toast) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
  pointer-events: none;
}
.legal-popup:not([hidden]) { pointer-events: auto; }
.legal-popup.is-open { opacity: 1; }
.legal-popup[hidden] { display: none; }

.legal-popup-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 13, 11, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.legal-popup-modal {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  background-color: var(--n-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  overflow-y: auto;
  transform: translateY(12px);
  transition: transform var(--duration-base) var(--easing-standard);
}
.legal-popup.is-open .legal-popup-modal { transform: translateY(0); }

.legal-popup-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--noir);
  color: var(--n-0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
  z-index: var(--z-raised);
}
.legal-popup-close:hover { background-color: var(--or-500); transform: rotate(90deg); }
.legal-popup-close i, .legal-popup-close svg { width: 20px; height: 20px; }

.legal-popup-header {
  text-align: center;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--n-200);
}
.legal-popup-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-2);
}
.legal-popup-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--n-600);
  margin-bottom: var(--space-4);
}
.legal-popup-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  color: var(--n-900);
  letter-spacing: var(--tracking-wide);
  display: inline-block;
  padding-bottom: var(--space-1);
  border-bottom: 3px solid var(--or-500);
}
.legal-popup-subtitle {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--n-600);
  font-style: italic;
}
.legal-popup-intro {
  font-size: var(--text-md);
  color: var(--n-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-10);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}

.legal-popup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.legal-popup-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.legal-popup-block h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--or-600);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.legal-popup-block p,
.legal-popup-block li {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  color: var(--n-900);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2);
}
.legal-popup-block p:last-child { margin-bottom: 0; }
.legal-popup-block ul {
  list-style: disc;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}
.legal-popup-block a {
  color: var(--or-600);
  text-decoration: underline;
}
.legal-popup-block a:hover { color: var(--n-900); }

.legal-popup-footer {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--n-200);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--n-600);
}

@media (min-width: 768px) {
  .legal-popup-grid { grid-template-columns: 1fr 1fr; }
}

/* Plein écran sur très petits mobiles */
@media (max-width: 480px) {
  .legal-popup { padding: 0; }
  .legal-popup-modal {
    border-radius: 0;
    max-height: 100dvh;
    min-height: 100dvh;
  }
  .legal-popup-close {
    position: sticky;
    top: var(--space-2);
    margin-left: auto;
  }
}


/* ============================================================
   16. POPUP RÉSERVATION (réutilise .legal-popup)
   ============================================================ */

.reserve-popup-modal { max-width: 620px; }
.reserve-popup-header { margin-bottom: var(--space-6); }

/* Formule choisie (bandeau or) */
.reserve-popup-offer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(145deg, var(--or-50) 0%, var(--n-0) 100%);
  border: 1px solid var(--or-300);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--n-700);
}
.reserve-popup-offer[hidden] { display: none; }
.reserve-popup-offer i, .reserve-popup-offer svg {
  width: 18px;
  height: 18px;
  color: var(--or-600);
  flex-shrink: 0;
}
.reserve-popup-offer strong { color: var(--or-700); }

/* Le formulaire est sur fond clair dans le popup : on neutralise
   les couleurs claires héritées de la section contact (fond sombre). */
.reserve-form .contact-form-intro { color: var(--n-600); }
.reserve-form .field-label { color: var(--n-700); }
.reserve-form .input,
.reserve-form .textarea,
.reserve-form .select {
  background-color: var(--n-0);
  border-color: var(--n-200);
  color: var(--n-900);
}
.reserve-form .input::placeholder,
.reserve-form .textarea::placeholder { color: var(--n-500); }
.reserve-form .contact-form-feedback {
  background-color: var(--or-50);
  color: var(--or-700);
}
.reserve-form .textarea { min-height: 90px; }


/* ============================================================
   17. POPUP TARIFS · SLIDER
   Les cartes de prix deviennent un carrousel horizontal avec
   flèches de navigation et indicateurs (dots).
   ============================================================ */

.prices-popup-modal {
  max-width: 700px;
}

/* Conteneur du slider */
.price-slider-wrap {
  position: relative;
  padding-inline: var(--space-6);
}

/* Piste de défilement */
.price-slider-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-2);
}
.price-slider-track::-webkit-scrollbar { display: none; }

/* Chaque carte : taille fixe, on en voit 1 pleine + aperçu de la suivante */
.price-slider-track .price-simple {
  flex: 0 0 220px;
  scroll-snap-align: start;
  min-width: 0;
}

/* Flèches du slider */
.price-slider-prev,
.price-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--n-0);
  border: 1.5px solid var(--n-200);
  color: var(--n-700);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  cursor: pointer;
}
.price-slider-prev { left: calc(-1 * var(--space-5)); }
.price-slider-next { right: calc(-1 * var(--space-5)); }
.price-slider-prev:hover,
.price-slider-next:hover {
  background-color: var(--or-500);
  border-color: var(--or-500);
  color: var(--noir);
  box-shadow: var(--shadow-glow-soft);
}
.price-slider-prev i, .price-slider-prev svg,
.price-slider-next i, .price-slider-next svg { width: 18px; height: 18px; }
.price-slider-prev[disabled],
.price-slider-next[disabled] { opacity: 0.35; pointer-events: none; }

/* Indicateurs dots */
.price-slider-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.price-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--n-300);
  transition: var(--transition-fast);
  cursor: pointer;
  border: none;
  padding: 0;
}
.price-slider-dot.is-active {
  background: var(--or-gradient-h);
  width: 22px;
}

/* Toujours en mode slider · jamais de grille */


/* ============================================================
   18. CARDS BIENTÔT DISPONIBLE
   Même mise en forme que la carte active, bouton désactivé en bas.
   ============================================================ */

/* Pas de griseage, pas de pointer-events désactivé sur la carte entière */
.product-card-soon { cursor: default; }

/* Bouton "Bientôt disponible" : même taille que .btn-primary mais inactif */
.btn-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-6);
  white-space: nowrap;
  background-color: var(--n-100);
  color: var(--n-500);
  border: 1.5px solid var(--n-200);
  cursor: not-allowed;
  pointer-events: none;
  width: 100%;
  margin-top: auto;
}


/* ============================================================
   19. POPUP RÉSERVATION · header contextuel
   Le sous-titre change selon la source du bouton.
   ============================================================ */

.reserve-popup-context {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--n-600);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
}


/* ============================================================
   20. SLIDER MOBILE GÉNÉRIQUE
   Sur mobile (< 768 px), les grilles balisées [data-slider] +
   .m-slider-track deviennent des carrousels horizontaux à
   défilement tactile (scroll-snap), avec flèches + points
   injectés par main.js (initMobileSliders). Au-dessus de 768 px,
   le JS démonte le carrousel et la grille CSS d'origine reprend
   la main : ces règles sont donc volontairement confinées au
   mobile pour ne jamais interférer avec le layout desktop.
   ============================================================ */

/* Flèches et points n'existent pas tant que le JS n'a pas monté le
   slider. Par sécurité, on les masque hors mobile (si le breakpoint
   change pendant une animation, avant le teardown JS). */
.m-slider-arrow,
.m-slider-dots { display: none; }

@media (max-width: 767.98px) {

  .m-slider {
    position: relative;
  }

  /* La piste : on neutralise la grille et on passe en rangée scrollable.
     !important car les .products-grid / .prestations-grid / .galerie-grid
     posent display:grid (et column-count pour la galerie) via leurs propres
     règles ; on doit les surcharger uniquement en mode slider monté. */
  .m-slider.is-slider .m-slider-track {
    display: flex !important;
    column-count: auto !important;       /* annule le masonry de la galerie */
    grid-template-columns: none !important;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Respiration latérale : la 1re/dernière carte ne colle pas au bord. */
    padding-inline: var(--space-1);
    padding-bottom: var(--space-2);
    scroll-padding-left: var(--space-1);
  }
  .m-slider.is-slider .m-slider-track::-webkit-scrollbar { display: none; }

  /* Chaque carte : ~84 % de large → 1 pleine + aperçu de la suivante. */
  .m-slider.is-slider .m-slider-track > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    margin-bottom: 0;                    /* annule le margin masonry galerie */
    min-width: 0;
  }
  /* La 1re carte cale à gauche, la dernière à droite : meilleurs extrêmes. */
  .m-slider.is-slider .m-slider-track > *:first-child { scroll-snap-align: start; }
  .m-slider.is-slider .m-slider-track > *:last-child { scroll-snap-align: end; }

  /* Les cartes "pour qui" ont une hauteur fixe (420px) : on la réduit un
     peu en mode carrousel pour qu'une carte tienne dans l'écran. */
  .m-slider.is-slider .presta-card { height: 360px; }

  /* --- Flèches --- */
  .m-slider.is-slider .m-slider-arrow {
    display: flex;
    position: absolute;
    top: calc(50% - var(--space-6));     /* centré sur les cartes, au-dessus des dots */
    transform: translateY(-50%);
    z-index: var(--z-raised);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: rgba(14, 13, 11, 0.55);
    border: 1.5px solid rgba(172, 139, 78, 0.6);
    color: var(--n-0);
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .m-slider.is-slider .m-slider-prev { left: var(--space-1); }
  .m-slider.is-slider .m-slider-next { right: var(--space-1); }
  .m-slider.is-slider .m-slider-arrow:hover,
  .m-slider.is-slider .m-slider-arrow:active {
    background-color: var(--or-500);
    border-color: var(--or-500);
    color: var(--noir);
  }
  .m-slider.is-slider .m-slider-arrow[disabled] { opacity: 0; pointer-events: none; }
  .m-slider.is-slider .m-slider-arrow i,
  .m-slider.is-slider .m-slider-arrow svg { width: 20px; height: 20px; }

  /* --- Points --- */
  .m-slider.is-slider .m-slider-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .m-slider.is-slider .m-slider-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--n-300);
    transition: var(--transition-fast);
    cursor: pointer;
  }
  .m-slider.is-slider .m-slider-dot.is-active {
    background: var(--or-gradient-h);
    width: 22px;
  }
  /* Sur fond sombre (galerie), les points inactifs doivent rester visibles. */
  .section-dark .m-slider.is-slider .m-slider-dot { background-color: rgba(250, 248, 243, 0.25); }
  .section-dark .m-slider.is-slider .m-slider-dot.is-active { background: var(--or-gradient-h); }
}


/* ============================================================
   21. TYPOGRAPHIE & ESPACEMENTS RESPONSIVE
   La charte définit des tailles fixes (h2 = --text-3xl = 40px)
   pensées pour le desktop. Sur mobile, ces titres paraissent
   surdimensionnés et débordent sur 4 lignes. On les réduit ici
   (mobile-first : surcharge confinée aux petits écrans), sans
   toucher aux tokens de charte.css (source de vérité).
   ============================================================ */

@media (max-width: 767.98px) {
  /* Titres de section : 40px → ~28px, plus proportionné au mobile. */
  h2 { font-size: var(--text-2xl); }            /* 30px */
  .section-header h2 { font-size: var(--text-2xl); }

  /* Le H2 du "comment" est plus long : on le serre un peu plus. */
  .comment h2 { font-size: var(--text-xl); line-height: var(--leading-snug); } /* 24px */

  /* Sous-titre hero : 20px → 17px, lecture plus confortable. */
  .hero-subtitle { font-size: var(--text-md); }

  /* Intro / paragraphes de section : on garde 15px (base) au lieu de 17px. */
  .section-header p,
  .offer-intro,
  .tarifs-note { font-size: var(--text-base); }
}

/* Très petits écrans (≤ 380px) : on resserre encore le hero et on
   passe les CTA en pleine largeur pour des cibles tactiles confortables. */
@media (max-width: 380px) {
  .hero-title { font-size: 1.95rem; }           /* ~31px */
  .hero-subtitle { margin-bottom: var(--space-8); }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  /* Le switch d'offre des tarifs : labels sur 2 lignes possibles, on
     réduit le padding pour éviter qu'il ne déborde. */
  .offer-switch-btn { padding: var(--space-3) var(--space-2); }
  .offer-switch-label { font-size: var(--text-xs); letter-spacing: 0; }
}


/* ============================================================
   22. FAQ · Accordéon (questions fréquentes)
   <details>/<summary> natifs : accessibles, sans JS, et le contenu
   reste dans le DOM (lu par Google + éligible au schema FAQPage).
   ============================================================ */

.faq { background-color: var(--n-50); }

.faq-list {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  background-color: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
}
.faq-item[open] {
  border-color: var(--or-300);
  box-shadow: var(--shadow-glow-soft);
}

/* En-tête cliquable */
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--n-900);
  list-style: none;                 /* retire le marqueur natif (Firefox) */
  transition: color var(--duration-fast) var(--easing-standard);
}
.faq-q::-webkit-details-marker { display: none; }   /* retire le triangle (Safari/Chrome) */
.faq-q:hover { color: var(--or-600); }

/* Indicateur + → × (rotation à l'ouverture) */
.faq-q::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--or-500);
  transition: transform var(--duration-base) var(--easing-standard);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }

/* Réponse */
.faq-a {
  padding: 0 var(--space-5) var(--space-4);
}
.faq-a p {
  font-size: var(--text-sm);
  color: var(--n-700);
  line-height: var(--leading-relaxed);
  max-width: none;
}

@media (min-width: 768px) {
  .faq-q { font-size: var(--text-md); }
  .faq-a p { font-size: var(--text-base); }
}