/*
Theme Name:   Montchardon
Theme URI:    https://site.montchardon.fr
Description:  Charte graphique du Centre d'études bouddhistes de Montchardon (Karma Migyur Ling). Thème enfant de Twenty Twenty-Four.
Author:       Centre Montchardon
Template:     twentytwentyfour
Version:      1.17.0
Text Domain:  montchardon
*/

/* ============================================================
   MONTCHARDON — composants
   ------------------------------------------------------------
   Ce fichier ne contient QUE ce que theme.json ne sait pas faire.

   Couleurs, polices, tailles de titre, liens et boutons sont
   définis dans theme.json — ne pas les redéfinir ici, sinon
   l'éditeur affichera autre chose que le site public.

   Les variables --wp--preset--* sont générées par theme.json.
   Les alias --mc-* ci-dessous existent pour que le code reste
   lisible ; ils ne créent pas une seconde source de vérité.
   ============================================================ */

:root {
  --mc-creme:       var(--wp--preset--color--base);
  --mc-creme-fonce: var(--wp--preset--color--base-3);
  --mc-rouge:       var(--wp--preset--color--accent);
  --mc-safran:      var(--wp--preset--color--accent-2);
  --mc-or:          var(--wp--preset--color--accent-3);
  --mc-filet:       var(--wp--preset--color--accent-4);
  --mc-vert:        var(--wp--preset--color--accent-5);
  --mc-vert-fond:   var(--wp--preset--color--accent-6);
  --mc-encre:       var(--wp--preset--color--contrast);
  --mc-texte:       var(--wp--preset--color--contrast-2);
  --mc-texte-doux:  var(--wp--preset--color--contrast-3);

  --mc-font-titre:    var(--wp--preset--font-family--titre);
  --mc-font-texte:    var(--wp--preset--font-family--texte);
  --mc-font-tibetain: var(--wp--preset--font-family--tibetain);

  --mc-ombre-carte: 0 1px 4px rgba(43, 36, 32, .07);
  --mc-radius: 3px;
}

/* ---------- Surtitre safran ---------- */
.mc-surtitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mc-safran);
}

/* ---------- Ornement tibétain (décoratif, jamais porteur de sens seul) ---------- */
.mc-tibetain {
  font-family: var(--mc-font-tibetain);
  color: var(--mc-safran);
}

/* ---------- Variantes de bouton ----------
   Le bouton principal vient de theme.json (elements.button).
   Ces deux classes s'ajoutent à .wp-block-button__link pour les
   variantes. Voir functions.php : elles sont proposées dans
   l'éditeur comme styles de bloc, pas à saisir à la main.       */
.wp-block-button.is-style-mc-accent .wp-block-button__link {
  background-color: var(--mc-or);
  color: var(--mc-encre);
}
.wp-block-button.is-style-mc-accent .wp-block-button__link:hover {
  background-color: #d6a54b;
  color: var(--mc-encre);
}
.wp-block-button.is-style-mc-secondaire .wp-block-button__link {
  background-color: transparent;
  color: var(--mc-rouge);
  border: 1px solid #d9cfc0;
}
.wp-block-button.is-style-mc-secondaire .wp-block-button__link:hover {
  background-color: var(--mc-creme-fonce);
  color: var(--mc-rouge);
}

/* ---------- Cartes ----------
   Style de bloc appliqué à un groupe : Groupe → Styles → Carte.  */
.wp-block-group.is-style-mc-carte {
  background: #fff;
  border-top: 3px solid var(--mc-rouge);
  box-shadow: var(--mc-ombre-carte);
  padding: 24px;
}
.wp-block-group.is-style-mc-carte-simple {
  background: #fff;
  border: 1px solid var(--mc-filet);
  padding: 22px 24px;
}

/* ---------- Badge « réservable » ---------- */
.mc-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-vert);
  background: var(--mc-vert-fond);
  padding: 6px 14px;
  border-radius: 20px;
}

/* ---------- Bandeau rouge (temps forts) ----------
   Un seul par page : au-delà, l'accent cesse d'en être un.       */
.wp-block-group.is-style-mc-bandeau {
  background: var(--mc-rouge);
  color: #fff;
  padding: 22px 48px;
}
.wp-block-group.is-style-mc-bandeau :where(a, h1, h2, h3, h4, p) { color: #fff; }

/* ---------- Voile sombre sur photo porteuse de texte ---------- */
.mc-voile {
  background: linear-gradient(180deg,
    rgba(20, 14, 10, .35) 0%,
    rgba(20, 14, 10, .05) 40%,
    rgba(30, 20, 12, .72) 100%);
}

/* ---------- Ligne de stage (listes du programme) ---------- */
.mc-stage {
  display: flex;
  align-items: center;
  gap: 26px;
  background: #fff;
  border-left: 3px solid var(--mc-rouge);
  padding: 20px 26px;
  box-shadow: var(--mc-ombre-carte);
  text-decoration: none;
}
.mc-stage:hover { box-shadow: 0 3px 10px rgba(43, 36, 32, .13); }

.mc-stage__date {
  flex: none;
  width: 110px;
  text-align: center;
  border-right: 1px solid var(--mc-filet);
  padding-right: 22px;
  font-family: var(--mc-font-titre);
  font-size: 26px;
  color: var(--mc-encre);
}
.mc-stage__mois {
  display: block;
  font-family: var(--mc-font-texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mc-safran);
}
.mc-stage__titre {
  font-family: var(--mc-font-titre);
  font-size: 21px;
  color: var(--mc-encre);
  margin: 0 0 3px;
}
.mc-stage__meta {
  font-size: 15px;
  color: var(--mc-texte-doux);
  margin: 0;
}
/* Un stage à cheval sur deux mois occupe deux lignes de date — « 17 oct – »
   puis « 5 mai ». À 26 px et à l'interlignage du texte courant, la colonne
   fait alors deux fois la hauteur du titre et la ligne se déforme. */
.mc-stage__date--intervalle {
  font-size: 21px;
  line-height: 1.2;
}

/* Affordance de clic. Sans elle, rien n'indiquait que la ligne menait
   quelque part — le badge « Réservable » est un état, pas une action. */
.mc-stage__l {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--mc-rouge);
  white-space: nowrap;
  margin: 0;
}
.mc-stage:hover .mc-stage__l { text-decoration: underline; }

