/* ============================================================
   style.css · l'accueil Modium, version « vitrine »

   Sept écrans plein écran chorégraphiés au défilement, puis une zone libre
   (technique, FAQ, téléchargement) et le pied de page. La vitrine 3D
   (scene.js) vit sur un canvas fixe derrière les écrans : chaque écran ne
   pose que du texte et laisse voir la fenêtre de l'application.
   ============================================================ */

.main { position: relative; z-index: 2; }
/* minmax(0, 1fr) et non 1fr : la colonne implicite d'une grille se dimensionne
   sinon sur le contenu le plus large, et la piste du bandeau défilant (large
   de plusieurs milliers de pixels, pourtant masquée) élargissait toute la
   page. */
.s { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 0 calc(var(--hud-inset) + 34px); pointer-events: none; }
.s > * { pointer-events: auto; }
.s__inner { width: 100%; min-width: 0; max-width: var(--max); margin: 0 auto; }
@media (max-width: 720px) { .s { padding-left: var(--hud-inset); padding-right: var(--hud-inset); } }

/* ============================================================
   ÉCRAN 1 · LA VITRINE
   Le nom de la famille de packs en display géant, la fenêtre de
   l'application devant (canvas), les flèches et le curseur de pagination.
   La colonne de texte pointe le bas de l'écran pour laisser la vitrine au
   centre.
   ============================================================ */
.s-hero { align-items: end; padding-bottom: calc(var(--hud-inset) + 92px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.hero__titles { position: relative; height: clamp(110px, 18vw, 260px); }
.hero__title { position: absolute; left: 0; bottom: 0; margin: 0; font-size: clamp(34px, 9vw, 150px); white-space: nowrap; opacity: 0; pointer-events: none; }
.hero__title .w { display: block; }
.hero__title .w + .w { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.hero__title.is-active { opacity: 1; pointer-events: auto; }
.hero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.hero__meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mid); }
.hero__meta b { color: var(--ink-hi); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__nav { display: grid; gap: 18px; justify-items: end; padding-bottom: 6px; }
.hero__arrows { display: flex; gap: 10px; }
.hero__arrow { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(5,5,6,.5); color: var(--ink-hi); cursor: pointer; backdrop-filter: blur(8px); transition: border-color .3s, background .3s, transform .5s var(--enter); }
.hero__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--enter); }
.hero__arrow:hover { border-color: var(--ink); background: var(--ink); color: #050506; }
.hero__arrow:hover svg { transform: translateX(3px); }
.hero__arrow--prev:hover svg { transform: translateX(-3px); }
.hero__arrow:active { transform: scale(.94); }
/* la pagination : une piste, un curseur qui glisse, un cran par famille, le tout saisissable */
.hero__pager { position: relative; width: min(38vw, 340px); height: 28px; cursor: grab; touch-action: none; }
.hero__pager:active { cursor: grabbing; }
.hero__pager::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.hero__pager i { position: absolute; top: 50%; width: 1px; height: 8px; margin-top: -4px; background: var(--line-3); }
.hero__pager-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(5,5,6,1), 0 0 18px rgba(255,255,255,.5); will-change: transform; }
.hero__pager-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--red-hi); box-shadow: var(--fil-bloom); opacity: .8; }
/* quand WebGL n'est pas disponible, la capture prend la place de la vitrine */
.hero__fallback { position: absolute; left: 50%; top: 40%; width: min(74vw, 940px); transform: translate(-50%, -50%); display: none; }
body.scene-failed .hero__fallback { display: block; }
.hero__fallback img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line-1); filter: drop-shadow(0 40px 60px rgba(0,0,0,.8)); }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__nav { justify-items: start; }
  .hero__pager { width: min(60vw, 300px); }
}

/* ============================================================
   ÉCRAN 2 · LA FICHE
   La vitrine passe à gauche, la fiche prend la colonne de droite : un
   panneau en verre aux crochets HUD, ce que Modium fait de cette famille de
   packs, les caractéristiques en mono.
   ============================================================ */
.s-fiche { padding-top: calc(var(--nav-h) + 30px); padding-bottom: calc(var(--hud-inset) + 56px); }
.s-fiche .s__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); align-items: center; gap: var(--pad); }
.fiche { padding: 32px 34px 30px; }
.fiche__cat { margin-bottom: 18px; }
.fiche__name { font-size: clamp(30px, 3.4vw, 52px); line-height: .95; margin: 0 0 14px; }
.fiche__lede { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--ink-body); }
.fiche__specs { display: grid; margin: 0 0 24px; padding: 0; }
.fiche__specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-0); }
.fiche__specs dt { margin: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-decor); padding-top: 3px; }
.fiche__specs dd { margin: 0; font-size: 14px; color: var(--ink-body); }
.fiche__specs dd.mono { color: var(--ink-hi); }
.fiche__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Écran bas (portable 600 à 720 px) : la fiche se resserre pour tenir entre
   la barre et le HUD au lieu de passer dessous. */
