/* ==========================================================================
   Gabarit de page et grille de la home

   La maquette desktop pose un contenu de 1632px dans une page de 1728, soit
   48px de gouttière. En mobile, la gouttière tombe à 18px.

   La grille à trois colonnes ne sert qu'en desktop. En dessous de 1024px, tout
   retombe en une colonne — et c'est là qu'est la subtilité de cette page :
   la maquette mobile n'empile pas les trois colonnes, elle ENTRELACE les blocs
   latéraux dans le fil :

       article 1 → article 2 → « notre sélection » → article 3
       → « en kiosque » → article 4 → article 5

   L'ordre du DOM suit donc l'ordre mobile, et c'est la grille qui, en desktop,
   déporte les deux blocs latéraux dans les colonnes 1 et 3. Aucun markup n'est
   dupliqué : indispensable puisque Drupal ne rendra ce fil qu'une fois.
   ========================================================================== */

.pm-wrapper {
  max-width: calc(1632px + 2 * var(--pm-gutter));
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
}

.pm-main {
  padding-block: var(--pm-space-l);
}

/* Aucun `row-gap` : le rythme vertical du fil appartient aux articles, qui
   portent chacun 24px de `padding-bottom`. Un gap s'y ajoutait et doublait tous
   les écarts en mobile — 48px entre le filet d'un article et le surtitre du
   suivant, 72px entre le dernier chapô et le bloc latéral qui s'intercale. Le
   desktop remettait déjà `row-gap: 0` pour cette raison ; la règle vaut aux deux
   largeurs, elle n'a donc plus à être répétée dans la requête média. */
.pm-home {
  display: grid;
}

/* Un élément de grille ne descend pas sous sa largeur de contenu minimale tant
   qu'il garde `min-width: auto`. Une seule création publicitaire au format pavé
   — 336px de large, une taille IAB — suffisait donc à élargir la colonne du fil
   au-delà de la fenêtre : sous 400px la page prenait un défilement horizontal,
   et l'image des articles, qui va volontairement d'un bord à l'autre, débordait
   d'autant.

   Le plafond posé sur l'image de la création (override.css) la fait rétrécir ;
   ce `min-width` est ce qui autorise la colonne à suivre. Les deux sont
   nécessaires. */
.pm-home > * {
  min-width: 0;
}

/* Le bouton « Voir plus » qui ferme le fil. Enfant direct de la grille, il
   était étiré sur toute la largeur de sa colonne et venait toucher les deux
   marges : un élément de grille s'étire par défaut. Le gabarit annonçait déjà
   cette classe comme ce qui l'en empêche, la règle manquait.

   `justify-self` et non une largeur : le bouton reprend sa largeur naturelle,
   celle de son libellé — c'est ainsi que la maquette le dessine, et c'est aussi
   pourquoi il ne porte pas .pm-btn--block, le modificateur réservé aux boutons
   pleine largeur.

   @see templates/form/container--more-link--articles--block-2.html.twig */
.pm-home__more {
  justify-self: center;
}

/* Le contenu de la colonne « Notre sélection », à l'intérieur de sa coque.
   Même partage que pour « En kiosque » et son .pm-kiosk-bloc : la coque
   (.pm-home__aside) porte le fond, la marge intérieure et le filet ; le bloc ne
   porte que le rythme de ses propres enfants — titre puis cartes.

   Le gabarit de la vue posait .pm-home__aside sur ce bloc, en plus de la coque
   qui l'enveloppe : la marge intérieure de 24px s'appliquait deux fois, et la
   marge négative du bloc le sortait de sa colonne.

   @see templates/views/views-view--articles--homepage-promotion.html.twig
   @see 2026/css/components/kiosk.css, .pm-kiosk-bloc */
.pm-home__selection {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* Le bloc latéral est une section à part entière en mobile : fond blanc,
   marge intérieure, comme les frames « Col Gauche » et « Frame 122 ». */
/* En mobile, le bloc latéral est une carte blanche posée sur le fond de page
   (#F7F5F3). En desktop il n'a aucun fond et se fond dans la page — c'est le
   filet vertical qui le sépare du fil. */
.pm-home__aside {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
  padding: var(--pm-space-l) var(--pm-gutter);
  margin-inline: calc(var(--pm-gutter) * -1);
  background-color: var(--pm-color-surface);

  /* Le seul écart vertical que la grille ne peut pas déduire du fil. Les
     articles se séparent du suivant par leur propre `padding-bottom` ; le bloc
     latéral, lui, n'est suivi de rien qui en porte un — un article commence par
     son surtitre, sans marge haute. Sans cette marge, le surtitre de l'article
     suivant se colle au bord du bloc blanc.

     Elle vaut 24 comme partout ailleurs dans le fil, et s'ajoute aux 24 de
     marge intérieure du bloc : 24 de blanc sous la carte, puis 24 de fond de
     page avant le surtitre. */
  margin-block-end: var(--pm-space-l);
}

/* Seuil calculé plutôt que choisi : en dessous de 1280, une fois retirés les
   deux colonnes de 348 et les 96 de marge de page, la colonne de lecture
   tomberait sous 440px. Tout s'empile alors dans l'ordre du mobile. */
@media (min-width: 1280px) {
  .pm-home {
    /* 348 / 936 / 348 = 1632, les colonnes latérales à leur largeur nominale et
       seule celle du milieu absorbant la variation.

       Elles étaient exprimées en `fr` pour rester fluides. C'était faux en
       dessous de 1300 : « En kiosque » a une largeur minimale de contenu de
       281px et refuse de descendre plus bas, tandis que la colonne de gauche
       continuait de rétrécir. La répartition cessait d'être symétrique et le
       fil dérivait — 83px hors du centre de la page à 1024.
       `tools/checks/centrage.js` garde ce cas. */
    grid-template-columns: 348px minmax(0, 936px) 348px;
    justify-content: center;
  }

  /* Tout le fil occupe la colonne centrale, dans l'ordre du DOM. */
  .pm-home > * {
    grid-column: 2;
  }

  /* Les deux blocs latéraux sont sortis du fil et calés en haut de leur
     colonne. Le `span 100` mérite une explication : il leur faut couvrir
     toutes les lignes engendrées par le fil, dont le nombre est inconnu
     (Drupal en produira autant qu'il y a d'articles). `1 / -1` ne marcherait
     pas — la grille n'a aucune ligne explicite, et -1 s'y résoudrait à 1.
     Les lignes en trop sont vides, donc de hauteur nulle. */
  .pm-home__aside {
    grid-row: 1 / span 100;
    padding: 0;
    margin: 0;
    background-color: transparent;

    /* Pas de `align-self: start` : la boîte doit s'étirer sur toute la hauteur
       de la grille, sinon le filet vertical — qui est une ombre interne —
       s'arrête avec le contenu de l'aside. Dans la maquette, « Col Gauche »
       fait 2111px de haut, soit toute la hauteur du bloc à trois colonnes.
       Le contenu reste calé en haut : c'est un conteneur flex en colonne. */
  }

  .pm-home__aside--start {
    grid-column: 1;
    padding-right: var(--pm-space-xl);
    box-shadow: inset calc(var(--pm-border-width) * -1) 0 0 var(--pm-color-ink);
  }

  .pm-home__aside--end {
    grid-column: 3;
    padding-left: var(--pm-space-xl);
    box-shadow: inset var(--pm-border-width) 0 0 var(--pm-color-ink);
  }
}