/* ==========================================================================
   05 - Grilles et vignettes
   Lot 5. « garder un peu le principe des mosaïques », « il faut juste mettre
   le nom ».

   Règle de grille du design system :
     >= 1200px  4 colonnes
     992-1199   3
     768-991    2
     < 768      2, jamais 1
   Dernière ligne incomplète alignée à gauche, jamais centrée :
   « si c'est centré, ça va être décalé ».

   Les mosaïques sont montées à la main dans chaque page avec le widget
   e_image_hover_effects. Les classes exactes du plugin sont à relever sur le
   DOM avant de considérer ce fichier comme acquis :
     curl -s https://massignon.studiowpdev.com/biographie/figures/ \
       | grep -o 'class="[^"]*ihe[^"]*"' | sort -u
   ========================================================================== */

/* --- Grille générique ----------------------------------------------------- */

.lm-grid,
.elementor-widget-e_image_hover_effects .ihe-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lm-gap);
  justify-content: start;   /* dernière ligne alignée à gauche */
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1199px) {
  .lm-grid,
  .elementor-widget-e_image_hover_effects .ihe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .lm-grid,
  .elementor-widget-e_image_hover_effects .ihe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Jamais une seule colonne, même sur le plus petit écran. */
@media (max-width: 767px) {
  .lm-grid,
  .elementor-widget-e_image_hover_effects .ihe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* --- Repli quand le widget produit des colonnes Elementor plutôt qu'une
       grille CSS. À activer en ajoutant la classe lm-cols-4 sur la section
       depuis Elementor, ou en ciblant l'ID de la section ici. ------------- */

.lm-cols-4 > .elementor-container > .elementor-column,
.lm-cols-4 > .elementor-container > .elementor-row > .elementor-column {
  flex-basis: 25%;
  max-width: 25%;
}

@media (max-width: 1199px) {
  .lm-cols-4 > .elementor-container > .elementor-column,
  .lm-cols-4 > .elementor-container > .elementor-row > .elementor-column {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (max-width: 991px) {
  .lm-cols-4 > .elementor-container > .elementor-column,
  .lm-cols-4 > .elementor-container > .elementor-row > .elementor-column {
    flex-basis: 50%;
    max-width: 50%;
  }
}

/* --- La vignette ----------------------------------------------------------
   Maquette CategoryCard.tsx, variante « tile » : image carrée, puis le titre
   SOUS l'image, aligné à gauche. Rien d'autre. */

.lm-tile {
  display: flex;
  flex-direction: column;
  background: var(--lm-background);
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, box-shadow .3s ease;
}

a.lm-tile:hover,
a.lm-tile:focus-visible {
  border-color: var(--lm-primary);
  box-shadow: 0 6px 18px rgba(35, 29, 48, .10);
}

.lm-tile__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--lm-surface);
}

.lm-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

a.lm-tile:hover .lm-tile__media img {
  transform: scale(1.05);
}

.lm-tile__body {
  padding: .625rem .75rem;
}

.lm-tile__title {
  margin: 0;
  font-size: var(--lm-tile-title-size);
  line-height: 1.3;
  text-align: left;
  font-weight: 600;
  color: var(--lm-foreground);
  transition: color .3s ease;
}

a.lm-tile:hover .lm-tile__title {
  color: var(--lm-primary);
}

/* Vignette sans image : carte de texte, jamais un rectangle gris vide. */
.lm-tile--noimage .lm-tile__media { display: none; }

.lm-tile--noimage .lm-tile__body {
  padding: 1.25rem .75rem;
  border-left: 2px solid var(--lm-primary);
}

/* --- Nom sous l'image dans les mosaïques du plugin ------------------------ */

.elementor-widget-e_image_hover_effects .ihe-title,
.lm-grid figcaption {
  display: block;
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--lm-foreground);
  text-align: left;
}

/* --- Aucune surcouche colorée sur une photographie ------------------------
   Règle absolue du design system : le violet ne s'applique jamais à une
   photographie. Il est réservé à la typographie, aux filets, aux carrés et
   aux états actifs.

   Rappel : la teinte violette des vignettes de Figures est INCRUSTÉE DANS LES
   FICHIERS PNG. Elle ne se corrige pas ici. Interdit de tenter un
   filter: hue-rotate() / saturate() / grayscale() : cela dégrade toutes les
   photos et le résultat est pire que le problème. Les fichiers d'origine sont
   à demander à Bérengère. */

.elementor-widget-e_image_hover_effects .ihe-overlay,
.lm-grid .overlay {
  background: none !important;   /* surcharge un style inline du widget */
}

/* --- Bloc « Poursuivre la lecture » ---------------------------------------
   Validé par le client : « ça, c'est la vraie navigabilité, c'est très bien ». */

/* Marge basse ajoutée le 24/09/2026 : les vignettes touchaient le filet du
   pied de page (« décaler le liseret vers le bas »). */
.lm-keep-reading {
  max-width: var(--lm-container);
  margin: var(--lm-space-section) auto 0;
  padding: 2rem 1rem var(--lm-space-section);
  border-top: var(--lm-rule) solid var(--lm-border);
}

.lm-keep-reading__title {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--lm-primary);
  margin: 0 0 1.25rem;
}

