/* =================================================================
   CAPSULE « ÉMISSION TV » — refresh 2026
   Chargée UNIQUEMENT par les fiches collaborateur concernées,
   APRÈS includes/head.php (surcharge de .cms de main.css).
   Tout est préfixé .em- : zéro impact sur les autres pages.

   Format : capsule compacte, logée dans la colonne de texte de la
   fiche (à côté du portrait), au-dessus de la présentation.
   Elle ne doit jamais prendre plus de place que la bio elle-même.

   Design system Lille Immo :
     - aucun coin arrondi (angles droits partout) ;
     - bleu marque #34a7d5, bleu foncé #00496b, texte courant #4a5b64 ;
     - typographie globale (Sora / Geist) héritée de css/typo-2026.css,
       on ne redéclare aucune font-family ici.
   ================================================================= */

/* Le fond de page est gris clair (#f1f3f5) : la capsule se détache
   en blanc, comme les cartes du trombinoscope. */
.em-tv {
  margin: 30px 0 26px;
  background: #fff;
  border: 1px solid #e2e9ee;
  border-left: 3px solid #34a7d5;
  padding: 40px 40px 40px 32px;
  /* Deux colonnes : visuel à gauche sur toute la hauteur, titre et texte
     alignés sur un seul axe à droite. Le texte ne repasse jamais sous
     le visuel (pas d'enroulement).
     Marges et gouttière relevées sur la simulation navigateur. */
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 40px;
}
/* la fiche agent centre verticalement sa colonne texte : la capsule
   ne doit pas hériter d'un alignement qui la décollerait du haut */
.em-tv * {
  text-align: left;
}

/* ---------- En-tête : surtitre + titre ----------
   Le bloc titre ne démarre pas au ras du visuel : il descend d'environ
   un quart de la hauteur de l'image (relevé sur la simulation). */
.em-tv__head {
  grid-area: 1 / 2 / 2 / 3;
  min-width: 0;
  padding-top: 50px;
}

/* Le visuel est affiché en entier (ratio natif 512x913, aucun recadrage).
   align-self: start pour que le bloc ne s'étire pas sur la hauteur de la
   capsule (le fond bleu apparaîtrait sous l'image). */
.em-tv__thumb {
  grid-area: 1 / 1 / 3 / 2;
  align-self: start;
  margin: 2px 0 0;
  background: #00496b;
}
/* .cms img force width:100% + margin-top:30px */
.em-tv .em-tv__thumb img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* ---------- Surtitre ----------
   <p> : il faut battre .cms p (padding-top: 30px) et la couleur de
   texte courante, d'où la spécificité renforcée. */
.em-tv .em-tv__kicker {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: #34a7d5;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------- Titres ----------
   .cms H2 impose font-size 28px + margin 50px 0 0 : on reprend tout. */
.em-tv .em-tv__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #00496b;
}
/* second bloc (présentatrice) : simple filet, pas de respiration inutile */
.em-tv .em-tv__title--sub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e9ee;
  font-size: 14px;
}

/* ---------- Texte ---------- */
.em-tv__body {
  grid-area: 2 / 2 / 3 / 3;
  min-width: 0;
}
.em-tv .em-tv__body {
  margin-top: 12px;
}
.em-tv p {
  padding-top: 0;
  margin: 0 0 14px;
  font-size: 10pt;
  line-height: 15pt;
  color: #4a5b64;
}
.em-tv p:last-child {
  margin-bottom: 0;
}

/* ---------- Lien plateforme ----------
   Lien fléché plutôt que bouton : un bouton pleine largeur relancerait
   la capsule au format encart. */
.em-tv .em-tv__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: #00496b;
  font-size: 10pt;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #34a7d5;
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.em-tv .em-tv__link:hover,
.em-tv .em-tv__link:focus {
  color: #34a7d5;
  border-color: #00496b;
  text-decoration: none;
}
.em-tv .em-tv__link svg {
  flex: 0 0 auto;
  width: 15px;
  height: 9px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.em-tv .em-tv__link:hover svg {
  transform: translateX(4px);
}

/* ---------- Mobile ----------
   Sous 576px la vignette mange trop de largeur : on la réduit. */
@media (max-width: 575.98px) {
  /* Sur téléphone la colonne de texte tomberait sous 230px et laisserait
     un grand vide sous le visuel : la capsule s'empile (display:block
     neutralise la grille, les grid-area sont sans effet). */
  .em-tv {
    display: block;
    padding: 22px;
  }
  /* empilé : plus de visuel en vis-à-vis, donc plus de décalage */
  .em-tv__head {
    padding-top: 0;
  }
  .em-tv__thumb {
    width: 96px;
    margin: 0 0 12px;
  }
  .em-tv .em-tv__body {
    margin-top: 10px;
  }
}