/* ===========================================================================
   MOBY 2026 — EMPLACEMENTS DE VISUELS (regle 8.2 : ratio reserve, zero saut
   de mise en page au chargement).
   Chargee par `templates/base.html.twig` sur toutes les pages.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   EMPLACEMENTS D'IMAGES (regle 8.2 — ratio reserve, zero saut de mise en page)

   La maquette de reference ne fournit AUCUN visuel : chaque image est un
   emplacement reserve. `.media` porte le ratio exact prevu, `.media > img`
   s'y insere sans deformation, et `.media-ph` affiche l'emplacement vide
   tant que le chef de projet n'a pas fourni le visuel definitif.

   Usage :  <div class="media" style="--ratio:1280/853"> ... </div>
   Le visuel final se pose dans le meme conteneur :
            <img class="media-img" src="..." alt="..." width="1280" height="853">
   --------------------------------------------------------------------------- */
.media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 1280/853);
  overflow: hidden;
  background: var(--orange-tint);
}
.media > .media-img {
  display: block;
  width: 100%;
  height: 100%;
  /* La maquette utilise `object-fit:contain` partout : le visuel est affiche
     en entier, jamais recadre. Ne pas passer en `cover` sans decision du PM. */
  object-fit: contain;
}
.media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-4);
  text-align: center;
  color: #8a7466;
  background:
    repeating-linear-gradient(135deg, #ffffff00 0 12px, #f36b210d 12px 24px),
    var(--orange-tint);
}
.media-ph b {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
}
.media-ph span {
  font-size: 13px;
  line-height: 1.45;
  max-width: 32ch;
  color: #8a7466;
}

/* MORPHOSE a l apparition — demande du chef de projet du 2026-10-06, « comme la morphose
   de PowerPoint ». Contrairement au fondu, l element ne se contente pas d apparaitre : il se
   TRANSFORME. Il arrive legerement reduit et decale vers le bas, puis rejoint sa place et sa
   taille definitives. Le meme principe que l effet du heros, repris de la maquette de reference.

   L etat de depart est pose par `fade_in_controller.js`, JAMAIS par defaut : sans JavaScript,
   aucune de ces regles ne s applique et le visuel s affiche normalement. Mettre l etat reduit
   dans la feuille de style rendrait ces photos deformees chez qui bloque le JavaScript.

   `transform` et `opacity` sont les deux seules proprietes qu un navigateur anime sans
   recalculer la mise en page : le defilement reste fluide meme sur un telephone modeste. */
[data-fade="pret"] {
  opacity: 0;
  transform: scale(.88) translateY(26px);
}
[data-fade="pret"],
[data-fade="vu"] {
  transform-origin: center;
  /* Courbe qui part vite et s installe doucement : c est ce qui donne l impression d un objet
     qui se pose, plutot que d une image qui grandit mecaniquement. */
  transition: transform 1100ms cubic-bezier(.16, .84, .36, 1), opacity 700ms ease-out;
  will-change: transform, opacity;
}
[data-fade="vu"] {
  opacity: 1;
  transform: none;
}

/* Ceinture et bretelles : si le reglage systeme « reduire les animations » est actif, on annule
   l effet meme si le controleur a eu le temps de poser son attribut. */
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
}