/* ==========================================================================
   SÉSAME — Styles de la page d'accueil
   ========================================================================== */

/* ---- HERO ---- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Contenu calé vers le HAUT (remonté, sans coller le header) */
  justify-content: flex-start;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: calc(84px + 5vh) 24px 160px;
}

/* Halos lumineux d'ambiance en fond (statiques : aucun coût au scroll) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% -10%, rgba(18, 0, 255, 0.32), transparent 72%),
    radial-gradient(ellipse 30% 30% at 85% 25%, rgba(240, 66, 108, 0.11), transparent 72%),
    radial-gradient(ellipse 35% 30% at 12% 70%, rgba(240, 66, 108, 0.06), transparent 72%),
    /* Halo bas : large, doux et peu opaque (évite le « banding » en anneaux) ;
       déborde vers la section suivante -> lumière CONTINUE à la jonction. */
    radial-gradient(ellipse 85% 60% at 50% 122%, rgba(18, 0, 255, 0.24), transparent 78%);
  pointer-events: none;
}

/* En mode jour, les halos sont adoucis pour rester élégants sur fond crème */
html.theme-jour .hero::before {
  background:
    radial-gradient(ellipse 50% 40% at 50% -10%, rgba(18, 0, 255, 0.13), transparent 72%),
    radial-gradient(ellipse 30% 30% at 85% 25%, rgba(240, 66, 108, 0.09), transparent 72%),
    radial-gradient(ellipse 35% 30% at 12% 70%, rgba(18, 0, 255, 0.07), transparent 72%),
    radial-gradient(ellipse 85% 60% at 50% 122%, rgba(18, 0, 255, 0.1), transparent 78%);
}

.hero > * {
  position: relative; /* passe au-dessus des halos */
}

.hero h1 {
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 700;
  max-width: 900px;
  margin: 28px 0 24px;
}

/* Mot mis en avant dans le titre */
.hero h1 .accent {
  color: var(--accent);
}

.hero-sous-titre {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--texte-2);
  max-width: 620px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Invitation au scroll : texte + flèche qui sautillent, ancrés en bas */
.hero-scroll {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--texte-2);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: flotte 2.4s ease-in-out infinite;
  /* translateX pour le centrage + translateY animé : GPU uniquement */
}
@keyframes flotte {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* Visuel du hero : le carnet de logements.
   (Sera remplacé par le MacBook 3D piloté au scroll — étapes 4-5.) */
.hero-visuel {
  margin-top: 64px;
  max-width: 980px;
  width: 100%;
}

/* ---- Cadre « application » autour des captures d'écran ---- */
.cadre-app {
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  margin: 0;
}
html.theme-jour .cadre-app {
  box-shadow: 0 30px 60px rgba(13, 17, 48, 0.14);
}
/* Barre de fenêtre avec les trois pastilles */
.cadre-app-barre {
  display: flex;
  gap: 7px;
  padding: 12px 14px;
}
.cadre-app-barre span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 251, 240, 0.18);
}
html.theme-jour .cadre-app-barre span {
  background: rgba(13, 17, 48, 0.15);
}
/* Variante sans barre de fenêtre (panneau flottant, ex. assistant) */
.cadre-app--simple {
  border-radius: 22px;
}

/* ---- Apparition douce au défilement (classe posée par main.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px); /* GPU uniquement */
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal--visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---- Introduction des fonctionnalités ---- */
.intro-fonctionnalites {
  padding: 110px 24px 20px;
  text-align: center;
}
.intro-fonctionnalites h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 20px;
}

/* ---- Sections fonctionnalités (texte + capture en alternance) ---- */
.fonctionnalite {
  padding: 90px 0;
}
.fonctionnalite-grille {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
/* Variante inversée : le texte passe à droite */
.fonctionnalite--inverse .fonctionnalite-grille {
  grid-template-columns: 1.1fr 0.9fr;
}
.fonctionnalite--inverse .fonctionnalite-texte {
  order: 2;
}

.fonctionnalite-texte h3 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin: 18px 0 16px;
}
.fonctionnalite-texte p {
  color: var(--texte-2);
  font-size: 18px;
  max-width: 460px;
}

/* Pastille numérotée */
.carte-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--creme);
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--glow-bleu);
}

