/* ==========================================================================
   .pm-prose — la palette de blocs du corps d'article

   La maquette de l'article (2399:2949) est un catalogue : elle aligne une fois
   chacun des blocs que l'éditeur pourra insérer, texte de calage à l'appui
   (« Intertitre », « Liste à puce cette application… »). Ce fichier les décrit
   tous, y compris ceux qu'aucune page n'utilisera peut-être — c'est là leur
   intérêt, puisque Drupal les produira à la demande.

   Deux écarts de rythme, tous deux relevés dans le fichier : 48px entre les
   grandes sections du corps, 24px entre les blocs d'une même section.
   ========================================================================== */

.pm-prose {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* Le corps de l'article ajoute 24px de marge intérieure en haut et en bas.
   L'écart apparent avec ses voisins — l'image au-dessus, les concepts en
   dessous — vaut donc 48 : 24 d'écart entre blocs plus 24 de marge. C'est le
   même 48 que partout ailleurs dans la page, mais obtenu en deux morceaux, ce
   qui rend la valeur facile à manquer dans le fichier. */
   
@media (min-width: 1024px) {
  .pm-prose--corps {
    padding-bottom: var(--pm-space-l);
  }
}

/* Un bouton posé dans le fil garde sa largeur naturelle : 230px pour « Partager
   cet article », 470 pour « Découvrez la sélection… », jamais toute la colonne.

   Sans cette règle il s'étirait à 744px : dans un conteneur flex en colonne,
   l'étirement transversal est le comportement par défaut, et il ne se voit que
   sur les éléments qui ont une largeur propre — les paragraphes, eux, occupent
   la colonne de toute façon. Les boutons des fiches livre y échappaient déjà,
   leur parent alignant son contenu au début. */
.pm-prose > .pm-btn {
  align-self: flex-start;
}

/* Le renvoi de fin d'article fait exception : il est centré dans la colonne,
   quand les autres boutons du fil s'alignent à gauche. Le sélecteur doit
   reprendre la forme descendante de la règle ci-dessus — à spécificité égale,
   c'est l'ordre de déclaration qui tranche, et la classe seule perdrait. */
.pm-prose > .pm-prose-cta {
  align-self: center;
}

/* --- Titraille ------------------------------------------------------------ */

/* Le bloc de titre est centré, encadré de deux filets verticaux de 13px. Ces
   filets sont des LINE de 0×13 dans Figma : un trait vertical, pas un séparateur
   horizontal de largeur nulle. Ils sont repris tels quels du composant article
   de la home (.pm-article__tick). */
.pm-article-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pm-space-xs);
  text-align: center;
}

@media (min-width: 1024px) {
  .pm-article-head {
    padding-bottom: var(--pm-space-l);
  }
}

.pm-article-head__eyebrow {
  color: var(--pm-color-blue);
}

.pm-article-head__title {
  margin: 0;

  /* 712 dans un bloc de 772 : la maquette borne la mesure du titre plutôt que
     de le laisser courir sur toute la colonne. */
  max-width: 712px;
}

/* La variante majeure porte le titre sur toute la largeur utile : 1476 dans un
   bloc de 1536, mêmes 30px de retrait de part et d'autre que la version
   normale, mais sur une colonne bien plus large. */
.pm-article-head__title--xl {
  max-width: 1476px;
}

/* La signature est en #170154, le bleu nuit — même exception que sur la home. */
.pm-article-head__byline {
  color: var(--pm-color-navy);
}

.pm-article-head__byline a {
    text-decoration: underline;
    text-underline-offset: 3px;
}


.pm-article-head__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-xs);
}

/* La variante majeure ajoute une pastille de rubrique devant le surtitre :
   un aplat bleu à coins très arrondis, texte en blanc. Le rayon de 24 dépasse
   la demi-hauteur (17/2), donc la forme est une gélule quel que soit le texte —
   d'où `--pm-radius-pill` plutôt que la valeur brute. */
