/* =====================================================
   Le Grand Bistrot — « Pop Bistrot Bricolé »
   Mix : pop maximaliste (Big Mamma) + skeuomorphique matériel
   (Holybelly). Couleurs saturées + tampons/polaroids/ardoise.
   ===================================================== */

:root {
    /* Couleurs pop saturées */
    --pink:        #FFE3D8;      /* Fond chaud principal */
    --pink-deep:   #FFCDB8;      /* Variante */
    --rouge:       #D52B1E;      /* Rouge tomate punchy — WCAG AA sur blanc */
    --rouge-deep:  #A8160E;
    --rouge-tampon:#9B1A14;      /* Rouge tampon de poste (rotation) — un cran plus foncé pour WCAG */
    --moutarde:    #FBC02D;      /* Jaune moutarde franc */
    --moutarde-deep:#E0A810;
    --cobalt:      #1E5DAA;      /* Bleu cobalt */
    --cobalt-deep: #154177;
    --ardoise:     #2D4138;      /* Vert ardoise sombre */
    --ardoise-craie:#E8E5D8;     /* Craie blanc-cassé sur ardoise */
    --creme:       #FAF6EC;      /* Crème pour ticket bristol */
    --kraft:       #D9C29A;      /* Kraft pour éléments papier */
    --noir:        #1A1A1A;      /* Noir profond */
    --noir-soft:   #2D2D2D;
    --gris:        #595959;      /* Foncé pour WCAG AA sur fond clair */
    --gris-light:  #807A6E;      /* Foncé aussi, sépia rosé sur papier */

    /* Typo */
    --font-display:  'Boldonse', 'Anton', 'Bebas Neue', 'Arial Black', sans-serif;
    --font-body:     'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
    --font-machine:  'Special Elite', 'Courier Prime', 'Courier New', monospace;
    --font-marker:   'Permanent Marker', 'Marker Felt', cursive;
    /* Caveat retirée : Permanent Marker assume tous les usages manuscrits.
       Économie ~30 ko, palette typo plus cohérente. */

    /* Tailles — généreuses */
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1.0625rem;
    --fs-md:    1.25rem;
    --fs-lg:    1.625rem;
    --fs-xl:    2.25rem;
    --fs-2xl:   3.5rem;
    --fs-3xl:   5rem;
    --fs-huge:  clamp(3.5rem, 14vw, 14rem);
    --fs-mega:  clamp(4rem, 18vw, 22rem);

    /* Espacements */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 7rem;
    --s-10: 10rem;

    /* Layout */
    --container: 1440px;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
    --section-y: clamp(4rem, 9vw, 8rem);
    --header-h: 76px;

    /* Ombres dures (signature néo-brutaliste) */
    --shadow-hard: 6px 6px 0 var(--noir);
    --shadow-hard-sm: 3px 3px 0 var(--noir);
    --shadow-hard-rouge: 5px 5px 0 var(--rouge);
    --shadow-paper: 0 2px 0 rgba(26,26,26,0.1), 0 8px 22px -8px rgba(26,26,26,0.3);

    /* Animation */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 180ms;
    --dur-base: 350ms;
    --dur-slow: 700ms;
}

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--pink);
    color: var(--noir);
    scroll-behavior: smooth;
    /* Les rotations CSS et ombres dures (6px 6px 0 noir) peuvent déborder
       latéralement en mobile. `overflow-x: clip` empêche le scroll horizontal
       sans casser les éléments position:sticky (contrairement à overflow:hidden). */
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .marquee-track { animation: none !important; }
}

body {
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.5;
    font-weight: 400;
    color: var(--noir);
    background: var(--pink);
}

/* ---- Typo ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--noir);
    line-height: 0.9;
    letter-spacing: -0.018em;
    text-transform: uppercase;
}

/* Boldonse a une perso forte, n'a pas besoin de bold weight */

h1 { font-size: clamp(3rem, 9vw, 7rem); }
h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
h3 { font-size: clamp(1.625rem, 3vw, 2.5rem); }
h4 { font-size: var(--fs-xl); }

p { max-width: 65ch; }

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--noir);
    transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--rouge); text-decoration-color: var(--rouge); }

strong, b { font-weight: 700; }

ul, ol { list-style: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

input, textarea, select { font: inherit; color: inherit; }

/* ---- A11y ---- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--noir);
    color: var(--moutarde);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    border: 2px solid var(--noir);
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: 1rem; color: var(--moutarde); }

:focus-visible {
    outline: 3px solid var(--noir);
    outline-offset: 3px;
    /* Pour les boutons à ombre dure, l'outline reste visible
       en plus de la box-shadow. */
}

/* Focus visible spécifique pour les boutons à ombre dure :
   un ring rouge décalé, lisible quelle que soit la couleur du bouton. */
.btn:focus-visible,
.btn-icon:focus-visible,
.filter-btn:focus-visible,
.btn-ghost-light:focus-visible {
    outline: 3px solid var(--rouge);
    outline-offset: 4px;
}

::selection { background: var(--moutarde); color: var(--noir); }

/* ---- Containers ---- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-narrow {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

/* ---- Patterns d'écriture ---- */

/* Marker manuscrit */
.marker {
    font-family: var(--font-marker);
    font-weight: 400;
    line-height: 1;
    color: var(--rouge);
    text-transform: none;
    letter-spacing: 0;
}

/* Machine à écrire */
.typewriter {
    font-family: var(--font-machine);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Note manuscrite (équivalent .marker — alias pour rétrocompatibilité) */
.script {
    font-family: var(--font-marker);
    font-weight: 400;
    line-height: 1;
    color: var(--rouge);
    text-transform: none;
    letter-spacing: 0;
}

/* Mot souligné jaune (highlight crayon) */
.hl {
    background: linear-gradient(180deg, transparent 50%, var(--moutarde) 50%, var(--moutarde) 92%, transparent 92%);
    padding: 0 0.15em;
    /* Bande de surlignage strictement contenue dans la cap-height du texte
       (50%-92% du em) : pas de débordement sur la ligne du dessous. */
}

/* Mot dans le rouge (souligné par le rouge) */
.in-rouge { color: var(--rouge); }
.in-moutarde { color: var(--moutarde); }
.in-cobalt { color: var(--cobalt); }

/* Lead */
.lead {
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.5;
    color: var(--noir-soft);
    font-weight: 400;
    max-width: 56ch;
}

/* Caption typewriter */
.caption {
    font-family: var(--font-machine);
    font-size: var(--fs-sm);
    color: var(--gris);
    letter-spacing: 0.02em;
}

/* Caps mono */
.caps {
    font-family: var(--font-machine);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--noir);
    font-weight: 700;
}

/* ---- Animations sobres ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; }