@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@500;700&display=swap');
:root{--bg:#f7f6f4;--text:#1f2937;--brand:#334155;--white:#ffffff}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.site-header{background:var(--white);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}
.brand{display:flex;justify-content:center;align-items:center;padding:14px}
.logo{max-width:260px;width:100%}
.nav{background:var(--brand);display:flex;gap:18px;justify-content:center;padding:10px 12px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:600;text-transform:uppercase;font-size:.9rem}
.nav a:hover{text-decoration:underline}
.hero{position:relative;min-height:58vh;display:grid;place-items:center;text-align:center;color:#fff;border-radius: 18px}
.hero::before{content:'';position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.58));
  -webkit-backdrop-filter: saturate(1.05) blur(1.5px);
  backdrop-filter: saturate(1.05) blur(1.5px);
}
.hero .hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(1.05)}
.hero .inner{position:relative;padding:64px 16px;max-width:1100px}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(2rem,6vw,3.2rem);margin:12px 0 8px}
.hero p{font-size:clamp(1rem,2.8vw,1.25rem);opacity:.95;max-width:800px;margin:0 auto 18px}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700}
.btn-primary{background:#111827;color:#fff}.btn-primary:hover{opacity:.92}
section{padding:64px 20px;max-width:1100px;margin:0 auto}
section h2{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--brand);margin-bottom:10px}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.04);padding:24px}
.gallery-wrap .swiper{width:100%;padding:20px 0 42px}
.swiper-slide{display:flex;justify-content:center}
.swiper-slide img{border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);max-height:520px;width:auto;height:auto}
.lightbox-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox-backdrop.open{display:flex}.lightbox-backdrop img{max-width:92vw;max-height:90vh;border-radius:12px}
.lightbox-backdrop .close{position:absolute;top:14px;right:16px;background:#000;color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
footer{text-align:center;padding:28px 16px 60px;color:#6b7280}
footer .disclaimer{font-size:.85rem;margin-top:8px}

.half-size{
  width:50%;      /* moitié de la largeur du conteneur */
  height:auto;    /* conserve les proportions */
  display:block;
  margin:12px auto; /* centré */
}

/* --- Hero : texte en bleu élégant + overlay clair pour la lisibilité --- */
.hero,
.hero h1,
.hero p {
  color: var(--brand);           /* #334155 */
}

/* On éclaircit le voile du hero (au lieu du dégradé noir) pour que le bleu reste lisible */
.hero::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.62)
  );
}




/* ===== Scroll Reveal (quality feel) ===== */
[data-reveal]{
  opacity:0;
  transform: translateY(18px);
  will-change: transform, opacity;
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}
/* Variants */
[data-reveal="zoom"]{ transform: translateY(10px) scale(.98); }
[data-reveal="zoom"].is-visible{ transform:none; }
[data-reveal="left"]{ transform: translateX(-24px); }
[data-reveal="left"].is-visible{ transform:none; }
[data-reveal="right"]{ transform: translateX(24px); }
[data-reveal="right"].is-visible{ transform:none; }

/* Delays */
[data-reveal-delay="50"]{ transition-delay:.05s; }
[data-reveal-delay="100"]{ transition-delay:.1s; }
[data-reveal-delay="150"]{ transition-delay:.15s; }
[data-reveal-delay="200"]{ transition-delay:.2s; }
[data-reveal-delay="250"]{ transition-delay:.25s; }
[data-reveal-delay="300"]{ transition-delay:.3s; }

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
}


.media-wide img.half-size{
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  outline: 1px solid rgba(255,255,255,.6); /* discret sur fond photo */
  outline-offset: -1px;
}


/* === HERO : carte lisible derrière le texte === */
.hero .inner{
  position: relative;             /* déjà présent, on le garde */
  display: inline-block;          /* la carte épouse le contenu */
  z-index: 1;
  color: var(--brand) !important; /* texte en bleu élégant */
}

/* Carte verre dépoli derrière le texte */
.hero .inner::before{
  content: "";
  position: absolute;
  inset: -16px;                   /* déborde un peu pour une belle marge */
  background: rgba(255,255,255,0.28);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  z-index: -1;
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  backdrop-filter: blur(2px) saturate(1.05);
}

/* S’assure que les titres/paragraphes héritent bien du bleu */
.hero h1,
.hero p{
  color: var(--brand) !important;
}

/* (Option) si tu veux garder un léger voile général sur l'image du hero */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55));

}

.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg,
              rgb(255 255 255 / 0.55),
              rgb(255 255 255 / 0.38));
  -webkit-backdrop-filter: blur(2px) saturate(1.03);
  backdrop-filter: blur(2px) saturate(1.03);
}


/* ✅ IMPORTANT : si tu avais ajouté une carte derrière le texte, neutralise-la */
.hero .inner::before{ content:none !important; }
.hero h1, .hero p{ color: var(--brand) !important; }




.legal-min{ font-size:.82rem; color:#6b7280; }
.legal-min summary{ cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.legal-min__content{ margin-top:6px; }