/* ============
   CILA — custom.css

   SOMMAIRE   1. Socle (variables, typographie, liens) · 2. Fiches de
   contenu · 3. Listes · 4. Navigation · 5. Accueil · 6. Recherche.

   CLASSES DE RÔLE — saisies dans Contenu > Champs > Options >
   « Classe d'affichage » :
       cila-meta       ligne libellé / valeur
       cila-visuel     image en colonne de gauche, pleine hauteur
       cila-bandeau    image pleine largeur en tête de carte
       cila-texte      bloc de texte long
       cila-liste      liste de références
       cila-pastilles  valeurs multiples en étiquettes
       cila-bouton     lien en bouton plein
       cila-fichier    lien en bouton de téléchargement
       cila-pastille   valeur unique en étiquette
       cila-encadre    bloc sur fond teinté
   Un champ sans classe s'affiche en libellé + valeur. Correspondance champ
   par champ : voir « CILA Guide des classes ».

   SPÉCIFICITÉ : le gabarit des champs est écrit en :where(), donc de
   spécificité nulle — une simple classe de rôle le surcharge. Conservez ce
   principe pour toute règle ajoutée, sinon il faudra surenchérir.
   ============ */


/* ============
   1. SOCLE
   ============ */

:root {
  /* Marqueur de version — permet de vérifier en une commande quelle
     feuille est réellement chargée sur le site :
         getComputedStyle(document.documentElement).getPropertyValue('--cila-version')
     Si la réponse ne correspond pas à la dernière version livrée, le CSS
     en place est périmé (ou le cache Joomla n'a pas été vidé). */
  --cila-version: 'v214';

  --cila-version-note: 'v214 : mesure de lecture supprimee partout, textes en pleine largeur';

  /* Couleurs */
  --cila-accent:      oklch(40% 0.11 25);
  --cila-accent-dark: oklch(32% 0.11 25);
  --cila-ink:         oklch(22% 0.01 60);
  --cila-ink-mute:    oklch(52% 0.01 60);
  --cila-line:        oklch(90% 0.008 60);
  --cila-line-soft:   oklch(94.5% 0.006 60);
  --cila-surface:     oklch(96% 0.005 60);
  --cila-white:       oklch(100% 0 0);

  /* Typographie */
  --cila-on-accent:   oklch(98% 0.005 60);   /* texte sur aplat accent — 19 emplois */
  --cila-line-strong: oklch(88% 0.008 60);   /* filet appuyé, un cran sous --cila-line */
  --cila-accent-pale: oklch(94% 0.025 25);   /* aplat rosé : pastilles, badges, terme trouvé */
  --cila-surface-warm: oklch(97% 0.012 60);  /* fond d'encadré chaud (teinte ramenée de 70 à 60) */
  --cila-shadow-thin: oklch(0% 0 0 / 0.05);
  --cila-shadow-soft: oklch(0% 0 0 / 0.085);
  --cila-shadow:      oklch(0% 0 0 / 0.13);

  --cila-serif: 'Spectral', Georgia, serif;
  --cila-sans:  'Public Sans', system-ui, -apple-system, sans-serif;

  /* Espacements */
  --cila-pad:    38px;   /* respiration interne des cartes */
  --cila-gap:    40px;   /* gouttière entre sidemenu et contenu */
  --cila-radius: 8px;
}

body {
  font-family: var(--cila-sans);
  background: var(--cila-white);
}

h1, h2, h3, h4 {
  font-family: var(--cila-serif);
  font-weight: 600;
  text-wrap: pretty;
  color: var(--cila-ink);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Couleur des liens/texte de base désormais gérée par le Theme Color T4
   (Base > Text/Link/Link Hover) — retirée d'ici pour éviter le doublon. */

img { max-width: 100%; height: auto; }

/* ============
   2. FICHES DE CONTENU
   ============ */

/* --- Fiche MEMBRE (article unitaire) ------------
   Scopée en :has(.photo-du-membre) et non par Classe de page : on arrive
   sur une fiche depuis la liste, elle n'a pas de lien de menu propre.
   Deux colonnes, sur le modèle validé (CILA Fiche membre.dc.html) :
   à gauche titre, qualité/rattachement, fonction, présentation, axes,
   publications ; à droite photo ronde puis contact.
   display:contents sur .fields-container fait remonter les champs aux côtés
   de .page-header, ce qui permet de répartir titre ET champs dans une même
   grille ; il ne peint aucune boîte, donc cadre, ombre et fond de carte
   disparaissent d'eux-mêmes — pas de :not() à écrire. L'ordre DOM réel ne
   change pas : les :first-child/:last-child plus haut visent les mêmes
   éléments qu'avant. */
.com-content-article:has(.photo-du-membre) {
  display: grid;
  /* v101 — 260px au lieu de 320 : le panneau de photo devient carré
     (200px de cercle + 20px de marge = 240 de haut pour 260 de large),
     au lieu du rectangle allongé vers le bas constaté sur la fiche
     Anne Tassel. */
  grid-template-columns: 1fr 260px;
  align-items: start;   /* sans ceci (stretch par défaut), le titre et les
                            tags s'étirent pour remplir la hauteur de leur
                            ligne — dictée par la photo, plus haute — et
                            laissent un grand vide sous leur texte */
  gap: 0 56px;
  align-items: start;
}
.com-content-article:has(.photo-du-membre) .fields-container {
  display: contents;
}

/* Colonne 1 : titre, puis champs texte dans l'ordre de création Joomla.
   ORDER EN ENTIERS UNIQUEMENT — « order:1.5 » est invalide en CSS (la
   propriété n'accepte que des entiers) et se voit silencieusement
   ignorée, ramenée à 0 : c'est ce qui faisait passer les tags avant le
   titre. Tout élément place à sa place dans le flux (y compris ceux non
   prévus au départ, comme la navigation d'article précédent/suivant)
   DOIT recevoir un order explicite, sinon il vaut 0 par défaut et
   remonte avant le titre (order:1). */
.com-content-article:has(.photo-du-membre) .page-header { grid-column: 1; order: 1; }
.com-content-article:has(.photo-du-membre) .tags.list-inline { grid-column: 1; order: 2; }
.com-content-article:has(.photo-du-membre) .field-entry.qualite { grid-column: 1; order: 3; }
.com-content-article:has(.photo-du-membre) .field-entry.rattachement { grid-column: 1; order: 4; }
.com-content-article:has(.photo-du-membre) .field-entry.fonction-au-cila { grid-column: 1; order: 5; }
.com-content-article:has(.photo-du-membre) .field-entry.presentation { grid-column: 1; order: 6; }
/* v97 — order explicite indispensable : ce champ a été créé après la mise
   en page de la fiche, il valait donc 0 par défaut et remontait AVANT le
   titre (actualités affichées en haut de la carte). Placé après la
   présentation, avant les axes, comme les autres blocs de texte. */
.com-content-article:has(.photo-du-membre) .field-entry.actualites { grid-column: 1; order: 7; }
.com-content-article:has(.photo-du-membre) .field-entry.axes-de-recherche { grid-column: 1; order: 8; }
.com-content-article:has(.photo-du-membre) .field-entry.publications { grid-column: 1; order: 9; }
.com-content-article:has(.photo-du-membre) .article-body { grid-column: 1; order: 10; }
.com-content-article:has(.photo-du-membre) .pagenavigation { display: none; }
/* v105 — voir le bloc « ICÔNES D'ÉDITION » en fin de fichier : ce
   conteneur n'est plus masqué en bloc, seules ses métadonnées le sont,
   pour que le crayon de modification reste accessible. */

/* Colonne 2 : photo + contact regroupés par le PHP (v3) dans un même
   <div class="cila-aside-sticky">. Ce div est L'UNIQUE élément de grille
   de la colonne 2 : le sticky s'y applique proprement (un seul élément,
   aucune ligne de grille à faire déborder), et un simple flex column
   interne maintient photo et contact à distance fixe l'un de l'autre,
   y compris pendant le défilement. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky {
  grid-column: 2;
  /* Historique du diagnostic (vide sous le titre) : voir CILA Fichiers
     livrés, entrées v48–v50. Cause retenue : "-1" ne se résout que par
     rapport à une grille explicite (jamais définie ici) ; "span 30"
     s'étend correctement dans la grille implicite. */
  grid-row: 1 / span 30;
  order: 99;
  position: sticky;
  top: 24px;
  align-self: start;
  /* v103 — 100% de la piste de grille, et non plus une largeur figée.
     Le 228px d'origine datait d'une colonne de 320 : depuis la v101 la
     piste fait 260, le conteneur était donc 32px trop étroit. Pire, le
     panneau photo (cercle 200 + 2 × 20 de marge = 240 de largeur
     minimale) débordait ce parent trop court tandis que le bloc contact
     s'y conformait — d'où deux panneaux de largeurs différentes sur la
     fiche François Marty. En 100% les deux suivent la colonne, quelle que
     soit sa valeur. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* v104 — GÉOMÉTRIE COMMUNE AUX PANNEAUX DE LA COLONNE. Photo et contact
   étaient dimensionnés par deux règles distinctes, l'une posant
   width/box-sizing et l'autre non : le moindre écart de modèle de boîte
   suffisait à les rendre de largeurs différentes (constaté sur les fiches
   François Marty puis Catherine Matha). Une seule déclaration sur TOUS les
   enfants directs du conteneur rend l'écart impossible, y compris pour un
   bloc ajouté plus tard. align-self:stretch est explicite — c'est la valeur
   par défaut, mais la rendre visible évite qu'une surcharge du gabarit la
   remplace sans qu'on s'en aperçoive. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky > * {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}

.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel {
  background: var(--cila-surface);
  border-radius: 6px;
  padding: 20px;   /* v101 — 24 → 20, panneau carré */
  display: flex;
  align-items: center;
  justify-content: center;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel .field-value {
  /* v98 — le cercle est porté par le CONTENEUR, comme sur les cartes de
     liste, et non plus seulement par l'&lt;img&gt;. C'est la même recette que
     .cila-liste-membres : boîte carrée en overflow:hidden, image en cover
     à l'intérieur. Un rayon posé sur la seule image ne découpe rien quand
     celle-ci est enveloppée (ancre posée par fields/render.php) ou quand
     elle porte ses propres marges blanches — d'où la photo restée carrée
     sur la fiche Brigitte Blanquet. */
  width: 200px;   /* v101 — 180 → 200 dans une colonne de 260 */
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cila-line);
  box-shadow: 0 1px 6px var(--cila-shadow);
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel .field-value-wrap,
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel .field-value a {
  display: block;
  width: 100%;
  height: 100%;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  box-shadow: none;
  /* Sécurité : si l'image ne charge pas, le texte alt de secours ne doit
     jamais déborder du cercle. */
  font-size: 0;
  color: transparent;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .field-entry.cila-encadre {
  /* .cila-encadre (rôle générique) pose une marge de var(--cila-pad) —
     right ET left — pour un usage en pleine largeur de carte. Ici les
     panneaux doivent être flush avec la photo au-dessus : on la remet à 0.
     v93 : sélecteur élargi de .contact à tous les .cila-encadre de
     l'encart (contact, telephone, adresse regroupés par fields-render v4),
     sinon téléphone et adresse gardaient la marge générique — gros écarts
     et panneaux rétrécis constatés sur la fiche Houssier. */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
/* v94 — email, téléphone et adresse fusionnés en UN SEUL bloc visuel
   (comme la maquette) : le gap de 16px du flex parent est annulé entre
   deux .cila-encadre consécutifs par une marge négative équivalente, et
   les coins ne sont arrondis qu'aux extrémités du groupe. La séparation
   interne se fait par le padding de chaque panneau. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .field-entry.cila-encadre {
  border-radius: 0;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .field-entry.cila-encadre + .field-entry.cila-encadre {
  margin-top: -16px;
  padding-top: 4px;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-visuel + .field-entry.cila-encadre {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .field-entry.cila-encadre:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* v101 — BLOC CONTACT. fields-render.php v5 regroupe les champs de
   contact présents dans un <div class="cila-contact-bloc"> précédé d'un
   titre commun « Contact ». Le panneau teinté est désormais porté par ce
   bloc, et non plus par chaque champ : plus besoin de souder trois
   panneaux entre eux à la marge négative (v94), ce qui rendait le
   résultat dépendant de l'ordre et du nombre de champs remplis. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc {
  background: var(--cila-surface);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cila-accent);
}
/* Les champs redeviennent de simples lignes à l'intérieur du bloc :
   ni fond, ni marge, ni rayon propres. Surcharge volontaire des règles
   .cila-encadre ci-dessus, y compris la marge négative de la v94. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc .field-entry.cila-encadre {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* v103 — COUPURE DES ADRESSES ÉLECTRONIQUES. Un email est un mot sans
   espace : aucun point de coupure naturel, la largeur minimale de la ligne
   est celle de l'adresse entière et le texte sort du panneau (constaté sur
   la fiche François Marty). overflow-wrap:anywhere autorise la coupure et,
   surtout, la fait entrer dans le calcul de la largeur minimale — ce que
   word-break:break-word ne fait pas. min-width:0 sur chaque maillon : un
   enfant de flex refuse par défaut de descendre sous sa largeur min-content.
   joomla-hidden-mail, élément personnalisé donc inline, est passé en block
   pour transmettre la contrainte. */
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc .field-value-wrap,
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc .field-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc joomla-hidden-mail {
  display: block;
  min-width: 0;
}
.com-content-article:has(.photo-du-membre) .cila-aside-sticky .cila-contact-bloc a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* v100 — FICHE SANS CONTACT, FILET DE SÉCURITÉ. Depuis la v5 de
   fields-render.php, le conteneur .cila-aside-sticky est créé dès que la
   photo est présente : ce cas ne devrait plus se produire. Les règles
   sont conservées pour que la fiche reste correcte si la surcharge PHP
   n'est pas encore déployée sur le serveur. Sans conteneur, le champ
   photo reste enfant direct de .fields-container, aucune règle préfixée
   .cila-aside-sticky ne s'applique, et le gabarit générique rend la photo
   carrée (constaté sur la fiche Brigitte Blanquet). */
.com-content-article:has(.photo-du-membre) .fields-container > .field-entry.photo-du-membre {
  grid-column: 2;
  grid-row: 1 / span 30;
  order: 99;
  position: sticky;
  top: 24px;
  align-self: start;
  width: 260px;   /* v101 — aligné sur la largeur de colonne */
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 6px;
  background: var(--cila-surface);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Apparence de la photo, commune aux DEUX cas (avec ou sans wrapper) :
   cercle porté par le conteneur, image en cover à l'intérieur — même
   recette que les cartes de liste. */
.com-content-article:has(.photo-du-membre) .field-entry.photo-du-membre .field-label { display: none; }
.com-content-article:has(.photo-du-membre) .field-entry.photo-du-membre .field-value-wrap {
  display: block;
  width: 100%;
}
.com-content-article:has(.photo-du-membre) .field-entry.photo-du-membre .field-value {
  display: block;
  width: 200px;   /* v101 — 180 → 200 */
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cila-line);
  box-shadow: 0 1px 6px var(--cila-shadow);
}
.com-content-article:has(.photo-du-membre) .field-entry.photo-du-membre .field-value a {
  display: block;
  width: 100%;
  height: 100%;
}
.com-content-article:has(.photo-du-membre) .field-entry.photo-du-membre img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  box-shadow: none;
  /* Si l'image ne charge pas, le texte alt de secours ne doit pas
     déborder du cercle. */
  font-size: 0;
  color: transparent;
}

.com-content-article:has(.photo-du-membre) .tags.list-inline {
  grid-column: 1;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.com-content-article:has(.photo-du-membre) .tags.list-inline .badge {
  display: inline-block;
  padding: 5px 12px;
  background: var(--cila-surface);
  color: var(--cila-accent);
  border: 1px solid var(--cila-line);
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.com-content-article:has(.photo-du-membre) .tags.list-inline .badge:hover {
  background: var(--cila-accent-pale);
  text-decoration: none;
}

/* --- Fiche ÉVÉNEMENT (article unitaire) ------------
   Scopée via :has(.affiche-de-levenement), même logique que la fiche
   Membre. Pas de mise en page deux colonnes ici (pas de demande en ce
   sens) : seul le tag natif est restylé en petite étiquette propre,
   identique à celle de la fiche Membre, au lieu du badge Bootstrap bleu
   par défaut (.badge.badge-info). */
.com-content-article:has(.affiche-de-levenement) .tags.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.com-content-article:has(.affiche-de-levenement) .tags.list-inline .badge.badge-info {
  display: inline-block;
  padding: 5px 12px;
  background: var(--cila-surface);
  color: var(--cila-accent);
  border: 1px solid var(--cila-line);
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.com-content-article:has(.affiche-de-levenement) .tags.list-inline .badge.badge-info:hover {
  background: var(--cila-accent-pale);
  text-decoration: none;
}

@media (max-width: 900px) {
  .com-content-article:has(.photo-du-membre) { grid-template-columns: minmax(0, 1fr); }
  .com-content-article:has(.photo-du-membre) .cila-aside-sticky,
  .com-content-article:has(.photo-du-membre) .fields-container > .field-entry.photo-du-membre,
  .com-content-article:has(.photo-du-membre) .page-header,
  .com-content-article:has(.photo-du-membre) .tags.list-inline,
  .com-content-article:has(.photo-du-membre) .field-entry.qualite,
  .com-content-article:has(.photo-du-membre) .field-entry.rattachement,
  .com-content-article:has(.photo-du-membre) .field-entry.fonction-au-cila,
  .com-content-article:has(.photo-du-membre) .field-entry.presentation,
  .com-content-article:has(.photo-du-membre) .field-entry.actualites,
  .com-content-article:has(.photo-du-membre) .field-entry.axes-de-recherche,
  .com-content-article:has(.photo-du-membre) .field-entry.publications,
  .com-content-article:has(.photo-du-membre) .pagenavigation {
    grid-column: 1;
    grid-row: auto;
    position: static;
    margin-top: 0;
  }
  .com-content-article:has(.photo-du-membre) .cila-aside-sticky { order: 1; }
  .com-content-article:has(.photo-du-membre) .fields-container > .field-entry.photo-du-membre { order: 1; width: auto; }
  .com-content-article:has(.photo-du-membre) .page-header { order: 2; }
  .com-content-article:has(.photo-du-membre) .tags.list-inline { order: 3; }
  .com-content-article:has(.photo-du-membre) .field-entry.qualite { order: 4; }
  .com-content-article:has(.photo-du-membre) .field-entry.rattachement { order: 5; }
  .com-content-article:has(.photo-du-membre) .field-entry.fonction-au-cila { order: 6; }
  .com-content-article:has(.photo-du-membre) .field-entry.presentation { order: 8; }
  .com-content-article:has(.photo-du-membre) .field-entry.actualites { order: 9; }
  .com-content-article:has(.photo-du-membre) .field-entry.axes-de-recherche { order: 10; }
  .com-content-article:has(.photo-du-membre) .field-entry.publications { order: 11; }
  .com-content-article:has(.photo-du-membre) .pagenavigation { order: 12; }
}

/* ============
   1. TITRE ET MÉTADONNÉES NATIVES
   Auteur, date et compteur de clics sont masqués : la date de publication
   Joomla contredirait l'année de parution réelle.
   ============ */

.com-content-article.item-page { padding: 0; }

/* v148 — TITRE D'ARTICLE UNITAIRE, TOUTES RUBRIQUES.
   Il était en Spectral 25-31px : un titre de couverture, qui pesait autant
   que le nom de la rubrique et faisait doublon avec lui en haut de page.
   Il reprend désormais la recette des en-têtes de module d'accueil et des
   titres de rubrique — Public Sans, gras, capitales espacées, en accent.

   15px et non 14px : à cette largeur de colonne, la mesure des modules
   d'accueil (14px, colonne étroite) se perd. C'est le seul écart avec la
   recette d'origine.

   La marge basse passe de 8 à 20px : des capitales espacées ont besoin de
   plus d'air sous elles qu'un titre en bas-de-casse, sinon elles se collent
   aux métadonnées. */
.com-content-article .page-header { margin: 0 0 20px; padding: 0; border: 0; }

/* v171 — un seul rendu pour TOUS les titres de page unitaire, quel que soit
   le composant, et sans capitales : 18 px, sans sérif, gras, en accent. Les
   capitales espacées de la version précédente écrasaient un titre long et
   entraient en concurrence avec les surtitres, eux vraiment en capitales. */
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.com-content-article .page-header h1 a,
.com-content-article .page-header h2 a,
.page-header h1,
.page-header h1 a,
.page-subheader .page-subtitle,
.page-subheader .page-subtitle .subheading-category,
h1 .subheading-category {
  font-family: var(--cila-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  color: var(--cila-accent);
  margin: 0;
}
.com-content-article .page-header h1 a:hover,
.com-content-article .page-header h2 a:hover {
  color: var(--cila-accent-dark);
  text-decoration: underline;
}

/* v149 — EXCEPTION FICHES MEMBRE. Un nom de personne en capitales espacées
   se lit moins bien qu'en bas-de-casse, et il perd du poids face à la photo
   de la colonne voisine. Seule la casse change : la police, la taille, la
   graisse et la couleur de la v148 sont conservées, pour que la fiche reste
   de la même famille que les autres articles.
   Ciblage par :has(.photo-du-membre), comme tout le reste de la fiche
   Membre — ces pages n'ont pas de classe de page propre. */
.com-content-article:has(.photo-du-membre) .page-header h1,
.com-content-article:has(.photo-du-membre) .page-header h2 {
  text-transform: none;
  letter-spacing: 0.01em;
}

.com-content-article .article-aside { margin: 0 0 26px; }
.com-content-article .article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--cila-ink-mute);
}
.com-content-article .article-info dt,
.com-content-article .article-info dd.createdby,
.com-content-article .article-info dd.hits,
.com-content-article .article-info dd.published { display: none; }
.com-content-article .article-info dd { margin: 0; }
.com-content-article .article-info dd.category-name a { font-weight: 600; }

.com-content-article .article-body:empty { display: none; }

/* ============
   2. LA CARTE
   Le conteneur de champs EST la carte : visuel à gauche, contenu à droite.
   ============ */

.fields-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 21%, 236px);
  gap: 0;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--cila-white);
  border: 1px solid var(--cila-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--cila-shadow-thin);
}

/* ============
   3. GABARIT PAR DÉFAUT (spécificité nulle, voir en-tête)
   ============ */

.fields-container :where(.field-entry) {
  grid-column: 1;
  margin: 0;
  padding: 14px var(--cila-pad);
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 20px;
  border-bottom: 1px solid var(--cila-line-soft);
}
/* Respiration haute et basse — INDÉPENDANTE DE L'ORDRE DES CHAMPS.
   Le visuel et le bandeau sont exclus : ils portent leur propre mise en
   page et sont souvent placés en tête dans l'ordre de tri Joomla.
   Ces règles visent le premier et le dernier bloc de CONTENU, que
   l'image soit avant, après, ou au milieu. Ne les remplacez pas par un
   simple :first-child : le réordonnancement des champs casserait
   silencieusement l'alignement haut de la carte. */
.fields-container :where(.field-entry:not(.cila-visuel, .cila-bandeau):first-child),
.fields-container :where(.cila-visuel, .cila-bandeau) + :where(.field-entry:not(.cila-visuel, .cila-bandeau)) {
  padding-top: 34px;
}
.fields-container :where(.field-entry:not(.cila-visuel, .cila-bandeau):last-child),
.fields-container :where(.field-entry:not(.cila-visuel, .cila-bandeau):has(+ .cila-visuel:last-child)),
.fields-container :where(.field-entry:not(.cila-visuel, .cila-bandeau):has(+ .cila-bandeau:last-child)) {
  border-bottom: 0;
  padding-bottom: 30px;
}

.fields-container :where(.field-label) {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  line-height: 1.8;
}
.fields-container :where(.field-value) {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cila-ink);
}
.fields-container :where(.field-value-wrap) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}
.fields-container :where(.field-prefix, .field-suffix) {
  font-size: 15px;
  color: var(--cila-ink-mute);
}
.fields-container :where(.field-value p) { margin: 0 0 13px; }
.fields-container :where(.field-value p:last-child) { margin: 0; }

/* Titre de section, partagé par les rôles texte / liste / pastilles */
.fields-container :where(.cila-texte, .cila-liste, .cila-pastilles) .field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cila-accent);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* ============
   4. LES DIX RÔLES
   ============ */

/* --- Métadonnée : identique au gabarit par défaut ------------ */
.fields-container .cila-meta { /* rien à ajouter */ }

/* --- Visuel en colonne de droite ------------
   L'image est CONTENUE, jamais rognée : une couverture portrait, un format
   paysage ou un carré s'affichent entiers. Le panneau garde la même largeur
   et le même fond d'une fiche à l'autre, ce qui aligne les pages malgré des
   images hétérogènes ; seule sa hauteur varie un peu.

   max-height plafonne les images très hautes ; width:auto les empêche de
   s'étirer. Ne remplacez pas contain par cover : les formats paysage
   seraient amputés.                                                       */
.fields-container .cila-visuel {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 60;
  align-self: start;
  margin: 0;
  padding: 30px 26px;
  border: 0;
  border-left: 1px solid var(--cila-line);
  background: var(--cila-surface);
}
.fields-container .cila-visuel .field-label { display: none; }

/* Boîte média de HAUTEUR FIXE : c'est elle qui stabilise la mise en page.
   Sans elle, une couverture portrait occupe 230px de haut et un visuel
   paysage seulement 99px — le panneau change de hauteur à chaque fiche.
   Ici la boîte ne bouge pas et l'image se centre dedans, quel que soit
   son ratio. Ne remplacez pas cette hauteur par un max-height sur l'image :
   c'est exactement ce qui produisait l'instabilité. */
.fields-container .cila-visuel .field-value-wrap { display: block; margin: 0; padding: 0; }
.fields-container .cila-visuel .field-value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  margin: 0;
  padding: 0;
}
.fields-container .cila-visuel img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* jamais cover : un paysage serait amputé */
  border-radius: 2px;
  box-shadow: 0 1px 8px var(--cila-shadow);
}

/* --- Bandeau pleine largeur ------------ */
.fields-container .cila-bandeau {
  display: block;
  grid-column: 1 / -1;
  order: -1;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cila-line);
}
.fields-container .cila-bandeau .field-label { display: none; }
/* field-value-wrap n'est pas mis en pleine largeur par défaut (flex,
   largeur au contenu) : sans ceci, l'image de 391×545 restait à sa
   taille intrinsèque au lieu de remplir le bandeau (constaté sur la
   fiche événement, colonne de gauche seulement, gros vide à droite). */
.fields-container .cila-bandeau .field-value-wrap { display: block; width: 100%; }
.fields-container .cila-bandeau .field-value { width: 100%; }
.fields-container .cila-bandeau img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
}
/* Fiche Événement : affiches en format portrait, souvent avec le texte
   utile (programme, tarifs) en haut du visuel. Boîte plus haute et
   recadrage ancré en haut plutôt qu'au centre, pour perdre moins
   d'information qu'un recadrage centré à 320px. */
.com-content-article:has(.affiche-de-levenement) .fields-container .cila-bandeau img {
  height: 520px;
  object-position: top;
}

/* --- Bloc de texte long, liste et pastilles ------------ */
.fields-container .cila-texte,
.fields-container .cila-liste,
.fields-container .cila-pastilles {
  display: block;
  padding: 26px var(--cila-pad) 0;
  margin-top: 22px;
  border-top: 1px solid var(--cila-line-soft);
  border-bottom: 0;
}
/* Pas de mesure de lecture : les blocs de texte et de liste occupent toute
   la largeur de la carte (choix client, v214). */
