/* ============================================================
   LES LOGOS DES MEDIAS DANS LES LIGNES DE PRESSE
   Ecrit le 09/11/2026, pour maisons.html uniquement.

   Pourquoi cette feuille existe : les cinq logos de medias vivaient dans
   le bloc #presse de l'accueil, remplace le 09/11 par #partenaires, qui
   n'affiche que les quatre marques. Les fichiers etaient donc cites nulle
   part et la presse ne sortait plus qu'en noms ecrits.

   Les logos reprennent le patron deja tranche dans partenaires.css : on ne
   FILTRE pas un logo tiers, on l'assume sur une tuile claire. Un filtre
   abime les lettrages fins, et ce sont des marques qui ne nous appartiennent
   pas.

   Difference assumee avec partenaires.css : pas de mix-blend-mode multiply
   ici. Le multiply y sert a fondre le fond blanc que portent les fichiers
   partenaires. Mesure du 09/11 sur les cinq fichiers medias : aucun ne
   porte de fond blanc. L'Hotellerie et Gault&Millau sont transparents, Le
   Chef est une plaque sombre ajouree, RTL et BFM portent leur propre plaque
   de couleur. Le multiply n'y gagnerait rien et assombrirait le rouge de
   RTL et le bleu de BFM.

   object-fit: contain et jamais cover : un logo recadre est un logo
   deforme.
   ============================================================ */

/* La ligne devient le repere du nom passe hors de l'ecran. */
.presse-row--logo { position: relative; }

/* Le nom du media reste dans le document, pour les lecteurs d'ecran et pour
   l'indexation : c'est le logo qui le remplace a l'oeil, pas dans le texte.
   Hors flux, donc il ne consomme aucune colonne de la grille. */
.presse-row--logo .presse-media-name {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La tuile epouse son logo au lieu de remplir la colonne : a hauteur egale,
   un lettrage large et une marque carree n'ont pas la meme largeur, et des
   tuiles de largeur identique feraient flotter les carrees dans le vide. */
.presse-media-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  /* Hauteur figee, et c'est volontaire : mesure du 09/11, en laissant chaque
     tuile se dimensionner sur son logo, les lignes tombaient a 115px pour Le
     Chef et 124px pour RTL. Une hauteur commune rend le rythme des lignes
     regulier, et chaque logo occupe simplement plus ou moins sa tuile. */
  block-size: clamp(2.5rem, 4vw, 3.1rem);
  max-inline-size: 100%;
  padding-inline: 0.6rem;
  border-radius: 0.3rem;
  background: rgba(240, 234, 223, 0.94);
  opacity: 0.8;
  transition: opacity 0.35s var(--ease);
}

/* Les deux dimensions restent auto et les deux bornes s'appliquent : c'est ce
   qui garantit qu'aucun lettrage large ne deborde de sa colonne, Gault&Millau
   faisant 7,1 fois plus large que haut.

   La borne verticale est un pourcentage de la tuile, dont la hauteur est
   definie juste au-dessus : les lettrages nus en remplissent un peu plus de la
   moitie, ce qui leur laisse l'air qu'un logo pose demande.

   La borne horizontale est en rem et NON en pourcentage. Mesure du 09/11 :
   avec max-inline-size: 100%, Gault&Millau rendait 0x0. La borne dependait de
   la largeur de la tuile, qui epouse son logo, qui dependait de la borne : une
   boucle, que les quatre autres logos resolvaient par leur taille intrinseque
   et que ce SVG, seul a ne pas declarer la sienne, resolvait a zero. La borne
   en rem n'a pas de boucle a resoudre, quel que soit le fichier. */
.presse-media-logo img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 8.5rem;
  max-block-size: 58%;
  object-fit: contain;
}

/* RTL et BFM enferment leur lettrage dans une plaque de couleur : a la
   hauteur des lettrages nus, leurs lettres tombent deux fois plus petites.
   Leur plaque remplit donc presque toute la tuile, pour un poids optique egal. */
.presse-media-logo--plaque img {
  max-block-size: 88%;
}

@media (hover: hover) {
  .presse-row--logo:hover .presse-media-logo,
  .presse-row--logo:focus-visible .presse-media-logo { opacity: 1; }
}

/* --- Telephone et tablette -------------------------------------------
   Sous 820px, pages.css passe la ligne en colonne unique : la tuile se
   retrouve au-dessus du titre. Sa largeur n'est plus bornee par une colonne
   de 230px mais par toute la largeur du contenu, d'ou la borne explicite.
   Sans elle, Gault&Millau s'etalerait sur toute la ligne. */
@media (max-width: 820px) {
  .presse-media-logo {
    max-inline-size: 11.5rem;
    opacity: 1;
  }

  .presse-media-logo { block-size: clamp(2.2rem, 7vw, 2.8rem); }
}