@media (max-height: 720px) {
  .fiche { padding: 20px 24px 18px; }
  .fiche__cat { margin-bottom: 10px; }
  .fiche__name { font-size: clamp(26px, 3vw, 38px); margin-bottom: 8px; }
  .fiche__lede { margin-bottom: 12px; }
  .fiche__specs { margin-bottom: 14px; }
  .fiche__specs div { padding: 7px 0; }
}
@media (max-width: 900px) {
  .s-fiche { align-items: end; padding-bottom: calc(var(--hud-inset) + 84px); }
  .s-fiche .s__inner { grid-template-columns: 1fr; }
  .fiche { padding: 22px 20px; }
}

/* ============================================================
   ÉCRAN 3 · L'APPLICATION
   La vitrine se recule à droite, le texte prend la gauche : ce qu'on voit
   en ouvrant Modium, et les chiffres de l'installeur.
   ============================================================ */
.s-app { padding-top: calc(var(--nav-h) + 30px); padding-bottom: calc(var(--hud-inset) + 76px); }
.app__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pad); align-items: center; }
.app__title { font-size: clamp(34px, 4.6vw, 76px); margin: 12px 0 18px; }
.app__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.app__list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-body); }
.app__list svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--red-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--red-lum), .6)); }
.app__strip { margin-top: 26px; max-width: 34rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; }
.app__strip > div { padding: 18px 20px; background: rgba(8,8,10,.72); display: grid; gap: 4px; }
.app__strip .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-decor); }
.app__strip .v { font-family: var(--f-display); font-style: italic; font-size: 26px; line-height: 1; color: var(--neon); text-shadow: var(--neon-glow); }
@media (max-width: 900px) { .s-app { align-items: end; } .app__grid { grid-template-columns: 1fr; } .app__side { display: none; } }

/* ============================================================
   ÉCRAN 4 · CE QUE FAIT MODIUM
   Six lignes, une par fonction : nom en display, une précision en mono.
   Survoler une ligne éclaire sa vignette dans la vitrine.
   Tout l'écran doit tenir entre la barre et le HUD du bas : les lignes se
   dimensionnent en hauteur d'écran.
   ============================================================ */
.s-fonctions { align-items: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: calc(var(--hud-inset) + 76px); }
.rows__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.rows__title { font-size: clamp(36px, 5.4vw, 88px); margin-top: 12px; }
@media (max-width: 720px) { .rows__head { display: grid; gap: 10px; } .rows__title { font-size: clamp(26px, 8vw, 56px); white-space: nowrap; } }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-1); }
.row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; padding: clamp(5px, .9vh, 12px) 0; border: 0; border-bottom: 1px solid var(--line-0); background: none; color: var(--ink-hi); text-align: left; cursor: pointer; transition: padding-left .5s var(--enter), color .3s; }
.row .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; color: var(--ink-decor); }
.row .name { font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: clamp(20px, min(3.4vw, 4.6vh), 50px); line-height: 1; letter-spacing: -.02em; }
.row .say { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-decor); white-space: nowrap; }
.row:hover, .row.is-active { padding-left: 12px; }
.row:hover .name, .row.is-active .name { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.row:hover .n, .row.is-active .n { color: var(--red-hi); }
@media (max-width: 860px) { .row { grid-template-columns: 2rem 1fr; } .row .say { display: none; } }
/* en dernier : sinon les règles de base de .rows__title et .row .name repassent devant */
@media (max-height: 640px) { .rows__title { font-size: clamp(26px, 6vh, 56px); } .rows__head { margin-bottom: 6px; } .row { padding: 3px 0; } .row .name { font-size: clamp(18px, min(3.4vw, 4.2vh), 50px); } }

/* le détail de la fonction survolée, sous la liste */
.rows__say { margin: 18px 0 0; min-height: 3.2em; max-width: 46rem; font-size: 14px; line-height: 1.6; color: var(--ink-mid); transition: opacity .3s var(--ease-out); }
.rows__say b { color: var(--ink-hi); font-weight: 600; }
.rows__say.is-swapping { opacity: 0; }

/* ============================================================
   ÉCRAN 5 · LES ÉTAPES
   Quatre colonnes numérotées, en panneaux de verre.
   ============================================================ */
.s-etapes { padding-top: calc(var(--nav-h) + 24px); padding-bottom: calc(var(--hud-inset) + 76px); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.step { padding: 22px 22px 24px; }
.step .n { display: block; font-family: var(--f-display); font-style: italic; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-3); margin-bottom: 14px; }
.step h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); margin-bottom: 10px; }
.step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); }
.step:hover .n { color: var(--red-hi); -webkit-text-stroke: 0; text-shadow: var(--fil-bloom); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { padding: 16px 18px 18px; } .step p { font-size: 13px; } }
@media (max-height: 760px) { .step { padding: 16px 18px 18px; } .step .n { font-size: 24px; margin-bottom: 10px; } .step p { font-size: 13px; } }

