/* ============================================================================
   scene98.css — v1 — SOURCE DE VÉRITÉ UNIQUE du rendu de scène Fenêtre 98.
   ----------------------------------------------------------------------------
   Ce fichier contient TOUT le CSS nécessaire pour rejouer une scène
   sérialisée (serialiserScene) hors du studio : sur le blog, dans la
   galerie de l'outil, dans la pellicule, et dans les conteneurs d'export.

   Règle d'or : toute nouvelle animation, bordure, style de texte ou effet
   ajouté à l'outil s'écrit ICI, jamais dans le <style> de index.html.
   Le <style> de index.html ne contient plus que le chrome de l'éditeur
   (panneaux, palette, poignées, galerie, modales).

   Portée : tout est scopé sous .s98 (posé sur #stage, .g-stage, .pel-stage,
   le conteneur d'export offscreen, et le wrapper <Scene98> du blog).
   Les @keyframes sont globales (noms préfixés a- / l-, pas de collision).

   Copies synchronisées (jusqu'au lot 2, où l'outil rejoint le repo) :
   - fenetres-98/scene98.css            (outil local)
   - cleaning-my-life/public/studio/scene98.css  (blog)
   ========================================================================= */

/* ===== SCÈNE (conteneur de base) ===== */
.s98 {
  position: relative;
  overflow: hidden;
  background-color: #008080;
  background-size: cover;
  background-position: center;
}

/* ===== ÉLÉMENTS ===== */
.s98 .el { position: absolute; min-width: 40px; }
.s98 .el img, .s98 .el video { width: 100%; display: block; pointer-events: none; }

/* poignées d'édition : présentes dans le HTML sérialisé, invisibles hors
   édition (l'éditeur les réaffiche via .el.selected .handle) */
.s98 .handle { display: none; }

/* formes vectorielles */
.s98 svg.forme { width: 100%; height: auto; display: block; overflow: visible; }

