/* ==========================================================================
   SÉSAME — L'« odyssée » : la traversée MacBook 3D pilotée au scroll
   La section fait plusieurs écrans de haut ; à l'intérieur, un bloc collé
   (sticky) occupe tout l'écran et contient le canvas + les textes d'étapes.
   ========================================================================== */

.odyssee {
  /* 10,6 écrans de défilement + 1 écran visible = la durée du voyage v4
     (7 arrêts, 8 écrans, dont le simulateur en 2 écrans). Le hero est une
     section normale au-dessus : on arrive sur le Mac fermé en scrollant. */
  height: 1160vh;
  position: relative;
}

.odyssee-colle {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Halos d'ambiance derrière le Mac (statiques, aucun coût au scroll) */
.odyssee-colle::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Halo haut LARGE, doux et peu opaque : il prolonge sans couture le halo
     bas du hero et évite le « banding » en anneaux (opacité réduite + grande
     ellipse + fondu lointain). */
  background:
    radial-gradient(ellipse 85% 62% at 50% 16%, rgba(18, 0, 255, 0.24), transparent 80%),
    radial-gradient(ellipse 32% 32% at 85% 72%, rgba(240, 66, 108, 0.09), transparent 74%),
    radial-gradient(ellipse 32% 32% at 10% 60%, rgba(240, 66, 108, 0.05), transparent 74%);
  pointer-events: none;
}
html.theme-jour .odyssee-colle::before {
  background:
    radial-gradient(ellipse 85% 62% at 50% 16%, rgba(18, 0, 255, 0.1), transparent 80%),
    radial-gradient(ellipse 32% 32% at 85% 72%, rgba(240, 66, 108, 0.07), transparent 74%),
    radial-gradient(ellipse 32% 32% at 10% 60%, rgba(18, 0, 255, 0.07), transparent 74%);
}

/* Le canvas est toujours visible : on arrive dessus en scrollant,
   comme sur n'importe quelle section — aucun fondu. */
#toile-mac {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Bouton « Présentation auto » (bas droite, pendant l'odyssée) ---- */
.bouton-auto {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--texte);
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, background-color 0.2s ease;
}
.odyssee--active .bouton-auto {
  opacity: 1;
  pointer-events: auto;
}
.bouton-auto.actif {
  background: var(--rose);
  border-color: transparent;
  color: var(--creme);
  box-shadow: var(--glow-rose);
}

/* ---- Boutons de navigation entre les étapes (1 à 5) ---- */
.etapes-nav {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.odyssee--active .etapes-nav {
  opacity: 1;
  pointer-events: auto;
}
.etapes-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--contour-btn);
  background: var(--verre);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--texte);
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.etapes-nav button:hover {
  transform: scale(1.12);
}
.etapes-nav button.actif {
  background: var(--rose);
  border-color: transparent;
  color: var(--creme);
  box-shadow: var(--glow-rose);
}

/* ---- Textes d'étapes, posés au-dessus du canvas ---- */
.etape {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;   /* GPU uniquement */
  z-index: 2;
}
.etape--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Notice centrée EN BAS (arrêts 1 et 5) : au niveau du clavier du Mac,
   l'écran du logiciel reste entièrement visible — et plus de conflit
   avec le header fixe. Fond translucide flouté pour la lisibilité. */
.etape--centre-haut {
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: min(88vw, 620px);
  text-align: center;
  background: var(--verre);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 14px 28px 16px;
}
.etape--centre-haut h2 {
  margin-bottom: 0;
}
.etape--centre-haut p {
  margin-top: 10px;
}

/* Colonne de texte à droite (le Mac est cadré à gauche) et inversement.
   Notices volontairement compactes : le logiciel reste la vedette. */
.etape--droite,
.etape--gauche {
  top: 50%;
  transform: translateY(-50%);
  width: min(28vw, 380px);
  /* Même bloc « glassmorphisme » que toutes les notices (validé) */
  background: var(--verre);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 24px 28px;
}
/* Marges généreuses par rapport aux bords (demande du propriétaire) */
.etape--droite { right: 6vw; }
.etape--gauche { left: 6vw; }

/* Carte posée en bas à gauche : fond pour la lisibilité */
.etape--carte {
  left: 6vw;
  bottom: 8vh;
  max-width: 390px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  padding: 20px 24px;
}
/* Variante en bas à DROITE (quand le Mac est placé à gauche) */
.etape--carte-droite {
  left: auto;
  right: 6vw;
}

.etape h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 12px 0 8px;
}
.etape p {
  color: var(--texte-2);
  font-size: 15px;
}
.etape .carte-numero {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.etape .hero-sous-titre {
  font-size: clamp(18px, 2.2vw, 22px);
  max-width: 620px;
  margin-bottom: 36px;
}


/* ---- Mobile : les textes deviennent des cartes en bas d'écran ---- */
@media (max-width: 767px) {
  .etape--droite,
  .etape--gauche,
  .etape--carte,
  .etape--centre-haut {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 5vh;
    width: auto;
    max-width: none;
    background: var(--verre);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bordure);
    border-radius: 18px;
    padding: 20px 22px;
    display: block;
    transform: none;
    text-align: left;
  }
  /* Mobile : le Mac se cale entre le header et la carte de texte du bas,
     entier et jamais rogné. Hauteur EXPLICITE : « auto » ferait rétrécir
     le canvas à son ratio interne (piège des éléments remplacés). */
  #toile-mac {
    top: 12vh;
    height: 58vh; /* 100 - 12 (haut) - 30 (zone carte de texte) */
  }
  .etapes-nav {
    right: 10px;
    gap: 8px;
  }
  .etapes-nav button {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}