/* ==========================================================================
   buttons.css — Boutons canoniques Erosophia (Phase 2, chantier A)
   --------------------------------------------------------------------------
   OPT-IN : ce fichier ne style QUE les classes .btn-u / .btn-u--*.
   Rien de l'existant ne change tant que tu n'appliques pas ces classes.
   Adopte-les page par page, en vérifiant le rendu au passage.

   Le style canonique reprend le bouton le plus abouti du site (toeic.css) :
   forme pill, bordure 2px de la couleur de marque, hover qui inverse les
   couleurs (fond/texte) avec une bordure visible. Style plat : pas de halo
   ni de mouvement.
   Toutes les valeurs passent par les tokens (tokens.css) pour rester
   cohérentes avec le reste du design system.

   Préfixe « -u » = unifié, pour ne JAMAIS entrer en collision avec les
   classes existantes (.btn, .cta-button, .subscribe-btn, etc.).

   Variantes :
     .btn-u                bouton de base (à combiner avec une variante)
     .btn-u--primary       plein, dégradé de marque  (action principale)
     .btn-u--secondary     contour, fond transparent (action secondaire)
     .btn-u--ghost         discret, sans fond ni bordure forte
     .btn-u--danger        rouge (suppression, déconnexion)
   Modificateurs :
     .btn-u--sm / .btn-u--lg   taille
     .btn-u--block             pleine largeur
   ========================================================================== */


/* ───── BASE ─────────────────────────────────────────────────────────────
   Commune à toutes les variantes : géométrie, typo, transition, focus.
   La couleur est posée par les variantes ci-dessous. */
.btn-u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .5rem);
  padding: .7rem 1.75rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  width: fit-content;
  border: 2px solid transparent;
  border-radius: var(--radius-pill, 999px);
  /* Confine le fond (dégradé compris) à l'intérieur du padding, sans déborder
     sous la bordure transparente : évite les fins traits verticaux aux bords. */
  background-clip: padding-box;
  transition:
    background-color var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    color            var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    border-color     var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    box-shadow       var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1)),
    transform        var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

/* Focus clavier : déjà couvert globalement par polish.css (:focus-visible).
   On ne le redéfinit pas ici pour éviter les doublons. */

