/* ===========================================================================
   BOUTONS — quatre formes, et une seule règle qui compte
   ===========================================================================

   Principal, secondaire, destructeur, désactivé.

   LA RÈGLE : un écran ne porte qu'UN SEUL bouton principal. S'il y en a deux,
   aucun ne l'est. Le principal dit ce que la page attend ; tout le reste est
   secondaire.

   Contrastes mesurés :
     • blanc sur le bleu de lien (principal)      5,42:1
     • bleu de lien sur fond de page (secondaire) 5,42:1
     • blanc sur le bordeaux (destructeur)        9,95:1

   Le bouton désactivé est volontairement sous le seuil : c'est le signal. Il
   n'est pas là pour être lu, il est là pour montrer qu'il ne se clique pas.
   Un bouton désactivé doit TOUJOURS s'accompagner d'un texte disant pourquoi —
   sans quoi l'utilisateur reste devant un bouton mort sans explication.

   Voir `boutons.html`.
   =========================================================================== */

.iav-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iav-espace-petit, 8px);
  padding: var(--iav-espace-petit, 8px) var(--iav-espace-grand, 16px);
  border: var(--iav-trait, 1px) solid transparent;
  border-radius: var(--iav-rayon, 8px);
  font-family: inherit;
  font-size: var(--iav-taille-texte, 14px);
  font-weight: var(--iav-graisse-semi, 600);
  line-height: var(--iav-interligne, 1.5);
  text-decoration: none;
  cursor: pointer;
  /* Une cible d'au moins 40 px de haut : en dessous, on la rate au doigt. */
  min-height: 40px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Un <a> déguisé en bouton se souligne au survol si on ne l'en empêche pas :
   le soulignement traverserait le fond plein et salirait le bouton. */
.iav-bouton:hover, .iav-bouton:focus { text-decoration: none; }

/* --- Principal — un seul par écran ----------------------------------------- */
.iav-bouton-principal {
  background: var(--iav-bleu-lien, #2B6CB0);
  border-color: var(--iav-bleu-lien, #2B6CB0);
  /* `--iav-texte-sur-aplat` et NON `--iav-texte-inverse` : cet aplat change de
     clarté avec le thème. En sombre, le bleu de lien devient clair, et du blanc
     dessus tombe à 2,21:1. Mesuré, pas supposé. */
  color: var(--iav-texte-sur-aplat, #FFFFFF);
}
.iav-bouton-principal:hover:not(:disabled),
.iav-bouton-principal:focus:not(:disabled) {
  background: var(--iav-bleu-marque, #215387);
  border-color: var(--iav-bleu-marque, #215387);
}

/* --- Secondaire — tout le reste -------------------------------------------- */
.iav-bouton-secondaire {
  background: var(--iav-fond-page, #FFFFFF);
  border-color: var(--iav-bordure, #E3E9F0);
  color: var(--iav-bleu-lien, #2B6CB0);
}
.iav-bouton-secondaire:hover:not(:disabled),
.iav-bouton-secondaire:focus:not(:disabled) {
  background: var(--iav-fond-survol, #EDF3FA);
  border-color: var(--iav-bleu-lien, #2B6CB0);
}

/* --- Destructeur — ce qui ne se défait pas ---------------------------------
   Il porte le BORDEAUX d'avertissement, jamais l'accent rouge de la maison :
   celui-ci ne porte que « depuis 2008 », et l'employer ici confondrait une
   signature avec un danger.

   Un bouton destructeur ne doit jamais être le bouton principal de l'écran, et
   il demande une confirmation. Un geste irréversible ne se déclenche pas sur
   un clic de trop.
   --------------------------------------------------------------------------- */
.iav-bouton-destructeur {
  background: var(--iav-avertissement-texte, #7B241C);
  border-color: var(--iav-avertissement-texte, #7B241C);
  /* Même raison que le bouton principal : en sombre, ce bordeaux devient un
     rose clair, et le blanc y donne 1,94:1. */
  color: var(--iav-texte-sur-aplat, #FFFFFF);
}
.iav-bouton-destructeur:hover:not(:disabled),
.iav-bouton-destructeur:focus:not(:disabled) {
  /* Assombri en restant dans la teinte : un filtre plutôt qu'une seconde
     couleur à déclarer, à mesurer et à maintenir. */
  filter: brightness(0.88);
}

/* --- Effacé — une action de service, discrète mais atteignable -------------- */
.iav-bouton-efface {
  background: transparent;
  border-color: transparent;
  color: var(--iav-texte-secondaire, #5A6B7F);
}
.iav-bouton-efface:hover:not(:disabled),
.iav-bouton-efface:focus:not(:disabled) {
  background: var(--iav-fond-bloc, #F7F9FC);
  color: var(--iav-texte-principal, #1B2733);
}

/* --- Désactivé -------------------------------------------------------------
   Deux sélecteurs, et les deux sont nécessaires : `:disabled` ne s'applique
   qu'aux <button> et aux champs. Un <a> ne se désactive pas — d'où la classe,
   qui doit alors s'accompagner de `aria-disabled="true"` et du retrait de
   `href`, sinon le lien reste cliquable et navigable au clavier.
   --------------------------------------------------------------------------- */
.iav-bouton:disabled,
.iav-bouton-desactive {
  background: var(--iav-fond-desactive, #EDF2F7);
  border-color: var(--iav-bordure, #E3E9F0);
  color: var(--iav-texte-desactive, #9AA7B5);
  cursor: not-allowed;
  /* Pas d'`opacity` : elle délave aussi le texte des boutons posés dessus et
     rend le résultat imprévisible sur un fond de couleur. */
  filter: none;
  pointer-events: none;
}

/* --- Variantes de taille --------------------------------------------------- */
.iav-bouton-petit {
  min-height: 32px;
  padding: var(--iav-espace-minuscule, 4px) var(--iav-espace-moyen, 12px);
  font-size: var(--iav-taille-secondaire, 12px);
}
.iav-bouton-large {
  /* Pleine largeur : sur un formulaire de connexion, sur un téléphone. */
  width: 100%;
}

/* --- Un groupe de boutons --------------------------------------------------
   L'ordre du BALISAGE est celui de la lecture et du clavier ; l'ordre VISUEL
   met le principal à droite, là où l'œil finit sa phrase. `row-reverse` fait
   les deux à la fois : le principal reste premier dans le code, donc premier
   au clavier, et s'affiche quand même à droite.
   --------------------------------------------------------------------------- */
.iav-boutons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--iav-espace-petit, 8px);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  /* En étroit, les boutons s'empilent et prennent toute la largeur : viser un
     bouton de 100 px au pouce sur un téléphone ne marche pas. */
  .iav-boutons { flex-direction: column-reverse; }
  .iav-boutons .iav-bouton { width: 100%; }
}