:root {
    --misaju-color-primary: #1f1f1f;
    --misaju-color-secondary: #a16026;
    --misaju-color-accent: #d4a574;
    --misaju-color-text: #e8e4de;
    --misaju-font-family: 'Inter', sans-serif;
    --misaju-spacing-sm: 0.5rem;
    --misaju-spacing-md: 1rem;
    --misaju-spacing-lg: 2rem;
}

/*
 * Design tokens du front public, portés depuis le projet initial
 * (`misaju/frontoffice/views/pages/menu/P_Menu.css`, bloc `:root`). Ils s'adossent aux
 * variables `--misaju-*` du thème commerce (bloc <style> de ThemeStyleBuilder) quand
 * elles existent. Déclarés ici — et non dans P_Menu.css — car l'en-tête, le pied de page
 * et la coquille sont présents sur TOUTES les pages publiques (carte + fiche produit).
 * Les écrans d'auth partagent ce fichier mais n'utilisent aucun de ces tokens.
 */
:root {
    /* Couleur de marque (Studio « Couleur primaire ») : en-tête, ruban « victime de son
       succès », pastilles de tags — même affectation que le projet initial. */
    --menu-primary: var(--misaju-color-primary, #996f3f);
    --menu-category: var(--misaju-category-color, var(--misaju-color-accent));
    --menu-strong: #151515;
    --menu-ink: #1f1f1f;
    --menu-muted: #6c655d;
    --menu-faint: #8a847b;
    --menu-page-bg: #f6f3ee;
    --menu-surface: var(--misaju-card-bg-color, #fffdf8);
    --menu-surface-soft: #f0ebe3;
    --menu-card-bg: var(--misaju-card-bg-color, #fffdf8);
    --menu-border: rgba(31, 31, 31, 0.14);
    --menu-border-strong: rgba(31, 31, 31, 0.28);
    --menu-leader: #b6b0a6;
    --menu-focus: #111;
    --menu-radius: var(--misaju-radius, 8px);
    /* Valeur FIXE, volontairement pas branchée sur `--misaju-radius-pill` du préréglage
       de forme : le projet initial fige 999px pour toutes les pastilles (bouton d'en-tête,
       langue, switch, filtre, tags, badge « voir ») et ne consomme jamais la variable du
       préréglage — la brancher rendait ces pastilles anguleuses (20px en `soft`, le défaut). */
    --menu-radius-pill: 999px;
    --menu-shadow-card: 0 12px 34px rgba(28, 25, 23, 0.08);
    --menu-shadow-pop: 0 20px 54px rgba(28, 25, 23, 0.14);
    --menu-header-fg: #fffaf0;
    --menu-footer-fg: rgba(255, 248, 236, 0.78);
    --menu-font-display: var(--misaju-font-title, var(--misaju-font-family));
    --menu-font-body: var(--misaju-font-family);
    --menu-font-category: var(--misaju-font-category, var(--menu-font-display));
    --a11y-scale: 1;
    --a11y-line-height: 1.6;
}

/* Réglages du panneau d'accessibilité (attributs posés sur <html> par C_AccessibilityPanel.js). */
html[data-a11y-size='large'] {
    --a11y-scale: 1.18;
}

html[data-a11y-size='xlarge'] {
    --a11y-scale: 1.42;
}

html[data-a11y-spacing='relaxed'] {
    --a11y-line-height: 1.8;
}

/* « Police facile à lire » : on remplace les TOKENS, pas seulement la police du <body>.
   Les titres de section et les noms de produit tirent leur fonte de `--menu-font-display`
   / `--menu-font-category` ; agir sur `body` seul les laissait sur la police du thème. */
html[data-a11y-font='dyslexic'] {
    --menu-font-display: 'Atkinson Hyperlegible', sans-serif;
    --menu-font-body: 'Atkinson Hyperlegible', sans-serif;
    --menu-font-category: 'Atkinson Hyperlegible', sans-serif;
}

html[data-a11y-contrast='high'] {
    --menu-primary: #000;
    --menu-category: #111;
    --menu-strong: #000;
    --menu-ink: #111;
    --menu-muted: #2a2a2a;
    --menu-page-bg: #fff;
    --menu-surface: #fff;
    --menu-surface-soft: #fff;
    --menu-card-bg: #fff;
    --menu-border: #555;
    --menu-border-strong: #222;
    --menu-leader: #444;
}

html[data-a11y-contrast='high'] .menu-item {
    box-shadow: none;
}

html[data-a11y-contrast='high'] .menu-header,
html[data-a11y-contrast='high'] .menu-footer {
    background: #000;
    color: #fff;
}

/* Le nom du commerce porte sa propre couleur (thème / `footer_text`) : il n'hérite donc
   pas du blanc posé sur la barre ci-dessus et doit être forcé séparément. */
html[data-a11y-contrast='high'] .menu-header-name,
html[data-a11y-contrast='high'] .menu-footer-name {
    color: #fff;
}

/*
 * Coquille des pages publiques : fond de page, colonne de contenu centrée. Portée par
 * <body class="menu-shell"> du layout public uniquement — les écrans d'auth gardent
 * l'habillage `--misaju-*` d'origine.
 */
.menu-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--menu-page-bg);
    color: var(--menu-ink);
    font-family: var(--menu-font-body);
    font-size: calc(16px * var(--a11y-scale));
    line-height: var(--a11y-line-height);
    -webkit-font-smoothing: antialiased;
    /* La gouttière garde les fonds (en-tête/pied) pleine largeur tout en alignant le
       contenu sur `--menu-max`. */
    --menu-max: 1120px;
    --menu-gutter: max(17px, calc((100% - var(--menu-max)) / 2));
    --menu-header-h: 72px;
}

.menu-content {
    flex: 1 0 auto;
    padding: 24px var(--menu-gutter) 0;
}

/*
 * Reset du front public, porté du projet initial (`P_Menu.css`, bloc racine). Cadré sur
 * `.menu-shell` : `global.css` est aussi chargé par les écrans d'authentification, qui
 * gardent leur habillage `--misaju-*`.
 *
 * `:where()` et non `.menu-shell` directement : le scoping doit coûter ZÉRO spécificité,
 * sinon `:where(.menu-shell) a` (0-0-1 comme le `a` nu de la référence) passerait à 0-1-1
 * et l'emporterait sur les règles de composant en une seule classe — `.menu-cat-option`
 * perdrait sa couleur, `.menu-item-name` sa police, etc. On reproduit la cascade d'origine,
 * pas seulement ses déclarations.
 */
:where(.menu-shell) button,
:where(.menu-shell) select,
:where(.menu-shell) input,
:where(.menu-shell) textarea {
    /* Les contrôles de formulaire n'héritent PAS de la police : sans cette règle, le
       libellé du bouton d'en-tête tombait sur la police système du navigateur. */
    font: inherit;
}

:where(.menu-shell) button,
:where(.menu-shell) select,
:where(.menu-shell) a {
    -webkit-tap-highlight-color: transparent;
}

:where(.menu-shell) a {
    color: inherit;
    text-decoration: none;
}

:where(.menu-shell) :focus-visible {
    outline: 3px solid var(--menu-focus);
    outline-offset: 3px;
}

/* Fond hors flux (overscroll, page plus courte que la fenêtre) et défilement fluide des
   ancres : posés sur <html>, que `.menu-shell` (sur <body>) ne couvre pas. */
html:has(body.menu-shell) {
    background: var(--menu-page-bg);
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.menu-shell) {
        scroll-behavior: auto;
    }
}