.fields-container .cila-texte .field-value,
.fields-container .cila-liste .field-value {
  display: block;
  font-size: 15.5px;
  line-height: 1.68;
  color: oklch(26% 0.01 60);
}

.fields-container .cila-liste .field-value :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.fields-container .cila-liste .field-value :where(p, li) {
  margin: 0 0 12px;
  padding-left: 16px;
  border-left: 2px solid var(--cila-line);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- Axes de recherche : structure réelle relevée sur le site --------
   Le champ Subform réutilise, pour chaque sous-valeur, les MÊMES classes
   que le balisage global : <ul class="fields-container"><li><span
   class="field-entry">…</span></li></ul>. Sans neutralisation, ce niveau
   imbriqué hérite donc de la mise en page de la CARTE (grille à deux
   colonnes, bordure, ombre) et du GABARIT DE LIGNE d'un champ ordinaire
   — d'où les grosses cases carrées au lieu de pastilles. Les sélecteurs
   ci-dessous ciblent explicitement ce niveau imbriqué avec une
   spécificité plus haute que les règles génériques, pour gagner sans
   dépendre de l'ordre des règles dans le fichier. */
.cila-pastilles .field-value > ul.fields-container,
.cila-pastilles .field-value > ol.fields-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  grid-template-columns: none;
}
.cila-pastilles .field-value ul.fields-container > li {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: auto;
}
.cila-pastilles .field-value ul.fields-container .field-entry {
  display: inline-block;
  grid-template-columns: none;
  margin: 0;
  padding: 7px 15px;
  border: 0;
  background: var(--cila-surface);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.3;
  color: oklch(30% 0.01 60);
}
.cila-pastilles .field-value ul.fields-container .field-entry .field-value-wrap,
.cila-pastilles .field-value ul.fields-container .field-entry .field-value {
  display: inline;
  font-size: inherit;
  color: inherit;
}

/* --- Ordre d'affichage des champs (fiche unitaire Evenements) ----
   Les champs sortent dans l'ordre de saisie Joomla ; le lien d'inscription
   est saisi en dernier alors qu'il doit etre lu avant l'argument. Le
   conteneur passe en colonne flex : l'ordre visuel est pilote par order,
   le HTML genere par Joomla reste inchange.
   Portee : classe de page cila-liste-evenements (a saisir sur le lien de menu
   ou l'element de menu des evenements) + .com-content-article, donc ni les
   listes (.blog-item) ni les autres rubriques ne sont touchees.
   align-self: stretch est indispensable : en contexte flex, les
   .field-entry se reduisent sinon a la largeur de leur contenu (filets
   separateurs coupes, bandeau decentre). Pas de width: 100% ici : les
   entrees sont en content-box et portent un padding lateral, la largeur
   declaree s'y ajouterait (debordement de 2 x --cila-pad).
   Roles non listes -> order 5 (programme, fichiers, encadres...). */
.cila-liste-evenements .com-content-article .fields-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.cila-liste-evenements .com-content-article .fields-container > .field-entry {
  order: 5;
  align-self: stretch;
}
.cila-liste-evenements .com-content-article .fields-container > .cila-bandeau,
.cila-liste-evenements .com-content-article .fields-container > .cila-visuel { order: 1; }
.cila-liste-evenements .com-content-article .fields-container > .cila-meta,
.cila-liste-evenements .com-content-article .fields-container > .cila-pastille,
.cila-liste-evenements .com-content-article .fields-container > .cila-pastilles { order: 2; }
.cila-liste-evenements .com-content-article .fields-container > .cila-texte { order: 4; }
/* Le bouton n'est plus en fin de fiche : marge basse resserree pour qu'il
   se lise avec l'argument qui le suit. */
.cila-liste-evenements .com-content-article .fields-container > .lien-dinscription.cila-bouton {
  order: 3;
  padding: 24px var(--cila-pad) 8px;
}

/* --- Bouton d'action ------------ */
.fields-container .cila-bouton {
  display: block;
  padding: 24px var(--cila-pad) 34px;
  border-bottom: 0;
}
.fields-container .cila-bouton .field-label { display: none; }
.fields-container .cila-bouton .field-value a {
  display: inline-block;
  padding: 12px 26px;
  background: var(--cila-accent);
  color: var(--cila-on-accent);
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.fields-container .cila-bouton .field-value a:hover {
  background: var(--cila-accent-dark);
  color: var(--cila-on-accent);
  text-decoration: none;
}

/* Libellé explicite par champ. Le greffon « url » rend toujours le même
   texte générique (« Accès à la ressource »), soit trois boutons identiques
   sur une même fiche. Le libellé du champ étant masqué plus haut,
   font-size:0 escamote le texte de Joomla et ::after porte l'intitulé
   propre au champ ; le lien reste cliquable, l'URL inchangée.
   Champs concernés, relevés dans le HTML : lien-dinscription (événement),
   evenement-lie et url-de-lenregistrement (enregistrement),
   lien-de-commande (publication). Un .cila-bouton non listé garde le texte
   générique. */
.fields-container .lien-dinscription.cila-bouton .field-value a,
.fields-container .evenement-lie.cila-bouton .field-value a,
.fields-container .lien-de-commande.cila-bouton .field-value a,
.fields-container .url-de-lenregistrement.cila-bouton .field-value a {
  font-size: 0;
  line-height: 0;
}
.fields-container .lien-dinscription.cila-bouton .field-value a::after,
.fields-container .evenement-lie.cila-bouton .field-value a::after,
.fields-container .lien-de-commande.cila-bouton .field-value a::after,
.fields-container .url-de-lenregistrement.cila-bouton .field-value a::after {
  font-size: 14.5px;
  line-height: 1.2;
  display: inline-block;
}
.fields-container .lien-dinscription.cila-bouton .field-value a::after {
  content: "S’inscrire à l’événement";
}
.fields-container .evenement-lie.cila-bouton .field-value a::after {
  content: "Événement associé";
}
.fields-container .url-de-lenregistrement.cila-bouton .field-value a::after {
  content: "Accéder à l’enregistrement";
}
.fields-container .lien-de-commande.cila-bouton .field-value a::after {
  content: "Accès à la publication";
}

/* --- Fichier à télécharger ------------ */
.fields-container .cila-fichier {
  display: block;
  /* padding-bottom porté à 34px : ce champ est souvent le dernier de la
     carte (bouton de téléchargement) et fermait la carte à ras bord. */
  padding: 22px var(--cila-pad) 34px;
  border-bottom: 0;
}
.fields-container .cila-fichier .field-label { display: block; margin: 0 0 9px; }
.fields-container .cila-fichier .field-value a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  background: var(--cila-surface);
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cila-ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.fields-container .cila-fichier .field-value a::before {
  content: "↓";
  font-size: 15px;
  color: var(--cila-accent);
}
.fields-container .cila-fichier .field-value a:hover {
  background: oklch(93% 0.008 60);
  border-color: oklch(84% 0.01 60);
  color: var(--cila-ink);
  text-decoration: none;
}

/* --- Étiquette unique ------------ */
.fields-container .cila-pastille {
  display: block;
  padding: 20px var(--cila-pad) 0;
  border-bottom: 0;
}
.fields-container .cila-pastille .field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin: 0 0 6px;
}
.fields-container .cila-pastille .field-value {
  display: inline-block;
  padding: 4px 11px;
  background: var(--cila-accent);
  color: var(--cila-on-accent);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Bloc encadré ------------ */
.fields-container .cila-encadre {
  display: block;
  margin: 26px var(--cila-pad) 34px;
  padding: 20px 22px;
  background: var(--cila-surface);
  border: 0;
  border-radius: 6px;
}
.fields-container .cila-encadre .field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cila-accent);
  margin: 0 0 10px;
}
.fields-container .cila-encadre .field-value { font-size: 14px; line-height: 1.7; }

/* ============
   5. RESPONSIVE
   Budget horizontal : padding de page + sidemenu + gouttière + colonne
   visuelle + padding de carte + piste de libellé.
   ============ */

@media (max-width: 1180px) {
  :root { --cila-pad: 26px; }
  .fields-container :where(.field-entry) {
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    gap: 2px 14px;
  }
}

@media (max-width: 1000px) {
  .fields-container { grid-template-columns: minmax(0, 1fr); }
  .fields-container :where(.field-entry) {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }
  .fields-container .cila-visuel {
    /* grid-column DOIT être remis à 1 ici. Sans cette ligne, la règle
       « grid-column: 2 » du § 4 (spécificité 0,2,0) survit à la bascule
       en une colonne, recrée une seconde piste implicite et renvoie tout
       le contenu une rangée plus bas — un vide d'un quart de page en
       haut à gauche de la carte. */
    grid-column: 1;
    grid-row: auto;
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--cila-line);
    padding: 26px;
  }
  .fields-container .cila-visuel .field-value { height: 210px; }
}

/* --- Cartes de liste sur petit écran ------------
   En une seule colonne, la carte occupe toute la largeur : la boîte média
   doit grandir, sinon la couverture flotte dans un panneau trop bas.
   Le plancher de deux lignes sur le titre est levé, il n'y a plus de
   rangée à aligner. */
@media (max-width: 620px) {
  .blog-items,
  .com-content-category-blog .blog-items {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .blog-item .cila-visuel .field-value,
  .blog-item .cila-bandeau .field-value { height: 300px; padding: 26px; }
  .blog-item .page-header h2,
  .blog-item .page-header h2.item-title { min-height: 0; }
  /* v114 - sous 620 px, une seule colonne pour toutes les rubriques. */
}

@media (max-width: 720px) {
  :root { --cila-pad: 22px; }
  .fields-container .cila-visuel .field-value { height: 180px; }
  .fields-container .cila-bandeau img { height: 200px; }
}

/* ============
   3. LISTES ET GRILLES DE CARTES  (vues blog : publications, événements,
   newsletters, enregistrements, membres)

   Balisage réel : .blog-items > .blog-item > .blog-item-content >
   .item-content > .system-unpublished > (.fields-container, .page-header,
   .article-aside, .readmore, .item-intro). Le conteneur de champs est
   AVANT le titre dans le DOM.

   display:contents sur .fields-container fait remonter chaque .field-entry
   au rang de frère du titre : « order » n'agit qu'entre enfants d'un même
   flex, il ne pouvait donc pas corriger cet ordre. Ne le remplacez pas par
   un order négatif — le titre repasserait sous les métadonnées.

   Ces règles visent TOUTES les listes. Pour n'en viser qu'une, saisissez
   une Classe de page sur le lien de menu (ex. cila-liste-publications) et
   préfixez ; trois exemples en fin de section.
   ============ */

.blog-items,
.com-content-category-blog .blog-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 28px;
  /* v102 — explicite, même si c'est la valeur par défaut d'une grille :
     c'est ce qui étire toutes les cartes d'une même ligne à la hauteur de
     la plus haute. Sans cette hauteur commune, il n'y a aucun espace
     libre à répartir dans la carte et le margin-top:auto du bouton
     « Lire la suite » reste sans effet. Posé ici pour qu'une surcharge
     du gabarit T4 ne puisse pas le remplacer silencieusement. */
  align-items: stretch;
}

/* min-width:0 est OBLIGATOIRE sur chaque carte de grille : sans lui, une
   piste 1fr ne peut pas rétrécir sous la taille intrinsèque de son
   contenu (une image large pousse alors la colonne hors de la carte
   visible — symptôme observé sur les newsletters, format portrait A4
   particulièrement large). */

/* --- LA CARTE ------------
   Cadre porté par .blog-item, image à fond perdu contre ses bords, texte en
   retrait ; overflow:hidden est ce qui fait épouser les angles arrondis.
   v102 — UNE SEULE déclaration pour .blog-item là où le fichier en comptait
   trois dispersées (cadre, min-width, flex).
   flex column + height:100% : la carte remplit sa ligne de grille et amorce
   la chaine de hauteur décrite plus bas. Le flex sert aussi de repli pour
   les pages de TAG (list_items.php), où .fields-container est enfant direct
   de .blog-item : sans lui, « order » n'aurait aucun effet et les champs
   s'afficheraient avant le nom. */
.blog-item {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--cila-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cila-white);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.blog-item:hover {
  border-color: oklch(84% 0.012 25);
  box-shadow: 0 6px 18px var(--cila-shadow-soft);
  transform: translateY(-2px);
}

/* --- CHAINE DE HAUTEUR ------------
   Le readmore n'est pas enfant de .blog-item mais de .system-unpublished,
   deux à trois niveaux plus bas (.blog-item > .blog-item-content >
   .item-content > .system-unpublished). Chaque intermédiaire doit faire
   DEUX choses : prendre la hauteur disponible (flex:1) et la transmettre
   (display:flex + column) — height:100% ne suffit pas sur l'enfant d'un
   flex. Un maillon manquant et .system-unpublished ne fait que la hauteur
   de son contenu : plus d'espace libre, le margin-top:auto du bouton ne
   pousse rien (échecs v95, v96, v99). Le sélecteur couvre aussi les div
   sans classe, T4 pouvant insérer un conteneur anonyme. */
.blog-item .blog-item-content,
.blog-item .item-content,
.blog-item .system-unpublished,
.blog-item > div:not([class]),
.blog-item .item-content > div:not([class]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.blog-item .fields-container {
  display: contents;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.blog-item .field-entry {
  display: block;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.blog-item .cila-visuel,
.blog-item .cila-bandeau { order: 1; margin: 0 0 18px; width: 100%; }
.blog-item .page-header   { order: 2; margin: 0 0 5px; padding: 0 20px; border: 0; }
.blog-item .article-aside { order: 3; margin: 0 0 12px; padding: 0 20px; }
.blog-item .cila-meta     { order: 4; padding: 0 20px; }
.blog-item .item-intro    { order: 5; padding: 0 20px; }

/* Le dernier élément de texte referme la carte */
.blog-item .system-unpublished { padding-bottom: 20px; }

/* --- Couverture cliquable ------------
   Boîte de HAUTEUR FIXE, image contenue : c'est ce qui aligne les cartes
   entre elles malgré des couvertures de formats très variables.
   Ne passez pas à object-fit:cover — les visuels paysage seraient
   amputés, et un ratio imposé déformerait les portraits.               */
.blog-item .cila-visuel .field-label,
.blog-item .cila-bandeau .field-label { display: none; }

.blog-item .cila-visuel .field-value-wrap,
.blog-item .cila-bandeau .field-value-wrap { display: block; width: 100%; }

.blog-item .cila-visuel .field-value,
.blog-item .cila-bandeau .field-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;      /* sans ceci, le flex item se rétracte au contenu
                       (l'image) au lieu de remplir .blog-item */
  height: 250px;
  padding: 22px;
  background: var(--cila-surface);
  border: 0;
  border-bottom: 1px solid var(--cila-line);
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
}
/* LE LIEN ENVELOPPE LE CHAMP, PAS L'IMAGE.
   La surcharge fields/render.php place l'ancre AUTOUR du contenu du champ
   (libellé + valeur). Restée inline, elle se rétracte sur la largeur de
   l'image : le panneau gris n'occupait plus toute la carte. On la
   blockifie, dans les deux positions possibles. */
.blog-item .cila-visuel > .field-link,
.blog-item .cila-bandeau > .field-link,
.blog-item .cila-visuel > a,
.blog-item .cila-bandeau > a { display: block; width: 100%; }

.blog-item .cila-visuel .field-value a,
.blog-item .cila-bandeau .field-value a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Centrage de l'image quel que soit le niveau où se trouve l'ancre */
.blog-item .cila-visuel img,
.blog-item .cila-bandeau img { margin: 0 auto; }
.blog-item .cila-visuel img,
.blog-item .cila-bandeau img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 6px var(--cila-shadow);
  transition: transform 0.2s;
}
.blog-item .cila-visuel .field-value a:hover img,
.blog-item .cila-bandeau .field-value a:hover img { transform: scale(1.03); }

/* --- Titre ------------
   En couleur d'accent : il est cliquable, et rien d'autre ne le signale
   depuis la suppression du « Lire la suite ».
   REQUIS côté Joomla : lien de menu > Options d'affichage des articles >
   « Titres liés = Oui ». Sinon la couleur annonce un lien inexistant.  */
/* Le <h2> hérite des marges de titre du template (marge haute de bloc et
   marge basse de rythme vertical). Dans une carte, elles décollent le
   titre de la couverture et l'écartent de la date. On les annule ici, et
   non sur .page-header seul : la marge est portée par le h2. */
.blog-item .page-header,
.blog-item .item-content .page-header {
  margin: 0 0 5px;
  padding: 0 20px;
  border: 0;
}
.blog-item .page-header h2,
.blog-item .page-header h2.item-title {
  font-size: 16.5px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  margin: 0;
  padding: 0;
  border: 0;
  /* Deux lignes réservées : selon la longueur du titre, la date et les
     métadonnées se décalaient d'une carte à l'autre sur une même rangée.
     Le titre peut dépasser deux lignes — min-height n'écrête rien, il
     garantit seulement un plancher commun. */
  min-height: calc(2 * 1.28em);
}
.blog-item .page-header h2 a { color: var(--cila-accent); }
.blog-item .page-header h2 a:hover {
  color: var(--cila-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Date seule ------------
   Auteur, catégorie et compteur de clics n'apportent rien ici.        */
.blog-item .article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--cila-ink-mute);
}
.blog-item .article-info dt,
.blog-item .article-info dd.createdby,
.blog-item .article-info dd.category-name,
.blog-item .article-info dd.hits,
.blog-item .article-info .author-img,
.blog-item .article-info .fa { display: none; }
.blog-item .article-info dd { margin: 0; }

/* T4 ajoute un séparateur en ::before/::after sur les <dd> de la liste
   d'informations. Les voisins étant masqués, il restait un tiret orphelin
   après la date. */
.blog-item .article-info dd::before,
.blog-item .article-info dd::after { content: none; display: none; }

.blog-item .article-info dd.published {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* --- Métadonnées courtes ------------
   Quatre lignes de même graisse et même couleur se lisent comme un bloc
   indistinct. On hiérarchise donc par le rôle, pas par l'ordre :
     · l'auteur porte l'information principale → encre pleine, demi-gras
     · éditeur et collection sont du contexte  → gris, corps réduit
     · l'année est un repère                   → petites capitales
   Les alias sont ceux des champs Publications ; adaptez-les pour une
   autre rubrique.                                                      */
.blog-item .field-label { display: none; }
.blog-item .cila-meta {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cila-ink-mute);
}
.blog-item .cila-meta .field-value-wrap,
.blog-item .cila-meta .field-value { display: inline; font-size: inherit; }

.blog-item .field-entry.direction-auteurs {
  margin-bottom: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cila-ink);
}
.blog-item .field-entry.editeur,
.blog-item .field-entry.collection { color: var(--cila-ink-mute); }

/* La collection se distingue de l'éditeur par l'italique, pas par une
   mise en ligne : .field-entry est un flex item (la carte est en
   flex-direction:column), et un flex item ne peut pas être display:inline
   — le navigateur le reblockifie. Fusionner deux champs frères sur une
   même ligne demanderait un conteneur commun, que Joomla n'émet pas. */
.blog-item .field-entry.collection { font-style: italic; }

.blog-item .field-entry.annee-de-parution {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: oklch(60% 0.01 60);
}

/* --- Ce qui reste sur la fiche ------------
   ATTENTION À LA SPÉCIFICITÉ. Ces sélecteurs doivent battre
   « .blog-item .field-entry { display: block } » ci-dessus (0,2,0).
   Un :where() — spécificité nulle sur son contenu — perdait : la
   présentation, le document joint et le bouton de commande restaient
   visibles dans la liste, et sans « order » ils remontaient même
   au-dessus de la couverture. D'où .field-entry accolé à chaque classe. */
.blog-item .field-entry.cila-texte,
.blog-item .field-entry.cila-liste,
.blog-item .field-entry.cila-pastilles,
.blog-item .field-entry.cila-bouton,
.blog-item .field-entry.cila-fichier,
.blog-item .field-entry.cila-encadre,
.blog-item .field-entry.cila-pastille,
.blog-item .readmore,
.blog-item .item-intro:empty { display: none; }

/* Masquage inconditionnel de l'introduction sur les listes Newsletters et
   Publications : Joomla émet .item-intro même vide de contenu visible
   (espace, balise non vide), donc la règle générale ci-dessus (:empty)
   ne suffit pas toujours. Ciblé par page plutôt que globalement, au cas
   où d'autres listes voudraient un jour garder l'extrait. */
.cila-liste-publications .blog-item .item-intro,
.cila-liste-newsletters .blog-item .item-intro,
.cila-liste-ressources .blog-item .item-intro,
.cila-liste-membres .blog-item .item-intro { display: none; }

/* Filet de sécurité : tout champ SANS classe de rôle est masqué dans la
   liste plutôt que d'apparaître en vrac au-dessus de la couverture.
   Les champs à afficher doivent donc porter cila-visuel ou cila-meta. */
.blog-item .field-entry:not(.cila-visuel):not(.cila-bandeau):not(.cila-meta) {
  display: none;
}

/* ============
   3 bis. VARIANTES DE LISTE PAR RUBRIQUE

   Les règles ci-dessus valent pour toutes les listes. Celles-ci les
   spécialisent — actives, pas commentées.

   ── À FAIRE DANS JOOMLA ────
   Pour chaque lien de menu, onglet « Options de page », champ
   « Classe de page », saisir exactement l'une de ces valeurs :

       cila-liste-publications      (comportement par défaut, facultatif)
       cila-liste-evenements
       cila-liste-newsletters
       cila-liste-membres
       cila-liste-enregistrements

   Si le champ est traité comme un suffixe par votre gabarit, mettez un
   espace devant :  «␣cila-liste-evenements ».
   ============ */

/* --- ÉVÉNEMENTS ------------
   Affiches au format paysage ou portrait selon l'année : boîte en 16/10,
   image contenue. La date est l'information première — elle passe donc
   AU-DESSUS du titre, en accent, et la carte s'étire en pleine largeur
   sur deux colonnes pour laisser respirer le lieu.                     */
/* v114 - plus de grille propre aux Evenements : la grille commune de 260 px
   s'applique a toutes les rubriques (voir .blog-items). */
/* Image : même traitement que les autres listes (contain, jamais rognée) —
   pas de cover propre à cette rubrique, pour rester identique aux cartes
   Publications/Newsletters. */

/* Pastille de tag compacte, en haut de la carte — remplace le ruban
   pleine largeur (trop proche visuellement du bandeau "Fonction au
   CILA"). Style aligné sur .cila-pastille (fond accent, texte blanc,
   majuscules, coins arrondis), en version pilule. Partagée avec Membres
   ci-dessous : un seul jeu de règles pour les deux listes. */
.cila-liste-evenements .blog-item .tags.list-inline,
.cila-liste-membres .blog-item .tags.list-inline {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 20px 10px;
  padding: 0;
  list-style: none;
  justify-content: flex-start;
}
/* v92 : couleurs et mise en forme reprises de la pastille de tag des
   pages unitaires (fond blanc, bordure et texte accent) — remplace le
   badge plein rose utilisé jusqu'ici en liste. */
.cila-liste-evenements .blog-item .tags.list-inline .badge.badge-info,
.cila-liste-membres .blog-item .tags.list-inline .badge.badge-info {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cila-white);
  color: var(--cila-accent);
  border: 1px solid var(--cila-accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
}
.cila-liste-evenements .blog-item .tags.list-inline .badge.badge-info:hover,
.cila-liste-membres .blog-item .tags.list-inline .badge.badge-info:hover {
  background: var(--cila-accent-pale);
  text-decoration: none;
}

/* La date remonte au-dessus du titre */
/* v105 — masquage déplacé dans le bloc « ICÔNES D'ÉDITION » en fin de
   fichier (métadonnées seules, crayon conservé). */
.cila-liste-evenements .blog-item .page-header   { order: 4; margin: 0 0 6px; padding: 0 20px; }
.cila-liste-evenements .blog-item .article-info {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cila-accent);
}
/* Seuls Date, Lieu et Modalité restent visibles dans la carte — Tarif
   masqué (non demandé en liste). */
/* Seuls Date, Lieu et Modalité restent visibles dans la carte — Tarif
   masqué (non demandé en liste). Lieu n'a pas la classe cila-meta dans le
   balisage réel (confirmé par le client) : sans !important, le filet de
   sécurité général (.blog-item .field-entry:not(.cila-meta)... , 5 classes)
   bat cette règle (3 classes) et masque Lieu malgré elle. */
.cila-liste-evenements .blog-item .field-entry:where(.date, .lieu, .modalites) {
  order: 5;
  font-size: 13.5px;
  color: oklch(38% 0.01 60);
}
.cila-liste-evenements .blog-item .field-entry.date,
.cila-liste-evenements .blog-item .field-entry.modalites { display: block; }
.cila-liste-evenements .blog-item .field-entry.lieu {
  display: block !important;
}
.cila-liste-evenements .blog-item .field-entry.tarif-evenement { display: none; }
.cila-liste-evenements .blog-item .page-header h2 { font-size: 18px; }

/* Libellés visibles pour Date, Lieu, Modalités (masqués par défaut dans
   toutes les listes) : Lieu n'a pas la classe cila-meta, donc ses
   field-value-wrap/field-value sont remis en ligne ici aussi. */
.cila-liste-evenements .blog-item .field-entry:where(.date, .lieu, .modalites) .field-label {
  display: inline;
  font-weight: 700;
  color: var(--cila-ink);
  margin-right: 4px;
}
.cila-liste-evenements .blog-item .field-entry.lieu .field-value-wrap,
.cila-liste-evenements .blog-item .field-entry.lieu .field-value {
  display: inline;
  font-size: inherit;
}

/* Lien explicite vers la fiche complète, en plus du titre cliquable. */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore {
  display: block;
  order: 6;
  margin: 14px 20px 20px;
}
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a {
  font-size: 13px;
  font-weight: 700;
  color: var(--cila-accent);
  text-decoration: none;
  background-color: var(--cila-surface);
  transition: background-color 0.15s, color 0.15s;
}
/* v95 — « Lire la suite » aligné en bas de carte sur la liste des membres.
   La carte est un conteneur flex en colonne étiré par la grille : une marge
   haute automatique sur le dernier élément le repousse contre le bas, quelle
   que soit la longueur de la qualité et du rattachement au-dessus (elles
   varient de deux à six lignes d'une fiche à l'autre, ce qui désalignait
   tous les boutons).

   v115 — portée étendue à TOUTES les listes : le problème est le même
   partout (métadonnées de longueur variable au-dessus du bouton), et la
   grille commune de la v114 rend le désalignement d'autant plus visible
   d'une rangée à l'autre. */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications,
       .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements)
  .blog-item :is(.readmore, p.readmore) {
  /* order:9 : la règle générique donne order:6 au readmore, valeur déjà prise
     par .qualite — à ordre égal c'est le DOM qui tranche, le readmore
     n'était donc pas le dernier élément et margin-top:auto le collait
     contre la qualité (v95 sans effet).

     v102 — CAUSE RÉELLE DES ÉCHECS v95/96/99/101 : template.css déclare
     « .mt-4, p.readmore { margin-top: 1.5rem !important } ». Aucune
     spécificité ne bat un !important ; seul un !important de même poids
     reprend la main. Le sélecteur p.readmore est repris tel quel au cas où
     Joomla rende le bouton dans un <p>.

     margin-top:auto absorbe l'espace libre de .system-unpublished sans
     sortir le bouton du flux (pas de position:absolute) ; flex-shrink:0
     pour qu'il ne soit jamais comprimé avant le texte. */
  order: 9;
  margin-top: auto !important;
  flex-shrink: 0;
}

:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a:hover,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a:focus {
  text-decoration: none;
  color: var(--cila-white);
  background-color: var(--cila-accent);
}

/* --- NEWSLETTERS ------------
   Même fonctionnement que cila-liste-publications (aucune règle de taille
   ou de recadrage propre) : la seule différence est le champ Numéro /
   Période, redondant avec le titre, masqué en liste. */
.cila-liste-newsletters .blog-item .field-entry.numero-periode,
.cila-liste-ressources .blog-item .field-entry.numero-periode,
.cila-liste-publications .blog-item .field-entry.numero-periode { display: none; }

/* --- MEMBRES ------------
   Un annuaire, pas une bibliothèque : photo ronde dans un panneau teinté
   (cliquable — le lien est posé par fields/render.php sur cila-visuel en
   vue de liste), fonction au CILA en pastille au-dessus du nom,
   rattachement en gras italique juste dessous, qualité en dernier, et
   aucune date — celle de publication de la fiche n'a aucun sens ici.
   Une fiche sans qualité ni rattachement (cas fréquent) n'affiche que
   le nom sous la photo : pas de ligne vide.                            */
/* v114 - plus de grille propre aux Membres : grille commune de 260 px. */

/* Photo : panneau teinté, cercle centré, comme la maquette validée */
.cila-liste-membres .blog-item .cila-visuel {
  margin: 0;
  padding: 24px;
  background: var(--cila-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cila-liste-membres .blog-item .cila-visuel .field-value {
  height: auto;
  /* v114 — 120 → 150 px : la tuile Membre est passée de 210 à 260 px de large
     avec la grille commune, le portrait y paraissait perdu. */
  width: 150px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cila-line);
  box-shadow: 0 1px 6px var(--cila-shadow);
  /* Sans ceci, ce bloc à largeur fixe se colle au bord gauche de son
     conteneur (width:100% hérité du gabarit de liste générique). */
  margin: 0 auto;
}
.cila-liste-membres .blog-item .cila-visuel img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  box-shadow: none;
  /* Sécurité : si l'image ne charge pas, le texte alt de secours ne doit
     jamais déborder du cercle. */
  font-size: 0;
  color: transparent;
}

/* Contenu textuel : rythme vertical constant (margin-top uniforme), que
   le ruban Fonction au CILA soit présent ou non — les marges ne
   s'additionnent pas en flexbox, donc chaque écart reste prévisible. */
.cila-liste-membres .blog-item .page-header { order: 3; margin-top: 16px; padding: 0 20px; }
.cila-liste-membres .blog-item .page-header h2 { font-size: 17px; font-family: var(--cila-serif); font-weight: 600; }
.cila-liste-membres .blog-item .page-header h2 a { color: var(--cila-accent); }
.cila-liste-membres .blog-item .page-header h2 a:hover { color: var(--cila-accent-dark); text-decoration: underline; }

/* v105 — masquage déplacé dans le bloc « ICÔNES D'ÉDITION » en fin de
   fichier (métadonnées seules, crayon conservé). */
/* Tags natifs réaffichés (masqués auparavant) : même pastille compacte
   que sur Evenements, règle partagée plus haut dans ce fichier. Centrée
   ici pour suivre la mise en page centrée (photo ronde, nom) de la carte
   Membre. */
.cila-liste-membres .blog-item .tags.list-inline { justify-content: flex-start; }
/* Sans ceci, .cila-aside-sticky (photo) hérite de order:0 par défaut et
   passe AVANT le tag (order:1) — contrairement à Événements, où bandeau
   et tag sont à égalité (1) et le DOM (tag en premier) tranche. Ici les
   deux valeurs diffèrent déjà, donc pas d'égalité à exploiter : il faut
   pousser explicitement la photo après le tag. */
.cila-liste-membres .blog-item .cila-aside-sticky { order: 2; }

/* Fonction au CILA : pastille au-dessus du nom.
   Le sélecteur inclut .fields-container pour égaler la spécificité du
   filet de sécurité plus haut (5 classes) — sinon ce dernier gagne et
   masque la pastille malgré ce bloc, la règle générale n'autorisant que
   cila-visuel/cila-bandeau/cila-meta en liste. À spécificité égale,
   cette règle-ci gagne car elle est déclarée plus loin dans le fichier. */
.cila-liste-membres .blog-item .fields-container .field-entry.fonction-au-cila {
  display: block;
  order: 4;
  padding: 0 20px;
  margin-top: 4px;
}
.cila-liste-membres .blog-item .fonction-au-cila .field-label { display: none; }
/* Option A retenue (voir CILA Liste membres.dc.html) : surtitre coloré,
   sans fond ni bordure — la pastille pleine couleur ressemblait à un
   bouton cliquable. Déplacée sous le nom (auparavant entre photo et nom). */
.cila-liste-membres .blog-item .fonction-au-cila .field-value {
  display: block;
  padding: 0;
  background: none;
  color: var(--cila-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Rattachement : gras italique, juste sous le nom, écart resserré et
   constant (margin-top, pas padding : évite l'empilement imprévisible). */
.cila-liste-membres .blog-item .field-entry.rattachement {
  display: block;
  order: 5;
  margin-top: 6px;
  padding: 0 20px;
}
.cila-liste-membres .blog-item .rattachement .field-label { display: none; }
.cila-liste-membres .blog-item .rattachement .field-value {
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  color: var(--cila-ink-mute);
}

/* Qualité : en dernier, écart léger avec le rattachement.
   Le padding bas (20px) est porté ICI plutôt que sur .system-unpublished :
   ce conteneur générique n'existe pas sur les pages de TAG, qui
   perdaient donc leur respiration basse. Porté sur le dernier champ
   visible, il fonctionne identiquement sur catégorie et sur tag. */
.cila-liste-membres .blog-item .field-entry.qualite {
  display: block;
  order: 6;
  margin-top: 4px;
  padding: 0 20px 20px;
}
/* Neutralise le padding générique de .system-unpublished (catégories
   uniquement) pour ne pas doubler l'espace avec celui ajouté ci-dessus. */
.cila-liste-membres .blog-item .system-unpublished { padding-bottom: 0; }
.cila-liste-membres .blog-item .qualite .field-label { display: none; }
.cila-liste-membres .blog-item .qualite .field-value {
  font-size: 13.5px;
  line-height: 1.5;
  color: oklch(38% 0.01 60);
}

/* --- ENREGISTREMENTS ------------
   Vignettes vidéo en 16/9, avec un repère de lecture superposé. Classes
   confirmées par le client le 17 août (capture Joomla + HTML réel) :
   type-denregistrement, intervenant-s, resume-de-lintervention (cila-encadre),
   evenement-lie (cila-bouton), date-de-levenement, vignette-de-lenregistrement
   (cila-visuel), url-de-lenregistrement (cila-bouton), acces (cila-pastille),
   tarif. Sur la liste : seuls Intervenant(s), Date et Accès sont essentiels
   — Type et Tarif restent réservés à la fiche individuelle. */
/* v114 - la grille de 260 px est devenue la grille commune. */
.cila-liste-enregistrements .blog-item .cila-visuel .field-value,
.cila-liste-enregistrements .blog-item .cila-bandeau .field-value {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: oklch(28% 0.01 60);
}
.cila-liste-enregistrements .blog-item .cila-visuel img,
.cila-liste-enregistrements .blog-item .cila-bandeau img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  box-shadow: none;
}
.cila-liste-enregistrements .blog-item .cila-visuel .field-value::after,
.cila-liste-enregistrements .blog-item .cila-bandeau .field-value::after {
  content: "\f04b";              /* fa-play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  background: oklch(100% 0 0 / 0.92);
  color: var(--cila-accent);
  border-radius: 50%;
  pointer-events: none;
}
.cila-liste-enregistrements .blog-item .field-entry:where(.intervenant-s, .type-denregistrement) {
  display: block;
  order: 4;
  font-size: 13.5px;
  color: oklch(38% 0.01 60);
}
/* Libellés demandés, et hiérarchie affirmée : Type en repère coloré
   au-dessus, Intervenant(s) en corps plus soutenu — les deux étaient
   noyés dans un texte gris uniforme, illisibles au premier regard. */
.cila-liste-enregistrements .blog-item .field-entry.type-denregistrement {
  order: 4;
  margin: 0 0 10px;
}
.cila-liste-enregistrements .blog-item .field-entry.type-denregistrement .field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin-bottom: 3px;
}
.cila-liste-enregistrements .blog-item .field-entry.type-denregistrement .field-value {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cila-accent);
}
.cila-liste-enregistrements .blog-item .field-entry.intervenant-s {
  order: 5;
  margin: 0 0 4px;
}
.cila-liste-enregistrements .blog-item .field-entry.intervenant-s .field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin-bottom: 3px;
}
.cila-liste-enregistrements .blog-item .field-entry.intervenant-s .field-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cila-ink);
}
/* Date et Tarif : cila-meta comme Intervenant/Type, donc affichés par la
   règle générique des champs meta — masqués ici (réservés à la fiche). */
.cila-liste-enregistrements .blog-item .field-entry.date-de-levenement,
.cila-liste-enregistrements .blog-item .field-entry.tarif { display: none; }
/* Accès (Payant/Gratuit) : cila-pastille, donc masqué par le filet de
   sécurité général — réaffiché ici en petite étiquette au-dessus du
   titre, sur le modèle de la pastille de tag (Événements/Membres). */
.cila-liste-enregistrements .blog-item .field-entry.acces {
  display: block !important;
  order: 1;
  align-self: flex-start;
  margin: 0 20px 8px;
}
.cila-liste-enregistrements .blog-item .field-entry.acces .field-label { display: none; }
/* .cila-pastille (rôle générique) donne déjà à .field-value un fond plein
   accent — d'où le pavé maroon imbriqué dans mon propre badge rose.
   On neutralise ce fond générique et on reprend le traitement de la
   pastille de tag (Événements/Membres) : fond rose pâle, texte accent. */