.pm-article-head__pastille {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--pm-space-xs);
  border-radius: var(--pm-radius-pill);
  background-color: var(--pm-color-blue);
  color: var(--pm-color-on-dark);
}

.pm-article-head__rubriques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-xs);
}

/* --- Image d'ouverture ---------------------------------------------------- */

/* La légende est posée SUR la photo, en blanc, à 9px du bord gauche et 22 du
   bas — et non dessous comme sur la home. Le cadre rogne l'image de 2px
   (792×497 pour une image de 499) : `overflow: hidden` reproduit ce rognage. */
.pm-prose-figure {
  position: relative;
  overflow: hidden;
}

.pm-prose-figure img {
  width: 100%;
  height: auto;
}

.pm-prose-figure__caption {
  position: absolute;
  bottom: 22px;
  left: 9px;
  right: 9px;
  color: var(--pm-color-on-dark);

  /* La photo peut être claire à cet endroit. La maquette ne prévoit rien, mais
     une légende blanche sans repli est illisible une fois sur deux. */
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

/* La légende vient du champ field_legende du nœud image, rendue par son format
   de texte : elle arrive donc dans un <p>, dont la marge par défaut décalerait
   la légende de sa position dans la maquette. */
.pm-prose-figure__caption p {
  margin: 0;
}

/* --- Blocs de texte ------------------------------------------------------- */

/* Les citations encadrées gardent leur classe : ce sont des widgets
   d'éditeur, pas des balises nues. Les paragraphes et les listes, eux, sont
   traités par .pm-wysiwyg en bas de ce fichier.
   ------------------------------------------------------------------------- */

/* --- Citation exergue -----------------------------------------------------
   Figma « Frame 5528 » : deux filets HORIZONTAUX de 100px, centrés, encadrant
   une citation en Citation exergue 32px. Les filets font 100×0 — donc bien
   horizontaux, contrairement à ceux de la titraille.
   ------------------------------------------------------------------------- */

.pm-prose-exergue {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pm-prose-exergue::before,
.pm-prose-exergue::after {
  content: "";
  width: 100px;
  height: var(--pm-border-width);
  background-color: var(--pm-color-ink);
}

.pm-prose-exergue__texte {
  padding: var(--pm-space-l);
}

/* --- Encarts --------------------------------------------------------------
   Quatre variantes dans la maquette, qui ne diffèrent que par le fond et la
   marge intérieure. Le fond blanc tranche sur le #F7F5F3 de la page ; le sable
   signale l'accès libre.
   ------------------------------------------------------------------------- */

.pm-prose-encart {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);
  padding: var(--pm-space-l);
  background-color: var(--pm-color-surface);
}

.pm-prose-encart--sand {
  background-color: var(--pm-color-sand);
  text-align: center;
}

/* Bandeau « Cet article est réservé aux abonnés. » — Figma « Frame 5550 »,
   792×37, fond sable, pastille abonnés puis texte, le tout centré.

   C'est l'autre état du même emplacement : la maquette « sans paywall » y met
   « Cet article est en libre accès pendant 10 jours » (92px de haut, texte
   centré sans pastille), la maquette « avec paywall » celui-ci (37px). Les deux
   s'excluent ; la page les montre l'un sous l'autre parce qu'elle sert de
   catalogue de blocs.

   Les 37px de hauteur ne sont pas déclarés : ils tombent de 6 + 25 + 6, la
   pastille et les marges. */
.pm-prose-encart--abo {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-xs);
  padding: var(--pm-space-3xs) var(--pm-space-xl);
  background-color: var(--pm-color-sand);
}

/* Marge intérieure de 48 au lieu de 24 : l'encadré éditorial et le bloc
   « Pour ne rien louper » sont plus aérés que les mentions de service. */
.pm-prose-encart--aere {
  padding: var(--pm-space-xl);
}

