/* Photos dans les emplacements existants.
   Le style d'origine avait déjà tout prévu : les cases de galerie et les
   bandeaux d'actualité sont en `position: relative` avec `overflow: hidden`,
   et leurs libellés portent une ombre pour rester lisibles sur une image.
   On ne fait donc que remplir la case — la mise en page ne bouge pas. */

.mp-2025 .gal .ph img,
.bp-card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* la photo remplit la case sans se déformer */
  display: block;
}

/* Voile sombre sous le texte : sans lui, une légende blanche posée sur une
   photo claire devient illisible. Il ne couvre que le bas de la case. */
.mp-2025 .gal .ph.avec-photo::after,
.bp-card .thumb.avec-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgb(0 0 0 / .62), transparent);
  pointer-events: none;
}
.mp-2025 .gal .ph.avec-photo b,
.bp-card .thumb.avec-photo span { position: relative; z-index: 1; }

/* Photo de couverture en tête d'un article. */
.bp-photo-article {
  margin: 0 0 26px;
  border-radius: var(--r, 14px);
  overflow: hidden;
  border: 1px solid var(--bp-border);
}
.bp-photo-article img { display: block; width: 100%; height: auto; }
.bp-photo-article figcaption {
  font-size: .82rem;
  color: var(--bp-muted);
  padding: 10px 14px;
  background: var(--bp-surface-2);
}

/* ── Image insérée dans le contenu d'une page ───────────────────────────────── */
.bloc-image { margin: 26px 0; }
.bloc-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r, 14px);
  border: 1px solid var(--bp-border, var(--mp-border, transparent));
}
.bloc-image figcaption {
  font-size: .86rem;
  color: var(--bp-muted, var(--mp-muted, inherit));
  margin-top: 8px;
  line-height: 1.5;
}
/* Demi-largeur : l'image flotte à droite du texte sur grand écran, et reprend
   toute la largeur sur mobile — où deux colonnes seraient illisibles. */
@media (min-width: 48rem) {
  .bloc-image--moitie { width: 48%; float: right; margin: 6px 0 20px 26px; }
}

/* ── Logos de partenaires ───────────────────────────────────────────────────── */
.mp-chips .partenaire-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 3px solid var(--mp-border);
  border-radius: 8px;
  /* Fond blanc constant : les logos institutionnels sont dessinés pour du
     blanc, et beaucoup deviennent illisibles sur le jaune ou sur le sombre. */
  background: #fff;
  min-height: 62px;
}
.mp-chips .partenaire-logo img {
  display: block;
  max-height: 42px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Logo de partenaire au pied de page de Balise Psy : le fond y est sombre,
   les logos institutionnels sont dessinés pour du blanc → on leur en donne un,
   discret et arrondi comme les pastilles de texte qu'ils remplacent. */
.bp-partners .partenaire-logo-pied {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / .18);
}
.bp-partners .partenaire-logo-pied img {
  display: block;
  max-height: 26px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}

/* ── Documents à télécharger ─────────────────────────────────────────────────
   Le poids est annoncé avant le clic : sur une connexion mobile réunionnaise,
   un PDF de 8 Mo n'est pas un détail. */
.bloc-documents { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.bloc-documents li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 13px 16px;
  border: 1px solid var(--bp-border, var(--mp-border, currentColor));
  border-radius: 10px;
  background: var(--bp-surface, var(--mp-surface, transparent));
}
.bloc-documents a { font-weight: 600; text-decoration: none; }
.bloc-documents a:hover { text-decoration: underline; }
.bloc-documents .poids {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bp-muted, var(--mp-muted, inherit)); font-variant-numeric: tabular-nums;
}
.bloc-documents .precision { flex: 1 0 100%; font-size: .88rem; color: var(--bp-muted, var(--mp-muted, inherit)); }

/* ── Carrousel de photos d'une édition ───────────────────────────────────────
   Défilement natif : `scroll-snap` cale chaque photo, sans une ligne de
   JavaScript. Fonctionne au doigt, à la molette, au clavier — et reste
   utilisable si les scripts sont bloqués. */
.gal-carrousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 12px;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.gal-carrousel .ph {
  flex: 0 0 clamp(210px, 32%, 300px);
  scroll-snap-align: start;
}
.gal-carrousel:focus-visible { outline: 3px solid var(--mp-pop); outline-offset: 4px; }
/* Barre de défilement discrète mais visible : sans elle, rien n'indique
   qu'il y a d'autres photos à droite. */
.gal-carrousel::-webkit-scrollbar { height: 8px; }
.gal-carrousel::-webkit-scrollbar-thumb { background: var(--mp-border); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .gal-carrousel { scroll-behavior: auto; }
}

/* ── Liste des éditions ──────────────────────────────────────────────────── */
.mp-edition-resume { margin-bottom: 46px; }
.mp-edition-resume .mp-edition-tete h2 { margin-bottom: 6px; }
.mp-edition-resume .mp-edition-tete h2 a { color: inherit; text-decoration: none; }
.mp-edition-resume .mp-edition-tete h2 a:hover { text-decoration: underline; }

/* ── Affiche de l'édition en cours, sur l'accueil ────────────────────────────
   Vignette portrait cliquable qui ouvre l'image en grand : c'est le geste
   attendu pour une affiche, et ça évite d'imposer un fichier lourd à qui
   veut seulement lire la date. */
.mp-affiche { display: block; max-width: 260px; margin: 26px auto 0; }
.mp-affiche img {
  display: block; width: 100%; height: auto;
  border: 4px solid var(--mp-border); border-radius: 8px;
  box-shadow: 0 12px 30px -18px rgb(0 0 0 / .6);
  transition: transform .16s;
}
.mp-affiche:hover img { transform: translateY(-3px) rotate(-.6deg); }
.mp-affiche figcaption {
  margin-top: 8px; text-align: center;
  font-family: var(--mp-display); font-size: .76rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mp-text);
}

/* ── Rappel de l'affiche à côté d'un titre de page ───────────────────────────
   Deux colonnes sur grand écran, l'affiche à droite du titre. Sur mobile elle
   passe dessous et se réduit : une affiche de 340 px à côté d'un titre sur un
   écran de téléphone écraserait les deux. */
.mp-pagehead--affiche .wrap {
  display: flex;
  align-items: center;
  gap: 34px;
}
.mp-pagehead--affiche .mp-pagehead-texte { flex: 1 1 auto; min-width: 0; }
.mp-affiche-rappel { flex: 0 0 auto; display: block; width: 168px; }
.mp-affiche-rappel img {
  display: block; width: 100%; height: auto;
  border: 3px solid var(--mp-border); border-radius: 6px;
  box-shadow: 0 10px 24px -16px rgb(0 0 0 / .55);
  transition: transform .16s;
}
.mp-affiche-rappel:hover img { transform: translateY(-2px) rotate(-.8deg); }

@media (max-width: 760px) {
  .mp-pagehead--affiche .wrap { display: block; }
  .mp-affiche-rappel { width: 128px; margin-top: 22px; }
}