/* =========================================================
   VERTICAL VERDON — SAUT PENDULAIRE
   Palette dérivée du logo : dégradé falaise (orange > rouge)
   + silhouettes turquoise (eau / canyon) — identité visuelle
   partagée avec le reste du site Vertical Verdon.
   ========================================================= */

:root{
  --bg:        #f7f2e7;
  --bg-card:   #ffffff;
  --cliff-1:        #f5a35a;
  --cliff-2:        #e8622c;
  --cliff-3:        #b3202f;
  --gradient-cliff: linear-gradient(135deg, var(--cliff-1) 0%, var(--cliff-2) 48%, var(--cliff-3) 100%);
  --emerald:        #10b981;
  --emerald-dim:    #059669;
  --gradient-emerald: linear-gradient(135deg, #34d399 0%, #10b981 55%, #047857 100%);
  --water:          #1f8a83;
  --water-dim:      #166e68;
  --ink:           #211c16;
  --ink-dim:       rgba(33,28,22,.66);
  --ink-faint:     rgba(33,28,22,.42);
  --line:           rgba(33,28,22,.12);
  --glass:          rgba(255,255,255,.62);
  --glass-border:   rgba(33,28,22,.12);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* Seule l'intro cinématique plein écran (préchargeur + vidéo de
   chute) reste sur le thème sombre "canyon". Le hero et la
   fissure suivent maintenant le thème clair du reste du site. */
#preloader, #fall-stage{
  --bg:        #0a1210;
  --bg-card:   #0e1a18;
  --water:          #5fd0c9;
  --water-dim:      #2b8f8a;
  --ink:           #f5f1e8;
  --ink-dim:       rgba(245,241,232,.68);
  --ink-faint:     rgba(245,241,232,.38);
  --line:           rgba(245,241,232,.14);
  --glass:          rgba(14,26,24,.55);
  --glass-border:   rgba(245,241,232,.16);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; background:var(--bg); }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

::selection{ background:var(--cliff-2); color:var(--ink); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--water);
  outline-offset:4px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--water);
}

/* =========================================================
   PRELOADER
   ========================================================= */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
#preloader .logo-wrap{
  width:min(280px, 60vw);
  opacity:0;
}
#preloader .logo-wrap img{ width:100%; filter:drop-shadow(0 0 40px rgba(95,208,201,.25)); }

/* =========================================================
   FALL STAGE — sequence d'ouverture auto-jouee (aucun scroll requis)
   ========================================================= */
html.intro-lock, html.intro-lock body{
  overflow:hidden;
  height:100vh;
}

#fall-stage{
  position:fixed; inset:0; z-index:200;
  height:100vh;
  overflow:hidden;
  background:#000;
  perspective:1000px;
  perspective-origin:50% 50%;
}

#fall-video-wrap{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

#fall-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  will-change:transform, filter;
}

#fall-vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%);
}

#fall-grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* bouton discret pour passer l'intro */
#skip-intro{
  position:fixed;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + var(--safe-b));
  z-index:210;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  background:rgba(10,18,16,.5);
  border:1px solid var(--glass-border);
  border-radius:100px;
  padding:.7rem 1.2rem;
  opacity:0;
  transition:color .3s, border-color .3s;
}
#skip-intro:hover{ color:var(--ink); border-color:var(--water-dim); }

/* =========================================================
   TRANSITION FONDU-GLISSÉ — l'écran s'ouvre en deux moitiés
   qui glissent doucement (haut/bas) en s'estompant, pendant
   que le site apparaît en fondu derrière.
   ========================================================= */
#crack-reveal{
  position:fixed; inset:0; z-index:6;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(1.4rem,5vw,4rem) clamp(3rem,7vw,5rem);
  background:var(--bg);
  opacity:0;
  pointer-events:none;
}
#crack-reveal h1{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.02em;
  font-size:clamp(3rem, 9.5vw, 7.6rem);
  color:var(--ink);
}

.crack-shard{
  position:fixed; inset:0; z-index:15;
  background-size:cover;
  background-position:center;
  opacity:0;
  pointer-events:none;
  will-change:transform, opacity, filter;
}
#crack-top{
  clip-path:polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
#crack-bottom{
  clip-path:polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

/* =========================================================
   HERO (arrival - la corde s'est tendue)
   ========================================================= */
#hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(1.4rem,5vw,4rem) clamp(3rem,7vw,5rem);
  background:var(--bg);
  overflow:hidden;
}
#hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
#hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,18,16,.15) 0%, var(--bg) 88%);
}
#hero .hero-inner{ position:relative; z-index:2; max-width:1180px; }
#hero h1{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.02em;
  font-size:clamp(2.6rem, 12vw, 7.6rem);
  color:var(--ink);
}
#hero .lede{
  margin-top:1.6rem;
  max-width:46ch;
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:#000;
  font-weight:700;
  line-height:1.6;
  text-shadow:0 2px 18px rgba(255,255,255,.55), 0 1px 3px rgba(255,255,255,.5);
}
#hero .hero-actions{
  margin-top:2.4rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
}
.btn-primary{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:1rem 1.8rem;
  border-radius:100px;
  background:var(--gradient-emerald);
  color:#ffffff;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow:0 8px 30px -8px rgba(16,185,129,.5);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px -8px rgba(16,185,129,.65); }
.btn-ghost{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--water); color:var(--water); }

.stat-row{
  margin-top:3.2rem;
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.2rem);
  padding-top:1.8rem;
  border-top:1px solid var(--line);
}
.stat-row .stat b{
  display:block; font-family:var(--font-mono); font-size:1.5rem; color:var(--water);
}
.stat-row .stat span{ font-size:.76rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; }

/* =========================================================
   GENERIC SECTION LAYOUT
   ========================================================= */
