/* ==========================================================================
   .pm-btn — bouton / lien d'action
   Trois variantes dans la maquette : jaune plein, contour, encre pleine.
   Toutes partagent padding 12/24, gap 10 et rayon 4.

   La classe rend le même bouton quel que soit l'élément qui la porte — <a>,
   <button> ou <input type="submit"> — et sans dépendre d'un reset extérieur.
   ========================================================================== */

.pm-btn {
  /* Neutralisation de l'élément porteur.
     La classe a longtemps vécu sur des <a> seulement ; elle sert désormais
     aussi aux boutons d'envoi de Drupal (voir _philomag_restyle_submit_button()
     dans philomag.theme), et un <button> arrive avec un contour en relief, un
     fond ButtonFace et un curseur de flèche que le navigateur lui donne seul.

     Ce reset ne peut pas être délégué à celui de base.css : ce dernier est
     volontairement scopé à :where(.pm-header, .pm-footer, .pm-menu, .pm-2026),
     et un formulaire rendu dans une région historique tombe en dehors. La
     classe doit donc suffire à elle seule, où qu'elle soit posée — c'est la
     règle que suivent déjà les autres composants d'interface.

     `appearance` est préfixé pour Safari antérieur à 15.4, qui ignore la
     propriété non préfixée sur les contrôles de formulaire.

     `background` est remis à zéro ici et redonné par les variantes, déclarées
     plus bas : à spécificité égale, c'est l'ordre du source qui tranche. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-2xs);
  min-height: var(--pm-control-height);
  padding: var(--pm-space-xs) var(--pm-space-l);
  border-radius: var(--pm-radius-m);
  color: var(--pm-color-ink);
  font-family: var(--pm-text-interface-family);
  font-size: var(--pm-text-interface-size);
  font-weight: var(--pm-text-interface-weight);
  line-height: var(--pm-text-interface-height);
  letter-spacing: var(--pm-text-interface-spacing);
  text-align: center;
  transition:
    background-color var(--pm-duration) var(--pm-easing),
    box-shadow var(--pm-duration) var(--pm-easing),
    color var(--pm-duration) var(--pm-easing);
}


/* --- Variantes ----------------------------------------------------------- */

.pm-btn--yellow {
  background-color: var(--pm-color-yellow);
}

.pm-btn--outline {
  box-shadow: var(--pm-stroke);
}


.pm-btn--solid {
  background-color: var(--pm-color-ink);
  color: var(--pm-color-on-dark);
}

/* Occupe toute la largeur : c'est le cas de tous les boutons du panneau menu. */
.pm-btn--block {
  display: flex;
  width: 100%;
}

/* Le « S'abonner » du header desktop fait 43px de haut, contre 48px pour les
   boutons du panneau menu — hauteur fixée dans la maquette, pas déduite.
   Il faut `height` et non `min-height` : avec un padding de 12 et une icône de
   24, le contenu réclame 48px, et un min-height ne peut pas l'en empêcher.
   Le padding vertical passe donc à 0, l'icône restant centrée par le flex. */
.pm-btn--compact {
  height: 43px;
  min-height: 0;
  padding-block: 0;
}

.pm-btn--extra-compact {
  height: 35px;
  min-height: 0;
  padding-block: 0;
}

/* Hauteur libre : le bouton cesse d'être tenu par les 48px de
   --pm-control-height et se réduit à son contenu plus son padding.
   À distinguer de --compact, qui impose une autre hauteur fixe (43px) : ici
   aucune hauteur n'est imposée du tout.
   Déclarée après .pm-btn, elle l'emporte à spécificité égale. */
.pm-btn--auto {
  min-height: 0;
}

/* --- Survol ---------------------------------------------------------------
   Valeurs du jeu de variantes Figma « Bouton » (2068:4223), qui décline les
   trois types en repos / survol.

   Deux choses sont communes aux trois types, d'où cette règle partagée :
     — un contour bleu de 1px, à l'intérieur ;
     — une ombre dure bleue décalée de 3px vers le bas à droite.

   Ces deux couches donnent l'impression d'un trait plus épais à droite et en
   bas. Il ne s'agit pas d'une bordure asymétrique : ce serait impossible à
   obtenir proprement avec un rayon de 4px.

   L'ordre compte : le contour interne est déclaré avant l'ombre externe pour
   que le trait de 1px reste net par-dessus le fond.
   ------------------------------------------------------------------------- */

.pm-btn:hover,
.pm-btn:focus {
  box-shadow: var(--pm-stroke-hover), var(--pm-shadow-hover) !important;
}

/* Ce qui distingue ensuite chaque type. `color` recolore aussi l'icône : les
   icônes sont des masques peints en currentColor (voir base.css). */

.pm-btn--yellow:hover {
  background-color: var(--pm-color-yellow-hover);
  color: var(--pm-color-hover);
}

.pm-btn--outline:hover {
  background-color: var(--pm-color-surface-muted);
  color: var(--pm-color-hover);
}

.pm-btn--solid:hover {
  color: var(--pm-color-on-dark);
}