/* gate.css — page de choix "Atempo / Fresh'Up" affichée à l'ouverture du site.
   Parti pris : minimaliste, silencieux, une police fine et chic — les deux
   photos, les deux noms et un mot d'ordre suffisent, le reste se decouvre
   sur chaque site. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;1,9..144,300&family=Jost:wght@300;400;500&display=swap');

html, body.gate-body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

.gate {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #17140f;
  overflow: hidden;
}

/* ---------- CHOIX (split screen, toujours cote a cote) ---------- */
.gate-choices {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
}
.gate-panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--cream-soft);
  cursor: pointer;
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gate-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.15) brightness(0.86);
  /* Pas de transition sur transform : la photo ne bouge jamais, au survol
     comme au clic/tap. Seul le calque sombre au-dessus reagit. */
}
.gate-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,9,6,0.5) 0%, rgba(10,9,6,0.22) 45%, rgba(10,9,6,0.38) 100%);
  transition: background 0.35s ease;
}

/* ---------- NOM (centre) ---------- */
.gate-panel-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.gate-panel-title {
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.03em;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1;
  color: var(--cream-soft);
}
.gate-atempo .gate-panel-title { font-style: italic; }
.gate-kicker {
  display: block;
  margin-top: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(248,242,230,0.62);
}

/* ---------- BAS DE PANNEAU : accroche + bouton ---------- */
.gate-panel-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  text-align: center;
  padding: 0 20px 32px;
}
.gate-panel-tagline {
  margin: 0 auto 16px;
  max-width: 260px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(248,242,230,0.8);
}
.gate-btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: var(--radius-sm, 2px);
  border: 1px solid rgba(248,242,230,0.7);
  color: var(--cream-soft);
  background: rgba(255,255,255,0.06);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

/* ---------- INTERACTIONS ---------- */
/* Desktop uniquement : la moitie survolee s'agrandit legerement et son
   bouton se met en avant. La photo elle-meme ne zoome pas. */
@media (min-width: 860px) {
  .gate-panel:hover { flex-grow: 1.15; }
  .gate-panel:hover .gate-panel-overlay { background: linear-gradient(to top, rgba(10,9,6,0.34) 0%, rgba(10,9,6,0.12) 45%, rgba(10,9,6,0.24) 100%); }
  .gate-panel:hover .gate-btn { background: var(--terracotta); border-color: var(--terracotta); transform: translateY(-2px); }
}

/* Tous ecrans : au clic/tap, la photo ne bouge pas — seul le fond
   s'assombrit legerement pour confirmer que l'appui est pris en compte. */
.gate-panel:active .gate-panel-overlay {
  background: linear-gradient(to top, rgba(10,9,6,0.66) 0%, rgba(10,9,6,0.42) 45%, rgba(10,9,6,0.55) 100%);
}

.gate-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(248,242,230,0.2);
  z-index: 3;
  transform: translateX(-0.5px);
}

/* ---------- BARRE AVIS GOOGLE ---------- */
.gate-reviews-bar {
  flex-shrink: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 16px;
  background: #100e0a;
  border-top: 1px solid rgba(248,242,230,0.1);
}
.gate-review {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(248,242,230,0.85);
}
.gate-review-stars {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--mustard);
}
.gate-review-text {
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
}
.gate-review-text strong { font-weight: 700; color: var(--cream-soft); }
.gate-review-sep {
  width: 1px;
  height: 14px;
  background: rgba(248,242,230,0.2);
}

/* ---------- MOBILE : meme split, jamais empile ---------- */
@media (max-width: 640px) {
  .gate-panel-title { font-size: clamp(20px, 7vw, 28px); }
  .gate-kicker { font-size: 8.5px; letter-spacing: 0.16em; margin-top: 7px; }
  .gate-panel-bottom { padding: 0 8px 20px; }
  .gate-panel-tagline { font-size: 9.5px; line-height: 1.4; margin-bottom: 10px; max-width: 160px; }
  /* Les libelles ("Je veux bruncher a Fresh'Up"...) ne tiennent pas sur
     une ligne dans une moitie d'ecran : on autorise le retour a la ligne
     et on resserre padding/tracking plutot que de laisser deborder. */
  .gate-btn {
    display: block;
    width: 100%;
    max-width: 148px;
    margin: 0 auto;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    line-height: 1.35;
    padding: 10px 10px;
    white-space: normal;
    word-break: break-word;
  }
  .gate-reviews-bar { gap: 12px; padding: 10px 10px; }
  .gate-review-text { font-size: 9.5px; }
  .gate-review-stars { font-size: 9px; }
}

@media (max-width: 380px) {
  .gate-panel-bottom { padding: 0 6px 16px; }
  .gate-panel-tagline { font-size: 9px; max-width: 140px; }
  .gate-btn { font-size: 9px; max-width: 132px; padding: 9px 8px; }
}