/* dddur.com — mise en page (COM-02).
 * Grille verticale : 100vh puis 100dvh, trois lignes (entête / corps / pied).
 * Le cadre 16:9 est contraint par la hauteur disponible : jamais de
 * défilement horizontal de 320 à 1920 px ; le défilement vertical n'apparaît
 * qu'au zoom texte 200 % ou sur une hauteur plus faible.
 */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--fond);
  color: var(--encre);
}

.entete, .pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-3) var(--pas-5);
  padding: var(--pas-3) var(--pas-5);
}

.entete { border-bottom: 1px solid var(--trait); }
.pied {
  border-top: 1px solid var(--trait);
  font-size: .875rem;
  color: var(--encre-douce);
}
.pied a { color: var(--accent); }
.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-2) var(--pas-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.marque { display: inline-flex; align-items: center; }
.marque img { display: block; width: 132px; height: 33px; }

.corps {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pas-4);
  padding: var(--pas-4) var(--pas-5);
  min-height: 0;
}

/* Cadre 16:9 : la hauteur disponible commande la largeur. */
.signature {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 260px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-3);
  overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
  .signature { height: 56.25vw; max-height: calc(100dvh - 260px); }
}

/* Repli COM-02 : animation CSS du logotype (fichier self), 4 s. */
.signature-logo {
  width: 40%;
  max-width: 260px;
  height: auto;
  color: var(--accent);
  animation: signature-repli 4s var(--courbe-1) both;
}

@keyframes signature-repli {
  0%   { opacity: 0; transform: translateY(8%) scale(.94); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .signature-logo { animation: none; opacity: 1; }
}

/* Image de fin : seule image chargée par défaut (COM-04). */
.image-fin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.image-fin.cache { visibility: hidden; }

/* COM-04 et précision #16 : l'image de fin est masquée par CSS dès que la
   classe « lecture » est posée — le micro-script la pose dans <head>, avant le
   premier rendu, donc sans flash — et le reste après la fin naturelle, quand
   la vidéo demeure figée sur sa dernière image. La classe « signature-cache »
   est posée par le module de signature au moment où la vidéo est insérée. */
html.lecture .image-fin,
html.signature-cache .image-fin {
  visibility: hidden;
}

/* Vidéo (chemin teaser) : média décoratif, jamais focalisable. */
.signature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--fond-2);
}

@media (max-width: 480px) {
  .corps { padding: var(--pas-3); }
  .signature { max-height: calc(100dvh - 220px); }
  .pied, .entete { padding: var(--pas-3); }
}