/* ============================================================
   Croque-Végé — Feuille de style principale
   Système de design v2 — Geist (UI) + Instrument Serif (display)
   Tokens d'ancre : --ink / --brick / --forest / --paper / --surface
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────
   Source : design_handoff_admin_refonte/tokens.css
   Les variables d'ancre (--ink, --brick…) sont la nouvelle référence.
   Les aliases (--anthracite, --rouge…) maintiennent la compatibilité
   avec le CSS et les thèmes existants pendant la migration.
   ─────────────────────────────────────────────────────────── */
:root {
    /* ── Échelle d'ancre ─────────────────────────────────── */
    --ink:        #14110E;   /* Anthracite chaud — sidebar + texte principal */
    --ink-2:      #3A332A;   /* Texte secondaire */
    --muted:      #7B7264;   /* Labels, méta, placeholder */
    --muted-2:    #A8A092;   /* Désactivé, glyphes décoratifs */

    --brick:      #B85A3C;   /* Accent primaire — boutons, prix, liens */
    --brick-soft: #E9CDBE;   /* Fonds doux brique (avatars, pills) */
    --brick-deep: #8E3F26;   /* Brique au hover */

    --forest:      #4D5E33;  /* Accent secondaire — succès, payé */
    --forest-soft: #D5DDC4;  /* Fond doux pill succès */

    --cream:   #F4EDDD;      /* Fond crème (hover lignes, fond doux) */
    --paper:   #FAFAF7;      /* Fond de page (sous les cartes) */
    --surface: #FFFFFF;      /* Surface des cartes, du chrome */
    --border:   #E8E3D6;     /* Bordure standard */
    --border-2: #DCD5C3;     /* Bordure hover, séparateur fort */

    /* ── Statuts ─────────────────────────────────────────── */
    --warn:        #C28A1A;
    --warn-soft:   #F6E8C8;
    --danger:      #A0392B;
    --danger-soft: #F0D5CF;

    /* ── Typographie ─────────────────────────────────────── */
    --font-ui:     "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif:  "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-mono:   "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ── Rayons ──────────────────────────────────────────── */
    --r-sm: 5px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 10px;

    /* ── Espacement (échelle 4 px) ───────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;

    /* ── Aliases — compatibilité avec le CSS et les thèmes existants
         Chaque thème (Récolte, Terre Cuite…) redéfinit --anthracite,
         --rouge etc. directement — ces aliases ne s'appliquent donc
         qu'au :root nu (rarement actif puisqu'un thème est toujours
         posé via data-theme). À retirer une fois les composants
         migrés vers les variables d'ancre. ──────────────────── */
    --anthracite:  var(--ink);
    --texte:       var(--ink);
    --rouge:       var(--brick);
    --rouge-hover: var(--brick-deep);
    --vert:        var(--forest);
    --vert-clair:  var(--forest-soft);
    --beige:       var(--paper);
    --gris-bord:   var(--border);
    --gris-clair:  var(--cream);
    --success:     var(--forest);
    --warning:     var(--warn);
    --info:        var(--ink-2);

    /* ── Variables historiques non aliasées (utilisées ailleurs) ── */
    --blanc:       #FFFFFF;
    --ombre:       0 2px 12px rgba(0,0,0,0.08);
    --ombre-forte: 0 4px 24px rgba(0,0,0,0.15);
    --radius:      var(--r-xl);
    --transition:  0.2s ease;
}

/* ── Mode sombre (à activer plus tard via data-theme="dark") ── */
[data-theme="dark"] {
    --ink:         #F4EDDD;
    --ink-2:       #D9D2C0;
    --muted:       #8E8674;
    --muted-2:     #5E574B;
    --paper:       #14110E;
    --surface:     #1C1814;
    --cream:       #25201A;
    --border:      #2E2820;
    --border-2:    #3A332A;
    --brick:       #D67A5C;
    --brick-soft:  #3F231A;
    --forest:      #8FA475;
    --forest-soft: #2C3525;
}

/* ── Chiffres tabulaires par défaut sur le chrome de l'admin ── */
html, body {
    font-feature-settings: "ss01", "cv11", "tnum";
}
.tnum, td.num, th.num, .kpi .val, .mono {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SYSTÈME DE THÈMES — Spec pour ajouter une nouvelle palette
   ============================================================
   La palette par défaut "Croque-Végé" (Récolte) est définie dans
   :root ci-dessus. Pour ajouter un thème, créer un bloc :

       html[data-theme="nom"] {
           ── Tokens essentiels (impact visuel important) ──
           --ink:        #...  (sidebar, texte principal)
           --paper:      #...  (fond de page)
           --surface:    #...  (cartes, tableaux, topbar)
           --brick:      #...  (boutons primaires, prix, CTA, accents)
           --forest:     #...  (succès, accents secondaires)
           --border:     #...  (bordures de cartes, séparateurs)
           --cream:      #...  (hovers, fonds doux)

           ── Tokens optionnels (impact moyen, fallback OK si omis) ──
           --ink-2:      #...  (texte secondaire — défaut: même que --ink en clair)
           --muted:      #...  (labels, méta)
           --muted-2:    #...  (décoratifs, désactivé)
           --brick-soft: #...  (fond doux brique, avatars, pills)
           --brick-deep: #...  (brick au hover)
           --forest-soft: #...  (fond doux succès)
           --border-2:   #...  (bordure hover, séparateur fort)

           ── Statuts (rarement override — défauts globaux conviennent) ──
           --warn:        #...
           --warn-soft:   #...
           --danger:      #...
           --danger-soft: #...
       }

   IMPORTANT : ne PAS définir les anciennes vars (--anthracite,
   --rouge, --vert, --beige, --gris-bord, --gris-clair) — elles sont
   des aliases qui pointent automatiquement vers les tokens d'ancrage
   ci-dessus. Override les ancrages → les aliases suivent.
   ============================================================ */

/* ── Thème : Forêt ─────────────────────────────────────────── */
html[data-theme="foret"] {
    --ink:         #1A2614;
    --ink-2:       #2E3D26;
    --muted:       #5F7355;
    --muted-2:     #8A9E7F;

    --brick:       #3B7A2E;
    --brick-soft:  #C8E2C0;
    --brick-deep:  #2A5E1F;

    --forest:      #8B6B3D;
    --forest-soft: #EDE0CB;

    --cream:       #EEF4E8;
    --paper:       #F7FAF5;
    --surface:     #FFFFFF;
    --border:      #D4E2CC;
    --border-2:    #BFCFB5;

    --warn:        #B8860B;
    --warn-soft:   #F5EDCF;
    --danger:      #9B2D20;
    --danger-soft: #F2D6CF;
}

/* ── Thème : Aubergine ──────────────────────────────────────── */
html[data-theme="aubergine"] {
    --ink:         #1E1224;
    --ink-2:       #2F2039;
    --muted:       #6B5578;
    --muted-2:     #937FA0;

    --brick:       #6B2D5B;
    --brick-soft:  #E4C8DD;
    --brick-deep:  #4E1C43;

    --forest:      #A07830;
    --forest-soft: #F0E4CB;

    --cream:       #F4EDF2;
    --paper:       #FAF7F9;
    --surface:     #FFFFFF;
    --border:      #E4D6E0;
    --border-2:    #D4C2CE;

    --warn:        #B8860B;
    --warn-soft:   #F5EDCF;
    --danger:      #9B2D20;
    --danger-soft: #F2D6CF;
}

/* ── Thème : Vert Nature ───────────────────────────────────── */
html[data-theme="vert-nature"] {
    --ink:         #1C1C1C;
    --ink-2:       #333333;
    --muted:       #6B6B6B;
    --muted-2:     #999999;

    --brick:       #4A7C34;
    --brick-soft:  #C9DFC0;
    --brick-deep:  #35601F;

    --forest:      #5A8A3E;
    --forest-soft: #D6E8CC;

    --cream:       #F0F2ED;
    --paper:       #F7F8F5;
    --surface:     #FFFFFF;
    --border:      #DCDEDA;
    --border-2:    #C8CBC4;

    --warn:        #B8960B;
    --warn-soft:   #F5F0CF;
    --danger:      #9B2D20;
    --danger-soft: #F2D6CF;
}

/* ── Sélecteur de thème (sidebar) ───────────────────────── */
.theme-switcher {
    border-top: 1px solid rgba(255,255,255,0.08);
    position: relative;
}

/* ── Sélecteur de backend email ──────────────────────────── */
.email-switcher {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.65rem 1.25rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.email-switcher-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-weight: 500;
}
.email-backend-select {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}
.email-backend-select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
}
.email-backend-select option {
    background: #2a2a2a;
    color: #fff;
}
.email-test-btn {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.74rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}
.email-test-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.email-test-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.email-test-status {
    font-size: 0.72rem;
    min-height: 1em;
    color: rgba(255,255,255,0.6);
    word-break: break-word;
}
.email-test-status.ok  { color: #6FD17E; }
.email-test-status.err { color: #E97B7B; }

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 1.25rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
}
.theme-toggle-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    border-left-color: rgba(255,255,255,0.3);
}

.theme-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    right: 12px;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 0.5rem;
    z-index: 2000;
    /* Cap la hauteur et scroll interne quand beaucoup de thèmes —
       sinon le dropdown dépasse hors viewport sur petits écrans. */
    max-height: 75vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.theme-picker.open { display: block; }

/* Scrollbar fine (WebKit + Firefox) */
.theme-picker::-webkit-scrollbar { width: 6px; }
.theme-picker::-webkit-scrollbar-track { background: transparent; }
.theme-picker::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.theme-picker::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
.theme-picker { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }

.theme-picker-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0.3rem 0.5rem 0.5rem;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    /* padding-right étendu pour laisser place au bouton ✕ d'effacement */
    padding: 0.4rem 1.8rem 0.4rem 0.6rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s;
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    position: relative;
}
.theme-option:hover { background: #f5f5f5; }
.theme-option.active { background: #f0f0f0; font-weight: 700; }

/* Bouton × pour masquer un thème (injecté en JS, sauf recolte/custom) */
.theme-delete-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #888;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0;
    font-family: inherit;
}
.theme-option:hover .theme-delete-btn { opacity: 1; }
.theme-delete-btn:hover {
    background: var(--danger);
    color: #fff;
}

/* Lien "Tout réafficher" en bas du dropdown — discret */
.theme-restore-link {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 0.35rem;
    padding: 0.4rem 0.5rem 0.2rem;
    font-size: 0.7rem;
    color: #888;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: color 0.15s;
}
.theme-restore-link:hover { color: var(--rouge); }

.theme-swatches {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* ── Option « Personnaliser » dans le dropdown des thèmes ─ */
.theme-option-custom {
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 0.3rem;
    padding-top: 0.7rem;
    font-weight: 600;
    color: var(--rouge);
}
.swatch.gradient {
    background: conic-gradient(#A14D32, #7A9268, #6E58A8, #D4962A, #C42738, #A14D32);
    border-color: rgba(0,0,0,0.15);
}

/* ── Modal d'édition de palette personnalisée ────────────── */
.palette-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
}
.palette-modal-overlay.open { display: flex; }
.palette-modal {
    background: var(--surface);
    color: var(--texte);
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 820px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    font-family: var(--font-ui);
}
.palette-modal h3 {
    margin: 0 0 0.3rem 0;
    color: var(--texte);
    font-size: 1.15rem;
    font-weight: 700;
}
.palette-modal-subtitle {
    color: #888;
    font-size: 0.83rem;
    margin-bottom: 1.2rem;
}
.palette-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--gris-bord);
}
.palette-field:last-child { border-bottom: none; }
.palette-field-label {
    flex: 1;
    min-width: 0;
}
.palette-field-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texte);
}
.palette-field-help {
    display: block;
    color: #888;
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 0.1rem;
    line-height: 1.3;
}
.palette-field input[type="color"] {
    width: 44px;
    height: 36px;
    border: 1px solid var(--gris-bord);
    border-radius: 7px;
    cursor: pointer;
    background: none;
    padding: 2px;
    flex-shrink: 0;
}
.palette-field-hex {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.74rem;
    color: #777;
    min-width: 64px;
    text-align: right;
    flex-shrink: 0;
}
.palette-advanced-toggle {
    background: none;
    border: none;
    color: var(--rouge);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 1rem 0 0;
    padding: 0.5rem 0;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
.palette-advanced-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.palette-advanced-section.open { max-height: 800px; }
.palette-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--gris-bord);
    flex-wrap: wrap;
}
.palette-modal-actions .btn {
    min-width: 110px;
}
.palette-modal-actions .btn-reset {
    margin-right: auto;
    color: #999;
    background: none;
    border: 1px solid var(--gris-bord);
}
.palette-modal-actions .btn-reset:hover {
    color: var(--danger);
    border-color: var(--danger);
}
@media (max-width: 600px) {
    .palette-modal { padding: 1rem; border-radius: 12px 12px 0 0; max-height: 95vh; }
    .palette-modal-actions { gap: 0.4rem; }
    .palette-modal-actions .btn { min-width: 0; flex: 1; min-height: 44px; }
    .palette-modal-actions .btn-reset { flex: 0 0 auto; }
}

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

body {
    font-family: var(--font-ui);
    font-weight: 400;
    color: var(--texte);
    background: var(--beige);
    min-height: 100vh;
    line-height: 1.6;
}

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

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

/* ── Typographie ────────────────────────────────────────── */
.logo-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; color: var(--anthracite); }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.text-rouge  { color: var(--rouge); }
.text-vert   { color: var(--vert); }
.text-muted  { color: #888; font-size: 0.875rem; }

/* ── Layout admin (sidebar + main) ─────────────────────── */
.admin-body {
    background: var(--beige);
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* ── Barre latérale ─────────────────────────────────────── */
.sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--anthracite);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-brand {
    display: block;
    padding: 1.4rem 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.sidebar-nav { flex: 1; padding: 0.75rem 0; }

.sidebar-nav ul { list-style: none; }

.sidebar-nav li { margin: 0; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1.25rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
    color: var(--blanc);
    background: rgba(255,255,255,0.07);
    border-left-color: rgba(255,255,255,0.3);
}

.sidebar-nav a.active {
    color: var(--blanc);
    background: var(--rouge);
    border-left-color: var(--rouge);
    font-weight: 600;
}

/* ── Zone principale ────────────────────────────────────── */
/* Plus de margin-left : la sidebar v2 (.sb) est sticky dans un flex,
   elle prend déjà sa place dans le layout normal. */
.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;   /* permet aux enfants de respecter la largeur dispo */
}

/* ── Barre supérieure ───────────────────────────────────── */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--gris-bord);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.topbar-user {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--anthracite);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

