/* ==========================================================================
   Gabarits de la page article — deux variantes

   Figma :
     normal  desktop 2399:2949 (sans paywall) et 2399:3298 (ITW) · mobile 2399:4855
     majeur  desktop 2399:4440                                    · mobile 2728:2923

   Les deux partagent tout le contenu — même titraille, même palette de blocs
   de texte (voir prose.css), même pied de page — et ne diffèrent que par la
   coque :

     normal  trois colonnes 300 / 888 / 300, gouttière 72, le titre et l'image
             étant dans la colonne centrale.
     majeur  une image pleine largeur sous le bandeau, puis le titre sur toute
             la largeur utile, puis deux colonnes 373 / 792.

   D'où un gabarit par variante et aucun composant dupliqué.
   ========================================================================== */

/* --- Colonne de texte, commune aux deux ---------------------------------- */

/* 792px : la mesure de lecture de la maquette, identique dans les deux
   variantes, CENTRÉE dans sa colonne.

   La maquette exprime cela comme 48px de marge intérieure gauche sur une
   colonne de 888. J'ai d'abord transcrit ce padding tel quel — c'était une
   erreur : 888 − 48 − 792 = 48, la marge est symétrique, donc le fichier décrit
   un centrage et non un décalage. Pire, le padding cohabitait avec ce
   `max-width` sur le même élément : les 48px se prenaient DANS les 792, la
   mesure tombait à 744 et le texte se calait à gauche de sa colonne. Le centre
   optique de la page glissait de 24px.

   Centrer par les marges est aussi ce que fait la home, dont la colonne
   centrale n'a ni padding ni gouttière propre. Un seul mécanisme pour les deux
   pages.

   --- Pourquoi `width: 100%` ----------------------------------------------

   Les deux blocs sont des éléments de grille, et une marge `auto` sur un
   élément de grille annule l'étirement (`justify-self: stretch`) : la boîte
   retombe alors sur sa largeur de contenu, et les marges absorbent le reste.
   Tant que le bloc contient une image de 792px ou de longs paragraphes, ça ne
   se voit pas — sa largeur de contenu remplit la colonne. Mais le bloc de fin
   d'article ne contient parfois qu'un titre et un ou deux concepts : il se
   réduisait à 285px et se retrouvait centré dans sa colonne, désaligné du
   corps de l'article juste au-dessus.

   `width: 100%` redonne une largeur définie à la boîte : les marges `auto` ne
   centrent plus que le surplus au-delà de 792px, ce qui est bien le centrage
   voulu.

   --- Pourquoi la notice d'auteur -----------------------------------------

   En monocolonne elle partage cette colonne avec le corps de l'article, et
   sans le plafond elle prenait toute la largeur de contenu : 989 contre 792 à
   1085 de fenêtre, soit 99px de débordement de chaque côté. Elle est ici et
   non dans la règle monocolonne pour que la mesure ne soit écrite qu'une fois.

   La règle ne lui fait rien en desktop, où sa colonne vaut 300 : `width: 100%`
   la remplit, le plafond de 792 ne mord pas et les marges `auto` n'ont plus
   rien à répartir. */
.pm-article-body,
.pm-article-featured .pm-article-page__authors {
  width: 100%;
  max-width: 792px;
  margin-inline: auto;
}

/* ==========================================================================
   Variante normale — trois colonnes
   ========================================================================== */

.pm-article-page {
  display: grid;
  gap: var(--pm-space-xl);
}

/* L'ordre du DOM suit le mobile, où la maquette intercale « En kiosque » entre
   la fin de l'article et le bloc des concepts :

     corps de l'article → en kiosque → concepts et auteur

   En desktop, « En kiosque » remonte dans la première colonne et les deux
   blocs de la colonne centrale se retrouvent l'un sous l'autre. Le placement
   explicite en grille évite de dupliquer le balisage — Drupal ne rendra ce
   contenu qu'une fois. Même mécanique que sur la home. */
/* Les colonnes latérales gardent leur largeur nominale de 300px ; seule celle
   du milieu absorbe la variation, bornée à la mesure de lecture de 888.

   Une première version les exprimait en `fr` — 300fr 888fr 300fr — pour rester
   fluide. C'était faux en dessous de 1300 : le bloc « En kiosque » a une largeur
   minimale de contenu de 233px et refuse de descendre plus bas, si bien que la
   répartition proportionnelle cessait d'être respectée et que la colonne
   centrale se décalait — 47px hors du centre de la page à 1024.

   Le seuil de 1280 est calculé, pas choisi : c'est la largeur en dessous de
   laquelle la colonne de lecture tomberait sous 440px une fois retirés les
   deux fois 300 des colonnes latérales, les deux gouttières de 72 et les 48 de
   marge de page. En dessous, tout s'empile dans l'ordre du mobile. */
