/* hero-portrait.css · portrait en tête des pages Veille et Études
 *
 * Les deux photos sont cadrées en 2,44:1 avec un large vide d'un côté, pensé
 * pour recevoir le titre. Posées telles quelles dans une colonne, elles
 * donnaient une vignette flottante : trop basses, trop petites, et le vide
 * de la photo faisait doublon avec la colonne de texte.
 *
 * On recadre donc en direct : la colonne impose sa hauteur, la photo est
 * rognée du côté vide et garde le sujet. Sur la Veille le sujet est à droite,
 * sur les Études à gauche, d'où les deux valeurs d'ancrage.
 *
 * Le voile sombre reste très léger : les deux photos sont déjà sombres, en
 * rajouter noyait le visage.
 */

.hero-deux-col {
  display: grid;
  gap: 30px;
  align-items: center;
  text-align: center;
}
.hero-texte { min-width: 0; }

.hero-portrait {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .07);
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;      /* Veille : le sujet est à droite */
}
.hero-inverse .hero-portrait img {
  object-position: 26% center;      /* Études : le sujet est à gauche */
}

/* Léger fondu vers la colonne de texte, pour souder les deux moitiés. */
.hero-portrait::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(7, 11, 20, .55) 0%, rgba(7, 11, 20, .10) 34%, transparent 58%);
}
.hero-inverse .hero-portrait::after {
  background: linear-gradient(260deg, rgba(7, 11, 20, .55) 0%, rgba(7, 11, 20, .10) 34%, transparent 58%);
}

/* Mobile : la photo passe en bandeau sous le texte, mise en page inchangée. */
.hero-portrait { aspect-ratio: 16 / 9; }

@media (min-width: 1024px) {
  .hero-deux-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 46px;
    text-align: left;
  }
  .hero-deux-col.hero-inverse .hero-texte { order: 2; }
  .hero-deux-col.hero-inverse .hero-portrait { order: 1; }
  .hero-texte h1,
  .hero-texte p { margin-left: 0; margin-right: 0; }
  .hero-portrait {
    aspect-ratio: 5 / 4;
    border-radius: 20px;
  }
}

@media (min-width: 1440px) {
  .hero-portrait { aspect-ratio: 4 / 3; }
}

html[data-theme="light"] .hero-portrait {
  border-color: rgba(15, 21, 48, .10);
  box-shadow: 0 18px 44px rgba(15, 21, 48, .12);
}
html[data-theme="light"] .hero-portrait::after {
  background: linear-gradient(100deg, rgba(7, 11, 20, .22) 0%, transparent 52%);
}
html[data-theme="light"] .hero-inverse .hero-portrait::after {
  background: linear-gradient(260deg, rgba(7, 11, 20, .22) 0%, transparent 52%);
}