/* Avec couverture, l'encart passe en rangée : image de 97×123 à gauche, texte
   à droite. Aucun modificateur à poser — c'est la présence de l'image qui
   décide, ce qui donne un seul gabarit Twig, l'illustration en condition.

   Le `> ` compte : il empêche la règle de se déclencher sur une couverture
   nichée plus profond, dans un bloc que l'éditeur aurait inséré. */
.pm-prose-encart:has(> .pm-prose-encart__cover) {
  flex-direction: row;
  align-items: center;
  gap: var(--pm-space-l);
}

.pm-prose-encart__cover {
  flex: 0 0 auto;
  width: 97px;
  height: 123px;
  object-fit: cover;
}

/* Renvoi « À lire aussi » : pas de fond, seulement du souffle au-dessus et en
   dessous. C'est le seul encart à ne pas être une boîte. */
.pm-prose-renvoi {
  padding-block: var(--pm-space-l);
}

/* --- Fiche livre ----------------------------------------------------------
   Figma « Frame 5556 » : couverture 120×205 à gauche, titre, mentions et un
   bouton de contour à droite.
   ------------------------------------------------------------------------- */

.pm-prose-livre {
  display: flex;
  gap: var(--pm-space-l);
  padding-block: var(--pm-space-xs);
}

.pm-prose-livre__cover {
  flex: 0 0 auto;
  width: 120px;
  height: 205px;
  object-fit: cover;
}

/* Les mentions du livre : liste à puce, libellé en gras, style « Texte hors
   édito » — et non le serif du corps rédigé.

   Deux points de spécificité à tenir, la fiche livre vivant à l'intérieur d'une
   zone .pm-wysiwyg :

     — la fonte est reprise sur les `li` (0,1,1), parce que la règle de la zone
       s'applique DIRECTEMENT à eux à (0,0,0) : la poser sur le `ul` ne servirait
       à rien, l'héritage perdant contre une règle qui cible l'élément ;
     — l'écart entre lignes est remis à zéro par un sélecteur à (0,2,0), la zone
       posant 6px à (0,1,1). Dans la maquette les cinq mentions sont un seul
       nœud texte de 110px pour cinq lignes de 22, donc sans écart ajouté.

   Les puces viennent de la zone d'éditeur et sont conservées : elles ne sont pas
   dans la maquette, qui n'a aucun marqueur, mais ont été demandées. */
.pm-prose-livre .pm-prose-livre__meta {
  gap: 0;
}

.pm-prose-livre__meta li {
  font-family: var(--pm-text-courant-family);
  font-size: var(--pm-text-courant-size);
  font-weight: var(--pm-text-courant-weight);
  line-height: var(--pm-text-courant-height);
  letter-spacing: var(--pm-text-courant-spacing);
}

.pm-prose-livre__lien {
  color:#000;
}

/* Le titre renvoie à la fiche du livre. La maquette n'a pas ce lien et n'en
   montre donc aucun état : au repos il doit être indiscernable du titre, ce que
   le reset donne déjà (`color: inherit`, pas de soulignement). La classe n'est
   pas décorative — sans elle, `.pm-wysiwyg a:not([class])` soulignerait le titre
   en permanence. Le soulignement est reporté sur le survol, seule affordance. */
.pm-prose-livre__lien:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pm-prose-livre__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pm-space-xs);
  min-width: 0;
}

/* --- Bloc auteur ----------------------------------------------------------
   Figma « Frame 5542 ». Le titre est précédé d'un filet horizontal de 60px,
   sur la même ligne — le même motif que « Sur le même sujet ».
   ------------------------------------------------------------------------- */