@media (max-width: 767px) {
    .menu-shell {
        --menu-header-h: 66px;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--misaju-color-primary);
    color: var(--misaju-color-text);
    font-family: var(--misaju-font-family);
    line-height: 1.5;
}

.c-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--misaju-color-accent);
    color: var(--misaju-color-primary);
    padding: var(--misaju-spacing-sm);
    z-index: 100;
}

.c-skip-link:focus {
    left: var(--misaju-spacing-sm);
    top: var(--misaju-spacing-sm);
}

/* Lien d'évitement du front public : habillage du projet initial (`.menu-skip-link`),
   collé au coin haut-gauche. Les écrans d'auth gardent la pastille accent ci-dessus. */
.menu-shell .c-skip-link {
    position: fixed;
    top: 0;
    left: -9999px;
    z-index: 1000;
    padding: 12px 18px;
    border-radius: 0 0 8px;
    background: #111;
    color: #fff;
    font-weight: 700;
}

.menu-shell .c-skip-link:focus {
    top: 0;
    left: 0;
}

/* Escamotage visuel complet (projet initial) : sans les remises à zéro de marge, de
   padding et de bordure, un élément « masqué » peut encore décaler ses voisins. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.c-site-header,
.c-site-footer {
    padding: var(--misaju-spacing-md);
    text-align: center;
}

.c-page-title {
    color: var(--misaju-color-accent);
    padding: 0 var(--misaju-spacing-md);
}

a {
    color: var(--misaju-color-accent);
}

/*
 * Contour de focus des écrans hors front public (authentification) : teinte `--misaju-*`.
 * Le front public a le sien (`.menu-shell :focus-visible`, teinte `--menu-focus`) ; d'où
 * le `:not(.menu-shell)`, sans lequel cette règle — plus spécifique et plus tardive —
 * l'emporterait sur les liens et boutons de la carte.
 * `:focus-visible` et non `:focus` : le contour est un repère clavier, l'afficher aussi
 * au clic souris est un écart au projet initial.
 */
body:not(.menu-shell) a:focus-visible,
body:not(.menu-shell) button:focus-visible {
    outline: 3px solid var(--misaju-color-accent);
    outline-offset: 2px;
}
