/**
 * Typography CSS — Glazam Child Theme
 * Polices : Tektur (H1) + Inter (tout le reste)
 * Sélecteurs renforcés pour prendre le dessus sur GeneratePress.
 * @version 1.1.0
 */

/* ========================================
   NOTE : Google Fonts chargé via <link> dans header.php
   Tektur : wght@400;600;700;800;900
   Inter  : wght@300;400;500;600;700
   ======================================== */

/* ========================================
   VARIABLES TYPOGRAPHIQUES
   ======================================== */
:root {
    --font-display: 'Tektur', sans-serif;
    --font-sans:    'Inter', sans-serif;

    --tracking-tight:   -0.03em;
    --tracking-display: -0.02em;
    --tracking-normal:   0em;
    --tracking-wide:     0.06em;
    --tracking-wider:    0.12em;

    --leading-tight:  1.1;
    --leading-normal: 1.5;
    --leading-loose:  1.7;
}

/* ========================================
   BASE — body préfixé pour battre GP
   ======================================== */
html {
    font-size: 16px !important;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: var(--leading-normal) !important;
    color: var(--color-text) !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-bg);
}

/* ========================================
   RESET MARGES TITRES
   GP applique margin-bottom sur h1–h6
   ======================================== */
body h1, body h2, body h3,
body h4, body h5, body h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-wrap: balance;
}

/* ========================================
   TITRES
   Préfixe body = spécificité (0,1,1) > GP (0,0,1)
   ======================================== */

/* H1 — Tektur SemiBold, 70px / lh 80 */
body h1 {
    font-family: var(--font-sans) !important;
    font-size: 4.375rem !important;      /* 70px */
    font-weight: 300 !important;
    line-height: 1.143 !important;       /* 80/70 */
    letter-spacing: var(--tracking-display) !important;
}

/* H2 — Inter SemiBold, 55px / lh 67 */
body h2 {
    font-family: var(--font-sans) !important;
    font-size: clamp(1.8rem, 3.5vw, 3rem); !important;     
    font-weight: 600 !important;
    line-height: 1.218 !important;       /* 67/55 */
    letter-spacing: var(--tracking-display) !important;
}

/* H3 — Inter Bold, 25px / lh 37 */
body h3 {
    font-family: var(--font-sans) !important;
    font-size: 1.5625rem !important;     /* 25px */
    font-weight: 700 !important;
    line-height: 1.48 !important;        /* 37/25 */
    letter-spacing: var(--tracking-tight) !important;
}

/* H4 — Inter Light, 30px / lh 46 */
body h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.875rem !important;      /* 30px */
    font-weight: 300 !important;
    line-height: 1.533 !important;       /* 46/30 */
}

/* H5 — Inter Medium */
body h5 {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: var(--leading-normal) !important;
}

/* H6 — Inter SemiBold, label uppercase */
body h6 {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 300;
    line-height: 0.75;
    text-decoration: underline;
}

/* ========================================
   PARAGRAPHES
   ======================================== */
body p {
    font-family: var(--font-sans) !important;
    font-size: 1.0625rem !important;     /* 17px */
    font-weight: 400 !important;
    line-height: 1.765 !important;       /* 30/17 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-wrap: pretty;
}

/* ========================================
   INLINE
   ======================================== */
span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;    letter-spacing: inherit;
    text-decoration: none;
}

strong, b { font-family: var(--font-display); }
em, i     { font-style: italic; }
small     { font-size: 0.8em; }

/* ========================================
   LIENS
   ======================================== */
body a {
    text-decoration: none;
    transition: color 0.2s ease;
}

body a:hover,
body a:focus {
    outline: none;
    color: var(--color-primary) !important;
}

a-labeur {
    text-decoration: underline !important;
    transition: color 0.2s ease;
}

/* ========================================
   LISTES
   ======================================== */
body ul,
body ol {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    line-height: var(--leading-loose) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   CLASSES UTILITAIRES TYPO
   (pas besoin de préfixe, les classes
    ont déjà une spécificité suffisante)
   ======================================== */
.u-display { font-family: var(--font-display) !important; }
.u-sans    { font-family: var(--font-sans) !important; }

.u-span-xl {
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 0.75;
}

.u-text-xs   { font-size: 0.75rem; }
.u-text-sm   { font-size: 0.875rem; }
.u-text-base { font-size: 1rem; }
.u-text-lg   { font-size: 1.125rem; }
.u-text-xl   { font-size: 1.25rem; }
.u-text-2xl  { font-size: 1.5rem; }
.u-text-3xl  { font-size: 2rem; }

.u-light     { font-weight: 300; }
.u-regular   { font-weight: 400; }
.u-medium    { font-weight: 500; }
.u-semibold  { font-weight: 600; }
.u-bold      { font-weight: 700; }
.u-extrabold { font-weight: 800; }

.u-uppercase      { text-transform: uppercase; }
.u-tracking-wide  { letter-spacing: var(--tracking-wide); }
.u-tracking-wider { letter-spacing: var(--tracking-wider); }

.u-color-navy    { color: var(--color-navy); }
.u-color-primary { color: var(--color-primary); }
.u-color-muted   { color: var(--color-muted); }

/* ========================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ======================================== */
@media (max-width: 1024px) {
    body h1 { font-size: 3.125rem !important; }   /* 50px */
    body h2 { font-size: 2.5rem !important; }     /* 40px */
    body h3 { font-size: 1.375rem !important; }   /* 22px */
    body h4 { font-size: 1.5rem !important; }     /* 24px */
    .u-span-xl { font-size: 2rem; }
}

/* ========================================
   RESPONSIVE — MOBILE (≤ 768px)
   ======================================== */
@media (max-width: 768px) {
    body h1 { font-size: 2.5rem !important; }     /* 40px */
    body h2 { font-size: 2rem !important; }       /* 32px */
    body h3 { font-size: 1.25rem !important; }    /* 20px */
    body h4 { font-size: 1.25rem !important; }    /* 20px */

    body p,
    body li {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .u-span-xl { font-size: 1.5rem; }
}