/* Charlotte Bard — stories.css : les lives en stories (15/10/2026 ; 7 lives et corrections le 16/10/2026), après
   css/animations.css, avec js/stories.js.
   1. Les arches de « En live » ; 2. le lecteur <dialog id="lecteur-lives"> ; 3. le mouvement, seulement sous .anim
   et sans mouvement réduit : sans JS ou en mouvement réduit, tout est visible et statique. Couleurs de la carte. */

/* ---------- 1. Les arches ---------- */
.lives { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
/* id="live-N" : ancres stables des arches (JSON-LD, liens). Arrivée par l'ancre : l'arche, encore descendue de 22 px
   avant sa révélation, ne finit pas sous la barre de navigation. */
.live { min-width: 0; margin: 0; scroll-margin-top: 24px; }
.live-arche {
  position: relative; isolation: isolate; display: block; border-radius: 999px 999px 22px 22px;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.live-arche:focus-visible { outline-offset: 5px; }
.live-cadre, .lecteur-cadre {
  display: block; overflow: hidden; border-radius: inherit;
  background: linear-gradient(165deg, #FBF1EC, var(--corail-clair)); box-shadow: 0 26px 46px -28px rgba(71, 60, 56, .5);
}
.live-cadre { aspect-ratio: 4 / 5; }
/* Affiche 9:16 dans l'arche 4:5 : --cadrage (dans la page) choisit la hauteur gardée */
.live-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--cadrage, 30%); }
/* Liseré doré décalé, comme le cadre du portrait du héros */
.live-arche::after {
  content: ""; position: absolute; z-index: -1; inset: 10px -10px -10px 10px; pointer-events: none;
  border: 1.5px solid var(--or); border-radius: 999px 999px 24px 24px;
}
.live-rond, .lecteur-btn, .lecteur-fleche, .lecteur-etat {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--encre);
  background: rgba(255, 252, 248, .92); box-shadow: 0 0 0 1px rgba(201, 162, 122, .6), 0 10px 22px -10px rgba(71, 60, 56, .55);
}
.live-rond { position: absolute; left: 50%; bottom: 14px; width: 44px; height: 44px; margin-left: -22px; color: var(--action); }
.live-rond svg, .lecteur-etat svg { margin-left: 2px; }
.live-legende { margin: 22px 4px 0 0; font-size: .88rem; line-height: 1.35; color: var(--doux); }
.est-ouverte { visibility: hidden; } /* l'arche du live en cours est « montée » dans le lecteur */
/* Sous 1024 px, la galerie seule défile, bord à bord ; au-delà, une ligne de 6 dans la colonne de texte
   (1 140 px au plus). Live 5 retiré le 16/10/2026 à la demande de Tom. */
