/* ============ Habillage d'écran : logo, menu, mentions ============
   Le chrome d'interface vit HORS du livre : il se dimensionne sur l'écran
   (vmin), pas sur le conteneur du livre (cqw). */

/* ---- Barre de menu (lecture audio, sommaire, plein écran, plus d'options) ---- */

/* Centrage SANS transform : un translate (ou transform/scale/rotate) sur la barre
   ferait d'elle le bloc conteneur de tout descendant `position: fixed` -> le lecteur
   complet mobile (fixed) s'ancrerait sur la barre au lieu du viewport (cassé en
   paysage, où la barre est une colonne étroite à droite). On centre donc via
   left/right:0 + justify-content, sans transform. */
.menu {
  position: absolute;
  bottom: 2.4vmin;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3.4vmin;
}

.menu-btn {
  width: 4.6vmin;
  height: 4.6vmin;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  opacity: 1;
}

.btn-play { background-image: url(../images/play-solid.svg); background-size: 48%; background-position: 58% 50%; }
.btn-play.is-playing { background-image: url(../images/pause-solid.svg); background-position: 50% 50%; }
.btn-tdm  { background-image: url(../images/sommaire-solid.svg); }
.btn-fs   { background-image: url(../images/expand-solid.svg); }
.btn-fs.is-fs { background-image: url(../images/compress-solid.svg); }
.btn-more { background-image: url(../images/ellipsis-v-solid.svg); }

/* ---- Sous-menu « plus d'options » : popover (desktop) / bottom sheet (mobile) ---- */

/* Tout le sous-menu se dimensionne sur SA font-size : items, libellés, icônes et
   interrupteurs sont en `em`. Un seul réglage de `font-size` par breakpoint et tout
   reste cohérent (fini le libellé qui ne suit pas la taille de l'item). */
.submenu {
  position: absolute;
  bottom: 9.5vmin;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  font-size: max(1.5vmin, 14px);
  gap: 0.15em;
  padding: 0.5em;
  background: #1b1b1b;
  border-radius: 0.9em;
  box-shadow: 0 0.6vmin 2.4vmin rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.submenu[hidden] { display: none; }

/* Items (boutons) ET rangées (réglages) = MÊME gabarit → cohérents : icône à gauche,
   libellé, contrôle éventuel, le tout centré verticalement (icône alignée au texte
   et aux interrupteurs). */
.submenu-item,
.submenu-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 100%;
  padding: 0.55em 0.8em;
  border-radius: 0.55em;
  font-size: 1em;
}

