/* Visuels : les formats et les pièces photo. Se pose sur tokens.css et slides.css.
   Un visuel est une .slide qui porte un format : <section class="slide format-carre">. */

/* ---------- Formats : le canevas, et une case qui divise sa largeur et sa hauteur ---------- */
.format-carre {
  aspect-ratio: 1;
  --canevas: 1080;
  --case: 120; /* 9 × 9 */
}
.format-portrait {
  aspect-ratio: 4 / 5;
  --canevas: 1080;
  --case: 135; /* 8 × 10 */
}
.format-story {
  aspect-ratio: 9 / 16;
  --canevas: 1080;
  --case: 120; /* 9 × 16 */
}
.format-paysage {
  aspect-ratio: 16 / 9;
  --canevas: 1600;
  --case: 100; /* 16 × 9 */
}
/* Story : le haut et le bas sont couverts par l'interface du réseau */
.format-story .plan {
  padding-block: calc(var(--u) * 260);
}
.format-story .pied {
  bottom: calc(var(--u) * 180);
}
.format-carre .plan,
.format-portrait .plan,
.format-story .plan {
  padding-inline: calc(var(--pas) * 0.75);
}
.format-carre .pied,
.format-portrait .pied,
.format-story .pied {
  left: calc(var(--pas) * 0.75);
  right: calc(var(--pas) * 0.75);
}

/* ---------- Photo plein cadre, sous un voile qui garde le texte lisible ---------- */
.v-fond {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center);
}
.v-voile {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to top, rgb(19 19 19 / 0.88) 0%, rgb(19 19 19 / 0.45) 45%, rgb(19 19 19 / 0.05) 80%);
}
.v-voile.haut {
  background: linear-gradient(to bottom, rgb(19 19 19 / 0.85) 0%, rgb(19 19 19 / 0.35) 50%, rgb(19 19 19 / 0) 85%);
}

/* ---------- Photo teintée : le noir et blanc passe dans une couleur de la charte ---------- */
.v-teinte {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--c, var(--accent));
}
.v-teinte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center);
  filter: grayscale(1) contrast(1.25) brightness(1.05);
  mix-blend-mode: multiply;
}

/* ---------- Photo posée sur le quadrillage : elle occupe un nombre entier de cases ---------- */
.v-vignette {
  position: absolute;
  z-index: -1;
  left: calc(var(--pas) * var(--x));
  top: calc(var(--pas) * var(--y));
  width: calc(var(--pas) * var(--l));
  height: calc(var(--pas) * var(--h));
  object-fit: cover;
  object-position: var(--cadrage, center);
}
/* Une case peut mordre sur la photo, comme un pixel qui s'allume dessus */
.plan .case.dessus {
  z-index: 0;
}

/* ---------- Photo dans son cadre : la recette de l'objet mis en avant ---------- */
.v-cadre {
  margin: 0;
  overflow: hidden;
  border: max(1.5px, var(--u) * 3) solid var(--trait);
  border-radius: calc(var(--u) * 24);
  box-shadow: calc(var(--u) * 14) calc(var(--u) * 14) 0 var(--teinte-ombre);
}
.v-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center);
}
.v-portrait {
  flex: none;
  width: calc(var(--u) * var(--taille, 140));
  height: calc(var(--u) * var(--taille, 140));
  object-fit: cover;
  border-radius: 50%;
  border: max(1.5px, var(--u) * 3) solid var(--trait);
}

/* ---------- Pièces de carrousel ---------- */
.v-numero {
  font-family: var(--police-choc);
  font-size: calc(var(--u) * 260);
  line-height: 0.85;
  color: var(--accent);
}
.v-suite {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--police-mono);
  font-size: calc(var(--u) * 32);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.v-suite svg {
  width: 1.4em;
  height: 1.4em;
}
.v-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: fit-content;
  padding: 0.7em 1.3em;
  font-size: calc(var(--u) * 40);
  font-weight: 600;
  color: var(--sur-accent);
  background: var(--accent);
  border-radius: calc(var(--u) * 24);
}
.v-bouton svg {
  width: 1.2em;
  height: 1.2em;
}
/* Titre en Anton pour une miniature vidéo */
.v-choc {
  font-family: var(--police-choc);
  font-size: calc(var(--u) * var(--taille, 170));
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.v-choc em {
  font-style: normal;
  color: var(--accent);
}
.v-choc mark {
  display: inline-block;
  padding: 0.04em 0.14em 0;
  line-height: 1;
  color: var(--sur-appoint);
  background: var(--appoint-1);
}