/* Sous 600 px la date passe au-dessus : la colonne de 110 px
   ne laisse plus assez de place au titre.                        */
@media (max-width: 600px) {
  .mc-stage { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mc-stage__date {
    width: auto;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--mc-filet);
    padding: 0 0 10px;
  }
}

/* ---------- Ligne de programme « temps fort » ----------
   Le cinquantenaire, la venue d'un grand maître : l'exception, jamais la
   règle. Or sur rouge, comme le bandeau du cinquantenaire en page
   d'accueil — c'est le même événement, il porte donc la même robe. Deux
   lignes ainsi mises en avant dans un même mois, et plus aucune ne l'est.

   L'or (#e3b45c) sur le rouge (#8f2d2b) donne 4,25:1 : au-dessus du seuil
   des grands textes (3:1), au-dessous de celui du texte courant (4,5:1).
   D'où le partage — la date et le titre en or, tout le reste en blanc.
   C'est aussi ce que fait .mc-50ans, pour la même raison.

   Deux crochets pour un seul style : .mc-stage--fort est posé par le
   programme dynamique (champ « Temps fort » du stage), le style de bloc
   « Ligne temps fort » par l'éditeur sur la composition Ligne de stage. */
.mc-stage--fort,
.mc-stage.is-style-mc-temps-fort {
  background: var(--mc-rouge);
  border-left-color: var(--mc-or);
  box-shadow: 0 2px 10px rgba(143, 45, 43, .22);
}
.mc-stage--fort:hover,
.mc-stage.is-style-mc-temps-fort:hover {
  box-shadow: 0 4px 16px rgba(143, 45, 43, .32);
}

:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__date {
  color: var(--mc-or);
  border-right-color: rgba(255, 255, 255, .28);
}
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__mois {
  color: rgba(255, 255, 255, .8);
}

/* Le fanion dit de quoi il s'agit — « 50 ans du centre ». Sans lui, la
   ligne est rouge sans que personne sache pourquoi. */