/* ==========================================================================
   Lot 5 - La carte de vignette
   Écart n°2 du check du 11/09/2026.

   STRUCTURE RÉELLE du widget Image Hover Effects, relevée sur
   /biographie/figures/ :

     .elementor-widget-e_image_hover_effects
       .elementor-widget-container
         <a>
           .eihe-box.eihe-fade
             <img>                  l'image
             .eihe-caption          EN ABSOLU, par-dessus l'image
               .eihe-title-cover    le nom, en blanc

   Le nom est donc posé au centre de la photo, en blanc, sur des vignettes
   claires : il ne se lit pas. C'est contraire à la demande du client
   (« il faut juste mettre le nom ») et à la règle du design system qui
   interdit toute surcouche colorée sur une photographie.

   Cible mesurée sur la maquette : barre blanche SOUS l'image, hauteur 44px,
   padding 10px 12px, texte 16px en graisse 700 et en #231D30, aligné à
   gauche, carte bordée de 1px #E2E0EB.
   ========================================================================== */

/* La carte : bordure, angles droits, fond blanc. */
.elementor-widget-e_image_hover_effects .eihe-box {
  display: block;
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: 0;
  background: var(--lm-background);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.elementor-widget-e_image_hover_effects a:hover .eihe-box,
.elementor-widget-e_image_hover_effects a:focus-visible .eihe-box {
  border-color: var(--lm-primary);
  box-shadow: 0 6px 18px rgba(35, 29, 48, .10);
}

/* L'image occupe toute la largeur de la carte. */
.elementor-widget-e_image_hover_effects .eihe-box > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Le nom sort de la surimpression et passe DANS LE FLUX, sous l'image. */
.elementor-widget-e_image_hover_effects .eihe-caption {
  position: static !important;   /* posé en absolu par le widget */
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;   /* aucune surcouche sur une photographie */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block !important;
  padding: 10px 12px;
  text-align: left;
}

.elementor-widget-e_image_hover_effects .eihe-title-cover,
.elementor-widget-e_image_hover_effects .eihe-caption p {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lm-foreground);
  text-align: left;
  text-transform: none;
  background: none;
  transition: color .3s ease;
}

.elementor-widget-e_image_hover_effects a:hover .eihe-title-cover {
  color: var(--lm-primary);
}

/* Le widget anime l'image au survol : on garde le mouvement, mais rien qui
   colore la photographie. */
.elementor-widget-e_image_hover_effects .eihe-box::before,
.elementor-widget-e_image_hover_effects .eihe-box::after {
  background: none !important;
}

/* Le nom n'est pas dans `.eihe-title-cover` lui-même mais dans un <h3> qu'il
   contient, lequel garde la couleur blanche du widget : la barre paraissait
   vide. On cible donc le titre, et on aligne la boîte à gauche du bord de
   l'image plutôt qu'à 30px de retrait. */

.elementor-widget-e_image_hover_effects .eihe-title-cover {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}

.elementor-widget-e_image_hover_effects .eihe-caption h1,
.elementor-widget-e_image_hover_effects .eihe-caption h2,
.elementor-widget-e_image_hover_effects .eihe-caption h3,
.elementor-widget-e_image_hover_effects .eihe-caption h4,
.elementor-widget-e_image_hover_effects .eihe-caption p,
.elementor-widget-e_image_hover_effects .eihe-caption span {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lm-foreground);
  text-align: left;
  text-transform: none;
  background: none;
  text-shadow: none;
  border: 0;
}