/* Variante « pleine largeur » : la fonctionnalité vedette (simulation) */
.fonctionnalite--pleine {
  text-align: center;
}
.fonctionnalite--pleine .fonctionnalite-texte {
  max-width: 640px;
  margin: 0 auto 52px;
}
.fonctionnalite--pleine .fonctionnalite-texte p {
  margin: 0 auto;
}
.fonctionnalite--pleine .cadre-app {
  max-width: 1020px;
  margin: 0 auto;
}

/* Le panneau assistant est vertical : on le contient */
.cadre-assistant {
  max-width: 420px;
  justify-self: center;
}

/* ---- TARIFS ---- */
.tarifs {
  padding: 110px 0 30px;
  text-align: center;
}
.tarifs h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 20px 0 12px;
}
.tarifs-sous-titre {
  color: var(--texte-2);
  font-size: 18px;
}

.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
  text-align: left;
}
.tarif {
  display: flex;
  flex-direction: column;
  padding: 32px;
}
.tarif h3 {
  font-size: 26px;
}
.tarif-prix {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 28px;
  color: var(--rose);
  margin: 6px 0 18px;
}
.tarif-prix .periode {
  font-size: 16px;
  color: var(--texte-2);
  font-weight: 500;
}
.tarif-prix--gratuit {
  color: var(--accent);
}
.tarif ul {
  list-style: none;
  margin-bottom: 28px;
  flex-grow: 1; /* pousse le bouton en bas pour aligner les 3 cartes */
}
.tarif li {
  position: relative;
  padding-left: 26px;
  color: var(--texte-2);
  font-size: 15px;
  margin-bottom: 10px;
}
.tarif li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.tarif .btn {
  text-align: center;
}

/* Carte mise en avant (Ultime) — liseré rose comme dans le logiciel */
.tarif--populaire {
  border-color: rgba(240, 66, 108, 0.55);
  position: relative;
}
.badge-populaire {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--rose);
  color: var(--creme);
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--glow-rose);
}

/* Bandeau crédits Sésames */
.credits {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  align-items: center;
  text-align: left;
}
.credits h3 {
  font-size: 22px;
}
.credits > div:first-child p {
  color: var(--texte-2);
  font-size: 15px;
  margin-top: 6px;
}
.credit-offre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 18px 22px;
}
.credit-offre strong {
  font-family: var(--police-titres);
  font-size: 17px;
  display: block;
}
.credit-offre .prix {
  color: var(--texte-2);
  font-size: 15px;
}
/* Bouton « Acheter » des crédits : beige, texte bleu électrique
   (palette stricte : plus de bleu clair) */
.btn-bleu-clair {
  background: var(--creme);
  color: var(--bleu);
  padding: 12px 22px;
  font-size: 13px;
}

/* ---- CTA FINAL ---- */
.cta-final {
  padding: 150px 24px 150px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* La lueur descend jusqu'au bord bas de la section : ellipse centrée juste
   sous le bord, brillante au niveau de la ligne, qui se fond ensuite dans
   le trait de séparation du footer (la marge du footer est neutralisée
   ci-dessous pour que le bord bas touche exactement ce trait). */
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 106%, rgba(18, 0, 255, 0.32), transparent 74%),
    radial-gradient(ellipse 25% 35% at 72% 82%, rgba(240, 66, 108, 0.13), transparent 70%);
  pointer-events: none;
}
html.theme-jour .cta-final::before {
  background:
    radial-gradient(ellipse 62% 58% at 50% 106%, rgba(18, 0, 255, 0.13), transparent 74%),
    radial-gradient(ellipse 25% 35% at 72% 82%, rgba(240, 66, 108, 0.1), transparent 70%);
}
/* Home : le footer colle la section CTA -> la lueur atteint le trait */
body:has(.cta-final) .footer {
  margin-top: 0;
}
.cta-final > * {
  position: relative;
}
.cta-final h2 {
  font-size: clamp(36px, 5.5vw, 68px);
  margin-bottom: 18px;
}
.cta-final p {
  color: var(--texte-2);
  font-size: 19px;
  margin-bottom: 40px;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .fonctionnalite {
    padding: 56px 0;
  }
  .fonctionnalite-grille,
  .fonctionnalite--inverse .fonctionnalite-grille {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .fonctionnalite--inverse .fonctionnalite-texte {
    order: 0; /* le texte repasse au-dessus de l'image */
  }
  .grille-tarifs {
    grid-template-columns: 1fr;
  }
  .credits {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .credits .credit-offre {
    text-align: left;
  }
}