.pm-prose-auteur {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

.pm-prose-auteur__corps {
  display: flex;
  gap: var(--pm-space-l);
  align-items: flex-start;
}

.pm-prose-auteur__photo {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  object-fit: cover;
}

/* Titre de section précédé d'un filet de 60px, aligné sur le milieu du texte.
   Repris à l'identique par le bloc « Sur le même sujet ». */
.pm-titre-filet {
  display: flex;
  align-items: center;
  gap: var(--pm-space-xs);
}

.pm-titre-filet::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 60px;
  height: var(--pm-border-width);
  background-color: var(--pm-color-ink);
}

/* --- Concepts liés --------------------------------------------------------
   Figma « Frame 5535 » : un titre puis une rangée d'étiquettes bleues en
   capitales, écartées de 48px.
   ------------------------------------------------------------------------- */

.pm-concepts {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);
}

.pm-concepts__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-s);
}

.pm-concepts__item {
  color: var(--pm-color-blue);
}

.pm-concepts__item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   .pm-wysiwyg — le corps rédigé, tel que le sortira l'éditeur

   Drupal produira ce contenu depuis un WYSIWYG : des balises nues, sans
   classe. Les styles doivent donc être portés par le sélecteur d'élément et
   non par les classes utilitaires.

   Correspondance avec les styles nommés de la maquette :

     p            → « Texte édito »          Libertinus Serif 22/1.45
     h2           → « Intertitre (H3) »      DM Sans 700 32/1.1
     h3           → « Sous-intertitre (H4) » DM Sans 700 24/1.1
     h4           → « Titre encadré (H5) »   DM Sans 700 20/1.1
     ul li, ol li → « Texte édito »

   Le décalage d'un niveau entre le balisage et le nom Figma est voulu : le
   `h1` de la page est le titre de l'article, donc le premier niveau que
   l'éditeur peut produire est un `h2`, qui porte l'apparence de l'intertitre.

   --- Pourquoi `:where()` -------------------------------------------------

   `.pm-wysiwyg p` aurait une spécificité de (0,1,1) et écraserait donc les
   classes utilitaires (0,1,0). Un `<p class="pm-text-courant">` d'encart,
   pourtant explicite, se retrouverait en serif 22.

   `:where()` ramène la spécificité à (0,0,0) : ces règles ne sont qu'un défaut,
   que n'importe quelle classe posée dans le balisage emporte. C'est exactement
   le rapport voulu — l'éditeur fournit du texte sans classe, le gabarit garde
   la main partout où il en met une.

   Seules les listes échappent à ce traitement : le reset de base.css met
   `list-style: none` sur tous les `ul`/`ol` du projet, à (0,0,1). Une règle à
   (0,0,0) ne pourrait pas le contredire, d'où la classe laissée nue — (0,1,1),
   qui bat le reset sans concurrencer d'utilitaire, aucun ne portant sur les
   puces.
   ========================================================================== */

