/* ════════════════════════════════════════════════════════
   RIVIERA — sections établissements (ex-Hospitality & Brands)
   Chargé après style.css : on réutilise ses
   tokens, nav, boutons, reveal, process, contact et footer.
   Ce fichier ne contient que les composants propres à la page.
   ════════════════════════════════════════════════════════ */

:root {
  --black:     #080C10;  /* même noir que le footer Riviera */
  --gold-ink:  color-mix(in srgb, var(--gold) 62%, var(--navy));  /* or lisible sur crème */
  --cream-2:   color-mix(in srgb, var(--white) 93%, var(--gold));
  --gutter:    clamp(20px, 5vw, 4rem);
}

/* ── Accessibilité ── */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  .audience-card img, .faq-item summary::after { transition: none; }
}

/* ── Sections ── */
.hs { padding: clamp(5rem, 11vw, 8rem) var(--gutter); }
.hs-intro {
  font-size: 1rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 3.5rem;
}
h3 { font-weight: inherit; }

/* ── 2. POUR QUI ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 3.5rem;
}
.audience-card {
  position: relative;
  height: clamp(440px, 46vw, 620px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.audience-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.audience-card:hover img { transform: scale(1.05); }
.audience-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,20,.92) 0%, rgba(10,14,20,.35) 50%, transparent 75%);
}
.audience-body { position: relative; z-index: 1; padding: 2rem; }
.audience-num {
  display: block;
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--gold);
  margin-bottom: .8rem;
}
.audience-title {
  font-family: var(--bebas);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.audience-text { font-size: .9rem; line-height: 1.7; color: rgba(250,248,244,.78); }

/* ── 3. POURQUOI ── */
.why { background: var(--black); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.why-num {
  display: block;
  font-family: var(--bebas);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 1rem;
}
.why-name {
  font-family: var(--bebas);
  font-size: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.why-text { font-size: .9rem; line-height: 1.75; color: var(--muted); }

/* ── Sections crème (Offres, Maisons fondatrices) ── */
.cream { background: var(--white); color: var(--navy); }
.cream--deep { background: var(--cream-2); }
.cream .hs-intro { color: rgba(13,17,23,.68); }
.cream .section-label,
.cream h2 .gold { color: var(--gold-ink); }
.cream .btn-outline { border-color: rgba(13,17,23,.3); color: var(--navy); }
.cream .btn-outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* ── 4. OFFRES ── */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.8rem 2rem;
  border: 1px solid rgba(13,17,23,.12);
}
.plan-target {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1rem;
  min-height: 2.2em;
}
.plan-name {
  font-family: var(--bebas);
  font-size: clamp(2.4rem, 3vw, 3rem);
  line-height: .95;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.plan-from, .plan-per {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
}
.plan-price {
  font-family: var(--bebas);
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: .03em;
}
.plan-list {
  list-style: none;
  margin: 1.8rem 0 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(13,17,23,.12);
  display: grid;
  gap: .8rem;
  font-size: .86rem;
  line-height: 1.55;
}
.plan-list li { position: relative; padding-left: 1.3rem; }
.plan-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.plan-btn { margin-top: auto; text-align: center; }

.plan--featured { background: var(--navy); color: var(--white); border-color: var(--navy); }
.plan--featured .plan-target { color: var(--gold); }
.plan--featured .plan-price { color: var(--gold); }
.plan--featured .plan-list { border-top-color: rgba(250,248,244,.15); }
.plan-badge {
  position: absolute;
  top: 0; left: 1.8rem;
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .45rem .9rem;
}
.plans-note {
  margin-top: 2.5rem;
  font-size: .8rem;
  font-style: italic;
  color: rgba(13,17,23,.6);
}

/* ── 5. MAISONS FONDATRICES ── */
.founding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.founding-photo { aspect-ratio: 4/5; overflow: hidden; }
.founding-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founding .hs-intro { margin-bottom: 2rem; }
.seats { display: flex; gap: .8rem; margin-bottom: 2rem; }
.seats span {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  font-family: var(--bebas);
  font-size: 1.4rem;
  color: var(--gold-ink);
}
.perks {
  list-style: none;
  display: grid;
  gap: .9rem;
  margin-bottom: 2.5rem;
  font-size: .95rem;
  line-height: 1.6;
}
.perks li { position: relative; padding-left: 1.3rem; }
.perks li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.perks strong { font-weight: 500; }
.founding .btn-gold { display: inline-block; }

/* ── 6. MÉTHODE — réutilise .process-* de Riviera ── */
#methode .process-grid { margin-top: 3.5rem; }

/* ── 7. PONCTUEL ── */
.oneoff { background: var(--mid); }
.oneoff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3.5rem;
}
.oneoff-item {
  display: flex;
  flex-direction: column;
  padding: 0 2.5rem;
  border-left: 1px solid rgba(201,169,110,.25);
}
.oneoff-item:first-child { padding-left: 0; border-left: none; }
.oneoff-name {
  font-family: var(--bebas);
  font-size: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.oneoff-text { font-size: .9rem; line-height: 1.75; color: var(--muted); margin-bottom: 1.5rem; }
.oneoff-price {
  margin-top: auto;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── 8. FAQ ── */
.faq-list { max-width: 860px; border-top: 1px solid rgba(201,169,110,.2); }
.faq-item { border-bottom: 1px solid rgba(201,169,110,.2); }
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  cursor: none;
  font-family: var(--bebas);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--dm);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 3rem 1.8rem 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 680px;
}

/* ── 9. CONTACT — base #contact Riviera, image en <img> lazy ── */
#contact.h-contact {
  background: var(--black);
  background-attachment: scroll;
  padding: clamp(7rem, 14vw, 12rem) var(--gutter);
}
.h-contact-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
#contact.h-contact::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,14,20,.62) 0%, rgba(10,14,20,.85) 100%);
}
.h-contact-inner { position: relative; z-index: 1; }
.h-contact .contact-h { font-size: clamp(3.4rem, 8vw, 8rem); }
.h-contact .contact-btns { margin-bottom: 2.5rem; }
.h-contact .contact-email { margin-bottom: 0; }