#autosave-status {
    font-size: 0.78rem;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.topbar-logout {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--gris-bord);
    transition: all var(--transition);
}

.topbar-logout:hover {
    background: var(--rouge);
    color: var(--blanc);
    border-color: var(--rouge);
}

/* ── Footer admin ───────────────────────────────────────── */
.admin-footer {
    background: var(--gris-clair);
    color: #999;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    margin-top: auto;
    border-top: 1px solid var(--gris-bord);
}

.admin-footer a { color: #aaa; }

/* ── Layout principal ───────────────────────────────────── */
.page-wrapper {
    width: 100%;
    padding: 2rem 2.5rem;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gris-bord);
    position: sticky;
    top: 52px;
    z-index: 800;
    background: var(--beige);
}

.page-header h1 { color: var(--anthracite); }

/* ── Cartes ─────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    overflow: hidden;
}

/* En-têtes de cartes : fond foncé uniforme + barre d'accent à gauche
   pour différencier subtilement les sections (au lieu de 3 fonds saturés). */
.card-header {
    background: var(--anthracite);
    color: var(--blanc);
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 4px solid var(--anthracite);
}

.card-header.rouge { border-left-color: var(--rouge); }
.card-header.vert  { border-left-color: var(--vert); }

.card-body { padding: 1.25rem; }

/* ── Toggle liste courriel ──────────────────────────────── */
button.toggle-courriel {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

button.toggle-courriel:disabled { opacity: 0.5; cursor: wait; }

.toggle-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}

.toggle-pill.on {
    background: #D4EDDA;
    color: #155724;
}

.toggle-pill.off {
    background: #F0F0F0;
    color: #999;
}

button.toggle-courriel:hover .toggle-pill.on  { background: #F8D7DA; color: #721C24; }
button.toggle-courriel:hover .toggle-pill.off { background: #D4EDDA; color: #155724; }

/* ── Badges de statut ───────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-brouillon  { background: #E8E8E8; color: #555; }
.badge-publié     { background: #D4EDDA; color: #155724; }
.badge-fermé      { background: #FFF3CD; color: #856404; }
.badge-archivé    { background: #F8D7DA; color: #721C24; }

/* ── Boutons ────────────────────────────────────────────── */
/* .btn — base v2 : surface + bordure neutre.
   Les modifiers legacy (.btn-primaire, .btn-fantome, etc.) restent en
   place et s'alignent sur leur background-color via border-color explicite. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--cream); }

.btn-primaire {
    background: var(--rouge);
    color: var(--blanc);
    border-color: var(--rouge);
}
.btn-primaire:hover {
    background: var(--rouge-hover);
    border-color: var(--rouge-hover);
    color: var(--blanc);
}

.btn-vert {
    background: var(--vert);
    color: var(--blanc);
    border-color: var(--vert);
}
.btn-vert:hover {
    background: var(--vert-clair);
    border-color: var(--vert-clair);
    color: var(--blanc);
}

.btn-sombre {
    background: var(--anthracite);
    color: var(--blanc);
    border-color: var(--anthracite);
}
.btn-sombre:hover {
    background: #404040;
    border-color: #404040;
    color: var(--blanc);
}

.btn-outline {
    background: transparent;
    color: var(--rouge);
    border: 2px solid var(--rouge);
}
.btn-outline:hover { background: var(--rouge); color: var(--blanc); }

.btn-fantome {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--gris-bord);
}
.btn-fantome:hover { background: var(--gris-clair); }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }

.btn-danger {
    background: #8B1A1A;
    color: var(--blanc);
    border-color: #8B1A1A;
}
.btn-danger:hover {
    background: #6B1010;
    border-color: #6B1010;
    color: var(--blanc);
}

/* ── Formulaires ────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }

label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
    color: var(--anthracite);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--gris-bord);
    border-radius: 7px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: normal;
    color: var(--texte);
    background: var(--surface);
    transition: border-color var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

textarea { resize: vertical; min-height: 80px; }

/* Forcer la même hauteur sur les date-pickers et les selects natifs —
   macOS Chrome fixe une hauteur OS pour <select> qui ignore line-height. */
input[type="date"],
input[type="time"],
select {
    height: 2.4rem;
}

.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

thead th {
    background: var(--anthracite);
    color: var(--blanc);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 700;
}

tbody tr { border-bottom: 1px solid var(--gris-bord); transition: background var(--transition); }
tbody tr:hover { background: var(--gris-clair); }
tbody tr:last-child { border-bottom: none; }
td { padding: 0.75rem 1rem; font-size: 0.9rem; }

/* ── Alertes ────────────────────────────────────────────── */
.alert {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.alert-success { background: #D4EDDA; color: #155724; border-left: 4px solid #28A745; }
.alert-danger  { background: #F8D7DA; color: #721C24; border-left: 4px solid var(--rouge); }
.alert-warning { background: #FFF3CD; color: #856404; border-left: 4px solid #FFC107; }
.alert-info    { background: #D1ECF1; color: #0C5460; border-left: 4px solid #17A2B8; }

/* ── Stats cards (tableau de bord) ─────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--ombre);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid var(--rouge);
}

.stat-card.vert   { border-left-color: var(--vert); }
.stat-card.sombre { border-left-color: var(--anthracite); }

.stat-icon {
    font-size: 1.8rem;
    opacity: 0.8;
}

.stat-valeur {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--anthracite);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
}

/* ── Section "Performance des menus actifs" ─────────────── */
.actifs-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: stretch;
}
@media (max-width: 1100px) {
    .actifs-stats-grid { grid-template-columns: 1fr 1fr; }
    .actifs-combo { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .actifs-stats-grid { grid-template-columns: 1fr; }
    .actifs-combo { grid-column: auto; }
}
.actifs-card {
    align-items: flex-start;
}
.actifs-card-content {
    flex: 1;
    min-width: 0;
}

/* Carte combinée : grand chiffre + 2 sous-stats */
.actifs-combo { padding: 1.25rem; }
.actifs-combo-headline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px dashed var(--gris-bord);
}
.actifs-combo-sub {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.actifs-combo-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.actifs-combo-label {
    font-size: 0.82rem;
    color: #888;
}
.actifs-combo-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

/* Mini-graphique des ventes (barres verticales, 13 derniers menus) */
.actifs-chart {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--gris-bord);
}
.actifs-chart-title {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.actifs-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 50px;
    padding-bottom: 2px;
}
.actifs-chart-bar-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 6px;
    cursor: help;
}
.actifs-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--rouge), var(--rouge-hover));
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: opacity 0.15s ease;
    opacity: 0.55;
}
.actifs-chart-bar-wrap:hover .actifs-chart-bar { opacity: 1; }
.actifs-chart-bar--actif {
    background: linear-gradient(180deg, var(--vert), var(--vert-clair));
    opacity: 1;
}
.actifs-chart-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.actifs-top-plats { padding: 1rem 1.25rem; }
.actifs-top-titre {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.7rem;
}

/* Histogramme horizontal (nom — barre — valeur) */
.histo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 2fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.28rem 0;
    font-size: 0.86rem;
}
.histo-nom {
    color: var(--texte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.histo-bar-wrapper {
    background: var(--gris-clair);
    border-radius: 6px;
    height: 9px;
    overflow: hidden;
}
.histo-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--rouge), var(--rouge-hover));
    border-radius: 6px;
    transition: width 0.4s ease;
}
.histo-bar.histo-bar-vert {
    background: linear-gradient(90deg, var(--vert), var(--vert-clair));
}
.histo-val {
    font-weight: 700;
    color: var(--rouge);
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.histo-val.histo-val-vert { color: var(--vert); }

/* ── En-tête de section (titre + lien "voir tout") ─────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* ── Grille tableau de bord (3 colonnes fixes) ──────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ── Grille de menus (liste menus) ─────────────────────── */
.menus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.25rem;
}

.menu-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.menu-card:hover { box-shadow: var(--ombre-forte); }

.menu-card-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--anthracite), #444);
    color: var(--blanc);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-card-body { padding: 1rem 1.25rem; }

.menu-card-footer {
    padding: 0.75rem 1.25rem;
    background: var(--gris-clair);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--gris-bord);
}

/* ── Cartes commandes (tableau de bord) ─────────────────── */
.commande-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.commande-dash-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    overflow: hidden;
    transition: box-shadow var(--transition);
    height: 100%;
}

.commande-card-link:hover .commande-dash-card {
    box-shadow: var(--ombre-forte);
}