.elementor-widget-e_image_hover_effects a:hover .eihe-caption h1,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h2,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h3,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h4 {
  color: var(--lm-primary);
}

/* Le titre garde la couleur, la taille et la graisse réglées DANS LE WIDGET,
   page par page : blanc, 23px, graisse 100. Ces réglages ont une spécificité
   qu'on ne peut battre qu'en codant en dur l'identifiant de chaque widget, sur
   des dizaines de mosaïques.

   !important est donc assumé, limité aux quatre propriétés du libellé, et à
   retirer le jour où les réglages seront nettoyés dans les pages. C'est le même
   arbitrage que pour la police du menu. */

.elementor-widget-e_image_hover_effects .eihe-caption h1,
.elementor-widget-e_image_hover_effects .eihe-caption h2,
.elementor-widget-e_image_hover_effects .eihe-caption h3,
.elementor-widget-e_image_hover_effects .eihe-caption h4,
.elementor-widget-e_image_hover_effects .eihe-caption p {
  color: var(--lm-foreground) !important;
  font-size: 16px !important;
  font-weight: 600 !important;   /* 700 jusqu'au 24/09/2026, « un peu moins gras » */
  text-align: left !important;
}

.elementor-widget-e_image_hover_effects a:hover .eihe-caption h1,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h2,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h3,
.elementor-widget-e_image_hover_effects a:hover .eihe-caption h4 {
  color: var(--lm-primary) !important;
}

/* --- Légendes de photos ------------------------------------------------------
   Demande du 24/09/2026 : même typo que les vignettes « Poursuivre la
   lecture ». Relevé : 161 widgets portent une légende, dans la DESCRIPTION du
   widget, titre vide ; les 170 vignettes de mosaïque portent leur libellé dans
   le TITRE, sans description. `> p:not(.eihe-title)` ne touche donc que les
   légendes, pas les mosaïques.

   La police est remise ici : la bascule de 01-typographie.css couvre
   `.eihe-title` mais pas la description, restée en « FUTURA LM », que le
   navigateur rendait en Arial faute de fichier.

   (0,3,1) en !important : bat les deux blocs !important ci-dessus, y compris
   celui des écrans étroits, plus bas. La taille suit le token des vignettes,
   mobile compris.

   Graisse 500, un cran sous les vignettes (600) : « un peu moins grasse »,
   retour du même jour. */