.cila-liste-enregistrements .blog-item .field-entry.acces .field-value {
  display: inline-block;
  padding: 4px 11px;
  background: var(--cila-accent-pale);
  color: var(--cila-accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Enregistrements listés dans « Toutes les ressources » ---------------
   La page Ressources porte la classe cila-liste-ressources et mélange
   newsletters, publications et enregistrements : la mise en forme des
   cartes d'enregistrement, écrite plus haut pour cila-liste-enregistrements,
   ne s'y appliquait pas. On la rejoue en visant la carte elle-même —
   celle qui porte le champ « Type d'enregistrement » — plutôt que la page,
   pour ne pas déborder sur les deux autres rubriques.
   Seule exception : la grille en colonnes reste propre à la page
   Enregistrements, la page Ressources gardant sa mise en page d'ensemble. */
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-visuel .field-value,
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-bandeau .field-value {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: oklch(28% 0.01 60);
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-visuel img,
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-bandeau img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  box-shadow: none;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-visuel .field-value::after,
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .cila-bandeau .field-value::after {
  content: "\f04b";              /* fa-play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  background: oklch(100% 0 0 / 0.92);
  color: var(--cila-accent);
  border-radius: 50%;
  pointer-events: none;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry:where(.intervenant-s, .type-denregistrement) {
  display: block;
  order: 4;
  font-size: 13.5px;
  color: oklch(38% 0.01 60);
}
/* Libellés demandés, et hiérarchie affirmée : Type en repère coloré
   au-dessus, Intervenant(s) en corps plus soutenu — les deux étaient
   noyés dans un texte gris uniforme, illisibles au premier regard. */
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.type-denregistrement {
  order: 4;
  margin: 0 0 10px;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.type-denregistrement .field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin-bottom: 3px;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.type-denregistrement .field-value {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cila-accent);
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.intervenant-s {
  order: 5;
  margin: 0 0 4px;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.intervenant-s .field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin-bottom: 3px;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.intervenant-s .field-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cila-ink);
}
/* Date et Tarif : cila-meta comme Intervenant/Type, donc affichés par la
   règle générique des champs meta — masqués ici (réservés à la fiche). */
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.date-de-levenement,
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.tarif { display: none; }
/* Accès (Payant/Gratuit) : cila-pastille, donc masqué par le filet de
   sécurité général — réaffiché ici en petite étiquette au-dessus du
   titre, sur le modèle de la pastille de tag (Événements/Membres). */
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.acces {
  display: block !important;
  order: 1;
  align-self: flex-start;
  margin: 0 20px 8px;
}
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.acces .field-label { display: none; }
/* .cila-pastille (rôle générique) donne déjà à .field-value un fond plein
   accent — d'où le pavé maroon imbriqué dans mon propre badge rose.
   On neutralise ce fond générique et on reprend le traitement de la
   pastille de tag (Événements/Membres) : fond rose pâle, texte accent. */
.cila-liste-ressources .blog-item:has(.field-entry.type-denregistrement) .field-entry.acces .field-value {
  display: inline-block;
  padding: 4px 11px;
  background: var(--cila-accent-pale);
  color: var(--cila-accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Fiche individuelle — Enregistrement ------------
   Aucune surcharge : la fiche reprend le gabarit générique (identique à
   Publications) sans traitement propre — vignette-de-lenregistrement en
   .cila-visuel (colonne de droite, contenue), Type/Intervenant(s)/Date/
   Tarif en .cila-meta (ligne label + valeur), Accès en .cila-pastille,
   Résumé en .cila-encadre, Événement lié + URL de l'enregistrement en
   .cila-bouton. La tentative précédente (vidéo 16/9 pleine largeur avec
   repère de lecture, ligne meta condensée) a été abandonnée : incohérente
   avec le reste du site et le repère « play » n'avait pas de sens sur une
   simple affiche/capture d'écran. */
/* Seule exception : l'image reste en pleine largeur (bandeau), comme sur
   la fiche Événement — demandé explicitement, à la place de la colonne
   de droite étroite du gabarit générique. */
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement {
  display: block;
  grid-column: 1 / -1;
  order: -1;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cila-line);
}
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement .field-label { display: none; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement .field-value-wrap { display: block; width: 100%; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement .field-value { width: 100%; height: auto; padding: 0; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement img {
  display: block;
  width: 100%;
  height: 420px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
/* Date remontée juste sous Intervenant(s), demandé explicitement — les
   autres champs meta gardent un ordre explicite pour ne pas se retrouver
   avant Type/Intervenant par défaut (grid-auto-flow trierait sinon tout
   à égalité d'ordre implicite 0, source order oblige). */
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.vignette-de-lenregistrement { grid-row: 1; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.type-denregistrement { order: 1; grid-row: 2; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.intervenant-s { order: 2; grid-row: 3; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.date-de-levenement { order: 3; grid-row: 4; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.resume-de-lintervention { order: 5; grid-row: 6; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.evenement-lie { order: 6; grid-row: 7; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.url-de-lenregistrement { order: 7; grid-row: 8; }
/* Accès + Tarif remontés juste sous Date, sur une même ligne : les deux
   partagent la même cellule de grille explicite (grid-row:5) — l'un
   ancré à gauche, l'autre à droite — plutôt que deux lignes empilées.
   Chaque autre champ reçoit AUSSI un grid-row explicite (ci-dessus) :
   sans ça, les items en grid-row:auto sont placés dans une passe
   séparée, APRÈS tous les items entièrement explicites (row+colonne),
   quel que soit leur `order` — Date (order:3 mais row:auto) se
   retrouvait ainsi après Accès/Tarif (row:5 explicite) malgré un ordre
   plus petit. */
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.acces {
  order: 4;
  grid-row: 5;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  padding-top: 14px;
  padding-bottom: 14px;
}
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.acces .field-label { display: none; }
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.acces .field-value {
  display: inline-block;
  padding: 4px 11px;
  background: var(--cila-accent-pale);
  color: var(--cila-accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.tarif {
  order: 4;
  grid-row: 5;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 0;
}
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.tarif .field-label {
  display: inline;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
  margin-right: 6px;
}
.com-content-article:has(.vignette-de-lenregistrement) .fields-container .field-entry.tarif .field-value {
  display: inline;
  font-size: 15px;
  font-weight: 700;
  color: var(--cila-ink);
}


/* --- Pages de tag ------------
   .tag-category porte un margin-top natif (Joomla/T4) qui décale le
   contenu vers le bas par rapport aux pages de catégorie. Neutralisé
   pour un alignement identique. */
.tag-category { margin-top: 0; }

/* ============
   4. NAVIGATION — en-tête, menu principal, bascule mobile

   Balisage cible : T4 « header-block-2 »
     header.header-block
       .container-xxl > .header-wrap
         .navbar-brand.logo-image        logo
         .t4-navbar > nav.navbar         menu principal (ul.nav.level0)
         .t4-header-r                    zone de droite + bouton mobile

   Le logo est servi en 500 × 500 : il DOIT être contraint en CSS,
   sinon il occupe toute la hauteur de l'en-tête.
   ============ */

/* --- Barre d'en-tête ------------ */
.header-block {
  background: var(--cila-white);
  border-bottom: 1px solid var(--cila-line);
}
.header-block .header-wrap {
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  min-height: 0;
}

/* CENTRAGE DU MENU — la cause du décalage.
   .header-wrap est en justify-content:between avec trois blocs : logo
   (~120px), menu (mx-auto) et .t4-header-r, cette dernière VIDE sur desktop
   (hamburger en d-lg-none). Les marges auto centrent donc le menu dans
   l'espace restant : décalé d'une demi-largeur de logo vers la gauche.
   On donne aux deux blocs latéraux la même piste (flex:1 1 0) et le menu
   garde sa largeur naturelle : il tombe exactement au centre, quelle que
   soit la taille du logo.
   Règles enfermées dans un media query desktop : sans condition,
   « .t4-megamenu{display:flex} » écraserait le
   « .collapse:not(.show){display:none} » de Bootstrap et le menu resterait
   déplié en colonne sous 992px, en plus du hamburger. */
@media (min-width: 992px) {
  .header-block .navbar-brand,
  .header-block .logo-image,
  .header-block .t4-header-r {
    flex: 1 1 0;
    min-width: 0;
  }
  .header-block .t4-header-r { justify-content: flex-end; }

  /* mx-auto de T4 laisserait le menu flotter dans l'espace restant :
     on annule ces marges automatiques, le centrage venant des deux
     pistes latérales de largeur égale ci-dessus. */
  .header-block .t4-navbar.mx-auto,
  .header-block .t4-navbar {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
    align-self: center;
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
  }
  .header-block .t4-navbar .navbar,
  .header-block .t4-megamenu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .header-block .t4-megamenu .nav.level0 {
    margin: 0;
    padding: 0;
    align-items: center;
  }
}

/* --- Logo ------------
   1. ÉCRASEMENT. T4 impose une largeur à .logo-image et le fichier porte
      des attributs 500 × 500 : le logo était étiré en bandeau. Hauteur
      imposée, largeur auto, object-fit:contain contre toute déformation
      résiduelle. Sélecteurs volontairement longs pour passer devant le
      template sans !important.
   2. VISUEL. Le carré d'origine a des frises en haut et en bas : réduit à
      la hauteur d'une barre de navigation, le texte devenait illisible.
      Utiliser logo-cila-header.png (500 × 308), recadré sur le bloc
      central, à téléverser dans /images/ puis à déclarer dans T4. */
.header-block .navbar-brand,
.header-block .logo-image {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.header-block .navbar-brand > a,
.header-block .logo-image > a {
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.header-block .navbar-brand > a > img,
.header-block .logo-image > a > img {
  display: block;
  width: auto;
  max-width: none;
  max-height: none;   /* neutralise le « max-height: 40px » de T4 sur
                         .navbar-brand.logo-control img.logo-img, qui
                         plafonnait le logo quelle que soit la height */
  object-fit: contain;
}
.header-block .navbar-brand.logo-control > a > img.logo-img,
.header-block .logo-image.logo-control > a > img.logo-img,
.header-block .navbar-brand > a > img.logo-img,
.header-block .logo-image > a > img.logo-img    { height: 74px; max-height: none; }
.header-block .navbar-brand > a > img.logo-img-sm,
.header-block .logo-image > a > img.logo-img-sm { height: 50px; max-height: none; }

/* --- Menu principal ------------ */
.t4-navbar .navbar { padding: 0; }

/* flex-direction: row est déclaré explicitement — sans lui, la règle
   Bootstrap « .navbar-nav{flex-direction:column} » empile les entrées
   dès que le point de rupture du template change. */
@media (min-width: 992px) {
  .t4-megamenu .nav.level0 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.t4-megamenu .nav.level0 > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  padding: 6px 13px;      /* pastille basse : elle doit épouser le texte,
                             pas la hauteur de la barre */
  border-radius: 3px;
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: oklch(35% 0.01 60);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.t4-megamenu .nav.level0 > .nav-item > .nav-link:hover,
.t4-megamenu .nav.level0 > .nav-item > .nav-link:focus-visible {
  color: var(--cila-accent);
  background: oklch(96% 0.012 25);
  text-decoration: none;
}

/* Rubrique courante : pastille teinée, comme sur la maquette.
   Joomla pose .current sur le <li> et .active selon les versions —
   les trois formes sont couvertes. */
.t4-megamenu .nav.level0 > .nav-item.current > .nav-link,
.t4-megamenu .nav.level0 > .nav-item.active > .nav-link,
.t4-megamenu .nav.level0 > .nav-item > .nav-link.active {
  color: var(--cila-accent);
  background: var(--cila-accent-pale);
}

/* Espacement entre entrées.
   align-items:center à CHAQUE niveau (liste, item, lien) : sinon le <a>
   est étiré sur toute la hauteur de la barre et le texte se cale en haut,
   ce que révèle la pastille de la rubrique courante, anormalement haute. */
.t4-megamenu .nav.level0 > .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Le sélecteur porte l'ID du mégamenu (spécificité 1,3,0) pour passer
   devant les règles de T4, qui imposent une hauteur au lien — c'est ce
   qui étirait la pastille sur toute la hauteur de la barre. */
#t4-megamenu-mainmenu .nav.level0 > .nav-item > .nav-link,
.t4-megamenu .nav.level0 > .nav-item > .nav-link {
  align-self: center;
  height: auto;
  min-height: 0;
  line-height: 1.25;
  padding: 6px 13px;
}

/* --- Sous-menus (si un niveau 2 est ajouté plus tard) ------------------- */
.t4-megamenu .nav.level0 .dropdown-menu {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--cila-line);
  border-radius: 6px;
  box-shadow: 0 4px 16px var(--cila-shadow-soft);
}
.t4-megamenu .nav.level0 .dropdown-menu .nav-link {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: oklch(30% 0.01 60);
}
.t4-megamenu .nav.level0 .dropdown-menu .nav-link:hover {
  background: var(--cila-surface);
  color: var(--cila-accent);
}

/* --- Zone de droite et bascule mobile ------------ */
.t4-header-r { gap: 10px; flex-shrink: 0; }

.t4-header-r .t4-offcanvas-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  background: var(--cila-white);
  color: var(--cila-ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.t4-header-r .t4-offcanvas-toggle:hover {
  background: var(--cila-surface);
  border-color: oklch(84% 0.01 60);
}
.t4-header-r .t4-offcanvas-toggle .fa { font-size: 17px; }

/* --- Menu hors-écran (mobile) ------------ */
.off-canvas-inner { background: var(--cila-white); }
.off-canvas-inner .nav.level0 {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.off-canvas-inner .nav.level0 > .nav-item > .nav-link {
  padding: 14px 4px;
  border-radius: 0;
  border-bottom: 1px solid var(--cila-line-soft);
  font-size: 16px;
}
.off-canvas-inner .nav.level0 > .nav-item::after { display: none; }

/* --- Menu de rubrique en colonne (modules de sidebar) ------------

   CIBLAGE : dans Joomla, ouvrez le module > onglet « Avancé » > champ
   « Classe du module » (ou « Module Class Suffix » selon la version) et
   saisissez :   cila-sidebar

   Mettez un ESPACE devant si le champ est un suffixe de classe, sinon la
   valeur se colle au nom de classe existant :  «␣cila-sidebar ».

   Toute la sidebar est stylée par cette seule classe, quel que soit le
   type de module (menu, articles liés, texte libre). Elle fonctionne
   donc pour Ressources, Événements et Membres sans règle supplémentaire.
   ============ */

.cila-sidebar {
  background: var(--cila-surface);
  border-radius: 6px;
  /* v106 — 22px → 16px sur les côtés : autant de largeur regagnée pour les
     libellés, ce qui évite le passage à la ligne de « Correspondants
     internationaux ». */
  padding: 24px 12px;
  margin-bottom: 24px;
}

/* Titre du module — les gabarits T4 varient, les trois cas sont couverts.
   Il doit rester plus discret que les liens en taille, mais plus affirmé
   en graisse et en couleur : sinon il passe derrière eux. */
.cila-sidebar .module-title,
.cila-sidebar .moduletable-title,
.cila-sidebar > h3,
.cila-sidebar > h4,
.cila-sidebar h3.module-title,
.cila-sidebar h4.module-title {
  font-family: var(--cila-sans);
  font-size: 13.5px;
  line-height: 1.35;
  /* v107 — plus AUCUN filet sur le conteneur du titre : le gabarit en pose
     un sur .module-title span (bordure basse à la longueur du texte), et
     nos tentatives de neutraliser ::before/::after ne pouvaient rien contre
     lui, puisque ce n'est pas un pseudo-élément mais un élément réel. D'où
     le double soulignement persistant. C'est CE filet-là qui est conservé
     et allongé — voir la règle suivante. */
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
/* Le filet du gabarit, allongé : le span passe en bloc pour occuper toute
   la largeur, puis déborde de 10px de chaque côté (marges négatives
   compensées en padding) afin de courir presque jusqu'aux bords du
   panneau, comme les séparateurs de la liste. */
.cila-sidebar .module-title span,
.cila-sidebar .moduletable-title span,
.cila-sidebar > h3 span,
.cila-sidebar > h4 span {
  display: block;
  margin: 0 -8px -1px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--cila-line-strong);
}
/* T4 ajoute un filet décoratif sous le titre : selon le gabarit il vient
   en ::after ou en ::before — la v105 n'en neutralisait qu'un, d'où le
   double soulignement visible sur la capture du 20 août. */
.cila-sidebar .module-title::after,
.cila-sidebar .module-title::before,
.cila-sidebar .moduletable-title::after,
.cila-sidebar .moduletable-title::before,
.cila-sidebar > h3::after,
.cila-sidebar > h3::before,
.cila-sidebar > h4::after,
.cila-sidebar > h4::before { content: none; display: none; }

/* Liste — .nav, .menu ou <ul> nu selon le module et le gabarit */
.cila-sidebar :where(ul, ol) {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cila-sidebar li { margin: 0; padding: 0; }

/* v109 — CLASSE RÉPÉTÉE TROIS FOIS, VOLONTAIREMENT. Le gabarit déclare
   « .t4-module .nav li a, .t4-card .nav li a, .moduletable .nav li a,
   .module_menu .nav li a { display:block; padding:.5rem 0; position:relative }
   » en 0,2,2, contre 0,1,2 pour « .cila-sidebar li > a » : ses valeurs
   gagnaient, le padding vertical restait à 0.5rem (v107, v108 sans effet) et
   son display:block écrasait notre flex, désalignant le chevron. Répéter la
   classe porte la spécificité à 0,3,2 : on reprend la main sans !important,
   qu'il vaut mieux réserver aux cas où le gabarit en pose un lui-même. */
.cila-sidebar.cila-sidebar.cila-sidebar li > a {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* v106 — marges négatives compensées en padding : le trait de séparation
     court presque sur toute la largeur du bloc (6px de marge de chaque
     côté) au lieu de s'arrêter au retrait du texte. */
  margin: 0 -8px;
  padding: 12px 8px;    /* v112 — retrait latéral réduit : le libellé
                           commence plus à gauche */
  font-size: 15px;      /* v107 — 14 → 15 */
  line-height: 1.45;
  color: oklch(35% 0.01 60);
  border-bottom: 1px solid oklch(91% 0.008 60);
  text-decoration: none;
  text-wrap: pretty;
  transition: color 0.15s;
}
.cila-sidebar.cila-sidebar.cila-sidebar li:last-child > a { border-bottom: 0; }

/* Chevron Font Awesome 6, déjà chargé par T4 (le hamburger l'utilise).
   font-weight:900 = variante « solid » : sans lui, le glyphe ne s'affiche
   pas. Le poids est forcé ici pour ne pas hériter du 600 de l'entrée
   courante — c'est ce qui épaississait le chevron précédent. */
.cila-sidebar.cila-sidebar.cila-sidebar li > a::before {
  content: "\f054";               /* fa-chevron-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  line-height: 1.45;         /* aligné sur celle du libellé, pour que le
                                chevron reste sur la première ligne d'un
                                libellé qui passe à la ligne */
  flex: 0 0 auto;
  font-size: 13.5px;         /* v107 — suit la taille du libellé */
  padding-right: 8px;        /* v112 — 10 → 8 : encore un peu de largeur
                                regagnée pour le libellé */
  color: oklch(72% 0.01 60);
  transition: color 0.15s;   /* v111 — plus de transform : le chevron ne
                                bouge plus au survol */
}

/* Pas de pastille ici : elle est réservée au menu principal.

   v110 — CES RÈGLES AUSSI portent la classe répétée. La v109 avait monté la
   spécificité du lien de base à 0,3,2 en laissant celles-ci à 0,2,2 : la
   couleur grise du lien passait donc devant l'accent du survol ET de la
   rubrique courante, qui perdaient leur couleur (« Tous les membres » en
   noir au lieu de bordeaux). Toute règle qui surcharge une propriété du
   lien de base doit être au moins aussi spécifique que lui. */
.cila-sidebar.cila-sidebar.cila-sidebar li > a:hover,
.cila-sidebar.cila-sidebar.cila-sidebar li > a:focus-visible {
  color: var(--cila-accent);
  text-decoration: none;
}
.cila-sidebar.cila-sidebar.cila-sidebar li > a:hover::before {
  color: var(--cila-accent);
}

/* Rubrique courante — couleur et graisse, sans fond */
.cila-sidebar.cila-sidebar.cila-sidebar li.current > a,
.cila-sidebar.cila-sidebar.cila-sidebar li.active > a,
.cila-sidebar.cila-sidebar.cila-sidebar li > a.active {
  color: var(--cila-accent);
  font-weight: 600;
}
.cila-sidebar.cila-sidebar.cila-sidebar li.current > a::before,
.cila-sidebar.cila-sidebar.cila-sidebar li.active > a::before,
.cila-sidebar.cila-sidebar.cila-sidebar li > a.active::before { color: var(--cila-accent); }

/* Second niveau, si un menu imbriqué est utilisé */
.cila-sidebar li ul {
  margin: 0 0 6px 20px;
  border-left: 1px solid var(--cila-line-strong);
  padding-left: 10px;
}
.cila-sidebar.cila-sidebar.cila-sidebar li ul li > a {
  padding: 7px 0;
  font-size: 13.5px;
  border-bottom: 0;
  margin: 0;
}
.cila-sidebar.cila-sidebar.cila-sidebar li ul li > a::before { content: none; }

/* --- Fil d'Ariane ------------ */
.com-content .breadcrumb,
.t4-breadcrumbs .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  background: none;
  font-size: 13px;
  color: var(--cila-ink-mute);
}
.breadcrumb .breadcrumb-item::before { color: oklch(78% 0.01 60); }
.breadcrumb .breadcrumb-item.active { color: oklch(30% 0.01 60); }

@media (max-width: 991.98px) {
  .header-block .header-wrap { padding: 10px 0; }
  .header-block .navbar-brand.logo-control > a > img.logo-img,
  .header-block .logo-image.logo-control > a > img.logo-img,
  .header-block .navbar-brand > a > img.logo-img,
  .header-block .logo-image > a > img.logo-img { height: 56px; max-height: none; }
}



/* ============
   5. ACCUEIL — à écrire
   ============ */

/* ============
   6. ICÔNES D'ÉDITION (v105)
   Joomla place le crayon dans <div class="icons">, enfant de .article-aside
   — le même conteneur que les métadonnées (catégorie, clics, auteur). Trois
   règles masquaient ce conteneur en bloc : le crayon disparaissait avec, sur
   les fiches Membre et les listes membres et événements ; sur les
   newsletters aucune de ces règles ne s'appliquait, d'où le crayon visible
   là seulement. Ci-dessous le conteneur reste affiché, seules ses
   métadonnées sont masquées, et il s'efface entièrement pour un visiteur
   non connecté (pas d'espace fantôme).
   ============ */

/* Le conteneur reprend sa place, aux bons ordres de flux.

   v116 — portée étendue à TOUTES les listes, et le crayon est désormais
   plaqué en bas de carte comme « Lire la suite ». C'est lui qui porte
   margin-top:auto, et non plus le readmore : deux marges automatiques dans
   le même conteneur se partageraient l'espace libre au lieu de tout
   repousser vers le bas. Le readmore, juste après, reprend donc une marge
   fixe quand un crayon le précède (voir plus bas). */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications,
       .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements)
  .blog-item .article-aside {
  display: block;
  order: 8;            /* juste avant le bouton « Lire la suite » (order:9) */
  margin: 0;
  margin-top: auto;
  padding: 0 20px;
  flex-shrink: 0;
}

/* Quand le crayon est là, c'est lui qui pousse : le readmore le suit de
   près, sinon les deux marges automatiques se partageraient l'espace et
   aucun des deux n'irait au bas de la carte. */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications,
       .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements)
  .blog-item:has(.article-aside .icons) :is(.readmore, p.readmore) {
  margin-top: 10px !important;
}

/* Fiche individuelle : le crayon passe EN HAUT, avant le titre, sur toutes
   les rubriques — c'est le premier geste attendu quand on relit une fiche
   connecté. */
.com-content-article .article-aside {
  display: block;
  order: -1;
  margin: 0 0 18px;
}
.com-content-article:has(.photo-du-membre) .article-aside {
  grid-column: 1;
}

/* Seules les métadonnées sont masquées. */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications,
       .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements)
  .blog-item .article-aside .article-info,
.com-content-article .article-aside .article-info { display: none; }

/* Visiteur non connecté : Joomla ne rend pas .icons, le conteneur est donc
   vide — on le retire pour ne pas laisser de marge orpheline, ni manger
   l'espace libre avec son margin-top:auto. */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications,
       .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements)
  .blog-item .article-aside:not(:has(.icons)),
.com-content-article .article-aside:not(:has(.icons)) { display: none; }

/* Le float natif de Joomla n'a aucun sens dans une carte en flex column :
   il sortirait le crayon du flux et le ferait chevaucher le texte. */
.blog-item .article-aside .icons,
.com-content-article .article-aside .icons {
  float: none;
  display: flex;
  justify-content: flex-end;
}

/* Un lien discret, à la même échelle que les métadonnées. */
.blog-item .article-aside .edit-link a,
.com-content-article .article-aside .edit-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  background: var(--cila-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cila-ink-mute);
  text-decoration: none;
}
.blog-item .article-aside .edit-link a:hover,
.com-content-article .article-aside .edit-link a:hover {
  border-color: var(--cila-accent);
  color: var(--cila-accent);
  text-decoration: none;
}

/* L'infobulle « Article publié » est injectée dans le lien : elle ne doit
   apparaître qu'au survol, sinon son texte s'ajoute au libellé. */
.blog-item .article-aside .edit-link [role="tooltip"],
.com-content-article .article-aside .edit-link [role="tooltip"] { display: none; }


/* ============
   ADMINISTRATION — SÉLECTEUR DE MÉDIA
   Ajout client. La fenêtre du champ média (Web Component joomla-dialog)
   s'ouvre à une taille trop réduite pour parcourir les dossiers : on la
   force à 80 % de la fenêtre, centrée, et on étire le corps et l'iframe
   internes. Règles réservées au back-office — sans effet sur le site public.
   ============ */

joomla-dialog.joomla-dialog-media-field dialog {
  width: 80vw !important;
  max-width: 80vw !important;
  height: 80vh !important;
  max-height: 80vh !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

joomla-dialog.joomla-dialog-media-field .joomla-dialog-body,
joomla-dialog.joomla-dialog-media-field iframe.iframe-content {
  width: 100% !important;
  height: calc(80vh - 50px) !important; /* déduit le bandeau/bouton JSELECT */
  border: none !important;
}


/* ============
   ADMINISTRATION — FORMULAIRE D'ÉDITION EN FACE AVANT
   Les champs personnalisés de type image ou document rendent un
   <joomla-field-media> : un .input-group où la zone de saisie du chemin
   partage la ligne avec les boutons « Sélectionner » et « Effacer ». Sur la
   largeur réduite d'un formulaire de face avant — les .controls étant déjà
   décalés de 220 px par le gabarit — il ne reste qu'une trentaine de pixels
   pour le chemin : on lit « images/ev » et rien de plus. Le chemin passe donc
   sur sa propre ligne, en pleine largeur, les deux boutons dessous.
   ============ */

joomla-field-media .input-group {
  flex-wrap: wrap;
  row-gap: 8px;
}
joomla-field-media .input-group .field-media-input {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  border-radius: 4px;
  font-size: 13px;
}
/* Les deux boutons du champ média, une fois passés sous la zone de saisie,
   perdaient la mise en forme que Bootstrap leur donnait dans le groupe :
   hauteur écrasée et libellé resté vert foncé sur fond vert. On les rétablit
   explicitement — même hauteur, libellé lisible, coins arrondis à l'extérieur
   du couple. */
joomla-field-media .input-group .button-select,
joomla-field-media .input-group .button-clear {
  padding: 9px 18px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cila-on-accent);
}
joomla-field-media .input-group .button-select {
  border-radius: 4px 0 0 4px;
}
joomla-field-media .input-group .button-clear {
  border-radius: 0 4px 4px 0;
  padding-inline: 14px;
}
joomla-field-media .input-group .button-clear .icon-times::before {
  color: var(--cila-on-accent);
}

/* Les sous-champs d'un champ média (Image, Description d'image, Aucune
   description) sont eux-mêmes des .control-group : le décalage de 220 px du
   gabarit s'y applique une seconde fois et rétrécit d'autant la colonne de
   saisie. À l'intérieur d'un subform, l'étiquette repasse au-dessus. */
form:not(.form-no-margin) .subform-wrapper .control-group .controls {
  margin-left: 0;
}
.subform-wrapper .control-group .control-label {
  width: auto;
  float: none;
  margin-bottom: 4px;
}
.subform-wrapper .control-group {
  margin-bottom: 14px;
}


/* ============
   PAGINATION DES LISTES
   Le gabarit rend la pagination Bootstrap telle quelle : lien et page active
   en bleu #0d6efd, seule couleur du site à ne venir d'aucune palette. On la
   ramène au vocabulaire du site — filets clairs, libellés en encre sourde,
   page courante sur l'accent. Le compteur « Page 2 sur 2 » passe en petite
   capitale sourde, à l'aplomb de la barre.
   ============ */

.pagination-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 42px 0 8px;
}
.pagination-wrap .pagination {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination-wrap .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cila-line);
  margin-left: -1px;
  background: var(--cila-white);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--cila-ink-mute);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pagination-wrap .page-item:first-child .page-link {
  border-radius: 4px 0 0 4px;
  margin-left: 0;
}
.pagination-wrap .page-item:last-child .page-link {
  border-radius: 0 4px 4px 0;
}
.pagination-wrap .page-item a.page-link:hover {
  background: var(--cila-surface);
  color: var(--cila-accent);
  text-decoration: none;
}
.pagination-wrap .page-item.active .page-link {
  z-index: 1;
  border-color: var(--cila-accent);
  background: var(--cila-accent);
  color: var(--cila-on-accent);
}
/* Les flèches inactives restent visibles mais nettement en retrait. */
.pagination-wrap .page-item.disabled .page-link {
  background: var(--cila-white);
  color: oklch(80% 0.008 60);
}
.pagination-wrap .counter {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}

/* ============
   PAGE D'ACCUEIL — quatre modules mod_articles, chacun dans sa section T4 :
   #t4-accueil-colloque-mis-en-avant, #t4-accueil-edito,
   #t4-accueil-publications, #t4-accueil-enregistrements-recents.
   Balisage mod_articles (ul.mod-articles-items > li > article >
   .mod-articles-item-content) avec les champs rendus par render.php : mêmes
   classes de rôle que sur les fiches. Rien hors de ces quatre sections n'est
   touché.

   display:contents sur .mod-articles-item, .mod-articles-item-content et
   .fields-container fait remonter titre, tags et champs dans une seule
   grille — c'est ce qui permet de placer l'image ailleurs que là où Joomla
   l'écrit, et d'aligner les boutons en bas de carte quelle que soit la
   longueur des textes. Effet voulu : display:contents ne peint aucune boîte,
   le cadre de .fields-container disparaît de lui-même.
   ============ */

/* --- Bandes de section : deux fonds seulement, alternés ----------------- */
/* Le gabarit met 3rem de padding haut et bas sur .t4-main-body à partir de
   768px. Sur l'accueil, cette zone ne contient qu'une vue « À la une »
   VIDE : ces 96px ne séparent donc rien, ils creusent juste un trou entre
   l'en-tête et le premier module. Annulé pour la seule page d'accueil,
   repérée par la classe de corps cila-home (les autres pages gardent leur
   respiration). */
body.cila-home .t4-main-body {
  padding-top: 0;
  padding-bottom: 0;
}
/* Filet de sécurité si la classe de corps venait à disparaître : une zone
   principale dont la vue à la une n'a aucun contenu n'a pas de raison
   d'être haute. Pas de :has imbriqué (invalide, la règle serait jetée)
   ni de :empty (les blancs laissés par Joomla peuvent le faire échouer) :
   on teste la présence du conteneur ET l'absence de toute carte. */
.t4-main-body:has(.blog-featured):not(:has(.blog-item)) {
  padding-top: 0;
  padding-bottom: 0;
}

#t4-accueil-colloque-mis-en-avant,
#t4-accueil-publications { background: var(--cila-white); }
#t4-accueil-edito,
#t4-accueil-enregistrements-recents {
  background: var(--cila-surface);
  border-top: 1px solid var(--cila-line);
  border-bottom: 1px solid var(--cila-line);
}
#t4-accueil-colloque-mis-en-avant .t4-section-inner,
#t4-accueil-edito .t4-section-inner,
#t4-accueil-publications .t4-section-inner,
#t4-accueil-enregistrements-recents .t4-section-inner { padding-top: 58px; padding-bottom: 58px; }

/* --- Titres de module ------------
   Un seul traitement pour les quatre : sur-titre en petites capitales
   espacées, couleur accent. Il annonce la section sans concurrencer le
   titre du contenu (nom du colloque, titre de l'ouvrage), et le rythme
   reste identique d'une bande à l'autre. 14px : un cran au-dessus du
   sur-titre de l'événement livré jusqu'ici (11,5px). */
#t4-accueil-colloque-mis-en-avant .module-title,
#t4-accueil-edito .module-title,
#t4-accueil-publications .module-title,
#t4-accueil-enregistrements-recents .module-title { margin: 0 0 22px; padding: 0; border: 0; }
#t4-accueil-colloque-mis-en-avant .module-title span,
#t4-accueil-edito .module-title span,
#t4-accueil-publications .module-title span,
#t4-accueil-enregistrements-recents .module-title span { border: 0; padding: 0; background: none; }

#t4-accueil-colloque-mis-en-avant .module-title,
#t4-accueil-colloque-mis-en-avant .module-title span,
#t4-accueil-edito .module-title,
#t4-accueil-edito .module-title span,
#t4-accueil-publications .module-title,
#t4-accueil-publications .module-title span,
#t4-accueil-enregistrements-recents .module-title,
#t4-accueil-enregistrements-recents .module-title span {
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--cila-accent);
}
#t4-accueil-colloque-mis-en-avant .module-title { margin-bottom: 14px; }

/* Listes de module : jamais de puces, jamais de retrait. */
#t4-accueil-colloque-mis-en-avant .mod-articles-items,
#t4-accueil-edito .mod-articles-items,
#t4-accueil-publications .mod-articles-items,
#t4-accueil-enregistrements-recents .mod-articles-items { list-style: none; margin: 0; padding: 0; }

/* La date brute rendue par mod_articles (2026-03-21 09:00:00) est
   redondante avec le champ Date, correctement formaté. */
#t4-accueil-colloque-mis-en-avant .mod-articles-items dl.list-unstyled,
#t4-accueil-edito .mod-articles-items dl.list-unstyled,
#t4-accueil-publications .mod-articles-items dl.list-unstyled,
#t4-accueil-enregistrements-recents .mod-articles-items dl.list-unstyled { display: none; }

/* ============
   1. ÉVÉNEMENT MIS EN AVANT — bandeau deux colonnes
   ============ */
#t4-accueil-colloque-mis-en-avant .mod-articles-item,
#t4-accueil-colloque-mis-en-avant .fields-container { display: contents; }
#t4-accueil-colloque-mis-en-avant .mod-articles-item-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: 52px;
  align-items: start;
}

#t4-accueil-colloque-mis-en-avant .mod-articles-title {
  grid-column: 1;
  font-family: var(--cila-serif);
  font-size: 34px;
  line-height: 1.14;
  margin: 0 0 14px;
}
#t4-accueil-colloque-mis-en-avant .mod-articles-title a { color: var(--cila-ink); }
#t4-accueil-colloque-mis-en-avant .mod-articles-title a:hover { color: var(--cila-accent); text-decoration: none; }

#t4-accueil-colloque-mis-en-avant .mod-articles-tags { grid-column: 1; margin: 0 0 18px; }
#t4-accueil-colloque-mis-en-avant .mod-articles-tags .tags { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#t4-accueil-colloque-mis-en-avant .mod-articles-tags .tags li { margin: 0; padding: 0; }
/* Même pastille que sur les cartes de liste (v92) : le .badge-info de
   Bootstrap est presque blanc sur blanc dans ce contexte. */
#t4-accueil-colloque-mis-en-avant .mod-articles-tags .tags a.badge {
  display: inline-block;
  padding: 6px 13px;
  background: var(--cila-white);
  border: 1px solid var(--cila-accent);
  border-radius: 3px;
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cila-accent);
  text-decoration: none;
}
#t4-accueil-colloque-mis-en-avant .mod-articles-tags .tags a.badge:hover {
  background: var(--cila-accent);
  color: var(--cila-on-accent);
  text-decoration: none;
}

/* Affiche : colonne de droite, alignée sur le haut du titre.
   Règle demandée : une affiche PORTRAIT est recadrée au centre en 16/10
   (sinon elle mange toute la hauteur du bloc), une affiche PAYSAGE reste
   entière. Le CSS ne sait pas lire le format d'une image : la marque est
   posée par joomla/accueil-portrait.js (T4 > Custom Code > Before </body>),
   qui ajoute .cila-portrait aux images plus hautes que larges. Par défaut —
   script absent, image pas encore chargée, image paysage — l'affiche reste
   INTACTE : le comportement sûr est celui qui ne coupe rien. */
#t4-accueil-colloque-mis-en-avant .fields-container .cila-bandeau {
  grid-column: 2;
  grid-row: 1 / span 40;
  order: 0;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Paysage / cas par défaut : rien n'est rogné. */
#t4-accueil-colloque-mis-en-avant .fields-container .cila-bandeau img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--cila-line);
}
/* Portrait : cadrage centré dans une boîte 16/10 stable. */
#t4-accueil-colloque-mis-en-avant .fields-container .cila-bandeau img.cila-portrait {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* Informations pratiques : pile compacte sous le titre. */
#t4-accueil-colloque-mis-en-avant .fields-container .cila-meta {
  grid-column: 1;
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  gap: 2px 18px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--cila-line-soft);
}
#t4-accueil-colloque-mis-en-avant .fields-container .cila-meta .field-value { font-size: 15px; font-weight: 500; }

/* Ni argument ni programme en page d'accueil : le bloc reste une annonce
   (titre, date, lieu, modalités, affiche) et renvoie sur la fiche.
   Volontairement masqués en CSS plutôt que retirés côté module : si un
   jour vous voulez remonter l'argument, il suffit de retirer ces deux
   lignes, sans retoucher le paramétrage Joomla. */
#t4-accueil-colloque-mis-en-avant .fields-container .argument,
#t4-accueil-colloque-mis-en-avant .fields-container .programme-detaille { display: none; }

/* « Lire la suite » — à activer dans le module (Options > Lire la suite).
   Lien texte et non bouton plein : le bouton reste réservé aux actions
   réelles (inscription, commande) sur les fiches. */
#t4-accueil-colloque-mis-en-avant .readmore {
  grid-column: 1;
  order: 1;            /* dernier bloc de la colonne de gauche, quelle que
                          soit la position du readmore dans le HTML */
  margin: 24px 0 0;
}
#t4-accueil-colloque-mis-en-avant .readmore a.btn {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cila-sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cila-accent);
  text-decoration: none;
}
#t4-accueil-colloque-mis-en-avant .readmore a.btn::after { content: " →"; }
#t4-accueil-colloque-mis-en-avant .readmore a.btn:hover {
  color: var(--cila-accent-dark);
}

/* Pas de « Lire la suite » de secours : le lien vient du module Joomla
   (option « Lire la suite »), et de lui seul. La variante CSS accrochée au
   lien de titre, livrée en v124, a été retirée en v129 à votre demande —
   vous le gérez par vos plugins. Sans lien rendu par Joomla, la carte
   reste cliquable par son titre et par son visuel. */

@media (max-width: 880px) {
  #t4-accueil-colloque-mis-en-avant .mod-articles-item-content { grid-template-columns: minmax(0, 1fr); }
  #t4-accueil-colloque-mis-en-avant .fields-container .cila-bandeau { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 22px; }
  #t4-accueil-colloque-mis-en-avant .mod-articles-title { font-size: 27px; }
}

/* ============
   2. EDITO DU PRÉSIDENT — titre de rubrique à gauche, article à droite
   ============ */
/* Le sur-titre passe AU-DESSUS de l'article, comme sur les trois autres
   bandes : la colonne de gauche laissait un grand vide et rompait
   l'alignement du bord gauche d'une section à l'autre. */
#t4-accueil-edito .module-inner { display: block; }
#t4-accueil-edito .module-title { margin: 0 0 22px; line-height: 1.35; }
#t4-accueil-edito .mod-articles-title {
  font-family: var(--cila-serif);
  font-size: 21px;
  margin: 0 0 14px;
}
#t4-accueil-edito .mod-articles-title a { color: var(--cila-ink); }
#t4-accueil-edito .mod-articles-title a:hover { color: var(--cila-accent); text-decoration: none; }
#t4-accueil-edito .readmore { margin: 0; }
#t4-accueil-edito .readmore a.btn {
  display: inline-block;
  padding: 11px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--cila-accent);
  color: var(--cila-on-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
#t4-accueil-edito .readmore a.btn:hover { background: var(--cila-accent-dark); color: var(--cila-on-accent); text-decoration: none; }

/* ============
   3. CARTES D'ACCUEIL — socle commun aux publications et enregistrements
   Les lignes de la grille sont numérotées explicitement : l'ordre des
   champs dans Joomla n'a donc aucune incidence sur la mise en page, et
   une ligne vide (champ absent sur un article) ne décale rien.
   La ligne « ressort » en 1fr, juste avant le bouton, le plaque en bas de
   carte quelle que soit la longueur du titre.
   ============ */
#t4-accueil-publications .mod-articles-items,
#t4-accueil-enregistrements-recents .mod-articles-items {
  display: grid;
  /* Les cartes occupent TOUTE la largeur disponible : autant de colonnes
     que la largeur en autorise, chacune élastique (1fr) plutôt que
     plafonnée à 300px. Sur mobile, une seule colonne pleine largeur. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  align-items: stretch;
}
#t4-accueil-publications .mod-articles-items > li,
#t4-accueil-enregistrements-recents .mod-articles-items > li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  background: var(--cila-white);
  border: 1px solid var(--cila-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--cila-shadow-thin);
}
#t4-accueil-publications .mod-articles-item,
#t4-accueil-publications .mod-articles-item-content,
#t4-accueil-publications .fields-container,
#t4-accueil-enregistrements-recents .mod-articles-item,
#t4-accueil-enregistrements-recents .mod-articles-item-content,
#t4-accueil-enregistrements-recents .fields-container { display: contents; }

/* Titre de carte */
#t4-accueil-publications .mod-articles-title,
#t4-accueil-enregistrements-recents .mod-articles-title {
  grid-column: 1 / -1;
  font-family: var(--cila-serif);
  font-size: 16.5px;
  line-height: 1.32;
  margin: 0;
  padding: 16px 20px 0;
}
#t4-accueil-publications .mod-articles-title a,
#t4-accueil-enregistrements-recents .mod-articles-title a { color: var(--cila-ink); }
#t4-accueil-publications .mod-articles-title a:hover,
#t4-accueil-enregistrements-recents .mod-articles-title a:hover { color: var(--cila-accent); text-decoration: none; }

/* Métadonnées de carte : libellés masqués, une valeur par ligne. */
#t4-accueil-publications .fields-container .cila-meta,
#t4-accueil-enregistrements-recents .fields-container .cila-meta {
  display: block;
  margin: 0;
  padding: 6px 20px 0;
  border: 0;
}
#t4-accueil-publications .fields-container .cila-meta .field-label,
#t4-accueil-enregistrements-recents .fields-container .cila-meta .field-label { display: none; }
#t4-accueil-publications .fields-container .cila-meta .field-value,
#t4-accueil-enregistrements-recents .fields-container .cila-meta .field-value { font-size: 13.5px; line-height: 1.45; color: var(--cila-ink-mute); }

/* Visuel de carte : bandeau haut, jamais rogné pour les couvertures. */
#t4-accueil-publications .fields-container .cila-visuel,
#t4-accueil-enregistrements-recents .fields-container .cila-visuel {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cila-line);
  background: var(--cila-surface);
}
#t4-accueil-publications .fields-container .cila-visuel .field-value,
#t4-accueil-enregistrements-recents .fields-container .cila-visuel .field-value { height: 190px; }
#t4-accueil-publications .fields-container .cila-visuel img { box-shadow: 0 1px 6px oklch(0% 0 0 / 0.16); border-radius: 2px; }
/* La vignette d'un enregistrement est une image de communication : elle
   remplit sa boîte, contrairement à une couverture d'ouvrage. */
