/* ==========================================================================
   Rendu des images du theme
   ==========================================================================

   La maquette pose des <image-slot>, un element propre a son outil de revue.
   Le theme rend de vrais <img>, et les regles de la maquette qui dimensionnent
   ces emplacements ne s'y appliquent pas.

   Cette feuille est chargee apres bnd-site.css et ne la modifie jamais.
   ========================================================================== */

/* ---------- murs de logos ----------

   Un logo est une marque, pas une photographie : il a besoin d'air autour de
   lui. Sans marge interieure, object-fit:contain etire chaque visuel jusqu'aux
   bords de sa case, et le resultat depend alors entierement du blanc tournant
   que chaque marque a laisse dans son fichier. Les logos genereux (Lancia,
   Mercedes-Benz) respirent, les logos serres (Ixina, Opel, hansgrohe, Unilin)
   touchent le bord et paraissent deux fois plus gros.

   La marge interieure retablit une echelle commune : chaque logo dispose de la
   meme surface utile, quel que soit son fichier d'origine. */

.logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* La case fait 96 px de haut : il reste 52 px de logo, soit la proportion
     des marques qui se presentent deja bien dans la maquette. */
  padding: 22px 26px;
}

/* Le bandeau de confiance est plus bas (52 px) et deja espace par sa grille :
   la marge y est proportionnellement plus discrete. */
.logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px 10px;
}

@media (max-width: 900px) {
  /* En dessous de trois colonnes, les cases s'elargissent : la marge peut
     suivre sans que les logos ne deviennent minuscules. */
  .logo-cell img {
    padding: 20px 30px;
  }
}

@media (max-width: 520px) {
  .logo-cell img {
    padding: 18px 22px;
  }
}

/* ---------- visuels editoriaux ----------

   Portraits, cas clients et galerie : la maquette les cadre par des regles
   posees sur image-slot. Le <img> reprend le meme comportement. */

.m-photo img,
.case-media img,
.proof-media img,
.process-media img,
.hero-photo img,
.rs img,
.t-content img,
.iq-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}