:root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-border: #e1e4e8;
    --color-text: #1f2328;
    --color-text-muted: #6b7280;
    --color-primary: #d0021b;
    --color-primary-dark: #a50116;
    --color-success: #1a7f37;
    --color-warning: #b45309;
    --color-danger: #c0392b;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

a {
    color: var(--color-primary);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
}

.topbar__brand {
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--color-text);
}

/* Regroupe la navigation ET les actions permanentes (panier, bouton
   hamburger) côte à côte à droite du logo, exactement comme avant — c'est ce
   groupe qui reste inchangé sur desktop. Sur mobile, seul .topbar__nav (les
   liens) devient un panneau coulissant ; .topbar__actions reste toujours
   dans le header, jamais dans le panneau (voir §3 de la demande : panier
   accessible en permanence, menu ouvert ou fermé). */
.topbar__right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.topbar__nav a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.topbar__nav a.active,
.topbar__nav a:hover {
    color: var(--color-primary);
}

/* Bouton "✕" en tête du panneau coulissant — pertinent seulement sur mobile,
   affiché uniquement dans la media query plus bas. */
.topbar__nav-close {
    display: none;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Doit rester au-dessus du fond assombri (.topbar__backdrop, z-index 55)
       une fois le panneau ouvert, sinon le panier devient inatteignable au
       clic bien que visuellement au même endroit — voir §3 de la demande :
       le panier doit rester cliquable en permanence, menu ouvert ou fermé. */
    position: relative;
    z-index: 65;
}

/* Masqué sur desktop : .topbar__nav reste toujours affichée en ligne
   (ci-dessus), pas besoin de bouton pour l'ouvrir. */
.topbar__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease;
}

.topbar__burger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
}

/* Le panneau ouvert a déjà sa propre croix de fermeture (.topbar__nav-close,
   en tête du panneau) : on efface le hamburger plutôt que de le transformer
   en croix, pour éviter deux icônes de fermeture superposées au même endroit
   de l'écran (le panneau glisse depuis la droite, juste sous le hamburger). */
.topbar__burger.is-open {
    opacity: 0;
    pointer-events: none;
}

.topbar__backdrop {
    display: none;
}

/* Icône panier permanente (en-tête), tous restaurants confondus. */
.cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1;
}

.cart-icon__badge {
    position: absolute;
    top: -0.5rem;
    right: -0.7rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .topbar__burger {
        display: flex;
    }

    .topbar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .topbar__backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Panneau coulissant depuis la droite — sorti du flux normal
       (position: fixed), donc .topbar__actions (panier + hamburger) reste
       seul visible dans la barre d'en-tête. */
    .topbar__nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 60;
        width: min(300px, 82vw);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-surface);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
        padding: 1rem 1.25rem;
        padding-top: calc(1rem + env(safe-area-inset-top));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .topbar__nav.is-open {
        transform: translateX(0);
    }

    .topbar__nav a {
        min-height: 44px;
        padding: 0.6rem 0;
        display: flex;
        align-items: center;
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .topbar__nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0.5rem;
        border: none;
        border-radius: 50%;
        background: var(--color-bg);
        color: var(--color-text);
        font-size: 1.1rem;
        cursor: pointer;
    }
}

.layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.card h2 {
    margin-top: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.stat-card__value {
    font-size: 1.6rem;
    font-weight: 700;
}

.stat-card__label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}

th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