#t4-accueil-enregistrements-recents .fields-container .cila-visuel .field-value { padding: 0; }
#t4-accueil-enregistrements-recents .fields-container .cila-visuel img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Sur l'accueil, les cartes ne portent PAS le bouton d'action de la fiche
   (commande de l'ouvrage, accès à l'enregistrement) : le geste attendu ici
   est d'ouvrir la fiche. On masque donc le champ bouton et on garde un
   « Lire la suite » texte, plaqué en bas de carte — à activer dans chaque
   module (Options > Lire la suite). */
#t4-accueil-publications .fields-container .cila-bouton,
#t4-accueil-enregistrements-recents .fields-container .cila-bouton { display: none; }

#t4-accueil-publications .readmore,
#t4-accueil-enregistrements-recents .readmore {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  padding: 16px 20px 20px;
}
#t4-accueil-publications .readmore a.btn,
#t4-accueil-enregistrements-recents .readmore a.btn {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cila-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cila-accent);
  text-decoration: none;
}
#t4-accueil-publications .readmore a.btn::after,
#t4-accueil-enregistrements-recents .readmore a.btn::after { content: " →"; }
#t4-accueil-publications .readmore a.btn:hover,
#t4-accueil-enregistrements-recents .readmore a.btn:hover {
  color: var(--cila-accent-dark);
}

/* Les visuels sont déjà des liens (render.php enveloppe le champ image
   dans un <a class="field-link"> vers l'article) : on rend la chose
   visible au survol, sans quoi rien n'indique qu'ils sont cliquables. */
#t4-accueil-colloque-mis-en-avant .fields-container .field-link,
#t4-accueil-publications .fields-container .field-link,
#t4-accueil-enregistrements-recents .fields-container .field-link {
  display: block;
  cursor: pointer;
  transition: opacity 0.15s;
}
#t4-accueil-colloque-mis-en-avant .fields-container .field-link:hover,
#t4-accueil-publications .fields-container .field-link:hover,
#t4-accueil-enregistrements-recents .fields-container .field-link:hover { opacity: 0.86; text-decoration: none; }

/* --- 3a. Publications ------------
   Lignes : 1 couverture · 2 titre · 3 auteurs · 4 éditeur + année ·
   5 ressort · 6 bouton. La présentation longue reste sur la fiche. */
#t4-accueil-publications .mod-articles-items > li { grid-template-rows: auto auto auto auto auto 1fr auto; }
#t4-accueil-publications .mod-articles-title { grid-row: 2; }
#t4-accueil-publications .fields-container .direction-auteurs { grid-column: 1 / -1; grid-row: 3; }
#t4-accueil-publications .fields-container .direction-auteurs .field-value {
  font-size: 14px;
  color: var(--cila-ink);
  font-weight: 500;
}
/* Éditeur et année sur DEUX lignes distinctes, chacune avec son propre
   traitement : auteurs en pleine encre, éditeur en italique serif,
   année en petites capitales espacées. Trois niveaux de lecture sans
   ajouter de libellé. */
#t4-accueil-publications .fields-container .editeur { grid-column: 1 / -1; grid-row: 4; padding-top: 4px; }
#t4-accueil-publications .fields-container .editeur .field-value {
  font-family: var(--cila-serif);
  font-style: italic;
  font-size: 14px;
  color: oklch(38% 0.01 60);
}
#t4-accueil-publications .fields-container .annee-de-parution { grid-column: 1 / -1; grid-row: 5; padding-top: 6px; }
#t4-accueil-publications .fields-container .annee-de-parution .field-value {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}
#t4-accueil-publications .fields-container .presentation-de-la-publication { display: none; }
#t4-accueil-publications .readmore { grid-row: 7; }

/* --- 3b. Enregistrements ------------
   Lignes : 1 vignette · 2 type · 3 titre · 4 intervenant(s) · 5 date ·
   6 accès + tarif · 7 ressort · 8 bouton. */
#t4-accueil-enregistrements-recents .mod-articles-items > li { grid-template-rows: auto auto auto auto auto auto 1fr auto; }
#t4-accueil-enregistrements-recents .fields-container .type-denregistrement { grid-column: 1 / -1; grid-row: 2; padding-top: 14px; }
#t4-accueil-enregistrements-recents .fields-container .type-denregistrement .field-value {
  font-family: var(--cila-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cila-accent);
}
#t4-accueil-enregistrements-recents .mod-articles-title { grid-row: 3; padding-top: 6px; }
#t4-accueil-enregistrements-recents .fields-container .intervenant-s { grid-column: 1 / -1; grid-row: 4; }
#t4-accueil-enregistrements-recents .fields-container .intervenant-s .field-value { color: var(--cila-ink); font-weight: 500; }
#t4-accueil-enregistrements-recents .fields-container .date-de-levenement { grid-column: 1 / -1; grid-row: 5; }
#t4-accueil-enregistrements-recents .fields-container .cila-pastille {
  grid-column: 1;
  grid-row: 6;
  align-self: center;
  margin: 0;
  padding: 14px 0 0 20px;
  border: 0;
}
#t4-accueil-enregistrements-recents .fields-container .cila-pastille .field-label { display: none; }
#t4-accueil-enregistrements-recents .fields-container .tarif {
  grid-column: 2;
  grid-row: 6;
  align-self: center;
  padding: 14px 20px 0 10px;
  justify-self: start;
}
#t4-accueil-enregistrements-recents .readmore { grid-row: 8; }

/* ============
   4. MOBILE (< 640px) — une colonne, respirations resserrées
   Rien de structurel ne change : les grilles de cartes retombent seules à
   une colonne pleine largeur (auto-fit + minmax(…, 1fr)), et le bandeau de
   l'événement passe en pile à 880px. Ici on ne fait que réduire les
   marges et les corps de texte, qui sont calibrés pour le bureau.
   ============ */
@media (max-width: 640px) {
  #t4-accueil-colloque-mis-en-avant .t4-section-inner,
  #t4-accueil-edito .t4-section-inner,
  #t4-accueil-publications .t4-section-inner,
  #t4-accueil-enregistrements-recents .t4-section-inner {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  #t4-accueil-colloque-mis-en-avant .module-title,
  #t4-accueil-colloque-mis-en-avant .module-title span,
  #t4-accueil-edito .module-title,
  #t4-accueil-edito .module-title span,
  #t4-accueil-publications .module-title,
  #t4-accueil-publications .module-title span,
  #t4-accueil-enregistrements-recents .module-title,
  #t4-accueil-enregistrements-recents .module-title span { font-size: 13px; }
  #t4-accueil-edito .module-title,
  #t4-accueil-publications .module-title,
  #t4-accueil-enregistrements-recents .module-title { margin-bottom: 18px; }

  #t4-accueil-colloque-mis-en-avant .mod-articles-title { font-size: 25px; }
  #t4-accueil-colloque-mis-en-avant .fields-container .cila-bandeau img { max-height: 380px; }
  /* Libellé au-dessus de la valeur : deux colonnes de 104px + valeur ne
     tiennent pas sous 400px sans casser les mots. */
  #t4-accueil-colloque-mis-en-avant .fields-container .cila-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    padding: 9px 0;
  }

  #t4-accueil-publications .mod-articles-items,
  #t4-accueil-enregistrements-recents .mod-articles-items { gap: 18px; }
  #t4-accueil-publications .mod-articles-title,
  #t4-accueil-enregistrements-recents .mod-articles-title { font-size: 18px; }
  /* Une seule carte par ligne : le visuel peut respirer davantage. */
  #t4-accueil-publications .fields-container .cila-visuel .field-value,
  #t4-accueil-enregistrements-recents .fields-container .cila-visuel .field-value { height: 220px; }
}

/* Respiration basse quand le module ne rend pas de « Lire la suite » :
   sans lui, la dernière ligne (pastille + tarif, éditeur + année) touche
   le bord de la carte. Le padding est porté par la grille elle-même, donc
   il s'ajoute sous la dernière ligne quelle qu'elle soit. */
#t4-accueil-publications .mod-articles-items > li:not(:has(.readmore)),
#t4-accueil-enregistrements-recents .mod-articles-items > li:not(:has(.readmore)) {
  padding-bottom: 22px;
}


/* ============
   FORMULAIRE DE CONTACT — PAGE FORMATIONS (BAForms, module de sidebar)
   Classe de page : cila-formations
   Balisage : .com-baforms-wrapper > form.ba-form-2, lignes .ba-form-row >
   .ba-form-column-wrapper > .spanN.ba-form-column, et par champ
   .ba-form-field-item > .ba-input-wrapper > (.ba-field-label-wrapper +
   .ba-field-container).
   Le plugin pose ses couleurs en variables CSS INLINE sur le conteneur du
   bouton (--submit-background-color…). Redéfinir ces variables sur le
   bouton lui-même suffit : une custom property déclarée sur l'élément bat
   celle héritée du parent, sans !important.
   ============ */

/* Le module devient le panneau gris de la maquette. */
.cila-formations .sidebar-r .module .module-inner,
.cila-formations .t4-module:has(.com-baforms-wrapper) .module-inner {
  background: var(--cila-surface);
  border-radius: 6px;
  padding: 26px 24px 28px;
}
/* v137 — le collant est défini une seule fois, plus bas dans le fichier
   (section v135/v137). La déclaration qui se trouvait ici posait top:24px
   et faisait doublon. */

/* v140 — le titre du module reprend le format des titres .cila-sidebar
   (voir section Sidebar). La déclaration en serif 19px de la v133 est
   remplacée, pas complétée : deux recettes concurrentes sur le même
   élément auraient dépendu de l'ordre du fichier. */

/* L'éditeur de contenu enveloppe le formulaire dans des <p> vides qui
   ouvraient deux interlignes parasites en haut et en bas du panneau. */
.cila-formations .com-baforms-wrapper,
.cila-formations .module-ct .custom { margin: 0; }
.cila-formations .module-ct .custom > p:empty { display: none; }

/* Le champ « headline » du formulaire répète le titre du module : un seul
   des deux doit rester. On garde celui du module, qui est éditable dans
   Joomla sans passer par le constructeur de formulaire. */
.cila-formations .com-baforms-wrapper .ba-form-headline-field { display: none; }

/* Lignes et colonnes : span6 côte à côte, span12 pleine largeur. */
.cila-formations .com-baforms-wrapper .ba-form-row { margin: 0 0 12px; }
.cila-formations .com-baforms-wrapper .ba-form-row:last-child { margin-bottom: 0; }
.cila-formations .com-baforms-wrapper .ba-form-column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.cila-formations .com-baforms-wrapper .ba-form-column { padding: 0; margin: 0; }
.cila-formations .com-baforms-wrapper .span6.ba-form-column { flex: 1 1 0; min-width: 0; }
.cila-formations .com-baforms-wrapper .span12.ba-form-column { flex: 1 1 100%; min-width: 0; }
.cila-formations .com-baforms-wrapper .ba-form-field-item { margin: 0; }
.cila-formations .com-baforms-wrapper .ba-form-field-item + .ba-form-field-item { margin-top: 12px; }

/* Libellés : petits, demi-gras, collés au champ. L'astérisque suit le
   libellé sans espace flottant — le balisage sépare les deux <span> par
   du texte, d'où le flex et le gap plutôt qu'une marge. */
.cila-formations .com-baforms-wrapper .ba-field-label-wrapper {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 0 5px;
}
.cila-formations .com-baforms-wrapper .ba-input-label-wrapper {
  font-family: var(--cila-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: oklch(35% 0.01 60);
}
.cila-formations .com-baforms-wrapper .required-star {
  font-size: 12px;
  line-height: 1;
  color: var(--cila-accent);
}

/* Champs de saisie. */
.cila-formations .com-baforms-wrapper .ba-field-container input[type="text"],
.cila-formations .com-baforms-wrapper .ba-field-container input[type="email"],
.cila-formations .com-baforms-wrapper .ba-field-container textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  padding: 10px 12px;
  background: var(--cila-white);
  border: 1px solid var(--cila-line-strong);
  border-radius: 3px;
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cila-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cila-formations .com-baforms-wrapper .ba-field-container textarea {
  min-height: 88px;
  resize: vertical;
}
.cila-formations .com-baforms-wrapper .ba-field-container :where(input, textarea)::placeholder {
  color: oklch(60% 0.01 60);
  opacity: 1;
}
.cila-formations .com-baforms-wrapper .ba-field-container :where(input, textarea):focus {
  outline: 0;
  border-color: var(--cila-accent);
  box-shadow: 0 0 0 2px oklch(40% 0.11 25 / 0.12);
}

/* Bouton d'envoi : pleine largeur, accent, sans l'icône chevron du plugin. */
.cila-formations .com-baforms-wrapper .ba-form-submit-field { margin-top: 16px; }
.cila-formations .com-baforms-wrapper .ba-form-submit-btn-wrapper { display: block; }
.cila-formations .com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn {
  --submit-background-color: var(--cila-accent);
  --submit-background-hover: var(--cila-accent-dark);
  --submit-border-radius: 3px;
  --submit-padding-top: 12px;
  --submit-padding-right: 16px;
  --submit-padding-bottom: 12px;
  --submit-padding-left: 16px;
  --submit-typography-font-size: 14px;
  --submit-typography-line-height: 1.2;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  background: var(--cila-accent);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--cila-on-accent);
  transition: background-color 0.15s;
}
.cila-formations .com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn:hover,
.cila-formations .com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn:focus {
  background: var(--cila-accent-dark);
  color: var(--cila-on-accent);
  text-decoration: none;
}
.cila-formations .com-baforms-wrapper .ba-form-submit-btn i { display: none; }
.cila-formations .com-baforms-wrapper .ba-form-submit-title { font: inherit; color: inherit; }

/* Le honeypot est un vrai <input type="checkbox"> dans le flux : masqué
   sans display:none, que certains anti-spam considèrent comme un aveu. */
.cila-formations .com-baforms-wrapper .ba-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Sous 520px de panneau (sidebar empilée sous l'article), prénom/nom et
   email/profession ne tiennent plus côte à côte. */
@media (max-width: 900px) {
  .cila-formations .t4-module:has(.com-baforms-wrapper) { position: static; }
  .cila-formations .com-baforms-wrapper .span6.ba-form-column { flex: 1 1 100%; }
}


/* ============
   v134 — PAGE FORMATIONS : corps de texte des champs, cartes de la liste
   ============ */

/* Le constructeur de formulaire écrit sa typographie EN STYLE INLINE sur
   l'input (font-size hérité de son thème, ~17px) : une règle de feuille de
   style, quelle que soit sa spécificité, perd contre un attribut style.
   D'où !important — le seul endroit du fichier où il est justifié. */
.cila-formations .com-baforms-wrapper .ba-field-container input[type="text"],
.cila-formations .com-baforms-wrapper .ba-field-container input[type="email"],
.cila-formations .com-baforms-wrapper .ba-field-container textarea {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.cila-formations .com-baforms-wrapper .ba-field-container :where(input, textarea)::placeholder {
  font-size: 13px;
  line-height: 1.45;
}

/* --- Cartes de la liste des formations ------------
   Le balisage n'a ni visuel ni champ : la carte n'est faite que d'un titre
   et d'un extrait. Elle a donc besoin d'un rembourrage haut (ailleurs c'est
   l'image qui l'apporte) et d'un extrait calibré pour une colonne étroite —
   sans quoi il hérite du corps de texte de l'article, dimensionné pour la
   pleine largeur. */
.cila-formations .blog-item .system-unpublished { padding-top: 22px; }
.cila-formations .blog-item .page-header { margin-bottom: 10px; }

/* Le bloc « Détails / Catégorie / Clics » ne laisse que du vide une fois ses
   entrées masquées par les règles générales : on retire aussi sa boîte. */
.cila-formations .blog-item .article-aside { display: none; }

.cila-formations .blog-item .item-intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cila-ink-mute);
  text-wrap: pretty;
}
.cila-formations .blog-item .item-intro p { margin: 0; font-size: inherit; line-height: inherit; }
.cila-formations .blog-item .item-intro p + p { margin-top: 8px; }

/* Titre : même échelle que les autres listes, sans la hauteur minimale de
   deux lignes qui creusait un blanc sous les titres courts. */
.cila-formations .blog-item .page-header h2 { min-height: 0; }

/* Une seule colonne : les formations se lisent l'une sous l'autre, pas
   côte à côte — l'extrait est trop long pour une colonne étroite, et la
   liste n'en compte que trois. La grille commune (auto-fill 260px) est
   donc écrasée ici. */
.cila-formations .blog-items,
.cila-formations .com-content-category-blog .blog-items {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* La carte ne s'étire plus à la hauteur d'une rangée : elle fait la
   hauteur de son contenu. */
.cila-formations .blog-item { height: auto; }


/* ============
   v135 — PAGE FORMATIONS : contact visible au défilement
   position:sticky (posé en v133) ne tient que si TROIS conditions sont
   réunies — c'est presque toujours l'une d'elles qui manque :
   1. aucun ancêtre en overflow hidden/auto/scroll jusqu'au conteneur de
      défilement (Bootstrap et T4 en posent volontiers sur .row) ;
   2. le parent direct doit être PLUS HAUT que l'élément : dans une colonne
      étirée par le flex de .row, le module fait toute la hauteur et n'a
      aucune marge de glissement — d'où align-self:start sur la colonne et
      height:auto sur ses enveloppes ;
   3. l'élément doit être plus court que la fenêtre — d'où le max-height
      avec défilement interne en secours.
   ============ */

/* 1 — on rend le chemin de défilement transparent. Portée limitée à la
   page Formations : ailleurs, ces overflow servent à couper des visuels. */
.cila-formations .t4-content,
.cila-formations .t4-content-inner,
.cila-formations .t4-main-body,
.cila-formations .t4-masthead + *,
.cila-formations .t4-section,
.cila-formations .t4-section .container,
.cila-formations .t4-section .row,
.cila-formations .t4-sidebar,
.cila-formations .sidebar-r,
.cila-formations .t4-sidebar-r { overflow: visible; }

/* 2 — v137, CORRECTION. La v135 posait ici align-self:flex-start sur la
   COLONNE : erreur exactement inverse du besoin. La colonne se rétractait
   à la hauteur du module (574px pour 574px, relevé en console), et un
   élément collant n'a de course que si son PARENT est plus haut que lui.
   La colonne doit donc au contraire s'étirer sur toute la hauteur de la
   rangée flex (723px) — c'est le comportement par défaut de Bootstrap,
   qu'il suffit de ne pas contrarier. Le align-self:flex-start reste, mais
   sur le module seul (point 3).
   Classes réelles relevées sur le site : div.t4-col.sidebar-r.col-lg-4
   dans div.t4-row.row (display:flex). */
.cila-formations .t4-row > .t4-col.sidebar-r {
  align-self: stretch;
  height: auto;
}

/* 3 — l'élément collant lui-même. 96px laissent passer l'en-tête fixe ;
   ajustez cette seule valeur si le panneau passe sous le menu. */
/* v141 — le max-height + overflow-y:auto de la v135 est SUPPRIMÉ. Il
   devait servir de secours si le formulaire dépassait la hauteur de la
   fenêtre, mais il transformait le panneau en zone de défilement propre :
   la molette y restait piégée au lieu de faire défiler la page. Un
   formulaire trop haut vaut mieux qu'un panneau qui capture le curseur. */
.cila-formations .t4-col.sidebar-r .t4-module:has(.com-baforms-wrapper),
.cila-formations .t4-module:has(.com-baforms-wrapper) {
  position: sticky;
  top: 96px;
  z-index: 2;
}



/* Sous 900px la colonne passe sous l'article : le collant n'a plus de sens
   et enfermerait le formulaire dans une hauteur inutile. */
@media (max-width: 900px) {
  .cila-formations .t4-col.sidebar-r .t4-module:has(.com-baforms-wrapper),
  .cila-formations .t4-module:has(.com-baforms-wrapper) { position: static; }
}


/* ============
   v138 — PAGE FORMATIONS : titre de page et description de catégorie
   ============ */

/* Le titre reprend exactement le sur-titre des modules d'accueil
   (#t4-accueil-edito .module-title et consorts, v-antérieures) : sans
   sérif, 14px, gras, capitales espacées, en accent. Le balisage réel est
   <h1 class="page-subtitle"><span class="subheading-category">Formations</span></h1> :
   il faut viser le h1 ET le span, la couleur et la casse pouvant être
   posées sur l'un ou sur l'autre par T4. */
.cila-formations .page-subtitle,
.cila-formations .page-subtitle .subheading-category {
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--cila-accent);
}
.cila-formations .page-subtitle {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.cila-formations .page-subtitle .subheading-category {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
}
.cila-formations .page-subtitle::after,
.cila-formations .page-subtitle::before { content: none; }

/* v163 — règle généralisée à TOUTES les rubriques (plus de préfixe
   .cila-formations).
   La description de catégorie n'était stylée nulle part : elle gardait le
   cadre gris de Bootstrap (.category-desc { border: 1px solid #e9ecef }),
   qui la faisait passer pour une carte — y compris vide. On retire le
   cadre et on la traite comme un chapeau de rubrique. */
.category-desc {
  margin: 0 0 34px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--cila-ink-mute);
  text-wrap: pretty;
}
.category-desc > :first-child { margin-top: 0; }
.category-desc > :last-child { margin-bottom: 0; }
.category-desc p {
  margin: 0 0 12px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Vide, elle ne doit pas laisser d'espace : Joomla émet le conteneur même
   sans texte. :empty seul ne suffit pas quand l'éditeur y a laissé un
   <p> vide — d'où le second sélecteur. */
.category-desc:empty,
.category-desc:has(> p:only-child:empty) { display: none; }


/* ============
   v139 — PAGE FORMATIONS : fond des cartes

   La règle générale des listes laisse .blog-item sur fond blanc (les autres
   rubriques ont un visuel qui remplit le haut de la carte). Ici la carte
   n'est que du texte : sans fond, le cadre seul ne la détache pas de la
   page. On reprend le beige des panneaux, comme sur la maquette.
   ============ */
.cila-formations .blog-item,
.cila-formations .com-content-category-blog .blog-item {
  background: var(--cila-surface);
  border-color: oklch(92% 0.006 60);
}
.cila-formations .blog-item:hover {
  background: var(--cila-surface);
  border-color: oklch(86% 0.012 25);
}

/* Les enveloppes internes de Joomla (.blog-item-content, .item-content,
   .system-unpublished) portent parfois un fond blanc hérité du gabarit :
   il repeindrait la carte par-dessus le beige. */
.cila-formations .blog-item .blog-item-content,
.cila-formations .blog-item .item-content,
.cila-formations .blog-item .system-unpublished { background: none; }


/* ============
   v140 — PAGE FORMATIONS : titres de module au format sidebar

   Même recette que .cila-sidebar (Public Sans 13,5px, filet du gabarit
   conservé et allongé jusqu'aux bords du panneau). Appliquée à TOUS les
   modules de la colonne de droite de cette page — module de contact comme
   éventuel module de menu — pour que la colonne soit homogène.

   Si vous ajoutez la classe de module « cila-sidebar » à ces modules dans
   Joomla, les règles de la section Sidebar prennent le relais et ce bloc
   devient superflu : c'est la solution la plus propre à terme.
   ============ */
/* v142 — ALIGNEMENT STRICT SUR .cila-sidebar. La v140 ajoutait trois
   propriétés que la règle sidebar ne pose PAS : text-transform:none,
   letter-spacing:0 et color. Or les capitales viennent de la règle de base
   du gabarit (.module-title { text-transform: uppercase }), que
   .cila-sidebar laisse volontairement passer. En les annulant ici, le
   titre ne pouvait pas ressembler à ceux des autres sidebars.
   Ce bloc reprend donc exactement les six propriétés de .cila-sidebar,
   ni plus ni moins. */
.cila-formations .t4-col.sidebar-r .module-title,
.cila-formations .t4-col.sidebar-r .moduletable-title,
.cila-formations .t4-col.sidebar-r h3.module-title,
.cila-formations .t4-col.sidebar-r h4.module-title {
  font-family: var(--cila-sans);
  font-size: 13.5px;
  line-height: 1.35;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

/* Le filet du gabarit est porté par un <span> réel, pas un pseudo-élément :
   on ne peut pas le supprimer par ::after. On le blockifie et on le fait
   déborder de 8px de chaque côté, marges négatives compensées en padding. */
.cila-formations .t4-col.sidebar-r .module-title span,
.cila-formations .t4-col.sidebar-r .moduletable-title span {
  display: block;
  margin: 0 -8px -1px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--cila-line-strong);
}

/* Le filet décoratif de T4 vient en ::before ou en ::after selon le
   gabarit : les deux sont neutralisés, sinon double soulignement. */
.cila-formations .t4-col.sidebar-r .module-title::before,
.cila-formations .t4-col.sidebar-r .module-title::after,
.cila-formations .t4-col.sidebar-r .moduletable-title::before,
.cila-formations .t4-col.sidebar-r .moduletable-title::after { content: none; display: none; }


/* ============
   v143 — PAGE FORMATIONS : « Lire la suite »
   La règle générale des listes cache le bouton (.blog-item .readmore
   {display:none}), puis six classes de liste le rétablissent nommément —
   cila-formations n'en faisait pas partie, d'où l'écart. Plutôt que
   d'ajouter cila-formations à ces six listes de sélecteurs (quatre endroits
   à modifier, un oubli garanti à la prochaine rubrique), on redéclare ici
   les trois règles nécessaires, valeurs reprises à l'identique de la
   section « listes ».
   ============ */
.cila-formations .blog-item .readmore {
  display: block;
  margin: 14px 20px 20px;
}

/* Le bouton se plaque en bas de carte, comme partout ailleurs.
   margin-top:auto porte un !important parce que template.css du gabarit
   déclare « .mt-4, p.readmore { margin-top: 1.5rem !important } » : sans
   poids égal, la marge automatique est écrasée en silence. order:9 le place
   après tous les autres blocs de la carte. */
.cila-formations .blog-item :is(.readmore, p.readmore) {
  order: 9;
  margin-top: auto !important;
  flex-shrink: 0;
}

/* v144 — lien fléché, pas bouton : même recette que les modules d'accueil
   (#t4-accueil-publications .readmore a.btn et consorts). Le bouton plein
   reste réservé aux actions réelles ; ici il s'agit d'une navigation.
   La classe .btn du gabarit apporte fond, cadre et rembourrage : les trois
   sont remis à zéro, sinon le lien garde sa boîte de bouton. */
.cila-formations .blog-item .readmore a,
.cila-formations .blog-item .readmore a.btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--cila-accent);
  text-decoration: none;
  transition: color 0.15s;
}
/* v145 — LIBELLÉ RÉÉCRIT EN CSS, PAR PAGE. Le texte vient d'une chaîne de
   langue globale, qui ne peut pas varier par rubrique sans surcharge de
   langue : font-size:0 neutralise le texte du gabarit, ::before écrit le
   libellé voulu à sa taille réelle (les blancs du HTML disparaissent avec).
   ⚠ POUR CHANGER LE LIBELLÉ : une seule valeur, le content du ::before
   ci-dessous.
   Accessibilité : le lien porte déjà un aria-label rédigé par Joomla, qui
   prime sur le contenu textuel pour les lecteurs d'écran. */
.cila-formations .blog-item .readmore a,
.cila-formations .blog-item .readmore a.btn { font-size: 0; }

