/* Presentation : scenes plein ecran, chrome (compteur, barre, boutons) et tiroir de notes. */

html, body { height: 100%; }
body { font-size: clamp(15px, 1.35vw, 22px); overflow: hidden; }

.deck { position: relative; height: 100%; }
.scene { display: none; position: absolute; inset: 0; padding: 5vh 7vw 9vh; overflow: auto; }
.scene.is-active { display: grid; grid-template-rows: auto 1fr auto; gap: 3vh; animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene.is-active { animation: none; } }

.scene h1 { font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: 1.02; }
.scene h2 { font-size: clamp(1.9rem, 3.6vw, 3.6rem); max-width: 26ch; }
.scene .body { display: grid; gap: 1.1em; align-content: start; min-height: auto; }
.scene .g-svg:not(.g-donut) { max-height: 31vh; }
.scene .cols { gap: 3vw; }

/* Couverture */
.scene.cover.is-active { grid-template-rows: 1fr auto; align-content: center; }
.scene.cover header { align-self: center; }
.scene.cover h1 { max-width: 20ch; }
.scene.cover .logo { height: clamp(64px, 10vh, 110px); }
.scene.cover .lead { font-size: 1.2em; max-width: 52ch; }

@media (max-width: 900px) { .scene { padding: 4vh 16px 12vh; } }

/* Chrome */
.chrome { position: fixed; left: 0; right: 0; bottom: 0; padding: .6em 1.2em calc(.6em + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 1em; font-family: var(--mono); font-size: .72em; color: var(--ink-3); background: linear-gradient(to top, var(--bg) 60%, transparent); z-index: 3; }
.chrome .keys { display: flex; align-items: center; gap: .3em; }
.chrome #counter { margin-right: .5em; }
.chrome button, .btn { font: inherit; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: .25em .6em; cursor: pointer; }
.chrome button:hover, .btn:hover { color: var(--ink); border-color: var(--ink-2); }
#bar { position: fixed; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--pink), var(--purple)); transition: width .3s; z-index: 4; }

/* Tiroir des notes orateur */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 92vw); background: var(--surface); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .25s; padding: 1.4em 1.6em 2em; overflow: auto; z-index: 5; font-size: .92em; visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer h3 { font-family: var(--display); font-weight: 400; font-size: 1.6em; margin: 0 0 .6em; padding-right: 4em; }
.drawer p { color: var(--ink-2); }
.drawer .close { position: absolute; top: .9em; right: 1em; }
.notes { display: none; }

/* Sans JavaScript : toutes les scenes a la suite */
html:not(.js) body { overflow: auto; height: auto; }
html:not(.js) .deck { height: auto; }
html:not(.js) .scene { display: grid; grid-template-rows: auto auto auto; position: static; min-height: 100vh; border-bottom: 1px solid var(--line); }
html:not(.js) .chrome, html:not(.js) #bar { display: none; }

@page { size: A4 landscape; margin: 10mm; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  body { font-size: 12px; }
  .deck { height: auto; }
  .scene { display: grid !important; grid-template-rows: auto auto auto; align-content: start; position: static; height: 188mm; overflow: hidden; padding: 6mm 8mm; gap: 5mm; break-after: page; break-inside: avoid; animation: none; }
  .scene:last-child { break-after: auto; }
  .scene h1 { font-size: 42px; }
  .scene h2 { font-size: 30px; }
  .scene.cover { align-content: center; }
  .scene .g-svg:not(.g-donut) { max-height: 85mm; }
  .chrome, #bar, .drawer, .brand, details.donnees { display: none !important; }
  .kpi .num { font-size: 28px; }
}