.pm-wysiwyg {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* Le corps rédigé change de style nommé selon la largeur : « 📱Texte serif »
   20/1.45 en mobile, « Texte édito » 22/1.45 au-delà. Ce sont deux styles
   distincts du fichier, pas deux tailles d'un même style — la maquette mobile
   de l'article emploie le premier sept fois, la desktop le second huit fois.
   Seul le corps varie ; les intertitres gardent la même taille aux deux
   largeurs. */
.pm-wysiwyg p,
.pm-wysiwyg li {
  font-family: var(--pm-text-serif-s-family);
  font-size: var(--pm-text-serif-s-size);
  font-weight: var(--pm-text-serif-s-weight);
  line-height: var(--pm-text-serif-s-height);
  letter-spacing: var(--pm-text-serif-s-spacing);
}

@media (min-width: 1024px) {
  .pm-wysiwyg p,
  .pm-wysiwyg li   {
    font-size: var(--pm-text-edito-size);
    line-height: var(--pm-text-edito-height);
  }
}

.pm-wysiwyg h2 {
  font-family: var(--pm-text-h3-family);
  font-size: var(--pm-text-h3-size);
  font-weight: var(--pm-text-h3-weight);
  line-height: var(--pm-text-h3-height);
  letter-spacing: var(--pm-text-h3-spacing);
}

.pm-wysiwyg h3 {
  font-family: var(--pm-text-h4-family);
  font-size: var(--pm-text-h4-size);
  font-weight: var(--pm-text-h4-weight);
  line-height: var(--pm-text-h4-height);
  letter-spacing: var(--pm-text-h4-spacing);
}

.pm-wysiwyg h4 {
  font-family: var(--pm-text-h5-family);
  font-size: var(--pm-text-h5-size);
  font-weight: var(--pm-text-h5-weight);
  line-height: var(--pm-text-h5-height);
  letter-spacing: var(--pm-text-h5-spacing);
}

/* Les deux premiers niveaux d'intertitre sont BLEUS dans la maquette —
   #1510DE, aux deux largeurs. Le troisième reste en encre.

   `:not([class])` est indispensable ici, et pour une raison que les règles de
   fonte ci-dessus n'ont pas : aucune classe utilitaire ne déclare de couleur.
   Un `<h3 class="pm-text-h4">` — le titre d'une fiche livre, en encre dans la
   maquette — n'aurait donc rien à opposer à une règle de couleur, même à
   (0,0,0), puisqu'elle s'applique à l'élément et bat l'héritage. Un titre qui
   porte une classe est du gabarit, pas du texte rédigé : il garde sa couleur. */
.pm-wysiwyg h2:not([class]), .pm-wysiwyg h3:not([class]) {
  color: var(--pm-color-blue);
}

/* --- Citation ------------------------------------------------------------
   Figma « Frame 5526 » : filet de 3px à GAUCHE uniquement (côtés 0/0/0/3),
   marges 12/24, style « Texte_Large (citation) ». Le contour est déclaré
   INSIDE dans le fichier ; en bordure CSS il pousserait le texte de 3px, d'où
   le retrait compensé sur le padding.

   `:not([class])` — et non le simple `blockquote` des autres règles — parce que
   celle-ci pose une bordure et des marges, pas seulement une fonte. La citation
   exergue est aussi un `blockquote`, avec ses propres classes ; sans cette
   restriction elle héritait d'un filet gauche qu'elle n'a pas, ses classes ne
   redéclarant que le padding et n'ayant donc rien à écraser.

   Il n'y a plus de classe `.pm-prose-quote` : une citation vient de l'éditeur,
   donc d'un `blockquote` nu. L'exergue, elle, reste un widget.
   ------------------------------------------------------------------------- */

.pm-wysiwyg blockquote:not([class]) {
  font-family: var(--pm-text-exergue-family);
  font-size: var(--pm-text-exergue-size);
  font-weight: var(--pm-text-exergue-weight);
  line-height: var(--pm-text-exergue-height);
  letter-spacing: var(--pm-text-exergue-spacing);
}

.pm-wysiwyg blockquote:not([class])::before,
.pm-wysiwyg blockquote:not([class])::after {
  content: "";
  width: 100px;
  height: var(--pm-border-width);
  background-color: var(--pm-color-ink);
  display: block;
  margin: auto;
}

.pm-wysiwyg blockquote:not([class])::before {
  margin-bottom: var(--pm-space-l);
}

.pm-wysiwyg blockquote:not([class])::after {
  margin-top: var(--pm-space-l);
}

/* Puces et numéros. La classe reste nue — voir la note de spécificité
   ci-dessus — et le `display: list-item` rend aux `li` l'affichage que le
   reset leur a retiré. */
.pm-wysiwyg ul,
.pm-wysiwyg ol {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-3xs);
  padding-inline-start: 1.4em;
  list-style: disc outside;
}

.pm-wysiwyg ol {
  list-style: decimal outside;
}

.pm-wysiwyg li {
  display: list-item;
}