@media (min-width: 1280px) {
  .pm-article-page {
    grid-template-columns: 300px minmax(0, 888px) 300px;
    column-gap: 72px;
    justify-content: center;
    align-items: start;
  }

  .pm-article-page__aside {
    grid-column: 1;
    grid-row: 1;
  }

  .pm-article-page__flux {
    grid-column: 2;
    grid-row: 1;
  }

  .pm-article-page__fin {
    grid-column: 2;
    grid-row: 2;
  }

  .pm-article-page__rail {
    grid-column: 3;
    grid-row: 1;
  }

  .pm-article-page .pm-article-page__aside,
  .pm-article-page .pm-article-page__rail {
    padding-top: 3.5rem;
  }
}


/* Colonne de droite : un conteneur qui empile ses blocs, au même écart que le
   reste de la page. Aujourd'hui il n'en contient qu'un — le pavé publicitaire —
   mais c'est lui qui porte le placement en grille, de sorte qu'ajouter un bloc
   ne demande rien d'autre que de l'écrire dans le balisage. */
.pm-article-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
}

.pm-article-page__pub img {
  width: 100%;
  height: auto;
}

/* Le pavé de 300×600 n'existe pas dans la maquette mobile : elle lui substitue
   un format « in-read » de 336×280 inséré dans le corps. Un gratte-ciel n'a
   pas sa place dans une colonne de 354px, et le masquer vaut mieux que de le
   déformer — mais c'est bien un emplacement publicitaire en moins, donc une
   décision à confirmer côté régie. */
@media (max-width: 1279px) {
  .pm-article-page__pub {
    display: none;
  }

  /* La colonne est masquée avec lui — mais seulement tant qu'elle ne contient
     que ça. Le `:has()` évite le piège d'un couplage en dur : le jour où un
     autre bloc rejoint la colonne, elle réapparaît d'elle-même en mobile et
     seul le pavé reste caché. Sans cette règle, une colonne vide mais présente
     ajouterait les 48px d'écart de la page sous l'article. */
  .pm-article-page__rail:not(:has(> *:not(.pm-article-page__pub))) {
    display: none;
  }
}

/* ==========================================================================
   Variante majeure — image pleine largeur puis deux colonnes
   ========================================================================== */

/* L'image touche les deux bords de la fenêtre, à toute largeur, et sans aucune
   arithmétique : sur cette page <main> n'est pas plafonné, donc un simple 100%
   vaut exactement la largeur visible.

   C'est délibérément une largeur relative et non `100vw`. `100vw` compte la
   barre de défilement verticale, si bien qu'une image en `width: 100vw` est
   toujours une quinzaine de pixels plus large que ce qu'on voit — un
   débordement qu'il faut ensuite rogner quelque part. Ne pas le créer vaut
   mieux que le masquer.

   Elle n'a pas de plafond : la maquette la dessine à 1728 dans un cadre de
   1728, mais au-delà elle continue de s'étendre.

   @see templates/layout/page--2026.html.twig
   @see 2026/css/components/layout.css, .pm-wrapper */
.pm-article-hero {
  position: relative;
  width: 100%;
}

.pm-article-hero img {
  display: block;
  width: 100%;
  height: auto;

  /* Deux cadrages, un par palier — c'est la seule boîte du thème qui change de
     RAPPORT et pas seulement de taille.

     En mobile, le 100:63 de la maquette : 390×246, le rapport du recadrage que
     la rédaction pose déjà sur l'image. Un 3:1 y donnerait un bandeau de 130px
     de haut, trop étroit pour porter une photo.

     En desktop, le 3:1 demandé pour l'ouverture majeure. À 1728 la photo fait
     576 de haut, à 3840 elle en fait 1280 : sans plafond de largeur, la hauteur
     suit la fenêtre.

     Les deux rapports sont ceux des fichiers servis par article_hero, qui sert
     un cadrage différent de chaque côté de 1024 — la boîte ne rogne donc rien,
     elle réserve la place avant l'arrivée de l'image. Le `cover` ne sert que de
     garde-fou si un style d'image change.

     @see sync/responsive_image.styles.article_hero.yml
     @see philomag.breakpoints.yml */
  aspect-ratio: 100 / 63;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .pm-article-hero img {
    aspect-ratio: 12 / 4;
  }
}