.commande-dash-header {
    background: linear-gradient(135deg, #3a3a3a, #555);
    color: var(--blanc);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.commande-dash-client {
    font-weight: 700;
    font-size: 1rem;
}

.commande-dash-menu {
    font-size: 0.78rem;
    opacity: 0.65;
    margin-top: 0.15rem;
}

.commande-dash-badges {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-end;
}

.badge-mini {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-mini.vert   { background: #D4EDDA; color: #155724; }
.badge-mini.gris   { background: #E8E8E8; color: #555; }
.badge-mini.orange { background: #FFF3CD; color: #856404; }

.commande-dash-body {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.commande-dash-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.commande-dash-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--anthracite);
    line-height: 1;
}

.commande-dash-lbl {
    font-size: 0.72rem;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.commande-dash-date {
    font-size: 0.8rem;
    color: #aaa;
}

/* ── Cartes prochaines collectes (tableau de bord) ─────── */
.collecte-dash-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.collecte-dash-header {
    background: linear-gradient(135deg, #5A6B3D, #738A52);
    color: var(--blanc);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.collecte-dash-client {
    font-weight: 700;
    font-size: 1rem;
}

.collecte-dash-tel {
    font-size: 0.78rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.collecte-dash-date {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.9;
}

.collecte-dash-heure {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: right;
}

.collecte-dash-body {
    padding: 0.75rem 1.25rem;
    flex: 1;
    max-height: 180px;
    overflow-y: auto;
}

.collecte-dash-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.collecte-dash-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--gris-bord);
    font-size: 0.85rem;
    gap: 0.5rem;
}

.collecte-dash-liste li:last-child { border-bottom: none; }

.collecte-item-nom {
    color: var(--anthracite);
    flex: 1;
}

.collecte-item-qty {
    font-weight: 700;
    color: var(--rouge);
    white-space: nowrap;
    font-size: 0.8rem;
}

.collecte-dash-footer {
    padding: 0.75rem 1.25rem;
    background: var(--gris-clair);
    border-top: 1px solid var(--gris-bord);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ── Boutons icône inline (calendrier) ──────────────────── */
.btn-icone-danger,
.btn-icone-vert {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.1rem 0.3rem;
    border-radius: 5px;
    line-height: 1;
    transition: background var(--transition);
    flex-shrink: 0;
}

.btn-icone-danger:hover { background: #fde8e8; }
.btn-icone-vert:hover   { background: #d4edda; }

/* ── Calendrier de collecte ─────────────────────────────── */
.calendrier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.creneau-libre {
    background: #EDF3E8;
    border: 1px solid #C3E6CB;
    color: var(--vert);
}

.creneau-pris {
    background: #FFF5F5;
    border: 1px solid #F5C6CB;
    color: var(--rouge);
    font-weight: 600;
}

.creneau-item {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Formulaire commande client ─────────────────────────── */
.commande-header {
    background: var(--anthracite);
    padding: 2rem;
    text-align: center;
    color: var(--blanc);
}

.commande-header .logo-script {
    font-size: 2.5rem;
    color: var(--blanc);
}

.commande-header .logo-script span { color: var(--rouge); }

.etapes {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 2rem auto;
    max-width: 600px;
}

.etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    font-size: 0.75rem;
    color: #AAA;
}

.etape::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--gris-bord);
}

.etape:last-child::after { display: none; }

.etape-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gris-bord);
    color: #AAA;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    position: relative;
    z-index: 1;
}

.etape.active .etape-num {
    background: var(--rouge);
    color: var(--blanc);
}

.etape.active { color: var(--rouge); font-weight: 600; }
.etape.done .etape-num { background: var(--vert); color: var(--blanc); }
.etape.done { color: var(--vert); }

/* ── Cartes de plats ────────────────────────────────────── */
.plats-section { margin-bottom: 2rem; }

.plats-section-titre {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--rouge);
    display: inline-block;
}

.plat-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    display: grid;
    grid-template-columns: 180px 1fr;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: box-shadow var(--transition);
}

.plat-card:hover { box-shadow: var(--ombre-forte); }

.plat-photo {
    width: 180px;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    background: var(--beige);
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.plat-photo:hover { opacity: 0.88; }

.plat-photo-placeholder {
    width: 180px;
    height: 100%;
    min-height: 130px;
    background: linear-gradient(135deg, var(--beige), #e8e0d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 1.5rem;
}
.lightbox-overlay.actif { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.6);
    cursor: default;
}
.lightbox-fermer {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    opacity: 0.8;
}
.lightbox-fermer:hover { opacity: 1; }
.lightbox-legende {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    text-align: center;
    font-family: var(--font-ui);
}

.plat-info {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plat-nom {
    font-weight: 700;
    font-size: 1rem;
    color: var(--anthracite);
}

.plat-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

.plat-allergie {
    font-size: 0.75rem;
    color: var(--rouge);
    font-weight: 600;
}

.plat-quantites {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gris-bord);
}

.qty-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.qty-price {
    font-size: 0.75rem;
    color: var(--rouge);
    font-weight: 600;
}

.qty-input {
    width: 60px !important;
    text-align: center;
    padding: 0.35rem !important;
    font-size: 0.9rem !important;
}

/* ── Panneau total (panier flottant) ────────────────────── */
.panier-flottant {
    position: sticky;
    top: 68px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre-forte);
    overflow: hidden;
}

.panier-header {
    background: var(--anthracite);
    color: var(--blanc);
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.panier-body { padding: 1rem; }

.panier-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--gris-bord);
}

.panier-ligne:last-child { border-bottom: none; }

.panier-total {
    background: var(--rouge);
    color: var(--blanc);
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
}

/* ── Créneaux de collecte (client) ──────────────────────── */
.journee-bloc {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.journee-titre {
    background: var(--vert);
    color: var(--blanc);
    padding: 0.85rem 1.25rem;
    font-weight: 700;
}

.creneaux-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    padding: 1rem;
}

.creneau-btn {
    padding: 0.6rem;
    border-radius: 7px;
    border: 2px solid var(--gris-bord);
    background: var(--surface);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.creneau-btn:hover { border-color: var(--vert); color: var(--vert); background: #EDF3E8; }
.creneau-btn.selected { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.creneau-btn.pris { background: #F5F5F5; color: #CCC; border-color: #EEE; cursor: not-allowed; }

/* ── Page de login ──────────────────────────────────────── */
/* ── Login + mot de passe oublié — refonte v2 ──────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top left, rgba(184,90,60,0.10), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(77,94,51,0.10), transparent 50%),
        linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
    padding: 2rem 1rem;
    font-family: var(--font-ui);
}

.login-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.35),
        0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
}

/* Marque en haut du card : logo (image Croque-Végé) + sous-titre admin */
.login-brand {
    margin-bottom: 1.75rem;
}
.login-brand img {
    height: 56px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
}
.login-brand .sub {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 500;
}

/* Titre éditorial */
.login-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.013em;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.1;
}
.login-title em { font-style: italic; color: var(--brick); }

.login-lede {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Formulaire compact */
.login-card form { text-align: left; }
.login-card .form-group { margin-bottom: 1rem; }
.login-card label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 6px;
}
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 14px;
    font-family: var(--font-ui);
    color: var(--ink);
    transition: border-color .12s ease;
}
.login-card input:focus {
    outline: none;
    border-color: var(--ink);
}

/* Bouton primaire pleine largeur */
.login-card .btn-submit {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .12s ease;
    margin-top: 0.5rem;
}
.login-card .btn-submit:hover { background: #000; }

/* Lien secondaire (mot de passe oublié / retour) */
.login-card .login-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: none;
    transition: color .12s ease;
}
.login-card .login-link:hover { color: var(--brick); }

@media (max-width: 600px) {
    .login-card { padding: 2rem 1.5rem; }
    .login-brand img { height: 48px; }
    .login-title { font-size: 24px; }
}

/* ── Footer (client pages) ──────────────────────────────── */
footer {
    background: var(--anthracite);
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
    margin-top: 3rem;
}

footer a { color: rgba(255,255,255,0.8); }

/* ── Utilitaires ────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-1        { gap: 0.5rem; }
.gap-2        { gap: 1rem; }
.mt-1         { margin-top: 0.5rem; }
.mt-2         { margin-top: 1rem; }
.mt-3         { margin-top: 1.5rem; }
.mb-1         { margin-bottom: 0.5rem; }
.mb-2         { margin-bottom: 1rem; }
.mb-3         { margin-bottom: 1.5rem; }
.p-1          { padding: 0.5rem; }
.p-2          { padding: 1rem; }
.w-100        { width: 100%; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.font-bold    { font-weight: 700; }
.d-none       { display: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .sidebar { width: 64px; min-width: 64px; }
    .sidebar-nav a span { display: none; }
    .sidebar-brand img { height: 28px; }
    /* .admin-main n'a plus besoin de margin-left avec la sidebar v2 sticky */
}

@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-wrapper { padding: 1rem 1.25rem; }
    .dashboard-grid { grid-template-columns: 1fr; }

    .plat-card {
        grid-template-columns: 100px 1fr;
    }
    .plat-photo, .plat-photo-placeholder { width: 100px; min-height: 100px; }

    .form-row { grid-template-columns: 1fr; }

    .commande-layout { flex-direction: column; }
    .panier-flottant { position: static; }
}

/* ============================================================
   📱 MOBILE (≤ 600px) — Interface client uniquement
   ============================================================
   Surcharges pour téléphones (iPhone SE 375px, iPhone 12+ 390px,
   Galaxy 360px). N'affecte PAS l'admin (sidebar 220px reste figée
   — Anna utilise un ordinateur).
   Approche : desktop-first. Tout ce qui est défini ici override
   le CSS desktop quand la largeur ≤ 600px.
   ============================================================ */
@media (max-width: 600px) {

    /* ───── Container principal ───── */
    .client-container {
        padding: 1rem 0.85rem !important;
    }

    /* ───── Header client (logo + tagline) ───── */
    .commande-header {
        padding: 1rem 0.75rem;
    }
    .commande-header img {
        height: 48px !important;
    }
    .commande-header p {
        font-size: 0.78rem !important;
        margin-top: 0.15rem !important;
    }

    /* ───── Indicateur d'étapes ───── */
    .etapes {
        margin: 1rem auto;
        padding: 0 0.5rem !important;
        font-size: 0.62rem;
    }
    .etape {
        font-size: 0.65rem;
        line-height: 1.15;
    }
    .etape-num {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
        margin-bottom: 0.25rem;
    }
    .etape::after { top: 12px; }   /* recentre le trait avec le cercle réduit */

    /* ───── Layouts 2 colonnes (étapes 2, 3, 4) → 1 colonne ───── */
    .commande-layout,
    .commande-layout-creneau,
    .commande-layout-confirm {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ───── Panier flottant → sticky en bas du viewport ───── */
    /* Note : on garde le panier dans le flow naturel (après la liste
       de plats) mais on le pin au bas du viewport pour qu'il reste
       toujours visible quand on défile dans la liste. */
    .panier-flottant {
        position: sticky;
        top: auto;
        bottom: 0;
        margin: 1rem -0.85rem 0;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
        max-height: 45vh;
        overflow-y: auto;
        z-index: 100;
    }
    .panier-body { padding: 0.75rem; }
    .panier-ligne { font-size: 0.8rem; }
    .panier-total {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* ───── Cartes de plats ───── */
    .plat-card {
        grid-template-columns: 95px 1fr !important;
        gap: 0.6rem;
        padding: 0.7rem;
    }
    .plat-photo,
    .plat-photo-placeholder {
        width: 95px !important;
        min-height: 95px !important;
    }
    .plat-nom { font-size: 0.92rem; }
    .plat-description { font-size: 0.78rem; }
    .plat-allergie { font-size: 0.72rem; }
    .plats-section-titre { font-size: 1rem; }

    /* ───── Contrôles de quantité (touch targets 44px Apple/Google) ───── */
    .qty-v-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }
    .qty-v-val {
        min-width: 28px;
        font-size: 1rem;
    }
    .qty-input {
        font-size: 16px !important;   /* anti-zoom Safari iOS */
        min-height: 44px;
        width: 70px !important;
    }
    .plat-quantites-row {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    /* ───── Créneaux de collecte ───── */
    .creneaux-grille {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.4rem;
        padding: 0.75rem;
    }
    .creneau-btn {
        padding: 0.7rem 0.4rem;
        font-size: 0.85rem;
        min-height: 44px;
    }

    /* ───── Formulaires + login client ───── */
    /* font-size: 16px obligatoire — sinon Safari iOS zoome automatiquement
       sur les inputs ayant focus, ce qui casse le layout. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
    .form-control:not(textarea):not(.qty-input) {
        min-height: 48px;
    }
    /* .login-wrapper et .login-card responsive : voir le bloc plus haut */

    /* ───── Boutons ───── */
    .btn {
        min-height: 44px;
        font-size: 0.92rem;
        padding: 0.7rem 1rem;
    }
    /* Sur mobile, les CTA principaux du flow commande sont pleine largeur */
    .btn-primaire,
    .btn-fantome {
        width: 100%;
    }
    /* Sauf si déjà groupés dans un conteneur horizontal explicite */
    .flex .btn,
    .btn-group .btn {
        width: auto;
    }

    /* ───── Cartes / sections ───── */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    /* ───── Footer ───── */
    footer {
        font-size: 0.72rem;
        line-height: 1.7;
        padding: 1rem 0.5rem;
        margin-top: 2rem;
    }
    /* Les séparateurs &nbsp;·&nbsp; peuvent forcer overflow — on les
       laisse wrap naturellement. */

    /* ───── Lightbox photo (étape 2) ───── */
    .lightbox-content img,
    #lightbox-img {
        max-width: 95vw !important;
        max-height: 70vh !important;
    }
    .lightbox-legende {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }

    /* ───── Alerts ───── */
    .alert {
        font-size: 0.88rem;
        padding: 0.75rem;
    }
}


/* ============================================================
   SYSTÈME DE COMPOSANTS — Refonte admin v2
   Réf : design_handoff_admin_refonte/02_Tableau_de_bord.html
   Ces classes sont la nouvelle référence. Les anciennes
   (.badge-*, .stat-card, .card-header.rouge…) restent en place
   et seront retirées au fur et à mesure de la migration des
   templates par étape (D, E, F…).
   ============================================================ */

/* ── Modifiers .btn v2 (s'ajoutent au .btn base déjà mis à jour) ── */
.btn.pri {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    padding-top: calc(0.55rem - 1px);
    padding-bottom: calc(0.55rem - 1px);
}
.btn.pri:hover { background: #000; border-color: #000; }

.btn.brick {
    background: var(--brick);
    color: #fff;
    border-color: var(--brick);
}
.btn.brick:hover {
    background: var(--brick-deep);
    border-color: var(--brick-deep);
}

.btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}
.btn.ghost:hover { background: var(--cream); }

.btn.sm {
    padding: 6px 10px;
    font-size: 12px;
}

.btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
}

/* ── Pills (statuts) — remplace .badge-* à la migration ──── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
}
.pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.pill.ok    { background: var(--forest-soft); color: var(--forest); }
.pill.wait  { background: var(--warn-soft);   color: var(--warn); }
.pill.no    { background: var(--danger-soft); color: var(--danger); }
.pill.gray  { background: var(--cream);       color: var(--muted); }
.pill.live  { background: #FFF1E6;            color: var(--brick); }
.pill.live .dot { animation: pill-pulse 1.4s ease-in-out infinite; }
@keyframes pill-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ── KPI (carte de métrique principale) ──────────────────── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 1100px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kpi-row { grid-template-columns: 1fr; }
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
    position: relative;
    transition: border-color .12s ease;
}
.kpi:hover { border-color: var(--border-2); }
.kpi .lbl {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kpi .lbl svg {
    width: 15px;
    height: 15px;
    color: var(--muted-2);
    stroke-width: 1.6;
}
.kpi .val {
    font-family: var(--font-serif);
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--ink);
}
.kpi .val .sm {
    font-size: 22px;
    color: var(--muted);
    font-family: var(--font-serif);
    margin-left: 2px;
}
.kpi .val .deci {
    font-size: 30px;
    color: var(--ink-2);
}
.kpi .delta {
    margin-top: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--forest);
    font-feature-settings: "tnum";
    font-weight: 500;
}
.kpi .delta.dn { color: var(--brick); }
.kpi .delta svg { width: 12px; height: 12px; stroke-width: 2.2; }
.kpi .delta .note-d { color: var(--muted); font-weight: 400; margin-left: 2px; }

/* ── Section header (titre serif + lien à droite) ──────── */
.sec-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 40px 0 16px;
    gap: 1rem;
    flex-wrap: wrap;
}
.sec-h h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.013em;
    color: var(--ink);
}
.sec-h h2 em { font-style: italic; color: var(--muted); }
.sec-h .link {
    font-size: 12.5px;
    color: var(--brick);
    text-decoration: none;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-weight: 500;
    transition: color .12s ease;
}
.sec-h .link:hover { color: var(--brick-deep); }
.sec-h .link svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* ── Fil d'Ariane (crumbs) ──────────────────────────────── */
.crumbs {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.crumbs strong { color: var(--ink); font-weight: 500; }
.crumbs svg {
    width: 12px;
    height: 12px;
    stroke-width: 1.5;
    color: var(--muted-2);
}
.crumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color .12s ease;
}
.crumbs a:hover { color: var(--ink); }

/* ── Table v2 (wrapper) ─────────────────────────────────────
   Usage : <div class="tbl-a"><table>...</table></div>
   En-têtes SMALL CAPS, hover discret, montants en chiffres tabulaires. */
.tbl-a {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.tbl-a > table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
.tbl-a thead th {
    background: transparent;
    color: var(--muted);
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: static;            /* override le sticky thead global */
}
.tbl-a tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .12s ease;
}
.tbl-a tbody tr:hover { background: var(--paper); }
.tbl-a tbody tr:last-child { border-bottom: none; }
.tbl-a td {
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--ink);
    vertical-align: middle;
}
.tbl-a td.num,
.tbl-a th.num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.tbl-a td.tnum,
.tbl-a th.tnum {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.tbl-a td.who strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
}
.tbl-a td.who span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
.tbl-a .cell-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.tbl-a .cell-link:hover { color: var(--brick); text-decoration: underline; }
.tbl-a th.col-fixed,
.tbl-a td.col-fixed {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}
.sort-th {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.sort-th:hover { color: var(--brick); }
.sort-th--active { color: var(--brick); }
.sort-th__arrow {
    width: 11px;
    height: 11px;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform .15s;
}
.sort-th__arrow--desc { transform: rotate(180deg); }

/* ── Carte v2 — en-tête SMALL CAPS muted, corps sobre ───── */
.card-a {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.card-a > .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.card-a > .head .tab-tag {
    font-size: 11px;
    color: var(--muted-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.card-a > .body { padding: 18px; }
.card-a > .body.tight { padding: 14px 18px; }


/* ============================================================
   SIDEBAR + TOPBAR v2 — Refonte admin
   Réf : design_handoff_admin_refonte/02_Tableau_de_bord.html
   ============================================================ */

/* ── Sidebar v2 (.sb) ──────────────────────────────────────
   Fond #14110E (--ink), texte blanc, sections nommées,
   pastille utilisateur en bas. */
.sb {
    background: var(--ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 240px;
    flex-shrink: 0;
}

/* En-tête de marque — logo Anna centré (script "Croque-Végé").
   Le logo PNG est déjà la signature du brand, pas besoin de texte à côté. */
.sb-brand {
    padding: 22px 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    color: inherit;
    transition: background .12s ease;
}
.sb-brand:hover { background: rgba(255,255,255,0.03); }
.sb-brand img {
    height: 44px;
    width: auto;
    max-width: 100%;
    filter: invert(1);  /* logo noir → blanc sur fond sombre */
    display: block;
}

/* En-tête de section dans la nav */
.sb-section {
    padding: 20px 14px 8px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

/* Liens de navigation */
.sb a.sb-link {
    padding: 9px 14px;
    margin: 0 8px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 13.5px;
    border-radius: 5px;
    line-height: 1;
    font-weight: 500;
}
.sb a.sb-link:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}
.sb a.sb-link.active {
    background: rgba(184, 90, 60, 0.22);   /* brick à 22% d'opacité */
    color: #fff;
    box-shadow: inset 2px 0 0 var(--brick);
    margin-left: 0;
    padding-left: 22px;
    border-radius: 0 5px 5px 0;
}
.sb a.sb-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.6;
    opacity: 0.85;
    flex-shrink: 0;
}
.sb a.sb-link.active svg {
    opacity: 1;
    color: var(--brick);
}

/* Pastille utilisateur en bas — avatar + nom + email + actions */
.sb-foot {
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 11px;
}
.sb-foot .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brick-soft);
    color: var(--brick-deep);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
.sb-foot .who {
    flex: 1;
    line-height: 1.25;
    min-width: 0;
}
.sb-foot .who .nm {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-foot .who .em {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-foot a,
.sb-foot button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    width: 28px;
    height: 28px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.sb-foot a:hover,
.sb-foot button:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.sb-foot svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.6;
}

/* ── Topbar v2 (.top) ───────────────────────────────────── */
.top {
    background: var(--surface);
    padding: 12px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 60px;
    gap: 1rem;
}

.top .util {
    display: flex;
    gap: 8px;
    align-items: center;
}

.top .util .search-w {
    position: relative;
}
.top .util .search-w input {
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    font-size: 13px;
    width: 280px;
    color: var(--ink);
    font-family: var(--font-ui);
    outline: none;
    transition: border-color .12s, background .12s;
}
.top .util .search-w input::placeholder { color: var(--muted); }
.top .util .search-w input:focus {
    border-color: var(--ink);
    background: var(--surface);
}
.top .util .search-w input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.top .util .search-w .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--muted);
    stroke-width: 1.6;
    pointer-events: none;
}
.top .util .kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 1;
    pointer-events: none;
}

.top .util .icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    display: grid;
    place-items: center;
    color: var(--ink-2);
    cursor: pointer;
    position: relative;
    transition: background .12s, border-color .12s;
}
.top .util .icon-btn:hover { background: var(--cream); }
.top .util .icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.top .util .icon-btn svg { width: 15px; height: 15px; stroke-width: 1.6; }
.top .util .icon-btn .dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brick);
    box-shadow: 0 0 0 2px var(--paper);
}

