/* Mode présentation : le cours en diapositives, une par séparateur Craft.
   Voir app/ui/presentation.js. Les blocs gardent leur mise en forme de lecture
   (ils sont DÉPLACÉS dans .pres-diapo .blocks) ; on n'agrandit que l'échelle,
   pour la projection en classe. */

#presentation {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
#presentation[hidden] { display: none; }
/* La page de lecture, vidée le temps de la présentation, ne défile pas derrière. */
html.en-presentation, html.en-presentation body { overflow: hidden; }

/* La scène défile si une diapositive est plus haute que l'écran ; sinon la
   diapositive est centrée verticalement (`margin: auto` dans un flex). */
#pres-scene {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; outline: none;
  padding: clamp(18px, 4vh, 48px) clamp(16px, 5vw, 72px);
  padding-left: max(clamp(16px, 5vw, 72px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 5vw, 72px), env(safe-area-inset-right));
  overscroll-behavior: contain;
}
/* Un niveau = le cours, ou une carte ouverte dedans : il occupe la scène. */
.pres-niveau { flex: 1 0 auto; display: flex; flex-direction: column; }
.pres-diapo { margin: auto; width: 100%; max-width: min(1240px, 100%); overflow-wrap: break-word; }
.pres-diapo[hidden], .pres-niveau[hidden] { display: none; }

/* Échelle de projection : lisible du fond de la salle. */
.pres-diapo .blocks { font-size: clamp(18px, 1.55vw, 27px); line-height: 1.55; }
.pres-diapo .blocks h2 { font-size: 1.75em; margin: .2em 0 .5em; }
.pres-diapo .blocks h3 { font-size: 1.35em; margin: .6em 0 .4em; }
.pres-diapo .blocks h4 { font-size: 1.15em; }
.pres-diapo .blocks > :first-child { margin-top: 0; }
.pres-diapo .cours-header h1 { font-size: clamp(34px, 4.4vw, 64px); }
.pres-diapo .cours-header .cours-path { font-size: clamp(14px, 1.2vw, 19px); }
/* Un schéma tient dans l'écran, sans défilement. */
.pres-diapo figure.media img { max-height: 72vh; width: auto; }
.pres-diapo figure.media-photo img { max-height: 62vh; }

.pres-barre {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-top: 1px solid var(--border); background: var(--panel);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right));
}
.pres-espace { flex: 1; }
#pres-compteur { min-width: 70px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pres-btn {
  width: 44px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.pres-btn:hover:not(:disabled) { background: var(--panel-2); }
.pres-btn:active:not(:disabled) { transform: scale(.94); }
.pres-btn:disabled { opacity: .35; cursor: default; }
#pres-plein, #pres-fermer { font-size: 17px; }
/* Carte ouverte en sous-présentation : chemin de retour et titre de la carte. */
.pres-texte {
  height: 40px; max-width: 34vw; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border);
  background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pres-texte:hover { background: var(--panel-2); }
.pres-texte[hidden] { display: none; }
#pres-carte { min-width: 0; font-size: 14px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Dans la présentation, une carte se TOUCHE pour s'ouvrir (sous-présentation). */
.pres-diapo details.card-section > summary { cursor: pointer; }
@media (max-width: 540px) { #pres-carte { display: none; } .pres-texte { max-width: 42vw; } }
#pres-plein[hidden] { display: none; }

.pres-progression { flex: none; height: 3px; background: var(--hairline); }
#pres-avance { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .25s var(--ease); }

/* Plein écran : le fond du thème jusqu'au bord. */
#presentation:fullscreen { background: var(--bg); }
#presentation:-webkit-full-screen { background: var(--bg); width: 100%; height: 100%; }