.elementor-widget-e_image_hover_effects .eihe-caption > p:not(.eihe-title) {
  font-family: var(--lm-font) !important;
  font-size: var(--lm-tile-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* --- Alignement et largeur des mosaïques -----------------------------------
   Relevé sur /biographie/figures/ : chaque section de mosaïque a CINQ colonnes,
   dont la première et la dernière sont vides et servent de marge. D'où le
   décalage mesuré de 223px entre le H1 (x=207) et la première vignette (x=430).

   On masque les colonnes vides et on donne 25% aux colonnes qui portent une
   vignette : la mosaïque prend la largeur d'une grille de quatre.

   CENTRÉE depuis le 24/09/2026, « centrer les éléments dans la page sur ce
   type de contenu ». Jusque-là calée à gauche, dernière rangée comprise, comme
   le voulait le design system. Mesuré sur /biographie/figures/amis/ en
   1440px : chaque section est une rangée de TROIS vignettes, 780px sur les
   1040 du conteneur, et laissait 260px vides à droite. La rangée incomplète
   de fin (une vignette) est centrée elle aussi. Une rangée pleine ne bouge
   pas ; une rangée qui mêle texte et photos non plus, la colonne de texte
   prenant l'espace libre (04-gabarit-pages.css, point 9).

   Le `:not(:has())` ne masque QUE les colonnes sans vignette, à l'intérieur
   d'une section de mosaïque : une colonne qui porterait un titre ou du texte
   n'est pas concernée. */

.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container {
  justify-content: center;
}

/* Vignettes de remplissage : carrés violets unis de l'ancien site, sans
   libellé ni lien (24/09/2026, « enlève les parties violettes qui ne servent
   à rien »). Repérées côté serveur, classe lm-filler (inc/corps-texte.php).
   La colonne part avec la vignette, sinon elle garderait ses 25% vides et
   décentrerait la rangée — mais seulement si elle ne porte rien d'autre. */
.elementor-widget-e_image_hover_effects.lm-filler {
  display: none !important;
}

.elementor-column:has(.lm-filler):not(:has(.elementor-widget:not(.lm-filler))) {
  display: none !important;
}

.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container > .elementor-column:not(:has(.elementor-widget-e_image_hover_effects)):empty,
.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container > .elementor-column:not(:has(.elementor-widget-e_image_hover_effects)):not(:has(.elementor-widget)) {
  display: none;
}

/* Les colonnes qui ne portent QU'UNE IMAGE, dans une rangée de mosaïque,
   prennent la largeur d'une vignette. Ajouté le 24/09/2026, « l'image est
   trop grosse ici », sur /idees-debats/idees-forces/vocation-courbe-de-vie/ :
   une photo légendée (colonne de 260px) à côté d'un portrait dans une colonne
   de 16%, que le flex-grow du point 9 de 04-gabarit-pages.css — prévu pour
   les colonnes de TEXTE — étirait à 780px ; le portrait faisait 608px. Il
   passe à la largeur de la vignette voisine, l'image à 80% comme partout.
   Hors mosaïque, une colonne d'image garde son comportement. */
.elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container > .elementor-column:is(:has(.elementor-widget-e_image_hover_effects), :has(.elementor-widget-image):not(:has(.elementor-widget-text-editor))) {
  flex: 0 0 25%;
  max-width: 25%;
  width: 25%;
}

/* --- Les mêmes mosaïques, sur les écrans étroits --------------------------
   CORRECTIF DU 12/09, signalé par Philippe sur /idees-debats/idees-forces/ :
   les vignettes restaient à QUATRE par rangée sur un téléphone. Mesuré en
   390px de large : des colonnes de 88px, dans lesquelles « CONVERSION &
   VISITATION DE L'ÉTRANGER » débordait de la carte et se faisait couper.

   La règle ci-dessus n'avait pas de requête média. Elle l'emportait donc sur
   le `width: 100%` qu'Elementor pose sous 768px, et la mosaïque gardait son
   gabarit desktop.

   On reprend simplement la grille du design system, rappelée en tête de ce
   fichier : 4 colonnes, puis 3, puis 2 — jamais une seule, y compris sur le
   plus petit écran. */

@media (max-width: 1199px) {
  .elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container > .elementor-column:is(:has(.elementor-widget-e_image_hover_effects), :has(.elementor-widget-image):not(:has(.elementor-widget-text-editor))) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }
}

@media (max-width: 991px) {
  .elementor-section:has(> .elementor-container > .elementor-column .elementor-widget-e_image_hover_effects) > .elementor-container > .elementor-column:is(:has(.elementor-widget-e_image_hover_effects), :has(.elementor-widget-image):not(:has(.elementor-widget-text-editor))) {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
}

/* Le libellé de la carte est réglé à 16px en gras DANS CHAQUE WIDGET, et repris
   plus haut en !important faute de pouvoir battre autrement le CSS d'élément
   d'Elementor. Sur une colonne de 170px, un mot comme « VISITATION » y tient
   tout juste : on descend d'un cran et on autorise la césure des mots trop
   longs plutôt que de les laisser sortir de la carte. */

@media (max-width: 767px) {
  .elementor-widget-e_image_hover_effects .eihe-caption h1,
  .elementor-widget-e_image_hover_effects .eihe-caption h2,
  .elementor-widget-e_image_hover_effects .eihe-caption h3,
  .elementor-widget-e_image_hover_effects .eihe-caption h4,
  .elementor-widget-e_image_hover_effects .eihe-caption p,
  .elementor-widget-e_image_hover_effects .eihe-title-cover {
    font-size: 14px !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  body .elementor-widget-e_image_hover_effects .eihe-caption.eihe-caption.eihe-caption {
    padding: 8px 10px !important;
  }
}


/* ==========================================================================
   Vignettes : la même carte partout
   Demande du client, 11/09/2026 au soir, capture à l'appui :
   « mets le style des vignettes et des images comme ça et pas avec le titre
   dans le bloc violet en dessous ».

   La référence qu'il montre est la carte du bloc « Poursuivre la lecture »
   (.lm-tile) : image, puis le nom SOUS l'image sur fond blanc, le tout dans un
   cadre fin. C'est aussi le rendu déjà obtenu sur les mosaïques de
   /biographie/figures/.

   Restaient à l'écart les vignettes de /biographie/courbe-de-vie/ : même widget
   Image Hover Effects, mais la boîte y est peinte en rgba(102, 102, 204, .75)
   et la légende porte 30px de retrait. D'où le gros bloc violet sous l'image.

   POURQUOI CETTE SPÉCIFICITÉ. Le violet ne vient pas d'une feuille de style du
   thème : il est réglé DANS LE WIDGET, page par page, et Elementor le sort en
   CSS d'élément, chargé après nos fichiers. Vérifié sur le rendu : à
   spécificité égale (0,3,0) notre règle perdait, même en !important. La classe
   est donc répétée pour passer devant, et !important est nécessaire parce que
   le CSS d'Elementor en pose un.

   C'est le même arbitrage que pour le libellé des mosaïques plus haut : à
   retirer le jour où les réglages seront nettoyés dans les pages, ce qui
   supposerait de rouvrir des dizaines de mosaïques dans Elementor.
   ========================================================================== */

body .elementor-widget-e_image_hover_effects .eihe-box.eihe-box.eihe-box {
  background-color: var(--lm-background) !important;
  background-image: none !important;
  border: var(--lm-rule) solid var(--lm-border) !important;
}

/* Le survol reste le seul moment où le violet touche la carte, et seulement
   par son cadre. La règle de survol plus haut serait sans effet ici : notre
   bordure en !important la battrait. */
body .elementor-widget-e_image_hover_effects a:hover .eihe-box.eihe-box.eihe-box,
body .elementor-widget-e_image_hover_effects a:focus-visible .eihe-box.eihe-box.eihe-box {
  border-color: var(--lm-primary) !important;
}

/* La légende : une barre blanche sous l'image, jamais un pavé de 30px. */
body .elementor-widget-e_image_hover_effects .eihe-caption.eihe-caption.eihe-caption {
  padding: 10px 12px !important;
  background: none !important;
}


/* ==========================================================================
   Images à la taille de l'ancien site
   Retour du 05/10/2026 : « Dans bio/figures et bio/idées forces, les images
   sont trop grandes. Revenir à la taille de l'ancien site », et de même pour
   les couvertures d'Œuvres de LM, d'Œuvres sur LM et des Bulletins AALM.

   La colonne reprend la largeur qu'elle avait sur l'ancien site : la fraction
   réglée dans Elementor, posée en --lm-col par inc/tailles-images.php, appliquée
   à l'ancien conteneur de 1140px. Mesuré en 1440px : vignettes de Figures 228px
   (image 208px, comme l'ancien site), portraits des fiches 190px, couvertures
   110px (image 90px). Sous 1140px de large, min() suit l'écran comme le faisait
   l'ancien conteneur.

   !important : il faut battre la largeur forcée des mosaïques plus haut
   (25/33/50%, spécificité 0,8,0) et le flex-grow du point 9 de
   04-gabarit-pages.css. La classe n'est posée que sur les rubriques citées et
   sur les seules colonnes d'images : le reste du site n'est pas concerné.
   flex-shrink reste à 1 : une rangée pleine se resserre au lieu de déborder.

   Sous 768px, rien ne change : l'ancien site empilait ses colonnes à 100%, la
   règle des deux vignettes par rangée reste la bonne.

   Les couvertures retrouvent toute leur colonne, comme avant : la réduction à
   80% de 04-gabarit-pages.css ne s'y applique plus, la colonne étant revenue à
   sa taille d'origine. */
@media (min-width: 768px) {
  body:not(.home) .elementor-container > .elementor-column.lm-col-ancienne {
    flex: 0 1 auto !important;
    width: calc(var(--lm-col) * min(1140px, 100vw)) !important;
    max-width: 100% !important;
  }

  body:not(.home) .lm-col-ancienne .elementor-widget-image img {
    max-width: 100%;
  }
}

/* Légende vide : pas de barre sous l'image. Les couvertures de BAALM sont des
   widgets Image Hover Effects sans titre ni description ; la légende sortie du
   flux plus haut y laissait une barre blanche de 30px dans le cadre, et des
   rangées de 179px contre 150px sur l'ancien site. */
body .lm-col-ancienne .elementor-widget-e_image_hover_effects .eihe-caption:not(:has(.eihe-title:not(:empty), p:not(:empty))) {
  display: none !important;
}