.mc-stage__fanion {
  font-family: var(--mc-font-texte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 5px;
}

/* 24 px, et non 21 : c'est le seuil du « grand texte » au sens WCAG,
   celui qui autorise l'or sur le rouge. */
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__titre {
  font-size: 24px;
  color: var(--mc-or);
}
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__meta {
  color: rgba(255, 255, 255, .88);
}
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__l,
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__l a {
  color: #fff;
}

/* Le vert du badge « Réservable » ne tient pas sur le rouge : il y
   devient une tache. Même forme, contraste emprunté au fond. */
:is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-badge {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

@media (max-width: 600px) {
  :is(.mc-stage--fort, .mc-stage.is-style-mc-temps-fort) .mc-stage__date {
    border-bottom-color: rgba(255, 255, 255, .28);
  }
}

/* ============================================================
   EN-TÊTE — direction « Plein ciel » (planche 1a)
   ============================================================ */

.mc-entete {
  position: relative;
  z-index: 2;
  background: var(--mc-encre);
}
.mc-entete a,
.mc-entete .wp-block-site-title a,
.mc-entete .wp-block-navigation .wp-block-navigation-item__content {
  color: #fff;
  text-decoration: none;
}
.mc-marque__tib { color: var(--mc-or); margin: 0; }

/* Le double dorje de Karma Migyur Ling ouvre la marque.

   Un ::before plutôt qu'une <img> dans le gabarit : l'emblème est
   décoratif, le nom du centre est écrit en toutes lettres juste à côté.
   Les lecteurs d'écran n'ont donc rien à annoncer, et il n'y a pas de
   texte alternatif à inventer pour un ornement qui ne dit rien de plus —
   même raisonnement que pour .mc-tibetain.

   L'or plutôt que le rouge monastique : l'en-tête est sur fond encre, et
   au-dessus d'une bannière il flotte sur un dégradé sombre. Le rouge y
   tomberait sous 2:1. C'est aussi la couleur du tibétain voisin, et les
   deux ornements de la marque parlent alors d'une seule voix.

   La variante « compact » du fichier, et non le tracé fidèle : réduit à
   44 px, le dessin d'origine n'est plus qu'une hachure pâle. Voir
   mklogo.py à la racine du projet — les deux versions y sont produites
   à partir du même original.

   L'emblème est le plus haut des trois éléments : c'est lui qui donne sa
   hauteur à la marque, et le nom du centre s'y centre. Ce centrage vient
   de l'alignement vertical des groupes, réglé dans parts/header.html et
   parts/footer.html — pas d'une règle d'ici : l'éditeur doit montrer la
   même chose que le site. */
.mc-marque::before,
.mc-pied__marque::before {
  content: '';
  flex: 0 0 auto;
  background: url('assets/img/logo-dorje-or-compact.png') center / contain no-repeat;
}
.mc-marque::before {
  width: 44px;
  height: 44px;
  margin-right: 6px;
}

/* Le pied de page porte le même emblème, à la même taille : c'est la même
   marque, elle n'a pas de raison de rétrécir.

   Son nom et son adresse y sont empilés, là où l'en-tête tient sur une
   ligne. Ce n'est pas un choix d'esthète : sur une seule ligne, marque et
   liens réclamaient 1200 px pour 1169 disponibles à 1280 px de large — la
   largeur d'écran la plus courante — et le pied cassait en deux. Empilé, le
   bloc tombe à ~355 px, et il donne au passage à l'emblème la hauteur de
   deux lignes de texte. */
.mc-pied__marque::before {
  width: 44px;
  height: 44px;
  margin-right: 6px;
}

@media (max-width: 600px) {
  .mc-marque::before { width: 34px; height: 34px; margin-right: 2px; }
  .mc-pied__marque::before { width: 34px; height: 34px; margin-right: 2px; }
}

/* L'en-tête ne chevauche le contenu QUE si la page commence par une
   bannière. Sur une page sans hero, il garde son fond encre et le texte
   blanc reste lisible — un chevauchement inconditionnel poserait du
   blanc sur du crème.

   WordPress n'accole pas l'en-tête au contenu : il intercale
   <main> puis .entry-content. Le voisinage direct n'existe donc pas,
   et c'est la bannière qu'on remonte, pas l'en-tête qu'on descend.
       div.wp-site-blocks
         > header.wp-block-template-part   ← l'en-tête
         > main > .entry-content > .wp-block-cover   ← la bannière   */
header.wp-block-template-part { position: relative; z-index: 2; }

/* L'en-tête se pose SUR la bannière au lieu de la tirer vers le haut.

   La version précédente remontait la bannière d'une hauteur d'en-tête
   écrite en dur (77 px, reprise de la planche). Or l'en-tête rendu par
   WordPress en fait 89 : il restait donc 12 px de voile posés sur le
   fond crème au lieu de la photo — la « demi barre grise ». Toute
   valeur fixe rouvrira ce défaut au premier changement de police, de
   marge ou de bouton.

   En le positionnant en absolu, il n'y a plus de nombre à tenir à
   jour : l'en-tête couvre exactement le haut de la bannière, quelle
   que soit sa hauteur. La bannière porte déjà 140 px de marge haute,
   de quoi loger le menu.                                              */
.wp-site-blocks { position: relative; }

@media (min-width: 1151px) {
  header.wp-block-template-part:has(+ main .entry-content > .wp-block-cover:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
  }
}
/* Pas de backdrop-filter ici, et c'est délibéré. Le flou ne s'applique
   qu'à l'intérieur de la boîte de l'en-tête : il produisait une arête
   rectangulaire nette en travers de la photo, à 121 px du haut — la
   « bordure grise » visible sur toutes les bannières. Le voile dégradé
   ci-dessous assure seul la lisibilité (7,8:1 dans le pire cas, sur une
   photo blanche), le flou n'y participait pas. */
header.wp-block-template-part:has(+ main .entry-content > .wp-block-cover:first-child) .mc-entete {
  background: transparent;
}
header.wp-block-template-part:has(+ main .entry-content > .wp-block-cover:first-child)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 70px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 14, 10, .72) 0%,
    rgba(20, 14, 10, .38) 55%,
    rgba(20, 14, 10, 0) 100%);
}

.mc-nav .wp-block-navigation-item__content { font-size: 15px; }
.mc-nav .wp-block-navigation-item__content:hover { color: var(--mc-or); }
.mc-nav .current-menu-item > .wp-block-navigation-item__content {
  border-bottom: 2px solid var(--mc-or);
  padding-bottom: 2px;
}
.mc-entete__droite { gap: 26px; }

/* Menus déroulants.
   WordPress donne au panneau un fond blanc en dur, alors que les liens
   de l'en-tête sont blancs : blanc sur blanc. Plutôt que de repeindre
   le texte en sombre, on donne au panneau le fond encre de l'en-tête —
   il se pose alors aussi bien sur une photo que sur le crème de la page,
   et le menu garde une seule identité de haut en bas. */
/* Le sélecteur reprend le :not(.has-background) de WordPress : sa règle
   compte quatre classes, une règle à deux classes perdait le fond (et
   seul le min-width passait). On ne surenchérit pas en !important, on se
   met au même niveau. */
.mc-entete .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.mc-entete .wp-block-navigation__submenu-container {
  background-color: var(--mc-encre);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 6px 0;
  min-width: 232px;
}
.mc-entete .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #fff;
  font-size: 14.5px;
  padding: 9px 20px;
}
.mc-entete .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--mc-or);
  background-color: rgba(255, 255, 255, .06);
}
/* Le filet safran signale la page courante dans le menu principal ;
   dans un panneau déroulant il ferait un trait en travers. */
.mc-entete .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  border-bottom: none;
  color: var(--mc-or);
}

/* Menu plein écran (sous 600 px).
   Même piège que les panneaux déroulants, en plus large : WordPress
   peint le voile ouvert en blanc — sa règle
   `.wp-block-navigation:not(.has-background) …container.is-menu-open`
   — alors que .mc-entete écrit tous ses liens en blanc. Le menu
   s'ouvrait donc blanc sur blanc, illisible au doigt.
   On reprend le fond encre de l'en-tête plutôt que de renoircir le
   texte : le voile prolonge l'en-tête au lieu de le contredire, et le
   menu garde la même identité du haut de page au plein écran.
   Le sélecteur reprend le :not(.has-background) de WordPress pour se
   tenir à la même échelle de spécificité, sans !important. */
