/* ##########################################################################
   36_intervenants.css — Univers Intervenants
   Projet : SEP Nancy — Cassiopeia enfant
   Objet  :
   - normalisation des portraits (blog + fiche intervenant)
   - teaser blog propre : image + texte + lire la suite
   - appui sur les tokens globaux définis dans 00_tokens.css
   --------------------------------------------------------------------------
   Mise en place :
   1) Charger ce fichier APRES 35_deonto.css et AVANT 37_biblio_app.css
   2) Ajouter idéalement la classe de page menu : sep-intervenants-page
   3) Le scope prévoit aussi un fallback body.itemid-193 pour le blog actuel
   4) Une fois validé, supprimer le patch “INTERVENANTS / NORMALISATION DES PHOTOS”
      de 90_patches.css
   --------------------------------------------------------------------------
   Dernière MàJ : 2026-03-07
   ########################################################################## */

/* ==========================================================================
   TOKENS COMPLÉMENTAIRES
   ========================================================================== */

:root{
  --sep-speaker-gap: clamp(1rem, 2.2vw, 2rem);
  --sep-speaker-photo-w: clamp(160px, 18vw, 230px);
  --sep-speaker-photo-pos: center 16%;
  --sep-speaker-photo-bg: #eef2f6;
  --sep-speaker-photo-shadow: 0 10px 26px rgba(27,19,39,.08);
  --sep-speaker-border: rgba(27,19,39,.12);
}

