/* Version mobile des diaporamas.
   Chargée en dernier par comprendre/index.html et par comparer/index.html.

   Deux corrections :

   1. La navigation par chapitre était inaccessible sur téléphone. `deck.css`
      masque `.act-nav` en portrait. Un bouton et une feuille de chapitres la
      remplacent, construits par `deck-mobile.js`.
   2. Les commandes mesuraient 38 par 38 pixels, sous les 44 par 44 attendus
      d'une cible tactile.

   Plus les panneaux de notes et d'aide, qui débordaient sous 560 pixels.

   Le message « tournez votre appareil » disparaît : le portrait n'est plus un
   pis-aller à contourner.

   Note pour la suite. Un « débordement de 7 pixels » de la diapositive avait
   d'abord été signalé. C'était une erreur de mesure : le panneau d'aperçu
   n'avance pas les animations et fige la première image, donc la diapositive
   restait à `scale(1.018)`, l'état de départ de son animation d'entrée. Sur un
   appareil réel l'animation se termine en 0,42 s et la scène est en
   `overflow: hidden`. Il n'y a rien à corriger de ce côté. */

/* ------------------------------------------------------------------ *
 * 1. Bouton des chapitres
 * ------------------------------------------------------------------ */

.chapters-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.chapters-button:hover,
.chapters-button:focus-visible {
  outline: none;
  background: rgba(100, 238, 227, .17);
  color: var(--aqua, #64eee3);
}

.chapters-button[aria-expanded="true"] {
  background: rgba(100, 238, 227, .22);
  color: var(--aqua, #64eee3);
}

/* Le bouton n'est masqué que sur un écran large ET pointé à la souris, où la
   barre des chapitres du haut est visible et confortable à viser.

   Il reste donc disponible sur tout écran tactile, y compris un téléphone en
   paysage : dans ce cas la barre du haut réapparaît, mais ses repères mesurent
   3 pixels de haut, ce qui est injouable au doigt. Le bouton offre une cible de
   44 par 44 dans tous les cas. */
@media (min-width: 761px) and (min-aspect-ratio: 1/1) and (pointer: fine) {
  .chapters-button { display: none; }
}

/* ------------------------------------------------------------------ *
 * 2. Feuille des chapitres
 * ------------------------------------------------------------------ */

/* L'attribut hidden doit l'emporter sur les display declares plus bas.

   Sans cette regle, `.chapters-sheet { display: flex }` bat le `display: none`
   que le navigateur applique a [hidden] : un selecteur de classe est plus
   specifique qu'un selecteur d'attribut de la feuille de style utilisateur.
   La feuille restait donc affichee en permanence, 508 px de haut sur un ecran
   de 720, et le bouton de fermeture semblait sans effet : il retirait bien
   l'attribut, mais rien ne changeait a l'ecran.

   Un seul defaut, deux symptomes : menu jamais replie, et croix sans effet.
   Distinct du defaut de `flex: none`, qui ecrasait l'entete de la feuille. */
.chapters-sheet[hidden],
.chapters-veil[hidden] {
  display: none;
}

.chapters-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(2, 8, 16, .62);
  backdrop-filter: blur(2px);
}

.chapters-sheet {
  position: fixed;
  z-index: 91;
  left: 50%;
  bottom: 0;
  width: min(560px, 100vw);
  max-height: min(74vh, 620px);
  display: flex;
  flex-direction: column;
  padding: 6px 0 max(14px, env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  color: #fff;
  background: #041019;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
}

/* `flex: none` est obligatoire. La feuille est un conteneur flex vertical avec
   une hauteur plafonnée, et `.chapters-list` est defilante sans pouvoir
   retrecir (voir la note sur `min-height` plus bas). Sans cette ligne, le flex
   compense en ecrasant l'entete : le bouton de fermeture tombe a quelques
   pixels de haut, deborde vers le haut de la feuille, et devient impossible a
   viser au doigt alors qu'il reste parfaitement fonctionnel au clic. */
.chapters-sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.chapters-sheet__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.chapters-sheet__close {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  font-size: 15px;
}

.chapters-sheet__close:hover,
.chapters-sheet__close:focus-visible {
  outline: none;
  background: rgba(100, 238, 227, .2);
  color: var(--aqua, #64eee3);
}

/* `min-height: 0` annule le `min-height: auto` par defaut des elements flex.
   Sans lui, une liste defilante de 54 chapitres refuse de descendre sous la
   hauteur de son contenu, et c'est l'entete qui absorbe la difference. */
.chapters-list {
  margin: 0;
  min-height: 0;
  padding: 6px 8px 2px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* En paysage sur telephone, la feuille ne doit pas depasser la hauteur.
   A garder apres `.chapters-sheet` : une media query n'ajoute pas de
   specificite, donc placee avant elle etait purement decorative. */
@media (max-height: 460px) {
  .chapters-sheet { max-height: 88vh; }
  .chapters-item { min-height: 44px; padding: 6px 12px; }
}

.chapters-item {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.chapters-item:hover,
.chapters-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .07);
}

.chapters-item__no {
  flex: none;
  min-width: 34px;
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.chapters-item__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.chapters-item.is-current {
  background: rgba(100, 238, 227, .12);
  box-shadow: inset 3px 0 0 var(--aqua, #64eee3);
}

.chapters-item.is-current .chapters-item__no,
.chapters-item.is-current .chapters-item__title {
  color: var(--aqua, #64eee3);
}

/* Le diaporama ne défile pas derrière la feuille ouverte. */
body.chapters-open { overflow: hidden; }

/* ------------------------------------------------------------------ *
 * 3. Corrections propres au portrait et au tactile
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* Cibles tactiles portées à 44 par 44. */
  .controls { gap: 4px; padding: 6px; }
  .controls button,
  .chapters-button { width: 44px; height: 44px; }
  .controls .notes-button { width: auto; min-height: 44px; }
  .counter { min-width: 62px; font-size: 12px; }

  /* Le portrait est pris en charge : plus de message invitant à tourner
     l'appareil. */
  .rotate-hint { display: none !important; }

  /* Le lien de retour reste au-dessus de la scène sans la chevaucher. */
  .site-return { min-height: 44px; }

  /* La version portrait doit se lire sans zoom. Le CSS 16:9 ramenait les
     tailles de texte a quelques pixels, puis la note chevauchait le titre. */
  .slide h1,
  .slide h2 {
    max-width: 100% !important;
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.06 !important;
  }
  .slide .act { font-size: 10px !important; letter-spacing: .08em; }
  .slide .kicker { font-size: 14px !important; line-height: 1.35; }
  .slide .micro { font-size: 9px !important; }

  .slide .content.bottom,
  .slide .content.bottom:has(.cmp-list),
  .slide .content.bottom:has(.title-line) {
    /* Reserve the complete note area at narrow widths. Percentage padding is
       based on the slide width, so the previous 34% left the title under the
       note on a 390 px viewport. */
    padding: 8% 6% 205px !important;
  }

  .speaker-note {
    left: 12px !important;
    right: 12px !important;
    bottom: 72px !important;
    max-height: 118px;
    overflow-y: auto;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(2, 8, 16, .76);
    color: rgba(255, 255, 255, .96);
    font-size: clamp(12px, 3.2vw, 13px) !important;
    line-height: 1.4 !important;
    text-shadow: none;
    backdrop-filter: blur(8px);
    overscroll-behavior: contain;
  }
}

/* Les panneaux de notes et d'aide occupaient une largeur fixe qui débordait
   sur les petits écrans. */
@media (max-width: 560px) {
  .notes-panel,
  .help-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 84px;
    max-height: 56vh;
    overflow-y: auto;
  }

  .chapters-sheet { border-radius: 16px 16px 0 0; }
  .chapters-item__title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapters-veil { backdrop-filter: none; }
}


/* Appel a l action final des diaporamas.
   La classe .deck-btn n avait aucune regle dans tout le depot : les deux liens
   de conversion s affichaient en bleu souligne du navigateur, sur fond marine,
   a 10 px de haut. C est le seul point de conversion des deux parcours. */
.deck-cta .deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.deck-cta .deck-btn.primary {
  border-color: #0d8f96;
  background: #0d8f96;
}
.deck-cta .deck-btn:hover,
.deck-cta .deck-btn:focus-visible { background: rgba(255, 255, 255, .16); }
.deck-cta .deck-btn.primary:hover,
.deck-cta .deck-btn.primary:focus-visible { background: #087b82; }