/* ===== TEXTES ===== */
.s98 .texte-bd {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 34px; font-weight: bold; color: #fff; line-height: 1.1;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 3px 3px 0 #000;
  padding: 4px; min-width: 80px; cursor: text; white-space: pre-wrap;
  background-color: transparent;
}
.s98 .texte-bd.jaune, .s98 .texte-simple.jaune { color: #ffe600; }
.s98 .texte-bd.rouge, .s98 .texte-simple.rouge { color: #ff2222; }
.s98 .texte-bd.sans-contour { text-shadow: none; }

.s98 .texte-simple {
  font-family: Arial, sans-serif;
  font-size: 28px; color: #000; line-height: 1.25;
  padding: 4px; min-width: 80px; cursor: text; white-space: pre-wrap;
  background-color: transparent;
}
.s98 .texte-simple.avec-contour {
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 3px 3px 0 #000;
}

/* ===== BORDURES KITSCH ===== */
.s98 .b-polaroid { background: #fff; padding: 12px 12px 40px; box-shadow: 3px 4px 8px rgba(0,0,0,.45); }
.s98 .b-baroque { border: 14px solid; border-image: repeating-linear-gradient(45deg, #ffd700 0 6px, #b8860b 6px 12px) 14; }
.s98 .b-rainbow { border: 10px solid; border-image: linear-gradient(45deg, red, orange, yellow, lime, cyan, blue, magenta) 10; }
.s98 .b-win98 { border: 6px ridge #dfdfdf; background: #c0c0c0; padding: 5px; }
.s98 .b-neon { border: 4px solid #00ffff; box-shadow: 0 0 14px #00ffff, 0 0 30px #ff00ff; }
.s98 .b-timbre { background: #fff; padding: 8px; border: 8px dashed #ff69b4; }
.s98 .b-double { border: 12px double #ff1493; background: #fff0f7; padding: 4px; }
.s98 .b-coeur { border: 8px solid transparent; border-image: repeating-linear-gradient(90deg, #ff69b4 0 10px, #fff 10px 14px) 8; }

/* ===== ANIMATIONS (transitions PowerPoint) ===== */
@keyframes a-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-zoom { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes a-volgauche { from { transform: translateX(-150vw); } to { transform: translateX(0); } }
@keyframes a-volhaut { from { transform: translateY(-150vh); } to { transform: translateY(0); } }
@keyframes a-rotation { from { transform: rotate(-720deg) scale(0); } to { transform: rotate(0) scale(1); } }
@keyframes a-balayage { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes a-stores { 0% { clip-path: inset(0 0 100% 0); opacity: 0; } 100% { clip-path: inset(0); opacity: 1; } }

/* ===== ANIMATIONS EN BOUCLE ===== */
@keyframes l-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes l-derive { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(9px, -7px); } 50% { transform: translate(-7px, 7px); } 75% { transform: translate(7px, 9px); } }
@keyframes l-balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes l-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes l-tourne { to { transform: rotate(360deg); } }
@keyframes l-scintille { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes l-glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-2px, -3px); } 80% { transform: translate(5px, 3px); } }

/* ===== ASCII ===== */
.s98 .ascii-art {
  font-family: "Courier New", monospace;
  white-space: pre; line-height: 1; font-size: 16px;
  color: #00ff66; margin: 0; user-select: none;
  background: transparent;
}
.s98 .ascii-calque {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  overflow: hidden;
}
.s98 .ascii-calque .ascii-art { width: 100%; height: 100%; }

/* ===== CALQUES DE DESSIN ===== */
.s98 .calque-dessin { pointer-events: none; }
.s98 .calque-dessin canvas { display: block; }
/* à la restauration hors studio, les canvas sont des <img data-calque> */
.s98 .calque-dessin img[data-calque] { display: block; }
.s98 .masque { visibility: hidden; }

/* ===== FENÊTRES 98 & PROGRESS (compléments à la charpente w98) ===== */
.s98 .window { box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.s98 progress {
  width: 100%; height: 18px; -webkit-appearance: none; appearance: none;
  background: #fff; border: none; padding: 2px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.s98 progress::-webkit-progress-bar { background: #fff; }
.s98 progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, navy 0 10px, #fff 10px 12px); }
.s98 progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, navy 0 10px, #fff 10px 12px); }

/* ============================================================================
   CONTEXTE PUBLIÉ (.s98-pub, posé par le blog — jamais par l'éditeur)
   ========================================================================= */

/* neutralise l'édition dans une scène publiée */
.s98-pub .el { outline: none !important; }
.s98-pub [contenteditable] { cursor: default; }
.s98-pub .texte-bd, .s98-pub .texte-simple { cursor: default; }

/* accessibilité : l'utilisateur demande moins de mouvement → scène figée
   (le poster reste l'image de référence). Scopé .s98-pub pour ne jamais
   couper l'aperçu des animations dans le studio. */
@media (prefers-reduced-motion: reduce) {
  .s98-pub, .s98-pub * { animation: none !important; transition: none !important; }
}

/* économie CPU : le lecteur (Scene98Player) pose .s98-pause hors viewport */
.s98-pause, .s98-pause * { animation-play-state: paused !important; }

/* ===== WRAPPER <Scene98> (blog uniquement) ===== */
.s98-figure { margin: 0; content-visibility: auto; }
.s98-fit {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  /* aspect-ratio et --s98-dw posés inline par le composant */
}
.s98-view {
  position: absolute; left: 0; top: 0;
  transform-origin: top left;
  /* échelle : conteneur / largeur d'affichage native.
     --s98-scale (nombre) est posé par ResizeObserver ; à défaut, la
     division typée de calc() fait le même travail en CSS pur. */
  transform: scale(var(--s98-scale, calc(100cqw / (var(--s98-dw) * 1px))));
}
.s98-view .s98-els { display: contents; }
.s98-paint {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}