/* ===================================================
   LA CUISINE DE NATTY - Design noir/or thailandais
   Mobile-first approach
   =================================================== */

:root {
    /* Couleurs base */
    --noir: #0a0a0a;
    --noir-carte: #131313;
    --noir-leger: #1c1c1c;
    --noir-eleve: #232323;
    --or: #d4a843;
    --or-clair: #e8c876;
    --or-fonce: #8b6914;
    --vert: #2d5016;
    --vert-clair: #4a8a2a;
    --blanc: #f5f0e8;
    --blanc-pur: #ffffff;
    --gris: #b8b8b8;
    --gris-fonce: #6b6b6b;
    --rouge: #e74c3c;

    /* Bordures et radius */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Ombres multi-niveaux */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(212, 168, 67, 0.25);

    /* Gradients dorés */
    --gradient-or: linear-gradient(135deg, #e8c876 0%, #d4a843 50%, #b8902a 100%);
    --gradient-or-soft: linear-gradient(135deg, rgba(232, 200, 118, 0.12) 0%, rgba(212, 168, 67, 0.04) 100%);
    --gradient-noir: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);

    /* Bordures */
    --border-or-soft: 1px solid rgba(212, 168, 67, 0.18);
    --border-or-strong: 1px solid rgba(212, 168, 67, 0.45);

    /* Animations */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --header-height: 64px;
    --max-width: 1200px;

    /* Compatibilité */
    --ombre: var(--shadow-lg);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--noir);
    color: var(--blanc);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

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

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--or);
}

/* ============================
   NAVIGATION (mobile-first)
   ============================ */
.navbar {
    background: rgba(10, 10, 10, 0.75);
    border-bottom: 1px solid rgba(212, 168, 67, 0.15);
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Georgia', serif;
    font-size: 1.1rem;
    color: var(--or);
    font-weight: bold;
    text-decoration: none;
}
.navbar-logo:hover { color: var(--or-clair); }
.navbar-logo .logo-icon { font-size: 1.5rem; }

/* Mobile: actions (panier + burger) */
.navbar-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-panier-mobile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid var(--or-fonce);
    border-radius: 50%;
    color: var(--or);
    text-decoration: none;
    transition: var(--transition);
}
.navbar-panier-mobile:hover { background: rgba(212, 168, 67, 0.25); color: var(--or-clair); }
.navbar-panier-mobile i,
.navbar-panier-mobile svg { width: 20px; height: 20px; }

.badge-panier-mobile {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--or);
    color: var(--noir);
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    border: 2px solid var(--noir);
}

/* Mobile: menu burger visible, liens caches */
.menu-burger {
    display: block;
    background: none;
    border: none;
    color: var(--or);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}

.navbar-liens {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--noir-carte);
    border-bottom: 2px solid var(--or-fonce);
    flex-direction: column;
    padding: 0.5rem;
    list-style: none;
    z-index: 999;
}

.navbar-liens.ouvert {
    display: flex;
}

.navbar-liens a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 8px;
    color: var(--blanc);
    font-size: 1rem;
    transition: var(--transition);
    min-height: 48px;
}

.navbar-liens a:hover,
.navbar-liens a.actif {
    background: rgba(212, 168, 67, 0.15);
    color: var(--or);
}

.navbar-liens .badge-panier {
    background: var(--or);
    color: var(--noir);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Séparateurs dorés entre les liens */
.nav-sep {
    display: none;
    list-style: none;
}

/* Bouton déconnexion rouge */
.nav-deconnexion {
    color: var(--rouge) !important;
}
.nav-deconnexion:hover {
    background: rgba(192, 57, 43, 0.15) !important;
    color: #e74c3c !important;
}

/* ============================
   LUCIDE ICONS
   ============================ */
.icone {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    flex-shrink: 0;
}
.icone-sm {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
}
.logo-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ============================
   HERO (mobile-first) avec fond
   ============================ */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 2rem 1rem;
    background: var(--noir);
}

/* Grille d'images de fond thailandaises */
.hero-fond {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    opacity: 0.55;
}
.hero-img {
    background-size: cover;
    background-position: center;
    filter: sepia(20%) saturate(90%) brightness(80%);
}
.hero-img-1 {
    background-image: url('/images/hero/thai-1.jpg');
}
.hero-img-2 {
    background-image: url('/images/hero/thai-2.jpg');
}
.hero-img-3 {
    background-image: url('/images/hero/thai-3.jpg');
}
.hero-img-4 {
    background-image: url('/images/hero/thai-4.jpg');
}

/* Overlay sombre par-dessus les images */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(10, 10, 10, 0.6) 0%,
        rgba(10, 10, 10, 0.85) 50%,
        rgba(10, 10, 10, 0.95) 100%
    );
    z-index: 1;
}

.hero-contenu {
    position: relative;
    z-index: 2;
    max-width: 700px;
    width: 100%;
}

.hero-logo-icon {
    margin-bottom: 1rem;
}
.hero-logo-icon i,
.hero-logo-icon svg {
    width: 64px;
    height: 64px;
    color: var(--or);
    filter: drop-shadow(0 0 20px rgba(212, 168, 67, 0.3));
}

.hero h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 20px rgba(212, 168, 67, 0.3);
    line-height: 1.2;
}
.hero h1 .accent {
    color: var(--or-clair);
    font-style: italic;
}

.hero-soustitre {
    font-size: 0.9rem;
    color: var(--or-fonce);
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

.hero-badges {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 1.2rem 0;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid var(--or-fonce);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--or);
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.5rem;
    align-items: center;
}

/* ============================
   BOUTONS modernes
   ============================ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
    width: 100%;
    min-height: 50px;
    letter-spacing: 0.3px;
    overflow: hidden;
    isolation: isolate;
}
.btn:active {
    transform: scale(0.97);
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}
.btn:hover::before { opacity: 1; }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-or {
    background: var(--gradient-or);
    color: var(--noir);
    box-shadow: 0 6px 20px rgba(212, 168, 67, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
}
.btn-or:hover {
    box-shadow: 0 10px 30px rgba(212, 168, 67, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: var(--noir);
    transform: translateY(-1px);
}

.btn-contour {
    background: rgba(212, 168, 67, 0.06);
    color: var(--or);
    border: 1.5px solid rgba(212, 168, 67, 0.4);
    backdrop-filter: blur(10px);
}
.btn-contour:hover {
    background: rgba(212, 168, 67, 0.12);
    border-color: var(--or);
    color: var(--or-clair);
}

.btn-vert {
    background: linear-gradient(135deg, var(--vert-clair) 0%, var(--vert) 100%);
    color: var(--blanc-pur);
    box-shadow: 0 6px 20px rgba(74, 138, 42, 0.25);
}
.btn-vert:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(74, 138, 42, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: var(--blanc-pur);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.25);
}
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--gris);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--blanc);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-sm {
    padding: 9px 16px;
    font-size: 0.85rem;
    width: auto;
    min-height: 38px;
    border-radius: var(--radius-sm);
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    min-height: auto;
}

/* ============================
   SECTIONS (mobile-first)
   ============================ */
.section {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
}

.section-titre {
    text-align: center;
    margin-bottom: 2rem;
}
.section-titre h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.section-titre .ligne-or {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--or), transparent);
    margin: 0.6rem auto;
}
.section-titre p { color: var(--gris); font-size: 0.95rem; }

/* ============================
   STATUT RESTAURANT
   ============================ */
.statut-restaurant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.statut-ouvert {
    background: rgba(45, 80, 22, 0.3);
    border: 1px solid var(--vert-clair);
    color: var(--vert-clair);
}
.statut-ferme {
    background: rgba(192, 57, 43, 0.3);
    border: 1px solid var(--rouge);
    color: var(--rouge);
}
.statut-point {
    width: 8px; height: 8px;
    border-radius: 50%;
    animation: clignotement 1.5s ease-in-out infinite;
}
.statut-ouvert .statut-point { background: var(--vert-clair); }
.statut-ferme .statut-point { background: var(--rouge); }

@keyframes clignotement {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================
   CARTE / MENU (mobile-first)
   ============================ */
.carte-categorie { margin-bottom: 2rem; }
.carte-categorie h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(212, 168, 67, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mobile: 1 colonne */
.grille-plats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.carte-plat {
    background: var(--gradient-glass), var(--noir-carte);
    border: 1px solid rgba(212, 168, 67, 0.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.carte-plat:hover {
    border-color: rgba(212, 168, 67, 0.35);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(212, 168, 67, 0.08);
}

.carte-plat-image {
    height: 180px;
    overflow: hidden;
    position: relative;
    background: var(--noir-leger);
}
.carte-plat-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.carte-plat-image .plat-indisponible {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rouge);
    font-weight: 700;
    font-size: 1.1rem;
}

.carte-plat-contenu {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.carte-plat-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noir-leger);
}
.carte-plat-placeholder i,
.carte-plat-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--or-fonce);
    opacity: 0.5;
}