.mc-entete .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.mc-entete .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--mc-encre);
  color: #fff;
}
.mc-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff;
  font-size: 17px;
}
.mc-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.mc-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
  color: var(--mc-or);
}

/* Le bouton hamburger hérite sinon de la couleur de texte du site
   (#4a4238) : un chevron brun foncé sur l'en-tête encre, à 1,6:1. Il
   doit être blanc comme les liens qu'il ouvre. La croix de fermeture
   vit dans le voile et suit sa couleur, mais on l'écrit aussi : elle
   est le seul moyen de refermer le menu. */
.mc-entete .wp-block-navigation__responsive-container-open,
.mc-entete .wp-block-navigation__responsive-container-close {
  color: #fff;
}

/* Dans le voile, les sous-menus s'affichent en liste dépliée : le fond
   encre, la bordure et la largeur mini du panneau déroulant y
   dessineraient une boîte dans la boîte. */
.mc-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background-color: transparent;
  border: 0;
  min-width: 0;
  padding: 0;
}

/* Sous 1210 px le menu ne tient plus sur une ligne (marque 256,
   emblème compris, + menu 847 + marges) : un en-tête flottant sur
   deux lignes chevaucherait le titre de la bannière. Il reprend sa place dans le flux, son
   fond plein, et le voile n'a plus lieu d'être. */
@media (max-width: 1210px) {
  .mc-entete { padding-left: 20px !important; padding-right: 20px !important; }
  /* L'en-tête étant revenu dans le flux, l'écart de bloc que WordPress
     pose au-dessus du premier cover creuserait une bande crème entre le
     menu et la bannière. */
  main .entry-content > .wp-block-cover:first-child { margin-top: 0; }
  header.wp-block-template-part:has(+ main .entry-content > .wp-block-cover:first-child) .mc-entete {
    background: var(--mc-encre);
  }
  header.wp-block-template-part:has(+ main .entry-content > .wp-block-cover:first-child)::after {
    display: none;
  }
  .mc-banniere { padding-top: 48px !important; }
}

/* ============================================================
   COMPOSANTS de la planche
   ============================================================ */

/* Surtitre safran posé sur une bannière */
.mc-bandeau-titre {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mc-or);
  margin: 0 0 6px;
}

/* Pastilles de filtre (page Programme) */
.mc-filtres { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-filtres a {
  text-decoration: none;
  font-size: 14px;
  color: var(--mc-texte);
  border: 1px solid var(--wp--preset--color--neutre-2);
  padding: 7px 16px;
  border-radius: 20px;
}
.mc-filtres a:hover { border-color: var(--mc-rouge); color: var(--mc-rouge); }
.mc-filtres a[aria-current], .mc-filtres a.est-actif {
  color: #fff;
  background: var(--mc-rouge);
  border-color: var(--mc-rouge);
  font-weight: 600;
}

/* Chiffres clés — bandeau rouge pleine largeur.
   Sur fond crème, les chiffres en rouge se confondaient avec le reste
   de la page ; la planche en fait une respiration colorée, seul aplat
   plein de la page après la bannière. */
.mc-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  background: var(--mc-rouge);
  color: #fff;
  padding: 44px 48px;
  text-align: center;
}
.mc-chiffre__n {
  font-family: var(--mc-font-titre);
  font-size: 40px;
  line-height: 1;
  color: var(--mc-or);
  display: block;
}
.mc-chiffre__l {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  margin-top: 4px;
  display: block;
}

/* Pied de page sombre */
.mc-footer { background: var(--mc-encre); color: var(--wp--preset--color--neutre); }
.mc-footer a { color: var(--wp--preset--color--neutre); text-decoration: none; }
.mc-footer a:hover { color: var(--mc-or); }

/* ============================================================
   THERMOMÈTRE DE DONS
   ------------------------------------------------------------
   Le chiffre collecté est le seul élément en Marcellus : c'est
   lui qu'on vient lire. L'objectif reste en texte courant, à
   côté et non en dessous — la comparaison se fait sur une ligne.

   La barre est volontairement fine. Une jauge épaisse tire la
   page vers le tableau de bord ; ici elle accompagne un texte
   d'appel, elle ne le domine pas.
   ============================================================ */
.mc-thermo { max-width: 520px; }

.mc-thermo__chiffres {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 8px;
}
.mc-thermo__collecte {
  font-family: var(--mc-font-titre);
  font-size: 34px;
  line-height: 1;
  color: var(--mc-rouge);
}
.mc-thermo__objectif { font-size: 15px; color: var(--mc-texte-doux); }

.mc-thermo__barre {
  height: 8px;
  background: var(--mc-creme-fonce);
  border-radius: 999px;
  overflow: hidden;
}
.mc-thermo__barre span {
  display: block;
  height: 100%;
  background: var(--mc-rouge);
  border-radius: 999px;
}

.mc-thermo__pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.mc-thermo__compte { font-size: 14px; color: var(--mc-texte-doux); }

/* API muette : il ne reste que le bouton, qui n'a plus rien à
   aligner et se remet donc à gauche. */
.mc-thermo--muet .wp-block-button { margin: 0; }

/* Mention de pré-production. Discrète mais lisible : elle doit se
   remarquer sur une capture d'écran, sans concurrencer le montant. */
