/* ============================================================
   BOUTONS — les deux voix du système
   Le site en avait CINQ écritures (relevé complément § 8.6 : rayons 4/7/8 px,
   graisses 500/600, bordure simulée en `box-shadow 0 0 0 1px`), et le primaire
   comme le secondaire étaient redéfinis par identifiant de bloc sur CHAQUE page
   (relevé § 7.15 : « des copies, pas un composant »).
   Ici : deux voix, un composant, des états possédés.

   Contrat du gate 1 appliqué :
   - RETIRE : l'ombre portée n'est plus généralisée (17 éléments la portaient sur
     la seule page d'accueil) ; elle est RÉSERVÉE AU CTA.
   - AMÉLIORE : soulèvement au survol (`--lift-btn`).
   - Valeurs gravées : rayon 8 px, padding 16/32, Roboto 18/600, lh 1, bordure
     2 px, inversion de la voix 2 au survol, survol teal foncé.

   Source : da-releve-rapport.md § 3.1, § 3.2 ; complément § 6.6, § 6.7.
   ============================================================ */

.lcdi-btn {
  /* structure commune, relevée */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);      /* 18 px, relevé */
  font-weight: var(--weight-strong);   /* 600 */
  line-height: var(--lh-flat);
  text-align: center;
  text-decoration: none;
  padding: var(--space-4) var(--space-6);   /* 16 / 32, relevé */
  border-radius: var(--radius-m);           /* 8 px, rayon système */
  border: 2px solid transparent;
  cursor: pointer;
  isolation: isolate;
  transition:
    background-color var(--t-soft) var(--ease-brand),
    border-color     var(--t-soft) var(--ease-brand),
    color            var(--t-soft) var(--ease-brand),
    transform        var(--t-soft) var(--ease-brand),
    box-shadow       var(--t-soft) var(--ease-brand);
}

.lcdi-btn:disabled,
.lcdi-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* --- VOIX 1 · le CTA (l'action : adhérer, commander, envoyer) ----------
   « Rejoindre l'association », « Adhérer à l'association », « Découvrir nos
   sponsors », « Envoyer », « Ajouter au panier ».
   Sa couleur ne change JAMAIS, quel que soit le contexte de page.
   Contraste connu : 2,69:1 — voir le bloc PARADE AA de tokens.css. */
.lcdi-btn--cta {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-border);
  box-shadow: var(--shadow-cta);    /* la seule ombre de bouton du système */
}
.lcdi-btn--cta:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-text);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(var(--lift-btn));
}
.lcdi-btn--cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-cta);
}
.lcdi-btn--cta:focus-visible {
  box-shadow: var(--focus-ring), var(--shadow-cta);
}

/* --- VOIX 2 · l'exploration (« Espace adhérent », « Voir les évènements
   passés », « Inscrivez-vous à la Newsletters », « Acheter maintenant »)
   Loi éprouvée : l'action avance, l'exploration recule.
   Relevé : blanc, bordure 2 px accent, texte accent, inversion au survol.
   Correction : le TEXTE passe à l'encre du teal (5,65:1 au lieu de 2,87:1),
   la BORDURE garde le teal d'origine — le rendu voulu ne bouge pas. */
.lcdi-btn--ghost {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
  box-shadow: none;                 /* RETRAIT du gate 1 */
}
.lcdi-btn--ghost:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-bg-hover);
  transform: translateY(var(--lift-btn));
}
.lcdi-btn--ghost:active { transform: translateY(0); }
.lcdi-btn--ghost:focus-visible { box-shadow: var(--focus-ring); }

/* --- VARIANTE DE TAILLE · compacte -------------------------------------
   Absorbe les boutons 4 px / `4px 8px` de l'espace adhérent (« Transmettre »,
   « Modifier ») et le bouton compte du header. Le rayon et la voix ne changent
   pas : seul le gabarit se resserre. */
.lcdi-btn--sm {
  font-size: var(--type-body);
  padding: var(--space-2) var(--space-4);
}

/* --- VARIANTE DE LARGEUR ---------------------------------------------- */
.lcdi-btn--block { display: flex; width: 100%; }

/* --- Icône dans un bouton --------------------------------------------- */
.lcdi-btn svg,
.lcdi-btn .lcdi-btn__icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: currentColor;
}

/* --- Groupe de boutons (héros, fiche produit) -------------------------- */
.lcdi-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.lcdi-btn-group--center { justify-content: center; }

@media (max-width: 767px) {
  .lcdi-btn { font-size: var(--type-body); }   /* relevé : 16 px en mobile ; ici 18 px, aligné sur le corps */
  .lcdi-btn-group { width: 100%; }
  .lcdi-btn-group > .lcdi-btn { flex: 1 1 100%; }
}