/* ==========================================================================
   BLOG INTERVENANTS — LISTE
   Scope principal : classe menu Joomla + fallback itemid-193
   ========================================================================== */

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog.blog{
  max-width: min(var(--sep-container, 1060px), calc(100% - 24px));
  margin-inline: auto;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__items{
  margin: 0;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item{
  display: grid;
  grid-template-columns: minmax(0, var(--sep-speaker-photo-w)) minmax(0, 1fr);
  gap: var(--sep-speaker-gap);
  align-items: start;
  padding: clamp(16px, 1.8vw, 26px) 0;
  border-top: 1px solid var(--sep-speaker-border);
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .items-leading > .com-content-category-blog__item.blog-item:first-child{
  border-top: 0;
}

/* Image intro Joomla */
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item > .item-image{
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: var(--sep-portrait-aspect, 4 / 5);
  min-height: var(--sep-portrait-h, clamp(220px, 32vw, 360px));
  overflow: hidden;
  border-radius: var(--sep-portrait-radius, 8px);
  background: var(--sep-speaker-photo-bg);
  box-shadow: var(--sep-speaker-photo-shadow);
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item > .item-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sep-speaker-photo-pos, center 16%);
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item > .item-image figcaption,
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item > .item-image .caption{
  display: none;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog__item.blog-item > .item-content{
  min-width: 0;
}

/* Teasers simples */
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .sep-speaker-teaser-role{
  margin: 0 0 .35rem;
  color: var(--sep-muted, #5b5566);
  font-weight: 600;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .sep-speaker-teaser-intro{
  margin: 0 0 .9rem;
  max-width: 58ch;
}

/* Au cas où un vieux squelette complet serait encore collé dans le blog */
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item .sep-speaker{
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item .sep-speaker-hero,
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item .sep-speaker-content{
  margin: 0;
}

/* Si le contenu de l'article répète déjà un portrait, on cache l'image intro Joomla
   pour éviter les doublons. */
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item:has(.sep-speaker-portrait) > .item-image{
  display: none;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item:has(.sep-speaker-portrait){
  grid-template-columns: 1fr;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item:has(.sep-speaker-portrait) .sep-speaker-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, var(--sep-speaker-photo-w)) minmax(0, 1fr);
  gap: var(--sep-speaker-gap);
  align-items: start;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item:has(.sep-speaker-portrait) .sep-speaker-portrait{
  margin: 0;
  aspect-ratio: var(--sep-portrait-aspect, 4 / 5);
  min-height: var(--sep-portrait-h, clamp(220px, 32vw, 360px));
  overflow: hidden;
  border-radius: var(--sep-portrait-radius, 8px);
  background: var(--sep-speaker-photo-bg);
  box-shadow: var(--sep-speaker-photo-shadow);
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .blog-item:has(.sep-speaker-portrait) .sep-speaker-portrait img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sep-speaker-photo-pos, center 16%);
}

/* Lire la suite spécifique intervenants */
:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog .readmore{
  display: block;
  margin: .85rem 0 0;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog .readmore a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .58rem .92rem;
  border: 1px solid rgba(27,19,39,.18);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

:where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
  .com-content-category-blog .readmore a::after{
  content: "→";
}

/* ==========================================================================
   FICHE INTERVENANT — ARTICLE COMPLET
   Scope : composant .sep-speaker
   ========================================================================== */

:where(.sep-speaker){
  color: var(--sep-ink, #1b1327);
}

:where(.sep-speaker .sep-speaker-hero){
  margin: 0;
}

:where(.sep-speaker .sep-speaker-hero-grid){
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--sep-speaker-gap);
  align-items: start;
}

:where(.sep-speaker .sep-speaker-portrait){
  margin: 0;
  aspect-ratio: var(--sep-portrait-aspect, 4 / 5);
  min-height: var(--sep-portrait-h, clamp(220px, 32vw, 360px));
  overflow: hidden;
  border-radius: var(--sep-portrait-radius, 8px);
  background: var(--sep-speaker-photo-bg);
  box-shadow: var(--sep-speaker-photo-shadow);
}

:where(.sep-speaker .sep-speaker-portrait img){
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sep-speaker-photo-pos, center 16%);
}

:where(.sep-speaker .sep-speaker-hero-body){
  min-width: 0;
}

:where(.sep-speaker .sep-speaker-name){
  margin: 0 0 .3rem;
  line-height: 1.08;
  font-size: clamp(1.55rem, 1.15rem + 1vw, 2.25rem);
  letter-spacing: -0.02em;
}

:where(.sep-speaker .sep-speaker-title){
  margin: 0 0 .7rem;
  color: var(--sep-muted, #5b5566);
}

:where(.sep-speaker .sep-speaker-intro:empty){
  display: none;
}

/* Faux lien provisoire : on le masque tant qu'il n'est pas remplacé */
:where(.sep-speaker .sep-speaker-links a[href="/[https://...]"]){
  display: none;
}

:where(.sep-speaker .sep-speaker-links:has(a[href="/[https://...]"])){
  display: none;
}

:where(.sep-speaker .sep-acc-item > summary){
  cursor: pointer;
}

/* ==========================================================================
   VARIANTES DE CADRAGE FIN
   À ajouter sur .sep-speaker-portrait selon la photo
   ========================================================================== */

:where(.sep-speaker .sep-speaker-portrait--top){
  --sep-speaker-photo-pos: center 10%;
}

:where(.sep-speaker .sep-speaker-portrait--center){
  --sep-speaker-photo-pos: center 16%;
}

:where(.sep-speaker .sep-speaker-portrait--low){
  --sep-speaker-photo-pos: center 24%;
}

/* ==========================================================================
   AJUSTEMENTS RESPONSIVE
   ========================================================================== */

@media (max-width: 767.98px){
  :where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
    .com-content-category-blog__item.blog-item,
  :where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
    .blog-item:has(.sep-speaker-portrait) .sep-speaker-hero-grid,
  :where(.sep-speaker .sep-speaker-hero-grid){
    grid-template-columns: 1fr;
  }

  :where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
    .com-content-category-blog__item.blog-item > .item-image,
  :where(body.sep-intervenants-page, body.itemid-193).view-category.layout-blog
    .blog-item:has(.sep-speaker-portrait) .sep-speaker-portrait,
  :where(.sep-speaker .sep-speaker-portrait){
    max-width: min(340px, 100%);
  }
}

/* ==========================================================================
   EXEMPLES DE RECADRAGE PAR PERSONNE (à activer si besoin)
   Décommente uniquement la ou les lignes utiles.
   ========================================================================== */

/*
body.itemid-193 img[src*="/audrey-watt/"]{ object-position: center 12%; }
body.itemid-193 img[src*="/celine-vigano/"]{ object-position: center 18%; }
body.itemid-193 img[src*="/dorothee-squarzoni/"]{ object-position: center 14%; }
body.itemid-193 img[src*="/laurence-scheffmann/"]{ object-position: center 10%; }
*/