/* ========================================
   COMPOSANTS RÉUTILISABLES
   ======================================== */

/* ──────────────────────────────────────────
   Échelle typographique (réutilisable)
   Ces classes ne portent QUE la typo (police, taille, graisse, style, interligne).
   La couleur et l'alignement sont appliqués par le contexte (section/élément).
   ────────────────────────────────────────── */

/* H1 — grand titre d'affichage (Cormorant) */
.title-display {
    font-family: var(--font-display);
    font-size: var(--font-size-display);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
}

/* H2 — titre de section (Cormorant) */
.title-h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-h2);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
}

/* H3 — sous-titre d'affichage (Cormorant italique) */
.title-h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-display);
}

/* H4 — surtitre (Cormorant italique) */
.title-h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-display);
}

/* H5 — libellé Cormorant (boutons) */
.title-h5 {
    font-family: var(--font-display);
    font-size: var(--font-size-h5);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
}

/* H6 — petit libellé (boutons, surtitres) Gotham */
.title-h6 {
    font-family: var(--font-gotham);
    font-size: var(--font-size-h6);
    font-style: normal;
    font-weight: 325; /* "Book" — rendu exact uniquement si Gotham est chargée */
    line-height: var(--line-height-h6);
}

/* Texte courant (Gotham) */
.text-body {
    font-family: var(--font-gotham);
    font-size: var(--font-size-text);
    font-style: normal;
    font-weight: 325;
    line-height: var(--line-height-text);
}

/* Très grand titre italique léger (bandeau défilant) */
.title-marquee {
    font-family: var(--font-display);
    font-size: var(--font-size-marquee);
    font-style: italic;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-display);
}

/* ──────────────────────────────────────────
   Système de boutons générique
   .btn = base structurelle commune (forme, padding, alignement).
   Les variantes (.btn-dark, …) ne portent QUE les couleurs.
   La typographie est gérée à part (ex. .title-h6).
   ────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Variante : plein vert foncé */
.btn-dark {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: var(--color-text-white);
}

/* Au survol, le bouton s'inverse : fond blanc, texte + bordure vert foncé */
.btn-dark:hover {
    background-color: var(--color-text-white);
    border-color: var(--color-primary-darker);
    color: var(--color-primary-darker);
}

/* Variante : contour blanc, fond transparent (padding un peu plus haut) */
.btn-outline {
    background-color: transparent;
    border-color: var(--color-text-white);
    color: var(--color-text-white);
    padding: 20px 40px;
}

/* Au survol, l'outline s'inverse : fond blanc, texte foncé */
.btn-outline:hover {
    background-color: var(--color-text-white);
    color: var(--color-primary-darker);
}

/* Variante : lien texte (sans fond ni bordure, sans padding).
   N'utilise PAS la base .btn ; la couleur est donnée par le contexte.
   Le souligné apparaît au survol en glissant de la droite vers la gauche. */
.btn-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.btn-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1); /* souligné visible par défaut */
    transform-origin: left; /* l'effacement part de la droite */
    transition: transform var(--transition-base);
}

.btn-link:hover::after {
    transform: scaleX(0); /* disparaît au survol, de la droite vers la gauche */
}

/* ──────────────────────────────────────────
   Effet de lien générique : rien par défaut, le souligné apparaît au
   survol en glissant de la gauche vers la droite. Appliqué aux liens
   texte du site. Ajouter .link-underline à tout autre lien pour l'avoir.
   (Le CTA .btn-link garde, lui, son souligné visible par défaut.)
   ────────────────────────────────────────── */
.link-underline,
.nav-menu li a,
.footer-nav a,
.footer-legal a,
.footer-copyright a,
.footer-contact-item a,
.contact-line a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.link-underline::after,
.nav-menu li a::after,
.footer-nav a::after,
.footer-legal a::after,
.footer-copyright a::after,
.footer-contact-item a::after,
.contact-line a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.link-underline:hover::after,
.nav-menu li a:hover::after,
.footer-nav a:hover::after,
.footer-legal a:hover::after,
.footer-copyright a:hover::after,
.footer-contact-item a:hover::after,
.contact-line a:hover::after {
    transform: scaleX(1);
}

/* Anciens boutons (header) — conservés le temps de la migration vers .btn */
.btn-primary {
    font-family: var(--font-primary);
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background-color: var(--color-text-white);
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    font-family: var(--font-primary);
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background-color: transparent;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-text);
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--color-text);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}