:root { --fond:#121212; --carte:#1c1c1c; --haut:#232323; --bord:#2c2c2c; --texte:#ececec; --doux:#9e9e9e; --accent:#f0602c; --accent2:#ff8a4c; --ok:#4dbd7f; --alerte:#e5534b; color-scheme: dark }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif }
main { padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 90px); max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px }
.chargement { text-align: center; margin-top: 40vh; color: var(--doux); font-weight: 700 }
h1 { font-size: 26px; margin: 4px 0 0; letter-spacing: -.01em } h2 { font-size: 18px; margin: 0 0 8px } p { margin: 0 }
.doux { color: var(--doux); font-size: 14px }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 16px }
.grand { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.barre-prog { height: 8px; border-radius: 99px; background: var(--haut); overflow: hidden; margin-top: 10px } .barre-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)) }
button, .bouton { appearance: none; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; padding: 13px 16px; width: 100%; cursor: pointer; text-decoration: none; display: block; text-align: center }
button.second { background: var(--haut); color: var(--texte); border: 1px solid var(--bord) }
/* (2026-10-08) Au doigt : pas de délai de double-toucher, un retour quand on appuie, pas d'élastique qui tire toute l'app. */
button, .bouton, a { touch-action: manipulation }
button:active:not(:disabled) { transform: scale(.98); opacity: .9 }
button:disabled { opacity: .6 }
body { overscroll-behavior-y: none }
#barre button { min-height: 52px; justify-content: center }
.chap > button, .lecon { min-height: 56px }
.hors-ligne { background: rgba(229,83,75,.14); border: 1px solid rgba(229,83,75,.45); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600 }
input { width: 100%; font: inherit; font-size: 28px; letter-spacing: .3em; text-align: center; text-transform: uppercase; padding: 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--haut); color: var(--texte) }
.logo { width: 64px; height: 64px; margin: 6vh auto 6px; display: block }
.centre { text-align: center } .erreur { color: var(--alerte); font-weight: 600 }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 14px }
.tuile b { display: block; font-size: 24px; font-weight: 800 } .tuile span { color: var(--doux); font-size: 13px }
.chap { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; overflow: hidden }
.chap > button { background: none; color: var(--texte); text-align: left; display: flex; justify-content: space-between; align-items: center; border-radius: 0; padding: 14px 16px }
.lecon { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--bord); color: var(--texte); text-decoration: none; background: none; width: 100%; font-weight: 500; text-align: left; border-radius: 0 }
.lecon i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bord); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px }
.lecon.vu i { background: var(--ok); border-color: var(--ok); color: #fff }
video { width: 100%; border-radius: 14px; background: #000; aspect-ratio: 16/9 }
.notes { white-space: pre-wrap; color: #d6d6d6; font-size: 15px }
.liens a { color: var(--accent2); display: block; padding: 12px 0; word-break: break-word }
.images { display: grid; gap: 12px }
.images .image { padding: 0; background: #000; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; display: block }
.images img { display: block; width: 100%; height: auto }
.images .legende { margin: -4px 0 4px; color: var(--doux); font-size: 14px; white-space: pre-wrap }
#zoom { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 52px) 10px calc(env(safe-area-inset-bottom) + 16px); overflow: auto }
#zoom img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px }
#zoom p { color: #e6e6e6; font-size: 15px; text-align: center; margin: 12px 8px 0; white-space: pre-wrap }
#zoom .fermer { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 12px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px }
#barre { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: rgba(18,18,18,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--bord); padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px) }
#barre button { background: none; color: var(--doux); font-size: 12px; font-weight: 700; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 10px }
#barre button svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
#barre button.actif { color: var(--accent2) }
.astuce { background: rgba(240,96,44,.12); border: 1px solid rgba(240,96,44,.35); border-radius: 14px; padding: 12px 14px; font-size: 14px }
.retour { background: none; color: var(--accent2); width: auto; padding: 4px 0; font-weight: 700; text-align: left }