/* ============================================================
   ARGANE — Boutons (composant partagé)
   ------------------------------------------------------------
   Source UNIQUE du système de boutons CTA pour TOUTES les pages.
   Port fidèle de components/argane-buttons.css (maquette) pour
   .btn / .btn-primary / .btn-secondary / .btn-tertiary — mêmes
   valeurs (rayon, tailles, couleurs). .btn-dark et .btn-ghost sont
   des ajouts du thème, sans équivalent dans la maquette : .btn-dark
   reprend le style plein Forge (alias pratique là où le gabarit ne
   peut pas dépendre du fond), .btn-ghost un contour très discret.

   .btn                base
   .btn-primary        plein Braise (CTA principal)
   .btn-secondary      plein Forge (CTA sur fond clair)
   .btn-tertiary       contour adaptatif (CTA tertiaire, sur fond sombre par défaut)
   .btn-dark           plein Forge (alias, ajout thème)
   .btn-ghost          transparent + bordure discrète (ajout thème)
   Modifiers : .btn-lg (taille hero/footer), .btn-sm (compacte),
               .btn-block (pleine largeur), .on-light (sur fond clair)
   ============================================================ */
.btn{
  --btn-radius:8px;
  --btn-pad-y:15px;
  --btn-pad-x:26px;
  --btn-font:12px;
  --btn-tracking:0.06em;
  --btn-gap:8px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-family:var(--ff-mono, "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size:var(--btn-font);
  font-weight:500;
  line-height:1;
  letter-spacing:var(--btn-tracking);
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--btn-radius);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  background:transparent;
  color:inherit;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .12s ease,
    box-shadow .2s ease;
  position:relative;
}
.btn:focus-visible{outline:2px solid var(--braise); outline-offset:3px;}
.btn:active{transform:translateY(0) scale(0.985);}
.btn .arrow{
  display:inline-block;
  width:20px; height:20px;
  transition:transform .25s ease;
}
.btn:hover .arrow{transform:translateX(5px);}
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:0.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---- Primary — plein Braise ---- */
.btn-primary{
  background:var(--braise);
  color:#fff;
  border-color:var(--braise);
  box-shadow:0 1px 2px rgba(8,31,44,0.16);
}
.btn-primary:hover{
  background:#d81f2f;
  border-color:#d81f2f;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(8,31,44,0.20);
}

/* ---- Secondary — plein Forge (CTA sur fond clair) ---- */
.btn-secondary{
  background:var(--forge);
  color:#fff;
  border-color:var(--forge);
  box-shadow:0 1px 2px rgba(8,31,44,0.16);
}
.btn-secondary:hover{
  background:#0F2A3A;
  border-color:#0F2A3A;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(8,31,44,0.20);
}

/* ---- Tertiary — contour, adaptatif sur fond clair ---- */
.btn-tertiary{
  background:transparent;
  color:var(--paper);
  border-color:rgba(250,250,250,0.38);
  box-shadow:none;
}
.btn-tertiary:hover{
  background:rgba(250,250,250,0.07);
  border-color:var(--paper);
  transform:translateY(-1px);
}
.on-light .btn-tertiary,
.btn-tertiary.on-light{color:var(--forge); border-color:rgba(8,31,44,0.24);}
.on-light .btn-tertiary:hover,
.btn-tertiary.on-light:hover{background:rgba(8,31,44,0.05); border-color:var(--forge);}

/* ---- Ghost — pleinement transparent, ajout thème sans équivalent maquette ---- */
.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(250,250,250,0.15);
}
.btn-ghost:hover{
  border-color:rgba(250,250,250,0.45);
  background:rgba(250,250,250,0.04);
}

/* ---- Dark — plein Forge, alias de .btn-secondary (ajout thème) ---- */
.btn-dark{
  background:var(--forge);
  color:var(--paper);
  border-color:var(--forge);
  box-shadow:0 1px 2px rgba(8,31,44,0.16);
}
.btn-dark:hover{
  background:#0F2A3A;
  border-color:#0F2A3A;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(8,31,44,0.20);
}

/* ---- Tailles — trois crans : le texte ET la boîte varient ensemble ---- */
.btn-lg{--btn-font:13px; --btn-tracking:0.05em; --btn-gap:10px; --btn-pad-y:17px; --btn-pad-x:30px;}
.btn-sm{--btn-font:11px; --btn-tracking:0.08em; --btn-gap:7px; --btn-pad-y:11px; --btn-pad-x:18px;}
/* L'icône suit le cran de taille : sinon un chevron de 20px impose
   la hauteur du bouton et annule le format compact. */
.btn-sm .arrow,.btn-sm .ico{width:16px; height:16px;}
.btn-block{display:flex; width:100%;}

/* ---- Mobile : un libellé long passe à la ligne au lieu de déborder ---- */
@media (max-width:640px){
  .btn{white-space:normal; text-align:center; max-width:100%; line-height:1.25;}
  .btn .arrow,.btn .ico{flex:0 0 auto;}
  .btn-lg{--btn-pad-x:22px;}
}