.carte-plat-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
    gap: 8px;
}
.carte-plat-nom {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--or);
    font-family: 'Georgia', serif;
}

/* Formats de prix par plat */
.carte-plat-formats-prix {
    display: flex;
    gap: 8px;
    margin-bottom: 0.6rem;
}
.carte-format-tag {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.25);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--gris);
}
.carte-format-tag strong {
    color: var(--or-clair);
    margin-left: 2px;
}

.carte-plat-description {
    color: var(--gris);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    flex: 1;
}

.carte-plat-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.option-tag {
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--or);
}

/* Actions plat: empilees sur mobile */
.carte-plat-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.carte-plat-actions select {
    background: var(--noir-leger);
    border: 1px solid rgba(212, 168, 67, 0.3);
    color: var(--blanc);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
}
.carte-plat-actions select:focus {
    outline: none;
    border-color: var(--or);
}

/* ============================
   FORMATS DE PRIX
   ============================ */
.formats-prix {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.formats-prix h4 { margin-bottom: 0.6rem; font-size: 1rem; }
.formats-prix .format-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0.3rem 0;
    font-size: 0.95rem;
}
.formats-prix .format-prix {
    color: var(--or-clair);
    font-weight: 700;
    font-size: 1.1rem;
}
.formats-prix .format-fleche { color: var(--or-fonce); }

/* ============================
   PANIER (mobile-first)
   ============================ */
.panier-vide {
    text-align: center;
    padding: 3rem 1rem;
}
.panier-vide-icon {
    margin-bottom: 1rem;
    opacity: 0.4;
}
.panier-vide-icon i,
.panier-vide-icon svg {
    width: 64px;
    height: 64px;
    color: var(--or);
}

/* Mobile: tableau en mode carte */
.panier-tableau { width: 100%; border-collapse: collapse; }
.panier-tableau thead { display: none; }
.panier-tableau tbody tr {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 8px;
}
.panier-tableau td {
    padding: 4px 0;
    border: none;
    vertical-align: middle;
}

.panier-plat-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.panier-plat-info img {
    width: 50px; height: 50px;
    object-fit: cover;
    border-radius: 8px;
}
.panier-plat-nom { font-weight: 600; color: var(--blanc); }
.panier-plat-format { font-size: 0.85rem; color: var(--gris); }

.panier-quantite {
    display: flex;
    align-items: center;
    gap: 12px;
}
.panier-quantite button {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--or-fonce);
    background: transparent;
    color: var(--or);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.panier-quantite button:hover { background: rgba(212, 168, 67, 0.2); }
.panier-quantite span { min-width: 30px; text-align: center; font-weight: 600; font-size: 1.1rem; }
.panier-total-ligne { font-weight: 700; color: var(--or); font-size: 1.1rem; }

.panier-resume {
    background: var(--noir-carte);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-top: 1.5rem;
}
.panier-resume-ligne {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 1rem;
}
.panier-resume-total {
    border-top: 2px solid var(--or-fonce);
    margin-top: 8px;
    padding-top: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--or);
}

.panier-commentaire {
    width: 100%;
    background: var(--noir-leger);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: 8px;
    color: var(--blanc);
    padding: 12px;
    margin: 1rem 0;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}
.panier-commentaire:focus { outline: none; border-color: var(--or); }

/* ============================
   COMMANDES (mobile-first)
   ============================ */
.commande-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.commande-carte:hover {
    border-color: rgba(212, 168, 67, 0.35);
    box-shadow: var(--shadow-lg);
}

.commande-entete {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1rem;
}
.commande-numero {
    font-family: monospace;
    font-size: 1rem;
    color: var(--or);
    font-weight: 700;
}
.commande-statut {
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
}