/* La légende est posée SUR l'image, comme dans la variante normale — mais
   alignée sur la gouttière de la page (48px) plutôt que sur le bord de la
   photo, puisque la photo occupe toute la largeur. Dans la maquette son texte
   court de y=1223 à 1236 pour une image qui s'arrête à 1248, soit 12px de
   fond de marge.

   Cette valeur se lit mal dans le JSON : le cadre de la légende (« Frame
   5549 », y=1211) commence AVANT la fin de l'image, ce qui ressemble à un
   chevauchement accidentel. C'en est un délibéré. */
.pm-article-hero__caption {
  position: absolute;
  left: var(--pm-gutter);
  right: var(--pm-gutter);
  bottom: var(--pm-space-xs);
  margin: 0;

  /* Centrée, contrairement à celle de la variante normale qui est alignée à
     gauche. Les deux légendes se ressemblent mais ne se comportent pas pareil :
     ici le nœud est déclaré `textAlignHorizontal: CENTER` et son cadre centre
     aussi son contenu sur les deux axes ; là-bas c'est LEFT, sur un texte qui
     n'occupe que 475px de la largeur de l'image. */
  color: var(--pm-color-on-dark);
  text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

/* La coque se partage en deux règles, parce que ses propriétés ne vivent pas au
   même endroit : celles qui suivent tiennent au gabarit de page et ne peuvent
   être portées que par <main>. */
.pm-article-page--featured {
  /* L'image touche le bas du bandeau : aucune marge haute, contrairement au
     gabarit courant de .pm-main. Les 48px de la maquette se retrouvent ensuite
     entre chaque bloc, par le `gap` du fil ci-dessous. */
  padding-top: 0;
  padding-bottom: var(--pm-space-xl);

  /* Pas d'`overflow-x` ici. Il y en a eu un, pour absorber le débordement de
     l'image héro, et c'était l'erreur : <main> porte aussi .pm-wrapper, donc un
     plafond de 1728. Le clip ne rognait pas la barre de défilement, il rognait
     la photo. Il vit maintenant sur <body>, qui fait la largeur de la fenêtre
     et ne coupe donc que ce qu'il faut couper.

     @see 2026/css/base.css, `body` */
}

/* Le fil de la page, et la racine du gabarit du nœud. C'est lui qui porte
   l'écart de 48px entre l'image d'ouverture, la titraille et les colonnes — et
   non <main> comme dans le prototype : Drupal enveloppe le nœud dans un <div>
   de bloc, si bien que <main> n'a jamais qu'un seul enfant et qu'un `gap` posé
   là ne séparerait rien. */
.pm-article-featured {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
}

.pm-article-featured .pm-article-page__aside {
  padding-top: 0;
}

/*@media (min-width: 1024px) {
  .pm-article-featured {
    padding-bottom: var(--pm-space-xl);
  }
}

/* La grille de .pm-wrapper, que <main> ne porte plus sur cette page, reprise ici
   sur tous les enfants du fil SAUF l'image d'ouverture — c'est ce partage qui
   laisse la photo courir d'un bord à l'autre pendant que le texte reste dans ses
   1632px.

   `width: 100%` est nécessaire en plus du `max-width` : ces enfants sont des
   éléments flex en colonne, dont la largeur naturelle est celle de leur contenu
   et non celle du conteneur.

   `.contextual` est exclu : c'est le crayon de modification que Drupal injecte
   pour les rédacteurs connectés, positionné en absolu. Lui donner une largeur et
   des marges automatiques le déplaçait hors de son bloc.

   @see templates/layout/page--2026.html.twig
   @see 2026/css/components/layout.css, .pm-wrapper */
.pm-article-featured > *:not(.pm-article-hero):not(.contextual) {
  width: 100%;
  max-width: calc(1632px + 2 * var(--pm-gutter));
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
}

/* Les colonnes sont celles de la page courante, à l'identique : .pm-article-page
   et ses classes de placement, donc la grille 300 / 888 / 300 de gouttière 72
   et son seuil de 1280px. Le gabarit majeur y pose la notice d'auteur en
   __aside, le corps en __flux et le pavé en __rail.

   La maquette majeure décrit une autre grille — deux colonnes 373 / 792, les
   371px restants laissés vides à droite — mais elle ne prévoit pas de pavé
   publicitaire, et l'y ajouter la rendait intenable : 373 + 96 + 792 + 96 + 300
   font 1657 pour 1632 de largeur utile (.pm-wrapper plafonne le contenu), et
   c'est la mesure de lecture qui payait la différence. La grille de la page
   courante, elle, tombe juste — 300 + 72 + 888 + 72 + 300 = 1632 — et évite
   d'entretenir deux systèmes de colonnes pour une seule page.

   Ne reste donc de propre à cette coque que ce qui la distingue vraiment :
   l'image d'ouverture pleine largeur, la titraille élargie, et la colonne de
   gauche qui passe du « En kiosque » aux notices d'auteur.

   @see templates/content/article/node--article--full--featured.html.twig */

/* La coque de la notice. Elle n'en contient qu'une — la notice est saisie sur
   l'article, dans le groupe « Auteur de l'article majeur », et non déduite des
   signataires — mais garde l'empilement au même écart que les blocs de la page :
   c'est lui qui portera un deuxième bloc le jour où la colonne en accueille un.

   @see _philomag_article_featured_author() */
.pm-article-page__authors {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
}

/* Le nom de l'auteur garde en desktop la taille mobile du H1 — 26px — là où
   .pm-text-h1 passe à 40. C'est bien ce que dit la maquette : « Cédric
   Enjalbert » (2804:2824) est en 26 dans sa colonne latérale, quand le « À
   propos de l'auteur » de la page courante (2399:3689) est en 40 dans la
   colonne de lecture. Et c'est ce que la colonne impose : à 40px, les 60 du
   filet compris, aucun nom ne tiendrait dans 300px.

   La valeur est en dur parce qu'aucun style nommé ne vaut 26px en desktop :
   c'est la taille mobile de --pm-text-h1-size, que la surcharge de 1024px rend
   inatteignable au-delà. */
.pm-article-page__authors .pm-titre-filet {
  font-size: 1.625rem; /* 26px, la taille mobile du H1 */
}

/* Le filet vise le milieu de la PREMIÈRE ligne, et non celui du bloc comme le
   fait .pm-titre-filet par défaut. La maquette ne tranche pas la question — son
   « Cédric Enjalbert » tient sur une ligne dans une colonne de 373 — mais dans
   les 300 de la page courante, un nom un peu long passe à la ligne et le filet
   se retrouvait alors suspendu entre les deux.

   0.6em, soit la moitié de l'interligne de 1,2 : la valeur suit la taille du
   texte, elle n'est pas mesurée sur un cas. */
.pm-article-page__authors .pm-titre-filet::before {
  align-self: start;
  margin-top: 0.6em;
}

/* En monocolonne, la notice cesse d'être une colonne latérale pour devenir une
   carte : fond blanc sur le #F7F5F3 de la page, 24px de marge intérieure, sur
   toute la largeur du contenu — la grille n'ayant plus qu'une colonne, elle la
   prend d'elle-même. Même traitement que les blocs latéraux de la home en
   mobile, à ceci près que la carte reste dans les gouttières de page au lieu
   d'aller toucher les bords de la fenêtre.

   Le nom disparaît : la maquette mobile le reprend dans la description, et un
   titre pour les seuls lecteurs d'écran ne ferait que le répéter.

   Le sélecteur passe par .pm-article-featured pour valoir (0,2,0) : sans lui,
   le `padding-top: 0` que cette coque pose plus haut sur __aside — de même
   spécificité, mais écrit avant — rognerait le haut de la carte.

   @see 2026/css/components/layout.css, .pm-home__aside */
@media (max-width: 1279px) {
  .pm-article-featured .pm-article-page__authors {
    padding: var(--pm-space-xs);
    background-color: var(--pm-color-surface);
  }

  .pm-article-page__authors .pm-titre-filet {
    display: none;
  }
}

/* --- Bandeau publicitaire ------------------------------------------------- */

/* Le bandeau touche le sous-bandeau : dans la maquette, l'image démarre à
   y=300, exactement là où le sous-bandeau s'arrête. Seul l'espace en dessous
   existe — 48px avant le contenu. */
.pm-article-pub {
  display: flex;
  justify-content: center;
}

.pm-article-pub img {
  max-width: 100%;
  height: auto;
}