/* ── Footer : 3 éléments ── */
footer { gap: 1.5rem; flex-wrap: wrap; }

/* ── Sélecteur de langue dans le menu mobile ── */
.lang-switcher--menu { margin-top: 1rem; }
.lang-switcher--menu .lang-btn { font-size: .85rem; padding: .5rem; }

/* ════════════════════════════════════════════════════════
   TABLETTE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .oneoff-grid { grid-template-columns: 1fr; }
  .oneoff-item,
  .oneoff-item:first-child {
    padding: 2rem 0;
    border-left: none;
    border-top: 1px solid rgba(201,169,110,.25);
  }
  .oneoff-item:first-child { border-top: none; padding-top: 0; }
}

/* ════════════════════════════════════════════════════════
   MOBILE — mêmes seuils que Riviera
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero Riviera : lisibilité du texte et du 2e bouton sur la photo claire */
  #hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 25%, rgba(13,17,23,.6) 75%, rgba(13,17,23,.7) 100%);
  }
  #hero .hero-content { z-index: 2; }
  #hero .btn-outline { background: rgba(13,17,23,.4); }
  .nav-logo { font-size: 1.6rem; white-space: nowrap; }
  .nav-cta { white-space: nowrap; }
  .menu-overlay .lang-switcher--menu { display: flex; }
  .hs { padding: 4.5rem 24px; }
  .hs-intro { font-size: .9rem; margin-bottom: 2.5rem; }

  .audience-grid { grid-template-columns: 1fr; gap: 4px; margin-top: 2rem; }
  .audience-card { height: 120vw; max-height: 520px; }
  .audience-body { padding: 1.5rem 20px; }

  .founding { grid-template-columns: 1fr; gap: 2.5rem; }
  .founding-photo { aspect-ratio: 4/3; }
  .founding .btn-gold { display: block; }

  #methode .process-grid { margin-top: 2rem; }

  .faq-item p { padding-right: 0; }

  #contact.h-contact { padding: 5rem 24px; min-height: 100svh; }
  .h-contact .contact-h { font-size: clamp(2.8rem, 12vw, 5rem); }
  .h-contact-inner { width: 100%; }
}

@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  .plan-target { min-height: 0; }
}

@media (max-width: 480px) {
  #methode .process-grid { grid-template-columns: 1fr; }
}