/* ======================================
   BASE
====================================== */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: #d4af37; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 {
  font-family: "Playfair Display", serif;
  line-height: 1.2;
  margin: 0 0 14px;
}
h1 { font-size: clamp(32px, 4vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 14px; }

:root { --header-h: 96px; }          /* hauteur par défaut du header */

@media (max-width: 720px){
  :root { --header-h: 84px; }        /* header un poil plus bas sur mobile */
}

/* pousse le contenu sous le header fixe */
main { padding-top: calc(var(--header-h) + 16px); }

/* si tu as des ancres (#id), elles s’arrêteront juste sous le header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }


/* ======================================
   HEADER (fixed, compatible)
====================================== */
header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
header .nav {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
header .logo { display: flex; align-items: center; }
header .logo img {
  height: 56px; width: auto; background: none;
  transform: scaleX(1.15); transform-origin: center;
}

/* Menu (sans gap → marges) */
header .menu { display: flex; align-items: center; }
header .menu > a, header .menu > .cta { margin-left: 20px; }
header .menu > a:first-child { margin-left: 0; }

/* Liens (Accueil/Galerie/Infos) */
header .menu > a:not(.cta) {
  font-weight: 400; letter-spacing: .2px; color: #111111;
  position: relative; padding: 8px 2px; text-decoration: none;
  transform: translateZ(0); transition: transform .2s ease;
}
header .menu > a:not(.cta)::after {
  content:""; position:absolute; left:50%; bottom:0; height:2px; width:0;
  transform: translateX(-50%);
  background:#d4af37; border-radius:2px; transition: width .22s ease;
}
header .menu > a:not(.cta):hover { transform: rotateX(4deg) translateY(-1px); color:#111111; }
header .menu > a:not(.cta):hover::after { width:100%; }

/* Bouton Contact (3D only) */
header .menu > .cta {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:10px 22px; border-radius:999px;
  background:#d4af37; color:#ffffff; font-weight:600; line-height:1;
  border:none; box-shadow:0 8px 24px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
header .menu > .cta:hover { transform: translateY(-2px) scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,0.12); color:#ffffff; }

/* Responsive header */
@media (max-width: 720px){
  header .logo img { height: 50px; transform: scaleX(1.1); }
  header .menu > a, header .menu > .cta { margin-left: 14px; }
}
@media (max-width: 520px){
  header .menu > a, header .menu > .cta { margin-left: 10px; }
  header .menu > .cta { padding: 10px 18px; min-height: 40px; }
}

/* ======================================
   FORMULAIRES
====================================== */
.input, textarea.input {
  width: 100%; padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff; font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, textarea.input:focus {
  border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.25); outline: none;
}
textarea.input { min-height: 120px; }

/* ======================================
   FOOTER
====================================== */
footer {
  background: #fafafa;
  padding: 50px 20px;
  text-align: center;
  color: #555555;
  font-size: 14px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.footer-logo img { height: 42px; margin-bottom: 12px; }

/* ======================================
   ANIMATIONS
====================================== */
.reveal { opacity: 0; transform: translateY(16px); animation: fadeUp .7s ease forwards; }
.reveal.delay-1 { animation-delay: .08s; }
.reveal.delay-2 { animation-delay: .16s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ===== CTA premium 3D + gloss ===== */
.cta,
.cta.ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
  perspective: 1000px; /* pour le tilt léger */
}

/* Bouton doré (Dès 7 500 € / semaine) */
.cta {
  background: linear-gradient(180deg, #e1c45a 0%, #d4af37 50%, #bd9c30 100%);
  color: #ffffff;
  border: 0;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.12);
}

/* Bouton outline (Voir la galerie) */
.cta.ghost {
  background: #ffffff;
  color: #d4af37;
  border: 2px solid #d4af37;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Effet gloss : balayage diagonal au hover */
.cta::before,
.cta.ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 35%);
  transform: translateX(-120%) rotate(0.001deg);
  transition: transform .5s ease;
}
.cta:hover::before,
.cta.ghost:hover::before {
  transform: translateX(0) rotate(0.001deg);
}

/* Halo subtil externe */
.cta::after,
.cta.ghost::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  filter: blur(10px);
  opacity: 0;
  transition: opacity .18s ease;
  background: radial-gradient(80% 120% at 50% 10%, rgba(212,175,55,0.35), transparent 60%);
}
.cta:hover::after,
.cta.ghost:hover::after {
  opacity: 1;
}

/* Animation 3D au survol (sans changer les couleurs) */
.cta:hover,
.cta.ghost:hover {
  transform: translateY(-2px) scale(1.05) rotateX(2deg);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

/* Effet “pressé” au clic */
.cta:active,
.cta.ghost:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  filter: saturate(.98);
}

/* Focus clavier propre (accessibilité) */
.cta:focus-visible,
.cta.ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.28);
}

/* Taille un peu plus compacte sur mobile */
@media (max-width:560px){
  .cta, .cta.ghost { padding: 11px 20px; min-height: 42px; }
}

/* --- CTA : assure la lisibilité du texte sur le bouton doré --- */
.cta {
  position: relative;
  overflow: hidden;
  color: #ffffff !important;     /* texte toujours blanc */
}

/* on garde le gloss uniquement sur la version ghost */
.cta.ghost::before { opacity: .35; }  /* plus doux */

/* --- CTA : texte en noir pour toutes les variantes --- */
.cta,
.cta.ghost {
  color: #111111 !important;   /* noir lisible */
  font-weight: 600;
}

/* Bouton doré (fond gold, texte noir) */
.cta {
  background: linear-gradient(180deg, #f3d97c 0%, #d4af37 50%, #c49b2f 100%);
  border: none;
}

/* Bouton outline (fond blanc, bord gold, texte noir) */
.cta.ghost {
  background: #ffffff;
  border: 2px solid #d4af37;
}


/* ==== CTA GOLD — effet médaille premium (shine minimal) ==== */
.cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 26px; border-radius: 999px; border: 0;
  font-weight: 700; letter-spacing: .2px; line-height: 1;
  color: #111111 !important;               /* texte noir lisible */
  background: linear-gradient(135deg, #f6e79f 0%, #e7c65b 35%, #d4af37 60%, #c79d31 85%, #f2d780 100%);
  box-shadow: 0 8px 20px rgba(212,175,55,0.24);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}

/* Fin éclat diagonal très discret (désactivé tant qu’on ne survole pas) */
.cta::before {
  content: "";
  position: absolute;
  top: -30%; left: -40%;
  width: 60%; height: 160%;
  transform: rotate(18deg);
  pointer-events: none;
  opacity: 0;
  /* bande étroite = reflet métal fin (blanc -> transparent) */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 45%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.65) 55%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(2px) saturate(1.05);
}

/* Survol : surélévation + balayage du reflet */
.cta:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px rgba(212,175,55,0.36);
}
.cta:hover::before {
  opacity: 1;
  animation: medalShine 900ms cubic-bezier(.22,.7,.2,1);
}

/* Animation du reflet : glisse propre, premium, sans clignoter */
@keyframes medalShine {
  0%   { transform: translateX(0)   rotate(18deg); opacity: 0; }
  10%  { opacity: .85; }
  50%  { transform: translateX(220%) rotate(18deg); opacity: .9; }
  100% { transform: translateX(340%) rotate(18deg); opacity: 0; }
}

/* Clic : légère pression */
.cta:active { transform: translateY(0) scale(.98); box-shadow: 0 8px 20px rgba(212,175,55,0.24); }

/* Variante ghost : sans effet médaille (sobre) */
.cta.ghost {
  background: #ffffff; border: 2px solid #d4af37; color: #111111 !important;
  box-shadow: none;
}
.cta.ghost::before { display: none; }
.cta.ghost:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.10); }

/* Accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .cta:hover::before { animation: none; opacity: 0; }
  .cta, .cta.ghost { transition: none; }
}

/* =========================
   PAGE INFOS (Ce qui est inclus & règles)
   ========================= */

/* Contexte page (si tu peux, ajoute class="infos" sur le <main> de infos.html) */
.infos { padding: 100px 0 60px; }
.infos .container { max-width: 1100px; }

