/* ══════════════════════════════════════════════════════════════════════
   La scène, et rien d'autre.

   Produit par outils/construire.py, ne pas modifier à la main.

   La maquette fait 1440 x 810 et la présentation les garde : chaque
   objet est posé à ses coordonnées d'origine, en pixels. Une seule
   transformation ramène l'ensemble à la fenêtre, ce qui ne change
   aucune proportion ni aucun rapport entre deux éléments.
   ══════════════════════════════════════════════════════════════════════ */

:root{ --scene-l: 1440; --scene-h: 810; }

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background:#0d1526; overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.vue{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

.deck{
  position:relative; flex:none;
  width:calc(var(--scene-l) * 1px);
  height:calc(var(--scene-h) * 1px);
  transform:scale(var(--echelle, 1));
  transform-origin:center center;
}

.slide{
  position:absolute; inset:0;
  width:calc(var(--scene-l) * 1px);
  height:calc(var(--scene-h) * 1px);
  overflow:hidden; background:#fff;
  opacity:0; visibility:hidden; transition:opacity .34s ease;
}
.slide.est-active{ opacity:1; visibility:visible; }

/* Pour les captures : sans cela l'outil photographie la page pendant son
   fondu, et le fond sombre du deck transparait en voile gris. */
html[data-fige] .slide{ transition:none !important; }

/* Tout objet de la maquette : posé à ses coordonnées, jamais dans un flux. */
.o{ position:absolute; margin:0; }

/* Un remplissage par image s'étire sur son cadre, comme dans la maquette. */
.o--img{ background-size:100% 100%; background-repeat:no-repeat; background-position:center; }
img.o{ object-fit:fill; }

/* Finger Paint porte un contour de sa propre couleur, qui epaissit le
   trait. C'est l'effet pose dans Canva sur la maquette, perdu a l'export :
   le fichier ne contient aucun contour de texte.

   L'epaisseur est exprimee en `em`, donc proportionnelle au corps : un
   titre a 56 points et une mention a 17 points gardent le meme aspect.
   `paint-order` peint le remplissage par-dessus le trait, sans quoi le
   contour mangerait l'interieur des lettres. */
:root{ --trace-epaisseur: .055em; }
[style*="--trace:1"]{
  -webkit-text-stroke: var(--trace-epaisseur) currentColor;
  paint-order: stroke fill;
}

/* Une forme dessinee : le SVG remplit la boite, le texte se pose dessus. */
.o--forme{ display:block; }
.o--svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.o--sur{ position:absolute; inset:0; display:flex; flex-direction:column; }
.o--sur p{ margin:0; }

/* Un cadre de texte : le texte s'y ancre en haut, au milieu ou en bas. */
.o--txt{ display:flex; flex-direction:column; }
.o--txt p{ margin:0; }

@media print{
  html, body{ overflow:visible; background:#fff; }
  .vue{ position:static; display:block; }
  .deck{ transform:none; }
  .slide{ position:relative; opacity:1 !important; visibility:visible !important;
          page-break-after:always; break-after:page; }
}