/* assets/css/variables.css
   Reset + fondations partagées, et utilitaires transversaux qui incarnent
   l'identité "cottage" de la marque :
   .gingham        (motif vichy plein, réservé à la nav mobile)
   .vichy-ribbon   (fin ruban vichy, utilisé comme séparateur entre sections)
   .label-caps     (petites étiquettes en majuscules, esprit tamponné)
*/

/* --- Polices auto-hébergées ---
   Dépose les fichiers .woff2 correspondants dans assets/fonts/ :
   - Fraunces-Regular.woff2 / Fraunces-Bold.woff2 / Fraunces-Italic.woff2
   - Karla-Regular.woff2 / Karla-Bold.woff2
   Sans ces fichiers, le site utilise des polices système de secours.
*/
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'Karla', sans-serif);
    color: var(--color-ink, #4A3221);
    background-color: var(--color-bg, #F7EFE1);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

section {
    padding-block: 4.5rem;
}

@media (min-width: 768px) {
    section {
        padding-block: 7rem;
    }
}

/* --- Signature : motif vichy plein (réservé à la nav mobile plein écran) --- */
.gingham {
    background-color: var(--color-card, #FBF6EC);
    background-image:
        repeating-linear-gradient(90deg, rgba(174, 150, 132, 0.55) 0 10px, transparent 10px 20px),
        repeating-linear-gradient(0deg, rgba(174, 150, 132, 0.55) 0 10px, transparent 10px 20px);
    background-blend-mode: multiply;
}

/* --- Signature : ruban vichy, séparateur fin entre les sections ---
   Même recette de motif que .gingham, mais réduite à une bande de quelques
   millimètres : le clin d'œil vichy devient un fil conducteur discret plutôt
   qu'un aplat de fond.
*/
.vichy-ribbon {
    height: 0.85rem;
    background-color: var(--color-card, #FBF6EC);
    background-image:
        repeating-linear-gradient(90deg, rgba(174, 150, 132, 0.6) 0 8px, transparent 8px 16px),
        repeating-linear-gradient(0deg, rgba(174, 150, 132, 0.6) 0 8px, transparent 8px 16px);
    background-blend-mode: multiply;
}

/* Variante collée au bord haut réel d'une section (ignore son padding-top) */
.vichy-ribbon--top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* --- Petites étiquettes en majuscules, esprit tamponné --- */
.label-caps {
    font-family: var(--font-display, serif);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #C99A8E);
}

.label-caps--dark {
    color: var(--color-accent, #C99A8E);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}