/* En-tête de page */
.infos-hero { text-align: center; margin: 0 0 28px; }
.infos-hero p { color: #5a6270; max-width: 70ch; margin: 8px auto 0; }

/* Layout 2 colonnes responsive */
.infos-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.infos-col { width: 50%; padding: 0 10px; box-sizing: border-box; }
@media (max-width: 960px){ .infos-col { width: 100%; } }

/* Cartes génériques (cohérentes avec le site) */
.infos-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(22,28,45,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.infos-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(22,28,45,0.12);
}

/* Titres avec filet doré */
.infos-card h2, .infos-card h3 {
  margin: 0 0 10px;
  position: relative;
  line-height: 1.25;
}
.infos-card h2::after, .infos-card h3::after {
  content:""; position:absolute; left:0; bottom:-6px; width:56px; height:3px;
  background:#d4af37; border-radius:2px;
}

/* Grille d’items “Inclus” (icône + titre + texte) */
.infos-tiles { display: flex; flex-wrap: wrap; margin: -8px; }
.infos-tiles .tile { width: 50%; padding: 8px; box-sizing: border-box; }
@media (max-width: 640px){ .infos-tiles .tile { width: 100%; } }
.tile-inner {
  display: flex; align-items: flex-start;
  background: #fafafa; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px; padding: 12px;
}
.tile-ico {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%;
  background: #fff7da;
  border: 1px solid rgba(212,175,55,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-right: 10px;
}
.tile-title { font-weight: 600; margin: 0 0 4px; }
.tile-desc  { margin: 0; color: #5a6270; }

/* Listes de règles / “À savoir” en checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding-left: 22px; margin: 8px 0;
  color:#333;
}
.checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #d4af37; font-weight: 700;
}

/* Bloc “Frais & options” (note) */
.infos-note {
  background: linear-gradient(180deg,#fffaf0, #fff);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 14px;
  padding: 14px;
  color: #5a6270;
}
.infos-note strong { color: #111; }

/* Table simple si tu en mets une */
.infos-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.infos-table th, .infos-table td {
  border: 1px solid rgba(0,0,0,0.06);
  padding: 10px; text-align: left;
}
.infos-table th { background:#faf3d7; }

/* Bannière CTA (réservation) */
.infos-cta { padding-top: 10px; }
.cta-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff7da, #fff);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(212,175,55,0.10);
}
.cta-banner .cta-text { max-width: 760px; }
.cta-banner h3 { margin: 0 0 6px; }
.cta-banner p  { margin: 0; color:#5a6270; }
.cta-banner .cta-wrap { margin-top: 10px; }
@media (min-width: 801px){ .cta-banner .cta-wrap { margin-top: 0; } }
@media (max-width: 800px){
  .cta-banner { text-align: left; }
  .cta-banner .cta-wrap { width: 100%; }
}

/* ====== INFOS — Bloc photo + texte ====== */
.infos-split { padding: 20px 0 10px; }
.infos-split .split-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  column-gap: 28px; /* compat gap */
  row-gap: 24px;
}

.infos-split .split-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.infos-split .split-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.infos-split .split-media:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.01);
  box-shadow: 0 22px 50px rgba(0,0,0,0.16);
}

.infos-split .split-copy h2 { margin: 0 0 10px; }
.infos-split .split-copy p  { color: #5a6270; margin: 0 0 12px; }

.infos-split .split-bullets {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 18px; grid-row-gap: 8px;
}
.infos-split .split-bullets li::before {
  content: "• "; color: #d4af37; font-weight: 700; margin-right: 4px;
}

.infos-split .split-ctas { display: flex; align-items: center; flex-wrap: wrap; }
.infos-split .split-ctas .cta { margin-right: 10px; }

/* Responsive */
@media (max-width: 1024px){
  .infos-split .split-row { grid-template-columns: 1fr; }
  .infos-split .split-media img { height: 360px; }
}
@media (max-width: 640px){
  .infos-split .split-media img { height: 300px; }
  .infos-split .split-bullets { grid-template-columns: 1fr; }
}

/* ====== INFOS — Les essentiels (4 blocs empilés, alternés) ====== */
.infos-highlights h2 {
  position: relative; padding-bottom: 12px; margin-bottom: 18px;
}
.infos-highlights h2::after {
  content:""; position:absolute; left:0; bottom:0; width:60px; height:3px; background:#d4af37; border-radius:2px;
}

.infos-highlights .hl-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  column-gap: 28px;
  row-gap: 18px;
  margin-bottom: 30px;
}

/* Variante alternée (image à droite, texte à gauche) */
.infos-highlights .hl-row.right {
  grid-template-columns: .95fr 1.05fr;
}
.infos-highlights .hl-row.right .hl-media { order: 2; }
.infos-highlights .hl-row.right .hl-copy  { order: 1; }

/* Médias premium (bords ronds + relief + micro 3D) */
.infos-highlights .hl-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.infos-highlights .hl-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.infos-highlights .hl-media:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.01);
  box-shadow: 0 22px 50px rgba(0,0,0,0.16);
}

/* Texte */
.infos-highlights .hl-copy h3 { margin: 0 0 8px; }
.infos-highlights .hl-copy p  { margin: 0; color: #5a6270; }

/* Responsive */
@media (max-width: 1024px){
  .infos-highlights .hl-row,
  .infos-highlights .hl-row.right {
    grid-template-columns: 1fr;
  }
  .infos-highlights .hl-media img { height: 320px; }
}
@media (max-width: 640px){
  .infos-highlights .hl-media img { height: 280px; }
}

/* ===== Badges dorés sur les images ===== */
.hl-media {
  position: relative;
}
.hl-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 13px; font-weight: 600; color: #111;
  background: linear-gradient(135deg, #fff7da, #ffe9a8);
  border: 1px solid rgba(212,175,55,0.55);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Option: badge en bas à droite si besoin
.hl-badge { top: auto; bottom: 12px; left: auto; right: 12px; } */

/* ===== Apparition au scroll (premium, fluide) ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* décalage progressif pour l’alternance */
.hl-row.right.reveal-on-scroll { transition-delay: .08s; }

/* Réduction animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}



/* ===== Liens minimalistes en 4 blocs ===== */
.split-links.minimal {
  display: grid;
  grid-template-columns: 1fr;   /* 4 blocs, un par ligne */
  row-gap: 10px;
  margin: 12px 0 16px;
}

/* Texte seul, pas de contour, anim premium sous forme de soulignage "or" fluide */
.link-chip {
  position: relative;
  display: inline-block;
  padding: 6px 2px;             /* tout petit padding pour le confort */
  font-weight: 600;
  color: #111;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .18s ease;
}

/* soulignage doré animé (gradient) */
.link-chip::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #d4af37 0%, #f2d780 50%, #d4af37 100%);
  background-size: 200% 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .25s ease;
  border-radius: 2px;
}
.link-chip:hover {
  transform: translateY(-1px);
}
.link-chip:hover::after {
  transform: scaleX(1);
  animation: underlineFlow 1.2s linear infinite;
}

@keyframes underlineFlow {
  0%   { background-position:   0% 0; }
  100% { background-position: 200% 0; }
}

/* Option: deux colonnes sur grands écrans */
@media (min-width: 900px){
  .split-links.minimal { grid-template-columns: 1fr 1fr; column-gap: 14px; }
}

/* ===== Ancres : marge de scroll pour ne pas passer sous le header ===== */
/* ta hauteur de header ~90–110px; ajuste si besoin */
.hl-row[id] { scroll-margin-top: 110px; }

/* Pour d'autres sections avec ancres (#inclus / #regles / etc.), tu peux aussi: */
/* .infos-card[id] { scroll-margin-top: 110px; } */

/* Accessibilité : si animations réduites */
@media (prefers-reduced-motion: reduce){
  .link-chip, .link-chip::after { transition: none; animation: none; }
}

/* ===== Lien actif (page courante) ===== */
.current-page {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .2px;
  color: #d4af37;   /* doré pour signaler actif */
  padding: 8px 2px;
  cursor: default;
}

/* ===== HEADER ===== */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

header .nav {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
header .logo img {
  height: 56px;
  width: auto;
  display: block;
  transform: scaleX(1.15);
  transform-origin: center;
}

/* Menu */
header .menu {
  display: flex;
  align-items: center;
  gap: 36px; /* ✅ espace plus large entre chaque bouton */
}

/* Liens du menu */
header .menu > a {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .2px;
  color: #111111;
  position: relative;
  padding: 8px 2px;
  text-decoration: none;
  transition: transform .2s ease;
}

/* Soulignage doré au hover */
header .menu > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 0;
  transform: translateX(-50%);
  background: #d4af37;
  border-radius: 2px;
  transition: width .22s ease;
}
header .menu > a:hover::after { width: 100%; }
header .menu > a:hover { transform: translateY(-1px); }

/* ✅ Lien actif (page courante) */
header .menu > a.active {
  color: #d4af37;
  font-weight: 500;
  cursor: default;
}
header .menu > a.active::after { width: 100%; }

/* Bouton Contact */
header .menu > .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #d4af37;
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
header .menu > .cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 720px) {
  header .logo img { height: 50px; transform: scaleX(1.1); }
  header .menu { gap: 20px; }
}
@media (max-width: 520px) {
  header .menu { gap: 14px; }
  header .menu > .cta { padding: 10px 18px; min-height: 40px; }
}

/* ===== FOOTER ===== */
.site-footer {
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 50px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: 28px;
  padding: 40px 0 24px;
}
@media (max-width: 960px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid { grid-template-columns: 1fr; } }

/* Brand */
.f-logo { height: 44px; width: auto; display: block; margin-bottom: 10px; transform: scaleX(1.12); }
.f-tagline { margin: 0 0 12px; color: #5a6270; }
.f-social { display: flex; }
.f-ico { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(212,175,55,0.5); color:#111; margin-right:10px; transition:transform .18s ease, box-shadow .18s ease; }
.f-ico:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(22,28,45,.12); }

/* Links */
.f-links h4, .f-contact h4 { margin: 0 0 10px; font-size: 16px; }
.f-links ul { list-style: none; padding: 0; margin: 0; }
.f-links li { margin: 8px 0; }
.f-links a { text-decoration: none; color: #111; position: relative; padding-bottom: 2px; }
.f-links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#d4af37; transition:width .22s ease; }
.f-links a:hover::after { width:100%; }

/* Contact */
.f-contact p { margin: 8px 0; color:#111; }
.f-contact .ico { margin-right:8px; }
.f-contact a { color:#111; }
.f-cta { margin-top: 12px; }

/* Bottom strip */
.footer-bottom { border-top:1px solid rgba(0,0,0,0.06); padding: 12px 0; background:#fff; }
.f-bottom-inner { display:flex; align-items:center; justify-content:space-between; color:#555; font-size:14px; }
@media (max-width: 640px){ .f-bottom-inner { flex-direction:column; gap:8px; } }
.f-legal a { color:#555; text-decoration:none; }
.f-legal a:hover { color:#111; }

/* Back to top */
.back-to-top {
  position: fixed; right: 18px; bottom: 18px;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12);
  background:#fff; color:#111; display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(22,28,45,.12);
  cursor: pointer; opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(22,28,45,.16); }

/* ===== CONTACT ===== */
.contact-hero { padding: 16px 0 8px; }
.ch-wrap { text-align: center; }
.ch-title {
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 40px);
  background: linear-gradient(135deg, #8a6a16, #d4af37 35%, #f2d780 55%, #c49b2f 75%, #8a6a16);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ch-sub { margin: 0; color: #5a6270; }

/* Grille */
.contact-grid-section { padding: 18px 0 40px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
}
@media (max-width: 960px){ .contact-grid { grid-template-columns: 1fr; } }

.contact-card { padding: 20px; }
.contact-aside { padding: 20px; }

.aside-block + .aside-block { margin-top: 14px; }
.aside-block h3 { margin: 0 0 6px; font-size: 18px; }
.aside-line { margin: 6px 0; }
.aside-note { margin: 0; color: #5a6270; }
.aside-cta { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* Form / labels flottants */
.contact-form { display: grid; gap: 14px; width: 100%; }
.f-group { position: relative; width: 100%;       /* chaque groupe respecte la carte */
  box-sizing: border-box; }
.f-input {
  width: 100%; padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  font-size: 16px; color: #111;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.f-input:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.25);
}
.f-textarea { resize: none; min-height: 120px; width: 100%;       /* pas plus large que le parent */
  max-width: 100%;
  box-sizing: border-box; }

.f-label {
  position: absolute; left: 12px; top: 12px;
  padding: 0 6px; background: #fff;
  color: #7b8494; font-size: 14px;
  transform-origin: left top; transition: .15s ease;
  pointer-events: none;
}
.f-input:focus + .f-label,
.f-input:not(:placeholder-shown) + .f-label {
  top: -9px; font-size: 12px; color: #d4af37;
}

/* Bouton gold minimal (texte noir) */
.btn-gold-min {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 999px; border: none;
  font-weight: 700; color: #111; background: #f2d780;
  background-image: radial-gradient(130% 180% at 20% 0%, #fff7da 0%, #ffe9a8 40%, #f2d780 60%, #d4af37 85%, #c49b2f 100%);
  box-shadow: 0 10px 24px rgba(22,28,45,0.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-gold-min:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22,28,45,0.18); filter: brightness(1.02); }

.f-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.link-min {
  display: inline-block; padding-bottom: 2px; color: #111; text-decoration: none; position: relative; font-weight: 600;
}
.link-min::after {
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: linear-gradient(90deg, #d4af37, #f2d780, #d4af37);
  transition: width .22s ease;
}
.link-min:hover::after { width: 100%; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #111; color: #fff; border-radius: 999px; padding: 10px 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.25); z-index: 2000;
}
.toast[hidden] { display: none; }
.toast-inner { display: inline-flex; align-items: center; gap: 8px; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: #d4af37; box-shadow: 0 0 0 0 rgba(212,175,55,.6); animation: pulseDot 1.2s infinite; }
@keyframes pulseDot { 0%{ box-shadow:0 0 0 0 rgba(212,175,55,.6);} 100%{ box-shadow:0 0 0 12px rgba(212,175,55,0);} }

/* Harmonise les cards de la page */
.contact-card, .contact-aside {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(22,28,45,.06);
}

/* === CONTACT — Empêche les inputs de dépasser la carte === */
.contact-card{ min-width:0; }              /* évite l'overflow en CSS Grid */
.contact-card .contact-form{ min-width:0; }

.contact-card .f-group{ min-width:0; }     /* laisse les enfants rétrécir si besoin */

/* Les champs occupent strictement la largeur disponible de la carte */
.contact-card .f-input,
.contact-card .f-textarea{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;                    /* padding + border inclus */
  margin:0;
}

/* Petits “caprices” navigateurs qui gonflent la largeur */
.contact-card .f-input[type="text"],
.contact-card .f-input[type="email"],
.contact-card .f-input[type="search"]{
  -webkit-appearance:none;
  appearance:none;
}

/* Si un navigateur ajoute quand même 1–2px, on coupe proprement */
.contact-card{ overflow:hidden; }


/* Bouton Play/Pause minimal et premium */
.video-toggle { position: absolute; left:16px; bottom:16px; z-index: 2; }
.video-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22,28,45,0.18); filter: brightness(1.02); }

/* Légende + CTA */
.video-caption { margin-top: 14px; }
.video-caption h2 { margin: 0 0 6px; }
.video-caption p  { margin: 0 0 10px; color: #5a6270; }
.video-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Respect du header fixe : pas de débordement horizontal */
.video-block img, .video-block video { max-width: 100%; height: auto; }

/* Grille principale */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* gauche un peu plus large */
  gap: 40px;
  align-items: center;
}
@media(max-width: 960px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-features { margin-top: 20px; }
}

/* ===== INTRO split ===== */
.intro .container{ }
.intro-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* vidéo plus étroite */
  gap: 32px;
  align-items: center;
}
@media (max-width:1024px){
  .intro-grid{ grid-template-columns: 1fr; }
}

/* vidéo compacte à droite */
.intro-media{ justify-self: end; width: 100%; max-width: 560px; }
.video-frame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f2f2f2;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 28px rgba(22,28,45,0.08);
  aspect-ratio: 16 / 9;
}
.video-el{ width:100%; height:100%; object-fit:cover; display:block; }
.video-toggle{
  position:absolute; left:16px; bottom:16px; z-index:2;
  border:0; border-radius:999px; padding:10px 14px;
  font-weight:700; font-size:14px; color:#111; cursor:pointer;
  background: #f2d780;
  background-image: radial-gradient(130% 180% at 20% 0%, #fff7da 0%, #ffe9a8 40%, #f2d780 60%, #d4af37 85%, #c49b2f 100%);
  box-shadow: 0 10px 24px rgba(22,28,45,0.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.video-toggle:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22,28,45,0.18); }
.video-caption.small{ margin-top:10px; }
.video-caption.small .mini-hint{ color:#5a6270; margin:0 0 8px; }

/* =========================================================
   DECK 3D + 4 BLOCS (section .deck-and-features)
   — à coller TOUT EN BAS de ton CSS
   — aucun conflit: tout est scoping sur .deck-and-features / #heroDeck
   ========================================================= */

/* --- Grille de la section --- */
.deck-and-features{ padding-top:40px; overflow:visible; }
.deck-and-features .df-grid{
  display:grid;
  grid-template-columns: 1.12fr .88fr; /* deck légèrement plus large à gauche */
  gap:32px;
  align-items:center;
}
@media (max-width:1024px){
  .deck-and-features .df-grid{ grid-template-columns:1fr; gap:24px; }
}

/* === Deck 3D — arrondis partout, zéro encadrement === */
#heroDeck{
  position: relative;
  height: 420px;
  perspective: 1100px;
  overflow: visible;               /* rien ne coupe sur les côtés */
}

#heroDeck .hero-photo{
  position: absolute;
  top: 50%; left: 50%;
  width: 70%;
  max-width: 520px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: pointer;

  /* ► pas d’encadrement */
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;

  /* ► coins arrondis pour TOUTES les cartes + masquage propre */
  border-radius: 18px !important;
  overflow: hidden;                /* clippe les coins de l'image */
  backface-visibility: hidden;
  outline: 1px solid transparent;  /* fix rendu WebKit sur 3D + radius */
  
  /* transitions fluides */
  transition:
    transform 1s cubic-bezier(.25,.8,.25,1),
    opacity   .6s ease,
    z-index    .6s step-end;
}

#heroDeck .hero-photo img{
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;

  /* ► les images aussi sont arrondies (aucun carré) */
  border-radius: 18px !important;

  /* pas d’ombre/bordure sur l’image elle-même */
  box-shadow: none !important;
  border: none !important;
}

/* --- Positions rapprochées et lisibles --- */
#heroDeck .deck-front{
  z-index: 40;
  transform: translate(-50%, -50%) translateZ(50px) scale(1.0);
  opacity: 1;
}
#heroDeck .deck-right{
  z-index: 30;
  transform: translate(-50%, -50%) translateX(20%) rotateY(-8deg) scale(.95);
  opacity: .95;
}
#heroDeck .deck-left{
  z-index: 30;
  transform: translate(-50%, -50%) translateX(-20%) rotateY(8deg) scale(.95);
  opacity: .95;
}
#heroDeck .deck-back{
  z-index: 20;
  transform: translate(-50%, -50%) translateZ(-40px) scale(.90);
  opacity: .75;
}

/* Hover (desktop) : petit lift sans bloquer l’auto-rotation */
@media (hover:hover){
  #heroDeck:hover .deck-front{
    transform: translate(-50%, -50%) translateZ(70px) scale(1.02);
  }
}

/* Désactiver tout clic dans le deck 3D */
#heroDeck .hero-photo,
#heroDeck .hero-photo *,
#heroDeck a,
#heroDeck button {
  pointer-events: none !important;
  cursor: default !important;
}

/* Optionnel : empêcher les sélections / press long */
#heroDeck,
#heroDeck * {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}


/* Responsive */
@media (max-width:1024px){
  #heroDeck{ height: 360px; }
  #heroDeck .hero-photo img{ height: 360px; }
  #heroDeck .deck-right{ transform: translate(-50%, -50%) translateX(22%) rotateY(-7deg) scale(.95); }
  #heroDeck .deck-left { transform: translate(-50%, -50%) translateX(-22%) rotateY(7deg)  scale(.95); }
}
@media (max-width:640px){
  #heroDeck{ height: 300px; }
  #heroDeck .hero-photo{ width: 84%; max-width: 440px; }
  #heroDeck .hero-photo img{ height: 300px; }
  #heroDeck .deck-right{ transform: translate(-50%, -50%) translateX(18%) rotateY(-6deg) scale(.96); }
  #heroDeck .deck-left { transform: translate(-50%, -50%) translateX(-18%) rotateY(6deg)  scale(.96); }
}


/* --- Colonne droite : 4 blocs --- */
.df-features{
  display:grid;
  gap:18px;
}
.df-features .feature-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 20px rgba(22,28,45,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.df-features .feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(22,28,45,.12);
}
.df-features .feature-ico{
  font-size:24px;
  line-height:1;
  margin-bottom:6px;
}
.df-features .feature-card h3{
  margin:0 0 6px;
  font-size:20px;
}
.df-features .feature-card p{
  margin:0;
  color:#555;
  font-size:15px;
}

/* === Deck 3D — transitions très fluides === */
#heroDeck .hero-photo{
  will-change: transform, opacity, box-shadow;
  transition:
    transform 0.8s cubic-bezier(.22,.7,.2,1),
    opacity   0.8s ease,
    box-shadow 0.6s ease;
}

/* === Deck 3D — fluidité + pas d'encadrement === */
#heroDeck { position: relative; overflow: visible; }
.deck-and-features, .df-grid { overflow: visible; } /* évite toute coupe de l’ombre */

#heroDeck .hero-photo{
  /* coins arrondis sur TOUTES les cartes et zero “cadre” */
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  backface-visibility: hidden;

  /* animation très fluide */
  will-change: transform, opacity, box-shadow, filter;
  transition:
    transform 0.8s cubic-bezier(.22,.7,.2,1),
    opacity   0.8s ease,
    box-shadow 0.6s ease,
    filter    0.6s ease;
}
#heroDeck .hero-photo img{
  border-radius: 18px !important;
  display: block;
}

