/* ─── Base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  font-family:'Inter',sans-serif;
  background:#07080e;
  color:#ede8dc;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block;}
input,button,a{min-height:44px;}
@supports(padding:max(0px)){
  #stickyCta{padding-bottom:env(safe-area-inset-bottom);}
}

/* ─── Grain film overlay ──────────────────────────────────── */
.grain::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:99;
  opacity:.032;
  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='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Warm ambient top glow */
body::after{
  content:'';
  position:fixed;top:-20%;left:50%;
  transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(ellipse at center,rgba(200,147,46,.055) 0%,transparent 68%);
  pointer-events:none;z-index:0;
}

/* ─── Typography ──────────────────────────────────────────── */
.font-display{font-family:'Playfair Display',serif;}

/* ─── Glass surfaces ──────────────────────────────────────── */
.glass{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.065);
}
.glass-gold,.glass-warm{
  background:rgba(200,147,46,.055);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(224,173,74,.18);
}

/* ─── Gold shimmer text ───────────────────────────────────── */
.gold-text{
  background:linear-gradient(90deg,#f2d982,#c8932e,#eccb7a,#c8932e,#f2d982);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:300% auto;
  animation:shimmer 7s linear infinite;
}

/* ─── Eyebrow label ───────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,147,46,.8);font-weight:700;
}
.eyebrow::before{
  content:'';width:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,147,46,.65));
  flex-shrink:0;
}

/* ─── Progress bar ────────────────────────────────────────── */
#progress-bar{
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(90deg,#c8932e,#eccb7a,#c8932e);
  background-size:200% auto;animation:shimmer 2s linear infinite;
  z-index:60;width:0%;
  box-shadow:0 0 10px rgba(200,147,46,.55);
}

/* ─── CTA buttons ─────────────────────────────────────────── */
.cta-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:.04em;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cta-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
  transform:translateX(-120%);
}
.cta-btn:hover{transform:translateY(-2px);}
.cta-btn:hover::after{animation:sweep .7s ease forwards;}
.cta-btn:active{transform:translateY(0);}

/* ─── Reveal on scroll ────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.show{opacity:1;transform:translateY(0);}

/* ─── Book 3D perspective ─────────────────────────────────── */
.book-3d{
  transform:perspective(900px) rotateY(-11deg) rotateX(2deg);
  filter:drop-shadow(-22px 30px 55px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(200,147,46,.08));
  animation:float3d 6.5s ease-in-out infinite;
  cursor:pointer;
}
.book-3d:hover{
  animation:none;
  transform:perspective(900px) rotateY(-3deg) rotateX(0deg);
  filter:drop-shadow(-10px 20px 40px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(200,147,46,.14));
}

/* ─── Plan cards ──────────────────────────────────────────── */
.plan-card{
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.plan-card:hover{transform:translateY(-3px);}
.plan-card:hover .card-cta { opacity: 1; }
.card-cta { opacity: .55; transition: opacity .2s ease; }
.plan-card.selected-standard{
  border-color:rgba(200,147,46,.65)!important;
  box-shadow:0 0 0 1px rgba(200,147,46,.25),0 12px 36px rgba(200,147,46,.08);
}
.plan-card.selected-payante{
  border-color:#c8932e!important;
  box-shadow:0 0 0 1px rgba(200,147,46,.35),0 12px 44px rgba(200,147,46,.18);
  transform:translateY(-6px);
}
.plan-card.selected-vip{
  border-color:rgba(22,163,74,.75)!important;
  box-shadow:0 0 0 1px rgba(22,163,74,.25),0 12px 36px rgba(22,163,74,.1);
}

/* ─── Form fields ─────────────────────────────────────────── */
.field-label{
  display:block !important;
  font-size:.72rem !important;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5) !important;font-weight:600;margin-bottom:8px;
}
.field-input{
  display:block !important;
  width:100% !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  padding:13px 16px !important;
  color:#ede8dc !important;font-size:.9rem !important;
  outline:none !important;
  transition:border-color .2s ease,background .2s ease;
  font-family:inherit !important;
  box-shadow:none !important;
  -webkit-appearance:none;appearance:none;
}
.field-input::placeholder{color:rgba(255,255,255,.25) !important;font-style:italic;}
.field-input:focus{
  border-color:rgba(200,147,46,.6) !important;
  background:rgba(200,147,46,.05) !important;
  box-shadow:0 0 0 3px rgba(200,147,46,.1) !important;
}

/* Neutralise les autofill browsers (fond bleu/jaune) */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(20,18,12,.95) inset !important;
  -webkit-text-fill-color:#ede8dc !important;
  border-color:rgba(200,147,46,.4) !important;
  caret-color:#ede8dc;
}

/* ─── Coaching encart — left-border editorial ─────────────── */
.coaching-encart{
  border-left:3px solid rgba(200,147,46,.45);
  background:rgba(200,147,46,.038);
  border-radius:0 18px 18px 0;
}

