/* Le book, page pour page. Les slides gardent leurs styles d'origine : ce fichier ne fait que
   les mettre à l'échelle de l'écran, gérer le défilement page par page et les films. */
@font-face { font-family: "Sofia Sans"; src: url(fonts/SofiaSans.ttf) format("truetype"); font-weight: 1 1000; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono.ttf) format("truetype"); font-weight: 100 800; font-display: block; }

* { margin: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-snap-type: y mandatory; overflow-y: scroll; scroll-behavior: smooth; background: #0c0d0e; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: #0c0d0e; color: #edebe7; font-family: "Sofia Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* une page = un écran ; la slide 1920x1080 est centrée et mise à l'échelle */
.page { position: relative; height: 100vh; height: 100dvh; width: 100%; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; }
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, .5)); transform-origin: center; }

/* rendu des slides : mêmes règles que l'éditeur du book */
section { position: relative; width: 1920px; height: 1080px; overflow: hidden; display: flex; flex-direction: column; }
section img { display: block; object-fit: cover; }
section h1, section h2, section h3, section p { font-weight: 400; }
section a { color: inherit; text-decoration: none; }
section a:hover span { opacity: .7; }

/* films */
.slot { background: #1b1d20; }
.slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; transition: opacity .6s ease; }
.slot video.live { opacity: 1; }
.slot video:fullscreen { object-fit: contain; object-position: 50% 50% !important; background: #000; opacity: 1; }
.slot video:-webkit-full-screen { object-fit: contain; object-position: 50% 50% !important; background: #000; opacity: 1; }
.slot.full { z-index: 2; background: transparent; }
.slot.full:not(.on) { display: none; }
.ctrl { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 10px; opacity: 0; transition: opacity .4s; z-index: 3; }
.slot:hover .ctrl, .slot.ended .ctrl, .slot.show .ctrl, .ctrl:focus-within { opacity: 1; }
.ctrl button { font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
  color: #edebe7; background: rgba(12, 13, 14, .6); border: 1px solid rgba(237, 235, 231, .55); padding: 10px 18px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, color .2s; }
.ctrl button:hover, .ctrl button[aria-pressed="true"] { background: #edebe7; color: #0c0d0e; }
.slot.swap { background: none; }
.slot:not(.full) .ctrl button[data-solo] { font-size: 14px; padding: 7px 12px; letter-spacing: 2px; }
.slot:has(button[data-solo]) .ctrl { right: 12px; bottom: 12px; }
.slot.full .ctrl { right: 64px; bottom: 56px; }

/* bandeau */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 32px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) clamp(16px, 4vw, 64px) 16px;
  background: rgba(12, 13, 14, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(43, 46, 49, .6); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s; }
.bar.hide { transform: translateY(-100%); opacity: 0; }
.brand { font-size: 19px; font-weight: 400; color: #edebe7; text-decoration: none; margin-right: auto; }
.bar nav { display: flex; gap: clamp(14px, 2vw, 32px); }
.bar nav a, .count { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #a7adb6; text-decoration: none; transition: color .2s; }
.bar nav a:hover, .bar nav a.cur { color: #edebe7; }
.count { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.bar a:focus-visible, .ctrl button:focus-visible { outline: 1px solid #edebe7; outline-offset: 4px; }
@media (max-width: 900px) { .bar nav a:not(:last-child) { display: none; } }

/* téléphone tenu en hauteur (après « Continuer en vertical ») : chaque page à la largeur de l'écran */
@media (orientation: portrait) { html { scroll-snap-type: none; } .page { height: calc(100vw * 1080 / 1920); } }

/* écran « tournez votre téléphone » : affiché dès le premier instant, avant la première page */
.gate { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 1024px) {
  html:not(.nogate) { overflow: hidden; }
  html:not(.nogate) .gate { display: flex; }
  html:not(.nogate) .bar { display: none; }
}
.gate { position: fixed; inset: 0; z-index: 100; background: #0c0d0e; color: #edebe7; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px); text-align: center; touch-action: none; }
.gate-brand { font-size: 17px; letter-spacing: .01em; }
.gate-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate-phone { width: 76px; height: 76px; color: #edebe7; animation: turn 2.8s cubic-bezier(.65, 0, .35, 1) infinite; margin-bottom: 10px; }
@keyframes turn { 0%, 18% { transform: rotate(0); } 48%, 70% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.gate-title { font-size: 26px; font-weight: 300; line-height: 1.2; }
.gate-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a7adb6; line-height: 1.6; }
.gate-skip { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6f757d;
  background: none; border: 0; padding: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .gate-phone { animation: none; transform: rotate(-90deg); } }

/* boutons des films : taille constante à l'écran (lisibles et touchables sur téléphone) */
.ctrl { transform: scale(var(--cs, 1)); transform-origin: right bottom; }
.ctrl.totop { transform-origin: left bottom; }
.touch .ctrl button { background: rgba(12, 13, 14, .7); }
.touch .slot:not(.full) .ctrl button[data-solo] { font-size: 0; padding: 7px 10px; }
.touch .slot:not(.full) .ctrl button[data-solo]::after { content: "Son"; font-size: 14px; letter-spacing: 2px; }
.touch .slot:not(.full) .ctrl button[data-solo][aria-pressed="true"]::after { content: "Couper"; }
.tap { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) scale(var(--cs, 1));
  font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
  color: #0c0d0e; background: #edebe7; border: 0; padding: 14px 26px; cursor: pointer; }
.tap::before { content: ""; display: inline-block; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-right: 12px; vertical-align: -1px; }

/* ---------- animation de la typo : à chaque arrivée sur une page ----------
   Grands titres : chaque mot monte derrière un cache. Textes courants : montée courte, fondu et léger flou.
   Une seule courbe (expo out) et un décalage régulier dans l'ordre de lecture. */
.js-anim .tx { opacity: 0; transform: translateY(18px); filter: blur(5px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s); }
.js-anim .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .2em; margin: -.14em -.02em -.2em; }
.js-anim .wm > span { display: inline-block; transform: translateY(115%); transition: transform 1.25s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.js-anim .mx { clip-path: inset(0 0 100% 0); opacity: .001;
  transition: clip-path 1.35s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; transition-delay: var(--d, 0s); }
.js-anim .page.in .mx { clip-path: inset(0 0 0 0); opacity: 1; }
.js-anim .page.reset .mx { transition: none !important; }
.js-anim .page.in .tx { opacity: 1; transform: none; filter: none; }
.js-anim .page.in .wm > span { transform: none; }
.js-anim .page.reset .tx, .js-anim .page.reset .wm > span { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .tx { transform: none; filter: none; transition-property: opacity; transition-duration: .4s; }
  .js-anim .wm > span { transform: none; transition: none; }
  .js-anim .mx { clip-path: none; transition-property: opacity; transition-duration: .4s; }
}

/* retour en haut, dernière page : en bas à gauche, toujours visible */
.ctrl.totop { left: 64px; right: auto; bottom: 56px; opacity: 1; z-index: 4; }

/* téléphone à l'horizontale : bandeau plus fin, qui n'apparaît qu'en touchant le haut de l'écran */
@media (max-height: 520px) and (pointer: coarse) {
  .bar { padding: calc(env(safe-area-inset-top, 0px) + 8px) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); gap: 20px; }
  .brand { font-size: 15px; }
}

/* écran tactile : pas de découpe animée (clip-path) sur les cadres — Safari mobile affiche alors les films en noir ou en clignotant */
.touch .js-anim .mx, .js-anim.touch .mx { clip-path: none !important; transition: opacity .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }

/* écran tactile : boutons toujours visibles, sans flou d'arrière-plan (sur iPhone, le flou posé sur une vidéo l'affiche en noir) */
.touch .ctrl { opacity: 1; }
.touch .ctrl button, .touch .tap { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-appearance: none; appearance: none; }
.touch .ctrl button { background: rgba(12, 13, 14, .55); color: #edebe7; border: 1px solid rgba(237, 235, 231, .7); }
.touch .ctrl button[aria-pressed="true"] { background: #edebe7; color: #0c0d0e; }