/* ==========================================================================
   Marges — classes utilitaires

   Pose une marge verticale sur un élément depuis le balisage, sans écrire de
   CSS de composant. Les valeurs sont celles de l'échelle --pm-space-* de
   tokens.css : le balisage ne nomme jamais de pixels.

     .pm-mt-<taille>   margin-block-start (haut)
     .pm-mb-<taille>   margin-block-end   (bas)
     .pm-my-<taille>   les deux

   Tailles : 0, 3xs (6px), 2xs (10px), xs (12px), s (18px), m (20px),
   l (24px), xl (48px).

   Portée — le suffixe restreint la marge à une plage de largeurs :

     .pm-mb-l           24px à toutes les largeurs
     .pm-mb-l-mobile    24px sous 1024px, 0 au-delà
     .pm-mb-xl-desktop  0 sous 1024px, 48px au-delà

   Les deux suffixes se combinent pour deux valeurs différentes de part et
   d'autre du point de rupture :

     <div class="pm-mb-s-mobile pm-mb-xl-desktop">

   Aucune media query max-width ici : les classes -mobile portent leur valeur
   à la base et sont remises à 0 dans le seul @media (min-width: 1024px) du
   fichier, comme partout ailleurs dans le projet. Ce bloc contient aussi les
   valeurs -desktop, et les déclare APRÈS les remises à zéro — les deux séries
   pesant (0,1,0), c'est l'ordre du source qui départage la combinaison
   ci-dessus.

   Ces classes valent (0,1,0) et ne portent pas !important, contrairement aux
   utilitaires de Bootstrap encore chargés par style.min.css. Elles servent à
   espacer des blocs dans les templates Twig, là où rien d'autre ne réclame la
   marge ; elles ne sont pas faites pour forcer la main à un composant, dont
   les sélecteurs sont plus spécifiques. Une marge qui ne « prend » pas est le
   signe que le réglage appartient au composant.

   L'échelle s'arrête à 48px parce que c'est le plus grand espacement de la
   maquette. Un écart plus large se règle en ajoutant un token à tokens.css,
   jamais une valeur en dur ici.

   @see tokens.css, section « Espacements »
   ========================================================================== */

/* ---------- Toutes largeurs ---------------------------------------------- */

.pm-mt-0   { margin-block-start: 0; }
.pm-mt-3xs { margin-block-start: var(--pm-space-3xs); }
.pm-mt-2xs { margin-block-start: var(--pm-space-2xs); }
.pm-mt-xs  { margin-block-start: var(--pm-space-xs); }
.pm-mt-s   { margin-block-start: var(--pm-space-s); }
.pm-mt-m   { margin-block-start: var(--pm-space-m); }
.pm-mt-l   { margin-block-start: var(--pm-space-l); }
.pm-mt-xl  { margin-block-start: var(--pm-space-xl); }

.pm-mb-0   { margin-block-end: 0; }
.pm-mb-3xs { margin-block-end: var(--pm-space-3xs); }
.pm-mb-2xs { margin-block-end: var(--pm-space-2xs); }
.pm-mb-xs  { margin-block-end: var(--pm-space-xs); }
.pm-mb-s   { margin-block-end: var(--pm-space-s); }
.pm-mb-m   { margin-block-end: var(--pm-space-m); }
.pm-mb-l   { margin-block-end: var(--pm-space-l); }
.pm-mb-xl  { margin-block-end: var(--pm-space-xl); }

.pm-my-0   { margin-block: 0; }
.pm-my-3xs { margin-block: var(--pm-space-3xs); }
.pm-my-2xs { margin-block: var(--pm-space-2xs); }
.pm-my-xs  { margin-block: var(--pm-space-xs); }
.pm-my-s   { margin-block: var(--pm-space-s); }
.pm-my-m   { margin-block: var(--pm-space-m); }
.pm-my-l   { margin-block: var(--pm-space-l); }
.pm-my-xl  { margin-block: var(--pm-space-xl); }

/* ---------- Mobile seulement ---------------------------------------------
   La valeur est posée ici, hors media query, et annulée à 1024px plus bas. */

.pm-mt-0-mobile   { margin-block-start: 0; }
.pm-mt-3xs-mobile { margin-block-start: var(--pm-space-3xs); }
.pm-mt-2xs-mobile { margin-block-start: var(--pm-space-2xs); }
.pm-mt-xs-mobile  { margin-block-start: var(--pm-space-xs); }
.pm-mt-s-mobile   { margin-block-start: var(--pm-space-s); }
.pm-mt-m-mobile   { margin-block-start: var(--pm-space-m); }
.pm-mt-l-mobile   { margin-block-start: var(--pm-space-l); }
.pm-mt-xl-mobile  { margin-block-start: var(--pm-space-xl); }