/* ─── Trust ticker strip ──────────────────────────────────── */
.ticker-strip{
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}

/* ─── Horizontal divider ──────────────────────────────────── */
.section-divider{
  display:flex;align-items:center;gap:14px;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(200,147,46,.4);
}
.section-divider::before,.section-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,147,46,.15),transparent);
}

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:#07080e;}
::-webkit-scrollbar-thumb{background:linear-gradient(#c8932e,#eccb7a);border-radius:3px;}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile first fixes
   ═══════════════════════════════════════════════════════════ */

/* ─── Prevent any horizontal overflow globally ────────────── */
section, header, footer, div[class] {
  max-width: 100%;
}

/* ─── Hero on small screens ───────────────────────────────── */
@media (max-width: 767px) {
  /* Smaller 3D effect, no negative horizontal shadow to avoid overflow */
  .book-3d {
    transform: perspective(600px) rotateY(-4deg) rotateX(1deg);
    filter: drop-shadow(0px 16px 30px rgba(0,0,0,.7));
    animation: float3d-sm 6s ease-in-out infinite;
    width: 200px;
    max-width: 200px;
  }
  .book-3d:hover {
    animation: none;
    transform: perspective(600px) rotateY(-1deg) rotateX(0deg);
  }
  @keyframes float3d-sm {
    0%,100% { transform: perspective(600px) rotateY(-4deg) rotateX(1deg) translateY(0); }
    50%      { transform: perspective(600px) rotateY(-4deg) rotateX(1deg) translateY(-8px); }
  }
  /* Padding pour que les chips ne soient pas coupés */
  .book-3d-wrap { padding: 1.5rem 1.2rem 2rem 0.8rem; }

  /* Chips: bring inside the book container on mobile */
  .chip-bottom { bottom: -12px !important; left: 0 !important; }
  .chip-top    { top: -12px !important; right: 0 !important; }

  /* Headline scale down gracefully */
  .hero-h1 { font-size: clamp(1.75rem, 8vw, 2.6rem) !important; line-height: 1.1; }

  /* Plan cards: full width stack */
  .plan-card { transform: none !important; }
  .plan-card.selected-payante { transform: none !important; }

  /* Author photo: center on mobile */
  .author-col { align-items: center !important; text-align: center; }

  /* Form: tighter padding */
  .form-glass { padding: 1.5rem !important; }

  /* Nav text */
  .nav-brand { font-size: 0.9rem !important; }

  /* Coaching encart: left border less prominent on tiny screens */
  .coaching-encart { border-left-width: 2px; padding-left: 1.25rem; }
}

/* ─── Tablet tweaks ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .book-3d {
    transform: perspective(750px) rotateY(-8deg) rotateX(2deg);
    width: 240px;
    animation: float3d-md 6.5s ease-in-out infinite;
  }
  @keyframes float3d-md {
    0%,100% { transform: perspective(750px) rotateY(-8deg) rotateX(2deg) translateY(0); }
    50%      { transform: perspective(750px) rotateY(-8deg) rotateX(2deg) translateY(-11px); }
  }
}

/* ─── Touch device: disable 3D tilt (no hover) ───────────── */
@media (hover: none) {
  .book-3d:hover {
    animation: float3d 6.5s ease-in-out infinite;
    filter: drop-shadow(-22px 30px 55px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(200,147,46,.08));
  }
}

/* ─── Hero badge on small phones: reduce tracking to stay 1 line ─ */
@media (max-width: 479px) {
  .hero-badge { font-size: 0.6rem !important; letter-spacing: .12em !important; padding: 0.4rem 0.85rem !important; }
}

/* ─── Very small screens (320px) ──────────────────────────── */
@media (max-width: 359px) {
  .hero-h1 { font-size: 1.6rem !important; }
  .plan-card { padding: 1rem !important; }
  .cta-btn  { font-size: 0.82rem !important; padding: 0.9rem 1.25rem !important; }
}

/* ─── Safe area (notch / Dynamic Island) ─────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #stickyCta  { padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }
  .wa-btn     { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  @supports (padding: env(safe-area-inset-bottom)) {
    .wa-btn { bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
  }
}

/* ─── Keyframes ───────────────────────────────────────────── */
@keyframes shimmer{
  0%{background-position:-300% 0}
  100%{background-position:300% 0}
}
@keyframes sweep{to{transform:translateX(130%);}}
@keyframes float3d{
  0%,100%{transform:perspective(900px) rotateY(-11deg) rotateX(2deg) translateY(0);}
  50%{transform:perspective(900px) rotateY(-11deg) rotateX(2deg) translateY(-13px);}
}
@keyframes pulseSoft{
  0%,100%{opacity:1;}50%{opacity:.4;}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}