.btn-u:disabled,
.btn-u[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


/* ───── PRIMARY — action principale ──────────────────────────────────────
   Au repos : dégradé de marque plein, texte blanc, aucune ombre.
   Au survol : inversion → fond blanc, texte bleu, bordure bleue visible.
   Bouton plat : pas de halo, pas de mouvement. Seul le contraste s'inverse
   en douceur via la transition de la base. */
.btn-u--primary {
  background: var(--grad-brand, linear-gradient(135deg, #1f7cff 0%, #0052cc 100%));
  background-clip: padding-box;
  border-color: transparent;
  color: var(--on-dark, #fff);
  box-shadow: none;
}
.btn-u--primary:hover {
  background: var(--surface, #fff);
  border-color: var(--brand-500, #1f7cff);
  color: var(--brand-500, #1f7cff);
}
.btn-u--primary:active {
  background: var(--surface, #fff);
  border-color: var(--brand-700, #0052cc);
  color: var(--brand-700, #0052cc);
}


/* ───── SECONDARY — action secondaire ────────────────────────────────────
   Contour de marque sur fond transparent (le motif le plus abouti de toeic.css).
   Hover : remplissage de marque, texte clair. Plat, sans mouvement. */
.btn-u--secondary {
  background: transparent;
  border-color: var(--brand-500, #1f7cff);
  color: var(--brand-500, #1f7cff);
  box-shadow: none;
}
.btn-u--secondary:hover {
  background: var(--brand-500, #1f7cff);
  color: var(--on-dark, #fff);
}
.btn-u--secondary:active {
  background: var(--brand-700, #0052cc);
  border-color: var(--brand-700, #0052cc);
}


/* ───── GHOST — action discrète ──────────────────────────────────────────
   Sans fond ni bordure marquée. Pour les actions tertiaires (annuler, retour). */
.btn-u--ghost {
  background: transparent;
  border-color: var(--border-subtle, #e8edf5);
  color: var(--text-body, #333);
  box-shadow: none;
}
.btn-u--ghost:hover {
  background: var(--brand-a06, rgba(31, 124, 255, .06));
  border-color: var(--brand-500, #1f7cff);
  color: var(--brand-500, #1f7cff);
}


/* ───── NEUTRAL — action secondaire neutre (renommer, imprimer…) ──────────
   Suit la même constante que les variantes pleines : fond plein gris au repos,
   texte foncé ; au survol, inversion → fond blanc, texte/bordure gris.
   Plat, sans halo ni mouvement. */
.btn-u--neutral {
  background: #e2e8f0;
  border-color: transparent;
  color: var(--text-body, #334155);
  box-shadow: none;
}
.btn-u--neutral:hover {
  background: var(--surface, #fff);
  border-color: #cbd5e1;
  color: var(--text-strong, #0a0025);
}
.btn-u--neutral:active {
  background: var(--surface, #fff);
  border-color: #94a3b8;
  color: var(--text-strong, #0a0025);
}


/* ───── DANGER — suppression / déconnexion ───────────────────────────────
   Rouge plein au repos. Hover : inversion → fond blanc, texte/bordure rouges.
   Plat, sans halo ni mouvement. Couleur en dur (pas de token danger). */
.btn-u--danger {
  background: #dc3545;
  border-color: transparent;
  color: var(--on-dark, #fff);
  box-shadow: none;
}
.btn-u--danger:hover {
  background: var(--surface, #fff);
  border-color: #dc3545;
  color: #dc3545;
}
.btn-u--danger:active {
  background: var(--surface, #fff);
  border-color: #c82333;
  color: #c82333;
}


/* ───── SUCCESS — confirmation / réactivation ────────────────────────────
   Vert plein au repos. Hover : inversion → fond blanc, texte/bordure verts.
   Plat, sans halo ni mouvement. Vert aligné sur le projet (#28a745). */
.btn-u--success {
  background: #28a745;
  border-color: transparent;
  color: var(--on-dark, #fff);
  box-shadow: none;
}
.btn-u--success:hover {
  background: var(--surface, #fff);
  border-color: #28a745;
  color: #1e7e34;
}
.btn-u--success:active {
  background: var(--surface, #fff);
  border-color: #1e7e34;
  color: #1e7e34;
}


/* ───── WARNING — action corrective (paiement, avertissement) ────────────
   Ambre plein, texte NOIR au repos (sur bandeau jaune type grace period).
   Hover : fond blanc, bordure ambre, texte qui RESTE noir.
   Plat, sans halo ni mouvement. Ambre aligné sur le projet (#ffc107). */
.btn-u--warning {
  background: #ffc107;
  border-color: transparent;
  color: #000;
  box-shadow: none;
}
.btn-u--warning:hover {
  background: var(--surface, #fff);
  border-color: #e0a800;
  color: #000;
}
.btn-u--warning:active {
  background: var(--surface, #fff);
  border-color: #856404;
  color: #000;
}

/* ───── ON-DARK — boutons posés sur fond sombre ──────────────────────────
   Variante pour les sections à fond foncé (hero, bandeaux CTA sombres).
   À combiner avec --primary ou --secondary :

     .btn-u--primary.btn-u--on-dark    → hérite du primary (dégradé au repos,
                                          inversion blanc/bleu au survol), sans
                                          ombre. Rien à surcharger ici.
     .btn-u--secondary.btn-u--on-dark  → contour + texte BLANCS (au lieu du
                                          bleu), remplissage clair au survol.

   Reprend le comportement de l'ancien .cta-button--secondary du hero. */
.btn-u--secondary.btn-u--on-dark {
  background: transparent;
  border-color: var(--on-dark-88, rgba(255, 255, 255, .88));
  color: var(--on-dark, #fff);
  box-shadow: none;
}
.btn-u--secondary.btn-u--on-dark:hover {
  background: var(--surface, #fff);
  border-color: var(--surface, #fff);
  color: #120A3B;
}


/* ───── MODIFICATEURS DE TAILLE ──────────────────────────────────────────*/
.btn-u--sm {
  padding: .45rem 1.1rem;
  font-size: var(--text-sm, .9rem);
}
.btn-u--lg {
  padding: .95rem 2.4rem;
  font-size: var(--text-lg, 1.15rem);
}


/* ───── PLEINE LARGEUR ───────────────────────────────────────────────────*/
.btn-u--block {
  width: 100%;
}


/* ───── FLÈCHE ANIMÉE ─────────────────────────────────────────────────────
   Pour un bouton contenant un <svg> de flèche : celle-ci glisse vers la droite
   au survol. À combiner avec n'importe quelle variante. */
.btn-u--with-arrow svg {
  transition: transform var(--duration, .25s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}
.btn-u--with-arrow:hover svg {
  transform: translateX(4px);
}