.mc-thermo__essai {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mc-vert);
  border-left: 2px solid var(--mc-vert);
  padding-left: 8px;
}

@media (max-width: 600px) {
  .mc-thermo__pied { align-items: flex-start; }
  .mc-thermo__pied .wp-block-button { width: 100%; }
  .mc-thermo__pied .wp-block-button__link { display: block; text-align: center; }
}

/* ============================================================
   PAGE PROGRAMME (écran 2a)
   ============================================================ */

/* Le mois est un repère, pas un titre de section : safran, sans filet.
   En encre avec une ligne sous le texte il pesait autant que le titre
   de la page et découpait la liste en tranches. */
.mc-mois {
  font-family: var(--mc-font-titre);
  font-weight: 400;
  font-size: 24px;
  color: var(--mc-safran);
  margin: 40px 0 18px;
}
.mc-liste-stages { display: flex; flex-direction: column; gap: 14px; }

/* Lien « Vue calendrier » / « Programme PDF » à droite des filtres */
.mc-filtres__fin { margin-left: auto; display: flex; gap: 20px; }
.mc-filtres__fin a {
  border: none;
  padding: 0;
  font-weight: 600;
  color: var(--mc-rouge);
  border-radius: 0;
}
.mc-filtres__fin a:hover { background: none; text-decoration: underline; }

/* ============================================================
   FICHE STAGE (écran 2b)
   ============================================================ */

.mc-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}
.mc-fil { font-size: 14px; color: var(--wp--preset--color--neutre-3); margin-bottom: 10px; }
.mc-fil a { color: var(--wp--preset--color--neutre-3); }
.mc-surtitre-stage {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mc-safran);
  margin: 0 0 8px;
}

/* Bandeau des 4 informations clés */
.mc-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 24px 0 32px;
  padding: 20px 0;
  border-top: 1px solid var(--mc-filet);
  border-bottom: 1px solid var(--mc-filet);
}
.mc-meta__l {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neutre-3);
  margin-bottom: 4px;
}
.mc-meta__v { display: block; font-family: var(--mc-font-titre); font-size: 17px; color: var(--mc-encre); }

/* Encarts de la colonne de droite */
.mc-encart {
  background: #fff;
  border: 1px solid var(--mc-filet);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.mc-encart--reserver { border-top: 3px solid var(--mc-rouge); }
.mc-encart__t {
  font-family: var(--mc-font-titre);
  font-size: 19px;
  color: var(--mc-encre);
  margin: 0 0 14px;
}
.mc-tarif {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--mc-creme-fonce);
  font-size: 14px;
}
.mc-tarif:last-of-type { border-bottom: none; }
.mc-tarif strong { color: var(--mc-encre); white-space: nowrap; }
.mc-note {
  font-size: 13px;
  color: var(--wp--preset--color--neutre-3);
  line-height: 1.55;
  margin: 12px 0 0;
}

/* Bloc enseignant en bas de fiche */
/* Fond blanc et filet, comme les encarts de la colonne de droite : en
   crème le bloc se lisait comme un encadré d'alerte, alors que c'est
   une carte d'information de même nature que les autres. */
.mc-prof {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--mc-filet);
  padding: 20px 24px;
  margin-top: 32px;
}
.mc-prof__ph {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mc-filet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--wp--preset--color--neutre-3);
  text-align: center;
}
.mc-prof__n { font-family: var(--mc-font-titre); font-size: 18px; color: var(--mc-encre); margin: 0 0 4px; }

@media (max-width: 900px) {
  .mc-fiche { grid-template-columns: 1fr; gap: 32px; }
  .mc-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PAGE LE CENTRE (écran 2c)
   ============================================================ */

/* Le bloc est en largeur « large » (1100) et non « pleine largeur » :
   sur alignfull, WordPress applique une marge gauche négative pour
   sortir des marges de la page, ce qui collait l'intro au bord gauche
   au lieu de la centrer. */
/* .wp-block-group en préfixe : la classe .alignwide de WordPress pose
   max-width: 1100px au même niveau de spécificité, et l'emportait. */
.wp-block-group.mc-intro { text-align: center; max-width: 820px; margin-inline: auto; padding: 56px 24px 40px; }
.mc-intro__tib { font-family: var(--mc-font-tibetain); font-size: 22px; color: var(--mc-safran); margin: 0 0 18px; }
.mc-intro__t {
  font-family: var(--mc-font-titre);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.45;
  color: var(--mc-encre);
  margin: 0;
}

/* Frise historique.
   Le titre est un surtitre or en petites capitales, pas un titre de
   section : la frise elle-même porte déjà le poids visuel. Les colonnes
   sont séparées par un filet vertical, sans gouttière — le filet fait
   la séparation, un écart en plus la redoublerait. */
.mc-frise-titre {
  font-family: var(--mc-font-titre);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mc-safran);
  text-align: center;
  margin: 0 0 26px;
}
.mc-frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mc-frise__i { border-left: 1px solid var(--mc-filet); padding: 4px 22px 8px; }
.mc-frise__a { font-family: var(--mc-font-titre); font-size: 30px; color: var(--mc-rouge); margin: 0 0 6px; }
.mc-frise__t { font-size: 15px; line-height: 1.55; color: var(--mc-texte); margin: 0; }

/* Bande « venir découvrir » */
.mc-visite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--mc-creme-fonce);
  padding: 32px 40px;
}
.mc-visite__t { font-family: var(--mc-font-titre); font-size: 24px; color: var(--mc-encre); margin: 0 0 6px; }