section{ position:relative; padding:clamp(4.5rem,10vw,8rem) clamp(1.4rem,5vw,4rem); }
.section-head{ max-width:640px; margin-bottom:clamp(2.2rem,6vw,4.5rem); }
.section-head .eyebrow{ margin-bottom:1rem; display:block; }
.section-head h2{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.015em;
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.08;
}
.section-head p{
  margin-top:1.1rem;
  color:var(--ink-dim);
  font-size:1.02rem;
  line-height:1.6;
  max-width:52ch;
}

.reveal{ opacity:0; transform:translateY(32px); }

/* ---- L'EXPERIENCE (déroulé) ---- */
#experience{ background:var(--bg); }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.step{
  background:var(--bg-card);
  padding:2.2rem 1.8rem;
  transition:background .4s var(--ease-out);
}
.step:hover{ background:var(--bg); }
.step .step-num{ font-family:var(--font-mono); color:var(--water-dim); font-size:.85rem; }
.step h3{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:1rem 0 .6rem; }
.step p{ color:var(--ink-dim); font-size:.9rem; line-height:1.55; }

/* ---- INFOS PRATIQUES ---- */
#infos{ background:var(--bg-card); }
.infos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2.2rem 2.6rem; }
.info-item{ border-top:1px solid var(--line); padding-top:1.2rem; }
.info-item .label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.info-item .value{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin-top:.5rem; }
.info-item .sub{ margin-top:.35rem; font-size:.85rem; color:var(--ink-dim); }

/* ---- TARIFS ---- */
#tarifs{ background:var(--bg); }
.tarifs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.4rem; }
.tarif-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:2.2rem;
  position:relative;
  overflow:hidden;
  transition:border-color .4s var(--ease-out), transform .5s var(--ease-out);
}
.tarif-card:hover{ transform:translateY(-6px); border-color:var(--water-dim); }
.tarif-card.featured{ background:linear-gradient(180deg, rgba(232,98,44,.08), transparent 60%); border-color:rgba(232,98,44,.35); }
.tarif-card .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--water); }
.tarif-card h3{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin:.9rem 0 .3rem; }
.tarif-card .price{ font-family:var(--font-mono); font-size:2.4rem; color:var(--ink); margin:.6rem 0; }
.tarif-card .price span{ font-size:1rem; color:var(--ink-dim); }
.tarif-card ul{ list-style:none; margin:1.3rem 0 1.6rem; display:flex; flex-direction:column; gap:.55rem; }
.tarif-card li{ font-size:.88rem; color:var(--ink-dim); padding-left:1.2rem; position:relative; }
.tarif-card li::before{ content:'—'; position:absolute; left:0; color:var(--water); }
.tarif-card .btn-primary{ width:100%; justify-content:center; }
.tarif-note{ margin-top:1.6rem; font-size:.82rem; color:var(--ink-faint); }

/* ---- AVIS ---- */
#avis{ background:var(--bg-card); }
.avis-track{ display:flex; gap:1.4rem; overflow-x:auto; padding-bottom:1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.avis-track::-webkit-scrollbar{ display:none; }
.avis-card{
  flex:0 0 min(360px,82vw);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.8rem;
  background:var(--bg);
}
.avis-card .stars{ color:var(--water); font-size:.9rem; letter-spacing:.15em; }
.avis-card p{ margin:1rem 0 1.3rem; font-size:.95rem; line-height:1.6; color:var(--ink-dim); }
.avis-card .who{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); }

/* ---- RÉSERVATION ---- */
#reservation{ background:var(--bg); }
.booking-panel{
  display:grid; gap:2.2rem;
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(1.4rem,4vw,2.8rem);
  background:var(--bg-card);
}
.booking-label{
  display:block; margin-bottom:1rem;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--water);
}

.booking-form{ display:flex; flex-direction:column; gap:1.6rem; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.form-field input, .form-field select, .form-field textarea{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.85rem 1rem;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  resize:vertical;
  width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--water-dim);
}
.booking-form .btn-primary{ align-self:flex-start; border:none; cursor:pointer; }
.booking-feedback{ font-size:.88rem; color:var(--ink-dim); min-height:1.2em; }
.booking-feedback.success{ color:var(--water); }
.booking-feedback.error{ color:var(--cliff-2); }
.booking-note{ font-size:.82rem; color:var(--ink-faint); }

footer{
  padding:2.6rem clamp(1.4rem,5vw,4rem) calc(2.6rem + var(--safe-b));
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:center;
  border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-faint);
}
footer .logo-foot{ width:100px; opacity:.8; }

/* floating action buttons */
.floating-actions{
  position:fixed;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + var(--safe-b));
  z-index:40; display:flex; flex-direction:column; gap:.7rem;
}
.fab{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:transform .4s var(--ease-out);
}
.fab:hover{ transform:scale(1.08); }
.fab.whatsapp{ background:#25D366; }
.fab.instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fab svg{ width:24px; height:24px; }

/* =========================================================
   MOBILE — finitions
   ========================================================= */
@media (max-width:640px){
  section{ padding-left:1.1rem; padding-right:1.1rem; }
  #hero{ padding-left:1.1rem; padding-right:1.1rem; padding-bottom:2.6rem; }
  #hero .lede{ font-size:.98rem; }
  .stat-row{ gap:1.2rem 1.6rem; }
  .stat-row .stat b{ font-size:1.25rem; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:.8rem; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost{ justify-content:center; text-align:center; }
  .booking-panel{ padding:1.2rem; border-radius:16px; }
  .form-grid{ grid-template-columns:1fr; }
  #skip-intro{ font-size:.65rem; padding:.6rem 1rem; }
  .fab{ width:46px; height:46px; }
  .fab svg{ width:21px; height:21px; }
  .tarif-card{ padding:1.6rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}