/* ============================================================================
  HOME.CSS — Plans & Pricing (réorganisé)
  Harmonisation : features-grid, séparateurs, pricing-cards, hero/steps
  Dépendances : Bootstrap vars (optionnel)
============================================================================ */

/* ---------- 0) Tokens locaux (fallbacks si Bootstrap absent) -------------- */
:root{
  --sep-line-color: color-mix(in srgb, var(--bs-emphasis-color, #000) 35%, transparent);
  --sep-bg: var(--bs-body-bg, #fff);
  --sep-fg: var(--bs-emphasis-color, #222);
  --sep-muted: var(--bs-tertiary-color, #6c757d);

  --pricing-border-color: var(--bs-border-color, #dee2e6);

  --stage1:#ffffff;   /* clair */
  --stage2:#f7f8fa;   /* gris très pâle */
  --stage3:#eef0f4;   /* plus soutenu */

  --hero-max-w: 860px;
  --hero-gap: 1rem;
}

/* ---------- 1) Utilitaires & accessibilité -------------------------------- */
.hidden{ display:none !important; }
.visually-hidden-currency .cur{ display:none; } /* masquer la devise si besoin */

.username-status{ min-height:1.25rem; }

.spinner-xs{
  width:1rem; height:1rem; border:2px solid rgba(255,255,255,.35);
  border-top-color:transparent; border-radius:50%;
  display:inline-block; vertical-align:middle; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Réduction animations */
@media (prefers-reduced-motion: reduce){
  .fx-hero{ scroll-behavior:auto; }
  .fx-stage{ min-height:auto; }
  .fx-subtitle, .fx-cards, .feature-card{ opacity:1 !important; transform:none !important; }
  .pricing-cards .card{ transition:none; }
  body{ transition:none; }
}

/* ---------- 2) Body / fond de scène (transition douce entre étapes) ------- */
body{
  background: var(--stage1);
  transition: background-color .5s ease;
}

/* ============================================================================
   A) HERO D'OUVERTURE (100vh)
============================================================================ */
.fx-hero{
  position:relative;
  min-height:100vh;
  display:grid; place-items:center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.fx-hero__inner{
  display:grid; justify-items:center;
  row-gap: clamp(1rem, 2.5vw, 1.75rem);
  text-align:center;
}
.fx-hero .fx-title{
  width:min(360px, 68vw); height:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.08));
}

/* Ligne d’actions */
.fx-cta{
  display:flex; align-items:center; gap:.75rem; justify-content:center;
}

/* Boutons pill (dérivés de .dropdown-item) */
.fx-cta .dropdown-item{
  --btn-bg: color-mix(in srgb, var(--bs-emphasis-color, #000) 4%, transparent);
  --btn-bd: color-mix(in srgb, var(--bs-emphasis-color, #000) 18%, transparent);
  --btn-fg: var(--bs-emphasis-color, #111);

  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:999px;
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; line-height:1;
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fx-cta .dropdown-item:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--bs-emphasis-color, #000) 8%, transparent);
  border-color: color-mix(in srgb, var(--bs-emphasis-color, #000) 28%, transparent);
}
.fx-cta .dropdown-item:active{ transform: translateY(0); }

/* Variante accent */
.fx-cta .dropdown-item.fx-accent{
  --btn-bg: var(--section-accent, #000);
  --btn-bd: var(--section-accent, #000);
  --btn-fg: #fff;
}
.fx-cta .dropdown-item.fx-accent:hover{
  background: var(--section-accent-2, var(--section-accent, #000));
  border-color: var(--section-accent-2, var(--section-accent, #000));
}

/* Sous-texte */
.fx-hero__note{
  margin-top:.25rem; font-size:.9rem; color: var(--bs-tertiary-color, #6c757d);
}

/* ============================================================================
   B) ESPACEMENT ENTRE LES PLANS
============================================================================ */
#classic, #studio, #premium{ margin-block: 4rem 8rem; }
@media (min-width: 768px){
  #classic, #studio, #premium{ margin-block: 5rem 9rem; }
}

/* ============================================================================
   C) FEATURES GRID (cartes “features”)
============================================================================ */
.features-grid .feature-card{
  background:#fff;
  border:1px solid color-mix(in srgb, #000 10%, transparent);
  border-radius:1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .2s ease, opacity .3s ease;
  opacity:0; transform: translateY(12px); /* état initial pour anim */
}
.features-grid .feature-card .icon{ color: currentColor; opacity:.85; transition: color .3s ease, opacity .3s ease; }
.features-grid .feature-card h3{ color: inherit; transition: color .3s ease; }
.features-grid .feature-card p{ color:#555; transition: color .3s ease, opacity .3s ease; }

/* Hover inversé (fond noir) */
.features-grid .feature-card:hover{
  background:#000; color:#fff; border-color:#000;
  box-shadow:0 10px 36px rgba(0,0,0,.25); transform: translateY(-2px);
}
.features-grid .feature-card:hover h3,
.features-grid .feature-card:hover p{
  color:#fff !important; opacity:.9;
}


/* ============================================================================
   D) SÉPARATEURS (+ variantes)
============================================================================ */

/* Bloc : titre + ligne + pastille "+" */
.div-separator{
  display:grid; row-gap:.6rem; justify-items:center;
  margin:1.5rem 0 2.5rem;
}
.div-subtitle{
  font-size:.95rem; font-weight:300; color: var(--sep-muted);
  margin:0; text-align:center;
}
.div-line{
  position:relative; width:100%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.2), transparent);
}
.div-line::after{
  content:"+"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2rem; height:2rem; border-radius:50%;
  border:1px solid var(--sep-line-color);
  background:var(--sep-bg); color:var(--sep-fg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1; z-index:1;
}

/* Variante <li> inline avec icône Bootstrap */
.li-separator{
  position:relative; text-align:center;
  margin:1.25rem 0; padding:.75rem 0;
}
.li-separator::before{
  content:""; position:absolute; inset-inline:0; top:50%; transform:translateY(-50%);
  border-top:1px solid var(--sep-line-color); z-index:0;
}
.li-separator::after{
  content:"\F4FE"; /* bi-plus-circle */
  font-family:"bootstrap-icons"; font-size:1rem;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--sep-bg); color:var(--sep-fg);
  border:1px solid var(--sep-line-color);
  display:inline-flex; align-items:center; justify-content:center; z-index:1;
}

/* HR fondu simple (optionnel) */
.hr-fade{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.2), transparent);
}

/* Harmonisation des séparateurs à l’intérieur des cartes au hover inversé */
.pricing-cards .card:hover .li-separator::before{ border-color: rgba(255,255,255,.5); }
.pricing-cards .card:hover .li-separator::after{
  background:#000; color:#fff; border-color: rgba(255,255,255,.5);
}

/* ============================================================================
   E) PRICING CARDS (grille d’offres)
============================================================================ */
.pricing-cards .card{
  border:1px solid var(--pricing-border-color);
  border-radius:1rem; background-color:#fff;
  transition: transform .25s ease, box-shadow .25s ease, filter .35s ease, opacity .25s ease, color .3s ease, background-color .3s ease, border-color .3s ease;
}
.pricing-cards .card.dimmed{
  filter: grayscale(100%) brightness(.8);
  opacity:.65; transform: scale(.98);
}
.pricing-cards .card.selected{
  transform: scale(.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.pricing-cards .card-header{
  background:transparent; border-bottom:none; transition: color .3s ease;
}
.pricing-cards .card-header h4{ color:#000; transition: color .3s ease; }

.pricing-cards .price-band{
  display:inline-block; min-width:12rem; padding:.5rem 1rem;
  border:1px solid var(--pricing-border-color); border-radius:999px;
  font-weight:600; background:transparent; transition: all .3s ease;
}

.pricing-cards .btn-outline-dark{
  font-weight:600; padding:.9rem 1.25rem; border-radius:1.75rem; transition: all .3s ease;
}
.pricing-cards .btn-outline-dark:hover{
  background:#fff; color:#000; border-color:#fff;
}

.pricing-cards .lead{ font-weight:600; }
.pricing-cards .card-body{ background:transparent; }
.pricing-cards ul li{ margin-bottom:.4rem; }

/* Hover inversé (fond noir) */
.pricing-cards .card:hover{
  background:#000; color:#fff; border-color:#fff; transform: translateY(-3px);
}
.pricing-cards .card:hover h4,
.pricing-cards .card:hover i,
.pricing-cards .card:hover small{ color:#fff !important; }
.pricing-cards .card:hover .price-band{
  background:#fff; color:#000; border-color:#fff;
}
.pricing-cards .card:hover .btn-outline-dark{
  background:#fff; color:#000; border-color:#fff;
}

/* ============================================================================
   F) FX PINNED STAGES (titres + sous-titres + cartes)
============================================================================ */
.fx-stage{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fx-intro{ display:grid; place-items:center; }

.fx-stack{
  display:inline-flex; flex-direction:column; align-items:center; gap:.15rem;
  will-change: transform;
}
.fx-title{
  font-family: var(--font-heading, system-ui, sans-serif);
  font-weight:800; letter-spacing:-0.02em;
  font-size: clamp(3rem, 12vw, 11rem); line-height:1;
  transform-origin:center top; margin:0; color: var(--bs-emphasis-color, #111);
}
.fx-subtitle{
  margin:0; font-size: clamp(1rem, 2.1vw, 1.15rem);
  color: var(--bs-tertiary-color, #6c757d);
  opacity:0; transform: translateY(8px);
}

/* Conteneur de cartes sous le stack */
.fx-cards{
  width:min(1120px, 100%); opacity:0; transform: translateY(16px);
  margin-top:.5rem;
}

/* ============================================================================
   G) STEPPER FIXE
============================================================================ */
.stepper-fixed{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--stage1) 75%, transparent);
}
.stepper{ display:flex; gap:.5rem; justify-content:center; padding:.75rem 0; }
.stepper .dot{ width:10px; height:10px; border-radius:50%; background: rgba(0,0,0,.2); }
.stepper .dot.active{ background:#111; }

/* ============================================================================
   H) STEPS HERO (parcours 100vh)
============================================================================ */
.register-steps{ position:relative; }

.step-hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding: clamp(1rem, 3vw, 3rem);
}
.step-hero .hero-inner{
  width:100%; max-width: var(--hero-max-w); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap: var(--hero-gap);
  text-align:center;
}

/* Étape 1 — big username input */
.username-hero-label{
  font-size: clamp(.875rem, .9vw, 1rem); opacity:.75;
}
.username-hero-input{
  font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size: clamp(2.2rem, 7.5vw, 5.5rem);
  border:none; outline:none; background:transparent; text-align:center; width:100%;
  border-bottom:2px solid rgba(0,0,0,.12); padding-bottom:.25rem;
}
.username-hero-input:focus{ border-bottom-color:#111; }

/* Boutons bas des steps */
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:.25rem; }
.hero-actions .btn{ min-width:200px; }

/* Étapes 2 et 3 — cartons centrés */
.hero-card{
  width:100%; max-width:780px; text-align:left;
  border:1px solid rgba(0,0,0,.08); border-radius:16px;
  padding: clamp(1rem, 2.5vw, 2rem);
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Toggle billing */
.billing-toggle{
  display:inline-flex; border:1px solid rgba(0,0,0,.1); border-radius:999px; overflow:hidden;
}
.billing-toggle input{ display:none; }
.billing-toggle label{ padding:.4rem .9rem; cursor:pointer; user-select:none; }
.billing-toggle input:checked + label{ background:#111; color:#fff; }


/* ===== Mobile tweaks : titres trop grands avant shrink GSAP ===== */
@media (max-width: 575.98px){
  /* Hauteur de scène plus réaliste sur mobile */
  .fx-stage{
    min-height: 92svh; /* au lieu de 100vh */
  }

  /* Stack plus compact */
  .fx-stack{
    gap: .1rem;
  }

  /* Titre : base plus petite pour que le shrink arrive “à temps” */
  .fx-title{
    /* avant : clamp(3rem, 12vw, 11rem) */
    font-size: clamp(2rem, 9.5vw, 3.25rem);
    line-height: .95;
    letter-spacing: -0.015em;
  }

  /* Sous-titre un poil plus petit aussi */
  .fx-subtitle{
    font-size: clamp(.95rem, 3.5vw, 1.05rem);
  }

  /* Cartes un peu plus proches du stack */
  .fx-cards{
    margin-top: .25rem;
  }

  /* Étapes (username hero) : éviter l'effet "écran titre" trop massif */
  .username-hero-input{
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  /* Stepper moins intrusif */
  .stepper{ padding: .5rem 0; }
}

/* Légères retouches tablette */
@media (min-width: 576px) and (max-width: 767.98px){
  .fx-title{
    font-size: clamp(2.4rem, 8.5vw, 4rem);
    line-height: .95;
  }
  .fx-stage{ min-height: 96svh; }
}

.fx-title{
  text-shadow: 0 2px 22px rgba(0,0,0,0.35);
}
/* Superposition locale */
/* Le stage sert de plan de superposition local */
#intro .fx-stage{ position: relative; min-height: 100vh; }
#intro .fx-stack{ position: relative; z-index: 2; }

/* Galerie full viewport, aérée, sous le texte */
#intro .intro-gallery{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid;
  /* grille large et AÉRÉE */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(10px, 2.2vw, 28px);
  align-content: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px);
  opacity: 0;                 /* fade-in via GSAP */
}

/* Petites tuiles translucides et un poil floues pour la lisibilité du titre */
#intro .intro-gallery img{
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.38;
  filter: brightness(0.9) blur(0.6px);
  will-change: transform, opacity;
}

/* Placement asymétrique, en laissant de l'air autour du centre */
#intro .intro-gallery img:nth-child(1){ grid-area: 2 / 1 / 4 / 3; }
#intro .intro-gallery img:nth-child(2){ grid-area: 1 / 3 / 3 / 5; }
#intro .intro-gallery img:nth-child(3){ grid-area: 2 / 6 / 5 / 9; }
#intro .intro-gallery img:nth-child(4){ grid-area: 4 / 2 / 6 / 4; }
#intro .intro-gallery img:nth-child(5){ grid-area: 4 / 5 / 7 / 6; }
#intro .intro-gallery img:nth-child(6){ grid-area: 3 / 4 / 6 / 5; }
#intro .intro-gallery img:nth-child(7){ grid-area: 1 / 6 / 3 / 8; }
#intro .intro-gallery img:nth-child(8){ grid-area: 5 / 7 / 7 / 9; }

/* Mobile : encore plus d'air et des tuiles plus petites */
@media (max-width: 575.98px){
  #intro .intro-gallery{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: clamp(8px, 2.8vw, 18px);
  }
  #intro .intro-gallery img:nth-child(1){ grid-area: 1 / 1 / 3 / 3; }
  #intro .intro-gallery img:nth-child(2){ grid-area: 1 / 4 / 3 / 6; }
  #intro .intro-gallery img:nth-child(3){ grid-area: 3 / 5 / 6 / 7; }
  #intro .intro-gallery img:nth-child(4){ grid-area: 3 / 2 / 5 / 4; }
  #intro .intro-gallery img:nth-child(5){ grid-area: 5 / 1 / 7 / 2; }
  #intro .intro-gallery img:nth-child(6){ grid-area: 4 / 3 / 6 / 4; }
  #intro .intro-gallery img:nth-child(7){ grid-area: 1 / 3 / 2 / 5; }
  #intro .intro-gallery img:nth-child(8){ grid-area: 5 / 5 / 7 / 6; }
}