/* === Ombre “physique” par drop-shadow (visible partout) === */
/* forte sous la carte avant, plus légère sur les côtés, quasi nulle derrière */
#heroDeck .deck-front { filter: drop-shadow(0 24px 28px rgba(0,0,0,.22)); }
#heroDeck .deck-right,
#heroDeck .deck-left  { filter: drop-shadow(0 16px 22px rgba(0,0,0,.16)); }
#heroDeck .deck-back  { filter: drop-shadow(0 10px 16px rgba(0,0,0,.12)); }

/* === Ombre elliptique additionnelle (accroche au “sol”) === */
/* elle vit avec la carte (plus crédible) et s’ajoute au drop-shadow */
#heroDeck .hero-photo::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 6px;                         /* colle au “sol” de la carte */
  transform: translateX(-50%);
  width: 62%;
  height: 18px;
  pointer-events:none;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%,
              rgba(0,0,0,.34) 0%,
              rgba(0,0,0,.18) 55%,
              rgba(0,0,0,0) 100%);
  filter: blur(10px);
  opacity:.70;
  transition: transform .6s cubic-bezier(.22,.7,.2,1), opacity .6s ease;
}
#heroDeck .deck-front::after{ opacity:.46; transform: translateX(-50%) scale(1.15); }
#heroDeck .deck-right::after{ opacity:.40; transform: translateX(-50%) scale(1.25) skewX(-6deg); }
#heroDeck .deck-left::after { opacity:.40; transform: translateX(-50%) scale(1.25) skewX(6deg); }
#heroDeck .deck-back::after { opacity:.28; transform: translateX(-50%) scale(1.05); }