@media (max-width: 900px) {
  .mc-frise { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .mc-chiffres { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 32px 24px; }
}
@media (max-width: 600px) {
  .mc-frise { grid-template-columns: 1fr; }
  .mc-frise__i { border-left: none; border-top: 1px solid var(--mc-filet); padding: 14px 0 0; }
  .mc-chiffres { grid-template-columns: 1fr; }
}

/* ============================================================
   EN DIRECT — Gompa TV
   Le direct est un rendez-vous, pas de l'archive : fond encre,
   pastille rouge, pour qu'il ne se confonde jamais avec les
   cartes d'enseignements enregistrés.
   ============================================================ */

.mc-direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--mc-encre);
  color: var(--wp--preset--color--neutre);
}
.mc-direct__k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mc-or);
  margin: 0 0 8px;
}
.mc-direct__pt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9433f;
  flex: none;
  animation: mc-pulse 2s ease-in-out infinite;
}
.mc-direct__t {
  font-family: var(--mc-font-titre);
  font-size: 24px;
  color: #fff;
  margin: 0 0 6px;
}
.mc-direct__s {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
  color: var(--wp--preset--color--neutre);
}

@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Une pastille qui clignote sans fin est pénible pour qui y est
   sensible — et c'est une exigence WCAG, pas une préférence. */
@media (prefers-reduced-motion: reduce) {
  .mc-direct__pt { animation: none; }
}

/* ---------- Accessibilité ---------- */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--mc-safran);
  outline-offset: 2px;
}

/* ============================================================
   PAGE D'ACCUEIL (écran 1a — « Plein ciel »)
   ============================================================ */

/* Titre et chapeau ont une mesure limitée. Or la mise en page
   « contenu contraint » de WordPress pose margin-inline: auto
   !important sur chaque enfant : un élément à largeur limitée s'y
   retrouve centré, désaligné du surtitre au-dessus.

   Forcer la marge à zéro ne règle rien — le texte se colle alors au
   bord de la bannière, à 48 px, quand le surtitre est à 403. La parade
   est structurelle : le contenu du hero est enveloppé dans un groupe en
   flux (.mc-hero__bloc). Le groupe reste centré sur 1100 px, mais ses
   enfants ne sont plus recentrés un à un. */
.mc-hero h1 {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 18ch;
  margin: 0 0 16px;
}
.mc-hero__lead {
  font-size: 18px;
  line-height: 1.65;
  max-width: 58ch;
  margin: 0;
}

/* Le bouton secondaire est dessiné pour le fond crème : rouge sur
   transparent, filet beige. Posé sur la bannière sombre il devient
   illisible — sur photo, il passe en filet blanc. */
.mc-banniere .is-style-mc-secondaire .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.mc-banniere .is-style-mc-secondaire .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Bandeau du cinquantenaire — un seul temps fort par page.
   Le nombre est en or sur le rouge : c'est le seul endroit du site
   où les deux accents se touchent, et c'est voulu. */
.mc-50ans {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--mc-rouge);
  color: #fff;
  padding: 20px 48px;
}
.mc-50ans__g { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.mc-50ans__n {
  font-family: var(--mc-font-titre);
  font-size: 34px;
  line-height: 1;
  color: var(--mc-or);
  white-space: nowrap;
}
.mc-50ans__t { font-size: 15.5px; line-height: 1.5; margin: 0; }
.mc-50ans a { color: #fff; font-weight: 600; white-space: nowrap; }

/* En-tête de section : titre à gauche, lien « tout voir » à droite */
.mc-tete-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.mc-tete-section h2 { margin: 0; }
.mc-tete-section a { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* Trois prochains stages */
.mc-stages-accueil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mc-carte-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--mc-filet);
  border-top: 3px solid var(--mc-rouge);
  padding: 22px 24px;
  box-shadow: var(--mc-ombre-carte);
}
.mc-carte-stage__d {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mc-safran);
  margin: 0;
}
.mc-carte-stage__t {
  font-family: var(--mc-font-titre);
  font-size: 19px;
  line-height: 1.3;
  color: var(--mc-encre);
  margin: 0;
}
.mc-carte-stage__e { font-size: 14px; color: var(--wp--preset--color--neutre-3); margin: 0; }
/* marge auto : les liens s'alignent en bas quels que soient les titres */
.mc-carte-stage__l { margin: auto 0 0; font-size: 14px; font-weight: 600; padding-top: 10px; }

/* Présentation en deux colonnes */
.mc-presentation { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mc-presentation__img {
  min-height: 320px;
  background: var(--mc-creme-fonce);
  border: 1px solid var(--mc-filet);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--neutre-3);
  font-size: 13px;
}

@media (max-width: 900px) {
  .mc-stages-accueil { grid-template-columns: 1fr; }
  .mc-presentation { grid-template-columns: 1fr; gap: 32px; }
  .mc-50ans { padding: 20px 24px; }
}

/* ============================================================
   ENSEIGNANTS (écran 3a)
   ============================================================ */

/* Trame diagonale des emplacements de photo, reprise de la planche :
   elle dit « image à venir » sans faire croire à un cadre vide. */
.mc-trame {
  background: repeating-linear-gradient(45deg,
    var(--mc-filet) 0 6px, var(--mc-creme-fonce) 6px 12px);
}

