.lecteur-v2 {
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  background: #141c1c; color: var(--white-color);
  --lumiere: rgba(34,55,58,.25); --emotion: rgba(73,173,182,.16);
}
.lecteur-v2[data-mode="pages"] { touch-action:none; -webkit-tap-highlight-color:transparent; }

/* Couches narratives validées dans les laboratoires ciel et météo. */
.lecteur-v2 { --fond-page:#9aadbc; --encre-page:#182f2a; --coeur-intensite:0; background:var(--fond-page); color:var(--encre-page); transition:background-color 2.5s ease,color 2.5s ease; }
.lecteur-v2__fond { background:var(--fond-page); transition:background-color 2.5s ease; }
.lecteur-v2__lumiere { display:none; }
.lecteur-v2__ciel { inset:0 0 auto; height:65%; background:none!important; opacity:.8!important; overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 0,#000 15%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 0,#000 15%,transparent 100%); mask-composite:intersect; }
.lecteur-v2__ciel img,.lecteur-v2__ciel canvas { position:absolute; inset:0; width:100%; height:100%; }
.lecteur-v2__ciel img { object-fit:cover; object-position:center top; opacity:0; }
.lecteur-v2__ciel canvas { z-index:1; }
.lecteur-v2__decor { z-index:1; }
.lecteur-v2__texte { color:var(--encre-page); text-shadow:0 1px 9px color-mix(in srgb,var(--fond-page) 78%,transparent); transition:color 2.5s ease; }
.lecteur-v2__repere { color:var(--encre-page); text-shadow:0 1px 7px color-mix(in srgb,var(--fond-page) 82%,transparent); transition:color 2.5s ease; }
.lecteur-v2__repere strong { color:inherit; }
.lecteur-v2__repere > div { color:color-mix(in srgb,var(--encre-page) 70%,transparent); border-color:color-mix(in srgb,var(--encre-page) 22%,transparent); }
.lecteur-v2__ra { position:absolute; z-index:3; top:.7rem; left:.7rem; width:min(38vw,24rem); height:min(36vh,18rem); object-fit:contain; object-position:left top; pointer-events:none; opacity:0; transform:scale(.98); transition:opacity .7s ease,transform .7s ease; }
.lecteur-v2[data-ra="lecia"] .lecteur-v2__ra,.lecteur-v2[data-ra="active"] .lecteur-v2__ra,.lecteur-v2[data-ra="true"] .lecteur-v2__ra { opacity:.72; transform:scale(1); animation:lecteur-v2-ra-pulse 5s ease-in-out infinite; }
.lecteur-v2__coeur { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:var(--coeur-intensite); filter:opacity(1); background:radial-gradient(ellipse at center,transparent 24%,rgba(255,0,18,.16) 70%,rgba(255,0,18,.95) 100%); animation:lecteur-v2-coeur 4s ease-in-out infinite; }
.lecteur-v2__meteo { opacity:0; transition:opacity .42s ease; }
.lecteur-v2[data-meteo-visible]:not([data-meteo-arretee]) .lecteur-v2__meteo { opacity:1; }
.lecteur-v2__meteo iframe { width:100%; height:100%; border:0; background-color:transparent!important; color-scheme:normal; pointer-events:none; }
@keyframes lecteur-v2-ra-pulse { 50% { opacity:.56; } }
@keyframes lecteur-v2-coeur { 50% { filter:opacity(.42); } }
.lecteur-v2__fond, .lecteur-v2__lumiere, .lecteur-v2__ciel,
.lecteur-v2__decor, .lecteur-v2__emotion, .lecteur-v2__meteo { position: absolute; inset: 0; pointer-events: none; }
.lecteur-v2__fond { z-index:0; overflow:hidden; background:var(--fond-page); transition:background-color 2.5s ease; }
.lecteur-v2__lumiere { background: var(--lumiere); transition: background 700ms ease; }
.lecteur-v2__ciel { bottom:auto; background:none; opacity:.8; transition:opacity 700ms ease; }
.lecteur-v2__decor {
  top:48%; bottom:4.8rem; background:none; opacity:0;
  filter:brightness(1) saturate(1) hue-rotate(0deg);
  transition:opacity 850ms ease,filter 2.5s ease;
}
.lecteur-v2[data-moment="aube"] .lecteur-v2__decor { filter:brightness(.95) saturate(.96) sepia(.04) hue-rotate(-2deg); }
.lecteur-v2[data-moment="jour"] .lecteur-v2__decor { filter:brightness(1) saturate(1) hue-rotate(0deg); }
.lecteur-v2[data-moment="soir"] .lecteur-v2__decor { filter:brightness(.84) saturate(.9) sepia(.03) hue-rotate(3deg); }
.lecteur-v2[data-moment="nuit"] .lecteur-v2__decor { filter:brightness(.68) saturate(.82) contrast(1.02) hue-rotate(5deg); }
.lecteur-v2__emotion {
  z-index: 1; background: radial-gradient(ellipse at center, transparent 35%, var(--emotion) 100%);
  transition: background 700ms ease;
}
.lecteur-v2[data-moment="aube"] { --lumiere: rgba(177,101,23,.13); }
.lecteur-v2[data-moment="soir"] { --lumiere: rgba(70,42,44,.28); }
.lecteur-v2[data-moment="nuit"] { --lumiere: rgba(3,8,16,.58); }
.lecteur-v2[data-ciel*="brume"] .lecteur-v2__ciel { background: linear-gradient(to bottom, #708184, #415657 58%, transparent); opacity: .52; }
.lecteur-v2[data-ciel*="nuit"] .lecteur-v2__ciel { background: linear-gradient(to bottom, #07101b, #17252d 60%, transparent); }
.lecteur-v2[data-ciel*="aube"] .lecteur-v2__ciel { background: linear-gradient(to bottom, #765b4a, #395257 60%, transparent); }
.lecteur-v2[data-decor] .lecteur-v2__decor { background:none; opacity:0; }
.lecteur-v2[data-decor="havre-caux"] .lecteur-v2__decor {
  top:54%;
  background-image:url('../../stories/vdz/assets/decors/havre-caux-skyline-v2.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  opacity:.88;
}
.lecteur-v2[data-decor="zeph"] .lecteur-v2__decor {
  top:62%;
  background-image:url('../../stories/vdz/assets/decors/zeph-interieur-skyline-v1.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  opacity:.9;
}
.lecteur-v2[data-decor="overnaute"] .lecteur-v2__decor {
  top:54%;
  background-image:url('../../stories/vdz/assets/decors/havre-caux-skyline-v1.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  opacity:.88;
}
.lecteur-v2[data-decor="ilot-tech-paris"] .lecteur-v2__decor {
  top:54%;
  background-image:url('../../stories/vdz/assets/decors/paris-ilot-tech-skyline-v1.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  opacity:.9;
}
.lecteur-v2[data-decor="sexotherapie-tech"] .lecteur-v2__decor {
  top:54%;
  background-image:url('../../stories/sexotherapeute-ia/assets/decors/paris-ilot-tech-skyline-v1.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  opacity:.9;
}
.lecteur-v2[data-decor-transition] .lecteur-v2__decor { opacity:0; }

/* Le lecteur mobile occupe un viewport fermé : HUD et navigation restent visibles ensemble. */
.vue[data-vue="lecteur"] { height:100dvh; min-height:0; overflow:hidden; isolation:isolate; }
.vue[data-vue="lecteur"][data-active] { position:fixed; inset:0; height:auto; min-height:0; }
.vue[data-vue="lecteur"] > .hud { position:relative; flex:0 0 auto; z-index:30; }
.vue[data-vue="lecteur"] > #scene { flex:1 1 auto!important; min-height:0!important; overflow:hidden; }
.lecteur-v2[data-emotion="inquietude"] { --emotion: rgba(177,101,23,.28); }
.lecteur-v2[data-emotion="intimite"] { --emotion: rgba(73,173,182,.22); }
.lecteur-v2[data-emotion="emerveillement"] { --emotion: rgba(170,219,238,.2); }

.lecteur-v2__zone-texte { position:absolute; z-index:2; top:6rem; right:4rem; bottom:17rem; left:4rem; max-width:38rem; margin-inline:auto; overflow:hidden; }
.lecteur-v2__flux { position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:auto; overscroll-behavior:contain; touch-action:none; scrollbar-width:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.lecteur-v2__flux:focus:not(:focus-visible) { outline:none; }
.lecteur-v2__flux::-webkit-scrollbar { display: none; }
.lecteur-v2__flux:active { cursor: grabbing; }
.lecteur-v2__ecran { flex:0 0 100%; width:100%; height:100%; min-width:0; padding:0 1.2rem; overflow:hidden; contain:paint; scroll-snap-align:start; }
.lecteur-v2__texte { width:100%; height:100%; margin:0; overflow:hidden; font-family:var(--font-lecture); font-size:clamp(1.5rem,2.3vw,1.85rem); line-height:1.65; text-align:justify; text-align-last:left; hyphens:auto; overflow-wrap:break-word; text-wrap:pretty; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.lecteur-v2__texte > h1:first-child { display: none; }
.lecteur-v2__texte h1 { margin: 0 0 2rem; font-family: var(--font-chapo); font-size: clamp(2.3rem,6vw,3.4rem); line-height: 1.05; font-weight: 400; text-transform: uppercase; }
.lecteur-v2__texte p { margin: 0 0 1.35rem; }
.lecteur-v2__texte blockquote { margin: 0 0 1.4rem; padding-left: 1.2rem; border-left: 1px solid var(--blue-color-second); }
.lecteur-v2[data-mode="defilement"] .lecteur-v2__flux { display: block; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; touch-action:pan-y; overscroll-behavior-y:contain; cursor: auto; user-select: text; }
.lecteur-v2[data-mode="defilement"]::before { content:none; }
.lecteur-v2[data-mode="defilement"] .lecteur-v2__ecran { width:100%; height:auto; min-height:auto; padding:0; overflow:visible; }
.lecteur-v2[data-mode="defilement"] .lecteur-v2__texte { width:100%; height:auto; overflow:visible; }
.lecteur-v2[data-mode="defilement"] .lecteur-v2__ecran + .lecteur-v2__ecran { padding-top: 0; }
.lecteur-v2[data-mode="defilement"] .lecteur-v2__ecran:not(:first-child) h1 { display: none; }

.lecteur-v2__portrait { position: absolute; z-index: 4; top: 1.2rem; right: 1.4rem; width: 4.8rem; height: 4.8rem; padding: 0; overflow: hidden; border: 1px solid rgba(170,219,238,.45); border-radius: 50%; background: rgba(20,28,28,.88); box-shadow: 0 0 0 4px rgba(20,28,28,.42); color: var(--white-color); font: 500 1.8rem var(--font-titres); }
.lecteur-v2__repere { position: absolute; z-index: 6; top: 1.05rem; left: clamp(1.4rem,4vw,3.2rem); right: 7.3rem; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
.lecteur-v2__repere strong { display: block; overflow: hidden; color: var(--white-color); font: 400 clamp(1.1rem,2vw,1.45rem) var(--font-chapo); letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.lecteur-v2__repere > div { display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,3fr) 2px minmax(0,1fr); align-items:center; column-gap:.55rem; min-width:0; margin-top:.45rem; padding-top:.42rem; border-top:1px solid rgba(252,251,228,.2); color:rgba(252,251,228,.66); font:.74rem var(--font-hud); letter-spacing:.075em; text-transform:uppercase; }
.lecteur-v2__repere > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-v2__repere [data-repere-heure] { justify-self:start; text-align:left; }
.lecteur-v2__repere [data-repere-lieu] { width:100%; min-width:0; text-align:center; }
.lecteur-v2__repere [data-repere-meteo] { justify-self:end; text-align:right; }
.lecteur-v2__repere > div i { flex: 0 0 2px; width: 2px; height: 2px; border-radius: 50%; background: var(--blue-color-second); opacity: .75; }
.lecteur-v2__portrait img { width: 100%; height: 100%; object-fit: cover; }
.lecteur-v2__bulle { position: absolute; z-index: 6; top: 6.7rem; right: 1.4rem; width: min(25rem,calc(100% - 2.8rem)); padding: 1.2rem; border: 1px solid var(--filet-fort); background: rgba(20,28,28,.97); box-shadow: 0 1rem 3rem rgba(0,0,0,.32); }
.lecteur-v2__bulle strong, .lecteur-v2__bulle span { display: block; }
.lecteur-v2__bulle strong { font-family: var(--font-titres); font-size: 1.7rem; }
.lecteur-v2__bulle span { font: 1rem var(--font-hud); color: var(--blue-color-second); text-transform: uppercase; letter-spacing: .1em; }
.lecteur-v2__bulle p { margin: .7rem 0 0; color: var(--encre-douce); font-size: 1.3rem; }
.lecteur-v2__meteo { z-index: 5; overflow: hidden; }
.lecteur-v2[data-meteo="brume"] .lecteur-v2__meteo,
.lecteur-v2[data-meteo="vent"] .lecteur-v2__meteo { background:none; filter:none; animation:none; }
.lecteur-v2[data-meteo-arretee] .lecteur-v2__meteo { opacity: 0; animation-play-state: paused !important; }
@keyframes lecteur-v2-brume { to { transform: translateX(2%); opacity: .65; } }
@keyframes lecteur-v2-vent { to { background-position: -120px 30px; } }

.lecteur-v2__footer { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 4.8rem; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.4rem; border-top: 1px solid var(--hud-filet); background: rgba(20,28,28,.9); backdrop-filter: blur(10px); }
.lecteur-v2[data-qualite="adaptee"] .lecteur-v2__footer { backdrop-filter:blur(4px); }
.lecteur-v2[data-qualite="economie"] .lecteur-v2__footer { backdrop-filter:none; background:rgba(20,28,28,.96); }
.lecteur-v2[data-qualite="economie"] .lecteur-v2__texte { text-shadow:0 1px 4px color-mix(in srgb,var(--fond-page) 72%,transparent); }
.lecteur-v2[data-qualite="economie"] .lecteur-v2__decor { transition:opacity 600ms ease; }
.lecteur-v2__footer > button { width: 3rem; height: 3rem; border: 1px solid var(--hud-filet); color: var(--hud-encre); }
.lecteur-v2__progression { flex: 1; min-width: 0; }
.lecteur-v2__progression-ligne { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; color: var(--hud-encre); font: .85rem var(--font-hud); letter-spacing: .06em; text-transform: uppercase; }
.lecteur-v2__barre { height: 2px; background: var(--hud-filet); }
.lecteur-v2__barre i { display: block; width: 0; height: 100%; background: var(--blue-color-second); transition: width 180ms ease; }
.lecteur-v2__modes { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .4rem; color: var(--hud-encre); font: .82rem var(--font-hud); text-transform: uppercase; letter-spacing: .05em; }
.lecteur-v2__modes i { position: relative; width: 2.3rem; height: 1.15rem; border: 1px solid var(--hud-filet); border-radius: 1rem; background: rgba(252,251,228,.05); }
.lecteur-v2__modes i::after { content: ''; position: absolute; top: 2px; left: 2px; width: .75rem; height: .75rem; border-radius: 50%; background: var(--blue-color-second); transition: transform 180ms ease; }
.lecteur-v2__modes[data-mode="defilement"] i::after { transform: translateX(1.1rem); }
.lecteur-v2__modes span:first-child, .lecteur-v2__modes[data-mode="defilement"] span:last-child { color: var(--blue-color-second); }
.lecteur-v2__modes[data-mode="defilement"] span:first-child { color: var(--hud-encre); }
.lecteur-v2__meteo-commande { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem; color: var(--hud-encre); font: .82rem var(--font-hud); text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--hud-filet); }
.lecteur-v2__meteo-commande[aria-pressed="true"] { color: var(--blue-color-second); border-color: var(--blue-color-second); }
.lecteur-v2__attente, .lecteur-v2__erreur { margin: auto; font: 1.2rem var(--font-hud); color: var(--encre-douce); }

@media (max-width: 480px) {
  .lecteur-v2__modes { gap: .25rem; font-size: .68rem; padding-inline: .2rem; }
  .lecteur-v2__modes i { width: 1.9rem; }
  .lecteur-v2__modes[data-mode="defilement"] i::after { transform: translateX(.7rem); }
  .lecteur-v2__meteo-commande { padding: .3rem; }
  .lecteur-v2__meteo-commande [data-meteo-libelle] { display: none; }
  .lecteur-v2__repere { left: 1.2rem; right: 6.2rem; }
  .lecteur-v2__repere > div { column-gap:.32rem; font-size:.62rem; letter-spacing:.045em; }
  .lecteur-v2__repere [data-repere-lieu] { max-width: none; }
  .lecteur-v2__texte { max-width: 100%; }
  .lecteur-v2__portrait { width: 4.2rem; height: 4.2rem; }
}
@media (min-width:900px) { .vue[data-vue="lecteur"][data-active] { left:9.6rem; } }
@media (prefers-reduced-motion: reduce) { .lecteur-v2__meteo { animation: none !important; } }