/*
 * ============================================================
 *  TYPOGRAPHIE — Basé sur maquette 1920 × 1080 px
 *  Méthode : clamp() fluide (min → mobile / max → desktop 1920)
 *  Formule preferred : (px_maquette / 1920) × 100vw
 *  Base rem : 1rem = 16px
 * ============================================================
 */

/*
 * Les polices Google (Inter + Baskervville) NE sont PLUS chargées ici via
 * @import : un @import dans un fichier CSS crée une chaîne de requêtes
 * bloquante (télécharger fonts.css → parser → découvrir @import → télécharger
 * la CSS Google → télécharger les .woff2), ce qui retardait fortement le FCP/LCP
 * sur mobile (cf. Lighthouse « network-dependency-tree »).
 *
 * Elles sont désormais enregistrées en parallèle des autres feuilles, avec
 * preconnect, dans inc/performance.php (domainegregoire_google_fonts_*).
 */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* --- Tailles (maquette → fluide → mobile) ---
   *
   *  header__text : 40px  →  2.5rem    max
   *  h1           : 65px  →  4.0625rem max
   *  h2           : 65px  →  4.0625rem max
   *  h3           : 35px  →  2.1875rem max
   *  h4           : 40px  →  2.5rem    max
   *  h5           : 15px  →  0.9375rem max
   *  p            : 25px  →  1.5625rem max
   *  a            : 20px  →  1.25rem   max
   *  a (cadre)    : 18px  →  1.125rem  max
   */
    --fs-header-text: clamp(1.25rem, 2.083vw, 2.5rem);
    --fs-h1: clamp(1.875rem, 3.385vw, 4.0625rem);
    --fs-h2: clamp(1.875rem, 3.385vw, 4.0625rem);
    --fs-h3: clamp(1.125rem, 1.823vw, 2.1875rem);
    --fs-h4: clamp(1.25rem, 2.083vw, 2.5rem);
    --fs-h5: clamp(0.75rem, 0.781vw, 0.9375rem);
    --fs-p: clamp(1rem, 1.302vw, 1.5625rem);
    --fs-a: clamp(0.875rem, 1.042vw, 1.25rem);
    --fs-a-cadre: clamp(0.8125rem, 0.938vw, 1.125rem);

    /* --- Interlignage --- */
    --lh-heading: 1.15;
    --lh-body: 1.6;

    /* --- Largeur de ligne confortable --- */
    --measure: 70ch;
}


/* ── Reset de base ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Garantit que 1rem = 16px (préférence utilisateur respectée) */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}


/* ── Corps du document ─────────────────────────────────────── */
body {
    font-family: "Inter";

    font-size: var(--fs-p);
    line-height: var(--lh-body);
}


/* ── Header text ───────────────────────────────────────────── */
/*  Classe utilitaire pour le texte de navigation / bannière   */
.header__tagline {
    font-family: "Baskervville";
    font-size: var(--fs-header-text);
    line-height: var(--lh-heading);
}


/* ── Titres ────────────────────────────────────────────────── */
h1 {
    font-family: "Baskervville";
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    text-transform: uppercase;
}

h2 {
    font-family: "Baskervville";
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    text-transform: uppercase;
}

h3 {
    font-family: "Baskervville";
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    text-transform: uppercase;
    margin-bottom: 1em;
}

h4 {
    font-family: "Baskervville";
    font-size: var(--fs-h4);
    line-height: var(--lh-heading);
    text-transform: uppercase;
}

h5 {
    font-family: "Baskervville";
    font-size: var(--fs-h5);
    line-height: var(--lh-heading);
    text-transform: uppercase;
}


/* ── Corps de texte ────────────────────────────────────────── */
p {
    font-size: var(--fs-p);
    line-height: var(--lh-body);
    margin: 1em 0;
}


/* ── Liens ─────────────────────────────────────────────────── */
a {
    font-size: var(--fs-a);
    line-height: var(--lh-body);
    text-decoration: none;
    text-transform: uppercase;
}

/* Lien avec cadre (bouton-lien, tag, badge…) */
a.cadre,
a[data-cadre] {
    font-size: var(--fs-a-cadre);
    /* Le padding s'adapte aussi à la taille du texte */
    padding: 0.45em 1em;
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: var(--btn-radius);
    color: #4A2122;
    width: fit-content;

    &:hover {
        background-color: #4A2122;
        color: #fff;
    }

    &.active {
        background-color: #4A2122;
        color: #fff;

        &:hover {
            background-color: #fff;
            color: #4A2122;
        }
    }
}


/* ── Tableau de référence (commentaire récapitulatif) ──────────
 *
 *  Breakpoint   │  header__text │  h1/h2  │  h3   │  p    │  a
 *  ─────────────┼───────────────┼─────────┼───────┼───────┼───────
 *  375 px (mob) │   ~20 px      │ ~30 px  │ ~18px │ ~16px │ ~14px
 *  768 px       │   ~26 px      │ ~42 px  │ ~23px │ ~16px │ ~16px
 *  1280 px      │   ~34 px      │ ~56 px  │ ~30px │ ~21px │ ~17px
 *  1920 px      │    40 px      │  65 px  │  35px │  25px │  20px
 *
 * ─────────────────────────────────────────────────────────────── */