/* =========================================================
   QRMENUPRO — Système Premium "Apple x Restaurant"
   Fond blanc immaculé · Vert sapin · Vert pomme accent
   ========================================================= */

:root {
    /* === Palette === */
    --white:        #FFFFFF;   /* fond principal */
    --off-white:    #FAFAFA;   /* surfaces alternées subtiles */
    --soft-gray:    #F5F5F7;   /* hover / chips (Apple gray) */
    --line-gray:    #E8E8ED;   /* bordures */
    --mid-gray:     #D2D2D7;   /* bordures appuyées */

    --forest:       #141914;   /* vert sapin foncé — sections sombres (style Koatcher) */
    --forest-deep:  #0d100d;
    --forest-soft:  #1f2a1f;

    --apple-green:  #8FD46E;   /* vert pomme tendre — CTA principal */
    --apple-green-deep: #7BC15A;
    --apple-green-soft: #E8F5DD;

    --warm-yellow:  #FFD060;   /* jaune doux pour highlights subtils */

    --ink:          #1D1D1F;   /* texte principal (Apple ink) */
    --ink-soft:     #424245;   /* texte secondaire */
    --ink-mute:     #6E6E73;   /* texte muet */
    --ink-faint:    #A1A1A6;   /* hints */

    --success:      var(--apple-green-deep);
    --warning:      #FFB020;
    --danger:       #FF453A;
    --danger-deep:  #D9342B;

    /* === Tokens primaires === */
    --bg:           var(--white);
    --bg-2:         var(--white);
    --bg-3:         var(--soft-gray);
    --bg-4:         var(--mid-gray);
    --bg-dark:      var(--forest);
    --bg-dark-2:    var(--forest-deep);
    --ink-on-dark:  var(--white);

    --line:         var(--line-gray);
    --line-strong:  var(--mid-gray);

    --accent:       var(--apple-green);
    --accent-deep:  var(--apple-green-deep);
    --accent-soft:  var(--apple-green-soft);

    /* === Alias rétro-compat (pour tout le code existant) === */
    --saffron:      var(--apple-green);
    --saffron-deep: var(--apple-green-deep);
    --tomato:       var(--danger);
    --tomato-deep:  var(--danger-deep);
    --cream:        var(--bg);
    --cream-2:      var(--bg-2);
    --cream-3:      var(--bg-3);
    --cream-bg:     var(--bg);
    --cream-bg-2:   var(--bg-2);
    --cream-bg-3:   var(--bg-3);
    --cream-bg-4:   var(--bg-4);
    --vermillon:    var(--forest);
    --vermillon-2:  var(--forest-deep);
    --vermillon-3:  var(--forest-deep);
    --orange:       var(--apple-green);
    --orange-2:     var(--apple-green-deep);
    --orange-3:     var(--apple-green-deep);
    --orange-deep:  var(--apple-green-deep);
    --orange-soft:  var(--apple-green-soft);
    --olive:        var(--forest);
    --taupe:        var(--ink-soft);
    --red:          var(--danger);
    --green:        var(--apple-green);
    --amber:        var(--warm-yellow);
    --yellow:       var(--warm-yellow);
    --yellow-deep:  #F0BD3D;
    --yellow-soft:  rgba(255,208,96,.20);
    --sage:         var(--bg-3);
    --gray-soft:    var(--bg-3);
    --paper:        var(--bg-2);
    --gray-50:      var(--bg-3);
    --gray-100:     var(--bg-3);
    --gray-200:     var(--line);
    --gray-300:     var(--bg-4);
    --gray-400:     var(--ink-mute);
    --gray-500:     var(--ink-mute);
    --gray-700:     var(--ink-soft);
    --gray-900:     var(--ink);
    --ink-2:        var(--ink);
    --ink-3:        var(--ink);
    --line-soft:    var(--line);

    /* === Typo === */
    --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display-2: 'Bricolage Grotesque', 'Inter', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-prose:   'Inter', system-ui, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    /* === Radius : généreux, harmonisés style Apple === */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  40px;
    --r-pill: 999px;

    /* === Shadows : très douces, style premium === */
    --sh-1: 0 1px 2px rgba(0,0,0,.04);
    --sh-2: 0 8px 24px rgba(0,0,0,.06);
    --sh-3: 0 24px 60px rgba(0,0,0,.10);
    --sh-green: 0 8px 24px rgba(143,212,110,.40);
    --border-card: 1px solid var(--line);

    /* === Layout === */
    --nav-h:     72px;
    --sidebar-w: 80px;
    --topbar-h:  72px;
    --max:       1200px;
    --container-pad: 24px;
}

@media (max-width: 700px) {
    :root { --nav-h: 64px; --container-pad: 20px; }
}

/* ───── Reset ───── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
@media (max-width: 700px) { body { font-size: 16px; } }

a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--forest); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
img, video, svg, iframe, table, pre, code { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--apple-green-deep); outline-offset: 3px; border-radius: var(--r-sm); }

/* ───── Typographie premium Apple-style ───── */
h1, h2, h3, h4, h5 { color: var(--ink); text-wrap: balance; }

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 5.6vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}
h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.028em;
}
h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.18;
    letter-spacing: -0.018em;
}
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.012em;
}
h5 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* Modificateurs de titres — accent vert pomme subtil */
h1 .accent, h2 .accent, h3 .accent, h4 .accent,
h1 .tom, h2 .tom, h3 .tom, h4 .tom,
h1 .saf, h2 .saf, h3 .saf, h4 .saf,
.s-title .accent, .s-title .tom, .s-title .saf,
.section-title .accent, .section-title .tom, .section-title .saf,
.page-hero h1 .accent, .page-hero h1 .tom {
    color: var(--forest);
}