.statut-en_attente { background: rgba(241, 196, 15, 0.2); color: #f1c40f; }
.statut-payee { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.statut-en_preparation { background: rgba(52, 152, 219, 0.2); color: #3498db; }
.statut-prete { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.statut-livraison_en_cours { background: rgba(52, 152, 219, 0.2); color: #3498db; }
.statut-livree { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.statut-recuperee { background: rgba(149, 165, 166, 0.2); color: #95a5a6; }
.statut-annulee { background: rgba(192, 57, 43, 0.2); color: #c0392b; }
.statut-remboursee_partiel { background: rgba(230, 126, 34, 0.2); color: #e67e22; }
.statut-remboursee { background: rgba(230, 126, 34, 0.2); color: #e67e22; }

/* ============================
   CONFIRMATION
   ============================ */
.confirmation { text-align: center; padding: 2rem 1rem; }
.confirmation-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: apparition 0.5s ease;
}

@keyframes apparition {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============================
   FORMULAIRES (mobile-first)
   ============================ */
.form-groupe { margin-bottom: 1.2rem; }
.form-groupe label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
    color: var(--or);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.form-groupe input,
.form-groupe select,
.form-groupe textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius);
    color: var(--blanc);
    font-size: 16px;
    font-family: inherit;
    transition: var(--transition-fast);
    min-height: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.form-groupe input::placeholder,
.form-groupe textarea::placeholder {
    color: var(--gris-fonce);
    font-weight: 400;
}
.form-groupe input:hover,
.form-groupe select:hover,
.form-groupe textarea:hover {
    border-color: rgba(212, 168, 67, 0.4);
    background: rgba(255, 255, 255, 0.04);
}
.form-groupe input:focus,
.form-groupe select:focus,
.form-groupe textarea:focus {
    outline: none;
    border-color: var(--or);
    background: rgba(212, 168, 67, 0.04);
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.12);
}

/* Select : flèche custom */
.form-groupe select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4a843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* Date/time inputs */
.form-groupe input[type="date"],
.form-groupe input[type="time"],
.form-groupe input[type="datetime-local"] {
    color-scheme: dark;
}
.form-groupe input[type="date"]::-webkit-calendar-picker-indicator,
.form-groupe input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(60%) sepia(60%) saturate(400%) hue-rotate(15deg);
    cursor: pointer;
}

.form-erreur { color: var(--rouge); font-size: 0.85rem; margin-top: 4px; }

.form-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    max-width: 500px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
}
.form-carte h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; }

.form-carte .form-groupe input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin-right: 8px;
}

/* ============================
   FLASH MESSAGES
   ============================ */
.flash-messages { max-width: 1200px; margin: 0.5rem auto; padding: 0 1rem; }
.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.flash-succes {
    background: rgba(45, 80, 22, 0.3);
    border: 1px solid var(--vert-clair);
    color: var(--vert-clair);
}
.flash-erreur {
    background: rgba(192, 57, 43, 0.3);
    border: 1px solid var(--rouge);
    color: #e74c3c;
}

/* ============================
   FOOTER (mobile-first)
   ============================ */
.footer {
    background: var(--noir-carte);
    border-top: 2px solid var(--or-fonce);
    padding: 2rem 1rem;
    margin-top: 3rem;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.footer h4 { margin-bottom: 0.8rem; font-size: 1.05rem; }
.footer p, .footer a { color: var(--gris); font-size: 0.9rem; line-height: 1.8; }
.footer a:hover { color: var(--or); }
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--gris);
    font-size: 0.8rem;
}

/* ============================
   ADMIN (mobile-first)
   ============================ */
.admin-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-sidebar {
    width: 100%;
    background: var(--noir-carte);
    border-bottom: 1px solid rgba(212, 168, 67, 0.15);
    padding: 1rem 0;
    flex-shrink: 0;
}
.admin-sidebar-titre {
    padding: 0 1rem 1rem;
    border-bottom: 1px solid rgba(212, 168, 67, 0.1);
    margin-bottom: 0.5rem;
}
.admin-sidebar-titre h3 { font-size: 1rem; }
.admin-sidebar-titre small { color: var(--gris); font-size: 0.8rem; }

.admin-nav {
    list-style: none;
    display: flex;
    overflow-x: auto;
    padding: 0.5rem 1rem;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: var(--blanc);
    font-size: 0.9rem;
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    min-height: 44px;
}
.admin-nav a:hover,
.admin-nav a.actif {
    background: rgba(212, 168, 67, 0.1);
    color: var(--or);
    border-bottom-color: var(--or);
}

.admin-contenu { flex: 1; padding: 1rem; overflow-x: auto; }

.admin-entete {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.admin-entete h2 { font-size: 1.3rem; }

.admin-tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--noir-carte);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.85rem;
}
.admin-tableau th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(212, 168, 67, 0.08);
    color: var(--or);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--or-fonce);
}
.admin-tableau td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-stat-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.admin-stat {
    background: var(--noir-carte);
    border: 1px solid rgba(212, 168, 67, 0.15);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}