.cila-formations .blog-item .readmore a::before,
.cila-formations .blog-item .readmore a.btn::before {
  content: "Lire la suite";
  font-size: 13px;
}
.cila-formations .blog-item .readmore a::after,
.cila-formations .blog-item .readmore a.btn::after {
  content: " →";
  font-size: 13px;
}
.cila-formations .blog-item .readmore a:hover,
.cila-formations .blog-item .readmore a.btn:hover,
.cila-formations .blog-item .readmore a:focus {
  color: var(--cila-accent-dark);
}


/* v147 — le bloc v146 (titres de carte en capitales) est RETIRÉ : il visait
   les cartes de la liste, alors que la demande portait sur le titre des
   pages d'article unitaires. Les cartes retrouvent le titre Spectral
   16,5px commun à toutes les listes. */


/* ============
   v150 — ICÔNES CLIQUABLES DU MENU PRINCIPAL
   Balisage : <li class="nav-item fab fa-instagram"><a class="cila-icone
   nav-link">…</a></li>. Font Awesome dessine l'icône en ::before sur le LI,
   pas sur le lien : elle est peinte hors de la zone cliquable, et aucun CSS
   ne peut déplacer un pseudo-élément dans un autre élément. On étend donc
   le lien — un ::after transparent en absolu recouvre le li, icône comprise :
   le clic porte sur le lien réel, clavier et clic-milieu préservés
   (contrairement à un onclick JS sur le li).
   PRÉREQUIS JOOMLA : la classe « cila-icone » dans le champ « Classe du
   lien » du lien de menu — c'est elle qui distingue ces entrées.
   ============ */
li.nav-item:has(> a.cila-icone) {
  position: relative;
  display: flex;
  align-items: center;
}
li.nav-item:has(> a.cila-icone) > a.cila-icone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* L'icône du li doit rester sous la zone cliquable, jamais au-dessus. */
li.nav-item:has(> a.cila-icone)::before {
  position: relative;
  z-index: 0;
  line-height: 1;
}

/* Signal de survol : sans lui, rien n'indique que l'icône répond au clic.
   La couleur est portée par le li, puisque c'est lui qui dessine le glyphe. */
li.nav-item:has(> a.cila-icone) { transition: color 0.15s; }
li.nav-item:has(> a.cila-icone):hover { color: var(--cila-accent); cursor: pointer; }
li.nav-item:has(> a.cila-icone):hover > a.cila-icone { color: var(--cila-accent); }


/* v151 — TEXTE DU LIEN MASQUÉ, ICÔNE SEULE.
   Pas de display:none sur le libellé : il disparaîtrait aussi pour les
   lecteurs d'écran et le lien deviendrait un carré sans nom. On le sort du
   champ visuel par la technique dite « visually hidden », qui le laisse
   dans l'arbre d'accessibilité — « Instagram » reste annoncé.
   clip-path:inset(50%) plutôt que l'ancien clip:rect(), déprécié. */
li.nav-item:has(> a.cila-icone) .menu-item-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien n'a plus de contenu visible : sans dimensions propres il se
   réduirait à zéro et l'::after de la v150 avec lui. On lui donne la
   surface du li, et une cible d'au moins 40px de côté pour le tactile. */
li.nav-item:has(> a.cila-icone) > a.cila-icone {
  display: block;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
li.nav-item:has(> a.cila-icone) {
  justify-content: center;
  min-width: 40px;
}
li.nav-item:has(> a.cila-icone)::before { font-size: 21px; }


/* v152 — PAS DE SOULIGNEMENT SUR LES ENTRÉES À ICÔNE.
   Le gabarit marque les liens de menu au survol par un trait (selon les
   thèmes T4 : un ::before sur le lien, un ::after, ou un simple
   text-decoration). Sur une entrée de texte c'est utile ; sous une icône
   isolée, le trait flotte sans rien souligner.

   Attention : l'::after du lien est NOTRE zone cliquable (v150) — il ne
   doit pas être neutralisé. Seuls le ::before du lien et les décorations
   de fond ou de bordure sont retirés. */
li.nav-item:has(> a.cila-icone) > a.cila-icone,
li.nav-item:has(> a.cila-icone) > a.cila-icone:hover,
li.nav-item:has(> a.cila-icone) > a.cila-icone:focus,
li.nav-item:has(> a.cila-icone) > a.cila-icone.active {
  text-decoration: none;
  background: none;
  border: 0;
  box-shadow: none;
}
li.nav-item:has(> a.cila-icone) > a.cila-icone::before,
li.nav-item:has(> a.cila-icone) > a.cila-icone > span::before,
li.nav-item:has(> a.cila-icone) > a.cila-icone > span::after {
  content: none;
  display: none;
}

/* La zone cliquable de la v150 est redéclarée après ces remises à zéro :
   la règle ci-dessus met les ::before à none, et un box-shadow:none sur le
   lien pourrait faire disparaître un fond de survol posé plus haut dans le
   fichier. L'::after, lui, doit rester intact. */
li.nav-item:has(> a.cila-icone) > a.cila-icone::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none;
  border: 0;
}


/* v153 — FOND DE SURVOL RÉELLEMENT SUPPRIMÉ.
   La v152 posait background:none sans !important : le fond rose est resté,
   donc le gabarit le déclare lui-même en !important (T4 le fait sur
   .nav-link:hover dans template.css). Seul un !important de même poids
   reprend la main — même raisonnement que pour p.readmore en v102.
   Les <span> intermédiaires sont couverts aussi : le fond peut être posé
   sur eux plutôt que sur le lien. */
li.nav-item:has(> a.cila-icone) > a.cila-icone,
li.nav-item:has(> a.cila-icone) > a.cila-icone:hover,
li.nav-item:has(> a.cila-icone) > a.cila-icone:focus,
li.nav-item:has(> a.cila-icone) > a.cila-icone:active,
li.nav-item:has(> a.cila-icone) > a.cila-icone span,
li.nav-item:has(> a.cila-icone):hover > a.cila-icone,
li.nav-item:has(> a.cila-icone):hover > a.cila-icone span {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Le li peut lui aussi porter le fond au survol. */
li.nav-item:has(> a.cila-icone),
li.nav-item:has(> a.cila-icone):hover {
  background: none !important;
  background-color: transparent !important;
}

/* Le lien ne doit pas s'étendre au-delà de l'icône : sur la capture, la
   plage rose courait à droite du glyphe parce que le lien occupait toute
   la largeur restante du li. Il est ramené à la taille de la cible. */
li.nav-item:has(> a.cila-icone) > a.cila-icone {
  width: 40px;
  flex: 0 0 40px;
}
li.nav-item:has(> a.cila-icone) { flex: 0 0 auto; width: 40px; }


/* v154 — LES ENTRÉES À ICÔNE SONT POUSSÉES À DROITE.
   La barre est un conteneur flex (ul.navbar-nav) : une marge gauche
   automatique sur le PREMIER élément du groupe absorbe tout l'espace libre
   et repousse ce qui suit contre le bord droit. Rien à changer dans l'ordre
   du menu — Instagram, Youtube et LinkedIn restent les trois derniers liens
   dans Joomla.

   « Premier du groupe » se dit sans sélecteur de frère précédent : c'est
   l'entrée à icône dont le frère immédiat AVANT n'en est pas une. */
ul.navbar-nav.level0 { display: flex; flex-wrap: wrap; align-items: center; }
ul.navbar-nav.level0 > li.nav-item:not(:has(> a.cila-icone)) + li.nav-item:has(> a.cila-icone) {
  margin-left: auto;
}

/* Les icônes forment un groupe serré, distinct des entrées de texte. */
ul.navbar-nav.level0 > li.nav-item:has(> a.cila-icone) + li.nav-item:has(> a.cila-icone) {
  margin-left: 2px;
}


/* v155 — LA BARRE DOIT S'ÉTENDRE POUR QUE LA MARGE AUTO SERVE À QUELQUE CHOSE.
   La v154 n'a rien changé : margin-left:auto ne repousse rien si le
   conteneur flex fait exactement la largeur de son contenu. C'est le cas
   par défaut d'un <ul> dans un menu T4, dimensionné sur ses éléments.
   On lui fait donc réclamer toute la largeur offerte par son parent. */
ul.navbar-nav.level0 {
  width: 100%;
  flex: 1 1 auto;
  margin-right: 0;
}


/* v156 — LE VRAI BLOQUEUR : .t4-navbar.
   Relevé en console : la chaîne ul → .t4-megamenu → nav.navbar font toutes
   632px, exactement la largeur du contenu, à l'intérieur d'un .header-wrap
   de 1288px. C'est .t4-navbar (flex: 0 0 auto) qui refuse de s'étendre ;
   tant qu'il reste à sa largeur naturelle, aucune marge automatique en
   dessous ne peut repousser quoi que ce soit.

   Les trois niveaux passent donc en flex:1, jusqu'au bord droit du
   conteneur d'en-tête. La classe mx-auto du gabarit devient sans effet —
   le menu n'est plus centré mais aligné à gauche, les icônes à droite. */
.header-wrap > .t4-navbar {
  flex: 1 1 auto;
  min-width: 0;
}
.t4-navbar > nav.navbar,
.t4-navbar .t4-megamenu {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}


/* v157 — MÊME RÈGLE QUE LA v156, AVEC LE POIDS NÉCESSAIRE.
   Contrôle en console après déploiement de la v156 :
       version 'v156', navbarFlex '0 0 auto', navbarWidth 632
   Le CSS était donc bien chargé, et pourtant .t4-navbar gardait sa valeur
   d'origine : le gabarit la déclare en !important. Aucune spécificité, si
   élevée soit-elle, ne bat un !important — seul un !important de même
   poids le fait. Troisième occurrence de ce cas dans le fichier, après
   p.readmore (v102) et le fond de survol du menu (v153). */
.header-wrap > .t4-navbar,
.t4-navbar.mx-auto {
  flex: 1 1 auto !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.t4-navbar > nav.navbar,
.t4-navbar .t4-megamenu,
.t4-navbar ul.navbar-nav.level0 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0;
}

/* ============
   v158 — BOUTONS À FOND SOMBRE : LIBELLÉ AU SURVOL
   Le plugin BA Forms recolore son <span class="ba-form-submit-title"> au
   survol (couleur héritée du fond), ce qui effaçait « Envoyer ma demande ».
   On impose le comportement de référence des boutons pleins du site
   (#t4-accueil-edito .readmore a.btn:hover) : fond accent sombre, libellé
   clair, pas de soulignement — et on force la couleur sur le libellé ET
   sur l'icône, car ce sont eux qui portent la règle du plugin.
   ============ */
.com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn:hover,
.com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn:focus,
.com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn:active {
  background: var(--cila-accent-dark) !important;
  border-color: var(--cila-accent-dark) !important;
  color: var(--cila-on-accent) !important;
  text-decoration: none;
}
.com-baforms-wrapper .ba-form-submit-btn:hover .ba-form-submit-title,
.com-baforms-wrapper .ba-form-submit-btn:focus .ba-form-submit-title,
.com-baforms-wrapper .ba-form-submit-btn:active .ba-form-submit-title,
.com-baforms-wrapper .ba-form-submit-btn:hover i,
.com-baforms-wrapper .ba-form-submit-btn:focus i {
  color: var(--cila-on-accent) !important;
  opacity: 1;
}

/* ============
   v159 — SURVOL DES « LIRE LA SUITE » : FILET QUI SE DÉPLOIE
   Le souligné natif tombait trop près du texte et se lisait mal à 14px.
   Remplacé par un filet de 1px posé à 6px sous la ligne de base, dessiné
   en background-image (donc animable) et déployé de gauche à droite en
   0,28 s. Bloc placé en fin de feuille : à spécificité égale, il gagne sur
   les règles de survol des sections concernées.
   ============ */
#t4-accueil-colloque-mis-en-avant .readmore a.btn,
#t4-accueil-publications .readmore a.btn,
#t4-accueil-enregistrements-recents .readmore a.btn,
.cila-formations .blog-item .readmore a.btn {
  display: inline-block;
  padding-bottom: 6px;
  text-decoration: none;
  background-image: linear-gradient(oklch(40% 0.11 25 / 0.55), oklch(40% 0.11 25 / 0.55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.28s ease, color 0.15s ease;
}
#t4-accueil-colloque-mis-en-avant .readmore a.btn:hover,
#t4-accueil-colloque-mis-en-avant .readmore a.btn:focus,
#t4-accueil-publications .readmore a.btn:hover,
#t4-accueil-publications .readmore a.btn:focus,
#t4-accueil-enregistrements-recents .readmore a.btn:hover,
#t4-accueil-enregistrements-recents .readmore a.btn:focus,
.cila-formations .blog-item .readmore a.btn:hover,
.cila-formations .blog-item .readmore a.btn:focus {
  color: var(--cila-accent-dark);
  text-decoration: none;
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  #t4-accueil-colloque-mis-en-avant .readmore a.btn,
  #t4-accueil-publications .readmore a.btn,
  #t4-accueil-enregistrements-recents .readmore a.btn,
  .cila-formations .blog-item .readmore a.btn { transition: none; }
}

/* ============
   v160 — « LIRE LA SUITE » DES LISTES ALIGNÉ SUR LE MODÈLE COMMUN
   Sur Événements, Newsletters, Publications, Ressources, Membres et
   Enregistrements, le lien se comportait encore comme un bouton plein :
   fond surface au repos, fond accent + texte blanc au survol (règle de la
   v65, ligne 1585). On le ramène au modèle validé en v159 : texte accent,
   flèche, et filet de 1px qui se déploie au survol. Les paddings, bordures
   et fonds du .btn du gabarit sont neutralisés ici plutôt que dans la règle
   d'origine, pour garder l'historique lisible.
   ============ */
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a.btn {
  display: inline-block;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: var(--cila-accent);
  text-decoration: none;
  background-image: linear-gradient(oklch(40% 0.11 25 / 0.55), oklch(40% 0.11 25 / 0.55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.28s ease, color 0.15s ease;
}
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a::after,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a.btn::after { content: " →"; }
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a:hover,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a:focus,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a.btn:hover,
:where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a.btn:focus {
  color: var(--cila-accent-dark);
  background-color: transparent;
  text-decoration: none;
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  :where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a,
  :where(.cila-liste-evenements, .cila-liste-newsletters, .cila-liste-publications, .cila-liste-ressources, .cila-liste-membres, .cila-liste-enregistrements) .blog-item .readmore a.btn { transition: none; }
}

/* ============
   v161 — PAGE DE PRÉSENTATION (« À propos / Objectifs »)
   Classes de mise en page posées dans le corps de l'article, pour obtenir
   la maquette « CILA Maquette À propos » sans surcharge PHP ni extension.
   Toutes sont des classes de RÔLE, utilisables dans n'importe quel article :
   aucune n'est liée à une classe de page.
   Le HTML de référence, avec sa maquette, vit dans la page de projet
   « CILA Article À propos » (et « CILA Article Prix de thèse »).
   ============ */

/* Chapeau — phrase d'accroche sous le titre. */
.cila-chapeau {
  font-size: 18px;
  line-height: 1.65;
  color: oklch(30% 0.01 60);
  text-wrap: pretty;
  margin: 0 0 12px;
}

/* Titre de section — même graphie que les titres de module de l'accueil. */
.cila-titre-section {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cila-accent);
  margin: 0 0 24px;
}

/* Accroche — phrase forte, un cran au-dessus du corps de texte. Le mot mis
   en gras à l'intérieur prend l'accent. */
.cila-accroche {
  font-size: 17px;
  line-height: 1.6;
  color: oklch(28% 0.01 60);
  text-wrap: pretty;
  margin: 0 0 18px;
}
.cila-accroche strong { color: var(--cila-accent); }

/* Chiffres clés — bande de 2 à 4 repères chiffrés. Le nombre de colonnes
   suit le nombre d'enfants. */
.cila-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--cila-line-strong);
  border-top: 1px solid var(--cila-line-strong);
  border-bottom: 1px solid var(--cila-line-strong);
  margin: 44px 0;
}
.cila-chiffres > * {
  background: var(--cila-surface, oklch(97.5% 0.008 80));
  padding: 22px 24px;
}
.cila-chiffres strong {
  display: block;
  font-family: var(--cila-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--cila-accent);
}
.cila-chiffres span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(52% 0.015 60);
  margin-top: 7px;
}

/* Cartes — grille de blocs encadrés, un titre court et un paragraphe. */
.cila-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--cila-line-strong);
  border: 1px solid var(--cila-line-strong);
  margin: 32px 0;
}
.cila-cartes > * { background: oklch(99.5% 0.003 80); padding: 26px 28px; }
.cila-cartes h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cila-accent);
  margin: 0 0 10px;
}
.cila-cartes p {
  font-size: 14.5px;
  line-height: 1.65;
  color: oklch(38% 0.015 60);
  margin: 0;
  text-wrap: pretty;
}
.cila-cartes p + p { margin-top: 12px; font-size: 13.5px; font-weight: 600; }

/* Publics — colonnes à filet vertical. Le filet du premier bloc est à
   l'accent, les suivants en gris : hiérarchie sans ajouter de classe. */
.cila-publics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  margin: 32px 0;
}
.cila-publics > * { border-left: 3px solid oklch(75% 0.03 60); padding-left: 20px; }
.cila-publics > :first-child { border-left-color: var(--cila-accent); }
.cila-publics h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 8px; }
.cila-publics p {
  font-size: 14.5px;
  line-height: 1.7;
  color: oklch(42% 0.015 60);
  margin: 0;
  text-wrap: pretty;
}

/* Liste numérotée — les numéros sont générés, rien à saisir. */
ol.cila-numerotee {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  counter-reset: cila-num;
  border-top: 1px solid var(--cila-line-strong);
}
ol.cila-numerotee > li {
  counter-increment: cila-num;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--cila-line-strong);
  font-size: 15.5px;
  line-height: 1.65;
  color: oklch(30% 0.01 60);
  text-wrap: pretty;
}
ol.cila-numerotee > li::before {
  content: counter(cila-num, decimal-leading-zero);
  font-family: var(--cila-serif);
  font-size: 15px;
  color: oklch(60% 0.05 40);
}

/* Source d'une citation. */
.cila-source {
  font-family: var(--cila-sans);
  font-style: normal;
  font-size: 13px;
  color: oklch(50% 0.015 60);
  margin-top: 8px;
}

/* Accordéon — balises natives details/summary, aucun JavaScript. */
details.cila-accordeon {
  margin: 40px 0;
  background: var(--cila-surface, oklch(94.5% 0.012 80));
  border: 1px solid var(--cila-line-strong);
  border-radius: 6px;
  overflow: hidden;
}
details.cila-accordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
details.cila-accordeon > summary::-webkit-details-marker { display: none; }
details.cila-accordeon > summary::after {
  content: "＋";
  font-size: 22px;
  color: var(--cila-accent);
  flex-shrink: 0;
}
details.cila-accordeon[open] > summary::after { content: "－"; }
details.cila-accordeon .cila-surtitre {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cila-accent);
  margin-bottom: 5px;
}
details.cila-accordeon > summary h2,
details.cila-accordeon > summary h3 {
  font-family: var(--cila-serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
details.cila-accordeon > .cila-accordeon-corps {
  padding: 24px 30px 30px;
  border-top: 1px solid var(--cila-line-strong);
}
details.cila-accordeon > .cila-accordeon-corps > :first-child { margin-top: 0; }
details.cila-accordeon > .cila-accordeon-corps p {
  font-size: 15.5px;
  line-height: 1.8;
  color: oklch(30% 0.01 60);
  margin: 0 0 16px;
  text-wrap: pretty;
}
details.cila-accordeon > .cila-accordeon-corps p:last-child { margin-bottom: 0; }
details.cila-accordeon .cila-signature {
  font-size: 14px;
  font-weight: 600;
  color: oklch(28% 0.01 60);
}
/* Accordéon alimenté par un module ({loadmoduleid}) : on efface le chrome
   du module qui ferait doublon avec le summary. */
details.cila-accordeon .moduletable > h3,
details.cila-accordeon .mod-articles-category-title,
details.cila-accordeon .mod-articles-news .newsflash-title { display: none; }


/* ============
   v162 — PAGE LE CILA (institutionnel) : titre de page aligné sur Formations
   ============
   Le blog Formations affiche son titre via
   <h1 class="page-subtitle"><span class="subheading-category">…</span></h1>,
   la page « Le CILA » via <div class="page-header"><h1>Le CILA</h1></div>.
   Balisage différent, même rendu attendu : sans sérif, 14 px, gras,
   capitales espacées, en accent, sans cadre. */
.cila-institutionnel > .page-header {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
}
.cila-institutionnel > .page-header::before,
.cila-institutionnel > .page-header::after { content: none; }
.cila-institutionnel > .page-header h1 {
  font-family: var(--cila-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  color: var(--cila-accent);
  margin: 0;
  padding: 0;
  border: 0;
}


/* ============
   v164 — PAGE LE CILA : les items du blog institutionnel en pleine largeur
   ============
   La grille générique (.blog-items, repeat(auto-fill, minmax(260px,1fr))))
   met les éditoriaux en colonnes de 260 px : un texte long y devient une
   bande verticale. Sur cette rubrique, un item = une ligne pleine largeur,
   comme sur Formations. */
.cila-institutionnel .blog-items,
.cila-institutionnel .com-content-category-blog .blog-items {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.cila-institutionnel .blog-item,
.cila-institutionnel .blog-item-content,
.cila-institutionnel .item-content,
.cila-institutionnel .system-unpublished { width: 100%; max-width: none; }

/* v165 — la mesure de lecture (max-width: 74ch) est retirée : le texte
   occupe toute la largeur du bloc. */
.cila-institutionnel .blog-item .item-intro,
.cila-institutionnel .blog-item .autoreadmore {
  font-size: 16px;
  line-height: 1.75;
  color: oklch(30% 0.01 60);
  text-wrap: pretty;
}
.cila-institutionnel .blog-item .page-header { padding: 0; }
.cila-institutionnel .blog-item .page-header h2 { min-height: 0; font-size: 22px; }

/* Le bloc « Détails / Catégorie / Clics » ne dit rien d'utile sur un
   éditorial : on ne garde que le crayon d'édition. */
.cila-institutionnel .blog-item .article-info,
.cila-institutionnel .blog-item .article-aside > dl { display: none; }


/* ============
   v166 — PAGE LE CILA : accordéon sur les articles du blog institutionnel
   ============
   Joomla ne produit pas de <details> dans une vue blog : le repli est donc
   posé par cila-accordeon-institutionnel.js, qui laisse le premier
   paragraphe visible et pousse le reste dans .cila-accordeon-suite,
   commandé par .cila-accordeon-bouton. Le CSS ci-dessous n'habille que ces
   deux éléments — aucune classe Joomla n'est devinée. */
.cila-institutionnel .cila-accordeon-suite[hidden] { display: none; }
.cila-institutionnel .cila-accordeon-suite {
  animation: cila-accordeon-ouvre 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cila-accordeon-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Le premier paragraphe joue le rôle de chapeau : un cran plus grand,
   pour signaler qu'il résume ce qui est replié dessous. */
.cila-institutionnel .blog-item .item-intro > p:first-child,
.cila-institutionnel .blog-item .autoreadmore > p:first-child {
  font-size: 17px;
  line-height: 1.7;
  color: oklch(26% 0.012 60);
}

/* Bouton : même filet déployé que les « Lire la suite » de Formations. */
.cila-institutionnel .cila-accordeon-bouton {
  display: inline-flex;
  align-items: baseline;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cila-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cila-accent);
  cursor: pointer;
}
.cila-institutionnel .cila-accordeon-bouton span {
  position: relative;
  padding-bottom: 4px;
}
.cila-institutionnel .cila-accordeon-bouton span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cila-institutionnel .cila-accordeon-bouton:hover span::after,
.cila-institutionnel .cila-accordeon-bouton:focus-visible span::after { transform: scaleX(1); }
.cila-institutionnel .cila-accordeon-bouton::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cila-institutionnel .cila-accordeon-bouton[aria-expanded='true']::after {
  transform: translateY(0) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .cila-institutionnel .cila-accordeon-suite { animation: none; }
  .cila-institutionnel .cila-accordeon-bouton span::after,
  .cila-institutionnel .cila-accordeon-bouton::after { transition: none; }
}


/* ============
   v168 — CARTE ÉDITORIALE REPLIÉE (surcharge blog_item.php v2)
   ============
   Déclencheur : la Classe de page « cila-accordeon » sur le lien de menu —
   aucune rubrique n'est câblée en dur. La surcharge PHP produit alors :
     .item-content.cila-edito-carte > details.cila-edito
        > summary.cila-edito-tete
            > .cila-edito-libelles > .cila-edito-surtitre + .cila-edito-titre
            > .cila-edito-signe
        > .cila-edito-corps
   Fermée, la carte ne montre que le surtitre, le titre et le « + ». */
/* v170 — le fond crème et le cadre sont portés par la CARTE, pas par le
   <details> : tout ce qui pourrait s'intercaler dessous (barre d'icônes
   d'édition, conteneur vide laissé par un greffon) reçoit donc le même fond
   au lieu d'apparaître en bande blanche. overflow:hidden borne le tout au
   rayon du cadre. Le fond ne change plus à l'ouverture, et le survol ne
   produit plus d'effet. */
.cila-accordeon .cila-edito-carte {
  width: 100%;
  border: 1px solid var(--cila-line-strong);
  border-radius: 3px;
  background: var(--cila-paper, oklch(97.5% 0.006 70));
  overflow: hidden;
}
.cila-accordeon details.cila-edito { background: none; border: 0; }

/* Rien d'autre que le titre et le corps ne doit occuper la carte : un
   conteneur vide (greffon, barre d'icônes sans contenu) est escamoté. */
.cila-accordeon .cila-edito-carte > *:empty,
.cila-accordeon .cila-edito > *:not(summary):empty { display: none; }

.cila-accordeon .cila-edito-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.cila-accordeon .cila-edito-tete::-webkit-details-marker { display: none; }
.cila-accordeon .cila-edito-tete::marker { content: ''; }
.cila-accordeon .cila-edito-tete:focus-visible {
  outline: 2px solid var(--cila-accent);
  outline-offset: 2px;
}

.cila-accordeon .cila-edito-libelles {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cila-accordeon .cila-edito-surtitre {
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cila-accent);
}
.cila-accordeon .cila-edito-titre {
  font-family: var(--cila-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cila-accent-dark, var(--cila-accent));
  text-wrap: pretty;
}

/* Le signe « + » devient « − » à l'ouverture : deux filets croisés, dont le
   vertical s'escamote — plus net qu'un glyphe typographique. */
.cila-accordeon .cila-edito-signe {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}
.cila-accordeon .cila-edito-signe::before,
.cila-accordeon .cila-edito-signe::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--cila-accent);
  transform: translateY(-50%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.cila-accordeon .cila-edito-signe::after { transform: translateY(-50%) rotate(90deg); }
.cila-accordeon details.cila-edito[open] .cila-edito-signe::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.cila-accordeon .cila-edito-corps {
  background: none;
  padding: 4px 26px 26px;
  animation: cila-edito-ouvre 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.cila-accordeon .cila-edito-corps > p {
  font-size: 16px;
  line-height: 1.75;
  color: oklch(30% 0.01 60);
  text-wrap: pretty;
  margin: 0 0 1.1em;
}
.cila-accordeon .cila-edito-corps > p:last-of-type { margin-bottom: 0; }
@keyframes cila-edito-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cila-accordeon .cila-edito-corps { animation: none; }
  .cila-accordeon .cila-edito-signe::before,
  .cila-accordeon .cila-edito-signe::after { transition: none; }
}
@media (max-width: 640px) {
  .cila-accordeon .cila-edito-tete { padding: 18px 18px; gap: 16px; }
  .cila-accordeon .cila-edito-titre { font-size: 20px; }
  .cila-accordeon .cila-edito-corps { padding: 4px 18px 20px; }
}


/* ============
   v172 — TITRES DE PAGE : un seul rendu, y compris en vue liste
   ============
   Le titre d'une vue liste sort par un chemin distinct de celui d'un article
   — <h1 class="page-subtitle"><span class="subheading-category">…</span></h1>
   dans un .page-subheader — et gardait donc le grand sérif du gabarit. Il
   rejoint ici le rendu commun : 18 px, sans sérif, gras, en accent, sans
   capitales. La règle est répétée après le bloc du gabarit pour passer
   devant lui sans recourir à !important. */
/* v173 — troisième chemin possible pour un titre de liste : un h1 nu, enfant
   direct du conteneur de blog, sans classe ni sous-en-tête (c'est le cas de
   la page Formations). */
.com-content-category-blog > h1,
.com-content-category-blog > h1 a,
.blog > h1,
.blog > h1 a {
  font-family: var(--cila-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  color: var(--cila-accent);
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.page-subheader { margin: 0 0 22px; padding: 0; border: 0; background: none; }
.page-subheader .page-subtitle,
.page-subheader .page-subtitle .subheading-category,
.page-subheader .page-subtitle a {
  font-family: var(--cila-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  color: var(--cila-accent);
  margin: 0;
  padding: 0;
  border: 0;
}


/* ============
   v174 — FICHE ÉVÉNEMENT : affiche traitée comme sur la page d'accueil
   ============
   Même règle que pour l'événement mis en avant : une affiche paysage reste
   intacte, une affiche portrait est recadrée au centre dans une boîte 16/10
   pour ne pas occuper trois écrans de hauteur. La marque .cila-portrait est
   posée par accueil-portrait.js v2 ; script absent ou image non chargée,
   l'affiche reste intacte. */
.com-content-article .fields-container .cila-bandeau img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--cila-line);
}
.com-content-article .fields-container .cila-bandeau img.cila-portrait {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}


/* ============
   v175 — PAS D'EFFET DE SURVOL SUR LES CARTES INSTITUTIONNELLES ET FORMATIONS
   ============
   La grille commune soulève la carte au survol (cadre, ombre, translation).
   Sur ces deux pages l'item n'est pas une vignette cliquable mais un bloc de
   texte pleine largeur : le soulèvement n'annonce rien et distrait. */
.cila-institutionnel .blog-item:hover,
.cila-formations .blog-item:hover {
  border-color: var(--cila-line);
  box-shadow: none;
  transform: none;
}


/* ============
   v176 — CARTES FORMATIONS : rythme interne repris proprement
   ============
   Les cartes héritaient du padding serré de la grille de vignettes, pensé
   pour des blocs étroits : sur une carte pleine largeur le titre frôlait le
   bord haut. Un seul retrait de 26/30 px, et l'espacement entre titre, texte
   et lien vient d'une colonne flex à gouttière — plus de marges héritées à
   corriger une par une. */
.cila-formations .blog-item {
  padding: 26px 30px 28px;
}
.cila-formations .blog-item .item-content,
.cila-formations .blog-item .system-unpublished {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}
.cila-formations .blog-item .page-header {
  margin: 0;
  padding: 0;
  border: 0;
}
.cila-formations .blog-item .page-header h2 {
  margin: 0;
  min-height: 0;
}
.cila-formations .blog-item .item-intro { margin: 0; }
.cila-formations .blog-item .item-intro > :first-child { margin-top: 0; }
.cila-formations .blog-item .item-intro > :last-child { margin-bottom: 0; }
.cila-formations .blog-item .item-intro > p { margin: 0 0 0.9em; }
.cila-formations .blog-item .item-intro > p:last-child { margin-bottom: 0; }
.cila-formations .blog-item p.readmore { margin: 4px 0 0 !important; }

@media (max-width: 640px) {
  .cila-formations .blog-item { padding: 20px 20px 22px; }
}


/* ============
   v177 — PAGINATION DES LISTES
   ============
   Bootstrap la rendait en bleu système, hors palette. Ici : des chiffres
   posés sur la page, sans cadre ni fond, en encre atténuée ; la page courante
   seule prend le fond accent. Les chevrons (icônes Font Awesome) suivent la
   même règle, et les extrémités désactivées s'effacent au lieu de disparaître.
   Compteur « Page 1 sur 5 » en petites capitales, aligné à gauche. */
.com-content-category-blog__navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--cila-line);
}
.com-content-category-blog__counter {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--cila-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(58% 0.01 60);
}
.com-content-category-blog__pagination { margin: 0; }
.com-content-category-blog__pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.com-content-category-blog__pagination .page-item { margin: 0; }
.com-content-category-blog__pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--cila-accent);
  transition: background 0.2s ease, color 0.2s ease;
}
.com-content-category-blog__pagination a.page-link:hover,
.com-content-category-blog__pagination a.page-link:focus-visible {
  background: var(--cila-accent-pale);
  color: var(--cila-accent-dark, var(--cila-accent));
}
.com-content-category-blog__pagination .page-item.active .page-link {
  background: var(--cila-accent);
  color: var(--cila-on-accent);
}
.com-content-category-blog__pagination .page-item.disabled .page-link {
  color: oklch(78% 0.006 60);
  background: none;
}
.com-content-category-blog__pagination .page-link .fa { font-size: 13px; }

@media (max-width: 640px) {
  .com-content-category-blog__navigation { justify-content: center; }
  .com-content-category-blog__counter { order: 2; }
}


/* ============
   v178 — PAGE CONTACT : coordonnées et réseaux sociaux (classes d'éditeur)
   ============
   Deux classes à saisir dans l'article, sans surcharge ni extension.
   Les icônes viennent du jeu « brands » de Font Awesome chargé par le
   gabarit ; si elles ne s'affichent pas, c'est ce jeu qui manque et il
   faudra passer par des SVG en ligne. */
/* Coordonnées — lignes serrées, sans puces ni marges de paragraphe. */
.cila-coordonnees {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 34px;
}
.cila-coordonnees p { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* Réseaux sociaux — pastilles cerclées, icône seule. */
.cila-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 34px;
}
.cila-social-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid oklch(86% 0.008 60);
  border-radius: 50%;
  color: oklch(32% 0.01 60);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cila-social-lien:hover,
.cila-social-lien:focus-visible {
  border-color: var(--cila-accent);
  background: oklch(96% 0.015 25);
  color: var(--cila-accent);
  text-decoration: none;
}


/* ============
   v179 — PAGE CONTACT : icônes en SVG, et formulaire dans la palette
   ============
   Les icônes Font Awesome ne s'affichaient pas (jeu « brands » non chargé
   par le gabarit) : l'article porte désormais des SVG en ligne, sans aucune
   dépendance. Le formulaire BA Forms, lui, sortait en bleu système avec des
   champs gris : les règles ci-dessous sont posées sans préfixe de page, donc
   valables pour TOUS les formulaires du site ; celles de la page Formations,
   plus spécifiques, continuent de primer sur son panneau collant. */
/* Pastille : l'icône est un SVG en ligne, dimensionné par le CSS. */
.cila-social-lien svg { width: 18px; height: 18px; display: block; }

/* Le titre de section garde sa graphie, mais respire davantage quand il
   suit un bloc de coordonnées. */
.cila-coordonnees + .cila-titre-section { margin-top: 8px; }

/* --- Formulaire BA Forms, base commune ------------ */
.com-baforms-wrapper .ba-form-row { margin: 0 0 14px; }
.com-baforms-wrapper .ba-form-row:last-child { margin-bottom: 0; }
.com-baforms-wrapper .ba-form-column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
.com-baforms-wrapper .ba-form-column { padding: 0; margin: 0; }
.com-baforms-wrapper .span6.ba-form-column { flex: 1 1 0; min-width: 0; }
.com-baforms-wrapper .span12.ba-form-column { flex: 1 1 100%; min-width: 0; }
.com-baforms-wrapper .ba-form-field-item + .ba-form-field-item { margin-top: 14px; }

.com-baforms-wrapper .ba-field-label-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.com-baforms-wrapper .ba-input-label-wrapper {
  font-family: var(--cila-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(38% 0.01 60);
}
.com-baforms-wrapper .required-star { color: var(--cila-accent); font-size: 13px; }

.com-baforms-wrapper .ba-field-container input[type="text"],
.com-baforms-wrapper .ba-field-container input[type="email"],
.com-baforms-wrapper .ba-field-container input[type="tel"],
.com-baforms-wrapper .ba-field-container select,
.com-baforms-wrapper .ba-field-container textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid oklch(87% 0.008 60);
  border-radius: 3px;
  background: oklch(99.5% 0.002 60);
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: oklch(26% 0.01 60);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.com-baforms-wrapper .ba-field-container textarea { min-height: 130px; resize: vertical; }
.com-baforms-wrapper .ba-field-container input:focus,
.com-baforms-wrapper .ba-field-container select:focus,
.com-baforms-wrapper .ba-field-container textarea:focus {
  outline: none;
  border-color: var(--cila-accent);
  background: var(--cila-white);
}
.com-baforms-wrapper .ba-field-container ::placeholder { color: oklch(65% 0.008 60); }

/* Bouton d'envoi : accent plein, sans le chevron du greffon, et les
   variables du constructeur (bleu #459bfb, rayon 9 px) neutralisées. */
.com-baforms-wrapper .ba-form-submit-field { margin-top: 18px; }
.com-baforms-wrapper .ba-form-submit-btn-wrapper { display: block; }
.com-baforms-wrapper .ba-form-submit-wrapper .ba-form-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: 3px;
  background: var(--cila-accent);
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cila-on-accent);
  text-decoration: none;
  transition: background 0.18s ease;
}
.com-baforms-wrapper .ba-form-submit-btn i { display: none; }
.com-baforms-wrapper .ba-form-submit-title { font: inherit; color: inherit; }
.com-baforms-wrapper .ba-honeypot { position: absolute; left: -9999px; }


/* ============
   v180 — TITRES DE MODULE, ET FORMULAIRE D'ABONNEMENT NEWSLETTER
   ============
   1. Titre de module : le gabarit le rend en sérif capitales, seule
      occurrence de sérif sur ces pages. Il rejoint la graphie des titres de
      section du site (sans sérif, 15 px, capitales espacées, accent) — celle
      que le menu latéral utilise déjà.
   2. Le formulaire d'abonnement (form.ba-form-7) est volontairement plus fin
      que le formulaire de contact : champs de 9 px de haut, libellés à 12 px,
      et bouton en filet plutôt qu'en fond plein, pour qu'un lecteur
      distingue l'inscription d'une demande de contact. */
.module-title,
.module-title span {
  font-family: var(--cila-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cila-accent);
}

/* --- Formulaire d'abonnement : version resserrée ------------ */
.com-baforms-wrapper form.ba-form-7 .ba-form-row { margin-bottom: 10px; }
.com-baforms-wrapper form.ba-form-7 .ba-form-column-wrapper { gap: 10px; }
.com-baforms-wrapper form.ba-form-7 .ba-field-label-wrapper { margin-bottom: 4px; }
.com-baforms-wrapper form.ba-form-7 .ba-input-label-wrapper { font-size: 12px; }
.com-baforms-wrapper form.ba-form-7 .required-star { font-size: 12px; }
.com-baforms-wrapper form.ba-form-7 .ba-field-container input[type="text"],
.com-baforms-wrapper form.ba-form-7 .ba-field-container input[type="email"] {
  padding: 8px 11px;
  font-size: 13.5px;
}
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-field { margin-top: 14px; }

/* Bouton en filet : même famille visuelle, autre registre que le bouton plein
   du formulaire de contact. */
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn {
  width: auto;
  padding: 10px 20px;
  background: none;
  border: 1px solid var(--cila-accent);
  font-size: 13px;
  color: var(--cila-accent);
}
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn:hover,
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn:focus,
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn:active {
  background: var(--cila-accent) !important;
  border-color: var(--cila-accent) !important;
  color: var(--cila-on-accent) !important;
}


/* ============
   v181 — RÉSEAUX SOCIAUX : retour aux icônes Font Awesome
   ============
   L'éditeur de Joomla supprime les <svg> : on s'en tient à la syntaxe que le
   gabarit emploie déjà (fa-brands …, comme fa-classic fa-solid dans BA
   Forms), et le code part dans un module « HTML personnalisé » plutôt que
   dans un article. */
.cila-social-lien i,
.cila-social-lien svg {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}


/* ============
   v182 — PAGE CONTACT : mise en page, carte newsletter, survol des boutons
   ============
   Classe de page : cila-contact.
   Balisage réel fourni : la section t4-section-1 porte deux colonnes
   .t4-col.section-1 (coordonnées puis abonnement, chacun dans un .custom)
   et .t4-col.section-2 (formulaire de contact). */

/* 1. Retrait haut. La page démarrait collée au menu, l'article de la
      section t4-main-body étant vide. */
.cila-contact #t4-section-1 { padding-top: 56px; }
.cila-contact #t4-main-body:has(.blog-featured:empty) { display: none; }
.cila-contact #t4-section-1 .t4-row { row-gap: 40px; }
.cila-contact #t4-section-1 .t4-col { display: flex; flex-direction: column; gap: 44px; }

/* 2. Le bloc d'abonnement devient une carte : c'est le .custom qui contient
      le formulaire 7, et lui seul, qui reçoit le cadre. */
.cila-contact .custom:has(form.ba-form-7) {
  background: oklch(97.5% 0.012 70);
  border: 1px solid oklch(89% 0.012 40);
  border-radius: 4px;
  padding: 28px 30px;
}
.cila-contact .custom:has(form.ba-form-7) > p:empty { display: none; }

/* Titre de la carte : le champ « headline » du constructeur BA Forms, s'il
   est renseigné. Sans lui, la carte reste correcte, simplement sans titre. */
.cila-contact .ba-form-headline-field {
  display: block;
  margin: 0 0 18px;
}
.cila-contact .ba-form-headline-field .ba-input-label-wrapper {
  font-family: var(--cila-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  color: oklch(26% 0.01 60);
}

/* 3. Survol des boutons d'envoi. Le greffon pose un calque ::after qui
      glisse sur le bouton, pousse le libellé de 200 % hors du cadre et fait
      entrer un chevron à sa place — d'où le clignotement et le texte qui
      s'échappe. On neutralise le calque et les deux translations, et le
      survol redevient celui des autres boutons du site : passage à l'accent
      sombre, libellé immobile. */
.com-baforms-wrapper .ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn::after,
.com-baforms-wrapper .ba-form-submit-btn::before {
  content: none !important;
  display: none !important;
}
.com-baforms-wrapper .ba-form-submit-btn span,
.com-baforms-wrapper .ba-form-submit-btn:hover span,
.com-baforms-wrapper .ba-form-submit-btn i,
.com-baforms-wrapper .ba-form-submit-btn:hover i {
  transform: none !important;
  position: static !important;
  width: auto !important;
  transition: none !important;
}
.com-baforms-wrapper .ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:hover,
.com-baforms-wrapper .ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:hover {
  background: var(--cila-accent-dark) !important;
}

/* 4. Bouton d'abonnement : filet, largeur du contenu, flèche à droite —
      registre distinct du bouton plein du formulaire de contact. */
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-btn-wrapper { display: inline-flex; width: auto; }
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn {
  gap: 9px;
  flex-grow: 0;
}
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn::after {
  content: '→' !important;
  display: inline !important;
  position: static !important;
  font-size: 15px;
  line-height: 1;
  background: none !important;
  transform: none !important;
}
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-wrapper .ba-form-submit-btn:hover::after {
  color: var(--cila-on-accent);
}
.com-baforms-wrapper form.ba-form-7 .ba-field-container input[type="text"],
.com-baforms-wrapper form.ba-form-7 .ba-field-container input[type="email"] {
  background: var(--cila-white);
}

@media (max-width: 900px) {
  .cila-contact #t4-section-1 { padding-top: 36px; }
}


/* ============
   v183 — PAGE CONTACT : corrections après relecture
   ============
   Quatre défauts constatés en capture :
     — la carte newsletter montrait un double cadre (mon filet crème autour
       du fond blanc du bloc du greffon) ;
     — les titres cila-titre-section n'imposaient aucune famille et
       héritaient donc du sérif du gabarit ;
     — les champs gardaient le gris bleuté du greffon, mes règles v179 étant
       battues par les siennes ;
     — le chevron du greffon, sorti de son calque en v182, réapparaissait
       collé au libellé du bouton d'envoi.
   ============ */

/* 1. Carte newsletter : une seule surface, sans filet, et rien de blanc à
      l'intérieur. */
.cila-contact .custom:has(form.ba-form-7) {
  background: var(--cila-surface-warm);
  border: 0;
  border-radius: 4px;
  padding: 32px 34px;
}
.cila-contact .custom:has(form.ba-form-7) .com-baforms-wrapper,
.cila-contact .custom:has(form.ba-form-7) form,
.cila-contact .custom:has(form.ba-form-7) .ba-form-page,
.cila-contact .custom:has(form.ba-form-7) .ba-page-items {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Les titres de section imposent leur famille (le gabarit servait son
      sérif par héritage). */
.cila-titre-section,
.cila-coordonnees { font-family: var(--cila-sans); }

/* 3. Champs : le greffon gagnait la spécificité, d'où le gris bleuté et les
      hauteurs inégales. Règles reprises avec le poids nécessaire, et
      resserrées — 42 px au contact, 34 px dans la carte. */
.com-baforms-wrapper .ba-field-container input[type="text"],
.com-baforms-wrapper .ba-field-container input[type="email"],
.com-baforms-wrapper .ba-field-container input[type="tel"],
.com-baforms-wrapper .ba-field-container select,
.com-baforms-wrapper .ba-field-container textarea {
  padding: 10px 12px !important;
  border: 1px solid var(--cila-line-strong) !important;
  border-radius: 3px !important;
  background: oklch(99.5% 0.002 60) !important;
  box-shadow: none !important;
  font-family: var(--cila-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: oklch(26% 0.01 60) !important;
}
.com-baforms-wrapper .ba-field-container textarea {
  min-height: 132px !important;
  resize: vertical;
}
.com-baforms-wrapper .ba-field-container input:focus,
.com-baforms-wrapper .ba-field-container textarea:focus {
  border-color: var(--cila-accent) !important;
  background: var(--cila-white) !important;
}
.com-baforms-wrapper .ba-form-row { margin-bottom: 12px !important; }
.com-baforms-wrapper .ba-form-column-wrapper { gap: 12px !important; }
.com-baforms-wrapper .ba-field-label-wrapper { margin-bottom: 5px !important; }
.com-baforms-wrapper .ba-form-row:has(.ba-form-column:empty) { display: none; }

.com-baforms-wrapper form.ba-form-7 .ba-field-container input {
  padding: 7px 11px !important;
  font-size: 13.5px !important;
  background: var(--cila-white) !important;
}
.com-baforms-wrapper form.ba-form-7 .ba-form-row { margin-bottom: 10px !important; }
.com-baforms-wrapper form.ba-form-7 .ba-input-label-wrapper { font-size: 12px !important; }

/* 4. Le chevron du greffon reste masqué partout ; seule la flèche du bouton
      d'abonnement, dessinée en ::after, subsiste. */
.com-baforms-wrapper .ba-form-submit-btn i { display: none !important; }
.com-baforms-wrapper .ba-form-submit-field { margin-top: 20px !important; }
.com-baforms-wrapper form.ba-form-7 .ba-form-submit-field { margin-top: 16px !important; }


/* ============
   v184 — FORMULAIRES : écarts verticaux resserrés pour de bon
   Deux causes : une ligne SANS champ subsiste dans les deux formulaires (le
   constructeur laisse un .ba-form-row dont la colonne ne contient que des
   blancs — le :empty de la v183 ne pouvait pas la voir, une colonne remplie
   de retours à la ligne n'est pas vide au sens CSS ; le test porte donc sur
   l'absence de .ba-form-field-item), et les marges du greffon sur
   .ba-form-field-item et .ba-input-wrapper s'ajoutaient à celles des lignes.
   Elles sont annulées : l'écart vient d'une seule propriété, la marge basse
   de la ligne. */
.com-baforms-wrapper .ba-form-row:not(:has(.ba-form-field-item)) { display: none !important; }
.com-baforms-wrapper .ba-form-field-item,
.com-baforms-wrapper .ba-input-wrapper,
.com-baforms-wrapper .ba-field-container { margin: 0 !important; }
.com-baforms-wrapper .ba-page-items > .ba-form-row:last-child { margin-bottom: 0 !important; }
.com-baforms-wrapper .ba-form-row { margin: 0 0 10px !important; }
.com-baforms-wrapper .ba-form-field-item + .ba-form-field-item { margin-top: 10px !important; }
.com-baforms-wrapper .ba-field-label-wrapper { margin: 0 0 4px !important; }
.com-baforms-wrapper form.ba-form-7 .ba-form-row { margin-bottom: 8px !important; }


/* ============
   v185 — PAGE CONTACT : la carte suit le module, et la gouttière se resserre
   ============
   Le module d'abonnement est repassé en habillage html5 : il sort dans
   .t4-module > .module-inner > (h3.module-title + .module-ct). La carte se
   porte sur le module lui-même, pour englober son titre.
   v186 — la classe de module ayant été décollée du nom dans le back-office,
   le sélecteur redevient une vraie classe (.cila-abonnement-newsletter) au
   lieu d'un test de sous-chaîne. */
.cila-contact #t4-section-1 .t4-col { gap: 20px; }

.cila-contact .cila-abonnement-newsletter {
  background: var(--cila-surface-warm);
  border-radius: 4px;
  padding: 26px 30px 30px;
}
.cila-contact .cila-abonnement-newsletter .module-title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.cila-contact .cila-abonnement-newsletter .module-title span {
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cila-accent);
  background: none;
  border: 0;
  padding: 0;
}
.cila-contact .cila-abonnement-newsletter .module-title::before,
.cila-contact .cila-abonnement-newsletter .module-title::after,
.cila-contact .cila-abonnement-newsletter .module-title span::before,
.cila-contact .cila-abonnement-newsletter .module-title span::after { content: none; }

/* La carte étant portée par le module, le .custom intérieur redevient neutre
   (la règle de la v183 lui donnait fond et retrait : elle ferait un cadre
   dans un cadre). */
.cila-contact .custom:has(form.ba-form-7) {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.cila-contact .cila-abonnement-newsletter .com-baforms-wrapper,
.cila-contact .cila-abonnement-newsletter .ba-page-items {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ============
   v187 — CARTE NEWSLETTER : marges reprises au gabarit
   ============
   Le gabarit pose .t4-module { margin-top: 2rem }, ce qui rouvrait un vide
   au-dessus de la carte alors que la colonne gère déjà sa gouttière. On
   l'annule ici, et on réserve 4 rem sous la carte pour qu'elle ne touche
   pas le pied de page. */
.cila-contact .t4-module.cila-abonnement-newsletter {
  margin-top: 0;
  margin-bottom: 4rem;
}

/* ============
   v188 — CHAMP DE RECHERCHE : une loupe qui déplie le champ
   Balisage : .t4-header-r > search > form.mod-finder, dont
   .mod-finder__search contient l'input (dans .awesomplete) puis le
   .btn-primary avec son span.icon-search.
   v189 — le pli se fait au CLIC, via la classe cila-recherche-ouverte posée
   sur le <search> par recherche-depliante.js ; :focus-within est conservé
   pour le clavier seul (le champ garde une largeur nulle mais reste
   focusable). La loupe est un glyphe Font Awesome appelé par son code
   depuis la v191, la classe icon-search de Joomla ne garantissant pas la
   correspondance dans un T4 blank.
   ============ */
.t4-header-r search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 262px;
  margin-left: auto;
}
.t4-header-r .mod-finder {
  margin: 0;
}
.t4-header-r .mod-finder__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  width: auto;
}

/* Le champ : replié à zéro, il s'ouvre au clic. Sa largeur ouverte s'adapte
   à la place disponible — jamais moins de 110 px, jamais plus de 220, et
   20 % de la largeur de fenêtre entre les deux — ce qui rend inutile toute
   exception par palier d'écran. Le flex:0 0 auto est indispensable : sans
   lui, cette largeur ne serait qu'une base flex, que le manque de place
   ramènerait aussitôt à zéro. */
.t4-header-r .mod-finder .awesomplete {
  width: 0;
  flex: 0 0 auto;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.t4-header-r search.cila-recherche-ouverte .awesomplete,
.t4-header-r search:focus-within .awesomplete {
  width: clamp(110px, 20vw, 220px);
}
/* v192 — la loupe passe à DROITE du champ : l'ordre du DOM (champ puis
   bouton) est enfin respecté, ce que les rayons de bordure supposaient déjà.
   Le dépliement continue de se faire vers la gauche, le bloc entier étant
   collé à droite par margin-left:auto. */
.t4-header-r .mod-finder input.js-finder-search-query {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--cila-line-strong);
  border-radius: 3px 0 0 3px;
  background: oklch(99.5% 0.002 60);
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 14px;
  line-height: 1.4;
  color: oklch(26% 0.01 60);
}
.t4-header-r .mod-finder input.js-finder-search-query:focus {
  outline: none;
  border-color: var(--cila-accent);
  background: var(--cila-white);
}
.t4-header-r .mod-finder input.js-finder-search-query::placeholder {
  color: oklch(65% 0.008 60);
}

/* Le bouton devient la loupe. Le mot « Rechercher » est un nœud de texte
   qu'aucun sélecteur n'atteint : on annule sa taille sur le bouton, le
   glyphe porte seul le dessin.
   v192 — au repos, plus de fond ni de cadre (le carré rosé venait d'un fond
   de survol que le rayon de 50 % du gabarit n'arrondissait pas toujours).
   v201 — le survol reçoit un dessin au lieu d'une annulation : background:none
   laissait le gabarit reprendre la main par les variables Bootstrap du
   bouton, d'où le carré blanc. Elles sont toutes redéfinies ici, sur le
   bouton, et le survol devient une pastille ronde teintée d'accent. */
.t4-header-r .mod-finder .btn-primary {
  /* Variables Bootstrap du bouton : neutralisées à la source, pour qu'aucun
     état (:hover, :focus, :active, .show) ne puisse repeindre le carré. */
  --bs-btn-bg: transparent;
  --bs-btn-color: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  transition: background-color 0.18s ease;
}
/* v191 — la loupe est le glyphe Font Awesome de la loupe, appelé par son
   code sur le span.icon-search que Joomla place déjà dans le bouton. La
   famille est nommée explicitement, et non laissée à la classe icon-search
   du gabarit, dont la correspondance de glyphe n'est pas garantie dans un
   T4 blank. Les deux numéros de version de la police couvrent FA 5 et 6. */
.t4-header-r .mod-finder .btn-primary .icon-search {
  display: block;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  color: oklch(62% 0.008 60);
  transition: color 0.2s ease;
}
.t4-header-r .mod-finder .btn-primary .icon-search::before {
  content: '\f002';
}
/* v204 — Champ replié : le survol est un CARRÉ d'accent très pâle, au rayon
   de 3 px du champ ouvert (la pastille ronde de la v201 se lisait comme un
   bouton rose surgissant à côté du menu). Le glyphe passe en accent, réglé
   juste dessous. Le focus clavier garde son liseré d'accent, à la place de
   l'ombre bleue de Bootstrap. */
.t4-header-r .mod-finder .btn-primary:hover,
.t4-header-r .mod-finder .btn-primary:focus,
.t4-header-r .mod-finder .btn-primary:focus-visible,
.t4-header-r .mod-finder .btn-primary:active {
  background-color: var(--cila-accent-pale);
  background-image: none;
  border: 0;
  box-shadow: none;
  color: transparent;
}
.t4-header-r .mod-finder .btn-primary:focus-visible {
  outline: 2px solid var(--cila-accent);
  outline-offset: 2px;
}
.t4-header-r .mod-finder .btn-primary:hover .icon-search,
.t4-header-r .mod-finder .btn-primary:focus .icon-search,
.t4-header-r .mod-finder .btn-primary:active .icon-search {
  color: var(--cila-accent);
}

/* Le champ ouvert, la loupe se colle à lui : même hauteur, même filet, et
   un seul trait entre les deux — le bord gauche du bouton est supprimé, le
   bord droit du champ aussi, ce qui évite le double filet de la v191. */
.t4-header-r search.cila-recherche-ouverte .btn-primary,
.t4-header-r search:focus-within .btn-primary {
  width: 40px;
  height: 38px;
  border: 1px solid var(--cila-accent);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: var(--cila-accent);
}
.t4-header-r search.cila-recherche-ouverte input.js-finder-search-query,
.t4-header-r search:focus-within input.js-finder-search-query {
  border-right: 0;
  border-radius: 3px 0 0 3px;
}
.t4-header-r search.cila-recherche-ouverte .btn-primary .icon-search,
.t4-header-r search:focus-within .btn-primary .icon-search {
  color: var(--cila-on-accent);
}
/* Champ ouvert, le bouton est plein accent : son survol se contente de
   foncer d'un cran — le glyphe reste blanc, aucun état ne le repeint. */
.t4-header-r search.cila-recherche-ouverte .btn-primary:hover,
.t4-header-r search.cila-recherche-ouverte .btn-primary:focus,
.t4-header-r search.cila-recherche-ouverte .btn-primary:active,
.t4-header-r search:focus-within .btn-primary:hover,
.t4-header-r search:focus-within .btn-primary:focus,
.t4-header-r search:focus-within .btn-primary:active {
  background-color: oklch(42% 0.13 25);
  border-color: oklch(42% 0.13 25);
  border-left: 0;
}
.t4-header-r search.cila-recherche-ouverte .btn-primary:hover .icon-search,
.t4-header-r search.cila-recherche-ouverte .btn-primary:focus .icon-search,
.t4-header-r search:focus-within .btn-primary:hover .icon-search,
.t4-header-r search:focus-within .btn-primary:focus .icon-search {
  color: var(--cila-on-accent);
}

/* La liste de suggestions suit la largeur du champ, quelle qu'elle soit. */
.t4-header-r .awesomplete > ul {
  width: 100%;
  min-width: 200px;
  margin: 4px 0 0;
  padding: 4px 0;
  border: 1px solid var(--cila-line);
  border-radius: 3px;
  background: var(--cila-white);
  box-shadow: 0 6px 18px var(--cila-shadow-soft);
  font-family: var(--cila-sans);
  font-size: 13.5px;
}
.t4-header-r .awesomplete > ul > li {
  padding: 7px 12px;
  color: oklch(30% 0.01 60);
}
.t4-header-r .awesomplete > ul > li[aria-selected="true"] {
  background: var(--cila-accent-pale);
  color: var(--cila-accent);
}

/* Le pli étant commandé par le clic et sa largeur par un clamp, ni l'écran
   tactile ni les petits écrans ne demandent d'exception. */


/* ============
   6. PAGE DE RECHERCHE (com_finder)
   Même vocabulaire que le reste du site : carte sur --cila-surface, bouton
   plein accent, libellés en petite capitale sourde. La pagination est
   rejouée en fin de section : le gabarit ne pose plus .pagination-wrap
   (v198), les règles générales plus haut ne l'atteignent donc plus.
   v195 — tout le bloc est ancré sur .cila-recherche (Classe de page du lien
   de menu) et non sur .com-finder seul : même logique que les autres
   variantes de rubrique, et aucune règle .com-finder d'une autre extension
   ne peut interférer.
   ============ */

.cila-recherche .com-finder { margin: 0 0 40px; }

/* --- Formulaire de recherche : carte sur fond teinté ------------ */
.cila-recherche .com-finder__form {
  background: var(--cila-surface);
  border: 1px solid var(--cila-line);
  border-radius: var(--cila-radius);
  padding: clamp(22px, 4vw, 34px);
  margin: 0 0 28px;
}

.cila-recherche .com-finder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cila-recherche .com-finder .com-finder__search { margin: 0; }

.cila-recherche .com-finder .form-inline label[for="q"] {
  display: block;
  margin: 0 0 10px;
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}

.cila-recherche .com-finder .input-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.cila-recherche .com-finder .awesomplete {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.cila-recherche .com-finder input.js-finder-search-query {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  padding: 13px 18px;
  border: 1px solid var(--cila-line);
  border-radius: var(--cila-radius);
  background: var(--cila-white);
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--cila-ink);
  transition: border-color 0.15s ease;
}
.cila-recherche .com-finder input.js-finder-search-query:focus {
  outline: none;
  border-color: var(--cila-accent);
}
.cila-recherche .com-finder input.js-finder-search-query::placeholder { color: oklch(65% 0.008 60); }

/* Liste de suggestions (awesomplete) */
.cila-recherche .com-finder .awesomplete > ul {
  z-index: 5;
  margin: 4px 0 0;
  padding: 4px 0;
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  background: var(--cila-white);
  box-shadow: 0 8px 22px var(--cila-shadow-soft);
  font-family: var(--cila-sans);
  font-size: 14px;
}
.cila-recherche .com-finder .awesomplete > ul > li {
  padding: 8px 14px;
  color: var(--cila-ink);
}
.cila-recherche .com-finder .awesomplete > ul > li[aria-selected="true"] {
  background: var(--cila-accent-pale);
  color: var(--cila-accent);
}

.cila-recherche .com-finder .input-group-append {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Boutons : plein accent pour l'action principale, contour pour les
   déclencheurs secondaires (paramètres avancés, tri) — même géométrie que
   le champ, pour que tout se réponde visuellement sur une même ligne. */
.cila-recherche .com-finder .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 13px 22px;
  border-radius: var(--cila-radius);
  font-family: var(--cila-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cila-recherche .com-finder .btn-primary {
  border: 1px solid var(--cila-accent);
  background: var(--cila-accent);
  color: var(--cila-on-accent);
}
.cila-recherche .com-finder .btn-primary:hover,
.cila-recherche .com-finder .btn-primary:focus-visible {
  background: var(--cila-accent-dark);
  border-color: var(--cila-accent-dark);
}
.cila-recherche .com-finder .btn-secondary {
  border: 1px solid var(--cila-line);
  background: var(--cila-white);
  color: var(--cila-ink);
}
.cila-recherche .com-finder .btn-secondary:hover,
.cila-recherche .com-finder .btn-secondary:focus-visible,
.cila-recherche .com-finder .btn-secondary[aria-expanded="true"] {
  border-color: var(--cila-accent);
  color: var(--cila-accent);
  background: var(--cila-white);
}

/* Glyphes des boutons — même recette que la loupe d'en-tête (FA par code
   plutôt que par la classe icon-*, non garantie dans ce gabarit). */
.cila-recherche .com-finder .btn .icon-search,
.cila-recherche .com-finder .btn .icon-search-plus {
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}
.cila-recherche .com-finder .btn .icon-search::before { content: '\f002'; }
.cila-recherche .com-finder .btn .icon-search-plus::before { content: '\f00e'; }

/* --- Paramètres avancés (fieldset repliable) ------------ */
.cila-recherche .com-finder__advanced {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--cila-line);
}

.cila-recherche .com-finder__tips.card {
  margin: 0 0 24px;
  border: 0;
  border-radius: 6px;
  background: var(--cila-white);
}
.cila-recherche .com-finder__tips .card-body {
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--cila-ink-mute);
}
.cila-recherche .com-finder__tips .card-body p { margin: 0 0 10px; }
.cila-recherche .com-finder__tips .card-body p:last-child { margin: 0; }
.cila-recherche .com-finder__tips .card-body strong { color: var(--cila-ink); font-weight: 700; }

.cila-recherche .com-finder__filter .filter-branch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 24px;
}
.cila-recherche .com-finder__filter .control-group { margin: 0; }
.cila-recherche .com-finder__filter .control-label { margin: 0 0 8px; }
.cila-recherche .com-finder__filter .control-label label {
  display: block;
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}
.cila-recherche .com-finder__filter .controls { width: 100%; }
.cila-recherche .com-finder__filter select.form-select {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 38px 11px 14px;
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  background-color: var(--cila-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23742332' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  box-shadow: none;
  font-family: var(--cila-sans);
  font-size: 14px;
  color: var(--cila-ink);
  transition: border-color 0.15s ease;
}
.cila-recherche .com-finder__filter select.form-select:focus {
  outline: none;
  border-color: var(--cila-accent);
}

/* --- Message d'état de la requête ------------ */
.cila-recherche .com-finder__explained {
  margin: 0 0 20px;
  font-family: var(--cila-sans);
  font-size: 14px;
  color: var(--cila-ink-mute);
}
.cila-recherche .com-finder__explained .term {
  font-weight: 700;
  color: var(--cila-ink);
}
.cila-recherche .com-finder__explained .query-required { color: var(--cila-accent); }

/* --- Tri des résultats ------------
   v195 — nouveau bloc (n'existait pas encore lors de la première passe) :
   menu déroulant Bootstrap standard (.dropdown-toggle / .dropdown-menu),
   jusqu'ici sans mise en forme propre au site. */
.cila-recherche .com-finder__sorting { margin: 0 0 22px; }
.cila-recherche .sorting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cila-recherche .sorting #sorting_label {
  margin: 0;
  font-family: var(--cila-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}
.cila-recherche .sorting__select { position: relative; }
.cila-recherche #sorting_btn.btn {
  height: auto;
  padding: 10px 34px 10px 16px;
  border: 1px solid var(--cila-line);
  border-radius: 4px;
  background: var(--cila-white);
  color: var(--cila-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.cila-recherche #sorting_btn.btn:hover,
.cila-recherche #sorting_btn.btn:focus-visible,
.cila-recherche #sorting_btn.btn[aria-expanded="true"] {
  border-color: var(--cila-accent);
  color: var(--cila-accent);
  background: var(--cila-white);
}
.cila-recherche #sorting_btn.btn::after {
  margin-left: 8px;
  border-top-color: currentColor;
}
.cila-recherche .sorting__list.dropdown-menu {
  margin: 4px 0 0;
  padding: 6px 0;
  border: 1px solid var(--cila-line);
  border-radius: 6px;
  background: var(--cila-white);
  box-shadow: 0 8px 22px var(--cila-shadow-soft);
  font-family: var(--cila-sans);
}
.cila-recherche .sorting__list .dropdown-item {
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--cila-ink);
}
.cila-recherche .sorting__list .dropdown-item:hover,
.cila-recherche .sorting__list .dropdown-item:focus {
  background: var(--cila-surface);
  color: var(--cila-accent);
}
.cila-recherche .sorting__list-li-active .dropdown-item {
  color: var(--cila-accent);
  font-weight: 700;
}

/* ============
   v198 — RÉSULTATS RÉÉCRITS POUR LE BALISAGE NATIF DE COM_FINDER
   L'ancienne surcharge héritée de Joomla 3 (result-item, result-title,
   .badge-secondary, .pagination-wrap) n'est plus en place : le gabarit natif
   rend des classes BEM. Correspondance, pour mémoire —
       .result-item → .result__item (<li>)   .result-title → .result__title (<p>)
       .result-url  → .result__title-url (<cite>, DANS le lien)
       .badge-secondary → .result__taxonomy-item   .pagination-wrap → .search-pagination
   Gain : chaque pastille porte sa branche (.result__taxonomy--Type, --Author,
   --Category), le masquage se fait par NOM et non plus par un nth-child qui
   se décalait quand un résultat n'avait pas d'auteur. La langue est déjà
   écartée par le gabarit (valeur « * ») : rien à masquer en CSS.
   ============ */

/* --- Liste de résultats ------------
   SPÉCIFICITÉ : le gabarit pose un padding sur les résultats via un
   sélecteur à identifiant (#search-results …), soit (0,1,1,0). Une suite de
   classes, si longue soit-elle, ne peut pas battre un identifiant : les
   règles ci-dessous reprennent donc #search-results, ce qui donne (0,1,2,0).
   Ne « simplifiez » pas ces sélecteurs en retirant l'ID, le padding du
   gabarit reprendrait le dessus. */
/* v199 — VARIANTE A. Le zébrage une ligne sur deux est supprimé : le fond
   alterné ET le filet séparateur faisaient double emploi, ce qui alourdissait
   la liste sans mieux la découper. Reste le filet seul, ramené de --cila-line
   (gris franc, celui des cadres) à une teinte nettement plus pâle : entre deux
   résultats il ne s'agit que de respirer, pas de cloisonner. */
.cila-recherche .com-finder__results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cila-line);
  border-radius: var(--cila-radius);
  overflow: hidden;
}
.cila-recherche #search-results .result__item {
  margin: 0;
  padding: 20px clamp(18px, 3vw, 26px);
  background: var(--cila-white);
  border-bottom: 1px solid oklch(95.5% 0.004 60);
  list-style: none;
}
.cila-recherche #search-results .result__item:last-child { border-bottom: 0; }

/* --- Titre + URL ------------
   ATTENTION AU BALISAGE : l'URL n'est plus un bloc frère du titre, elle est
   IMBRIQUÉE DANS le lien du titre, en <cite class="result__title-url">.
   D'où le découpage en trois règles :
     .result__title-link  le lien, passé en bloc pour empiler ses deux parties
     .result__title-text  le libellé, seul porteur du filet animé
     .result__title-url   l'URL, ramenée à une ligne discrète sous le titre
   Poser le filet sur le lien entier soulignerait aussi l'URL. */
.cila-recherche .result__title {
  margin: 0 0 10px;
  font-family: var(--cila-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
}
.cila-recherche .result__title-link {
  display: block;
  color: var(--cila-accent);
  text-decoration: none;
}

/* Filet qui se déploie, repris des « Lire la suite » (v159/v160) : 1px en
   background-image, posé sous la ligne de base, déployé en 0,28 s. Le
   déclencheur est .result__item:hover — toute la ligne reste une zone de
   survol confortable, mais la réponse visuelle se concentre sur le titre. */
.cila-recherche .result__title-text {
  display: inline;
  padding-bottom: 5px;
  background-image: linear-gradient(oklch(40% 0.11 25 / 0.55), oklch(40% 0.11 25 / 0.55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.28s ease, color 0.15s ease;
}
.cila-recherche .result__item:hover .result__title-text,
.cila-recherche .result__title-link:focus-visible .result__title-text {
  background-size: 100% 1px;
}
.cila-recherche .result__item:hover .result__title-link,
.cila-recherche .result__title-link:focus-visible {
  color: var(--cila-accent-dark);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .cila-recherche .result__title-text { transition: none; }
}

/* L'URL : une seule ligne tronquée, en retrait. font-style normal parce que
   <cite> est en italique par défaut dans tous les navigateurs. */
.cila-recherche .result__title-url {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--cila-sans);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: oklch(62% 0.01 60);
}

/* --- Termes surlignés ------------
   Le gabarit natif entoure les occurrences trouvées d'un <mark> (mark.js),
   que les navigateurs peignent en JAUNE VIF par défaut — dissonant sur ce
   site, et illisible sur le titre en accent.

   v199 — le soulignement posé sur le <mark> du titre est SUPPRIMÉ. Il se
   cumulait avec le filet de survol : deux traits sous la même ligne, l'un
   partiel l'autre plein. Le terme trouvé se signale désormais par un aplat
   très clair, qui ne touche pas à la ligne de base et laisse donc le filet
   de survol seul à souligner. */
.cila-recherche .result__item mark {
  padding: 0 1px;
  background: var(--cila-accent-pale);
  border-radius: 2px;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.cila-recherche .result__title-url mark {
  background: none;
  color: inherit;
}

/* --- Ligne de métadonnées : date · catégorie ------------
   v199 — pastilles bordées abandonnées : un cadre par valeur plus le
   libellé « Catégorie: » pesaient lourd pour une information répétée à
   chaque ligne. Date et catégorie tiennent sur une ligne de petites
   capitales, séparées par un point médian, la catégorie seule en accent.
   DÉPEND DE LA SURCHARGE PHP : le gabarit natif laisse le <time> et le <ul>
   frères, sans conteneur ; la surcharge livrée avec cette feuille les
   regroupe dans un <div class="result__meta">, d'où le simple flex local.
   Aucun « order » : l'ordre à l'écran est celui du DOM. Sans la surcharge,
   les deux s'empilent — dégradation lisible, pas de casse. */
.cila-recherche .result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 9px;
  margin: 8px 0 0;
  font-family: var(--cila-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
}
.cila-recherche .result__date {
  margin: 0;
  color: oklch(62% 0.01 60);
}
.cila-recherche .result__taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cila-recherche .result__taxonomy-item {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--cila-accent);
  list-style: none;
}
/* v198 — SEULE LA CATÉGORIE RESTE, masquée PAR NOM cette fois.
   Type vaut toujours « Article » et l'auteur est unique sur ce site : deux
   valeurs identiques sur chaque résultat, qui n'informent en rien. La
   langue, elle, est déjà écartée par le gabarit (valeur « * »).
   Contrairement au nth-child des v195/v196, ce ciblage ne dépend plus de
   l'ordre d'affichage : il reste juste même si un résultat n'a pas
   d'auteur (cas des Catégories et des Tags). */
.cila-recherche .result__taxonomy--Type,
.cila-recherche .result__taxonomy--Author,
.cila-recherche .result__taxonomy--Language {
  display: none;
}
/* Le libellé « Catégorie: » est un <span> dans le <li> : masqué, la valeur
   seule suffit une fois qu'elle est la seule affichée. */
.cila-recherche .result__taxonomy-item > span {
  display: none;
}
/* Le point médian n'apparaît QUE si une catégorie suit la date — sinon la
   ligne se terminerait par un séparateur orphelin.
   Posé en ::after sur la DATE plutôt qu'en ::before sur la liste : un
   pseudo-élément de conteneur flex devient lui-même un enfant flex, dont
   la place dépend des éléments masqués qui l'entourent. Sur .result__date,
   simple élément en ligne, le rendu est identique partout.
   :has() est déjà employé ailleurs dans cette feuille (fiches membre,
   listes) : même socle de compatibilité. */
.cila-recherche .result__date:has(+ .result__taxonomy)::after {
  content: " ·";
  color: oklch(80% 0.008 60);
  font-weight: 400;
}

.cila-recherche .result__description {
  margin: 10px 0 0;
  font-family: var(--cila-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cila-ink);
}

/* --- Pagination ------------
   CHANGEMENT IMPORTANT : le conteneur ne porte plus .pagination-wrap, mais
   .search-pagination. Les règles générales de pagination écrites plus haut
   dans ce fichier ne s'appliquent donc PLUS ici, et la pagination
   retomberait en bleu Bootstrap. On les rejoue à l'identique sur la
   nouvelle classe — mêmes filets clairs, même page courante sur l'accent —
   pour que la barre reste identique à celle des listes du site. */
.cila-recherche .com-finder__navigation.search-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 42px 0 8px;
}
.cila-recherche .com-finder__navigation .pagination {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cila-recherche .com-finder__navigation .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cila-line);
  margin-left: -1px;
  background: var(--cila-white);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--cila-ink-mute);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cila-recherche .com-finder__navigation .page-item:first-child .page-link {
  border-radius: 4px 0 0 4px;
  margin-left: 0;
}
.cila-recherche .com-finder__navigation .page-item:last-child .page-link {
  border-radius: 0 4px 4px 0;
}
.cila-recherche .com-finder__navigation .page-item a.page-link:hover {
  background: var(--cila-surface);
  color: var(--cila-accent);
  text-decoration: none;
}
.cila-recherche .com-finder__navigation .page-item.active .page-link {
  z-index: 1;
  border-color: var(--cila-accent);
  background: var(--cila-accent);
  color: var(--cila-on-accent);
}
.cila-recherche .com-finder__navigation .page-item.disabled .page-link {
  background: var(--cila-white);
  color: oklch(80% 0.008 60);
}
/* Le gabarit pose w-100 sur ce conteneur, ce qui pousse le compteur à la
   ligne suivante : on l'annule pour garder barre et compteur côte à côte. */
.cila-recherche .com-finder__navigation .com-finder__pagination.w-100 {
  width: auto !important;
}
.cila-recherche .com-finder__counter {
  margin: 0;
  font-family: var(--cila-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cila-ink-mute);
}
.cila-recherche .com-finder__counter strong { color: var(--cila-ink); }

/* --- Message d'état : le gabarit l'enveloppe désormais dans un <p> --------- */
.cila-recherche .com-finder__explained p {
  margin: 0;
}

/* --- Petits écrans ------------ */
@media (max-width: 600px) {
  .cila-recherche .com-finder .input-group-append { width: 100%; }
  .cila-recherche .com-finder .input-group-append .btn { flex: 1 1 auto; justify-content: center; }
  .cila-recherche .com-finder__filter .filter-branch { grid-template-columns: 1fr; }
  .cila-recherche .sorting { width: 100%; }
  .cila-recherche .sorting__select { flex: 1 1 auto; }
  .cila-recherche #sorting_btn.btn { width: 100%; justify-content: space-between; }
}

/* ============
   v200 — DEUX RÈGLES DU GABARIT À NEUTRALISER
   ============
   1. Le gabarit souligne le titre au survol :
          .result__title-link:hover .result__title-text { text-decoration: underline }
      Ce souligné natif s'ajoutait au filet animé — deux traits sous la même
      ligne. On le coupe, le filet reste seul.
   2. Il sépare aussi les résultats par un filet + 1,5em de marge :
          .result__item + .result__item { border-top: 1px solid; margin-top: … }
      Ce trait doublait notre propre border-bottom, d'où la barre épaisse.
      Neutralisé : le border-bottom de la liste suffit.
   ============ */
.cila-recherche .result__title-link:hover .result__title-text,
.cila-recherche .result__title-link:focus .result__title-text,
.cila-recherche .result__title-link:focus-visible .result__title-text {
  text-decoration: none;
}
.cila-recherche .result__item + .result__item {
  border-top: 0;
  margin-top: 0;
  padding-top: 20px;
}

/* ============
   v205 — TITRES DE MODULE DU PIED DE PAGE
   ============
   Les modules portant la classe .cila-footer sortent leur titre en
   <h3 class="module-title"><span>…</span></h3>. La graphie de base
   (.module-title, v180) leur donne déjà sans sérif / 15px / capitales
   espacées / accent ; il restait l'habillage T4 sur le <span> (filet bas à
   la longueur du texte, fond, padding) et les marges du gabarit.
   Ce bloc les aligne sur .cila-titre-section : mêmes six proprietes, meme
   marge basse de 24px, plus aucun filet.
   ============ */
.cila-footer .module-title,
.cila-footer h3.module-title,
.cila-footer h4.module-title,
.cila-footer .moduletable-title {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.35;
}
.cila-footer .module-title span,
.cila-footer .moduletable-title span {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.cila-footer .module-title,
.cila-footer .module-title span,
.cila-footer .moduletable-title,
.cila-footer .moduletable-title span {
  font-family: var(--cila-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cila-accent);
}
/* Le filet decoratif de T4 arrive en ::before ou en ::after selon le
   gabarit : les deux sont coupes, sinon double souligne. */
.cila-footer .module-title::before,
.cila-footer .module-title::after,
.cila-footer .module-title span::before,
.cila-footer .module-title span::after,
.cila-footer .moduletable-title::before,
.cila-footer .moduletable-title::after { content: none; display: none; }

/* ============
   v206 — LE PIED DE PAGE T4 REPREND LA MAIN SUR LE <SPAN>
   ============
   Le gabarit pose, avec DEUX classes de conteneur :
       .t4-footnav .t4-module .module-title span { font-weight:500; letter-spacing:.5px; … }
   soit trois classes — plus specifique que mes selecteurs v205 (.cila-footer
   .module-title span, deux classes). La graisse et l'interlettrage du
   gabarit gagnaient donc. On reprend les memes selecteurs prefixes de
   .t4-footnav pour passer devant.
   ============ */
.t4-footnav .cila-footer .module-title,
.t4-footnav .cila-footer .module-title span,
.t4-footnav .cila-footer .moduletable-title,
.t4-footnav .cila-footer .moduletable-title span,
.t4-footnav .t4-module.cila-footer .module-title span {
  font-family: var(--cila-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cila-accent);
  border: 0;
  padding: 0;
  background: none;
}
.t4-footnav .cila-footer .module-title,
.t4-footnav .cila-footer .moduletable-title { margin: 0 0 24px; line-height: 1.35; }

/* ============
   v207 — TUILES DE PARTENAIRES (page « Liens »)
   ============
   Grille de tuiles logo + intitule, posee dans le corps d'un article par
   <ul class="cila-partenaires">. Le <li> ne porte rien : toute la tuile est
   le <a>, pour que la surface cliquable couvre le logo et le texte.
   Deux cas de figure :
     — tuile a logo   : <img> + <span>
     — tuile en mot   : <span class="cila-partenaire-mot"> seul, quand le
                        logo n'existe pas en version lisible sur fond clair.
   ============ */
.cila-partenaires {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  /* v208 — la piste est PLAFONNEE a 300px : avec 1fr, une rubrique a une
     seule entree (Societes savantes) etirait sa tuile sur toute la largeur,
     trois fois plus large que les tuiles de la rubrique voisine. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: start;
  gap: 20px;
}
.cila-partenaires > li { margin: 0; padding: 0; }
.cila-partenaires > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 100%;
  min-height: 190px;
  padding: 30px 26px;
  box-sizing: border-box;
  background: var(--cila-white);
  border: 1px solid var(--cila-line);
  border-radius: var(--cila-radius);
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cila-partenaires > li > a:hover,
.cila-partenaires > li > a:focus-visible {
  border-color: var(--cila-accent);
  box-shadow: 0 3px 14px var(--cila-shadow-thin);
  transform: translateY(-2px);
  text-decoration: none;
}
/* Le logo occupe une hauteur constante : les tuiles s'alignent quelles que
   soient les proportions des fichiers fournis. */
.cila-partenaires img {
  display: block;
  /* v209 — 90px et non 72 : le logo de la Revue Adolescence est un dessin
     en hauteur (1260x1527). Plafonne a 72px il tombait a 59px de large,
     minuscule a cote des logotypes en largeur. */
  max-width: 170px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}
.cila-partenaires > li > a > span {
  font-family: var(--cila-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cila-ink);
}
.cila-partenaires > li > a:hover > span { color: var(--cila-accent); }
/* Tuile en mot : l'intitule tient le role du logo, en serif et en accent. */
.cila-partenaire-mot {
  font-family: var(--cila-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--cila-accent) !important;
  line-height: 1.3 !important;
}
@media (max-width: 560px) {
  .cila-partenaires { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 14px; }
  .cila-partenaires > li > a { min-height: 150px; padding: 22px 16px; gap: 16px; }
  .cila-partenaires img { max-width: 120px; max-height: 68px; }
}