/* ===========================================================
   PESTO PILATES — Page d'attente
   Version sombre « split » : texte à gauche, photo à droite,
   grandes formes courbes en fond. Typo Helvetica Now Display.
   =========================================================== */

:root {
  --brun:       #391d14;   /* fond                          */
  --brun-2:     #4a2c1d;   /* formes courbes (un peu + clair)*/
  --brun-3:     #2c150d;   /* ombrage                        */
  --cream:      #d2c5b2;   /* texte clair principal (beige DA officiel) */
  --beige:      #d2c5b2;   /* texte secondaire               */
  --beige-soft: rgba(210, 197, 178, 0.66);
  --olive:      #8f8d51;
  --olive-hi:   #a3a05f;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: clamp(1.5rem, 5vw, 5rem);
  --pad-y: clamp(1.3rem, 3vh, 2.6rem);

  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--brun);
  color: var(--cream);
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Bandes animées de demi-cercles (fond droit) ---- */
.bg {
  position: fixed;
  right: 0;
  width: 48%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bg--top { top: 0; height: 50%; }
.bg--bottom { bottom: 0; height: 50%; }
.band {
  flex: 1;
  background-repeat: repeat-x;
  background-size: 420px 100%;     /* tuile = 420px (boucle d'anim seamless) */
  will-change: background-position;
}
.band--a { background-image: url("/ouverture/img/stripA.png"); animation: scrollRight 5.5s linear infinite; }
.band--b { background-image: url("/ouverture/img/stripB.png"); animation: scrollLeft 5.5s linear infinite; }

@keyframes scrollRight { from { background-position-x: 0; }   to { background-position-x: 420px; } }
@keyframes scrollLeft  { from { background-position-x: 0; }   to { background-position-x: -420px; } }

/* ---- Grain léger ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Barre fine animée en haut (mobile uniquement, au-dessus du logo) ---- */
.strip-top { display: none; }
@keyframes stripScroll { from { background-position-x: 0; } to { background-position-x: 150px; } }

/* ===========================  LAYOUT  ====================== */
.page {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) 0;
}

/* ===========================  HERO  ======================= */
.hero {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-top: clamp(0.4rem, 1.5vh, 1.2rem);
}

/* ---- Colonne gauche : centrée DANS la zone brune (52vw), symétrique ---- */
.left { width: 52vw; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(1.8rem, 5.5vh, 4rem); }
.right { display: none; }

.brand {
  height: clamp(76px, 13vh, 152px);
  width: auto;
  display: block;
  margin-bottom: clamp(3.8rem, 8vh, 5.6rem);
}

.headline {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 0.88;
  letter-spacing: -0.078em;
  word-spacing: 0.05em;
  color: var(--cream);
}
.headline .kern-u { margin-right: -0.02em; }

.meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  margin-top: clamp(3rem, 7vh, 5rem);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--beige);
}
.meta .bar { color: var(--beige); }

.place {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: -0.02em;
  color: var(--beige);
}
.place.soon { margin-top: 0.6rem; font-style: italic; font-weight: 300; letter-spacing: -0.02em; font-size: clamp(0.9rem, 1.05vw, 1rem); } /* « Prochainement » : italique, light, réduit d'une taille (ordi compris) */

/* ---- CTA ---- */
.cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: clamp(6rem, 16vh, 10rem);
  transform: translateY(-0.5cm); /* boutons remontés de 0,5cm (mobile + ordi) */
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 0.6em;
  background: var(--olive);
  color: var(--brun);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
  padding: 1.05em 2em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}
.cta:hover { background: var(--brun); color: var(--beige); transform: translateY(-2px); }
.cta .star { width: 0.95em; height: 0.95em; display: block; transform: translateX(0.5em); transition: transform 0.55s var(--ease); }
.cta:hover .star { transform: translateX(0.5em) rotate(90deg) scale(1.1); }
.cta--soon { opacity: 1; }
.cta-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--olive);
  color: var(--brun);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}
.cta-ig svg { width: 1.85rem; height: 1.85rem; display: block; }
.cta-ig:hover { transform: translateY(-2px) scale(1.06); background: var(--brun); color: var(--beige); }
/* groupe des 2 icônes rondes (Instagram + email) — restent toujours ensemble et symétriques */
.cta-icons { display: inline-flex; align-items: center; gap: 1.1rem; }
/* bouton coach — fond beige, texte marron (audience coachs) */
.cta-coach-row { display: none; } /* variante mobile (bouton en dessous) : cachee en desktop */
.cta-coach { background: var(--beige); color: var(--brun); }
.cta-coach-desk { font-size: 1rem; padding: 1.05em 1.7em; } /* inline, meme hauteur que le bouton olive */
.cta-coach:hover { background: var(--brun); color: var(--beige); transform: translateY(-2px); }

/* ---- Colonne droite : photo ---- */
.right { display: flex; align-self: stretch; align-items: center; justify-content: center; }
.photo {
  position: relative;
  transform: translateX(clamp(1rem, 3vw, 3rem));
  width: min(100%, 21rem);
  height: min(70vh, 56vh);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(210,197,178,0.06);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===========================  MOBILE  ==================== */
@media (max-width: 820px) {
  /* page FIXE : tient en un écran visible (100dvh), aucun scroll */
  body { height: 100dvh; overflow: hidden; }
  .page { height: 100dvh; min-height: 0; padding-bottom: 0; }
  .bg { display: none; }
  /* grain retiré sur mobile : évite la démarcation avec la barre d'état iOS (brun uni) */
  body::after { display: none; }
  /* bande animée retirée (choix Inès) : page épurée */
  .hero { flex-direction: column; justify-content: flex-start; padding: 10dvh var(--pad-x) 0; } /* logo + textes descendus */
  .left { width: 100%; padding-top: 0; }
  .brand { transform: translateX(1rem); height: clamp(86px, 14dvh, 140px); } /* logo décalé droite + un peu plus grand */
  .headline { font-size: clamp(3rem, 8vw, 3.8rem); } /* titre (+2 puis -1 taille) */
  .place.soon { font-size: 1rem; } /* « Prochainement » réduit d'une taille */
  .meta, .place { font-size: 1.12rem; } /* infos un peu plus grandes */
  .meta { margin-top: clamp(3rem, 8dvh, 5rem); } /* les 2 lignes (Reformer + adresse) descendues un peu */
  .cta-row { flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(3rem, 11dvh, 6.5rem); } /* position verticale des boutons (place pour le bouton coach) */
  .cta-coach-desk { display: none; } /* inline cache en mobile */
  .cta-coach-row { display: flex; justify-content: center; margin-top: 1.1rem; }
  .cta.cta-coach-mob { font-size: 0.9rem; padding: 0.7em 1.3em; }
  .cta-mail { display: none; } /* MOBILE = version référence : seulement l'Instagram (email retiré, choix Inès) */
  .cta { position: relative; padding: 0.95em 2.6em 0.95em 1.8em; font-size: 1.02rem; } /* texte centré, place réservée pour l'étoile à droite */
  .cta .star { position: absolute; right: 1.1em; top: 50%; transform: translateY(-50%); } /* étoile décalée à droite, hors du flux */
  .cta-ig { width: 2.95rem; height: 2.95rem; } /* Instagram un peu plus grand */
  .cta-ig svg { width: 1.65rem; height: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Typo Poppins : boutons en Light */
.cta, .cta--soon, .cta-coach, .cta-coach-desk, .cta-coach-mob { font-family: "Poppins", sans-serif; font-weight: 300; }