/* =========================================
   TYPOGRAPHIE
   Mateda « Le ciel » : trois voix hébergées localement (assets/fonts/, aucune requête vers Google, licences OFL) :
   - Gloock : titres (une seule graisse) ;
   - Quicksand variable (graisse 300-700) : texte, boutons, prix — arrondie comme « Boulanger · pâtissier » du logo ;
   - Great Vibes : accent manuscrit (.script), une touche par section au maximum, en écho au nom du logo.
   Le nom « Mateda » n'est jamais composé dans ces polices : c'est toujours l'image du logo.
   ========================================= */

@font-face {
    font-family: "Gloock";
    src: url("../../fonts/gloock-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Quicksand";
    src: url("../../fonts/quicksand-latin-wght-normal.woff2") format("woff2-variations"),
         url("../../fonts/quicksand-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Great Vibes";
    src: url("../../fonts/great-vibes-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-display);
}

h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
}

h3 { font-size: var(--text-h3); }

h4, h5, h6 {
    font-size: var(--text-lg);
}

p {
    max-width: var(--text-max);
}

a {
    color: var(--color-link);
    text-underline-offset: var(--underline-offset);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

small {
    font-size: var(--text-sm);
}

strong { font-weight: var(--weight-bold); }

/* Petits textes réutilisables */
.eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Accent manuscrit : une touche par section, au-dessus du titre */
.script {
    display: block;
    max-width: none;
    font-family: var(--font-script);
    font-size: var(--script-section);
    font-weight: var(--weight-heading);
    line-height: 1;
    color: var(--color-link);
}

.lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

.price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Texte réservé aux lecteurs d'écran */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}