.mc-prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mc-prof-carte {
  background: #fff;
  border: 1px solid var(--mc-filet);
  display: flex;
  flex-direction: column;
}
.mc-prof-carte__ph {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--mc-texte-doux);
}
/* Sans cette règle, une vraie photo déposée dans une carte débordait du
   cadre : seul l'emplacement en trame diagonale avait été prévu. */
.mc-prof-carte__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
/* Colonne, et non simple bloc : l'invite « Voir la fiche » se cale en
   bas de carte, à la même hauteur d'une carte à l'autre, quelle que
   soit la longueur des biographies. */
.mc-prof-carte__c {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mc-prof-carte__n {
  font-family: var(--mc-font-titre);
  font-size: 22px;
  color: var(--mc-encre);
  margin: 0 0 6px;
}
.mc-prof-carte__r {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mc-safran);
  margin: 0 0 10px;
}
.mc-prof-carte__d { font-size: 15px; line-height: 1.55; color: var(--mc-texte); margin: 0; }

/* Toute la carte est cliquable, mais l'invite reste écrite : c'est le
   choix déjà fait sur les lignes du programme, et pour la même raison —
   une carte qui s'ombre au survol ne dit rien à qui ne survole pas. */
a.mc-prof-carte {
  color: inherit;
  text-decoration: none;
}
a.mc-prof-carte:hover { box-shadow: 0 3px 10px rgba(43, 36, 32, .13); }
a.mc-prof-carte:hover .mc-prof-carte__l { text-decoration: underline; }
.mc-prof-carte__l {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mc-rouge);
}

/* Maîtres invités : une liste, pas des cartes. Ils passent, les
   résidents restent — la hiérarchie visuelle doit le dire. */
.mc-invite {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mc-filet);
}
.mc-invite__ph { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; }
.mc-invite__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.mc-invite__t { flex: 1; min-width: 0; }
.mc-invite__n { font-family: var(--mc-font-titre); font-size: 19px; color: var(--mc-encre); margin: 0 0 2px; }
.mc-invite__s { font-size: 14.5px; color: var(--mc-texte-doux); margin: 0; }
.mc-invite__d { flex: none; font-size: 14.5px; font-weight: 600; color: var(--mc-rouge); white-space: nowrap; margin: 0; }

a.mc-invite { color: inherit; text-decoration: none; }
a.mc-invite:hover .mc-invite__d { text-decoration: underline; }
/* Le dernier filet tomberait dans le vide, sous le dernier nom. */
.mc-invites > :last-child { border-bottom: none; }

/* ============================================================
   MÉDIATHÈQUE (écran 3b)
   ============================================================ */

.mc-media-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--mc-filet);
}
.mc-media-recherche {
  margin-left: auto;
  border: 1px solid var(--mc-filet);
  border-radius: 20px;
  padding: 9px 20px;
  font-size: 14px;
  min-width: 260px;
  background: #fff;
  color: var(--mc-texte-doux);
}

/* Le champ est enveloppé dans un formulaire : c'est lui qui porte la
   poussée à droite. Sur le champ seul, la règle mobile plus bas n'aurait
   aucune prise — le formulaire resterait collé à droite. */
.mc-media-barre form { margin-left: auto; }

.mc-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mc-media-carte {
  background: #fff;
  border: 1px solid var(--mc-filet);
  display: flex;
  flex-direction: column;
}
.mc-media-carte__ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
/* La miniature remplit le cadre : les vignettes de la chaîne sont en
   16/9, le cadre des cartes en 16/10 — sans recadrage, chaque carte
   porterait deux bandes et la grille perdrait sa ligne. */
.mc-media-carte__i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mc-media-carte__b {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  color: #fff;
}
/* Le format se lit à la couleur avant de se lire au mot : rouge pour la
   vidéo, safran pour l'audio, or pour le texte. */
.mc-media-carte__b--video { background: var(--mc-rouge); }
.mc-media-carte__b--audio { background: var(--mc-safran); }
.mc-media-carte__b--texte { background: var(--mc-or); color: var(--mc-encre); }
.mc-media-carte__t {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(43, 36, 32, .82);
  color: #fff;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 3px;
}
.mc-media-carte__c { padding: 16px 18px 20px; }
.mc-media-carte__n {
  font-family: var(--mc-font-titre);
  font-size: 17px;
  line-height: 1.3;
  color: var(--mc-encre);
  margin: 0 0 6px;
}
.mc-media-carte__m { font-size: 13.5px; color: var(--mc-texte-doux); margin: 0; }

/* ============================================================
   LECTEUR VIDÉO D'UNE FICHE
   ============================================================ */

/* La façade : une image et un bouton. L'iframe de YouTube prend sa
   place au clic, dans le même cadre — d'où le 16/9 posé des deux
   côtés, sans quoi la page sauterait au moment de la lecture. */
.mc-video { margin: 0 0 28px; }
.mc-video__b {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: var(--mc-encre);
  overflow: hidden;
}
.mc-video__b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-video__b:focus-visible { outline: 3px solid var(--mc-or); outline-offset: 2px; }

/* Le rectangle de lecture, rouge comme le badge « vidéo » des cartes :
   c'est le même format, il se signale de la même couleur. */
.mc-video__p {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  border-radius: 10px;
  background: var(--mc-rouge);
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}
.mc-video__b:hover .mc-video__p { opacity: 1; transform: scale(1.06); }
.mc-video__p::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.mc-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.mc-video__n { font-size: 13px; color: var(--mc-texte-doux); margin: 8px 0 0; }