/* ============================================================
   ÉCRAN 6 · À LA MAIN, OU AVEC MODIUM
   Deux colonnes face à face. Celle de Modium porte le filet rouge.
   ============================================================ */
.s-duel { padding-top: calc(var(--nav-h) + 24px); padding-bottom: calc(var(--hud-inset) + 76px); }
.duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.duel__card { padding: 24px 26px 26px; }
.duel__card h3 { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.duel__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.duel__card li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.55; }
.mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-1); flex: none; margin-top: 1px; }
.mark svg { width: 11px; height: 11px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark--no { border-color: #ffffff1f; } .mark--no svg { stroke: var(--ink-decor); }
.mark--yes { border-color: rgba(var(--red-lum), .55); box-shadow: 0 0 12px rgba(var(--red-lum), .28) inset; } .mark--yes svg { stroke: var(--red-hi); }
.duel__manuel li { color: var(--ink-mid); }
.duel__modium { border-color: rgba(var(--red-lum), .3); }
.duel__modium li { color: var(--ink-body); }
@media (max-width: 860px) { .duel { grid-template-columns: 1fr; } .duel__card { padding: 18px 20px 20px; } }
@media (max-height: 800px) { .duel__card { padding: 18px 20px 20px; } .duel__card ul { gap: 9px; } .duel__card li { font-size: 13px; } }

/* ============================================================
   LA ZONE LIBRE
   Technique, FAQ et téléchargement : le défilement par écran s'arrête ici,
   la page redevient une page. La vitrine s'éteint.
   ============================================================ */
.s-libre { min-height: 0; align-items: start; padding-top: 14vh; padding-bottom: 10vh; }
.libre__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 34px; }
.libre__title { font-size: clamp(38px, 6vw, 104px); }
.libre__meta { text-align: right; }
@media (max-width: 900px) { .libre__head { grid-template-columns: 1fr; align-items: start; gap: 12px; } .libre__meta { text-align: left; } }

.block { margin-top: 64px; }
.block__head { margin-bottom: 20px; }
.block__title { font-size: clamp(26px, 3vw, 44px); margin-top: 10px; }

/* la FAQ : des lignes qui s'ouvrent, rien de plus */
.faq { border-top: 1px solid var(--line-1); }
.faq details { border-bottom: 1px solid var(--line-0); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink-hi); transition: color .25s, padding-left .4s var(--enter); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.5px solid var(--ink-decor); border-bottom: 1.5px solid var(--ink-decor); transform: rotate(45deg) translateY(-2px); transition: transform .35s var(--enter), border-color .25s; }
.faq summary:hover { padding-left: 8px; }
.faq summary:hover::after { border-color: var(--red-hi); }
.faq details[open] summary { color: var(--ink); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); border-color: var(--red-hi); }
.faq .rep { padding: 0 0 20px; max-width: 48rem; }
.faq .rep p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
.faq .rep p:last-child { margin-bottom: 0; }

/* l'appel au téléchargement */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 36px; margin-top: 64px; }
.cta h3 { font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.02em; margin-bottom: 10px; }
.cta p { margin: 0; max-width: 34rem; font-size: 14px; color: var(--ink-mid); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .cta { padding: 24px 22px; } }

/* le bandeau défilant des formats reconnus, au bas de la zone libre */
.ticker { position: relative; margin-top: 64px; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); padding: 16px 0; overflow: hidden; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.ticker__track { display: flex; gap: 42px; width: max-content; animation: ticker 44s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker__item { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ticker__item i { font-style: normal; color: var(--ink-ghost); }
.ticker__item b { font-weight: 600; color: var(--ink-mid); }