/* Petit “lift” au survol sans bloquer l’auto-rotation */
@media (hover:hover){
  #heroDeck:hover .deck-front{
    transform: translate(-50%, -50%) translateZ(70px) scale(1.02);
  }
}

/* Préférence utilisateur : réduit les animations */
@media (prefers-reduced-motion: reduce){
  #heroDeck .hero-photo,
  #heroDeck .hero-photo::after{ transition: none; }
}

/* === Ligne discrète dans la colonne texte === */
.key-line {
  display: flex;
  flex-wrap: wrap;            /* si petit écran, ça casse en 2 lignes */
  gap: 18px;
  margin: 12px 0 18px;        /* espace avant/après */
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: #444;
}

.key-line span {
  position: relative;
  font-weight: 500;
  padding: 0 12px;
  white-space: nowrap;
}

/* Séparateur fin doré */
.key-line span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #d4af37;
  opacity: 0.5;
}

/* === CTA pleine largeur premium dans le bloc vidéo === */
.video-cta .cta.full {
  display: flex;                  /* pour centrer le texte proprement */
  align-items: center;            /* centre verticalement */
  justify-content: center;        /* centre horizontalement */
  width: 100%;
  padding: 16px 0;                /* hauteur généreuse */
  font-size: 18px;                /* plus premium */
  font-weight: 600;               /* élégant mais pas trop lourd */
  border-radius: 14px;            /* coins un peu moins "pillule" */
  background: linear-gradient(135deg, #f6e79f 0%, #e7c65b 35%, #d4af37 60%, #c79d31 85%);
  box-shadow: 0 10px 26px rgba(212,175,55,0.25);
  text-align: center;
  letter-spacing: 0.3px;
}

/* effet médaille fluide */
.video-cta .cta.full::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 40%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.video-cta .cta.full:hover::before {
  transform: translateX(0);
}

.hero-kicker {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;       /* léger espacement, style éditorial */
  text-transform: uppercase;    /* effet rubrique */
  color: #7b7b7b;               /* gris élégant */
  margin-bottom: 12px;
  font-family: "Inter", system-ui, sans-serif;
  opacity: 0.85;                /* léger fondu pour plus de subtilité */
}

/* === Ligne discrète premium (comme .key-line) === */
.cf-bullets {
  display: flex;
  flex-wrap: wrap;        /* passe à la ligne si pas assez de place */
  gap: 18px;
  margin: 12px 0 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: #444;
}

.cf-bullets span {
  position: relative;
  font-weight: 500;
  padding: 0 12px;
  white-space: nowrap;
}

/* Séparateur fin doré */
.cf-bullets span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #d4af37;
  opacity: 0.5;
}