/* Statut autosave dans la topbar — petit et discret */
.top #autosave-status {
    font-size: 12px;
    color: var(--muted);
    font-feature-settings: "tnum";
}

/* Mobile : sidebar collapse, topbar adapt */
@media (max-width: 900px) {
    .sb {
        width: 64px;
    }
    .sb-brand { padding: 14px 8px; }
    .sb-brand img { height: 30px; }
    .sb-section { display: none; }
    .sb a.sb-link {
        padding: 11px 0;
        justify-content: center;
    }
    .sb a.sb-link.active {
        padding-left: 0;
        padding-right: 2px;
    }
    .sb a.sb-link span:not(.dot) { display: none; }
    .sb-foot {
        padding: 12px 8px;
        flex-direction: column;
        gap: 6px;
    }
    .sb-foot .who { display: none; }
    .top .util .search-w input { width: 180px; }
}
@media (max-width: 600px) {
    .top { padding: 10px 14px; }
    .top .util .search-w { display: none; }
}


/* ============================================================
   DASHBOARD v2 — Composants spécifiques au tableau de bord
   Réf : design_handoff_admin_refonte/02_Tableau_de_bord.html
   ============================================================ */

/* ── En-tête de page éditorial ──────────────────────────── */
.pg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 32px;
    gap: 24px;
    flex-wrap: wrap;
}
.pg-head .eyebrow {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}
.pg-head h1 {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.02;
    color: var(--ink);
    margin: 0;
}
.pg-head h1 em { font-style: italic; color: var(--brick); }
.pg-head .sub {
    font-size: 14px;
    color: var(--ink-2);
    margin-top: 10px;
    max-width: 560px;
    line-height: 1.5;
}
.pg-head .sub b { color: var(--ink); font-weight: 500; }
.pg-head .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.pg-head .actions .btn {
    height: 36px;
    box-sizing: border-box;
}

/* ── Grille 2-col (chart + top list) ────────────────────── */
.col-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-top: 24px;
    align-items: start;        /* cartes à leur hauteur naturelle (pas d'étirement) */
}
@media (max-width: 1100px) {
    .col-2 { grid-template-columns: 1fr; }
}

/* ── Carte graphique des ventes ─────────────────────────── */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 22px 16px;
}
.chart-card .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 1rem;
    flex-wrap: wrap;
}
.chart-card .head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.chart-card .head .sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.chart-card .grand {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.chart-card .grand .deci {
    font-size: 22px;
    color: var(--ink-2);
}
.chart-card .grand .sm {
    font-size: 18px;
    color: var(--muted);
    margin-left: 2px;
}
.chart-card .legend {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.chart-card .legend .it {
    display: flex;
    gap: 6px;
    align-items: center;
}
.chart-card .legend .sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.chart-card .legend .sw.brick   { background: var(--brick); }
.chart-card .legend .sw.forest  { background: var(--forest); }

/* Barres du graphique */
.chart-card .bars {
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 2px 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.chart-card .bars::before,
.chart-card .bars::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    border-top: 1px dashed var(--border);
    pointer-events: none;
}
.chart-card .bars::before { bottom: 60%; }
.chart-card .bars::after  { bottom: 30%; }

.chart-card .bar-w {
    flex: 1;
    height: 100%;              /* clé : sinon le % du .bar tombe à 0 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    position: relative;
    cursor: pointer;
    min-width: 6px;
}
.chart-card .bar-w .bar {
    width: 100%;
    background: var(--brick-soft);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: background .12s ease;
}
.chart-card .bar-w:hover .bar { background: var(--brick); }
.chart-card .bar-w.cur .bar { background: var(--brick); }
.chart-card .bar-w.cur::after {
    content: "";
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brick);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--brick);
}
.chart-card .bars-x {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    padding: 8px 4px 0;
}

/* ── Carte liste top (recettes / clients) ───────────────── */
.list-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 22px;
}
.list-card .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 1rem;
}
.list-card .head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.list-card .head .tab-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--cream);
    color: var(--ink-2);
}

/* Onglets d'une liste */
.list-card .tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin: -4px -2px 8px;
    gap: 0;
}
.list-card .tabs button {
    background: transparent;
    border: none;
    font-family: var(--font-ui);
    font-size: 13px;
    padding: 6px 12px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.list-card .tabs button.on {
    color: var(--ink);
    border-bottom-color: var(--brick);
}

/* Lignes de la liste avec barre de progression */
.list-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 5px 0 7px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.list-row:last-child { border-bottom: none; }
.list-row .rk {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}
.list-row .nm {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-row .nm .meta {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px;
}
.list-row .val {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.list-row .bar-bg {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--cream);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.list-row .bar-fill {
    height: 100%;
    background: var(--brick);
    border-radius: 2px;
}
.list-row .bar-fill.forest { background: var(--forest); }

/* Conteneur scrollable du top recettes / top clients :
   ~4 rangées visibles, le reste accessible via scroll interne. */
.top-pane {
    max-height: 200px;
    overflow-y: auto;
    /* léger padding-right pour que le scrollbar ne mange pas les barres de progression */
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
.top-pane::-webkit-scrollbar { width: 6px; }
.top-pane::-webkit-scrollbar-track { background: transparent; }
.top-pane::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}
.top-pane::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── Grille des menus actifs (3 cartes) ─────────────────── */
.menus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .menus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .menus-grid { grid-template-columns: 1fr; }
}
.menu-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color .12s ease;
    position: relative;
    overflow: hidden;
}
.menu-card:hover { border-color: var(--border-2); }
.menu-card .top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 8px;
}
.menu-card .top-row .lbl {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 6px;
}
.menu-card .top-row .dt {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.013em;
    color: var(--ink);
}
.menu-card .top-row .dt em {
    font-style: italic;
    color: var(--brick);
}
.menu-card .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: auto;
}
.menu-card .stats-row .it {
    padding: 0 4px;
    border-right: 1px solid var(--border);
}
.menu-card .stats-row .it:last-child { border-right: none; }
.menu-card .stats-row .it .v {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.menu-card .stats-row .it .l {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 0.03em;
}
.menu-card .foot-row {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── Split (Activité / Collectes côte à côte) ───────────── */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}
@media (max-width: 1100px) {
    .split { grid-template-columns: 1fr; }
}

/* ── Carte des collectes du jour ────────────────────────── */
.collectes {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
}
.collectes .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    gap: 1rem;
    flex-wrap: wrap;
}
.collectes .head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.collectes .head h3 em { font-style: italic; color: var(--muted); }
.collectes .head .day {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
}
.col-row {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.col-row:last-child { border-bottom: none; }
.col-row .tm {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.col-row .tm .tm-date {
    font-size: 11px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.col-row .tm em {
    font-style: italic;
    color: var(--brick);
    font-size: 14px;
    margin-left: 1px;
}
.col-row .info strong {
    font-weight: 500;
    color: var(--ink);
    display: block;
    margin-bottom: 3px;
}
.col-row .info .det {
    font-size: 11.5px;
    color: var(--muted);
    font-feature-settings: "tnum";
}
.col-row .info .det b { color: var(--ink-2); font-weight: 500; }

/* ── Activité récente (réutilisé : feed de commandes) ───── */
.activity {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
}
.activity .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    gap: 1rem;
}
.activity .head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.act-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.act-row:last-child { border-bottom: none; }
.act-row .ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cream);
    display: grid;
    place-items: center;
    color: var(--brick);
    flex-shrink: 0;
    font-size: 13px;
}
.act-row .ic svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
}
.act-row .ic.forest { background: var(--forest-soft); color: var(--forest); }
.act-row .ic.warn   { background: var(--warn-soft);   color: var(--warn); }
.act-row .body { min-width: 0; }
.act-row .body strong { color: var(--ink); font-weight: 500; }
.act-row .body .desc { color: var(--ink-2); line-height: 1.4; }
.act-row .body .meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}
.act-row .when {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-2);
    flex-shrink: 0;
    padding-top: 7px;
}
.row-link {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.row-link:hover { background: var(--cream); color: var(--brick); }
.row-link svg { width: 14px; height: 14px; stroke-width: 1.7; }

/* ── Footer admin (refait pour le nouveau layout) ───────── */
.admin-footer-v2 {
    padding: 24px 32px;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-footer-v2 a {
    color: var(--muted);
    text-decoration: none;
}
.admin-footer-v2 a:hover { color: var(--ink); }


/* ============================================================
   LISTE DES COMMANDES (et autres listes) — Filter bar + actions
   Réf : design_handoff_admin_refonte/01_Propositions_Admin.html
   ============================================================ */

/* ── Barre de filtres au-dessus d'une .tbl-a ─────────────── */
.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

/* Champ de recherche avec icône loupe */
.filter-bar .filter-search {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 340px;
}
.filter-bar .filter-search svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--muted);
    stroke-width: 1.6;
    pointer-events: none;
}
.filter-bar .filter-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 13px;
    font-family: var(--font-ui);
    color: var(--ink);
    outline: none;
    transition: border-color .12s ease, background .12s ease;
}
.filter-bar .filter-search input::placeholder { color: var(--muted); }
.filter-bar .filter-search input:focus {
    border-color: var(--ink);
}

/* Dropdowns (select) façon bouton */
.filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 30px 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 13px;
    font-family: var(--font-ui);
    color: var(--ink);
    cursor: pointer;
    outline: none;
    /* chevron en arrière-plan */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7264' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
.filter-bar select:hover { border-color: var(--border-2); }
.filter-bar select:focus { border-color: var(--ink); }

/* Compteur de résultats à droite */
.filter-bar .filter-meta {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}
.filter-bar .filter-meta b {
    color: var(--ink-2);
    font-weight: 500;
}

/* Bouton "Réinitialiser" dans la filter bar (overrides .btn.sm pour padding) */
.filter-bar .btn { padding: 8px 12px; font-size: 12.5px; }

/* ── Boutons-icônes dans la colonne Actions d'un tableau ── */
.tbl-a .actions-td {
    text-align: right;
    white-space: nowrap;
}
.tbl-a .actions-th {
    width: 110px;
    text-align: right;
}
.tbl-a .actions-td a,
.tbl-a .actions-td button {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    margin-left: 4px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tbl-a .actions-td a:hover,
.tbl-a .actions-td button:hover {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--border-2);
}
.tbl-a .actions-td button.danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-soft);
}
.tbl-a .actions-td svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
}
.tbl-a .actions-td form { display: inline; margin: 0; }

/* ── Responsive : filter bar et tableau ─────────────────── */
@media (max-width: 768px) {
    .filter-bar { gap: 6px; }
    .filter-bar .filter-search { min-width: 100%; max-width: 100%; }
    .filter-bar .filter-meta {
        margin-left: 0;
        flex-basis: 100%;
        order: 99;
    }
    /* Tableau : permettre scroll horizontal sur mobile */
    .tbl-a { overflow-x: auto; }
}


/* ============================================================
   DÉTAIL D'UNE COMMANDE — Layout 2 colonnes + composants
   Réf : design_handoff_admin_refonte/01_Propositions_Admin.html §05
   ============================================================ */

/* ── Variante de .pg-head pour la page détail ─────────────── */
.pg-head.detail-head { margin-bottom: 24px; }
.pg-head.detail-head .detail-h2 {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0;
}
.pg-head.detail-head .detail-h2 em {
    font-style: italic;
    color: var(--brick);
}
.pg-head.detail-head .meta-row {
    display: flex;
    gap: 18px;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 10px;
    flex-wrap: wrap;
}
.pg-head.detail-head .meta-row b {
    color: var(--ink);
    font-weight: 500;
}