/* Utilitaires de famille */
.fraunces, .anton { font-family: var(--font-display); }
.inter, .manrope, .roboto { font-family: var(--font-body); }

/* Eyebrow */
.eyebrow, .s-eyebrow, .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--apple-green-deep);
}
.eyebrow::before, .s-eyebrow::before, .section-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--apple-green);
}

/* Lead / chapô */
.lead, .subtitle {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink-soft);
}

.caption {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-mute);
}

.big-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(64px, 8vw, 104px);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* ───── Boutons style Apple (pill, généreux, soft shadow) ───── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--mid-gray); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm  { padding: 10px 20px; font-size: 14px; }
.btn-lg  { padding: 16px 34px; font-size: 16.5px; }

.btn-primary {
    background: var(--apple-green);
    color: var(--forest-deep);
    border-color: var(--apple-green);
    font-weight: 700;
}
.btn-primary:hover {
    background: var(--apple-green-deep);
    border-color: var(--apple-green-deep);
    color: var(--forest-deep);
    box-shadow: var(--sh-green);
    transform: translateY(-2px);
}

.btn-forest, .btn-dark {
    background: var(--forest);
    color: var(--white);
    border-color: var(--forest);
}
.btn-forest:hover, .btn-dark:hover {
    background: var(--forest-deep);
    color: var(--white);
    border-color: var(--forest-deep);
    transform: translateY(-2px);
}

.btn-yellow {
    background: var(--warm-yellow);
    color: var(--ink);
    border-color: var(--warm-yellow);
}
.btn-yellow:hover { background: #F0BD3D; border-color: #F0BD3D; }

.btn-tomato {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}
.btn-tomato:hover { background: var(--danger-deep); border-color: var(--danger-deep); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--mid-gray);
}
.btn-ghost:hover {
    background: var(--bg-3);
    color: var(--ink);
    border-color: var(--ink-mute);
    transform: translateY(-1px);
}

.btn-ghost.is-danger,
.btn-ghost.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-ghost.is-danger:hover,
.btn-ghost.btn-danger:hover {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}

.btn-cream {
    background: var(--bg-3);
    color: var(--ink);
    border-color: var(--line);
}
.btn-cream:hover { background: var(--mid-gray); }

/* ───── Inputs : style Apple ───── */
.input, .textarea, .select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select {
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: 13px 18px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
}
.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 4px rgba(26,61,46,.12);
}
.textarea, textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

.input::placeholder, .textarea::placeholder, .select::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--ink-faint);
    opacity: 1;
}

.input:-webkit-autofill, .textarea:-webkit-autofill, .select:-webkit-autofill,
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
    -webkit-text-fill-color: var(--ink) !important;
    caret-color: var(--ink) !important;
    transition: background-color 9999s ease-out 0s;
}

.select, select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 40px;
}

@media (min-width: 700px) and (hover: hover) {
    .input, .textarea, .select,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="url"], input[type="search"],
    input[type="number"], textarea, select {
        font-size: 15px;
    }
}

/* ───── Fields ───── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label,
label {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--forest); }

/* ───── Cards ───── */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
}

/* ───── Badges ───── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--bg-3);
    color: var(--ink-soft);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-orange, .badge-green { background: var(--apple-green-soft); color: var(--forest); }
.badge-yellow { background: rgba(255,208,96,.30); color: #7A5A00; }
.badge-forest { background: var(--forest); color: var(--white); }
.badge-tomato { background: rgba(255,69,58,.12); color: var(--danger-deep); }
.badge-success { background: var(--apple-green-soft); color: var(--forest); }
.badge-dark    { background: var(--forest); color: var(--white); }

/* ───── Topbar promo ───── */
.topbar-promo {
    background: var(--forest);
    color: var(--white);
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.topbar-promo-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
}
.topbar-promo-text { font-weight: 500; }
.topbar-promo-link {
    color: var(--apple-green);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar-promo-link:hover { color: var(--white); }

@media (max-width: 540px) {
    .topbar-promo { padding: 10px 16px; font-size: 12.5px; }
    .topbar-promo-inner { gap: 10px; }
}

/* ───── Flash ───── */
.flash {
    margin: 14px 24px;
    padding: 16px 20px;
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
}
.flash-success { border-color: var(--apple-green-deep); color: var(--forest); background: var(--apple-green-soft); }
.flash-error   { border-color: var(--danger); color: var(--danger-deep); background: rgba(255,69,58,.08); }
.flash-info    { border-color: var(--forest); color: var(--forest); background: rgba(26,61,46,.06); }

/* ───── Helpers ───── */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 40px; }

.muted { color: var(--ink-mute); }
.text-accent { color: var(--apple-green-deep); font-weight: 600; }
.text-forest { color: var(--forest); font-weight: 600; }
.text-danger { color: var(--danger); }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; gap: 16px; } }

.row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

::selection { background: var(--apple-green); color: var(--forest-deep); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--mid-gray); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }