/* Styles partagés par le Blog, les Actualités, les Publications et les
   gabarits d'article (single.php, single-publication.php). Dépend de
   commun.css (jetons, en-tête, pied de page, motifs de section). */

/* ===== Puces de filtre (boutons, pas des <select>) ===== */
/* border/color !important : conflit de spécificité avec le reset de hello-elementor (voir plus bas) */
.cerese-chip-filtre {
  font-family: var(--cerese-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--cerese-fonce) !important;
  background: var(--cerese-blanc);
  border: 1px solid var(--cerese-bordure) !important;
  padding: 11px 16px;
  min-height: 44px;
  cursor: pointer;
}
/* « Toutes » (.cerese-chip-filtre--reset) n'a plus de style propre depuis le
   09/10/2026 : son contour foncé permanent le faisait paraître sélectionné
   même quand une autre puce l'était, et ses règles en !important écrasaient
   le fond teal de l'état actif au survol et au focus (texte blanc sur fond
   transparent, illisible). Il se comporte désormais comme les autres puces. */
.cerese-chip-filtre.is-active { font-weight: 700; color: var(--cerese-blanc) !important; background: var(--cerese-teal); border-color: var(--cerese-teal) !important; }
/* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux <button type="button"> au
   survol/focus. !important nécessaire : le sélecteur `[type=button]:hover` du reset a la même spécificité
   qu'une classe, et reset.css se charge après notre CSS dans le <head> (vérifié), donc il gagne l'égalité sans ça. */
.cerese-chip-filtre:focus { color: var(--cerese-fonce) !important; background: var(--cerese-blanc) !important; border-color: var(--cerese-bordure) !important; }
.cerese-chip-filtre.is-active:focus { color: var(--cerese-blanc) !important; background: var(--cerese-teal) !important; border-color: var(--cerese-teal) !important; }
@media (hover: hover) {
  .cerese-chip-filtre:hover { color: var(--cerese-fonce) !important; background: var(--cerese-blanc) !important; border-color: var(--cerese-bordure) !important; }
  .cerese-chip-filtre.is-active:hover { color: var(--cerese-blanc) !important; background: var(--cerese-teal) !important; border-color: var(--cerese-teal) !important; }
}

/* ===== Encart "À compléter" (bandeau d'avertissement éditorial) ===== */
.cerese-encart-attente { outline: 1px solid var(--cerese-bordure); background: var(--cerese-blanc); padding: clamp(14px, 1.6vw, 20px); display: flex; gap: 14px; align-items: flex-start; }
.cerese-encart-attente__label { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--cerese-gris); white-space: nowrap; padding-top: 2px; }
.cerese-encart-attente p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cerese-gris); }

/* ===== Vignette photo 16:9 (cartes billet / actualité / publication) ===== */
.cerese-photo-169 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0F2C30;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.cerese-photo-169 span { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; color: rgba(234, 239, 198, 0.85); line-height: 1.35; }
.cerese-photo-169--photo { padding: 0; }
.cerese-photo-169__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Carte billet / actualité (photo + contenu) ===== */
/* Même traitement au survol que .cerese-carte dans commun.css : fond teal
   plein, tout le texte du corps (meta, résumé, lien — chacun avec sa
   propre couleur explicite) en blanc. La photo au-dessus n'est pas
   concernée par ce fond, seul le corps texte l'est. */
.cerese-page .cerese-carte-billet { display: flex; flex-direction: column; text-decoration: none; color: var(--cerese-encre); outline: 1px solid var(--cerese-bordure); background: var(--cerese-blanc); transition: outline-color 200ms ease; }
.cerese-carte-billet__corps { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) {
  .cerese-carte-billet:hover { outline-color: var(--cerese-teal); }
  .cerese-carte-billet:hover .cerese-carte-billet__corps { background: var(--cerese-teal); }
  .cerese-carte-billet:hover .cerese-carte-billet__corps,
  .cerese-carte-billet:hover .cerese-carte-billet__meta,
  .cerese-carte-billet:hover .cerese-carte-billet__resume,
  .cerese-carte-billet:hover .cerese-carte-billet__lien { color: var(--cerese-blanc); }
}
.cerese-carte-billet__meta { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--cerese-gris); transition: color 200ms ease; }
.cerese-carte-billet__titre { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.cerese-carte-billet__resume { margin: 0; font-size: 16px; line-height: 1.55; text-align: justify; color: var(--cerese-gris); transition: color 200ms ease; }
.cerese-carte-billet__lien { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--cerese-lien); transition: color 200ms ease; }

/* ===== Grille de cartes (1 colonne, 2 à 620px, 3 à 1010px : évite les titres
   cassés sur 4-5 lignes en tablette portrait, voir .cerese-grille-projets) ===== */
.cerese-grille-billets { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.5vw, 20px); }
@media (min-width: 620px) { .cerese-grille-billets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1010px) { .cerese-grille-billets { grid-template-columns: repeat(3, 1fr); } }

/* ===== Article mis en avant (hub Blog) : photo + contenu côte à côte ===== */
.cerese-page .cerese-billet-une { display: grid; grid-template-columns: 1fr; text-decoration: none; color: var(--cerese-encre); outline: 1px solid var(--cerese-bordure); background: var(--cerese-blanc); }
/* PC uniquement (09/10/2026, demande du client) : descriptif à gauche,
   photo à droite. Sous 1000px, la photo reste au-dessus du texte.
   .cerese-page en préfixe : la règle de base ci-dessus pèse (0,2,0), et
   l'ancienne media query sans préfixe (0,1,0) perdait contre elle, si bien
   que la mise en deux colonnes prévue n'avait jamais pris effet. */
@media (min-width: 1000px) {
  .cerese-page .cerese-billet-une { grid-template-columns: 1.3fr 1fr; }
  .cerese-page .cerese-billet-une__photo { order: 2; min-height: 360px; }
}
.cerese-billet-une__photo { position: relative; min-height: 280px; background-color: #0F2C30; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 14px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.cerese-billet-une__photo span { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(234, 239, 198, 0.85); line-height: 1.4; }
.cerese-billet-une__photo--photo { padding: 0; }
.cerese-billet-une__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cerese-billet-une__corps { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.cerese-billet-une__eyebrow { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--cerese-gris); }
.cerese-billet-une__titre { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 700; }
.cerese-billet-une__rule { height: 3px; width: 80px; background: var(--cerese-teal); }
.cerese-billet-une__chapo { font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; text-align: justify; color: var(--cerese-encre); }
.cerese-billet-une__info { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: ui-monospace, monospace; font-size: 12px; color: var(--cerese-gris); }

/* ===== En-tête d'article (billet ou actualité) ===== */
.cerese-article-hero { position: relative; background: var(--cerese-fonce); color: var(--cerese-blanc); overflow: hidden; }
/* Photo de couverture, étiquette de remplacement et motif de traits obliques
   (::before) retirés le 04/09/2026, même décision que .cerese-hero-inst dans
   commun.css : ce panneau est un aplat teal uni. La photo mise en avant de
   l'article reste utilisée pour sa vignette dans les listes du blog. */
/* Largeur du site, aligné à gauche : son bord gauche coïncide avec celui de
   la colonne de lecture, la colonne « À lire aussi » occupant la droite
   (09/10/2026). Un essai de centrage sur 760px a été abandonné le même jour
   au profit de cette présentation. */
.cerese-article-hero__inner { position: relative; max-width: var(--cerese-container); margin: 0 auto; padding: clamp(16px, 1.9vw, 26px) clamp(20px, 4vw, 40px) clamp(20px, 2.5vw, 34px); }
/* Couleur au survol verrouillée dans commun.css, juste sous la règle globale
   .cerese-page a:hover qui la cassait (lien illisible sur le teal). */
.cerese-page .cerese-article-hero__retour { color: var(--cerese-beige); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cerese-article-hero__eyebrow { margin-top: 14px; font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--cerese-beige); }
.cerese-article-hero h1 { margin: 10px 0 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; max-width: 34ch; }
.cerese-article-hero__rule { width: 96px; height: 3px; background: var(--cerese-beige); margin: 13px 0 13px; }
.cerese-article-hero__chapo { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; text-align: justify; color: var(--cerese-beige); max-width: 80ch; }

/* ===== Ligne de publication et menu « Partager » (refonte du 09/10/2026) =====
   Hors du panneau du titre, en tête de la colonne de lecture, comme la
   ligne « Publié le… » et le bouton de partage du Monde. Un filet sous le
   bloc le sépare de la photo. */
/* Infos et bouton sur une même rangée, le bouton juste après les infos.
   flex-wrap : sur un écran étroit, le bouton passe à la ligne au lieu de
   comprimer le texte. */
.cerese-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-bottom: clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--cerese-bordure); }
.cerese-article-meta__info { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: ui-monospace, monospace; font-size: 13px; color: var(--cerese-gris); }

/* Bouton unique qui déplie les réseaux du bandeau de bas de page. Menu en
   position absolue sous le bouton : il recouvre la photo au lieu de la
   pousser vers le bas à chaque ouverture. */
.cerese-partage-menu { position: relative; }
.cerese-partage-menu__bouton { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--cerese-bordure); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--cerese-fonce); background: var(--cerese-blanc); user-select: none; }
.cerese-partage-menu__bouton::-webkit-details-marker { display: none; }
.cerese-partage-menu[open] .cerese-partage-menu__bouton,
.cerese-partage-menu__bouton:focus-visible { background: var(--cerese-beige); }
@media (hover: hover) {
  .cerese-partage-menu__bouton:hover { background: var(--cerese-beige); }
}
.cerese-partage-menu__liste { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 210px; display: flex; flex-direction: column; padding: 6px 0; background: var(--cerese-blanc); outline: 1px solid var(--cerese-bordure); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
/* (0,2,1), comme .cerese-page a : déclarée après, elle l'emporte. Le survol
   est porté à (0,3,1) pour battre .cerese-page a:hover. */
.cerese-page .cerese-partage-menu__liste a { display: flex; align-items: center; gap: 12px; padding: 11px 18px; color: var(--cerese-fonce); text-decoration: none; font-size: 15px; font-weight: 600; }
.cerese-page .cerese-partage-menu__liste a svg { flex: 0 0 auto; color: var(--cerese-teal); }
@media (hover: hover) {
  .cerese-page .cerese-partage-menu__liste a:hover { background: var(--cerese-beige); color: var(--cerese-fonce); }
}
.cerese-page .cerese-partage-menu__liste a:focus-visible { background: var(--cerese-beige); }

/* ===== Colonne de lecture + colonne « À lire aussi » (09/10/2026) =====
   Lecture à gauche (760px au plus, longueur de ligne confortable), articles
   liés à droite. Sous 1000px, la colonne liée passe sous le texte : à côté,
   elle écraserait la lecture.
   La photo mise en avant est à la largeur du texte et non en bandeau pleine
   largeur, beaucoup de photos du client ne faisant que 1386 px. Format
   unique 16:9 pour toutes les photos d'illustration de l'article (photo
   mise en avant et figures du texte), quelle que soit la forme du fichier
   d'origine : même rapport que les vignettes des listes du blog. */
.cerese-article-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) {
  .cerese-article-grille { grid-template-columns: minmax(0, 760px) minmax(260px, 340px); justify-content: space-between; align-items: start; }
}
.cerese-article-colonne { max-width: 760px; display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); }

/* Colonne « À lire aussi ». Collante sur PC : elle reste à l'écran pendant
   la lecture d'un long article au lieu de laisser un vide dès qu'on
   descend. L'en-tête du site n'étant pas fixe, 24px du haut suffisent. */
.cerese-alire { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1000px) {
  .cerese-alire { position: sticky; top: 24px; }
}
.cerese-alire__titre { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; }
.cerese-alire__liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.cerese-alire__liste li + li { border-top: 1px solid var(--cerese-bordure); }
.cerese-page .cerese-alire__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; color: var(--cerese-encre); text-decoration: none; }
.cerese-alire__photo { display: block; aspect-ratio: 16 / 9; background: var(--cerese-beige); overflow: hidden; }
.cerese-alire__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cerese-alire__texte { display: flex; flex-direction: column; gap: 4px; }
.cerese-alire__date { font-family: ui-monospace, monospace; font-size: 12px; color: var(--cerese-gris); }
.cerese-alire__nom { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--cerese-fonce); }
@media (hover: hover) {
  .cerese-page .cerese-alire__item:hover { text-decoration: none; }
  .cerese-page .cerese-alire__item:hover .cerese-alire__nom { color: var(--cerese-teal); text-decoration: underline; }
}
.cerese-alire__vide { margin: 6px 0 0; font-size: 15px; color: var(--cerese-gris); }
.cerese-article-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cerese-article-photo__img,
.cerese-article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.cerese-article-photo figcaption { font-size: 14px; line-height: 1.45; color: var(--cerese-gris); }
.cerese-article-corps { display: flex; flex-direction: column; gap: 16px; }
.cerese-article-corps p { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.7; text-align: justify; color: var(--cerese-encre); }
.cerese-article-corps h2 { margin: 8px 0 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.3; font-weight: 700; }
/* Sous-intertitre de l'éditeur de l'espace admin (09/10/2026). */
.cerese-article-corps h3 { margin: 4px 0 0; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.35; font-weight: 700; }
.cerese-article-corps__rule { width: 80px; height: 3px; background: var(--cerese-teal); }
.cerese-article-figure { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.cerese-article-figure figcaption { font-size: 14px; line-height: 1.45; color: var(--cerese-gris); }
.cerese-article-citation { margin: 8px 0; padding: clamp(16px, 1.8vw, 22px); background: var(--cerese-beige); border-left: 4px solid var(--cerese-teal); }
.cerese-article-citation p { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; font-weight: 600; color: var(--cerese-encre); }

.cerese-aside-bloc { outline: 1px solid var(--cerese-bordure); background: var(--cerese-blanc); padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 10px; }
.cerese-aside-bloc__titre { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; }
.cerese-aside-bloc__rule { height: 3px; width: 64px; background: var(--cerese-teal); }
.cerese-aside-bloc__ligne { font-size: 16px; line-height: 1.5; color: var(--cerese-encre); }
/* Bouton de téléchargement de l'encart « La publication », sorti de son
   style en ligne le 09/10/2026. */
.cerese-page .cerese-aside-bloc__bouton { align-self: flex-start; margin-top: 4px; background: var(--cerese-vert); color: var(--cerese-blanc); text-decoration: none; padding: 14px 22px; font-size: 15px; font-weight: 600; text-align: center; }
@media (hover: hover) {
  .cerese-page a.cerese-aside-bloc__bouton:hover { color: var(--cerese-blanc); text-decoration: underline; }
}

/* ===== Cartes Publications (rubriques hétérogènes) ===== */
/* Même traitement au survol que les autres cartes du site : fond teal
   plein, texte en blanc. Le bouton "Télécharger" garde son propre style
   (blanc sur vert) : c'est un bouton d'action, pas du texte de carte, et
   son contraste reste bon sur fond teal comme sur fond blanc. */
.cerese-carte-publication { background: var(--cerese-blanc); outline: 1px solid var(--cerese-bordure); padding: clamp(18px, 1.9vw, 24px); display: flex; flex-direction: column; gap: 12px; color: var(--cerese-encre); transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) {
  .cerese-carte-publication:hover { background: var(--cerese-teal); outline-color: var(--cerese-teal); }
  .cerese-carte-publication:hover,
  .cerese-carte-publication:hover .cerese-carte-publication__eyebrow,
  .cerese-carte-publication:hover .cerese-carte-publication__label,
  .cerese-carte-publication:hover .cerese-carte-publication__valeur { color: var(--cerese-blanc); }
}
.cerese-carte-publication__eyebrow { font-family: ui-monospace, monospace; font-size: 12px; color: var(--cerese-gris); letter-spacing: 0.06em; transition: color 200ms ease; }
.cerese-carte-publication__titre { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.cerese-carte-publication__champs { display: grid; grid-template-columns: 1fr; gap: 12px clamp(20px, 2.5vw, 32px); }
@media (min-width: 620px) { .cerese-carte-publication__champs { grid-template-columns: 1fr 1fr; } }
.cerese-carte-publication__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; transition: color 200ms ease; }
.cerese-carte-publication__valeur { margin-top: 3px; font-size: 16px; line-height: 1.45; color: var(--cerese-encre); transition: color 200ms ease; }
.cerese-page .cerese-carte-publication__bouton { align-self: flex-start; background: var(--cerese-vert); color: var(--cerese-blanc); text-decoration: none; padding: 13px 22px; font-size: 15px; font-weight: 600; }

/* Mobile : les liens/boutons menant vers une page fille sont centrés sous le texte qui les précède,
   plutôt qu'alignés à gauche comme sur les écrans plus larges. */
@media (max-width: 619px) {
  .cerese-carte-billet__lien,
  .cerese-page .cerese-carte-publication__bouton { align-self: center; }
  /* Justification : trop de mots à étirer par ligne sur une colonne mobile
     étroite, ce qui crée des vides visibles entre les mots. Repasse en
     alignement à gauche sous ce palier (voir le même correctif dans
     commun.css pour le détail). */
  .cerese-carte-billet__resume,
  .cerese-billet-une__chapo,
  .cerese-article-hero__chapo,
  .cerese-article-corps p { text-align: left; }
}

/* ===== Pagination simple (liens précédent/suivant) ===== */
.cerese-pagination-liens { margin-top: 20px; display: flex; justify-content: center; }
.cerese-pagination-liens a,
.cerese-pagination-liens span {
  font-family: var(--cerese-font); font-size: 16px; font-weight: 600; color: var(--cerese-fonce);
  background: var(--cerese-blanc); border: 1px solid var(--cerese-fonce); padding: 14px 24px; text-decoration: none;
}

/* ===== Page de rubrique de publication (taxonomy-type_publication.php) ===== */
/* Liste sur le modèle de Google Scholar depuis le 09/10/2026 (demande de
   Louis), en remplacement des fiches encadrées du 09/09 : une ligne par
   publication avec son titre, ses auteurs (et l'année) et son DOI, et à
   gauche un filtre par année et un tri. Le chapô n'est plus affiché dans la
   liste, il reste sur la page de la publication.
   Sur téléphone, le filtre passe au-dessus de la liste et ses options se
   rangent en ligne, pour ne pas repousser la liste d'un écran entier. */
.cerese-biblio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) {
  .cerese-biblio { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
}
.cerese-biblio__filtres { display: flex; flex-direction: column; gap: 20px; }
.cerese-biblio__groupe-titre { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; }
.cerese-biblio__options { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 900px) {
  .cerese-biblio__options { flex-direction: column; gap: 2px; }
}
.cerese-page .cerese-biblio__options a { display: inline-block; padding: 4px 0; font-size: 15px; color: var(--cerese-encre); text-decoration: none; }
/* Option active : couleur de la charte et graisse, comme l'intitulé rouge
   du réglage en cours chez Scholar. */
.cerese-page .cerese-biblio__options a.is-actif { color: var(--cerese-teal); font-weight: 700; }
@media (hover: hover) {
  .cerese-page .cerese-biblio__options a:hover { color: var(--cerese-teal); text-decoration: underline; }
}
.cerese-biblio__compte { color: var(--cerese-gris); font-weight: 400; }

.cerese-biblio__total { margin: 0 0 4px; font-size: 14px; color: var(--cerese-gris); }
.cerese-biblio__liste { list-style: none; margin: 0; padding: 0; }
.cerese-biblio__item { padding: 16px 0; border-bottom: 1px solid var(--cerese-bordure); display: flex; flex-direction: column; gap: 6px; }
.cerese-biblio__item:first-child { padding-top: 6px; }
/* .cerese-page en préfixe pour battre le style des h2 de section du site,
   qui imposait sa grande taille au titre de chaque ligne. */
.cerese-page .cerese-biblio__titre { margin: 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Titre en teal : sur une liste bibliographique, le titre est le lien à
   suivre, comme chez Scholar. Survol en (0,3,1) pour battre
   .cerese-page a:hover. */
.cerese-page .cerese-biblio__titre a { color: var(--cerese-teal); text-decoration: none; }
.cerese-page .cerese-biblio__titre a:focus-visible { text-decoration: underline; }
@media (hover: hover) {
  .cerese-page .cerese-biblio__titre a:hover { color: var(--cerese-teal); text-decoration: underline; }
}
/* Titre-bouton qui déplie le résumé (articles scientifiques, notes
   techniques, mémoires). Remis à zéro pour ressembler au titre-lien des
   communications, avec un chevron qui pivote quand l'encadré est ouvert. */
.cerese-page .cerese-biblio__deplier { all: unset; box-sizing: border-box; cursor: pointer; display: inline; color: var(--cerese-teal); font: inherit; }
.cerese-biblio__chevron { display: inline-block; margin-left: 6px; vertical-align: middle; transition: transform 200ms ease; }
.cerese-biblio__deplier[aria-expanded="true"] .cerese-biblio__chevron { transform: rotate(180deg); }
/* Rose au clic signalé par Louis le 09/10 : hello-elementor remplit en rose
   (#c36) tout <button type="button"> en :hover et :focus, et un bouton
   garde le focus après un clic, d'où le titre resté rose. Même parade que
   pour .cerese-burger dans commun.css : son reset se charge après nos
   feuilles et gagne à spécificité égale, d'où le !important. */
.cerese-page .cerese-biblio__deplier:hover,
.cerese-page .cerese-biblio__deplier:focus,
.cerese-page .cerese-biblio__deplier:active { background: transparent !important; color: var(--cerese-teal) !important; text-decoration: none !important; }
.cerese-page .cerese-biblio__deplier:focus-visible { outline: 2px solid var(--cerese-teal); outline-offset: 3px; }
@media (hover: hover) {
  .cerese-page .cerese-biblio__deplier:hover span { text-decoration: underline; }
}
.cerese-biblio__titre-seul { color: var(--cerese-encre); }

/* Encadré du résumé, sous la ligne du DOI. [hidden] doit être redit : le
   display: flex ci-dessous l'emporterait sinon sur l'attribut, et le
   résumé ne se replierait jamais. */
.cerese-biblio__resume[hidden] { display: none; }
.cerese-biblio__resume { margin-top: 6px; padding: clamp(16px, 1.8vw, 22px); background: var(--cerese-beige); border-left: 4px solid var(--cerese-teal); display: flex; flex-direction: column; gap: 8px; }
.cerese-biblio__resume-titre { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; }
.cerese-biblio__resume-texte { display: flex; flex-direction: column; gap: 10px; }
.cerese-biblio__resume-texte > * { margin: 0; }
.cerese-biblio__resume-texte p { font-size: 16px; line-height: 1.65; text-align: justify; color: var(--cerese-encre); }
/* Intertitres et listes saisis avec l'éditeur de l'espace admin. */
.cerese-biblio__resume-texte h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--cerese-fonce); margin-top: 4px; }
.cerese-biblio__resume-texte h4 { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--cerese-fonce); }
.cerese-biblio__resume-texte ul,
.cerese-biblio__resume-texte ol { padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--cerese-encre); }
@media (max-width: 619px) {
  .cerese-biblio__resume-texte p { text-align: left; }
}

.cerese-biblio__auteurs { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cerese-gris); }
.cerese-biblio__liens { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cerese-page .cerese-biblio__liens a { font-size: 14px; color: var(--cerese-lien); word-break: break-word; }

/* Carte de rubrique sans publication, sur la page mère : elle garde l'aspect
   d'une carte mais ne réagit pas au survol, puisqu'elle ne mène nulle part.
   Un cadre qui s'allume sans être cliquable est le défaut même qu'on corrige
   sur les fiches ci-dessus. */
.cerese-page .cerese-carte--inerte { color: var(--cerese-gris); }
.cerese-page .cerese-carte--inerte .cerese-carte__lien { color: var(--cerese-gris); }
@media (hover: hover) {
  .cerese-page .cerese-carte--inerte:hover { background: var(--cerese-blanc); outline-color: var(--cerese-bordure); }
  .cerese-page .cerese-carte--inerte:hover h3,
  .cerese-page .cerese-carte--inerte:hover p { color: var(--cerese-encre); }
  .cerese-page .cerese-carte--inerte:hover .cerese-carte__eyebrow,
  .cerese-page .cerese-carte--inerte:hover .cerese-carte__lien { color: var(--cerese-gris); }
}