/* ── Grille 2 colonnes (principale + sidebar) ─────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
.detail-col-main,
.detail-col-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media (max-width: 1100px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* ── En-tête de card-a avec lien à droite (Voir la fiche →) ── */
.card-a .head .head-link {
    color: var(--brick);
    text-decoration: none;
    font-size: 11.5px;
    font-family: var(--font-ui);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    transition: color .12s ease;
}
.card-a .head .head-link:hover { color: var(--brick-deep); }

/* ── Bloc Client (nom + email + tél) ─────────────────────── */
.client-block strong {
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-weight: 500;
}
.client-block .em,
.client-block .tel {
    font-size: 13px;
    color: var(--muted);
    display: block;
}

/* ── Bloc d'avertissement allergie ───────────────────────── */
.allergy-box {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--warn-soft);
    border-radius: var(--r-md);
    font-size: 13px;
    color: #7A5A00;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.45;
}
.allergy-box svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--warn);
    stroke-width: 1.8;
}
.allergy-box b { font-weight: 600; }

/* ── Bloc RDV de collecte (jour serif + heure italique brick) ── */
.rdv-box {
    text-align: center;
    padding: 8px 0 4px;
}
.rdv-box .day {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 8px;
}
.rdv-box .hr {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 36px;
    color: var(--brick);
    line-height: 1;
}
.rdv-box .when {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

/* ── Liste de statuts (Paiement / Collecte / Menu) ───────── */
.status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.status-list .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.status-list .row .lbl { color: var(--muted); }

/* ── Bloc de boutons verticaux (actions) ─────────────────── */
.btn-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.btn-block form { margin: 0; }
.btn-block .btn,
.btn-block .btn-block-link {
    width: 100%;
    justify-content: center;
}
.btn-block button { width: 100%; justify-content: center; }

/* Bouton "danger ghost" — danger discret pour Annuler la commande */
.btn.danger-ghost {
    background: transparent;
    color: var(--danger);
    border-color: var(--border);
}
.btn.danger-ghost:hover {
    background: var(--danger-soft);
    border-color: var(--danger-soft);
    color: var(--danger);
}

/* ── Tableau des recettes commandées (dans le card-a) ────── */
.recettes-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.recettes-tbl thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
    position: static;
}
.recettes-tbl tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.recettes-tbl tbody tr:hover td { background: var(--paper); }
.recettes-tbl tbody tr:last-child td { border-bottom: none; }
.recettes-tbl td.num {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
}
.recettes-tbl .total-cell {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--ink);
    font-weight: 400;
    padding-right: 16px;
}
.recettes-tbl tfoot td {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}
.recettes-tbl .promo-row td {
    background: var(--warn-soft);
    font-size: 12.5px;
    color: #7A5A00;
}

/* Commentaire client à côté d'une recette */
.commentaire-client {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--warn-soft);
    color: #7A5A00;
    font-size: 11.5px;
}

/* Bouton-icône dans une rangée de tableau (supprimer ligne) */
.row-icon-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background .12s, color .12s;
}
.row-icon-btn:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.row-icon-btn svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
}

/* Formulaire d'ajout d'une recette en bas du tableau */
.ajout-ligne {
    padding: 16px;
    border-top: 1px dashed var(--border-2);
    background: var(--paper);
}
.ajout-ligne strong {
    display: block;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 10px;
}
.ajout-ligne form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ajout-ligne select {
    flex: 1;
    min-width: 200px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
}
.ajout-ligne label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 500;
}
.ajout-ligne input[type="number"] {
    width: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    text-align: center;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* Responsive : tableau et formulaire d'ajout sur mobile */
@media (max-width: 700px) {
    .recettes-tbl thead { display: none; }
    .ajout-ligne form { flex-direction: column; align-items: stretch; }
    .ajout-ligne select,
    .ajout-ligne input,
    .ajout-ligne label { width: 100%; }
}


/* ============================================================
   PAGE PARAMÈTRES — Profil / Apparence / Email / Avancé
   ============================================================ */

/* ── Navigation par ancres en haut ────────────────────── */
.param-nav {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 4px;
    margin-bottom: 24px;
    position: sticky;
    top: 60px;
    z-index: 50;
    flex-wrap: wrap;
}
.param-nav a {
    flex: 1;
    text-align: center;
    padding: 8px 14px;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
    min-width: 100px;
}
.param-nav a:hover {
    background: var(--paper);
    color: var(--ink);
}
.param-nav a.on {
    background: var(--ink);
    color: #fff;
}

/* ── Sections empilées ────────────────────────────────── */
.param-section {
    margin-bottom: 32px;
    scroll-margin-top: 130px;   /* offset pour le sticky topbar + nav */
}
.param-section h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px;
}
.param-section h2 em { font-style: italic; color: var(--muted); }

/* ── Profil : lignes label / valeur ───────────────────── */
.param-profil-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}
.param-profil-row:last-child { border-bottom: none; }
.param-profil-row .lbl {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.param-profil-row .val {
    color: var(--ink);
    font-size: 14px;
}

/* ── Grille de tuiles de thèmes ──────────────────────── */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 4px;
}
.theme-tile {
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    text-align: left;
    font-family: inherit;
    color: inherit;
}
.theme-tile:hover {
    border-color: var(--border-2);
    background: var(--surface);
}
.theme-tile.active {
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(20,17,14,0.05);
}
.theme-tile .tile-swatches {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.theme-tile .tile-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.theme-tile .tile-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.theme-tile .tile-current {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    color: var(--brick);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: none;
}
.theme-tile.active .tile-current { display: block; }
.theme-tile.is-custom {
    border-style: dashed;
}
.theme-tile.is-custom .swatch-gradient {
    background: conic-gradient(#A14D32, #7A9268, #6E58A8, #D4962A, #C42738, #A14D32);
}

/* ✕ pour masquer un thème (sur hover) — c'est un <span> (pas un button)
   pour éviter le bug HTML "button dans button" qui casse le DOM. */
.theme-tile-hide {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: var(--muted);
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
    display: grid;
    place-items: center;
    user-select: none;
}
.theme-tile:hover .theme-tile-hide { opacity: 1; }
.theme-tile-hide:hover {
    background: var(--danger);
    color: #fff;
}
.theme-tile-hide:focus { outline: 2px solid var(--brick); outline-offset: 2px; }

/* Lien "Réafficher" + masqués */
.theme-restore {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.theme-restore button {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-2);
}
.theme-restore button:hover {
    background: var(--cream);
    color: var(--ink);
}

/* ── Layout côte à côte : palettes | preview ─────────────── */
.apparence-split {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    align-items: start;
}
.apparence-split__palettes {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}
.apparence-split__palettes .theme-grid {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
    .apparence-split { grid-template-columns: 1fr; }
    .apparence-split__palettes { max-height: none; }
}

/* ── Modal split : controls | preview ────────────────────── */
.palette-modal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.palette-modal-split__controls {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}
@media (max-width: 700px) {
    .palette-modal-split { grid-template-columns: 1fr; }
    .palette-modal-split__controls { max-height: none; }
}

/* ── Aperçu miniature du tableau de bord (iframe scalée) ─── */
.dash-preview {
    --dp-scale: 0.28;
    --dp-w: 1440px;
    --dp-h: 900px;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 14px;
    background: var(--paper);
}
.dash-preview iframe {
    width:  var(--dp-w);
    height: var(--dp-h);
    border: none;
    transform: scale(var(--dp-scale));
    transform-origin: 0 0;
    pointer-events: none;
    display: block;
}
.dash-preview--modal {
    position: static;
    border-radius: 8px;
    max-height: 420px;
    overflow-y: hidden;
}

/* ── Email backend : 2 cartes radio ─────────────────── */
.email-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .email-choice { grid-template-columns: 1fr; }
}
.email-tile {
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--paper);
    position: relative;
}
.email-tile:hover {
    border-color: var(--border-2);
    background: var(--surface);
}
.email-tile.active {
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(20,17,14,0.05);
}
.email-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.email-tile .et-nm {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}
.email-tile .et-sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}
.email-tile.active .et-nm::after {
    content: "ACTIF";
    margin-left: 8px;
    font-size: 10px;
    background: var(--forest-soft);
    color: var(--forest);
    padding: 2px 6px;
    border-radius: 99px;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.email-test-block {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.email-test-status {
    font-size: 13px;
    color: var(--muted);
    min-height: 1.2em;
}
.email-test-status.ok  { color: var(--forest); }
.email-test-status.err { color: var(--danger); }

/* ── Modal éditeur de palette personnalisée ─────────── */
/* (CSS .palette-modal-* existant — déjà défini, juste à rendre accessible ici) */


/* ============================================================
   REFONTE CLIENT v2 — Parcours commande Croque-Végé
   Réf : design_handoff_client_refonte/system.css + README.md
   Composants : cv-header · steps · plat magazine · cart · cv-foot
   ============================================================ */

/* ── Tokens client (compléments / overrides) ────────────────── */
:root {
    --cream-2:    #ECE3CC;
    --forest-deep: #364521;
}

/* Sur les pages client le fond est plus chaud, les rayons plus généreux */
body.client-page {
    --paper:    #FAF6EA;
    --border-2: #D8CFB7;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    background: var(--paper);
}

/* ── Site shell ─────────────────────────────────────────────── */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header client ──────────────────────────────────────────── */
.cv-header {
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 22px 24px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cv-header::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(to right,
        var(--brick) 0%,   var(--brick) 33%,
        var(--forest) 33%, var(--forest) 66%,
        var(--cream-2) 66%, var(--cream-2) 100%);
    opacity: .85;
}
.cv-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
}
.cv-logo {
    height: 54px;
    width: auto;
    display: block;
    /* NE PAS appliquer filter:invert() — fond clair */
}
.cv-tag {
    margin-top: 6px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-2);
    letter-spacing: .01em;
}