form.inline {
    display: inline;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.form-group .form-help {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-row input {
    width: auto;
}

.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn.btn-secondary:hover {
    background: var(--color-bg);
}

.btn.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.btn.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.text-danger {
    color: var(--color-danger);
}

.text-success {
    color: var(--color-success);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-neutral { background: #eef0f2; color: var(--color-text-muted); }
.badge-warning { background: #fef3c7; color: var(--color-warning); }
.badge-success { background: #dcfce7; color: var(--color-success); }
.badge-danger { background: #fde2e1; color: var(--color-danger); }
.badge-info { background: #dbeafe; color: #1d4ed8; }

/*
 * Chrono affiché au client sur le suivi de commande, décompte des 15 minutes
 * dont dispose le restaurant pour valider sa partie de la commande (voir
 * assets/controllers/order_countdown_controller.js). Passe en orange sous
 * 2 minutes restantes, en rouge une fois le délai écoulé (l'annulation
 * automatique effective dépend ensuite de l'exécution de la tâche cron
 * app:orders:check-timeouts côté serveur).
 */
.order-countdown {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.order-countdown--warning {
    color: var(--color-warning);
    font-weight: 600;
}

.order-countdown--expired {
    color: var(--color-danger);
    font-weight: 600;
}

.banner {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-weight: 600;
}

.banner-closed {
    background: var(--color-danger);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.flash-success { background: #dcfce7; color: var(--color-success); }
.flash-error { background: #fde2e1; color: var(--color-danger); }

.auth-page {
    max-width: 380px;
    margin: 4rem auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
}

.auth-page h1 {
    margin-top: 0;
    font-size: 1.3rem;
}

.empty-state {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* ---- Mode Cuisine (tablette) : écran dédié, pas une variante du back-office ---- */

.kitchen-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #fff;
    background: #1a1a1a;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ---- Tableau Kanban (Reçue / En cours / Prête), toujours visibles
   simultanément : PAS de glisser-déposer, une carte ne change de colonne que
   via les boutons d'action (voir kitchen_controller.js#submitForm), qui
   rafraîchissent uniquement le contenu (jamais de navigation de page — c'est
   ce qui corrige le bug de l'overlay "Démarrer le service" qui réapparaissait
   après chaque action). ---- */
@keyframes kitchen-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Clignotement des cartes non encore validées (colonne "Reçue") quand trop de
   commandes s'accumulent (voir kitchen_controller.js pour le bip répété, dont
   la fréquence augmente avec la charge). */
@keyframes kitchen-urgent-blink {
    0%, 100% { background-color: #2a2a2a; box-shadow: 0 0 0 3px #b3121a inset; }
    50% { background-color: #3a1210; box-shadow: 0 0 0 3px #ff7a00 inset; }
}

/* Flash bref à l'arrivée d'une commande, ciblé sur SA carte uniquement — le
   reste du tableau (commandes déjà en cours dans les autres colonnes) n'est
   jamais perturbé (voir highlightNewArrivals() dans kitchen_controller.js). */
@keyframes kitchen-new-arrival-flash {
    0%, 100% { box-shadow: 0 0 0 4px #ffd400; }
    50% { box-shadow: 0 0 0 4px transparent; }
}

/* Pulsation discrète et continue, tant qu'une commande reste "Reçue" (pas
   encore acquittée par le restaurant) — contrairement au flash ci-dessus
   (bref, uniquement à l'arrivée), celle-ci ne s'arrête que lorsque la carte
   quitte la colonne, voir syncNewOrderAlert() dans kitchen_controller.js.
   Repose sur `animation` (comme .kitchen-card--urgent juste après, défini
   après elle dans ce fichier donc prioritaire en cascade quand les deux
   s'appliquent à la fois) : une seule des deux anime réellement la carte à
   la fois, et c'est volontairement la plus alarmante (urgent) qui l'emporte. */
@keyframes kitchen-unacknowledged-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.55); }
    50% { box-shadow: 0 0 0 9px rgba(255, 212, 0, 0); }
}

.kitchen-card--unacknowledged {
    animation: kitchen-unacknowledged-pulse 1.6s ease-in-out infinite;
}

.kitchen-board {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.kitchen-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.kitchen-column__header {
    flex-shrink: 0;
    padding: 0.85rem 1.1rem;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.kitchen-column--received .kitchen-column__header { border-bottom-color: #b3121a; }
.kitchen-column--preparing .kitchen-column__header { border-bottom-color: #b45309; }
.kitchen-column--ready .kitchen-column__header { border-bottom-color: #1a7f37; }

.kitchen-column__count {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    font-size: 1rem;
}

.kitchen-column__cards {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.kitchen-column__empty {
    opacity: 0.55;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 1.05rem;
}

.kitchen-card {
    background: #2a2a2a;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.kitchen-card--received { border-left: 6px solid #b3121a; }
.kitchen-card--preparing { border-left: 6px solid #b45309; }
.kitchen-card--ready { border-left: 6px solid #1a7f37; }

.kitchen-card--urgent {
    animation: kitchen-urgent-blink 1s steps(1, end) infinite;
}

.kitchen-card--new-arrival {
    animation: kitchen-new-arrival-flash 0.6s ease-in-out 6;
}

.kitchen-card__client {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.kitchen-card__ref {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.7;
}

.kitchen-card__address {
    font-size: 1rem;
    opacity: 0.95;
}

.kitchen-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.kitchen__payment-badge {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
}

.kitchen__payment-badge--cod {
    background: #ffd400;
    color: #1a1a1a;
}

/* Commande multi-restaurants : rappel que ce restaurant ne prépare que sa
   propre partie, le reste étant géré indépendamment par d'autres cuisines. */
.kitchen__multi-badge {
    font-size: 0.85rem;
    opacity: 0.85;
}

.kitchen-card__items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kitchen-card__item {
    display: flex;
    flex-direction: column;
}

.kitchen-card__item-options {
    font-size: 0.8rem;
    opacity: 0.75;
}

.kitchen-card__countdown {
    font-weight: 700;
}

.kitchen-card__prep-label {
    font-weight: 700;
    opacity: 0.9;
}

.kitchen-card__waiting {
    color: #ffd400;
    font-weight: 700;
    font-size: 0.95rem;
}

.kitchen-card__actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.kitchen-card__actions--three { grid-template-columns: repeat(3, 1fr); }
.kitchen-card__actions--one { grid-template-columns: 1fr; }

.kitchen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.75rem;
    padding: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a1a;
    background: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
}

.kitchen-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.kitchen-btn--ready {
    background: #d4edda;
}

/* Bouton "Imprimer le ticket" : présent sur chaque carte des 3 colonnes (voir
   macros/order.html.twig::kitchen_card_header()), utilisable à tout moment
   et plusieurs fois (réimpression). Couleur neutre pour bien le distinguer
   des actions de workflow (Valider/Prêt/Assigner). */
.kitchen-btn--print {
    min-height: 3rem;
    background: #444;
    color: #fff;
    font-size: 0.95rem;
}

.kitchen-card__drivers {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.kitchen-card__driver-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: none;
    background: #1a7f37;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.kitchen-card__driver-btn:active {
    transform: translateY(2px);
}

.kitchen__start-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.kitchen__start-overlay[hidden] {
    display: none;
}

.kitchen__start-button {
    font-size: 3rem;
    font-weight: 800;
    padding: 2rem 4rem;
    border-radius: 20px;
    border: none;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
}

/* ---- Barre du haut (accès discret aux stats/historique du jour) : reste
   fine pour ne pas empiéter sur l'écran principal de traitement. ---- */

.kitchen-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.6rem 1.25rem;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.05rem;
}

.kitchen-topbar__stat {
    font-weight: 700;
    white-space: nowrap;
}

.kitchen-topbar__btn {
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
}

.kitchen-topbar__btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.kitchen-topbar__btn--stop {
    margin-left: auto;
    border-color: #ff7a00;
    background: rgba(255, 122, 0, 0.18);
}

/* ---- Panneau historique du jour : accès secondaire, masqué par défaut, pour
   ne pas surcharger l'écran principal. ---- */

.kitchen-history-panel {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.kitchen-history-panel[hidden] {
    display: none;
}

.kitchen-history-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.kitchen-history-panel__list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kitchen-history-panel__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.kitchen-history-panel__ref {
    font-weight: 800;
    flex: 1;
}

.kitchen-history-panel__empty {
    opacity: 0.7;
    font-size: 1.1rem;
}

/* ---- Page d'accueil (avant la liste des restaurants) : visuel plein écran
   immersif, dans l'esprit d'un service de livraison type Uber Eats. Reste
   volontairement très différent du style "borne de commande" des pages
   restaurant individuelles (grille de cartes) : c'est une étape à part,
   avant, pas une variante de plus de cette grille. ---- */

.hero {
    position: relative;
    margin: -1.5rem -1.5rem 2rem;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.10) 0, transparent 22%),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08) 0, transparent 20%),
        linear-gradient(135deg, #7a1a0e 0%, #b3121a 45%, #d0021b 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem;
}

/*
 * Médaillons de plats décoratifs en attendant une vraie bannière photo (voir
 * README) : même esprit que le visuel de remplacement des plats sans photo
 * (templates/macros/dish.html.twig), à base d'emoji + dégradés — cohérent
 * avec le reste du site plutôt qu'une image générique non liée à DevFood.
 */
.hero__dish {
    position: absolute;
    font-size: 8rem;
    opacity: 0.20;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.hero__dish--1 { top: 6%; left: 6%; transform: rotate(-12deg); }
.hero__dish--2 { top: 10%; right: 8%; transform: rotate(10deg); font-size: 7rem; }
.hero__dish--3 { bottom: 8%; left: 9%; transform: rotate(8deg); font-size: 6.5rem; }
.hero__dish--4 { bottom: 6%; right: 10%; transform: rotate(-10deg); }

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 0;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.hero__brand {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
}

.hero__title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
    font-size: 1.05rem;
    opacity: 0.92;
    margin: 0;
}

.hero__alert {
    width: 100%;
    background: #fff;
    color: var(--color-danger);
    font-weight: 700;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (min-width: 640px) {
    .hero__form {
        flex-direction: row;
    }
}

.hero__address-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.hero__input {
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: none;
    font-size: 1.05rem;
    color: var(--color-text);
    min-width: 0;
}

/*
 * Liste déroulante d'autocomplétion d'adresse (façon Uber Eats/Google Maps),
 * ancrée juste sous le champ via .hero__address-wrap en position: relative —
 * reste donc correctement placée sur mobile même quand le clavier virtuel
 * réduit la hauteur visible de l'écran (voir onFocus() du contrôleur JS, qui
 * fait remonter le champ en haut de l'écran avant l'ouverture du clavier).
 */
.hero__suggestions {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: min(280px, 50vh);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    z-index: 30;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
}

.hero__suggestion {
    padding: 0.8rem 1.1rem;
    color: var(--color-text);
    font-size: 0.98rem;
    cursor: pointer;
}

.hero__suggestion:hover,
.hero__suggestion.is-active {
    background: #f2f2f2;
}

.hero__suggestion--empty,
.hero__suggestion--loading {
    color: #777;
    font-style: italic;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero__spinner {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid #ccc;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: hero-spinner-spin 0.7s linear infinite;
}

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

.hero__submit {
    padding: 1rem 1.6rem;
    border-radius: 12px;
    border: none;
    background: #1a1a1a;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    white-space: nowrap;
}

.hero__submit:hover {
    background: #000;
}

@media (max-width: 480px) {
    .hero {
        min-height: 70vh;
        padding: 2rem 1rem;
        border-radius: 0 0 16px 16px;
    }

    .hero__dish {
        font-size: 5rem;
    }
}

/* Liste des restaurants (après validation de l'adresse) */

.restaurant-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Grille de cartes façon Uber Eats : 2-3 colonnes selon la largeur, se
   réduit proprement en une colonne sur mobile, ne casse pas si le nombre de
   restaurants augmente (auto-fill, pas de nombre de colonnes figé). */
.restaurant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.restaurant-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--color-text);
}

.restaurant-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.restaurant-card__photo {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Réutilise la même macro (et donc la même logique photo/dégradé de secours)
   que la bannière de la page restaurant redesignée : cohérence visuelle
   assurée par construction, pas dupliquée. Sa taille par défaut (pleine
   largeur d'en-tête, ~220px) est ici recadrée au format carte. */
.restaurant-card__photo .rpage__banner-image {
    height: 100%;
    border-radius: 0;
}

.restaurant-card__closed-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.restaurant-card--closed .restaurant-card__photo {
    filter: grayscale(70%) brightness(0.75);
}

.restaurant-card--closed .restaurant-card__body {
    opacity: 0.7;
}

.restaurant-card__body {
    padding: 0.9rem 1rem 1.1rem;
}

.restaurant-card__name {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.restaurant-card__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ---- Page restaurant façon Uber Eats ---- */

.dish-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--color-bg);
}

.dish-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dish-card__placeholder-icon {
    font-size: 3.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.rpage__banner {
    position: relative;
    margin: -1.5rem -1.5rem 0;
    height: 220px;
    overflow: hidden;
}

.rpage__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rpage__banner-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpage__banner-placeholder-icon {
    font-size: 5rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.rpage__back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.rpage__closed-banner {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-danger);
    color: #fff;
    font-weight: 800;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* En-tête texte (nom, tags, description, adresse, paiement, frais/temps de
   livraison, recherche) : sous la bannière photo, jamais dans l'image
   elle-même (contrairement à l'ancienne version) — plus proche d'Uber Eats et
   plus lisible, notamment sur mobile où l'espace en surimpression manquait. */
.rpage__header {
    padding: 1.1rem 0 0.5rem;
}

.rpage__title {
    margin: 0 0 0.35rem;
    font-size: 1.7rem;
}

.rpage__tags {
    margin: 0 0 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.rpage__description {
    margin: 0;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rpage__description.rpage__description--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.rpage__more-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 0.4rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.rpage__address,
.rpage__payment {
    margin: 0 0 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.rpage__delivery-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0.6rem 0;
}

.rpage__search {
    margin: 0.75rem 0 0.25rem;
}

.rpage__search-input {
    width: 100%;
    max-width: 420px;
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.95rem;
    color: var(--color-text);
}

.rpage__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Barre de catégories : verticale et sticky à gauche sur desktop
   (.rpage__sidebar), horizontale et sticky en haut sur mobile (.rpage__tabs)
   — deux éléments du DOM séparés plutôt qu'un seul repositionné en CSS
   (media queries simples, sans jonglage flex-order), le scroll-spy (JS) les
   met à jour ensemble via la même cible "tab". */
.rpage__tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.9rem 0;
    margin: 1rem 0 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
    /* Défilement horizontal fluide (inertie) sur iOS/Safari mobile. */
    -webkit-overflow-scrolling: touch;
}

.rpage__tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.rpage__tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.rpage__layout {
    display: block;
}

.rpage__sidebar {
    display: none;
}

.rpage__content {
    min-width: 0;
}

@media (min-width: 900px) {
    .rpage__tabs {
        display: none;
    }

    .rpage__layout {
        display: grid;
        grid-template-columns: 230px 1fr;
        gap: 2rem;
        align-items: start;
    }

    .rpage__sidebar {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        position: sticky;
        top: 1.25rem;
        max-height: calc(100vh - 2.5rem);
        overflow-y: auto;
        margin: 1rem 0 1.5rem;
    }

    .rpage__sidebar .rpage__tab {
        display: block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 0.9rem;
        border-bottom: none;
        border-left: 3px solid transparent;
        border-radius: 0 999px 999px 0;
        white-space: normal;
    }

    .rpage__sidebar .rpage__tab.is-active {
        background: var(--color-bg);
        border-left-color: var(--color-primary);
        font-weight: 800;
    }
}

.rpage__category {
    scroll-margin-top: 5rem;
    margin-bottom: 2.5rem;
}

.rpage__category-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

/* Carrousel "Articles en vedette" : mêmes cartes que la grille (.dish-card),
   simplement en ligne horizontale défilante avec flèches. */
.rpage__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rpage__carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.rpage__carousel-track::-webkit-scrollbar {
    display: none;
}

.rpage__carousel-track .dish-card {
    flex: 0 0 270px;
}

.rpage__carousel-arrow {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grille de cartes plats : 1 colonne sur mobile, 2 sur desktop/tablette. */
.rpage__dish-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .rpage__dish-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dish-card {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
}

.dish-card:hover {
    border-color: var(--color-primary);
}

.dish-card--unavailable {
    cursor: not-allowed;
    opacity: 0.55;
}

.dish-card[hidden] {
    display: none;
}

.dish-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dish-card__name {
    margin: 0;
    font-weight: 700;
    font-size: 1.02rem;
}

.dish-card__price {
    margin: 0;
    font-weight: 800;
    color: var(--color-primary);
}

.dish-card__desc {
    margin: 0.1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dish-card__photo {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

.dish-card__photo .dish-card__image {
    width: 96px;
    height: 96px;
    aspect-ratio: auto;
    border-radius: var(--radius);
}

.dish-card__photo .dish-card__placeholder-icon {
    font-size: 1.8rem;
}

/* Bouton rond "+" en superposition sur le coin de la photo (ajout rapide au
   panier si le plat n'a aucune option, sinon ouverture de la fiche
   détaillée — voir templates/macros/dish.html.twig#card). */
.dish-card__plus {
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dish-card__plus:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
}

/* Fiche détaillée d'un plat : modal centré sur desktop, bottom-sheet plein
   largeur sur mobile (voir la media query plus bas) — le HTML est identique
   dans les deux cas, seule la mise en forme change. */
.dish-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sans cette règle, l'attribut HTML "hidden" (posé par le serveur sur toutes
   les fiches plats, retiré/reposé par le JS à l'ouverture/fermeture) n'a
   AUCUN EFFET VISUEL : une règle d'auteur ("display: flex" ci-dessus) prime
   toujours sur la règle par défaut du navigateur "[hidden] { display: none }",
   quelle que soit la spécificité ou l'ordre — donc toutes les fiches plats
   restaient visibles et empilées en permanence, dès le premier chargement de
   la page, sans qu'aucun clic ne soit nécessaire. Même piège déjà rencontré
   et corrigé sur .dish-card et .rpage__floating-cart. */
.dish-modal[hidden] {
    display: none;
}

.dish-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.dish-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 20px;
    width: min(480px, 92vw);
    max-height: 88vh;
    /* Le scroll se fait à l'intérieur (.dish-modal__scroll), jamais sur le
       panneau lui-même : le bouton "Ajouter" (.dish-modal__footer) reste
       ainsi visible en permanence, sans avoir à scroller pour l'atteindre. */
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.dish-modal__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.dish-modal__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dish-modal__footer {
    flex-shrink: 0;
    padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.dish-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 1;
}

.dish-modal__photo .dish-card__image {
    width: 100%;
    height: 220px;
    aspect-ratio: auto;
    border-radius: 20px 20px 0 0;
}

.dish-modal__photo .dish-card__placeholder-icon {
    font-size: 4rem;
}

.dish-modal__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dish-modal__name {
    margin: 0;
    font-size: 1.3rem;
}

.dish-modal__description {
    margin: 0;
    color: var(--color-text-muted);
}

.dish-modal__group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dish-modal__group legend {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 0.3rem;
}

.dish-modal__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: normal;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.dish-modal__quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.dish-modal__quantity-label {
    font-weight: 700;
}

.dish-modal__quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dish-modal__qty-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.dish-modal__quantity-controls input {
    width: 2.5rem;
    text-align: center;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    background: transparent;
    color: var(--color-text);
}

.dish-modal__submit {
    display: block;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
}

.dish-modal__submit:hover {
    background: var(--color-primary-dark);
}

.rpage__floating-cart {
    position: fixed;
    left: 1rem;
    right: 1rem;
    /* env(safe-area-inset-bottom) évite que le bouton ne soit masqué par la
       barre gestuelle d'un iPhone (encoche/home indicator). */
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rpage__floating-cart[hidden] {
    display: none;
}

body.rpage-modal-open,
body.nav-menu-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .rpage__banner {
        margin: -1rem -1rem 0;
        height: 180px;
    }

    .dish-modal {
        align-items: flex-end;
    }

    .dish-modal__panel {
        width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
    }

    .rpage__floating-cart {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }

    .rpage__floating-cart-cta {
        width: 100%;
        text-align: center;
    }
}

/*
 * Ticket cuisine imprimable (voir templates/restaurant/kitchen/ticket.html.twig),
 * pensé pour une imprimante thermique de ticket de caisse (rouleau 58mm ou
 * 80mm). Largeur en max-width relative (jamais une largeur fixe en pixels) :
 * le contenu se réduit naturellement sur un rouleau plus étroit sans jamais
 * passer en plusieurs colonnes ni être tronqué. Aucune image ni logo — juste
 * du texte, pour rester rapide à imprimer sur une imprimante thermique.
 */
.ticket {
    width: 100%;
    max-width: 80mm;
    margin: 1.5rem auto;
    padding: 4mm 3mm;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #000;
}

.ticket__multi {
    text-align: center;
    font-weight: 700;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px dashed #000;
}

.ticket__shop {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
}

.ticket__ref,
.ticket__datetime {
    text-align: center;
}

.ticket__sep {
    border-top: 1px dashed #000;
    margin: 0.6em 0;
}

.ticket__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-top: 0.4em;
}

.ticket__value {
    margin-bottom: 0.2em;
}

.ticket__payment {
    text-align: center;
    font-weight: 700;
    padding: 0.4em;
    border: 2px solid #000;
}

.ticket__payment--cod {
    font-size: 1.05em;
}

.ticket__item {
    display: flex;
    flex-direction: column;
    padding: 0.25em 0;
}

.ticket__item-options {
    font-size: 0.9em;
    padding-left: 1em;
}

.ticket__footer {
    text-align: center;
    margin-top: 0.6em;
}

.ticket__print-btn {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 700;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

/*
 * En impression : plus aucun élément d'interface (le ticket est ouvert dans
 * un nouvel onglet dédié, mais on retire quand même toute chrome résiduelle
 * par précaution), pas de marge de page inutile, et le ticket redevient un
 * simple flux de texte pleine largeur du rouleau (le format exact, 58mm ou
 * 80mm, est déterminé par l'imprimante/le pilote, pas par cette page).
 */
@media print {
    @page {
        margin: 0;
    }

    body {
        background: #fff;
        margin: 0;
    }

    .no-print {
        display: none !important;
    }

    .ticket {
        max-width: 100%;
        margin: 0;
        padding: 2mm;
        border: none;
        border-radius: 0;
    }
}

/*
 * Boutons "Itinéraire" (espace Livreur, carte d'une course assignée) : deux
 * boutons séparés (Google Maps / Waze) plutôt qu'un lien ambigu, pour ouvrir
 * directement l'application de navigation installée sur le téléphone (ou sa
 * version web sinon — comportement natif de ces URLs, rien à gérer ici).
 * Gabarit tactile généreux : usage prévu à l'arrêt ou en conduite.
 */
.driver-nav-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.driver-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
}

.driver-nav-btn--google {
    background: #4285f4;
}

.driver-nav-btn--waze {
    background: #33ccff;
    color: #1a1a1a;
}

.driver-nav-btn:active {
    filter: brightness(0.92);
}

@media (max-width: 480px) {
    .driver-nav-buttons {
        grid-template-columns: 1fr;
    }
}