/* ---------- Liste des parties ----------
   Un enseignement de quatre séances de deux heures ne se parcourt pas
   sans elle. Elle reste sous le lecteur et non à côté : au-delà de
   trois parties, une colonne latérale déborderait la hauteur du
   lecteur et la fiche perdrait sa ligne.                            */
.mc-pistes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--mc-filet);
  background: #fff;
}
.mc-pistes__i + .mc-pistes__i { border-top: 1px solid var(--mc-filet); }
.mc-pistes__i > button {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: var(--mc-texte);
}
.mc-pistes__i > button:hover { background: var(--mc-creme-fonce); }
.mc-pistes__i > button:focus-visible { outline: 2px solid var(--mc-or); outline-offset: -2px; }

/* La partie en cours de lecture. Le filet rouge à gauche la tient même
   quand le fond crème ne suffit pas — sur un écran mal réglé, ou pour
   qui distingue mal deux beiges voisins. */
.mc-pistes__i > button[aria-current] {
  background: var(--mc-creme-fonce);
  box-shadow: inset 3px 0 0 var(--mc-rouge);
}
.mc-pistes__i > button[aria-current] .mc-pistes__t { font-weight: 600; }

.mc-pistes__n {
  flex: none;
  width: 1.6em;
  font-family: var(--mc-font-titre);
  font-size: 16px;
  color: var(--mc-safran);
}
.mc-pistes__t { flex: 1; line-height: 1.35; }
.mc-pistes__d {
  flex: none;
  font-size: 13.5px;
  color: var(--mc-texte-doux);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mc-pistes__i > button { flex-wrap: wrap; gap: 4px 12px; }
  .mc-pistes__t { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-video__p { transition: none; }
  .mc-video__b:hover .mc-video__p { transform: none; }
}

/* ============================================================
   FICHE D'ENSEIGNANT
   ============================================================ */

/* En-tête de fiche : portrait à gauche, identité à droite. Cadrage 3/4,
   le même que les cartes de la rubrique — deux cadrages pour la même
   personne se remarqueraient d'une page à l'autre.

   3/4 et non 4/3 : un portrait de personne est vertical. Le cadre
   paysage d'origine coupait la moitié de toute photo prise debout, et
   obligeait à rogner à la main avant dépôt. La colonne passe de 280 à
   340 px — le portrait tient maintenant la hauteur de la biographie. */
.mc-enseignant-tete {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.mc-enseignant-tete__ph {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--mc-filet);
  overflow: hidden;
  background: var(--mc-creme-fonce);
}
.mc-enseignant-tete__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ce qui dépasse est rogné en bas, pas en haut : sur un portrait,
     le bas de la robe se perd sans dommage, le haut du crâne non. */
  object-position: center 28%;
  display: block;
}

/* La biographie est la description native du terme. Mesure limitée :
   au-delà d'environ 70 signes par ligne, l'œil perd la ligne suivante
   — c'est la règle que l'architecture pose au § 7. */
.mc-enseignant-bio {
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--mc-texte);
  margin-top: 18px;
}
.mc-enseignant-bio p { margin: 0 0 14px; }
.mc-enseignant-bio p:last-child { margin-bottom: 0; }

/* Les quatre axes secondaires de la Médiathèque. Des listes déroulantes
   plutôt que des pastilles : à ce nombre d'enseignants et de thèmes, les
   pastilles rempliraient l'écran avant la première carte. */
.mc-media-axes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0 4px;
}
.mc-media-axes select {
  font-family: inherit;
  font-size: 14px;
  color: var(--mc-texte);
  background: #fff;
  border: 1px solid var(--mc-filet);
  border-radius: 3px;
  padding: 8px 12px;
}
.mc-media-axes button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--mc-rouge);
  border: none;
  border-radius: 3px;
  padding: 9px 20px;
  cursor: pointer;
}
.mc-media-axes button:hover { background: #7a2624; }
.mc-media-axes a { font-size: 14px; font-weight: 600; }

.mc-media-plus {
  border: 1px dashed var(--mc-filet);
  background: var(--mc-creme-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-rouge);
  font-weight: 600;
  font-size: 14.5px;
  min-height: 200px;
  text-align: center;
  padding: 20px;
}

/* Enseignement à transmission — le marqueur reste dans la liste.
   Masquer ces enregistrements laisserait croire qu'ils n'existent pas ;
   les montrer explique la démarche et indique par où passer. */
.mc-media-carte__b--reserve { background: var(--mc-encre); }
.mc-media-carte__r {
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-rouge);
  margin: 10px 0 0;
}

/* Le titre d'une carte est un lien, mais il ne se peint pas en rouge :
   sur quatre titres alignés, la couleur de lien fait clignoter la
   grille alors que la carte entière est déjà la cible. */
.mc-media-carte__n a,
.mc-prof-carte__n a { color: inherit; text-decoration: none; }
.mc-media-carte__n a:hover,
.mc-prof-carte__n a:hover { color: var(--mc-rouge); }

@media (max-width: 1100px) {
  .mc-media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mc-prof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mc-media-barre form { margin-left: 0; width: 100%; }
  .mc-media-recherche { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
  .mc-enseignant-tete { grid-template-columns: 1fr; gap: 24px; }
  .mc-enseignant-tete__ph { max-width: 300px; }
}
@media (max-width: 600px) {
  .mc-prof-grid, .mc-media-grid { grid-template-columns: 1fr; }
  .mc-media-axes select, .mc-media-axes button { width: 100%; }
  .mc-invite { align-items: flex-start; flex-wrap: wrap; }
  .mc-invite__d { width: 100%; padding-left: 72px; }
}