@media (max-width: 1023.98px) {
  .lives {
    grid-auto-flow: column; grid-auto-columns: min(62%, 300px); overflow: auto hidden; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 10px var(--gouttiere) 14px; scroll-padding-inline: var(--gouttiere);
    scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(181, 103, 91, .4) transparent;
  }
  .live { scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .lives {
    grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px;
  }
  .live-legende { margin-top: 20px; font-size: .84rem; }
}

/* ---------- 2. Le lecteur ---------- */
/* Pendant la lecture, la page derrière ne bouge pas (molette, clavier, doigt) ; la gouttière de la barre de
   défilement reste réservée : rien ne se décale. */
html.stories-ouvert { overflow: hidden; scrollbar-gutter: stable; }
/* Le body ne devient pas un conteneur de défilement : la barre collante (.nav) reste à l'écran. */
html.stories-ouvert body { overflow: visible; }
.lecteur {
  --scene-h: min(calc(100vh - 48px), 940px); --scene-w: calc(var(--scene-h) * 9 / 16); --demi-l: 50vw;
  /* width: 100vw : le lecteur couvre aussi la gouttière réservée de la barre de défilement */
  position: fixed; inset: 0; right: auto; width: 100vw; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; overflow: hidden; overscroll-behavior: contain; container-type: size; background: transparent; color: var(--encre);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lecteur:not([open]) { display: none; }
.lecteur::backdrop { background: transparent; }
.lecteur:focus { outline: none; }
/* Téléphone tenu droit : vidéo bord à bord */
@media (max-width: 599.98px) and (orientation: portrait) { .lecteur { --scene-w: 100vw; --scene-h: min(100vh, 177.78vw); } }
@media (orientation: landscape) and (max-height: 500px) { .lecteur { --scene-h: calc(100vh - 16px); } }
@supports (height: 1cqh) { /* la vraie taille du lecteur (barres du navigateur déduites) */
  .lecteur { --scene-h: min(calc(100cqh - 48px), 940px); --demi-l: 50cqw; }
  @media (max-width: 599.98px) and (orientation: portrait) { .lecteur { --scene-w: 100cqw; --scene-h: min(100cqh, 177.78cqw); } }
  @media (orientation: landscape) and (max-height: 500px) { .lecteur { --scene-h: calc(100cqh - 16px); } }
}
/* Fond : l'image du live, floue (24 px agrandis), sous un voile de papier */
.lecteur-fond { position: absolute; inset: 0; background: var(--papier) 50% 50% / cover no-repeat; touch-action: none; }
.lecteur-fond::after { content: ""; position: absolute; inset: 0; background: rgba(255, 252, 248, .55); }
/* La scène : la vidéo 9:16 centrée ; le liseré doré la borde sur grand écran */
.lecteur-scene, .lecteur-liseret {
  position: absolute; left: 50%; top: 50%; width: var(--scene-w); height: var(--scene-h);
  margin: calc(var(--scene-h) / -2) 0 0 calc(var(--scene-w) / -2);
}
.lecteur-scene { --rs: 18px; border-radius: var(--rs); transform-origin: 0 0; touch-action: none; cursor: pointer; }
.lecteur-liseret { translate: 14px 14px; border: 1.5px solid var(--or); border-radius: 22px; pointer-events: none; }
.lecteur-cadre { position: absolute; inset: 0; box-shadow: 0 40px 90px -40px rgba(71, 60, 56, .55); }
.lecteur-cadre video, .lecteur-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lecteur-affiche { opacity: 0; pointer-events: none; } /* couvre la vidéo jusqu'à sa première image */
.lecteur-affiche.visible { opacity: 1; }
/* En haut, sur une brume de papier : les barres dorées, Pause et Fermer */
.lecteur-haut {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: max(10px, env(safe-area-inset-top)) 10px 30px;
  border-radius: var(--rs) var(--rs) 0 0; background: linear-gradient(rgba(255, 252, 248, .66), rgba(255, 252, 248, 0)); pointer-events: none;
}
.lecteur-segments { display: flex; gap: 4px; padding: 0 2px; }
.lecteur-segments span { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(71, 60, 56, .18); }
.lecteur-segments i { display: block; height: 100%; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; }
.lecteur-boutons { display: flex; justify-content: space-between; margin-top: 10px; }
.lecteur-btn, .lecteur-fleche { cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.lecteur-btn { width: 44px; height: 44px; }
.lecteur-btn:hover, .lecteur-fleche:hover { background: #fff; color: var(--action); }
.lecteur-pause .i-lecture, .lecteur-pause[aria-pressed="true"] .i-pause { display: none; }
.lecteur-pause[aria-pressed="true"] .i-lecture { display: block; }
/* En bas, sous le pouce : la légende et « Demander une date » */
.lecteur-bas {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 12px;
  padding: 60px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 0 0 var(--rs) var(--rs);
  background: linear-gradient(rgba(255, 252, 248, 0), rgba(255, 252, 248, .7) 64%); pointer-events: none;
}
/* Centrée par translate, pas par la grille : changer de légende ne décale rien */
.lecteur-legende {
  justify-self: start; position: relative; left: 50%; translate: -50% 0; max-width: 100%; margin: 0;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 252, 248, .92); box-shadow: 0 0 0 1px rgba(201, 162, 122, .45);
  font-size: .9rem; line-height: 1.3; text-align: center;
}
.lecteur-legende:empty { visibility: hidden; }
.lecteur-cta { width: min(100%, 320px); min-height: 48px; pointer-events: auto; }
/* Au centre, en pause : le rond de lecture */
.lecteur-etat {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  color: var(--action); opacity: 0; transform: scale(.85); pointer-events: none;
}
.lecteur.en-pause .lecteur-etat { opacity: 1; transform: none; }
/* Flèches de part et d'autre de la vidéo */
.lecteur-fleche { position: absolute; z-index: 4; top: 50%; width: 52px; height: 52px; margin-top: -26px; }
.lecteur-precedent { left: calc(50% - var(--scene-w) / 2 - 80px); }
.lecteur-suivant { left: calc(50% + var(--scene-w) / 2 + 28px); }
.lecteur-fleche:disabled { opacity: .35; cursor: default; }
/* Au doigt, on touche la vidéo : Pause et flèches restent au clavier, visibles au focus */
@media (hover: none), (pointer: coarse), (max-width: 599.98px) {
  .lecteur-pause:not(:focus-visible), .lecteur-fleche:not(:focus-visible) { clip-path: inset(50%); pointer-events: none; }
  .lecteur-precedent { left: 8px; }
  .lecteur-suivant { left: auto; right: 8px; }
  .lecteur-liseret { display: none; }
}
/* Les 24 px du bord gauche restent au navigateur (geste retour de Safari) */
.lecteur-bord { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 24px; touch-action: auto; }
@media (hover: hover) and (pointer: fine) { .lecteur-bord { display: none; } }
.lecteur.glisse .lecteur-ui, .lecteur.se-ferme .lecteur-ui { opacity: 0; }
/* Carte de fin : le papier de la carte de visite, deux taches d'aquarelle */
.lecteur-fin {
  position: absolute; z-index: 5; inset: 0; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 40px 26px max(40px, env(safe-area-inset-bottom));
  border-radius: var(--rs); background: var(--papier); text-align: center; cursor: default;
}
.lecteur-fin[hidden] { display: none; }
.lecteur-fin::before, .lecteur-fin::after { content: ""; position: absolute; z-index: -1; background: 0 0 / contain no-repeat; }
.lecteur-fin::before { top: 0; right: 0; width: 74%; aspect-ratio: 680 / 520; background-image: url(../img/aquarelle-2.webp); background-position: 100% 0; }
.lecteur-fin::after { bottom: 0; left: 0; width: 66%; aspect-ratio: 720 / 560; background-image: url(../img/aquarelle-1.webp); transform: scaleY(-1); }
.lecteur-fin .logotype { --logo-taille: 3.2rem; margin-bottom: 10px; }
.lecteur-fin-phrase { margin: -6px 0 10px; font: italic 400 1.02rem/1.35 "Fraunces", "Fraunces Repli", Georgia, serif; color: var(--doux); }
.lecteur-fin-titre { margin: 0 0 8px; font: 500 1.65rem/1.2 "Fraunces", "Fraunces Repli", Georgia, serif; }
.lecteur-fin-titre:focus { outline: none; }
.lecteur-fin .btn { width: min(100%, 290px); min-height: 48px; }
.lecteur-fin .btn-fantome { background: rgba(255, 252, 248, .8); }
.lecteur-fin .btn-fantome:hover { background: var(--action); }
.lecteur.a-la-fin .lecteur-bas { visibility: hidden; }
/* Sur la carte de fin, « Fermer » reste au-dessus d'elle ; Pause et les barres en sortent (plus rien à lire) */
.lecteur.a-la-fin .lecteur-haut { z-index: 6; background: none; }
.lecteur.a-la-fin .lecteur-pause, .lecteur.a-la-fin .lecteur-segments { visibility: hidden; }
/* Fenêtre basse (téléphone à l'horizontale) : légende et bouton à droite de la vidéo, dans la place qui reste.
   À la souris, la flèche « Live suivant » occupe de +28 à +80 px : ils passent après elle. */
@media (orientation: landscape) and (max-height: 500px) {
  .lecteur-bas {
    --bas-x: 28px; left: calc(100% + var(--bas-x)); right: auto; top: 50%; bottom: auto;
    width: min(240px, var(--demi-l) - var(--scene-w) / 2 - var(--bas-x) - 16px);
    translate: 0 -50%; justify-items: start; padding: 0; background: none;
  }
  .lecteur-legende { left: 0; translate: none; }
  .lecteur-cta { padding-inline: 14px; } /* « Demander une date » tient sur une ligne dès 180 px */
  /* Carte de fin resserrée : tout tient dans 300 px de haut, rien n'est coupé ni caché sous « Fermer » */
  .lecteur-fin { gap: 8px; padding: 16px 20px; }
  .lecteur-fin .logotype { --logo-taille: 2.3rem; margin-bottom: 0; }
  .lecteur-fin-phrase { margin: -2px 0 2px; font-size: .92rem; }
  .lecteur-fin-titre { margin: 0 0 4px; font-size: 1.3rem; }
  .lecteur-fin .btn { min-height: 44px; padding: 10px 14px; }
}
@media (orientation: landscape) and (max-height: 500px) and (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .lecteur-bas { --bas-x: 96px; }
}
/* Au doigt (pas de flèches à côté de la vidéo) : la carte de fin s'élargit au-delà de la vidéo, « Fermer » suit son coin */
@media (orientation: landscape) and (max-height: 500px) and (hover: none),
       (orientation: landscape) and (max-height: 500px) and (pointer: coarse),
       (orientation: landscape) and (max-height: 500px) and (max-width: 599.98px) {
  .lecteur-fin, .lecteur.a-la-fin .lecteur-haut { left: 50%; right: auto; width: min(460px, 100vw - 32px); translate: -50% 0; }
  .lecteur-fin::before { width: 150px; } /* taches de la taille de la carte étroite : elles restent dans les coins, loin du texte */
  .lecteur-fin::after { width: 140px; }
}

/* ---------- 3. Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée des arches, cascade de 90 ms : elles montent, puis le liseré glisse, puis le rond */
  .anim .lives:not(.anim-vu) .live { opacity: 0; transform: translateY(22px); }
  .anim .lives:not(.anim-vu) .live-arche::after { opacity: 0; transform: translate(-10px, -10px); }
  .anim .lives:not(.anim-vu) .live-rond { opacity: 0; transform: scale(.4); }
  .anim .lives.anim-vu .live { transition: opacity .7s ease-out calc(var(--i, 0) * 90ms), transform .9s var(--courbe) calc(var(--i, 0) * 90ms); }
  .anim .lives.anim-vu .live-arche::after { transition: opacity .4s ease-out calc(var(--i, 0) * 90ms + 300ms), transform 1s var(--courbe) calc(var(--i, 0) * 90ms + 300ms); }
  .anim .lives.anim-vu .live-rond { transition: opacity .3s ease-out calc(var(--i, 0) * 90ms + 600ms), transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * 90ms + 600ms); }
  .anim .lives.anim-instant .live, .anim .lives.anim-instant .live-arche::after, .anim .lives.anim-instant .live-rond { transition: none; }
  .anim .revient .live-rond { animation: stories-rond .4s var(--courbe) .05s backwards; }
  /* Lecteur : l'habillage arrive après la vidéo et s'efface avant elle */
  .anim .lecteur-affiche:not(.visible) { transition: opacity .3s ease-out; }
  .anim .lecteur-etat { transition: opacity .2s ease-out, transform .25s var(--courbe); }
  .anim .lecteur.arrivee .lecteur-ui { animation: stories-ui .5s ease-out backwards; }
  .anim .lecteur.glisse .lecteur-ui, .anim .lecteur.se-ferme .lecteur-ui { transition: opacity .15s ease-out; }
}
@keyframes stories-rond { from { opacity: 0; transform: scale(.5); } }
@keyframes stories-ui { 0%, 45% { opacity: 0; } }
/* Impression : les arches entières, même jamais révélées */
@media print { .live, .live-arche::after, .live-rond { opacity: 1 !important; transform: none !important; } }