.admin-stat-valeur { font-size: 1.8rem; font-weight: 700; color: var(--or); }
.admin-stat-label { color: var(--gris); font-size: 0.8rem; margin-top: 0.2rem; }

/* ============================
   PACKS FAMILLE (mobile-first)
   ============================ */
.packs-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 1.5rem;
}
.pack-carte {
    background: linear-gradient(135deg, rgba(212,168,67,0.08) 0%, var(--noir-carte) 100%);
    border: 2px solid var(--or-fonce);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}
.pack-carte h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.pack-carte .pack-prix {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--or-clair);
    margin: 0.8rem 0;
}
.pack-carte .pack-detail { color: var(--gris); margin-bottom: 1.2rem; font-size: 0.9rem; }

/* ============================
   VALIDATION COMMANDE (mobile-first)
   ============================ */
.validation-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.validation-formulaire {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.validation-section-titre {
    font-size: 1rem;
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 168, 67, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.validation-ligne-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.validation-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
}
.validation-checkbox input[type="checkbox"] {
    width: auto;
    min-height: auto;
}
.validation-checkbox label {
    margin: 0;
    color: var(--blanc);
    font-weight: normal;
    cursor: pointer;
}

/* ============================
   PAIEMENT (mobile-first)
   ============================ */
.paiement-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.paiement-recap {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.paiement-recap h3 { margin-bottom: 1rem; font-size: 1.05rem; }
.paiement-recap-numero {
    font-family: monospace;
    color: var(--or);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    word-break: break-all;
}
.paiement-recap-ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 10px;
    font-size: 0.9rem;
}
.paiement-recap-ligne > span:first-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.paiement-recap-ligne > span:last-child {
    white-space: nowrap;
    flex-shrink: 0;
}
.paiement-recap-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    color: var(--gris);
    font-size: 0.85rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
}
.paiement-recap-info i,
.paiement-recap-info svg { flex-shrink: 0; }
.paiement-recap-total {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid var(--or-fonce);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--or);
}

.paiement-formulaire {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    min-width: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.paiement-formulaire h3 {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.paiement-ligne-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stripe-element {
    background: var(--noir-leger);
    border: 1px solid rgba(212, 168, 67, 0.25);
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 48px;
    transition: var(--transition);
}
.stripe-element:focus-within {
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.1);
}

.paiement-securite {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--gris);
    font-size: 0.8rem;
}

.paiement-chargement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: var(--or);
    font-weight: 600;
}

.paiement-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(212, 168, 67, 0.2);
    border-top-color: var(--or);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================
   ADMIN HORAIRES — Vue calendrier moderne
   ============================ */

/* Onglets */
.onglets {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.025);
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid rgba(212, 168, 67, 0.15);
    width: fit-content;
}
.onglet {
    background: transparent;
    border: none;
    color: var(--gris);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}
.onglet:hover {
    color: var(--blanc);
}
.onglet-actif {
    background: var(--gradient-or);
    color: var(--noir);
    box-shadow: var(--shadow-glow);
}
.onglet-contenu {
    display: none;
}
.onglet-contenu.actif {
    display: block;
    animation: fade-in 0.3s ease;
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grille des jours */
.jours-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.jour-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}
.jour-carte.jour-actif {
    border-color: rgba(212, 168, 67, 0.25);
    box-shadow: var(--shadow-md);
}
.jour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.jour-header h3 {
    font-size: 1.1rem;
    margin: 0;
}
.jour-plages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}
.plage-bulle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius);
    color: var(--blanc);
    font-size: 0.9rem;
}
.plage-bulle i,
.plage-bulle svg {
    color: var(--or);
    flex-shrink: 0;
}
.plage-bulle small {
    color: var(--gris);
    margin-left: auto;
}
.plage-supprimer {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: var(--rouge);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-left: 4px;
}
.plage-supprimer:hover {
    background: rgba(231, 76, 60, 0.3);
}
.jour-ajouter-btn {
    width: 100%;
    justify-content: center;
}
.jour-form-ajout {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 168, 67, 0.15);
    animation: fade-in 0.3s ease;
}
.jour-form-ajout.actif {
    display: block;
}

/* Fermetures */
.fermetures-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fermeture-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(10px);
}
.fermeture-icone {
    width: 44px;
    height: 44px;
    background: rgba(231, 76, 60, 0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rouge);
    flex-shrink: 0;
}
.fermeture-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fermeture-info small {
    color: var(--gris);
    font-size: 0.8rem;
}