/* ── Indicateur d'étapes ────────────────────────────────────── */
.steps {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}
.steps-inner {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}
.steps-inner::before {
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: 18px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.step-bubble {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    display: grid;
    place-items: center;
    font-family: var(--font-ui);
    transition: all .2s;
}
.step-bubble svg { width: 16px; height: 16px; stroke-width: 2.4; }
.step.done .step-bubble  { background: var(--forest); border-color: var(--forest); color: #fff; }
.step.active .step-bubble { background: var(--brick);  border-color: var(--brick);  color: #fff; }
.step-lbl {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.step.done .step-lbl,
.step.active .step-lbl { color: var(--ink); }

/* ── Page container ─────────────────────────────────────────── */
.page {
    flex: 1;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 64px;
}
.page.narrow { max-width: 560px; }

/* ── Titres éditoriaux ──────────────────────────────────────── */
.eyebrow {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
h1.hero {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--ink);
}
h1.hero em { font-style: italic; color: var(--brick); }
h2.section {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--ink);
}
h2.section em { font-style: italic; color: var(--brick); }
.section-sub {
    color: var(--ink-2);
    font-size: 15.5px;
    max-width: 540px;
    margin: 12px 0 0;
}

/* Rubans de catégorie (entre sections de plats) */
.cat-ribbon {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 48px 0 22px;
}
.cat-ribbon:first-of-type { margin-top: 24px; }
.cat-ribbon h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -.015em;
    color: var(--ink);
}
.cat-ribbon h3 em { font-style: italic; color: var(--muted); }
.cat-ribbon .rule { flex: 1; height: 1px; background: var(--border); }
.cat-ribbon .count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Composants bouton — modifiers v2 ───────────────────────── */
/* (s'appuient sur la base .btn existante) */
.btn.pri  { background: var(--brick);  color: #fff; border-color: var(--brick); }
.btn.pri:hover { background: var(--brick-deep); border-color: var(--brick-deep); }
.btn.dark { background: var(--ink);   color: #fff; border-color: var(--ink); }
.btn.dark:hover { background: #000; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--cream); }
.btn.full  { width: 100%; justify-content: center; }

/* ── Alertes — variantes dot-notation ──────────────────────── */
/* (complément aux .alert-warning .alert-success existants) */
.alert.warn    { background: var(--warn-soft);   color: #7A5A00; border: 1px solid #EAD9A6; }
.alert.warn svg { color: var(--warn); }
.alert.info    { background: var(--cream);       color: var(--ink-2); border: 1px solid var(--border); }
.alert.success { background: var(--forest-soft); color: var(--forest-deep); border: 1px solid #C6D2AE; }
.alert.danger  { background: var(--danger-soft); color: #702215; border: 1px solid #E4B9B0; }
.alert { display: flex; align-items: flex-start; gap: 12px; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke-width: 1.8; }

/* Pill.warn (alias de .pill.wait pour le nouveau système) */
.pill.warn { background: var(--warn-soft); color: var(--warn); }

/* ── Inputs dans .field ─────────────────────────────────────── */
label.field-lbl {
    display: block;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    margin-bottom: 7px;
    letter-spacing: .02em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea,
.field select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--brick);
    box-shadow: 0 0 0 3px var(--brick-soft);
}
.field + .field { margin-top: 14px; }
.field-help { font-size: 12px; color: var(--muted); margin-top: 6px; }
.field-err  { font-size: 12.5px; color: var(--danger); margin-top: 6px; display: none; }
.field-err.on { display: block; }

/* ── Carte générique (client) ───────────────────────────────── */
.card-head {
    padding: 14px 22px;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-body { padding: 24px; }

/* ── Carte de plat — magazine ───────────────────────────────── */
.plat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.plat:hover { border-color: var(--border-2); box-shadow: 0 4px 14px rgba(20,17,14,.06); transform: translateY(-1px); }
.plat.in-cart { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick), 0 4px 14px rgba(20,17,14,.06); }

/* Zone photo (aspect-ratio 4:3) */
.plat-photo {
    position: relative;
    aspect-ratio: 4/3;
    width: 100%;
    background: var(--cream);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
/* Placeholder rayé — couleur par défaut */
.plat-photo .ph {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg,
            rgba(184,90,60,.06) 0px, rgba(184,90,60,.06) 12px,
            rgba(184,90,60,.10) 12px, rgba(184,90,60,.10) 24px),
        linear-gradient(135deg, var(--cream), var(--cream-2));
}
.plat-photo.forest .ph {
    background:
        repeating-linear-gradient(45deg,
            rgba(77,94,51,.06) 0px, rgba(77,94,51,.06) 12px,
            rgba(77,94,51,.10) 12px, rgba(77,94,51,.10) 24px),
        linear-gradient(135deg, var(--forest-soft), var(--cream-2));
}
.plat-photo.warm .ph {
    background:
        repeating-linear-gradient(135deg,
            rgba(212,150,42,.06) 0px, rgba(212,150,42,.06) 12px,
            rgba(212,150,42,.10) 12px, rgba(212,150,42,.10) 24px),
        linear-gradient(135deg, #F4DEB6, var(--cream-2));
}
/* Photo réelle */
.plat-photo-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
/* Numéro de plat (pastille haut-gauche) */
.plat-photo .num {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 99px;
    color: var(--ink);
    letter-spacing: .05em;
    z-index: 1;
}
/* Badges allergènes (haut-droite) */
.plat-photo .badges {
    position: absolute; top: 14px; right: 14px;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
    z-index: 1;
}
.plat-photo .badge {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.plat-photo .badge.warn  { background: #FFF4D8; color: #8A5A00; }
.plat-photo .badge.danger { background: #FBE6E0; color: #7B2418; }
.plat-photo .badge svg { width: 11px; height: 11px; stroke-width: 2; }
/* Légende en bas de la photo */
.plat-photo .ph-cap {
    position: absolute; bottom: 14px; left: 14px; right: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: rgba(20,17,14,.55);
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

/* Corps de la carte */
.plat-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.plat-name {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 8px;
    font-weight: 400;
}
.plat-name em { font-style: italic; color: var(--brick); }
.plat-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.plat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.plat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--cream);
    color: var(--ink-2);
    font-weight: 500;
}
.plat-tag.warn { background: var(--warn-soft); color: #7A5A00; }
.plat-tag svg  { width: 11px; height: 11px; stroke-width: 1.8; }
.plat-stock {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.plat-stock svg { width: 12px; height: 12px; stroke-width: 1.8; color: var(--warn); }
.plat-stock.low { color: var(--warn); }

/* Avertissement allergie dans le corps de la carte */
.plat-allergie {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    background: var(--brick-soft);
    border-radius: 20px;
    padding: 4px 10px;
    margin-bottom: 6px;
}
.plat-allergie svg { width: 12px; height: 12px; stroke-width: 1.8; color: var(--brick); flex-shrink: 0; }

.plat-frais {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--forest);
    background: var(--forest-soft);
    border-radius: 99px;
    padding: 3px 9px;
    margin-bottom: 6px;
}

/* Toast limite de stock */
.stock-limit-toast {
    font-size: 12px;
    font-weight: 500;
    color: var(--brick);
    text-align: right;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s, height .2s;
    margin-top: 0;
}
.stock-limit-toast.visible {
    height: 18px;
    opacity: 1;
    margin-top: 4px;
    animation: stock-toast-fade 2s ease forwards;
}
@keyframes stock-toast-fade {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Rangée prix + contrôles */
.plat-price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.plat-price {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.plat-price .unit { font-size: 13px; color: var(--muted); margin-left: 4px; font-family: var(--font-ui); font-style: normal; }

/* Bouton "Ajouter" (état qty = 0) */
.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}
.add-btn:hover { background: #000; }
.add-btn svg   { width: 14px; height: 14px; stroke-width: 2; }

/* Pilule de quantité [− n +] (état qty > 0) */
.qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 3px;
}
.qty button {
    width: 36px; height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 18px;
    transition: background .12s;
    font-family: inherit;
    line-height: 1;
}
.qty button:hover:not(:disabled) { background: var(--cream); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty .v {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.qty.active { background: var(--brick); border-color: var(--brick); }
.qty.active button { color: #fff; }
.qty.active button:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.qty.active .v  { color: #fff; }

/* Panneau étendu (format P/G + note, affiché quand qty > 0) */
.plat-expanded {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--paper);
    border-top: 1px solid var(--border);
}
.plat-expanded.hidden { display: none; }

/* Rangée de format P/G */
.fmt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.fmt-row.inactif { opacity: .4; pointer-events: none; }

/* ── Bulle d'aide « ? » à côté de CONTENANT ── */
.fmt-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    cursor: help;
    position: relative;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}
.fmt-help-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    font-size: 11.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 11px;
    border-radius: 7px;
    width: 210px;
    line-height: 1.5;
    white-space: normal;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.fmt-help:hover .fmt-help-tip,
.fmt-help:focus .fmt-help-tip { display: block; }

.fmt-row .lbl {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    flex-shrink: 0;
}
.fmt-pair {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.fmt-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.fmt-side .nm { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.fmt-side .ct {
    min-width: 26px; height: 26px;
    padding: 0 8px;
    border-radius: 99px;
    background: var(--cream);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}
.fmt-side.on .ct { background: var(--brick); color: #fff; }
.fmt-arrows {
    display: flex;
    flex-direction: row;
    gap: 2px;
}
.fmt-arrows button {
    width: 28px; height: 28px;
    border: none;
    background: var(--cream);
    color: var(--ink);
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 11px;
    line-height: 1;
}
.fmt-arrows button:hover:not(:disabled) { background: var(--brick); color: #fff; }
.fmt-arrows button:disabled { opacity: .25; cursor: not-allowed; }
.fmt-arrows svg { width: 10px; height: 10px; stroke-width: 2.4; }

/* ── Toggle grand format ── */
.fmt-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.fmt-toggle-title {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}
.fmt-toggle-sub {
    font-size: 11px;
    color: var(--muted);
    opacity: .75;
}
.fmt-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.fmt-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.fmt-toggle-track {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: var(--border);
    border-radius: 99px;
    transition: background .2s;
    position: relative;
}
.fmt-toggle-track::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.fmt-toggle-switch input:checked + .fmt-toggle-track {
    background: var(--brick);
}
.fmt-toggle-switch input:checked + .fmt-toggle-track::after {
    transform: translateX(18px);
}
.fmt-toggle-switch:focus-within .fmt-toggle-track {
    outline: 2px solid var(--brick);
    outline-offset: 2px;
}

/* Rangée note */
.note-row textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    resize: none;
    line-height: 1.4;
    color: var(--ink);
    outline: none;
}
.note-row textarea:focus { border-color: var(--brick); box-shadow: 0 0 0 2px var(--brick-soft); }
.note-row .lbl-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
    letter-spacing: .04em;
}

/* ── Extras optionnels par plat ────────────────────────────── */
.extras-row {
    padding: 10px 14px;
    background: #f5f0e6;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.extras-head {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 500;
}
.extra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.extra-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}
.extra-nom { font-size: 13px; font-weight: 500; color: var(--ink); }
.extra-prix { font-size: 11.5px; color: var(--muted); }
.extra-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
}
.extra-qty-ctrl button {
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    background: var(--cream);
    color: var(--ink);
    border-radius: 99px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    font-weight: 400;
}
.extra-qty-ctrl button:hover { background: var(--brick); color: #fff; border-color: var(--brick); }
.extra-qty-ctrl span {
    min-width: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ── Panier flottant (anthracite) ───────────────────────────── */
.cart {
    position: sticky;
    top: 24px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(20,17,14,.10);
}
.cart-head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.cart-head .tt {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.cart-head .tt em { font-style: italic; color: var(--brick-soft); }
.cart-head .who {
    font-size: 12.5px;
    color: rgba(255,255,255,.6);
    line-height: 1.4;
}
.cart-head .who strong { color: #fff; font-weight: 500; }
.cart-body {
    padding: 6px 22px;
    max-height: 340px;
    overflow-y: auto;
}
.cart-empty {
    text-align: center;
    padding: 32px 12px;
    color: rgba(255,255,255,.45);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 16px;
}
.cart-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.cart-line:last-child { border-bottom: none; }
.cart-line .nm { font-size: 13.5px; line-height: 1.3; font-weight: 500; color: #fff; flex: 1; }
.cart-line .fmt { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 3px; }
.cart-line .px {
    font-family: var(--font-serif);
    font-size: 18px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
/* Ligne créée par JS (classe .panier-ligne maintenu pour compat) */
.cart .panier-ligne {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 8px;
}
.cart .panier-ligne:last-child { border-bottom: none; }
.cart .panier-ligne > span:first-child { color: rgba(255,255,255,.9); }
.cart .panier-ligne > strong {
    font-family: var(--font-serif);
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
    margin-left: auto;
}
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.2);
}
.cart-total .lbl {
    font-size: 12.5px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
}
.cart-total .v {
    font-family: var(--font-serif);
    font-size: 34px;
    color: #fff;
    letter-spacing: -.015em;
}
.cart-foot { padding: 14px 22px 20px; }
.cart-foot .note {
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
    text-align: center;
    margin-bottom: 12px;
}
.cart .next-btn {
    width: 100%;
    padding: 14px 18px;
    background: var(--brick);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
}
.cart .next-btn:hover { background: var(--brick-deep); }
.cart .next-btn:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.3); cursor: not-allowed; }
.cart .next-btn svg { width: 15px; height: 15px; stroke-width: 2; }

/* ── Footer marque ──────────────────────────────────────────── */
.cv-foot {
    background: var(--ink);
    color: rgba(255,255,255,.7);
    padding: 36px 24px 32px;
    text-align: center;
    font-size: 14px;
    margin-top: auto;
}
.cv-foot-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 10px;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.cv-foot a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); }
.cv-foot a:hover { color: #fff; border-bottom-color: #fff; }
.cv-foot .sep { margin: 0 12px; opacity: .4; }
.cv-foot .signoff { margin-top: 18px; font-style: italic; font-family: var(--font-serif); font-size: 16px; opacity: .85; }

/* ── Page-header menu (étape 2) ─────────────────────────────── */
.menu-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: end;
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
.menu-intro h1 .date { display: block; font-size: 72px; }
.menu-intro .meta { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--ink-2); }
.menu-intro .meta-row { display: flex; gap: 10px; align-items: flex-start; }
.menu-intro .meta-row svg { width: 18px; height: 18px; color: var(--brick); stroke-width: 1.7; flex-shrink: 0; margin-top: 1px; }
.menu-intro .meta-row b { color: var(--ink); font-weight: 600; }

/* Layout principal étape 2 */
.shop-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 36px;
    align-items: start;    /* colonne gauche reste à sa hauteur naturelle */
}
/* L'aside s'étire sur toute la hauteur de la grille → sticky a de la place */
.shop-layout > aside {
    align-self: stretch;
}
.plats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* Cartes verticales dans la grille boutique : photo pleine largeur en haut */
.plats-grid .plat-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.plats-grid .plat-photo,
.plats-grid .plat-photo-placeholder {
    width: 100% !important;
    min-height: auto !important;
}

/* ── Responsive client ──────────────────────────────────────── */
@media (max-width: 1100px) {
    .shop-layout { grid-template-columns: 1fr 320px; gap: 24px; }
}
@media (max-width: 900px) {
    .menu-intro { grid-template-columns: 1fr; gap: 18px; }
    .menu-intro h1 .date { font-size: 54px; }
    .shop-layout { grid-template-columns: 1fr; gap: 0; }
    .cart { position: static; margin-top: 32px; }
}
@media (max-width: 720px) {
    h1.hero { font-size: 42px; }
    h2.section { font-size: 28px; }
    .cat-ribbon h3 { font-size: 26px; }
    .page { padding: 32px 18px 56px; }
    .cv-header { padding: 18px 18px 14px; }
    .cv-logo { height: 42px; }
    .cv-tag { font-size: 14px; }
    .step-lbl { display: none; }
    .steps { padding: 14px 16px; }
    .plats-grid { grid-template-columns: 1fr; }
    .menu-intro h1 .date { font-size: 42px; }
}
@media (max-width: 600px) {
    /* ── Cartes de plats ── */
    .plat-name { font-size: 21px; }
    .plat-price { font-size: 20px; }
    .plat-body { padding: 16px 18px; }

    /* Touch targets ≥ 44 px (Apple HIG / Material) */
    .add-btn { min-height: 44px; padding: 10px 18px; }
    .qty button { width: 44px; height: 44px; }
    .fmt-arrows button { width: 36px; height: 36px; }

    /* Section contenant + note : tenir dans la largeur mobile */
    .plat-expanded { padding: 12px 10px; gap: 8px; }
    .fmt-row { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
    .fmt-row .lbl { width: 100%; }
    .note-row textarea { font-size: 16px; } /* anti-zoom Safari iOS */

    /* Barre de panier compacte — valeur totale lisible sans déborder */
    .cart-total .v { font-size: 20px; }
    .cart-total .lbl { font-size: 11px; }
    .cart .next-btn { min-height: 44px; }

    /* Logo client */
    .cv-logo { height: 36px; }
    .menu-intro h1 .date { font-size: 36px; }
}

/* ── Étape 1 — hero d'identification ─── */
.id-hero {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 36px;
}
.id-hero .eyebrow { margin-bottom: 14px; }
.id-hero h1 { margin: 0 0 16px; }
.id-hero .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 21px;
    color: var(--ink-2);
    line-height: 1.45;
    max-width: 480px;
    margin: 0 auto;
}

/* Carte Anna (citation) */
.anna-card {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    margin: 0 auto 32px;
    max-width: 600px;
    position: relative;
}
.anna-card::before {
    content: "\201C";
    position: absolute; left: 18px; top: -6px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 120px;
    color: var(--brick);
    line-height: 1;
    opacity: .25;
    pointer-events: none;
}
.anna-card .from {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.anna-card .av {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brick);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    flex-shrink: 0;
}
.anna-card .who strong { font-size: 14.5px; color: var(--ink); font-weight: 600; display: block; line-height: 1.2; }
.anna-card .who span   { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.anna-card .msg {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-line;
}

/* Formulaire identification */
.id-form-wrap { max-width: 480px; margin: 0 auto; }
.id-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px 30px;
    box-shadow: 0 4px 14px rgba(20,17,14,.06);
}
.id-form .tt {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 4px;
    color: var(--ink);
}
.id-form .sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; }

.visiteur-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
}
.visiteur-link svg { width: 14px; height: 14px; stroke-width: 1.6; }
.visiteur-link:hover { color: var(--ink); text-decoration: underline; }

/* Info card */
.info-card {
    max-width: 480px;
    margin: 24px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
}
.info-card h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 14px;
    color: var(--ink);
}
.info-list { margin: 0; padding: 0; list-style: none; }
.info-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    border-bottom: 1px solid var(--border);
}
.info-list li:last-child { border-bottom: none; }
.info-list li svg { width: 18px; height: 18px; color: var(--brick); stroke-width: 1.7; margin-top: 1px; }
.info-list strong { color: var(--ink); font-weight: 600; }

/* Popup bienvenue */
.popup-bienvenue {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
    align-items: center;
    justify-content: center;
}
.popup-bienvenue.actif { display: flex; }
.popup-inner {
    background: var(--surface);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.popup-inner .icone { font-size: 2.5rem; margin-bottom: .5rem; }
.popup-inner .msg   { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.popup-inner .sous  { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.popup-barre-wrap {
    margin-top: 1rem;
    height: 4px;
    background: var(--cream);
    border-radius: 2px;
    overflow: hidden;
}
.popup-barre {
    height: 100%;
    width: 0%;
    background: var(--brick);
    transition: width 2s linear;
    border-radius: 2px;
}

/* Étapes A→E — variantes d'état */
.etape-alt { display: none; }
.etape-btn-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.recap-mini {
    background: var(--paper);
    border-radius: var(--r-sm);
    padding: .6rem .9rem;
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: 1rem;
    line-height: 1.7;
}
.recap-mini strong { color: var(--ink); }

/* ── Étape 3 — créneaux ─── */
.creneau-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 36px;
    align-items: start;
}
@media (max-width: 900px) {
    .creneau-layout { grid-template-columns: 1fr; gap: 24px; }
}
.creneau-layout > aside { align-self: stretch; }

/* ── Bannière prévisualisation admin ─────────────────────────── */
.preview-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #1c1c1e;
    color: #fff;
    border-bottom: 2px solid var(--brick);
}
.preview-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.preview-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.8);
}
.preview-label svg { flex-shrink: 0; opacity: .7; }
.preview-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--brick);
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.preview-back-btn:hover { background: var(--brick-deep); color: #fff; }
.preview-back-btn svg { flex-shrink: 0; }

/* ── Barre CTA sticky (étape 3, mobile ≤ 900px) ─────────────── */
.creneau-mobile-bar { display: none; }
@media (max-width: 900px) {
    .creneau-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--ink);
        padding: 12px 18px;
        gap: 14px;
        align-items: center;
        z-index: 100;
        box-shadow: 0 -4px 24px rgba(20,17,14,.18);
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .creneau-layout { padding-bottom: 80px; }
    /* La confirmation-card de l'aside est remplacée par la barre sticky */
    .confirmation-card { display: none !important; }
    .cmb-info { flex: 1; min-width: 0; }
    .cmb-lbl {
        display: block;
        font-size: 10.5px;
        color: rgba(255,255,255,.5);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-weight: 500;
        margin-bottom: 2px;
    }
    .cmb-when {
        display: block;
        font-family: var(--font-serif);
        font-size: 19px;
        color: #fff;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cmb-btn {
        background: var(--brick);
        color: #fff;
        border: none;
        border-radius: var(--r-md);
        padding: 11px 16px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        min-height: 44px;
        flex-shrink: 0;
        transition: background .15s;
    }
    .cmb-btn:hover:not(:disabled) { background: var(--brick-deep); }
    .cmb-btn:disabled {
        background: rgba(255,255,255,.15);
        color: rgba(255,255,255,.4);
        cursor: not-allowed;
    }
    .cmb-btn svg { width: 14px; height: 14px; stroke-width: 2; }

    /* Bouton secondaire mobile "Continuer sans créneau" */
    .cmb-btns {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex-shrink: 0;
        align-items: stretch;
    }
    .cmb-later-btn {
        background: transparent;
        color: rgba(255,255,255,.65);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: var(--r-md);
        padding: 8px 14px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 400;
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        min-height: 36px;
        transition: background .15s, color .15s;
    }
    .cmb-later-btn:hover { background: rgba(255,255,255,.08); color:#fff; }
}

.creneau-intro { margin-bottom: 32px; }
.creneau-intro h2 { margin-bottom: 8px; }
.creneau-intro .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--ink-2);
    max-width: 520px;
    line-height: 1.5;
}

/* Journée (bloc de créneaux par jour) */
.journee {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin-bottom: 18px;
}
.journee-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.journee-head .day {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--ink);
}
.journee-head .day em { font-style: italic; color: var(--brick); }
.journee-head .date-mini {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.journee-head .date-mini svg { width: 14px; height: 14px; stroke-width: 1.6; color: var(--brick); }
.journee-head .info { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.4; }
.journee-head .info b {
    display: block;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
}

/* Grille de créneaux */
.creneaux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.creneau {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 12px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.creneau:hover:not(.taken):not(.selected) {
    border-color: var(--brick);
    background: var(--cream);
    transform: translateY(-1px);
}
.creneau .h {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.01em;
}
.creneau .h em { font-style: italic; color: var(--brick); font-size: 14px; }
.creneau .span-30 {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.creneau.taken {
    background: transparent;
    color: var(--muted-2);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    border-style: dashed;
}
.creneau.taken .h em { color: var(--muted-2); }
.creneau.selected {
    background: var(--brick);
    border-color: var(--brick);
    color: #fff;
}
.creneau.selected .h em { color: #fff; opacity: .8; }
.creneau.selected .span-30 { color: rgba(255,255,255,.7); }

/* Actions en bas de la liste */
.creneau-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
/* Bouton "Continuer sans créneau" dans la sidebar */
.creneau-passer-form {
    margin-top: 10px;
}
.creneau-passer-btn {
    justify-content: center;
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border: 1.5px solid var(--border) !important;
    font-weight: 500;
}
.creneau-passer-btn:hover {
    background: var(--cream) !important;
    border-color: var(--ink-2) !important;
    color: var(--ink) !important;
}
.creneau-passer-hint {
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 7px;
    line-height: 1.4;
}

/* Sidebar récap panier (étape 3) */
.cart-recap {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    position: sticky;
    top: 24px;
}
.cart-recap h4 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.cart-recap .sub {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 500;
}
.cart-recap .line {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    gap: 10px;
}
.cart-recap .line:last-child { border-bottom: none; }
.cart-recap .nm { color: var(--ink-2); line-height: 1.35; }
.cart-recap .nm small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cart-recap .v {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.cart-recap .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px solid var(--ink);
}
.cart-recap .total-lbl {
    font-size: 12.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
}
.cart-recap .total-v {
    font-family: var(--font-serif);
    font-size: 30px;
    color: var(--ink);
    letter-spacing: -.015em;
}

/* Carte de confirmation de créneau */
.confirmation-card {
    margin-top: 18px;
    background: var(--forest-soft);
    border: 1px solid #B9CCA0;
    border-radius: var(--r-lg);
    padding: 18px 22px;
}
.confirmation-card.hidden { display: none; }
.confirmation-card .lbl {
    font-size: 11px;
    color: var(--forest-deep);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.confirmation-card .lbl svg { width: 13px; height: 13px; stroke-width: 2.2; }
.confirmation-card .when {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--forest-deep);
    letter-spacing: -.01em;
}
.confirmation-card .when em { font-style: italic; }

/* ── Étape 4 — confirmation ─── */
.confirm-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    align-items: start;
}
@media (max-width: 900px) {
    .confirm-layout { grid-template-columns: 1fr; gap: 20px; }
}
.confirm-layout > aside { align-self: start; }

/* ── Barre CTA sticky (étape 4, mobile ≤ 900px) ─────────────── */
.confirm-mobile-bar { display: none; }
@media (max-width: 900px) {
    .confirm-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--ink);
        padding: 12px 18px;
        gap: 14px;
        align-items: center;
        z-index: 100;
        box-shadow: 0 -4px 24px rgba(20,17,14,.18);
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .confirm-layout { padding-bottom: 80px; }
}

.confirm-intro { margin-bottom: 24px; }
.confirm-intro h2 { margin-bottom: 8px; }
.confirm-intro .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-2);
    max-width: 540px;
    line-height: 1.5;
}

/* Carte pickup (gradient brique) */
.pickup-card {
    display: flex;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, var(--brick) 0%, var(--brick-deep) 100%);
    color: #fff;
    padding: 22px 28px;
    border-radius: var(--r-lg);
    margin-bottom: 18px;
}
.pickup-card .when-block { flex: 1; }
.pickup-card .when-block .lbl {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 8px;
    font-weight: 500;
}
.pickup-card .when-block .when {
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.015em;
}
.pickup-card .when-block .when em { font-style: italic; }
.pickup-card .where {
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,.85);
}
.pickup-card .where b { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }
.pickup-card .where svg { width: 14px; height: 14px; stroke-width: 1.7; display: inline-block; margin-right: 4px; vertical-align: -2px; }
@media (max-width: 600px) {
    .pickup-card { flex-direction: column; text-align: center; gap: 14px; }
    .pickup-card .where { border: none; border-top: 1px solid rgba(255,255,255,.2); padding: 14px 0 0; text-align: center; }
}

/* ── Pickup card — aucun créneau sélectionné ─────────────────── */
.pickup-card--pending {
    background: none;
    border: 2px dashed var(--brick-soft);
    color: var(--text);
    align-items: flex-start;
    gap: 14px;
}
.pickup-pending-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--brick-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brick);
    margin-top: 2px;
}
.pickup-pending-body { flex: 1; }
.pickup-pending-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--brick);
    margin-bottom: 4px;
}
.pickup-pending-sub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.pickup-pending-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brick);
    text-decoration: none;
    border-bottom: 1px solid var(--brick-soft);
    padding-bottom: 1px;
    transition: opacity .15s;
}
.pickup-pending-link:hover { opacity: .75; }
.pickup-pending-link svg { flex-shrink: 0; }

