/* Arl Luc — Classes composants (préfixe .al-)
   Les composants React s'appuient sur ces classes ; les états hover vivent ici. */

/* ——— Boutons ——— */
.al-btn {
  display: inline-block;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  padding: 17px 36px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-body);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.al-btn:hover { background: var(--al-ink); color: var(--al-ivory); }
.al-btn:active { background: var(--al-night); border-color: var(--al-night); }

.al-btn--solid { background: var(--al-ink); border-color: var(--al-ink); color: var(--al-ivory); }
.al-btn--solid:hover { background: var(--al-night); border-color: var(--al-night); color: var(--al-ivory); }

.al-btn--ivory { border-color: var(--al-ivory); color: var(--al-ivory); }
.al-btn--ivory:hover { background: var(--al-ivory); color: var(--al-ink); }

/* ——— Lien texte ——— */
.al-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--border-line);
  padding-bottom: 5px;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.al-link:hover { color: var(--accent-hover); border-bottom-color: var(--accent); }

/* ——— Label / kicker ——— */
.al-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* ——— Navigation ——— */
.al-nav-link {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.al-nav-link:hover { color: var(--text-heading); }
.al-nav-link[aria-current="page"] { color: var(--text-heading); border-bottom-color: var(--accent); }

/* ——— Carte témoignage ——— */
.al-card {
  background: var(--surface-card);
  padding: 38px 34px;
}

/* ——— Légende photo ——— */
.al-caption {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ——— Titres utilitaires ——— */
.al-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  color: var(--text-heading);
  margin: 0;
}