/* ============================
   LIVREUR
   ============================ */
.livreur-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.livreur-carte-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 168, 67, 0.15);
}
.livreur-creneau {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.25);
    border-radius: var(--radius-full);
    color: var(--or);
    width: fit-content;
    font-size: 0.9rem;
}
.livreur-info {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.livreur-info:last-of-type { border-bottom: none; }
.livreur-info-label {
    flex: 0 0 120px;
    color: var(--or);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.livreur-info-valeur {
    flex: 1;
    color: var(--blanc);
    font-size: 0.95rem;
}
.livreur-tel,
.livreur-itineraire {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--or-clair);
    font-weight: 600;
    text-decoration: underline;
}

/* ============================
   PANIER — Mode selector + lignes
   ============================ */
.mode-selecteur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 1.5rem;
}
.mode-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1.5px solid rgba(212, 168, 67, 0.18);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition-fast);
}
.mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.mode-option:hover {
    background: rgba(212, 168, 67, 0.05);
    border-color: rgba(212, 168, 67, 0.35);
}
.mode-option.mode-active {
    background: rgba(212, 168, 67, 0.1);
    border-color: var(--or);
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.1);
}
.mode-icone {
    width: 42px;
    height: 42px;
    background: rgba(212, 168, 67, 0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
}
.mode-option.mode-active .mode-icone {
    background: var(--gradient-or);
}
.mode-option.mode-active .mode-icone i,
.mode-option.mode-active .mode-icone svg {
    color: var(--noir);
}
.mode-icone i, .mode-icone svg {
    width: 22px;
    height: 22px;
    color: var(--or);
}
.mode-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mode-info strong {
    font-size: 0.9rem;
    color: var(--blanc);
}
.mode-info small {
    font-size: 0.75rem;
    color: var(--gris);
}

/* Panier ligne */
.panier-ligne {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.panier-ligne:last-of-type { border-bottom: none; }
.panier-ligne-info { min-width: 0; }
.panier-ligne-info strong {
    color: var(--or);
    font-size: 0.95rem;
}
.panier-pack-contenu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.panier-ligne-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.panier-ligne-prix {
    color: var(--or);
    font-weight: 700;
    font-size: 1rem;
    margin-left: auto;
}

/* ============================
   ADMIN — Plat options (variations / conditionnements)
   ============================ */
.options-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.options-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.option-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 168, 67, 0.15);
    border-radius: var(--radius);
}

/* ============================
   PAGE D'ACCUEIL — Sections
   ============================ */
.section-alt {
    background: linear-gradient(180deg, transparent, rgba(212, 168, 67, 0.025), transparent);
    max-width: none;
    padding: 3rem 1rem;
}
.section-alt > * {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Concept */
.concept-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.concept-item {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}
.concept-item:hover {
    border-color: rgba(212, 168, 67, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.concept-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem;
    background: var(--gradient-or);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
}
.concept-icone i, .concept-icone svg {
    width: 32px;
    height: 32px;
    color: var(--noir);
}
.concept-item h3 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}
.concept-item p {
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Services livraison/retrait */
.services-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.service-carte {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}
.service-carte:hover {
    border-color: rgba(212, 168, 67, 0.4);
    transform: translateY(-4px);
}
.service-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.service-icone {
    width: 56px;
    height: 56px;
    background: var(--gradient-or);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-glow);
}
.service-icone i, .service-icone svg {
    width: 28px;
    height: 28px;
    color: var(--noir);
}
.service-header h3 {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}
.service-desc {
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.service-points {
    list-style: none;
    padding: 0;
}
.service-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--blanc);
    font-size: 0.9rem;
}
.service-points li i,
.service-points li svg {
    color: var(--vert-clair);
    flex-shrink: 0;
}

/* Marché de Bondy */
.marche-carte {
    background: var(--gradient-or-soft), var(--noir-carte);
    border: var(--border-or-strong);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}
.marche-icone {
    width: 80px;
    height: 80px;
    background: var(--gradient-or);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
    flex-shrink: 0;
}
.marche-icone i, .marche-icone svg {
    width: 40px;
    height: 40px;
    color: var(--noir);
}
.marche-contenu h2 {
    font-size: 1.5rem;
    margin: 0.8rem 0;
}
.marche-contenu p {
    color: var(--gris);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.marche-horaires {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.marche-horaire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--or-clair);
    font-size: 0.9rem;
}