/* Cartes récap (Tes infos / Tes plats) */
.recap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: 18px;
    overflow: hidden;
}
.recap-head {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
}
.recap-head a {
    color: var(--brick);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.recap-head a:hover { text-decoration: underline; }
.recap-body { padding: 24px 28px; }
.client-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.client-row .who { font-family: var(--font-serif); font-size: 24px; letter-spacing: -.01em; }
.client-row .em  { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* Tableau des plats (étape 4) */
.order-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.order-table th {
    text-align: left;
    padding: 14px 24px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
}
.order-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.order-table tbody tr:last-child td { border-bottom: none; }
.order-table .nm { color: var(--ink); font-weight: 500; }
.order-table .nm small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.order-table .qty-cell { text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13.5px; }
.order-table .qty-cell.em { color: var(--muted-2); }
.order-table .px { text-align: right; font-family: var(--font-serif); font-size: 18px; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.order-table .num { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); margin-right: 8px; }
.subtotal-row, .total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 24px;
}
.subtotal-row { border-top: 1px solid var(--border); background: var(--paper); font-size: 14px; color: var(--ink-2); }
.subtotal-row .v { font-family: var(--font-serif); font-size: 18px; letter-spacing: -.01em; color: var(--ink-2); }
.total-row { background: var(--ink); color: #fff; }
.total-row .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); }
.total-row .v   { font-family: var(--font-serif); font-size: 32px; letter-spacing: -.015em; color: #fff; }

/* Note pour Anna */
.note-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 26px;
    margin-bottom: 18px;
}
.note-card .hd {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.note-card .hd h4 { font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin: 0; letter-spacing: -.01em; }
.note-card .hd .opt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.note-card textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
    color: var(--ink);
    outline: none;
}
.note-card textarea:focus { border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-soft); background: var(--surface); }