/* ===================================================
   GALERIE — Mise en page complète & animations douces
   HTML ciblé : .gallery-page (voir ton fichier)
   =================================================== */

/* ---- Base de section ---- */
.gallery-page .g-section { padding: 26px 0 12px; }
.gallery-page .g-title {
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
}
.gallery-page .g-sub {
  margin: 0 0 14px;
  color: #5a6270;
  max-width: 72ch;
}

/* =========================
   1) VUE CATEGORIES (cards)
   ========================= */
.g-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px){ .g-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-cat-grid { grid-template-columns: 1fr; } }

.g-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(22,28,45,.06);
  overflow: hidden;
  transform: perspective(800px) translateY(0) rotateX(0);
  transition: transform .5s cubic-bezier(.22,.7,.2,1), box-shadow .35s ease;
}
.g-card:hover {
  transform: perspective(800px) translateY(-4px) rotateX(2deg);
  box-shadow: 0 14px 34px rgba(22,28,45,.12);
}
.g-card-inner {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.g-card-inner:disabled { cursor: not-allowed; opacity: .6; }

/* vignette */
.g-card-thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f3f3f3;
}
.g-card-thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.22,.7,.2,1);
}
.g-card:hover .g-card-thumb img { transform: scale(1.06); }

/* méta */
.g-card-meta { padding: 14px; }
.g-card-meta h3 { margin: 0 0 6px; font-size: 20px; }
.g-card-meta p  { margin: 0 8px 10px 0; color: #5a6270; }
.g-count {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #fff7da;
  border: 1px solid rgba(212,175,55,.35);
}

/* Apparition douce au scroll (sans jamais masquer par défaut) */
.g-card { opacity: 1; }
.g-card.is-in { animation: gCardIn .6s cubic-bezier(.22,.7,.2,1) both; }
@keyframes gCardIn {
  from { opacity: 0; transform: perspective(800px) translateY(10px) rotateX(4deg); }
  to   { opacity: 1; transform: perspective(800px) translateY(0)     rotateX(0); }
}

/* ===============================
   2) VUE PHOTOS D’UNE CATEGORIE
   =============================== */

/* Topbar sticky (sous header fixe ~90px) */
.g-topbar {
  position: sticky; top: 90px; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 22px rgba(22,28,45,.06);
}
.g-back {
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
  transition: transform .18s ease, box-shadow .18s ease;
}
.g-back:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(22,28,45,.10); }

.g-allcats {
  margin-left: auto;
  border: 1px solid rgba(212,175,55,.5);
  background: #fff;
  color: #111;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
}
.g-allcats[aria-expanded="true"] { background: linear-gradient(135deg, #fff7da, #ffe9a8); }

/* Panneau catégories raccourci */
.g-allcats-panel {
  position: sticky; top: 138px; z-index: 6;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(22,28,45,.12);
  padding: 10px; margin: 10px 0 8px;
}
.g-allcats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g-allcats-item {
  border: 1px solid rgba(212,175,55,.45);
  background: #fff;
  border-radius: 12px;
  padding: 10px; text-align: center; font-weight: 600; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.g-allcats-item:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(22,28,45,.10); }
@media (max-width: 900px){ .g-allcats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .g-allcats-grid { grid-template-columns: 1fr; } }



/* Titre qui “entre” à chaque changement de catégorie */
.g-3d {
  opacity: 0;
  transform: perspective(800px) translateY(-6px) rotateX(12deg) scale(.98);
  animation: gTitleIn .7s cubic-bezier(.22,.7,.2,1) forwards;
}
@keyframes gTitleIn {
  60% { opacity:1; transform: perspective(800px) translateY(0) rotateX(0) scale(1.02); }
  100%{ opacity:1; transform: perspective(800px) translateY(0) rotateX(0) scale(1); }
}

/* Flèches prev/next */
.g-cat-nav {
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  width: 42px; height: 42px;
  border-radius: 999px;
  font-size: 22px; line-height: 1;
  box-shadow: 0 6px 16px rgba(22,28,45,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.g-cat-nav:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,28,45,.12); }

/* =======================
   3) GRILLE DE PHOTOS
   ======================= */

/* Masonry simple (columns) — compatible et fluide */
.g-grid { columns: 3 320px; column-gap: 14px; }
@media (max-width: 900px){ .g-grid { columns: 2 300px; } }
@media (max-width: 560px){ .g-grid { columns: 1 100%; } }

/* Item */
.g-item {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden; /* arrondis visibles */
  position: relative;
  background: #f3f3f3; /* skeleton de fond si img tarde */
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 8px 22px rgba(22,28,45,.06);
}
.g-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(22,28,45,.12);
}
.g-item img {
  width: 100%; height: auto; display: block;
  transition: transform .45s ease, opacity .45s ease;
}
.g-item.is-loaded img { opacity: 1; transform: none; }

/* Skeleton interne optionnel (si injecté par le JS) */
.g-item .ph {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: phShimmer 1.2s linear infinite;
}
@keyframes phShimmer { 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* Pour éviter tout bug d’affichage (ne JAMAIS masquer par défaut) */
.g-item { opacity: 1; }
.g-item.is-in { animation: itemIn .4s ease both; }
@keyframes itemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =======================
   4) LIGHTBOX (déjà en HTML)
   ======================= */
.g-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
  padding: 20px;
}
.g-lightbox[hidden] { display: none; }
.g-lightbox-img {
  max-width: 92vw; max-height: 82vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.g-lightbox-cap { color:#fff; margin-top:10px; text-align:center; font-size:14px; opacity:.85; }
.g-lightbox-prev, .g-lightbox-next, .g-lightbox-close {
  position: absolute;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  width: 42px; height: 42px; border-radius: 999px; font-size: 22px;
  transition: background .18s ease, transform .18s ease;
}
.g-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.g-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.g-lightbox-close{ top: 16px; right: 16px; font-size: 26px; }
.g-lightbox-prev:hover, .g-lightbox-next:hover, .g-lightbox-close:hover {
  background: rgba(255,255,255,.2); transform: translateY(-50%) scale(1.04);
}
.g-lightbox-close:hover { transform: none; }

/* =======================
   5) PETITS DÉTAILS UX
   ======================= */
.gallery-page [hidden] { display: none !important; }   /* respect de tes vues */
.g-topbar.is-scrolled { box-shadow: 0 10px 26px rgba(22,28,45,.12); }

.g-head[ id ] { scroll-margin-top: 110px; } /* si ancres */





/* Titre */
.gallery-page #photosView #catTitle{
  margin: 0;
}

/* Description (ton texte “Grande terrasse panoramique…”) */
.gallery-page #photosView #catDesc{
  margin: 6px auto 0;     /* auto à gauche/droite = bloc bien centré */
  text-align: center;
  line-height: 1.55;
  color: #5a6270;
}

/* Boutons flèches : restent plaqués aux bords */
.gallery-page #photosView .g-cat-prev{ justify-self: start; }
.gallery-page #photosView .g-cat-next{ justify-self: end; }

/* ================================
   GALERIE — Stack des 2 headers
   (topbar + header de catégorie)
   ================================ */
:root{
  --g-topbar-h: 56px;              /* hauteur estimée du topbar */
}

/* Topbar collé juste sous le header fixe du site */
.gallery-page #photosView .g-topbar{
  position: sticky;
  top: var(--header-h);            /* sous le header global */
  z-index: 8;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(22,28,45,.05);
  margin: 0;
}

/* Header de catégorie collé sous le topbar → aspect "un seul bloc" */
.gallery-page #photosView .g-head--center{
  position: sticky;
  top: calc(var(--header-h) + var(--g-topbar-h));
  z-index: 7;                      /* sous le topbar, au-dessus du contenu */
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(22,28,45,.05);
  padding: 12px 0 14px;            /* un peu d’air */
  margin: -1px 0 8px;              /* colle la bordure avec le topbar */
  text-align: center;
}

/* Garde la grille 3 colonnes (flèche / centre / flèche) */
.gallery-page #photosView .g-head--center{
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: center;
  gap: 10px;
}

/* ================================
   Titre premium (dégradé doré)
   ================================ */
