@font-face { font-family: Inter; src: url('../assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('../assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Dango; src: url('../assets/fonts/dango.otf') format('opentype'); font-display: block; }
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main { height: 100%; display: grid; place-items: center; padding: 24px; }
#poster { display: block; background: #000; max-width: 100%; max-height: 100%; }

/* Les menus déroulants de la lib (Styles, Format, style de trame) sont posés dans le dossier, dont le corps coupe
   tout ce qui dépasse : la liste était rognée. Dossier ouvert : on laisse dépasser, après la fin de l'animation
   d'ouverture pour ne pas voir les lignes déborder pendant qu'il s'ouvre. */
.ssui-folder:not([data-ssui-collapsed]) .ssui-folder__body { animation: ssui-folder-open 0s linear .26s both; }
@keyframes ssui-folder-open { from { overflow: hidden; } to { overflow: visible; } }

/* chrono : icône posée à gauche de chaque curseur / potard */
.chrono-row { position: relative; }
.chrono-row .ssui-row__label { padding-left: 18px !important; }
.chrono-btn {
  all: unset; box-sizing: border-box; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 16px !important; height: 16px !important; display: grid; place-items: center; cursor: pointer;
  color: var(--ssui-color-text-3, #777); border-radius: 4px; transition: color .15s;
}
.chrono-btn:hover { color: var(--ssui-color-text, #fff); }
.chrono-btn:focus-visible { outline: 1px solid var(--ssui-color-accent, #f09526); }
.chrono-btn[data-on] { color: var(--ssui-color-accent, #f09526); animation: chrono-pulse 1.2s ease-in-out infinite; }
@keyframes chrono-pulse { 50% { opacity: .45; } }

/* Page publiée : 15 px partout. 15 autour de l'affiche, 15 entre l'affiche et la rangée de boutons, 15 sous la rangée et sur ses côtés.
   Le corps est fixé aux quatre bords de l'écran visible (pas de dvh) : 15 + affiche + 15 + 56 + 15 = toute la hauteur. L'affiche est calée
   en JS sur la boîte de <main>, au ratio du format : A4 sur grand écran, ratio de l'écran sur téléphone. La rangée a la largeur de l'affiche (--poster-w). Avec ?debug : le panneau, pas de boutons. */
#bar { display: none; }
body:not(.debug) { position: fixed; inset: 0; height: auto; display: flex; flex-direction: column; overflow: hidden; touch-action: manipulation; }
body:not(.debug) main { flex: 1 1 0; min-height: 0; height: auto; padding: 15px 15px 0; overflow: hidden; }
body:not(.debug) #bar { display: flex; align-items: center; gap: 15px; flex: none; width: var(--poster-w, calc(100% - 30px)); margin: 15px auto; }
#break {
  width: 100%; height: 56px;
  border: 0; border-radius: 999px; background: #fff; color: #000;
  font: 28px/1 Dango, "Arial Black", sans-serif; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* le rebond du relâchement est une animation WAAPI (main.js) : elle tourne sur le compositeur et ne saute pas
     quand le rendu de la nouvelle affiche occupe le thread principal. Ici : le retour de couleur seulement. */
  transition: background-color 200ms ease-out;
}
/* état pressé : le bouton s'enfonce et grisonne tant que le doigt est dessus. Entrée courte (80 ms, smooth-out). */
#break.pressed, #break:active {
  transform: scale(.9); background: #cfcfcf;
  transition: transform 80ms cubic-bezier(.22, 1, .36, 1), background-color 80ms ease-out;
}
/* boutons flottants sur l'affiche : télécharger en haut à gauche, imprimer en haut à droite. Contour blanc, fond transparent,
   Inter 14 px à -0,5 %. Sur téléphone : l'icône seule, carré de 32 px. */
#sheet { position: relative; }
#print, #download {
  position: absolute; top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border: 1px solid #fff; border-radius: 0; background: transparent; color: #fff;
  font: 400 14px/1 Inter, system-ui, sans-serif; letter-spacing: -0.005em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#print { right: 12px; }
#download { left: 12px; }
#print svg, #download svg { display: block; flex: none; }
#print:focus-visible, #download:focus-visible, #break:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body[data-busy] #print, body[data-busy] #download { opacity: .4; pointer-events: none; cursor: progress; }
@media (hover: hover) { #print:hover, #download:hover { background: rgba(255, 255, 255, .16); } }
body.phone #print, body.phone #download { width: 32px; padding: 0; }
body.phone #print span, body.phone #download span { display: none; }
body.debug #print, body.debug #download { display: none; }

/* feuille « télécharger » : modale au centre sur grand écran, bottom sheet sur téléphone. Inter.
   Mouvement : tokens Material 3 (m3.material.io/styles/motion/easing-and-duration). Entrée : emphasized decelerate, medium4 ;
   sortie : emphasized accelerate, short4 ; voile : standard. */
:root {
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-duration-short4: 200ms;
  --md-duration-medium4: 400ms;
}
#dl {
  padding: 0; border: 0; border-radius: 16px; background: #fff; color: #292929; overflow: hidden;
  width: min(400px, calc(100vw - 30px)); margin: auto; max-height: calc(100dvh - 30px);
  font: 400 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
  opacity: 0; transform: translateY(24px) scale(0.96);
  transition: opacity var(--md-duration-short4) var(--md-easing-emphasized-accelerate), transform var(--md-duration-short4) var(--md-easing-emphasized-accelerate);
}
#dl.open { opacity: 1; transform: none; transition-duration: var(--md-duration-medium4); transition-timing-function: var(--md-easing-emphasized-decelerate); }
#dl::backdrop { background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity var(--md-duration-short4) var(--md-easing-standard); }
#dl.open::backdrop { opacity: 1; transition-duration: var(--md-duration-medium4); }
.dl-body { padding: 8px 8px 8px; }
.dl-handle { display: none; width: 32px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: #d9d9d9; }
#dl h2 { margin: 0; padding: 16px 12px 20px; font: 500 20px/1.15 Inter, system-ui, sans-serif; letter-spacing: -0.005em; color: #292929; }
.dl-list { display: grid; gap: 8px; padding: 0 4px 4px; }
.dl-list[hidden], .dl-ready[hidden] { display: none; }
.dl-ready { display: grid; padding: 0 4px 4px; }
#dl-save {
  all: unset; box-sizing: border-box; display: block; width: 100%; height: 48px; border-radius: 999px; background: #292929; color: #fff;
  text-align: center; line-height: 48px; font: 500 14px/48px Inter, system-ui, sans-serif; letter-spacing: -0.005em; cursor: pointer;
  transition: transform 100ms var(--md-easing-standard), background-color var(--md-duration-short4) var(--md-easing-standard);
}
#dl-save:active { transform: scale(0.98); }
#dl-save:focus-visible { outline: 2px solid #292929; outline-offset: 3px; }
@media (hover: hover) { #dl-save:hover { background: #000; } }
.dl-list button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border: 1px solid #e4e4e4; border-radius: 8px; cursor: pointer; color: #292929; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--md-duration-short4) var(--md-easing-standard), border-color var(--md-duration-short4) var(--md-easing-standard), transform 100ms var(--md-easing-standard);
}
.dl-name { font-weight: 500; font-size: 14px; color: #292929; }
.dl-list svg { flex: none; color: #9e9e9e; }
@media (hover: hover) { .dl-list button:hover { background: #f7f7f7; border-color: #cfcfcf; } }
.dl-list button:active { background: #efefef; border-color: #cfcfcf; transform: scale(0.98); }
.dl-list button:focus-visible { outline: 2px solid #292929; outline-offset: -2px; }

body.phone #dl { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; border-radius: 16px 16px 0 0; transform: translateY(100%); opacity: 1; }
body.phone #dl.open { transform: none; }
body.phone .dl-handle { display: block; }
body.phone .dl-body { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { #dl, #dl::backdrop, .dl-list button { transition-duration: 1ms !important; } }
@media (prefers-reduced-motion: reduce) { #break { transition: none; } }