/* ========= Base ========= */
*{box-sizing:border-box}
:root{
  --bg:#f3efe8; --panel:#ffffff; --ink:#1a1a1a; --muted:#6c7077;
  --gold:#c8a24f; --gold-strong:#a8842f; --line:#e7e1d7
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:0 20px}

/* ========= Header / Footer ========= */
.top{
  border-bottom:1px solid var(--line);
  background:rgba(243,239,232,.9);
  backdrop-filter:saturate(1.1) blur(6px)
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:14px 0;font-weight:800;letter-spacing:.4px
}
.dot{width:12px;height:12px;border-radius:50%;background:var(--gold)}
.foot{
  border-top:1px solid var(--line);
  padding:16px 0;
  opacity:.85;
  text-align:center
}

/* ========= Accueil : bandeau vidéo ========= */
.hero-banner{position:relative;isolation:isolate}
.hero-banner .bg{
  position:absolute;inset:0;width:100%;height:46vh;object-fit:cover;display:block
}
@media (min-width:900px){ .hero-banner .bg{height:52vh} }
.bg-fallback{display:none}
.overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))
}
.hero-center{
  position:relative;z-index:1;min-height:46vh;
  display:grid;place-items:center;text-align:center;
  padding:40px 0;color:#fff
}
.hero-center h1{
  margin:0 0 10px 0;
  font-size:clamp(26px,4vw,40px);
  font-weight:800
}
.lead{max-width:840px;margin:0 auto;opacity:.95}
.actions{
  display:flex;gap:12px;justify-content:center;
  margin-top:16px;flex-wrap:wrap
}
.btn{
  display:inline-block;padding:10px 16px;
  border-radius:999px;border:1px solid var(--line);
  text-decoration:none;font-weight:700;
  background:#fff;color:var(--ink);
  transition:transform .12s ease,background .2s ease,border-color .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:var(--gold);background:linear-gradient(#fff,#fff8e8)}
.btn.primary:hover{border-color:var(--gold-strong);background:linear-gradient(#fff,#fff2d6)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:#ffffffcc}

/* ========= Accueil : cartes ========= */
.strip{background:linear-gradient(180deg,#efe9df,#f6f2eb)}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;transform:translateY(-28px)
}
@media (max-width:900px){
  .cards{grid-template-columns:1fr;transform:none;padding:18px 0}
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.04)
}
.card h3{margin:0 0 8px 0}
.contact{padding:22px 0;color:var(--muted);text-align:center}

/* ========= Page ACCÈS (acces.html) ========= */
.vip-access-bg{
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(200,162,79,.14), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(168,132,47,.10), transparent 60%),
    var(--bg);
}
.access-center{
  min-height:88vh;display:grid;place-items:center;padding:24px
}
.access-card{
  width:min(520px,92%);
  background:linear-gradient(180deg,#fff,#fffdf7);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:24px 22px
}
.access-head{text-align:center;margin-bottom:12px}
.access-head .dot{display:inline-block;vertical-align:middle;margin-right:8px}
.access-head h1{
  display:inline-block;margin:0 0 6px 0;
  font-size:clamp(20px,3.4vw,26px);
  font-weight:800
}
.label{font-weight:700;margin:10px 0 6px;display:block}
.input{
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;width:100%;
  color:var(--ink)
}
.input-lg{padding:14px 16px;border-radius:14px}
.btn-wide{width:100%;margin-top:8px}
.access-foot{display:grid;gap:8px;justify-items:center;margin-top:14px}
.small{font-size:.95rem}
.error{color:#b42318;min-height:1.2em}
.tiny{font-size:.9rem}
.muted{color:var(--muted)}
.fadein{animation:fadein .45s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ========= VIP (vip.html) ========= */
.vip-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(200,162,79,.18), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(168,132,47,.12), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line)
}
.vip-veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0))}
.vip-hero-inner{
  /* compact pour voir le contenu sans scroller */
  padding:26px 0 14px; text-align:center; color:var(--ink);
  animation:fadein .5s ease both
}
.vip-hero h1{margin:0 0 8px 0;font-weight:800;font-size:clamp(22px,3.2vw,30px)}
.vip-hero .lead{opacity:.85;max-width:820px;margin:0 auto;font-size:.98rem}
.vip-body{padding:18px 0 28px}
.vip-section{margin:16px 0}

/* --- Bloc PORTRAIT : badge au-dessus + photo réduite + cartouche blanche --- */
.vip-block{display:grid;justify-items:center;gap:10px}

.vip-tag{
  margin-top:4px;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:linear-gradient(#fff,#fff8e8);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  font-weight:700
}

/* Photo plus petite pour que la suite soit visible sans scroll */
.vip-portrait{
  max-width:380px;
  height:480px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 12px 32px rgba(0,0,0,.06)
}
@media (max-width:700px){
  .vip-portrait{ max-width:68vw; height:88vw; }
}
.vip-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 10%; /* cadrage visage; ajuste 6–14% si besoin */
  filter:saturate(1.02) contrast(1.02)
}

.vip-caption{
  width:100%;max-width:380px;text-align:center
}
.vip-caption .pill{
  display:inline-block;font-size:.85rem;padding:6px 10px;border-radius:999px;
  background:linear-gradient(#fff,#fff8e8); border:1px solid var(--gold)
}
.vip-caption h2{margin:8px 0 6px 0;font-size:clamp(18px,2.2vw,24px)}
.meta-strong{font-weight:700}
.vip-caption .muted{display:block;margin-top:4px}

/* Listes / perks / galerie / CTA */
.timeline{margin:8px 0 0 0;padding-left:20px}
.timeline li+li{margin-top:6px}
.perks-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;padding:0;list-style:none;margin:10px 0 0
}
@media (max-width:720px){.perks-grid{grid-template-columns:1fr}}
.perks-grid li{position:relative;padding-left:30px}
.perk-dot{
  position:absolute;left:0;top:2px;width:18px;height:18px;
  border-radius:50%;border:1px solid var(--gold);
  background:linear-gradient(#fff,#fff8e8)
}
.vip-gallery{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px
}
.vip-gallery img{
  display:block;width:100%;height:100%;
  object-fit:cover;aspect-ratio:16/10;
  border-radius:14px;border:1px solid var(--line)
}
@media (max-width:900px){.vip-gallery{grid-template-columns:1fr 1fr}}
.vip-cta{
  display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center;margin:18px 0 6px
}

/* ====== VIP : mise en page 2 colonnes (portrait + cartouche) ====== */
.vip-split{
  display:grid;
  grid-template-columns: 380px minmax(0,1fr); /* photo à gauche, texte à droite */
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){
  .vip-split{ grid-template-columns: 1fr; }
}

/* Photo portrait à gauche (compacte, cadrée haut) */
.vip-portrait{
  max-width:380px;
  height:480px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 12px 32px rgba(0,0,0,.06);
}
@media (max-width:700px){
  .vip-portrait{ max-width:68vw; height:88vw; margin-inline:auto; }
}
.vip-portrait img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 10%; /* remonte sur le visage; ajuste 6–14% si besoin */
  filter:saturate(1.02) contrast(1.02);
}

/* Cartouche élégante à droite */
.vip-side{
  display:grid;
  align-content:start;
  gap:10px;
  padding:18px;               /* la classe .card existe déjà, on ajoute juste du confort */
}
.vip-side .vip-tag{
  display:inline-block;
  margin-bottom:4px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:linear-gradient(#fff,#fff8e8);
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.vip-side h2{ margin:6px 0 4px 0; font-size:clamp(18px,2.2vw,24px); }
.vip-side .meta-strong{ font-weight:700; }
.vip-side .muted{ margin-top:2px; }
.vip-side hr{ border:0; border-top:1px solid var(--line); margin:10px 0; }

.vip-side-points{
  margin:0; padding-left:18px;
}
.vip-side-points li+li{ margin-top:6px; }

.grid2{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
textarea.input{resize:vertical}

/* ===== VIP : mise en page 2 colonnes (photo gauche + texte droite) ===== */
.vip-split{
  display:grid;
  grid-template-columns: 380px minmax(0,1fr); /* 1 colonne photo, 1 colonne texte */
  gap:28px;
  align-items:start;
  justify-content:center;
  margin-top:10px;
}
@media (max-width: 900px){
  .vip-split{ grid-template-columns:1fr; }
}

/* Photo à gauche */
.vip-portrait{
  max-width:380px;
  height:480px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 12px 32px rgba(0,0,0,.06);
}
@media (max-width:700px){
  .vip-portrait{ max-width:68vw; height:88vw; margin-inline:auto; }
}
.vip-portrait img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 10%; /* pour bien cadrer le visage */
  filter:saturate(1.02) contrast(1.02);
}

/* Colonne droite */
.vip-side{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  padding:18px;
}
.vip-side .vip-tag{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:linear-gradient(#fff,#fff8e8);
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.vip-side h2{margin:6px 0 4px 0;font-size:clamp(18px,2.2vw,24px)}
.vip-side .meta-strong{font-weight:700}
.vip-side .muted{margin-top:2px}
.vip-side hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.vip-side-points{margin:0;padding-left:18px}
.vip-side-points li+li{margin-top:6px}

/* === ALIGNEMENT PHOTO / TEXTE : HAUTEUR ÉGALE === */
.vip-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  justify-content: center;
}

/* Force la photo à prendre la même hauteur que la colonne texte */
.vip-portrait {
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  display: flex;
  align-items: stretch;
}

.vip-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  filter: saturate(1.02) contrast(1.02);
}

/* Colonne texte */
.vip-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px;
}

/* Version mobile : on empile tout */
@media (max-width: 900px) {
  .vip-split {
    grid-template-columns: 1fr;
  }
  .vip-portrait {
    height: 440px;
  }
}

/* === INDEX — rendre les boutons cliquables au-dessus de la vidéo === */
.hero-banner { position: relative; }
.hero-banner .bg,
.hero-banner .overlay{
  pointer-events: none;          /* la vidéo et l’overlay ne captent plus les clics */
}
.hero-center{
  position: relative;
  z-index: 2;                    /* texte + boutons au premier plan */
}

/* Option confort : héro un peu plus compact sur desktop */
.hero-center{ min-height: 46vh; padding: 36px 0; }
@media (min-width: 900px){
  .hero-center{ min-height: 52vh; }
}