.gallery-page #photosView #catTitle{
  margin: 0 0 4px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .2px;
  /* dégradé doré premium */
  background: linear-gradient(135deg,
              #8a6a16 0%,
              #d4af37 32%,
              #f2d780 55%,
              #c49b2f 78%,
              #8a6a16 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* petit filet doré sous le titre (sobre) */
.gallery-page #photosView #catTitle::after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,#d4af37,#f2d780,#d4af37);
  opacity: .9;
}

/* Description premium, centrée */
.gallery-page #photosView #catDesc{
  margin: 10px auto 0;
  color: #5a6270;
  line-height: 1.55;
  font-size: 15.5px;
}

/* Boutons flèches : restent plaqués aux bords */
.gallery-page #photosView .g-cat-prev{ justify-self: start; }
.gallery-page #photosView .g-cat-next{ justify-self: end; }

/* État “scrolled” du topbar (déjà en place dans ton JS) */
.gallery-page #photosView .g-topbar.is-scrolled{
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 28px rgba(22,28,45,.08);
}

/* =======================================================
   GALERIE — HERO premium (dégradé gold + 3D douce)
   ======================================================= */

:root{
  --g-hero-r: 18px;                /* rayon bords */
  --g-hero-pad: 22px;              /* padding intérieur */
  --g-hero-bg1: #fff;              /* fond carte */
  --g-hero-brd: rgba(0,0,0,.06);   /* bordure carte */
  --g-hero-shadow: 0 12px 28px rgba(22,28,45,.08);
}

/* conteneur 3D + décor subtil */
.g-hero{
  position: relative;
  margin-top: 6px;
  margin-bottom: 12px;
  perspective: 1200px;
  isolation: isolate;
}

/* carte “verre premium” qui porte le titre + texte */
.g-hero-inner{
  text-align: center;
  position: relative;
  border-radius: var(--g-hero-r);
  background: var(--g-hero-bg1);
  border: 1px solid var(--g-hero-brd);
  padding: var(--g-hero-pad) clamp(16px, 3vw, 28px);
  box-shadow: var(--g-hero-shadow);
  transform-style: preserve-3d;
  /* entrée 3D fluide */
  opacity: 0;
  transform: translateY(10px) rotateX(6deg) scale(.985);
  animation: gHeroIn .8s cubic-bezier(.22,.7,.2,1) .05s forwards;
}

/* halo or très subtil derrière la carte */
.g-hero::before{
  content:"";
  position:absolute;
  inset: -6% -3% auto -3%;
  height: 48%;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 50% 0%,
      rgba(212,175,55,.20), rgba(212,175,55,0) 70%);
  filter: blur(8px);
  opacity: .6;
  pointer-events: none;
}

/* léger motif angulaire ultra discret (texture premium) */
.g-hero-inner::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from 210deg at 70% 10%,
      rgba(212,175,55,.10), transparent 30%) ,
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  opacity: .22;
}

/* Titre doré dégradé + petit “shine” au hover */
.g-hero-title{
    display: inline-block;       /* pour que le filet reste centré */
  text-align: center;
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.12;
  font-size: clamp(26px, 3.8vw, 36px);
  background: linear-gradient(135deg,
              #8a6a16 0%,
              #d4af37 32%,
              #f2d780 55%,
              #c49b2f 78%,
              #8a6a16 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transform: translateZ(24px);     /* micro profondeur */
}

/* filet or centré sous le titre */
.g-hero-title::after{
  content:"";
  display:block;
  width: 66px; height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,#d4af37,#f2d780,#d4af37);
  opacity: .9;
  transform: translateZ(24px);
}

.g-hero-sub {
  margin-top: 10px;
  color: #5a6270;
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.6;
}


/* animation d’entrée */
@keyframes gHeroIn{
  to{
    opacity: 1;
    transform: none;
  }
}

/* micro tilt/perspective au survol, le scroll reste fluide */
@media (hover:hover){
  .g-hero:hover .g-hero-inner{
    transform: rotateX(3deg) rotateY(2deg) translateY(-2px) scale(1.002);
    transition: transform .6s cubic-bezier(.22,.7,.2,1);
  }
  .g-hero:hover .g-hero-title::after{
    width: 82px;                    /* filet s’étire un peu */
    transition: width .45s cubic-bezier(.22,.7,.2,1);
  }
}

/* réduit les effets si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .g-hero-inner,
  .g-hero-title::after{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* === Galerie : centrer le titre + sous-titre de la vue catégories === */
.gallery-page #catView {
  text-align: center;                /* centre le texte du bloc d’intro */
}

.gallery-page #catView .g-title {
  margin: 0 auto 6px;                /* centre le H1 et espace dessous */
}

.gallery-page #catView .g-sub {
  margin: 0 auto 18px;               /* centre le paragraphe */
  max-width: 70ch;                   /* largeur de lecture confortable */
  line-height: 1.6;
}

/* Ne pas impacter l’alignement des cartes en dessous */
.gallery-page #catView .g-cat-grid,
.gallery-page #catView .g-card,
.gallery-page #catView .g-card-meta {
  text-align: initial;               /* redevient aligné à gauche */
}

/* === Galerie : espace entre le bloc intro et la grille des catégories === */
.gallery-page #catView .g-hero-inner {
  margin-bottom: 40px;   /* ajuste la valeur selon l’air que tu veux (30–60px) */
}

/* === Section Tarifs & Inclus (hauteurs égales) === */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* deux colonnes égales */
  gap: 24px;
  align-items: stretch;             /* 🔑 force les colonnes à avoir la même hauteur */
}

.pricing .card {
  background: #fafafa;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 80%;                     /* 🔑 prend toute la hauteur dispo */
  display: flex;
  flex-direction: column;           /* utile si tu veux aligner les boutons en bas */
}

.pricing .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

/* Responsive : 1 colonne sur petits écrans */
@media (max-width: 860px) {
  .pricing {
    grid-template-columns: 1fr;
  }
}

/* === Accueil — Bloc Contact premium (carte dorée) === */
.contact-section .contact-premium{
  background: linear-gradient(135deg, #fff7da 0%, #ffffff 60%);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 8px 22px rgba(212,175,55,0.10);
  position: relative;
  overflow: hidden;
}

/* léger “gloss” discret en haut à gauche */
.contact-section .contact-premium::before{
  content:"";
  position:absolute;
  top:-40px; left:-60px;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.8), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.35;
}

/* Titre + texte cohérents avec le reste du site */
.contact-section .contact-premium h2{
  margin: 0 0 8px;
}
.contact-section .contact-premium p{
  margin: 0 0 14px;
  color:#5a6270;
}

/* Bouton : joli alignement et respiration */
.contact-section .contact-premium .cta{
  margin-top: 6px;
}

/* Option: pleine largeur sur mobile pour le confort */
@media (max-width:560px){
  .contact-section .contact-premium .cta{
    display:block;
    width:100%;
    text-align:center;
  }
}

/* --- Sizing image : verrouille les dimensions propres --- */
.infos-split .split-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;                 /* masque proprement */
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
.infos-split .split-media img{
  display: block;
  width: 100%;
  height: 420px;                    /* même valeur que ton site */
  object-fit: cover;
  border-radius: 18px;              /* coins toujours arrondis */
}

/* --- Animation 3D isolée (n’impacte pas tes autres .reveal-*) --- */
.infos-split.fx-3d .split-row{
  perspective: 1100px;
  transform-style: preserve-3d;
}

.infos-split.fx-3d .split-media,
.infos-split.fx-3d .split-copy{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .8s cubic-bezier(.22,.7,.2,1),
    opacity   .8s ease;
}

/* État départ (léger tilt) */
.infos-split.fx-3d .split-media{
  transform: translateY(18px) rotateX(6deg) rotateY(-6deg) scale(.985);
}
.infos-split.fx-3d .split-copy{
  transform: translateY(22px) rotateX(8deg) rotateY(6deg) scale(.985);
}

/* État visible */
.infos-split.fx-3d.is-in .split-media,
.infos-split.fx-3d.is-in .split-copy{
  opacity: 1;
  transform: none;
}

/* décalage fin premium */
.infos-split.fx-3d.is-in .split-media{ transition-delay: .05s; }
.infos-split.fx-3d.is-in .split-copy { transition-delay: .12s; }

/* Hover subtil sur l’image seulement (ne touche pas au texte) */
@media (hover:hover){
  .infos-split.fx-3d .split-media:hover{
    transform: translateY(-4px) scale(1.01) rotateX(1deg) rotateY(-1deg);
    transition-duration: .45s;
  }
}

