/* ==========================================================================
   IÉNA Capital — Design System
   08 · Images
   --------------------------------------------------------------------------
   Extension du système. Aucune règle des cinq feuilles du système n'est
   modifiée : cette feuille n'ajoute qu'un composant, et n'est chargée que par
   les pages qui portent des images.

   Parti pris : la photographie entre dans la charte, la charte ne s'adapte pas
   à la photographie.

     · La couleur est la règle, le monochrome une exception motivée. Les vues
       d'architecture et de mer portent leur lumière ; le portrait du fondateur
       passe en noir et blanc (.figure--mono), ce qui le range du côté du
       document plutôt que de la photographie d'entreprise.
     · Aucun cadre, aucune ombre, aucun angle arrondi. L'image est un aplat
       posé sur la grille, comme l'encart de risque.
     · Cadrages fixes, tirés de la grille éditoriale : panorama pour une bande
       pleine largeur, portrait pour une colonne d'index, 16:9 pour une note.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Figure
   -------------------------------------------------------------------------- */

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Le cadre porte le format : l'image ne peut donc pas faire sauter la mise en
   page pendant son chargement, même sans attributs width/height. */
.figure__frame {
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.figure__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}


/* --------------------------------------------------------------------------
   Recadrage — le fichier n'est jamais retouché, c'est le cadre qui décide de
   ce qu'il garde.

   Une photographie déposée telle quelle est découpée au format du cadre par
   object-fit. Ces classes disent QUELLE partie garder quand il faut couper :
   le haut pour un portrait (on coupe les jambes, pas la tête), le bas pour une
   marine (on garde la coque, on coupe le ciel). Changer un cadrage, c'est
   changer un mot dans le HTML, jamais rouvrir un logiciel de retouche.
   -------------------------------------------------------------------------- */

.focus-top    { --focus: center top; }
.focus-upper  { --focus: center 25%; }
.focus-center { --focus: center center; }
.focus-lower  { --focus: center 75%; }
.focus-bottom { --focus: center bottom; }

/* Formats — trois suffisent. */
.figure--panorama .figure__frame { aspect-ratio: 21 / 9; }
.figure--wide     .figure__frame { aspect-ratio: 16 / 9; }
.figure--portrait .figure__frame { aspect-ratio: 4 / 5; }

/* Document — schéma, graphique, tout ce qui porte de l'information plutôt
   qu'une atmosphère.  Ces images-là ne se recadrent jamais : un cadre imposé
   couperait les libellés des bords, et il le ferait en silence.  L'image
   décide de sa hauteur, le cadre suit.

   C'est le format que l'importeur pose sur les images des notes.  Le
   recadrage reste la règle pour la photographie, dans les pages du site. */
.figure--document .figure__frame {
  aspect-ratio: auto;
  background: transparent;
}

.figure--document .figure__frame img {
  height: auto;
  object-fit: contain;
}

/* Noir et blanc, à la demande.
   La couleur est la règle : une façade, une coque rouge, une lumière de fin de
   journée disent quelque chose que le gris ne dit pas. Le monochrome reste
   réservé au portrait : il le sort du registre de la photographie d'entreprise
   et le range du côté du document. */
.figure--mono .figure__frame img { filter: grayscale(100%) contrast(1.04); }

.figure__caption {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}


/* --------------------------------------------------------------------------
   Bande — image entre deux chapitres. Elle ne porte pas de filet : c'est le
   chapitre suivant qui ouvre le sien.
   -------------------------------------------------------------------------- */

.band { padding-bottom: var(--section-pad-bottom); }


/* --------------------------------------------------------------------------
   Fond perdu — l'image sort du conteneur de 1180px et du blanc de page pour
   occuper toute la largeur de la fenêtre.

   C'est le geste qui distingue un rapport annuel d'une brochure : le texte
   reste dans sa colonne étroite, l'image respire d'un bord à l'autre. Une
   image de 250px dans une colonne d'index fait vignette ; la même en fond
   perdu fait silence.
   -------------------------------------------------------------------------- */

.figure--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 100vw compte la barre de défilement : sans cela, une barre visible (Windows)
   provoquerait un débordement horizontal de quelques pixels. « clip » découpe
   sans créer de conteneur de défilement, contrairement à « hidden ». */
body {
  overflow-x: clip;
}


/* --------------------------------------------------------------------------
   Adaptation
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* Un panorama de 21:9 sur un écran de téléphone n'est plus qu'une bande :
     le cadrage se resserre pour garder de la présence. Le portrait, lui, garde
     son format : en une colonne il devient une pleine page, ce qui lui va. */
  .figure--bleed.figure--panorama .figure__frame { aspect-ratio: 16 / 9; }
}