/* Les liens du corps rédigé. La maquette n'en montre qu'en plages soulignées
   au milieu d'un paragraphe (« Cet article est issu du numéro 201… »), jamais
   comme un état à part : le soulignement est donc leur repos. Sans cette
   règle un lien inséré par l'éditeur serait indiscernable du texte, le reset
   du projet lui retirant couleur et soulignement.

   La couleur reste celle du texte : le lien ne se signale que par son trait.
   Le `color: inherit` du reset n'y suffit pas, et il faut le redire ici — la
   feuille de l'ancien design porte un `html a { color: #1510DE }`, à (0,0,2),
   qui bat le reset à (0,0,1) et repeignait donc en bleu tous les liens du
   corps rédigé. On ne touche pas à cette règle héritée : elle habille encore
   toutes les pages non refondues. Le sélecteur ci-dessous est à (0,2,1) et la
   couvre largement.

   @see scss/style.scss, le bloc `html` */
/* `:not([class])` ici aussi, et pour la même raison que la citation : les
   boutons du corps sont des `<a>`. Sans la restriction, « Découvrez la
   sélection des 20 livres » et « Partager cet article » se retrouvaient
   soulignés. */
.pm-wysiwyg a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le survol RETIRE le trait, au lieu d'en ajouter un : c'est l'inversion de
   l'état de repos qui fait l'affordance, et la couleur ne bouge pas davantage
   qu'au repos. Le geste ne doit rien déplacer — d'où le renoncement au passage
   en gras, qui élargissait le texte et faisait sauter la fin du paragraphe. */
.pm-wysiwyg a:not([class]):hover {
  text-decoration: none;
}

/* Le chapô est rendu dans une zone .pm-wysiwyg, comme le corps : il sort du
   même éditeur, avec les mêmes paragraphes et les mêmes listes, et c'est bien
   la mise en page du corps qu'il doit reprendre.

   Il garde en revanche sa fonte, DM Sans 19/22,4 et non le serif du corps. La
   règle de zone ci-dessus cible le `p` et le `li` à (0,1,1) : posé sur le même
   élément, .pm-text-chapo n'agirait que par héritage et perdrait. D'où ce
   sélecteur à (0,2,1), qui rend aux deux balises les valeurs de l'utilitaire —
   y compris son palier desktop, la taille étant une variable.

   @see templates/content/_fil-card.html.twig
   @see templates/content/article/_body.html.twig */
.pm-wysiwyg.pm-text-chapo * {
  font-family: var(--pm-text-chapo-family);
  font-size: var(--pm-text-chapo-size);
  font-weight: var(--pm-text-chapo-weight);
  line-height: var(--pm-text-chapo-height);
  letter-spacing: var(--pm-text-chapo-spacing);
}

.pm-wysiwyg p.alt {
  padding: var(--pm-space-xl);
  background-color: var(--pm-color-surface);
  font-family: var(--pm-text-courant-family);
  font-size: var(--pm-text-courant-size);
  font-weight: var(--pm-text-courant-weight);
  line-height: var(--pm-text-courant-height);
  letter-spacing: var(--pm-text-courant-spacing);
}

.pm-wysiwyg p.legend {    
  padding-block: var(--pm-space-l);
  font-family: var(--pm-text-courant-family);
  font-size: var(--pm-text-courant-size);
  font-weight: var(--pm-text-courant-weight);
  line-height: var(--pm-text-courant-height);
  letter-spacing: var(--pm-text-courant-spacing);
}

.pm-wysiwyg p.quote {    
  padding: var(--pm-space-xs) var(--pm-space-l);
  padding-inline-start: calc(var(--pm-space-l) - 3px);
  border-inline-start: 3px solid var(--pm-color-ink);
  font-family: var(--pm-text-large-family);
  font-size: var(--pm-text-large-size);
  font-weight: var(--pm-text-large-weight);
  line-height: var(--pm-text-large-height);
  letter-spacing: var(--pm-text-large-spacing);
}