/* Respect des préférences */
@media (prefers-reduced-motion: reduce){
  .infos-split.fx-3d .split-media,
  .infos-split.fx-3d .split-copy{ transition: none; transform: none; opacity: 1; }
}

/* =========================
   INTRO — FX premium 3D
   ========================= */
.fx-intro .intro-grid{
  perspective: 1100px;             /* pour les micro-tilts 3D */
  transform-style: preserve-3d;
}

/* État initial (apparition progressive) */
.fx-intro .intro-copy,
.fx-intro .intro-media{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .9s cubic-bezier(.22,.7,.2,1),
    opacity   .9s ease;
}
.fx-intro .intro-copy{
  transform: translateY(18px) rotateX(5deg) scale(.99);
}
.fx-intro .intro-media{
  transform: translateY(22px) rotateX(7deg) rotateY(-6deg) scale(.985);
}

/* Quand visible */
.fx-intro.is-in .intro-copy,
.fx-intro.is-in .intro-media{
  opacity: 1;
  transform: none;
}
/* léger décalage (stagger) */
.fx-intro.is-in .intro-copy{  transition-delay: .05s; }
.fx-intro.is-in .intro-media{ transition-delay: .14s; }

/* ---- Kicker “journal premium” + léger shimmer ---- */
.fx-intro .hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a7384;
  opacity: .95;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(212,175,55,.35), rgba(255,255,255,0)) no-repeat 0 100% / 0 1px;
  transition: background-size .8s ease;
}
.fx-intro.is-in .hero-kicker{
  background-size: 100% 1px;
}
.fx-intro .hero-kicker::before,
.fx-intro .hero-kicker::after{
  content:"";
  width: 18px; height: 1px; background: rgba(212,175,55,.55);
  display: inline-block;
}
.fx-intro .hero-kicker::before{ opacity:.9; }
.fx-intro .hero-kicker::after { opacity:.55; }

/* ---- Titre + lead : apparition douce + légère montée ---- */
.fx-intro .intro-copy h1,
.fx-intro .intro-copy .lead,
.fx-intro .intro-copy .key-line,
.fx-intro .intro-copy .hero-ctas{
  opacity: 0;
  transform: translateY(10px);
  transition:
    transform .7s cubic-bezier(.22,.7,.2,1),
    opacity   .7s ease;
  will-change: transform, opacity;
}
.fx-intro.is-in .intro-copy h1{      transition-delay: .08s; opacity:1; transform:none; }
.fx-intro.is-in .intro-copy .lead{    transition-delay: .16s; opacity:1; transform:none; }
.fx-intro.is-in .intro-copy .key-line{transition-delay: .22s; opacity:1; transform:none; }
.fx-intro.is-in .intro-copy .hero-ctas{transition-delay: .30s; opacity:1; transform:none; }

/* ---- Key-line : séparateurs qui “poussent” ---- */
.fx-intro .key-line span{
  position: relative;
}
.fx-intro .key-line span::after{
  content:"";
  position: absolute;
  right: -9px; top: 50%;
  width: 1px; height: 14px;
  background: #d4af37;
  opacity: .45;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .6s ease .3s;
}
.fx-intro.is-in .key-line span::after{
  transform: translateY(-50%) scaleY(1);
}
.fx-intro .key-line span:last-child::after{ display:none; }

/* ---- Carte vidéo : tilt au survol + ombre au sol ---- */
.fx-intro .video-frame{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.7,.2,1), box-shadow .45s ease;
}
@media (hover:hover){
  .fx-intro .video-frame:hover{
    transform: translateZ(8px) rotateX(1.2deg) rotateY(-1.2deg) scale(1.01);
  }
}
/* ombre réaliste au “sol” */
.fx-intro .video-frame::after{
  content:"";
  position:absolute;
  left:50%; bottom:-8px; transform:translateX(-50%);
  width: 86%;
  height: 22px;
  background: radial-gradient(50% 70% at 50% 50%,
             rgba(0,0,0,.22) 0%,
             rgba(0,0,0,.14) 45%,
             rgba(0,0,0,0) 100%);
  filter: blur(8px);
  opacity: .36;
  mix-blend-mode: multiply;
  transition: transform .45s cubic-bezier(.22,.7,.2,1), opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover:hover){
  .fx-intro .video-frame:hover::after{
    transform: translateX(-50%) scaleX(1.06) scaleY(1.1);
    opacity: .42;
  }
}

/* ---- CTA : micro-3D + gloss discret ---- */
.fx-intro .hero-ctas .cta{
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
@media (hover:hover){
  .fx-intro .hero-ctas .cta:hover{
    transform: translateY(-2px) scale(1.04) rotateX(1deg);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
  }
}

/* ---- Respect préférences ---- */
@media (prefers-reduced-motion: reduce){
  .fx-intro .intro-copy,
  .fx-intro .intro-media,
  .fx-intro .intro-copy h1,
  .fx-intro .intro-copy .lead,
  .fx-intro .intro-copy .key-line,
  .fx-intro .intro-copy .hero-ctas,
  .fx-intro .video-frame,
  .fx-intro .video-frame::after{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===============================
   HOME — Catégories à la une : médias
   (images responsives + hover 3D)
   =============================== */

/* Donne de la profondeur pour l’effet 3D */
.home-categories .cf-row{
  perspective: 1000px;
  overflow: visible;
}

/* Carte média responsive (ratio stable, coins ronds) */
.home-categories .cf-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;             /* ratio propre sur desktop */
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform .35s cubic-bezier(.22,.7,.2,1),
              box-shadow .35s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border: none;                       /* pas d’encadrement */
}

/* L’image remplit parfaitement le cadre */
.home-categories .cf-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transform: translateZ(0);           /* base du relief */
  transition: transform .35s cubic-bezier(.22,.7,.2,1);
}

/* Hover 3D “soft” et propre aux desktops */
@media (hover:hover){
  .home-categories .cf-row:hover .cf-media{
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) scale(1.015);
    box-shadow: 0 22px 50px rgba(22,28,45,.16);
  }
  .home-categories .cf-row:hover .cf-media img{
    transform: translateZ(16px);
  }
}

/* Ajuste le ratio sur petits écrans pour un peu plus de hauteur visuelle */
@media (max-width: 1024px){
  .home-categories .cf-media{ aspect-ratio: 16 / 11; }
}
@media (max-width: 640px){
  .home-categories .cf-media{ aspect-ratio: 4 / 3; }
}

/* Respecte la préférence d’animations réduites */
@media (prefers-reduced-motion: reduce){
  .home-categories .cf-media,
  .home-categories .cf-media img{ transition: none; }
}

/* ====== HOME CATEGORIES (structure texte+image) ====== */
.home-categories .cf-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  column-gap: 28px;
  row-gap: 28px;
  margin-bottom: 34px;
}

.home-categories .cf-row.right {
  grid-template-columns: .95fr 1.05fr;
}
.home-categories .cf-row.right .cf-media { order: 2; }
.home-categories .cf-row.right .cf-copy  { order: 1; }

/* ====== HOME CATEGORIES — Médias avec hover 3D ====== */
.home-categories .cf-row{
  perspective: 1000px;
  overflow: visible;
}

.home-categories .cf-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform .35s cubic-bezier(.22,.7,.2,1),
              box-shadow .35s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border: none;
}

.home-categories .cf-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.22,.7,.2,1);
}

@media (hover:hover){
  .home-categories .cf-row:hover .cf-media{
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) scale(1.015);
    box-shadow: 0 22px 50px rgba(22,28,45,.16);
  }
  .home-categories .cf-row:hover .cf-media img{
    transform: translateZ(16px);
  }
}