/* Colonne sticky droite (étape 4) */
.confirm-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.summary-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}
.summary-side .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; margin-bottom: 8px; }
.summary-side .v {
    font-family: var(--font-serif);
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 14px;
}
.summary-side .ct {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.summary-side .ct b { color: var(--ink); font-weight: 500; }
.summary-side hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.cta-side .info {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: 14px;
}
.cta-side .info b { color: var(--ink-2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   PAGE MERCI
   ══════════════════════════════════════════════════════════════ */

.thanks-hero {
    text-align: center;
    max-width: 600px;
    margin: 24px auto 48px;
}
.thanks-hero .leaf-art {
    width: 80px; height: 80px;
    color: var(--forest);
    margin: 0 auto 24px;
    display: block;
}
.thanks-hero .thanks-heart {
    width: 72px; height: 72px;
    display: block;
    margin: 0 auto 24px;
}
.thanks-hero h1 {
    font-family: var(--font-serif);
    font-size: 64px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: var(--ink);
}
.thanks-hero h1 em { font-style: italic; color: var(--brick); }
.thanks-hero .order-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: var(--cream);
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 18px;
}
.thanks-hero .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

/* Pickup hero (fond anthracite) */
.pickup-hero {
    max-width: 520px;
    margin: 0 auto 36px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.pickup-hero .stripe {
    height: 6px;
    background: linear-gradient(to right, var(--brick) 0%, var(--brick) 50%, var(--forest) 50%, var(--forest) 100%);
}
.pickup-hero .inner { padding: 28px 32px; text-align: center; }
.pickup-hero .lbl {
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.pickup-hero .lbl svg { width: 14px; height: 14px; stroke-width: 1.8; }
.pickup-hero .day {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
}
.pickup-hero .day em { font-style: italic; color: var(--brick-soft); }
.pickup-hero .time {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 52px;
    color: var(--brick-soft);
    line-height: 1;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}
.pickup-hero .where {
    font-size: 14px;
    color: rgba(255,255,255,.75);
    line-height: 1.5;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.pickup-hero .where b { color: #fff; font-weight: 500; }

/* Timeline */
.timeline {
    max-width: 600px;
    margin: 0 auto 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px 32px;
}
.timeline h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.timeline-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-row .step-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--forest-soft);
    color: var(--forest);
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
}
.timeline-row.done .step-circle { background: var(--forest); color: #fff; }
.timeline-row.done .step-circle svg { width: 16px; height: 16px; stroke-width: 2.4; }
.timeline-row .info strong {
    display: block;
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 2px;
    font-weight: 500;
}
.timeline-row .info span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Contact card */
.contact-card {
    max-width: 600px;
    margin: 0 auto 32px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 560px) { .contact-card { grid-template-columns: 1fr; } }
.contact-card .item { display: flex; gap: 12px; align-items: center; }
.contact-card .item .ic {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--brick);
    flex-shrink: 0;
}
.contact-card .item .ic svg { width: 18px; height: 18px; stroke-width: 1.7; }
.contact-card .item .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.contact-card .item a { font-size: 15px; color: var(--ink); text-decoration: none; font-weight: 500; display: block; margin-top: 1px; }
.contact-card .item a:hover { color: var(--brick); }

/* Anna signoff */
.anna-sign {
    text-align: center;
    max-width: 540px;
    margin: 48px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.anna-sign p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 12px;
}
.anna-sign .sig {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 30px;
    color: var(--brick);
    letter-spacing: -0.01em;
}

/* Actions row */
.actions-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — panier barre fixe (< 900 px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* Sidebar étape 4 masquée sur mobile — remplacée par la barre sticky */
    .confirm-side { display: none; }
    /* L'aside sort du flux et se colle en bas */
    .shop-layout > aside {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 90;
        align-self: auto;
    }
    /* Le cart devient une barre horizontale compacte */
    .cart {
        border-radius: 0;
        border-left: none; border-right: none; border-bottom: none;
        border-top: 2px solid var(--border);
        box-shadow: 0 -4px 24px rgba(0,0,0,.10);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 18px;
    }
    .cart-head { display: none; }
    .cart-body { display: none; }
    .cart-total {
        flex: 1;
        border: none;
        padding: 0;
        margin: 0;
        font-size: 15px;
    }
    .cart-foot { border: none; padding: 0; }
    .next-btn { margin-top: 0; padding: 11px 20px; font-size: 0.9rem; }
    /* Espace en bas de page pour ne pas masquer les dernières cartes */
    .shop-layout { padding-bottom: 76px; }
}

@media (max-width: 720px) {
    .thanks-hero h1 { font-size: 44px; }
    .pickup-hero .day  { font-size: 28px; }
    .pickup-hero .time { font-size: 38px; }
    .timeline { padding: 20px 18px; }
    .closed-hero h1 { font-size: 44px; }
    .visit-hero h1 .date { font-size: 48px; }
    .journee-head .day { font-size: 30px; }
}
@media (max-width: 600px) {
    /* ── Étape 3 — créneaux ── */
    .journee { padding: 16px 18px; }
    .journee-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
    .journee-head .day { font-size: 26px; }
    .journee-head .info { text-align: left; }
    .creneau-actions { flex-direction: column; gap: 8px; }
    .creneau-actions .later { margin-left: 0; }

    /* ── Récap panier (étape 3 sidebar) ── */
    .cart-recap { padding: 18px 20px; }
    .cart-recap .total-v { font-size: 24px; }

    /* ── Étape 4 — confirmation ── */
    .pickup-card { padding: 16px 18px; }
    .recap-head { padding: 12px 16px; }
    .recap-body { padding: 16px; }
    .subtotal-row, .total-row { padding: 12px 16px; }
    .note-card { padding: 16px 18px; }
    .order-table th, .order-table td { padding: 8px 10px; font-size: 13px; }
    .col-prix-u { display: none; }
    /* Colonne Contenant trop large pour mobile — cachée */
    .order-table th:nth-child(3),
    .order-table td:nth-child(3) { display: none; }
    .total-row .v { font-size: 24px; }
    .summary-side .v { font-size: 36px; }
    .pickup-card .when-block .when { font-size: 26px; }
    .confirm-bar { flex-direction: column; }
    .confirm-bar .actions { width: 100%; justify-content: flex-end; }

    /* ── Gérer RDV ── */
    .current-rdv { grid-template-columns: 1fr; gap: 12px; }
    .current-rdv .info .when { font-size: 26px; }

    /* ── Menu visiteur ── */
    .visit-hero h1 .date { font-size: 40px; }
    .plat-ro .nm { font-size: 20px; }
    .bottom-cta h3 { font-size: 26px; }
    .bottom-cta { padding: 28px 20px; }

    /* ── Menu fermé ── */
    .closed-hero h1 { font-size: 38px; }
    .closed-hero { margin: 24px auto 28px; }
    .closed-hero .lede { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   MENU VISITEUR
   ══════════════════════════════════════════════════════════════ */

.visit-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 36px;
    align-items: end;
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) { .visit-hero { grid-template-columns: 1fr; } }
.visit-hero h1 .date { display: block; font-size: 64px; }
.visit-hero .meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.55;
}
.visit-hero .meta strong { font-style: normal; font-family: var(--font-ui); color: var(--ink); font-weight: 600; }

.visit-cta {
    background: var(--brick);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 20px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.visit-cta .msg { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.visit-cta .msg em { font-style: italic; }
.visit-cta .msg small { display: block; font-family: var(--font-ui); font-style: normal; font-size: 13px; opacity: .85; margin-top: 4px; }
.visit-cta .btn { background: #fff; color: var(--brick); border-color: #fff; flex-shrink: 0; }
.visit-cta .btn:hover { background: var(--cream); }

/* Carte plat en lecture seule */
.plat-ro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.plat-ro .photo {
    position: relative;
    aspect-ratio: 4/3;
    width: 100%;
    background: var(--cream);
    overflow: hidden;
}
.plat-ro .photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.plat-ro .photo .ph {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(184,90,60,.06) 0, rgba(184,90,60,.06) 12px, rgba(184,90,60,.10) 12px, rgba(184,90,60,.10) 24px),
        linear-gradient(135deg, var(--cream), var(--paper));
}
.plat-ro .photo.forest .ph {
    background:
        repeating-linear-gradient(45deg, rgba(77,94,51,.06) 0, rgba(77,94,51,.06) 12px, rgba(77,94,51,.10) 12px, rgba(77,94,51,.10) 24px),
        linear-gradient(135deg, var(--forest-soft), var(--paper));
}
.plat-ro .photo.warm .ph {
    background:
        repeating-linear-gradient(135deg, rgba(212,150,42,.06) 0, rgba(212,150,42,.06) 12px, rgba(212,150,42,.10) 12px, rgba(212,150,42,.10) 24px),
        linear-gradient(135deg, #F4DEB6, var(--paper));
}
.plat-ro .photo .num {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--font-mono); font-size: 11px;
    background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
    padding: 3px 9px; border-radius: 99px;
    color: var(--ink); letter-spacing: .05em;
}
.plat-ro .photo .ph-cap {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    font-family: var(--font-mono); font-size: 10px;
    color: rgba(20,17,14,.5); letter-spacing: .06em; text-transform: uppercase;
    display: flex; justify-content: space-between;
}
.plat-ro .body { padding: 20px 22px; }
.plat-ro .nm {
    font-family: var(--font-serif); font-size: 24px; line-height: 1.05;
    letter-spacing: -0.015em; color: var(--ink); margin: 0 0 8px;
}
.plat-ro .nm em { font-style: italic; color: var(--brick); }
.plat-ro .desc {
    font-family: var(--font-serif); font-style: italic;
    font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px;
}
.plat-ro .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.plat-ro .tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; padding: 3px 9px; border-radius: 99px;
    background: var(--cream); color: var(--ink-2); font-weight: 500;
}
.plat-ro .tag svg { width: 13px; height: 13px; stroke-width: 1.8; }
.plat-ro .tag.warn { background: var(--warn-soft); color: #7A5A00; }
.plat-ro .price {
    font-family: var(--font-serif); font-size: 20px; color: var(--ink);
    letter-spacing: -0.01em; padding-top: 12px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: baseline;
}
.plat-ro .price .unit { font-size: 12px; color: var(--muted); font-family: var(--font-ui); }

.bottom-cta {
    margin-top: 48px; text-align: center;
    padding: 44px 28px;
    background: var(--cream); border-radius: var(--r-lg); border: 1px solid var(--border);
}
.bottom-cta h3 {
    font-family: var(--font-serif); font-size: 34px; font-weight: 400;
    letter-spacing: -0.015em; margin: 0 0 10px; color: var(--ink);
}
.bottom-cta h3 em { font-style: italic; color: var(--brick); }
.bottom-cta p { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-2); margin: 0 0 20px; }

/* ══════════════════════════════════════════════════════════════
   MENU FERMÉ
   ══════════════════════════════════════════════════════════════ */

.closed-hero {
    max-width: 620px;
    margin: 40px auto 36px;
    text-align: center;
}
.closed-hero .ic {
    display: inline-grid; place-items: center;
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--cream); color: var(--brick);
    margin-bottom: 28px; border: 2px solid var(--border);
}
.closed-hero .ic svg { width: 48px; height: 48px; stroke-width: 1.4; }
.closed-hero h1 {
    font-family: var(--font-serif); font-size: 58px; line-height: 1.02;
    font-weight: 400; letter-spacing: -0.022em; margin: 0 0 16px; color: var(--ink);
}
.closed-hero h1 em { font-style: italic; color: var(--brick); }
.closed-hero .lede {
    font-family: var(--font-serif); font-style: italic;
    font-size: 19px; color: var(--ink-2); line-height: 1.55;
    max-width: 500px; margin: 0 auto;
}

.closed-contact {
    max-width: 560px; margin: 32px auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 28px 32px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 560px) { .closed-contact { grid-template-columns: 1fr; } }
.closed-contact .item { display: flex; gap: 12px; align-items: center; }
.closed-contact .ic2 {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cream); border: 1px solid var(--border);
    display: grid; place-items: center; color: var(--brick); flex-shrink: 0;
}
.closed-contact .ic2 svg { width: 18px; height: 18px; stroke-width: 1.7; }
.closed-contact .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.closed-contact a { font-size: 14.5px; color: var(--ink); text-decoration: none; font-weight: 500; display: block; margin-top: 1px; }
.closed-contact a:hover { color: var(--brick); }

/* ══════════════════════════════════════════════════════════════
   GÉRER RDV
   ══════════════════════════════════════════════════════════════ */

.rdv-intro { margin-bottom: 28px; }
.rdv-intro h2 { margin-bottom: 8px; }
.rdv-intro .lede {
    font-family: var(--font-serif); font-style: italic;
    font-size: 18px; color: var(--ink-2); max-width: 560px; line-height: 1.5;
}

.rdv-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    align-items: start;
}
@media (max-width: 900px) { .rdv-layout { grid-template-columns: 1fr; gap: 24px; } }
.rdv-layout > aside { align-self: stretch; }

.current-rdv {
    background: linear-gradient(135deg, var(--ink) 0%, #2A2218 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 22px 26px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}
.current-rdv .info .lbl {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.6); font-weight: 500; margin-bottom: 8px;
    display: flex; align-items: center; gap: 7px;
}
.current-rdv .info .lbl svg { width: 13px; height: 13px; stroke-width: 2.2; color: var(--forest-soft); }
.current-rdv .info .when {
    font-family: var(--font-serif); font-size: 32px;
    line-height: 1.05; letter-spacing: -0.015em;
}
.current-rdv .info .when em { font-style: italic; color: var(--brick-soft); }
.current-rdv .info .where { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 5px; }
.current-rdv .badge {
    background: var(--forest-soft); color: var(--forest-deep);
    font-size: 11.5px; padding: 5px 11px; border-radius: 99px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.current-rdv .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.change-tt {
    font-family: var(--font-serif); font-size: 24px; font-weight: 400;
    letter-spacing: -0.015em; margin: 28px 0 16px;
}
.change-tt em { font-style: italic; color: var(--brick); }

/* État "actuel" sur les créneaux de gerer_rdv */
.creneau.current {
    border: 2px solid var(--ink);
    background: var(--cream);
}
.creneau.current .h em { color: var(--ink); }
.creneau.current .span-30,
.creneau.current .lbl-cr { color: var(--ink); font-weight: 600; }

/* Sidebar commande */
.order-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.order-side .card-x {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
}
.order-side .card-x .hd {
    padding: 13px 20px; font-size: 11.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
    border-bottom: 1px solid var(--border); background: var(--paper);
}
.order-side .card-x .bd { padding: 16px 20px; }
.order-side .num-cmd {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .08em; margin-bottom: 6px;
}
.order-side ul.lines { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.order-side ul.lines li {
    display: flex; justify-content: space-between;
    padding: 7px 0; color: var(--ink-2);
    border-bottom: 1px solid var(--border);
}
.order-side ul.lines li:last-child { border-bottom: none; }
.order-side ul.lines .qty {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted-2); margin-left: 8px; flex-shrink: 0;
}

.help-card {
    padding: 18px 20px;
    background: var(--cream); border: 1px solid var(--border);
    border-radius: var(--r-lg); font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.help-card strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 5px; }

.confirm-bar {
    margin-top: 18px; padding: 16px 18px;
    background: var(--brick); color: #fff;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
}
.confirm-bar.hidden { display: none; }
.confirm-bar .msg { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.3; flex: 1; }
.confirm-bar .msg b { font-style: normal; font-family: var(--font-ui); font-weight: 600; }
.confirm-bar .actions { display: flex; gap: 8px; flex-shrink: 0; }
.confirm-bar button {
    background: transparent; border: 1px solid rgba(255,255,255,.4);
    color: #fff; padding: 8px 14px; border-radius: var(--r-sm);
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.confirm-bar button.confirm { background: #fff; color: var(--brick); border-color: #fff; }

/* ── Journées de collecte (menus/form.html) ───────────────── */
.collecte-jour {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.collecte-jour-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.collecte-jour-head strong {
    font-size: 14px;
    color: var(--ink);
    font-family: var(--font-ui);
}
.collecte-blocs-txt {
    font-size: 0.83rem;
    color: var(--muted);
    margin-bottom: 10px;
}
.collecte-blocs-txt strong { color: var(--ink-2); }
.collecte-bloc-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.collecte-bloc-form label { font-size: 0.75rem; }

/* Actions rapides — boutons pleine largeur dans la sidebar */
.detail-col-side .btn {
    width: 100%;
    justify-content: flex-start;
}

/* ── Pill cliquable (bouton) — même look que span.pill ───────── */
button.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font-ui);
    border: none;
    cursor: pointer;
    line-height: 1.4;
    transition: opacity .15s, filter .15s;
}
button.pill-btn:hover { filter: brightness(.93); }
button.pill-btn.ok   { background: var(--forest-soft); color: var(--forest); }
button.pill-btn.gray { background: var(--cream);       color: var(--muted);  }
button.pill-btn .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0;
}
.pagination-info {
    font-size: .875rem;
    color: var(--muted);
}