/* Allergènes */
.allergenes-info {
    max-width: 800px;
    margin: 0 auto;
}
.allergenes-intro {
    text-align: center;
    color: var(--gris);
    margin-bottom: 1.5rem;
}
.allergenes-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.allergene-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    font-size: 0.85rem;
    color: var(--blanc);
}
.allergene-item i,
.allergene-item svg {
    width: 24px;
    height: 24px;
    color: var(--or);
    flex-shrink: 0;
}
.allergenes-note {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.25);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.allergenes-note i,
.allergenes-note svg {
    color: var(--or);
    flex-shrink: 0;
    margin-top: 2px;
}
.allergenes-note p {
    color: var(--blanc);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

/* CTA final */
.cta-final {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--gradient-or-soft), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.cta-final h2 {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
}
.cta-final p {
    color: var(--gris);
    margin-bottom: 0;
}

/* ============================
   COMPOSANTS UI MODERNES
   ============================ */

/* Glass card générique */
.glass-card {
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

/* Badge / chip moderne */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--or);
    font-weight: 500;
}
.chip-vert { background: rgba(74, 138, 42, 0.15); border-color: rgba(74, 138, 42, 0.3); color: var(--vert-clair); }
.chip-rouge { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.3); color: var(--rouge); }

/* Switch toggle moderne */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
}
.switch-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--gris);
    transition: var(--transition-fast);
    border-radius: 50%;
}
.switch input:checked + .switch-slider {
    background: var(--gradient-or);
    border-color: var(--or);
}
.switch input:checked + .switch-slider::before {
    transform: translateX(22px);
    background: var(--noir);
}

/* Toast container */
#toasts {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    right: 16px;
    left: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--gradient-glass), var(--noir-carte);
    border: var(--border-or-soft);
    border-radius: var(--radius);
    padding: 14px 18px;
    color: var(--blanc);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    animation: toast-in 0.4s var(--bounce);
    max-width: 100%;
}
.toast.toast-out { animation: toast-out 0.3s ease forwards; }
.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast-icon i, .toast-icon svg { width: 18px; height: 18px; }
.toast-succes .toast-icon { background: rgba(74, 138, 42, 0.2); color: var(--vert-clair); }
.toast-erreur .toast-icon { background: rgba(231, 76, 60, 0.2); color: var(--rouge); }
.toast-info .toast-icon { background: rgba(212, 168, 67, 0.2); color: var(--or); }