@media (max-width: 1024px){
  .home-categories .cf-media{ aspect-ratio: 16 / 11; }
}
@media (max-width: 640px){
  .home-categories .cf-media{ aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce){
  .home-categories .cf-media,
  .home-categories .cf-media img{ transition: none; }
}

/* ==========================
   Responsive Mobile (<768px)
   ========================== */

/* Conteneur principal */
@media (max-width: 768px) {
  .rates-hero .g {
    grid-template-columns: 1fr;   /* Titre au-dessus de la photo */
    gap: 20px;
  }

  .rates-wrap {
    grid-template-columns: 1fr;   /* Calendrier au-dessus du bloc "Votre séjour" */
    gap: 20px;
  }

  /* Hero title */
  .rates-title {
    font-size: 26px;
    text-align: center;
  }
  .rates-sub {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  /* Calendrier */
  .cal-card {
    padding: 12px;
  }
  .cal-grid {
    gap: 4px;
  }
  .day {
    height: 56px;
    padding: 6px 4px;
    border-radius: 8px;
  }
  .day .price {
    font-size: 10px;
  }
  .cal-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* Sélecteur d'invités */
  .guests-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .guests-stepper {
    justify-content: space-between;
    width: 100%;
  }

  /* Bloc "Votre séjour" */
  .stay-meta {
    grid-template-columns: 1fr;  /* chips en colonne */
  }
  .stay-meta .meta-chip {
    width: 100%;
    justify-content: space-between;
  }
  .stay-totals .total-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .total-card .t-amount {
    margin-top: 4px;
  }

  /* Boutons CTA */
  .btn-row {
    flex-direction: column;
  }
  .btn-wide, .btn-ghost {
    width: 100%;
  }

  /* Footer/header text */
  footer, header {
    text-align: center;
  }
}
/* =========================
   BREATHING ROOM + IMAGES
   (à coller en fin de CSS)
   ========================= */
:root{
  /* Échelle d’espacement douce */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  --space-6: 44px;
  --space-7: 64px;
}

/* Conteneur + sections plus “respirants” */
.container{
  padding-inline: clamp(16px, 4vw, 28px);
}
.section{
  margin-block: var(--space-6);
}
.section + .section{
  margin-top: var(--space-7);
}

/* Cartes & blocs verticaux : espace régulier entre enfants */
.card > * + *{ margin-top: var(--space-3); }

/* Boutons : empilement avec espace confortable */
.btn-row{ gap: var(--space-3); }
.hero-ctas, .cf-ctas{
  display:flex; flex-wrap:wrap; gap: var(--space-3);
}
.cta{ min-height: 44px; }

/* Titres / sous-titres juste un peu d’air */
h1,h2,h3{ line-height: 1.2; }
h1 + p, h2 + p{ margin-top: var(--space-2); }

/* ======================
   IMAGES : dimensions OK
   ====================== */

/* Règle sûre par défaut */
.container img{
  display:block;
  max-width:100%;
  height:auto;              /* stop aux étirements */
}

/* —— Accueil : “catégories à la une” ——————————————————— */
.home-categories .cf-row{
  row-gap: var(--space-4);
  column-gap: var(--space-5);
  align-items: center;
}

/* Le bloc média devient un cadre à ratio fixe, l’image remplit sans déformer */
.home-categories .cf-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
  /* ratio confortable desktop */
  aspect-ratio: 16 / 10;
}
.home-categories .cf-media img{
  width:100%;
  height:100%;
  object-fit: cover;         /* pas de distorsion */
}
.home-categories .cf-media:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.01);
  box-shadow: 0 22px 50px rgba(0,0,0,.16);
}

/* Sur mobile, on monte un peu la hauteur visuelle */
@media (max-width: 768px){
  .home-categories .cf-row{ grid-template-columns: 1fr !important; }
  .home-categories .cf-media{ aspect-ratio: 4 / 3; } /* un peu plus haut */
}

/* —— Héro tarifs/dispos (vignette) ———————————————— */
.rates-hero .hero-shot{
  border-radius: 18px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(22,28,45,.08);
  aspect-ratio: 16 / 9;      /* fixe le cadre */
}
.rates-hero .hero-shot img{
  width:100%; height:100%; object-fit: cover;
}

/* —— Blocs texte/photo “rates-block” —————————————— */
.rates-block{ gap: var(--space-4); }
.rates-block .media{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  aspect-ratio: 16 / 10;
}
.rates-block .media img{
  width:100%; height:100%; object-fit: cover;
}

/* —— Galerie / cards (si présent) ———————————————— */
.g-card-thumb{
  aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden;
}
.g-card-thumb img{
  width:100%; height:100%; object-fit: cover;
}

/* ======================
   CALENDRIER : souffle
   ====================== */
.cal-card{ padding: var(--space-4); }
.cal-head{ margin-bottom: var(--space-3); }
.cal-grid{ gap: var(--space-2); }
.day{
  height: 72px;                   /* un peu plus haut */
  padding: 10px 8px;
  border-radius: 12px;
}
.day .price{ font-size: 12px; }

/* Nav mois flottante un peu plus “lointaine” des bords */
.cal-nav-left{  left: -6px; }
.cal-nav-right{ right: -6px; }
@media (max-width: 1024px){
  .cal-nav-left{  left: 4px; }
  .cal-nav-right{ right: 4px; }
}

/* ======================
   “Votre séjour” : air
   ====================== */
.stay-box{ gap: var(--space-3); }
.stay-meta{
  gap: var(--space-3);
}
.stay-meta .meta-chip{
  padding: 8px 12px;
  border-radius: 10px;        /* un peu moins rond */
}
.stay-totals{ gap: var(--space-3); }
.total-card{ padding: 16px 18px; }

/* ======================
   Breakpoints additionnels
   ====================== */
@media (max-width: 1024px){
  .rates-wrap{ grid-template-columns: 1fr; gap: var(--space-5); }
  .rates-hero .g{ grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 768px){
  .section{ margin-block: var(--space-5); }
  .cal-card{ padding: var(--space-3); }
  .day{ height: 62px; }
  .hero-ctas .cta, .cf-ctas .cta{ flex: 1 1 100%; }  /* boutons pleine largeur */
}

/* Option : plus d’air entre “gros” blocs empilés */
.container > * + *{ margin-top: var(--space-5); }

/* === Galerie : tuiles stables + fade-in quand l'image est chargée === */
.gallery-grid .tile{
  position: relative;
  aspect-ratio: 4 / 3;          /* réserve la place → stop “jump/clignote” */
  background: #f3f4f6;          /* skeleton doux */
  overflow: hidden;
  border-radius: 12px;
}
.gallery-grid .tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;                    /* caché tant que pas chargé */
  transform: scale(.985);
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}
.gallery-grid .tile img.is-loaded{
  opacity: 1; transform: none;
}
.gallery-grid .tile img.is-error{
  opacity: 1; filter: grayscale(1) contrast(.9);
}

/* Désactive tout clic sur les images du deck 3D si tu réutilises la classe */
.deck-3d, #heroDeck { pointer-events: none; }
.deck-3d * , #heroDeck * { pointer-events: none; }

/* === Lightbox plein écran qui masque ENTIEREMENT les headers === */
.lb{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lb.is-open{ opacity: 1; pointer-events: auto; }
.lb img{
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.lb .lb-close{
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2);
}

/* Quand la lightbox est ouverte, on cache les headers et on bloque le scroll */
.lightbox-open { overflow: hidden; }
.lightbox-open .site-header,
.lightbox-open .gallery-cats,

/* masque UNIQUEMENT les vrais headers */
body.g-lb-open .site-header,
body.g-lb-open .g-topbar,
body.g-lb-open .cat-topbar{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

/* Quand la lightbox .g-lightbox est ouverte */
body.g-lb-open .site-header,
body.g-lb-open .g-topbar,
body.g-lb-open .cat-topbar { 
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* vignettes */
.g-item{position:relative;aspect-ratio:4/3;overflow:hidden}
.g-item img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.g-item.is-loaded img{opacity:1}

/* skeleton */
.g-item .ph{position:absolute;inset:0;background:#eee;animation:gPulse 1.2s ease-in-out infinite}
@keyframes gPulse{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}

/* covers des cartes catégories */
.g-card-thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.g-card-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.g-card-thumb.is-loaded img{opacity:1}
.g-card-thumb .ph{position:absolute;inset:0;background:#eee;animation:gPulse 1.2s ease-in-out infinite}

/* Quand l’image est prête, on cache le skeleton proprement */
.g-item.is-loaded .ph,
.g-card-thumb.is-loaded .ph{
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* vignettes */
.g-item{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  contain: content;              /* limite les repaint */
}
.g-item img{
  display: block;                /* supprime l’interligne */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  transition: opacity .35s ease; /* ne pas animer la taille */
}
.g-item.is-loaded img{ opacity: 1; }

/* covers des cartes catégories */
.g-card-thumb{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  contain: content;
}
.g-card-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  transition: opacity .35s ease;
}
.g-card-thumb.is-loaded img{ opacity: 1; }

/* skeleton (reste dessous puis s’éteint) */
.g-item .ph,
.g-card-thumb .ph{
  position: absolute;
  inset: 0;
  background: #eee;
  animation: gPulse 1.2s ease-in-out infinite;
  z-index: 0;                    /* sous l’image */
}
@keyframes gPulse{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}

/* 1) Transitions (au repos) */
#siteHeader,
.g-topbar,
.site-footer {
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}

/* 2) Masquer header + topbar + footer quand la lightbox est ouverte */
body.g-lb-open #siteHeader,
body.g-lb-open .g-topbar,
body.g-lb-open .site-footer {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* 3) Assure que la lightbox passe au-dessus de tout */
.g-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
}