/* Lecteur des films LaReunion.ai. Charte des films : nuit, lave, lagon, soufre, canne ; Archivo Black + Spline Sans.
   Parti pris : la page claire des films (lagon -> sable, trame de points), le lecteur posé comme une « carte flottante »,
   et la carte de l'île en guise de sommaire. Une seule grande ombre : celle du lecteur. */
@font-face { font-family: "Archivo Black"; src: url(../vendor/home-archivo-black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Spline Sans"; src: url(../vendor/home-spline-400.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --nuit: #0b1c33; --lave: #ff4a17; --lagon: #00a9c0; --soufre: #ffc531; --canne: #1fa84c;
  --gris: #56606e; --trait: rgba(11, 28, 51, .13); --voile: rgba(11, 28, 51, .06);
  --titre: "Archivo Black", "Arial Black", sans-serif; --texte: "Spline Sans", "Segoe UI", system-ui, sans-serif;
  --ombre: 0 30px 70px rgba(11, 28, 51, .22), 0 8px 20px rgba(11, 28, 51, .12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--nuit); font: 400 17px/1.5 var(--texte);
  background: radial-gradient(rgba(11, 28, 51, .07) 1.4px, transparent 1.5px) 0 0 / 28px 28px,
    linear-gradient(135deg, #eefafb 0%, #fdfcf8 45%, #fff3ec 100%) fixed;
}
h1, h2, h3, p, ol { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--soufre); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- en-tête ---------- */
.tete { max-width: 1560px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 40px) 6px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nuit); border-radius: 12px; }
.marque-nom { font: 400 25px/1 var(--titre); letter-spacing: -.03em; }
.marque-ai { font: 400 16px/1 var(--titre); color: #fff; background: var(--lave); border-radius: 6px; padding: 4px 7px; margin-left: -4px; }

/* ---------- mise en page ---------- */
.scene { max-width: 1560px; margin: 0 auto; padding: 14px clamp(14px, 3vw, 40px) 70px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.colonne { min-width: 0; }

/* ---------- le lecteur ---------- */
.lecteur {
  position: relative; aspect-ratio: 16 / 9; background: var(--nuit); border-radius: 22px; overflow: hidden; box-shadow: var(--ombre);
  color: #fff; user-select: none; -webkit-user-select: none; touch-action: manipulation; isolation: isolate;
}
.lecteur::before {   /* film vertical dans un cadre horizontal : son affiche, floue, remplit les côtés */
  content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--affiche, none) center / cover; filter: blur(34px) brightness(.45) saturate(1.2); opacity: 0;
}
.lecteur[data-format="v"]::before { opacity: 1; }
.lecteur video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.lecteur video::cue { font: 600 clamp(14px, 1.7vw, 22px)/1.25 var(--texte); color: #fff; background: rgba(11, 28, 51, .82); }
.lecteur:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.lecteur.inactif { cursor: none; }

.grand-lire {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 0; border-radius: 50%;
  background: var(--lave); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(255, 74, 23, .45); transition: transform .15s ease;
}
.grand-lire svg { width: 46px; height: 46px; margin-left: 5px; }
.grand-lire:hover { transform: scale(1.07); }
.lecteur.lance .grand-lire { display: none; }

.geste { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 40px; background: rgba(11, 28, 51, .78);
  font: 600 20px/1 var(--texte); opacity: 0; pointer-events: none; white-space: nowrap; }
.geste.vu { animation: geste .7s ease both; }
@keyframes geste { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }

.commandes { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 14px 8px; background: linear-gradient(transparent, rgba(5, 14, 28, .82)); transition: opacity .25s ease; }
.lecteur.inactif .commandes { opacity: 0; pointer-events: none; }
.lecteur:not(.lance) .commandes { visibility: hidden; }   /* hors du parcours clavier tant que le film n'est pas lancé */

.barre { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: 6px; }
.rail { position: relative; flex: 1; height: 5px; background: rgba(255, 255, 255, .28); border-radius: 3px; overflow: hidden; transition: height .12s ease; }
.barre:hover .rail, .barre.glisse .rail { height: 8px; }
.tampon, .lu { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.tampon { background: rgba(255, 255, 255, .38); }
.lu { background: var(--lave); }
.coupes i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(5, 14, 28, .9); }
.poignee { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--lave);
  transform: scale(0); transition: transform .12s ease; pointer-events: none; }
.barre:hover .poignee, .barre.glisse .poignee, .barre:focus-visible .poignee { transform: scale(1); }
.apercu { position: absolute; bottom: 26px; left: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; pointer-events: none; }
.vignette { border-radius: 10px; border: 3px solid #fff; background-color: var(--nuit); background-repeat: no-repeat; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.apercu-chapitre { font: 400 15px/1.15 var(--titre); letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); max-width: 230px; text-align: center; }
.apercu-temps { font: 600 14px/1 var(--texte); background: rgba(5, 14, 28, .85); border-radius: 20px; padding: 5px 10px; font-variant-numeric: tabular-nums; }

.rangee { display: flex; align-items: center; gap: 2px; min-height: 46px; }
.bouton { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; }
.bouton svg { width: 26px; height: 26px; }
.bouton:hover { background: rgba(255, 255, 255, .16); }
.bouton[aria-pressed="true"] { color: var(--soufre); }
.volume { display: flex; align-items: center; }
.volume input { width: 0; opacity: 0; transition: width .18s ease, opacity .18s ease; accent-color: var(--lave); height: 22px; margin: 0; }
.volume:hover input, .volume:focus-within input { width: 84px; opacity: 1; margin-right: 8px; }
.temps { font: 500 15px/1 var(--texte); font-variant-numeric: tabular-nums; padding: 0 10px 0 6px; white-space: nowrap; }
.chapitre-courant { font: 400 15px/1 var(--titre); letter-spacing: -.01em; padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chapitre-courant:empty { display: none; }
.pousse { flex: 1; }

.reglages { position: absolute; right: 12px; bottom: 74px; width: min(330px, calc(100% - 24px)); background: #fff; color: var(--nuit); border-radius: 18px; padding: 14px 16px 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4); display: grid; gap: 12px; }
.reglage-nom { font: 600 14px/1 var(--texte); color: var(--gris); margin-bottom: 7px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { border: 1.5px solid var(--trait); background: #fff; border-radius: 30px; padding: 6px 12px; font: 600 15px/1 var(--texte); }
.choix button:hover { border-color: var(--nuit); }
.choix button[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }

.fin { position: absolute; inset: 0; background: rgba(5, 14, 28, .95); display: grid; place-content: center; justify-items: center; gap: 18px; padding: 20px; text-align: center; }
.fin-titre { font: 400 clamp(22px, 3vw, 38px)/1.05 var(--titre); letter-spacing: -.03em; }
.fin-choix { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fin a, .fin button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 40px; padding: 12px 20px; font: 600 17px/1 var(--texte); text-decoration: none; background: #fff; color: var(--nuit); }
.fin .revoir { background: var(--lave); color: #fff; }
.fin svg { width: 22px; height: 22px; }

/* ---------- la fiche sous le lecteur ---------- */
.fiche { padding: 26px 4px 0; max-width: 980px; }
.fiche h1 { font: 400 clamp(27px, 3.3vw, 46px)/1.04 var(--titre); letter-spacing: -.035em; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 16px; }
.action { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--nuit); background: #fff; color: var(--nuit); border-radius: 40px; padding: 10px 18px;
  font: 600 16px/1 var(--texte); text-decoration: none; }
.action:hover { background: var(--voile); }
.action-forte { background: var(--lave); border-color: var(--lave); color: #fff; }
.action-forte:hover { background: #e53d0d; border-color: #e53d0d; }
.icone svg { width: 20px; height: 20px; display: block; }
.duree { color: var(--gris); font-weight: 500; margin-left: 6px; }
.desc { font-size: 19px; line-height: 1.5; max-width: 62ch; color: #1d2f49; }
.credits { margin-top: 14px; font-size: 14px; line-height: 1.45; max-width: 76ch; color: var(--gris); }

.chapitres { margin-top: 34px; }
.chapitres h2, .cote h2 { font: 400 21px/1.1 var(--titre); letter-spacing: -.02em; margin-bottom: 12px; }
.chapitres ol { list-style: none; padding: 0; display: grid; }
.chapitres li { border-top: 1.5px solid var(--trait); }
.chapitres button { width: 100%; display: grid; grid-template-columns: 58px minmax(120px, 190px) 1fr; gap: 14px; align-items: baseline; text-align: left; border: 0; background: transparent;
  padding: 11px 10px 11px 12px; border-left: 5px solid transparent; }
.chapitres button:hover { background: var(--voile); }
.chapitres .ch-t { font: 600 15px/1.3 var(--texte); font-variant-numeric: tabular-nums; color: var(--gris); }
.chapitres .ch-lieu { font: 400 18px/1.2 var(--titre); letter-spacing: -.02em; }
.chapitres .ch-q { font-size: 17px; line-height: 1.35; }
.chapitres li.actif button { border-left-color: var(--lave); background: #fff; }
.chapitres li.actif .ch-t { color: var(--lave); }

/* ---------- la colonne de droite ---------- */
.cote { display: grid; gap: 34px; position: sticky; top: 18px; }
.carte svg { display: block; width: 100%; height: auto; overflow: visible; }
.carte .ile { fill: #dff2ec; stroke: var(--nuit); stroke-width: 1.1; stroke-linejoin: round; }
.carte .trajet { fill: none; stroke: var(--lave); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.carte .route { fill: none; stroke: rgba(11, 28, 51, .22); stroke-width: 1.1; stroke-dasharray: 1.2 2.4; stroke-linecap: round; }
.carte .etape { cursor: pointer; }
.carte .etape .zone { fill: transparent; }
.carte .etape .point { fill: #fff; stroke: var(--nuit); stroke-width: 1; }
.carte .etape.fait .point { fill: var(--lave); stroke: var(--lave); }
.carte .etape.actif .point { fill: #fff; stroke: var(--lave); stroke-width: 1.8; }
.carte .etape:hover .point, .carte .etape:focus-visible .point { stroke-width: 2.4; }
.carte .etape:focus-visible { outline: none; }
.carte .ici-halo { fill: rgba(255, 74, 23, .22); }
.carte .ici { fill: var(--lave); stroke: #fff; stroke-width: 1.2; }
.tour-etape { margin-top: 10px; font-size: 16px; line-height: 1.35; min-height: 2.7em; }
.tour-etape b { font: 400 20px/1.15 var(--titre); letter-spacing: -.02em; display: block; }

.autre { display: grid; grid-template-columns: 136px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--nuit); padding: 8px 6px; border-radius: 14px; margin: 0 -6px; }
.autre:hover { background: #fff; }
.autre img { width: 136px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; background: var(--nuit); }
.autre-titre { font: 600 16px/1.25 var(--texte); }
.autre-duree { color: var(--gris); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- le partage ---------- */
.partage { border: 0; border-radius: 22px; padding: 26px 26px 24px; width: min(560px, calc(100vw - 28px)); color: var(--nuit); box-shadow: var(--ombre); }
.partage::backdrop { background: rgba(11, 28, 51, .55); }
.partage h2 { font: 400 26px/1.1 var(--titre); letter-spacing: -.03em; margin-bottom: 16px; }
.partage h3 { font: 600 16px/1.2 var(--texte); margin: 22px 0 8px; }
.fermer { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; }
.fermer:hover { background: var(--voile); }
.lien { display: flex; gap: 8px; align-items: stretch; }
.lien input, .lien textarea { flex: 1; min-width: 0; border: 2px solid var(--trait); border-radius: 14px; padding: 10px 12px; font: 500 15px/1.35 var(--texte); background: #f6f8f9; resize: none; }
.lien .action { white-space: nowrap; align-self: flex-start; }
.depuis { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 500; }
.depuis input { width: 20px; height: 20px; accent-color: var(--lave); }
.prive { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff4d6; font-size: 15px; line-height: 1.35; }
.reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.reseaux a, .reseaux button { border: 2px solid var(--nuit); background: #fff; color: var(--nuit); border-radius: 40px; padding: 8px 15px; font: 600 15px/1 var(--texte); text-decoration: none; }
.reseaux a:hover, .reseaux button:hover { background: var(--nuit); color: #fff; }

.info { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--nuit); color: #fff; border-radius: 40px; padding: 11px 20px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 10; }
.info.vu { opacity: 1; transform: translate(-50%, 0); }

/* ---------- intégré dans un autre site (?integre) : le lecteur seul ---------- */
body.integre { background: #000; }
body.integre .tete, body.integre .fiche, body.integre .cote { display: none; }
body.integre .scene { display: block; padding: 0; max-width: none; }
body.integre .lecteur { border-radius: 0; box-shadow: none; aspect-ratio: auto; width: 100vw; height: 100vh; max-height: none; margin: 0; }

/* ---------- écrans étroits ---------- */
@media (max-width: 1080px) {
  .scene { grid-template-columns: 1fr; gap: 30px; }
  .cote { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .tour { max-width: 420px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .scene { padding-left: 0; padding-right: 0; }
  .lecteur { border-radius: 0; }
  .lecteur[data-format="v"] { aspect-ratio: 9 / 16; max-height: 78svh; margin: 0 auto; }
  .lecteur[data-format="v"]::before { opacity: 0; }
  .fiche, .cote { padding-left: 14px; padding-right: 14px; }
  .volume input { display: none; }
  .chapitre-courant { display: none; }
  .bouton { width: 38px; height: 38px; }
  #b-pip { display: none; }   /* sept boutons ne tiennent pas sur 340 px ; le téléphone a sa propre image dans l'image */
  .temps { padding: 0 4px; font-size: 14px; }
  .commandes { padding-left: 10px; padding-right: 10px; }
  .chapitres button { grid-template-columns: 48px 1fr; }
  .chapitres .ch-q { grid-column: 2; }
  .desc { font-size: 17px; }
  .lien { flex-direction: column; }
}
@media (max-width: 350px) {
  #b-suivant { display: none; }   /* la liste des étapes fait le même travail juste en dessous */
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01s !important; }
}