.pm-mb-0-mobile   { margin-block-end: 0; }
.pm-mb-3xs-mobile { margin-block-end: var(--pm-space-3xs); }
.pm-mb-2xs-mobile { margin-block-end: var(--pm-space-2xs); }
.pm-mb-xs-mobile  { margin-block-end: var(--pm-space-xs); }
.pm-mb-s-mobile   { margin-block-end: var(--pm-space-s); }
.pm-mb-m-mobile   { margin-block-end: var(--pm-space-m); }
.pm-mb-l-mobile   { margin-block-end: var(--pm-space-l); }
.pm-mb-xl-mobile  { margin-block-end: var(--pm-space-xl); }

.pm-my-0-mobile   { margin-block: 0; }
.pm-my-3xs-mobile { margin-block: var(--pm-space-3xs); }
.pm-my-2xs-mobile { margin-block: var(--pm-space-2xs); }
.pm-my-xs-mobile  { margin-block: var(--pm-space-xs); }
.pm-my-s-mobile   { margin-block: var(--pm-space-s); }
.pm-my-m-mobile   { margin-block: var(--pm-space-m); }
.pm-my-l-mobile   { margin-block: var(--pm-space-l); }
.pm-my-xl-mobile  { margin-block: var(--pm-space-xl); }

@media (min-width: 1024px) {
  /* Fin de la portée mobile. */

  .pm-mt-0-mobile,
  .pm-mt-3xs-mobile,
  .pm-mt-2xs-mobile,
  .pm-mt-xs-mobile,
  .pm-mt-s-mobile,
  .pm-mt-m-mobile,
  .pm-mt-l-mobile,
  .pm-mt-xl-mobile { margin-block-start: 0; }

  .pm-mb-0-mobile,
  .pm-mb-3xs-mobile,
  .pm-mb-2xs-mobile,
  .pm-mb-xs-mobile,
  .pm-mb-s-mobile,
  .pm-mb-m-mobile,
  .pm-mb-l-mobile,
  .pm-mb-xl-mobile { margin-block-end: 0; }

  .pm-my-0-mobile,
  .pm-my-3xs-mobile,
  .pm-my-2xs-mobile,
  .pm-my-xs-mobile,
  .pm-my-s-mobile,
  .pm-my-m-mobile,
  .pm-my-l-mobile,
  .pm-my-xl-mobile { margin-block: 0; }

  /* ---------- Desktop seulement ------------------------------------------
     Déclarées après les remises à zéro : à spécificité égale, c'est ce qui
     rend la combinaison « -mobile + -desktop » lisible dans cet ordre. */

  .pm-mt-0-desktop   { margin-block-start: 0; }
  .pm-mt-3xs-desktop { margin-block-start: var(--pm-space-3xs); }
  .pm-mt-2xs-desktop { margin-block-start: var(--pm-space-2xs); }
  .pm-mt-xs-desktop  { margin-block-start: var(--pm-space-xs); }
  .pm-mt-s-desktop   { margin-block-start: var(--pm-space-s); }
  .pm-mt-m-desktop   { margin-block-start: var(--pm-space-m); }
  .pm-mt-l-desktop   { margin-block-start: var(--pm-space-l); }
  .pm-mt-xl-desktop  { margin-block-start: var(--pm-space-xl); }

  .pm-mb-0-desktop   { margin-block-end: 0; }
  .pm-mb-3xs-desktop { margin-block-end: var(--pm-space-3xs); }
  .pm-mb-2xs-desktop { margin-block-end: var(--pm-space-2xs); }
  .pm-mb-xs-desktop  { margin-block-end: var(--pm-space-xs); }
  .pm-mb-s-desktop   { margin-block-end: var(--pm-space-s); }
  .pm-mb-m-desktop   { margin-block-end: var(--pm-space-m); }
  .pm-mb-l-desktop   { margin-block-end: var(--pm-space-l); }
  .pm-mb-xl-desktop  { margin-block-end: var(--pm-space-xl); }

  .pm-my-0-desktop   { margin-block: 0; }
  .pm-my-3xs-desktop { margin-block: var(--pm-space-3xs); }
  .pm-my-2xs-desktop { margin-block: var(--pm-space-2xs); }
  .pm-my-xs-desktop  { margin-block: var(--pm-space-xs); }
  .pm-my-s-desktop   { margin-block: var(--pm-space-s); }
  .pm-my-m-desktop   { margin-block: var(--pm-space-m); }
  .pm-my-l-desktop   { margin-block: var(--pm-space-l); }
  .pm-my-xl-desktop  { margin-block: var(--pm-space-xl); }
}