.submenu-item {
  border: 0;
  background: none;
  font-family: inherit;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.submenu-item:hover,
.submenu-item:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.submenu-label {
  flex: 1;
  font-family: inherit;
  font-weight: 200;
  font-size: 1em;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

/* Icône à gauche : taille relative à la police → scale cohérent à tous les breakpoints. */
.submenu-icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-go-first { background-image: url(../images/lucide-list-start.svg); }
.icon-go-last  { background-image: url(../images/lucide-list-end.svg); }
.icon-share    { background-image: url(../images/lucide-share-2.svg); }
.icon-autoplay { background-image: url(../images/lucide-list-music.svg); }
.icon-player   { background-image: url(../images/lucide-square-play.svg); }

/* Icône de volume du sous-menu : alignée sur les autres (em), pas sur les boutons du lecteur. */
.submenu .vol-icon {
  width: 1.3em;
  height: 1.3em;
  min-width: 0;
  min-height: 0;
  background-size: contain;
}

/* ---- Séparateur ---- */
.submenu-sep {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0.3em 0;
  background: rgba(255, 255, 255, 0.15);
}

/* ---- Interrupteur on/off (case restylée) ----
   Dimensions en `em` → suit la police. La ZONE D'ACTION reste large sans grossir le
   visuel : tout le <label> (.submenu-row) bascule l'interrupteur, donc le doigt a
   toute la rangée comme cible (même principe que les curseurs : visuel fin, cible large). */
.switch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  /* Les <input> n'héritent pas de la police : sans ça, les `em` ci-dessous se calent
     sur la police par défaut du contrôle (~13px) et l'interrupteur NE suivrait PAS la
     taille du sous-menu. On force l'héritage → il scale avec la font-size du sous-menu. */
  font-size: inherit;
  width: 2.6em;
  height: 1.5em;
  border-radius: 0.75em;
  background: #555;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.switch::before {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.switch:checked { background: #8a8a8a; }
.switch:checked::before { left: 1.25em; }

.switch:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Icône de volume (sous-menu ET bouton du lecteur) : l'image vient d'une classe de
   niveau posée par audio.js selon le volume courant —
   .vol-2 (60-100%) / .vol-1 (20-59%) / .vol-0 (1-19%, sans onde) / .vol-x (muet). */
.vol-icon {
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
}

.vol-2 { background-image: url(../images/lucide-volume-2.svg); }
.vol-1 { background-image: url(../images/lucide-volume-1.svg); }
.vol-0 { background-image: url(../images/lucide-volume.svg); }
.vol-x { background-image: url(../images/lucide-volume-x.svg); }

/* Dimensions communes aux boutons du lecteur et à l'icône de volume. */
.player-btn,
.vol-icon {
  width: 2.5vmin;
  min-width: 24px;
  height: 2.5vmin;
  min-height: 24px;
  background-size: 75%;
}

.volume-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #555;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.volume-slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- Lecteur audio complet (barre au-dessus du menu, activée par le réglage) ----
   À l'activation (body.has-player) : la barre apparaît, le bouton play minimal et
   le volume du sous-menu disparaissent, le menu descend un peu et le livre remonte
   pour dégager la place. Valeurs de respiration ajustables. */
/* Lecteur complet : groupe INLINE dans la barre de menu (affiché via has-player),
   dimensions ~25% sous celles des boutons du menu. */
.player {
  display: none;
  align-items: center;
  gap: 1vmin;
}

/* Groupes de contrôles. Sur desktop ils s'effacent (display:contents) → temps, seek
   et boutons restent des enfants flex DIRECTS de .player → mise en page inchangée.
   En mobile (blocs plus bas) ils deviennent de vraies boîtes → 2 rangées : la piste
   (temps + seek + temps) sur une ligne, le transport (préc / lecture / suiv) en dessous. */
.player-track,
.player-transport { display: contents; }

.player-btn {
  flex: none;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.player-btn:hover,
.player-btn:focus-visible { opacity: 1; }

.btn-prev { background-image: url(../images/lucide-skip-back.svg); }
.btn-next { background-image: url(../images/lucide-skip-forward.svg); }
.btn-pp   { background-image: url(../images/lucide-play.svg); }
.btn-pp.is-playing { background-image: url(../images/lucide-pause.svg); }

.player-time {
  flex: none;
  font-family: inherit;
  font-weight: 200;
  font-size: max(1.05vmin, 9px);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.player-seek { flex: none; width: 18vmin; }

/* Volume : bouton icône à gauche qui ouvre un curseur VERTICAL en popover. */
.player-vol-group {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
}

.player-vol-popup {
  position: absolute;
  bottom: calc(100% + 1.2vmin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding: 1.6vmin 1.2vmin;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 1vmin;
  box-shadow: 0 0.6vmin 2.4vmin rgba(0, 0, 0, 0.55);
  z-index: 110;
}

.player-vol-popup[hidden] { display: none; }

/* Curseur vertical : writing-mode rend l'<input range> vertical (min en bas). */
.player-vol {
  flex: none;
  writing-mode: vertical-rl;
  direction: rtl;
  width: 6px;
  height: 16vmin;
  min-height: 96px;
}

/* Activation : lecteur inline visible ; on masque le bouton play minimal (le
   lecteur a le sien) et le volume du sous-menu (déplacé dans le lecteur). */
body.has-player .player { display: flex; }
body.has-player .btn-play { display: none; }
body.has-player #vol-row { display: none; }

/* ============ Mobile : mise en page en FLUX (fini le chrome en overlay) ============
   Le livre et le menu deviennent des frères flex de <body> : le livre prend l'espace
   restant et réagit donc à la hauteur réelle du menu / lecteur — plus de marge fixe.
   .book-region = cellule flex (flex:1) + conteneur de taille → le livre tient en
   min(90cqw, 180cqh). loader / rotate-hint / submenu restent en overlay. */

/* Téléphone PORTRAIT : colonne — livre au-dessus, menu en bas.
   Scopé à `orientation: portrait` : sinon un téléphone EN PAYSAGE mais étroit
   (< 700px de large, ex. iPhone SE 667×375) recevrait aussi ce bloc et son
   sous-menu s'afficherait en feuille « portrait » par-dessus le paysage. */
@media (max-width: 700px) and (orientation: portrait) {
  body {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .book-region {
    flex: 1;
    min-width: 0;
    min-height: 0;
    container-type: size;
  }

  .book-stage {
    width: min(90cqw, 180cqh);
    margin: 0;
  }

  /* Menu en flux, en bas, sur toute la largeur. */
  .menu {
    position: static;
    flex-wrap: wrap;
    padding: 0 4vw calc(2.4vmin + env(safe-area-inset-bottom, 0px));
    row-gap: 2vmin;
  }

  /* Lecteur complet : barre pleine largeur SUR SA PROPRE LIGNE (flex-basis:100%),
     au-dessus des boutons. Rangée 1 = volume + piste (temps/seek/temps) ; rangée 2 =
     transport (forcé en dessous via flex-basis:100%). */
  body.has-player .player {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Rangée 1 : la piste prend toute la largeur restante (après le volume) et le
     seek s'étire dedans. Rangée 2 : transport seul, forcé en dessous. */
  body.has-player .player .player-track { flex: 1; }
  body.has-player .player .player-track .player-seek {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  body.has-player .player .player-transport { flex-basis: 100%; }
}

/* Téléphone PAYSAGE (peu de hauteur) : rangée — livre à gauche, menu = sidebar
   droite EN FLUX → le livre prend la largeur restante, jamais sous la sidebar.
   Le lecteur complet, trop large pour la colonne, reste une barre FIXE en bas ;
   on réserve sa hauteur (déterministe) sous le livre via le padding de .book-region. */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
  }

  .book-region {
    flex: 1;
    min-width: 0;
    min-height: 0;
    container-type: size;
  }

  .book-stage {
    width: min(90cqw, 180cqh);
    margin: 0;
  }

  .menu {
    position: static;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2.4vmin;
    padding-right: 1.5vmin;
    max-width: none;
  }

  /* Sous-menu : overlay à GAUCHE de la colonne, dégagé des boutons.
     Tailles internes (items, libellés, icônes, interrupteurs) héritées du gabarit
     `em` + de la `font-size` mobile commune → cohérent avec les autres breakpoints. */
  .submenu {
    left: auto;
    right: calc(3.5vmin + 44px);
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  /* Réserve déterministe sous le livre = hauteur d'UNE ligne de lecteur.
     Le terme en px = la hauteur d'un bouton du lecteur (cf. taille mobile) ; le
     5vmin est la respiration au-dessus, calée par Rasa sur iPhone 14 Pro Max. */
  body.has-player .book-region { padding-bottom: calc(44px + 5vmin); }

  /* La barre fixe se centre sur la ZONE DU LIVRE, pas sur le viewport : on
     réserve à droite la largeur de la colonne menu (bouton 44px + padding 1.5vmin)
     pour que la bande de centrage couvre 0 → bord gauche de la sidebar. */
  body.has-player .player {
    position: fixed;
    left: 0;
    right: calc(44px + 1.5vmin);
    bottom: 1vmin;
    justify-content: center;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 88vw;
    margin-inline: auto;
  }
  body.has-player .player .player-seek { width: 34vw; }
}

/* Habillage commun du lecteur complet en mobile : fond sombre arrondi + padding
   pour rester lisible par-dessus l'illustration (portrait : barre dans le menu ;
   paysage : barre fixe en bas). */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  /* Réglages MOBILE du sous-menu, définis UNE fois (portrait + paysage) → cohérent.
     - font-size 16px pilote tout (em).
     - le « pas trop serré » va dans le PADDING DES ITEMS (→ cible tactile ~44px, le
       vrai critère du doigt), pas seulement dans le gap/padding du panneau (qui ne fait
       qu'espacer sans agrandir la cible, et gonfle la hauteur → risque de rognage en
       paysage court type iPhone SE 375px). */
  .submenu {
    font-size: 16px;
    gap: 0.4em;
    padding: 0.8em;
  }

  .submenu-item,
  .submenu-row { padding: 0.7em 0.9em; }

  body.has-player .player {
    gap: 2.6vmin;
    row-gap: 1.4vmin;
    padding: 1.8vmin 2.6vmin calc(1.8vmin + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 20, 20, 0.92);
    border-radius: 1.6vmin;
    box-shadow: 0 0.6vmin 2.4vmin rgba(0, 0, 0, 0.5);
  }

  /* Cibles tactiles confortables (44px, conforme aux recommandations) pour les
     boutons du lecteur sur mobile — bien plus tapables que les 24px de bureau. */
  body.has-player .player .player-btn {
    width: 44px;
    height: 44px;
    /* La cible tactile reste 44px ; on rapetisse seulement le glyphe (image de
       fond) pour qu'il paraisse plus discret dans la grande zone cliquable. */
    background-size: 50%;
  }

  /* Espace supplémentaire à droite du bouton volume, pour le détacher du temps
     et du curseur de progression. */
  body.has-player .player .player-vol-group { margin-right: 1.4vmin; }

  /* Curseur de volume vertical : à 6px de large + pouce de 16px, il est intapable
     au doigt. On élargit la ZONE TACTILE (largeur de l'<input>) à 22px, on grossit le
     pouce et on allonge la course pour le dosage.
     La piste VISIBLE reste fine : au lieu de remplir les 22px de #555 (gros barreau),
     on peint un liseré central de 4px via un dégradé physique ; les 22px de l'<input>
     restent transparents MAIS cliquables → look fin sans réduire la cible. (Le dégradé
     est peint dans l'espace physique → pas de souci d'alignement en writing-mode vertical,
     contrairement au redimensionnement de la pseudo-piste.) */
  .player-vol {
    width: 22px;
    height: 26vmin;
    min-height: 150px;
    background: linear-gradient(to right,
      transparent calc(50% - 2px),
      #555 calc(50% - 2px), #555 calc(50% + 2px),
      transparent calc(50% + 2px));
  }

  /* Pouce du volume : réduit visuellement (18px) — la zone d'activation reste
     l'<input> entier (22px de large), donc la cible n'est pas diminuée. */
  .player-vol::-webkit-slider-thumb { width: 18px; height: 18px; }
  .player-vol::-moz-range-thumb { width: 18px; height: 18px; }

  /* Groupes matérialisés (display:contents → flex) : la piste (temps + seek + temps)
     reste soudée sur une ligne, le transport (préc / lecture / suiv) est son propre
     groupe (poussé en 2e rangée en portrait, voir bloc portrait). */
  body.has-player .player .player-track {
    display: flex;
    align-items: center;
    gap: 2vmin;
    min-width: 0;
  }

  body.has-player .player .player-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.6vmin;
  }

  /* Temps de piste plus lisibles (avant ~9px). */
  body.has-player .player .player-time { font-size: 13px; }

  /* Seek : même principe que le volume — piste VISIBLE fine (liseré central 4px via
     dégradé) mais ZONE TACTILE haute (22px) pour le doigt, sans grossir le visuel. */
  body.has-player .player .player-seek {
    height: 22px;
    background: linear-gradient(to bottom,
      transparent calc(50% - 2px),
      #555 calc(50% - 2px), #555 calc(50% + 2px),
      transparent calc(50% + 2px));
  }

  .player-seek::-webkit-slider-thumb { width: 16px; height: 16px; }
  .player-seek::-moz-range-thumb { width: 16px; height: 16px; }
}

/* Téléphones PORTRAIT : le sous-menu = panneau flottant JUSTE AU-DESSUS du menu
   (les boutons du menu restent visibles à l'ouverture). Portrait uniquement — en
   paysage étroit, c'est le bloc paysage (sous-menu à gauche de la colonne) qui s'applique. */
@media (max-width: 700px) and (orientation: portrait) {
  .submenu {
    left: 0;
    right: 0;
    /* Décollé du bas pile de la hauteur du menu (bouton 44px + son padding bas
       2.4vmin + safe-area) → posé juste au-dessus ; `margin` donne l'écart + les
       marges latérales. Suit la safe-area (indicateur d'accueil) sur vrai iPhone. */
    bottom: calc(44px + 2.4vmin + env(safe-area-inset-bottom, 0px));
    translate: none;
    /* gap/padding/font hérités du bloc mobile commun (cohérence) ; ici, seul le
       positionnement « panneau flottant » + l'habillage spécifiques portrait. */
    border-radius: 2vw;
    margin: 2vmin;
  }
}

/* ---- Indice « tournez votre appareil » : téléphone animé (rotate-phone.webp,
   linework blanc dessiné main sur fond transparent) + texte, centrés dans l'espace
   entre le bas du livre et le menu, en portrait mobile seulement (disparaît en
   paysage). reduced-motion → image fixe rotate-phone-static.webp (voir plus bas). ---- */
.rotate-hint { display: none; }

@media (orientation: portrait) and (max-width: 700px) {
  /* Placé DANS .book-region (conteneur du livre), pas en fixed sur le viewport :
     il occupe ainsi l'espace SOUS le livre et AU-DESSUS du menu/lecteur, et suit
     ces derniers quand ils changent de hauteur (lecteur complet activé). Le livre
     reste centré dans .book-region (l'indice est absolu, hors flux) ; on centre son
     contenu dans le bas de la zone via une boîte [top → bas] à contenu centré. */
  .book-region { position: relative; }

  .rotate-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2vmin;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 62%;
    z-index: 50;
    pointer-events: none;
    text-align: center;
    padding: 0 6vw;
  }

  .rotate-hint-img {
    display: block;
    width: 45vmin;
    max-width: 256px;
    height: auto;
  }

  .rotate-hint-static { display: none; }

  .rotate-hint-text {
    margin: 0;
    font-family: inherit;
    font-weight: 200;
    font-size: max(2.5vw, 13px);
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.85;
  }
}

/* reduced-motion : on remplace le webp animé par l'image fixe du téléphone en
   PAYSAGE (rotate-phone-static.png = l'état cible). Le parent reste display:none
   hors portrait. */
@media (prefers-reduced-motion: reduce) {
  .rotate-hint-anim   { display: none; }
  .rotate-hint-static { display: block; }
}