/* ─────────────────────────────────────────────────────────────────────
   MenuDig — design system v1
   Mobile-first. Base styles target ~380px. Min-width queries expand up.
   Tokens from the Charte Graphique Juin 2026.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* Brand colors */
    --md-terracotta:        #c0563a;
    --md-terracotta-light:  #cd6a45;
    --md-ivoire:            #f7f2e8;
    --md-creme:             #fbf6ec;
    --md-blanc:             #ffffff;
    --md-brun:              #261d17;

    /* Text */
    --md-text:              #261d17;
    --md-text-body:         #4f463d;
    --md-text-secondary:    #7d6f60;
    --md-text-tertiary:     #8a7c6e;
    --md-text-discreet:     #a89a8a;

    /* Status */
    --md-success:           #1f8a5b;
    --md-success-dark:      #1f6b4f;
    --md-warning:           #e08a2b;
    --md-neutral:           #cfc2af;

    /* Surface */
    --md-bg:                var(--md-ivoire);
    --md-surface:           var(--md-blanc);
    --md-surface-2:         var(--md-creme);
    --md-border:            rgba(38, 29, 23, 0.09);
    --md-shadow:            0 8px 22px rgba(38, 29, 23, 0.05);

    /* Radius */
    --md-r-pill:            999px;
    --md-r-card:            16px;
    --md-r-btn:             11px;
    --md-r-icon:            12px;

    /* Spacing scale */
    --md-s-1:               4px;
    --md-s-2:               8px;
    --md-s-3:               12px;
    --md-s-4:               16px;
    --md-s-5:               24px;
    --md-s-6:               32px;
    --md-s-7:               48px;

    /* Type */
    --md-font-serif:        "DM Serif Display", Georgia, "Times New Roman", serif;
    --md-font-sans:         "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Touch targets — mobile-first non-negotiable */
    --md-touch:             44px;

    /* Layout */
    --md-max:               1100px;
}

/* ───────── Reset (minimal, mobile-friendly) */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--md-bg);
    color: var(--md-text-body);
    font-family: var(--md-font-sans);
    font-size: clamp(14px, 0.95rem + 0.2vw, 16px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
a { color: var(--md-terracotta); text-decoration: none; }
a:hover { text-decoration: none; opacity: .82; }

/* ───────── Type scale (mobile-first, fluid) */
h1, .md-display {
    font-family: var(--md-font-serif);
    font-weight: 400;
    color: var(--md-text);
    line-height: 1.06;
    font-size: clamp(28px, 6vw + 1rem, 45px);
    margin: 0 0 var(--md-s-4);
}
h2 {
    font-family: var(--md-font-serif);
    font-weight: 400;
    color: var(--md-text);
    line-height: 1.1;
    font-size: clamp(22px, 3vw + 1rem, 36px);
    margin: var(--md-s-5) 0 var(--md-s-3);
}
h3 {
    font-family: var(--md-font-serif);
    font-weight: 400;
    color: var(--md-text);
    line-height: 1.15;
    font-size: clamp(18px, 1.4vw + 1rem, 24px);
    margin: var(--md-s-4) 0 var(--md-s-2);
}
.md-surtitre {
    font-family: var(--md-font-sans);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--md-terracotta);
}
.md-legend {
    font-size: 12px;
    color: var(--md-text-secondary);
    line-height: 1.4;
}

/* ───────── Layout primitives */
.md-page {
    max-width: var(--md-max);
    margin-inline: auto;
    padding-inline: var(--md-s-4);
}
.md-card {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-r-card);
    padding: var(--md-s-5);
    box-shadow: var(--md-shadow);
}
.md-card-soft {
    background: var(--md-surface-2);
    border: 1px solid var(--md-border);
    border-radius: var(--md-r-card);
    padding: var(--md-s-4);
}
.md-stack > * + * { margin-top: var(--md-s-3); }
.md-stack-lg > * + * { margin-top: var(--md-s-5); }

/* ───────── Buttons (mobile-first touch targets) */
.md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--md-s-2);
    min-height: var(--md-touch);
    padding: 0 var(--md-s-5);
    border: 0;
    border-radius: var(--md-r-btn);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
}
.md-btn-primary {
    background: var(--md-terracotta);
    color: var(--md-blanc);
}
.md-btn-primary:hover { background: var(--md-terracotta-light); text-decoration: none; }
.md-btn-primary:active { transform: translateY(1px); }
.md-btn-secondary {
    background: var(--md-blanc);
    color: var(--md-text);
    border: 1px solid var(--md-border);
}
.md-btn-secondary:hover { background: var(--md-creme); text-decoration: none; }
.md-btn-block { width: 100%; }

/* ───────── Status badges (brand status colors) */
.md-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--md-s-1);
    padding: 4px 10px;
    border-radius: var(--md-r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.md-badge::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.md-badge-success { background: #e8f4ee; color: var(--md-success-dark); }
.md-badge-progress { background: #fbecd5; color: #8a5410; }
.md-badge-neutral  { background: #f1ece3; color: var(--md-text-tertiary); }

/* ───────── Forms */
.md-field { display: flex; flex-direction: column; gap: var(--md-s-2); }
.md-field > label { font-size: 13px; font-weight: 600; color: var(--md-text); }
.md-input, .md-select, .md-textarea {
    min-height: var(--md-touch);
    padding: 10px 12px;
    border: 1px solid var(--md-border);
    border-radius: var(--md-r-btn);
    background: var(--md-blanc);
    color: var(--md-text);
    font: inherit;
    width: 100%;
}
.md-input:focus, .md-select:focus, .md-textarea:focus {
    outline: 2px solid var(--md-terracotta);
    outline-offset: 1px;
    border-color: var(--md-terracotta);
}

/* ───────── Diner mobile shell: sticky bottom action bar (thumb reach) */
.md-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.md-shell-body { flex: 1; padding-bottom: 96px; }
.md-bottom-bar {
    position: sticky;
    bottom: 0;
    background: var(--md-blanc);
    border-top: 1px solid var(--md-border);
    padding: var(--md-s-3) var(--md-s-4) max(var(--md-s-3), env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(38, 29, 23, 0.05);
    z-index: 10;
}

/* ───────── RTL (Arabic) — automatic via dir="rtl" on <html> */
[dir="rtl"] .md-bottom-bar { text-align: right; }
[dir="rtl"] .md-page { direction: rtl; }

/* ───────── Breakpoints (mobile-first, min-width only) */
@media (min-width: 600px) {
    .md-page { padding-inline: var(--md-s-5); }
    .md-card { padding: var(--md-s-5) var(--md-s-6); }
}
@media (min-width: 900px) {
    .md-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-s-5); }
    .md-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-s-5); }
}

/* ───────── Icons (line, 1.5px, inherit color — per Charte) */
.md-ico { display: inline-block; vertical-align: -0.18em; flex: none; }
.md-ico-inline { vertical-align: -0.18em; margin-inline-end: 6px; }

/* ───────── Accessibility */
:focus-visible { outline: 2px solid var(--md-terracotta); outline-offset: 2px; }
.md-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}