/* Vekilys — version immersive : le film de conduite avance au défilement, les chapitres se posent dessus. */
:root { --scrim: rgba(7, 34, 42, .62); --glass: rgba(11, 60, 73, .55); --glass-border: rgba(142, 231, 238, .22); }
body { background: var(--deep); color: var(--on-deep); }
body.immersif h1, body.immersif h2, body.immersif h3 { color: #fff; }
body.immersif .lead { color: var(--on-deep-2); }

/* le film, fixé derrière tout */
.film-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--deep); }
.film-stage video, .film-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.film-stage video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.film-stage.ready video { opacity: 1; }
.film-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,34,42,.15) 0%, rgba(7,34,42,.05) 35%, rgba(7,34,42,.55) 75%, var(--deep) 100%); pointer-events: none; }

/* navigation par-dessus le film */
body.immersif .nav { background: transparent; border-bottom-color: transparent; }
body.immersif .nav.is-scrolled { background: rgba(7, 34, 42, .55); border-bottom-color: var(--glass-border); }
body.immersif .brand, body.immersif .nav-links a { color: #fff; }
body.immersif .nav-links a:hover { color: var(--bright); }
body.immersif .btn-nav { background: #fff; color: var(--deep); }
body.immersif .nav-toggle span { background: #fff; }
@media (max-width: 900px) { body.immersif .nav.is-open .nav-links { background: rgba(7,34,42,.96); border-bottom-color: var(--glass-border); } }

/* chapitres */
main.chapitres { position: relative; z-index: 1; }
.chapitre { min-height: 100dvh; display: flex; align-items: center; padding: 96px 0; }
.chapitre .wrap { width: 100%; }
.panneau { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 28px; padding: 36px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.35); max-width: 640px; }
.panneau.large { max-width: none; }
.panneau p, .panneau li { color: var(--on-deep-2); }
.panneau strong { color: #fff; }
.chapitre.droite .wrap { display: flex; justify-content: flex-end; }

/* héros */
.chapitre.hero-film { align-items: flex-end; padding-bottom: 12vh; }
.chapitre.hero-film h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 14ch; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.chapitre.hero-film .lead { max-width: 52ch; color: rgba(255,255,255,.85); font-size: 1.2rem; }

/* étapes en liste courte */
.etapes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.etapes li::before { counter-increment: etape; content: counter(etape); width: 34px; height: 34px; border-radius: 50%; background: var(--bright); color: var(--deep); font-family: var(--display); font-weight: 700; display: grid; place-items: center; }
.etapes b { color: #fff; display: block; font-family: var(--display); font-weight: 600; }

/* l'iPhone */
.chapitre.telephone .wrap { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.iphone { width: min(340px, 78vw); aspect-ratio: 9 / 19.5; border-radius: 48px; background: #0b0f12; padding: 12px; box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.08); position: relative; justify-self: end; }
.iphone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 34%; height: 28px; background: #0b0f12; border-radius: 20px; z-index: 2; }
.iphone .ecran { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #000; }
.iphone video, .iphone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iphone .lecture { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); border: 0; cursor: pointer; color: #fff; }
.iphone .lecture span { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--deep); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform 120ms ease; }
.iphone .lecture:active span { transform: scale(.97); }
.iphone.joue .lecture { display: none; }

/* bento et cartes sur fond sombre */
body.immersif .cell { background: rgba(255,255,255,.06); border-color: var(--glass-border); }
body.immersif .cell h3 { color: #fff; }
body.immersif .cell p { color: var(--on-deep-2); }
body.immersif .cell .icon { background: rgba(142,231,238,.14); color: var(--bright); }
body.immersif .cell.c-soft { background: rgba(142,231,238,.14); }
body.immersif .checks li { color: var(--on-deep-2); }
body.immersif .checks li strong { color: #fff; }
body.immersif .checks svg { color: var(--mint); }

/* tarif : la carte blanche reste blanche, elle est le point d'arrivée */
body.immersif .chapitre.arrivee { padding-bottom: 60px; }
body.immersif .chapitre.arrivee .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
body.immersif .price-card { color: var(--text); }
body.immersif .price-card .name, body.immersif .included li { color: var(--text); }
body.immersif .after dt { color: #fff; } body.immersif .after dd { color: var(--on-deep-2); }
body.immersif .after > div { border-color: var(--glass-border); }

/* fin de page sur fond plein */
.sol { position: relative; z-index: 1; background: var(--bg); color: var(--text); padding-top: 72px; }
body.immersif .sol h2, body.immersif .sol h3 { color: var(--deep); }
.sol .faq summary { color: var(--deep); }

/* --- adaptation : grand écran, tablette, téléphone (portrait et paysage) --- */
@media (min-width: 1600px) {
  .wrap { max-width: 1240px; }
  .panneau { max-width: 720px; padding: 44px; }
  .chapitre.hero-film h1 { font-size: 5rem; }
}
/* tablette et petit portable */
@media (max-width: 1200px) and (min-width: 901px) {
  .panneau { max-width: 560px; padding: 30px; }
  .iphone { width: min(300px, 34vw); }
  .chapitre.telephone .wrap { gap: 32px; }
  body.immersif .bento { grid-template-columns: 1fr 1fr; }
  body.immersif .bento .span-3, body.immersif .bento .span-2, body.immersif .bento .span-4 { grid-column: span 1; }
  body.immersif .chapitre.arrivee .wrap { gap: 28px; }
}
/* tablette portrait et téléphone */
@media (max-width: 900px) {
  .chapitre { padding: 72px 0; min-height: auto; }
  .chapitre.hero-film { min-height: 100dvh; padding-bottom: max(10vh, env(safe-area-inset-bottom, 0px)); }
  .chapitre.hero-film h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); max-width: 12ch; }
  .chapitre.hero-film .lead { font-size: 1.05rem; }
  .panneau { padding: 26px; max-width: none; }
  .chapitre.telephone .wrap, body.immersif .chapitre.arrivee .wrap { grid-template-columns: 1fr; }
  .iphone { justify-self: center; width: min(320px, 72vw); }
  .film-stage video, .film-stage img { object-position: 55% 45%; }
  body.immersif .nav.is-open .nav-links { background: rgba(7,34,42,.96); border-bottom-color: var(--glass-border); }
}
/* téléphone étroit */
@media (max-width: 520px) {
  .chapitre { padding: 56px 0; }
  .panneau { padding: 20px; border-radius: 22px; }
  .chapitre.hero-film h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .hero-actions { gap: 12px; }
  .hero-actions .btn-primary { width: 100%; justify-content: center; }
  .etapes li { grid-template-columns: 30px 1fr; gap: 12px; }
  .etapes li::before { width: 30px; height: 30px; }
  .iphone { width: min(280px, 80vw); }
  body.immersif .price-card { padding: 26px; }
  .film-stage video, .film-stage img { object-position: 58% 50%; }
}
/* téléphone en paysage : peu de hauteur, on ne force pas un écran entier */
@media (max-height: 520px) and (orientation: landscape) {
  .chapitre, .chapitre.hero-film { min-height: auto; padding: 48px 0; }
  .chapitre.hero-film h1 { font-size: 2.2rem; }
  .iphone { width: 220px; }
}
/* zones sûres des téléphones à encoche */
.wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* survol réservé aux pointeurs fins ; au doigt, le retour est l'appui */
@media (hover: none) {
  .iphone .lecture span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film-stage video { display: none; }
  .film-stage.ready video { opacity: 0; }
}