@keyframes toast-in {
    from { transform: translateY(-20px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to { transform: translateY(-20px) scale(0.95); opacity: 0; }
}

/* Skeletons de chargement */
@keyframes skeleton-shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ============================
   UTILITAIRES
   ============================ */
.text-center { text-align: center; }
.text-or { color: var(--or); }
.text-gris { color: var(--gris); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ============================================================
   TABLET (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
    /* Accueil */
    .concept-grille { grid-template-columns: repeat(3, 1fr); }
    .services-grille { grid-template-columns: repeat(2, 1fr); }
    .allergenes-grille { grid-template-columns: repeat(3, 1fr); }
    .options-grille { grid-template-columns: repeat(2, 1fr); }

    /* Livreur */
    .livreur-carte-header { flex-direction: row; justify-content: space-between; align-items: center; }

    /* Horaires */
    .jours-grille { grid-template-columns: repeat(2, 1fr); }
    .marche-carte {
        flex-direction: row;
        text-align: left;
        padding: 2.5rem;
    }
    .marche-contenu h2 { font-size: 2rem; }
    .marche-horaires { flex-direction: row; gap: 1.5rem; }
    .marche-horaire { justify-content: flex-start; }

    .navbar { padding: 0 2rem; }
    .navbar-inner { height: 70px; }
    .navbar-logo { font-size: 1.3rem; gap: 12px; }
    .navbar-logo .logo-icon { font-size: 1.8rem; }

    .menu-burger { display: none; }
    .navbar-panier-mobile { display: none !important; }
    .navbar-liens {
        display: flex;
        position: static;
        flex-direction: row;
        background: none;
        border: none;
        padding: 0;
        align-items: center;
        gap: 4px;
    }
    .navbar-liens a {
        padding: 8px 14px;
        font-size: 0.9rem;
        min-height: auto;
    }

    /* Séparateurs dorés entre liens */
    .nav-sep {
        display: block;
        width: 1px;
        height: 20px;
        background: var(--or-fonce);
        opacity: 0.5;
        flex-shrink: 0;
    }

    .hero { min-height: 80vh; padding: 2rem; }
    .hero-elephant { font-size: 4.5rem; }
    .hero h1 { font-size: 2.8rem; }
    .hero-soustitre { font-size: 1.1rem; letter-spacing: 3px; }
    .hero-badge { font-size: 0.85rem; padding: 6px 14px; }
    .hero-actions { flex-direction: row; justify-content: center; }

    .hero-logo-icon i,
    .hero-logo-icon svg { width: 80px; height: 80px; }

    .btn { width: auto; }

    .section { padding: 3rem 2rem; }
    .section-titre h2 { font-size: 1.9rem; }

    .grille-plats { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .carte-plat-actions {
        flex-direction: column;
    }
    .carte-plat-actions .carte-plat-selects {
        display: flex;
        gap: 6px;
    }
    .carte-plat-actions .carte-plat-selects select {
        flex: 1;
        min-width: 0;
    }

    .formats-prix .format-item {
        display: inline-flex;
        margin: 0 1rem;
    }

    /* Panier: tableau classique */
    .panier-tableau thead { display: table-header-group; }
    .panier-tableau tbody tr {
        display: table-row;
        padding: 0;
        border-bottom: none;
        gap: 0;
    }
    .panier-tableau td {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .panier-resume { padding: 1.5rem; }

    .commande-entete {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .form-carte { padding: 2.5rem; }

    .footer-inner { grid-template-columns: repeat(3, 1fr); }
    .footer { padding: 3rem 2rem; }

    .validation-layout { flex-direction: row; align-items: flex-start; }
    .validation-layout .paiement-recap { flex: 0 0 340px; position: sticky; top: 80px; }
    .validation-layout .validation-formulaire { flex: 1; }

    .paiement-layout { flex-direction: row; align-items: flex-start; }
    .paiement-recap { flex: 1; position: sticky; top: 80px; }
    .paiement-formulaire { flex: 1; }

    .admin-layout { flex-direction: row; }
    .admin-sidebar {
        width: 240px;
        border-bottom: none;
        border-right: 1px solid rgba(212, 168, 67, 0.15);
        padding: 1.5rem 0;
    }
    .admin-nav {
        flex-direction: column;
        overflow-x: visible;
        padding: 0;
    }
    .admin-nav a {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding: 12px 1.5rem;
    }
    .admin-nav a:hover,
    .admin-nav a.actif {
        border-bottom-color: transparent;
        border-left-color: var(--or);
    }
    .admin-contenu { padding: 2rem; }
    .admin-entete { flex-direction: row; justify-content: space-between; align-items: center; }

    .packs-grille { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DESKTOP (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
    .navbar-logo { font-size: 1.4rem; }
    .navbar-liens a { padding: 8px 16px; font-size: 0.95rem; }

    .hero { min-height: 85vh; }
    .hero-logo-icon i,
    .hero-logo-icon svg { width: 96px; height: 96px; }
    .hero h1 { font-size: 3.5rem; }
    .hero-soustitre { font-size: 1.3rem; }
    .hero-badge { font-size: 0.9rem; padding: 6px 16px; }
    .hero-fond { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }

    .section { padding: 4rem 2rem; }
    .section-titre { margin-bottom: 3rem; }
    .section-titre h2 { font-size: 2.2rem; }

    .grille-plats { grid-template-columns: repeat(3, 1fr); }
    .carte-categorie h3 { font-size: 1.6rem; }
    .carte-plat-image { height: 200px; }
    .carte-plat-nom { font-size: 1.15rem; }
    .carte-plat-prix { font-size: 1.1rem; }

    .carte-plat:hover {
        transform: translateY(-4px);
        box-shadow: var(--ombre);
        border-color: var(--or-fonce);
    }
    .carte-plat:hover .carte-plat-image img { transform: scale(1.05); }

    .btn-or:hover { transform: translateY(-2px); }
    .btn-vert:hover { transform: translateY(-2px); }
    .pack-carte:hover { transform: translateY(-4px); border-color: var(--or); }

    .admin-sidebar { width: 260px; padding: 2rem 0; }
    .admin-entete h2 { font-size: 1.6rem; }
    .admin-tableau { font-size: 0.95rem; }
    .admin-tableau th { padding: 14px 16px; font-size: 0.85rem; }
    .admin-tableau td { padding: 12px 16px; }

    .confirmation { padding: 3rem; }
    .confirmation-icon { font-size: 5rem; }
}