/* RestoPOS — feuille de style principale */
:root {
  --accent: #e85d2a;
  --accent-fonce: #c94a1c;
  --accent-clair: #fdeee8;
  --fond: #f5f4f1;
  --surface: #ffffff;
  --texte: #1f1d1a;
  --texte-doux: #6b665e;
  --bordure: #e4e0d8;
  --barre: #1f1d1a;
  --vert: #2e7d4f;
  --vert-clair: #e5f3ea;
  --rouge: #c62828;
  --rouge-clair: #fbe9e9;
  --jaune: #b7791f;
  --jaune-clair: #fdf3dc;
  --bleu: #2f5fb3;
  --bleu-clair: #e7eefa;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond); color: var(--texte); font-size: 15px; line-height: 1.5;
}
a { color: var(--accent-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
img { max-width: 100%; }

/* --- Mise en page application --- */
.app { display: flex; min-height: 100vh; }
.barre-laterale {
  width: 240px; flex-shrink: 0; background: var(--barre); color: #d9d4cb;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.2rem; color: #fff; font-weight: 700; font-size: 1.1rem; }
.marque img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; background: #fff; }
.marque .pastille { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.marque small { display: block; font-weight: 400; font-size: .75rem; color: #a39d92; }
.nav { list-style: none; margin: 0; padding: .4rem .6rem; flex: 1; }
.nav .titre-nav { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8a847a; padding: 1rem .7rem .3rem; }
.nav a {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 8px;
  color: #d9d4cb; text-decoration: none; font-size: .93rem;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.actif { background: var(--accent); color: #fff; }
.nav .ico { width: 1.2rem; text-align: center; }
.pied-nav { padding: .9rem 1.2rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.pied-nav form { display: inline; }
.pied-nav button { background: none; border: 0; color: #d9d4cb; cursor: pointer; padding: 0; font: inherit; }
.pied-nav button:hover { color: #fff; text-decoration: underline; }
.contenu { flex: 1; min-width: 0; padding: 1.6rem 2rem 3rem; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.entete h1 { margin: 0; }
.entete .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn.bouton-menu { display: none; }

/* --- Composants --- */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.2rem; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 1rem; }
.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat .libelle { color: var(--texte-doux); font-size: .85rem; }
.stat .valeur { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .sous { font-size: .8rem; color: var(--texte-doux); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem;
  border-radius: 8px; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #f0ede7; text-decoration: none; }
.btn-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-principal:hover { background: var(--accent-fonce); }
.btn-succes { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn-succes:hover { background: #23633e; }
.btn-danger { background: var(--surface); border-color: #e7b3b3; color: var(--rouge); }
.btn-danger:hover { background: var(--rouge-clair); }
.btn-petit { padding: .3rem .65rem; font-size: .85rem; }
.btn-grand { padding: .9rem 1.4rem; font-size: 1.05rem; }
.btn-bloc { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.badge { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: #eee; color: #555; }
.badge-ouverte, .badge-en_attente { background: var(--jaune-clair); color: var(--jaune); }
.badge-payee, .badge-prete, .badge-libre { background: var(--vert-clair); color: var(--vert); }
.badge-annulee, .badge-rupture { background: var(--rouge-clair); color: var(--rouge); }
.badge-en_preparation, .badge-occupee { background: var(--bleu-clair); color: var(--bleu); }
.badge-servie { background: #eee; color: #666; }

table.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); font-weight: 600; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tfoot td { font-weight: 700; border-top: 2px solid var(--bordure); }
.defilement { overflow-x: auto; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .5rem; border: 1px solid; }
.messages .succes { background: var(--vert-clair); border-color: #b9dcc6; color: #1f5a37; }
.messages .erreur { background: var(--rouge-clair); border-color: #efc0c0; color: #8e1c1c; }
.messages .info { background: var(--bleu-clair); border-color: #c4d4f0; color: #22467f; }
.messages .alerte { background: var(--jaune-clair); border-color: #f0dcae; color: #7a5212; }

.vide { text-align: center; padding: 2.5rem 1rem; color: var(--texte-doux); }
.muted { color: var(--texte-doux); }
.petit { font-size: .85rem; }
.droite { text-align: right; }
.ligne-flex { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.espace { flex: 1; }
.miniature { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #f0ede7; display: inline-grid; place-items: center; color: #b6afa3; }

/* --- Formulaires --- */
.formulaire { max-width: 760px; }
.champ-groupe { margin-bottom: 1rem; }
.champ-groupe label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.champ-groupe.case-groupe label { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.champ, select.champ, textarea.champ {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--bordure); border-radius: 8px;
  font: inherit; background: #fff; color: var(--texte);
}
.champ:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
input[type=color].champ { height: 42px; padding: .2rem; width: 80px; }
input[type=file].champ { padding: .45rem; }
.aide { font-size: .8rem; color: var(--texte-doux); margin-top: .25rem; }
.erreur-champ { color: var(--rouge); font-size: .85rem; margin-top: .25rem; }
.erreurs-form { background: var(--rouge-clair); color: #8e1c1c; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.case { width: 18px; height: 18px; accent-color: var(--accent); }
.liste-cases { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.liste-cases div, .liste-cases label { display: flex; gap: .5rem; align-items: center; font-weight: 400 !important; }
.liste-cases input { accent-color: var(--accent); width: 17px; height: 17px; }
.apercu-image { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.apercu-image img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bordure); }
.actions-form { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* --- Caisse (POS) --- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; height: calc(100vh - 3.2rem); }
.pos-catalogue { display: flex; flex-direction: column; min-height: 0; }
.pos-onglets { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; flex-shrink: 0; }
.pos-onglets button {
  border: 0; border-radius: 99px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--texte); border: 1px solid var(--bordure); white-space: nowrap;
}
.pos-onglets button.actif { color: #fff; border-color: transparent; }
.pos-recherche { margin: .3rem 0 .7rem; }
.pos-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; overflow-y: auto; align-content: start; padding-bottom: 1rem; }
.tuile {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 0; cursor: pointer;
  text-align: left; font: inherit; overflow: hidden; display: flex; flex-direction: column; min-height: 96px;
  border-top: 4px solid var(--c, var(--accent)); transition: transform .06s;
}
.tuile:active { transform: scale(.97); }
.tuile:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.tuile img { width: 100%; height: 86px; object-fit: cover; }
.tuile .corps { padding: .55rem .65rem; display: flex; flex-direction: column; flex: 1; }
.tuile .nom { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.tuile .prix { margin-top: auto; padding-top: .3rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.tuile .opt { font-size: .7rem; color: var(--accent-fonce); }
.pos-panier { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); display: flex; flex-direction: column; min-height: 0; }
.pos-panier header { padding: .9rem 1rem; border-bottom: 1px solid var(--bordure); }
.pos-panier .lignes { flex: 1; overflow-y: auto; padding: .4rem 1rem; }
.pos-panier footer { padding: 1rem; border-top: 1px solid var(--bordure); }
.ligne-panier { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--bordure); }
.ligne-panier:last-child { border-bottom: 0; }
.ligne-panier .info { flex: 1; min-width: 0; }
.ligne-panier .nom { font-weight: 600; }
.ligne-panier .det { font-size: .8rem; color: var(--texte-doux); }
.ligne-panier .det.note { color: var(--accent-fonce); }
.qte { display: flex; align-items: center; gap: .3rem; }
.qte button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--bordure); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.deja { opacity: .65; }
.total-panier { display: flex; justify-content: space-between; font-size: 1.35rem; font-weight: 700; margin-bottom: .8rem; font-variant-numeric: tabular-nums; }

/* Fenêtre modale (choix des sous-produits) */
.modale-fond { position: fixed; inset: 0; background: rgba(20,18,15,.55); display: none; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modale-fond.ouverte { display: flex; }
.modale { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; }
.modale header, .modale footer { padding: 1rem 1.2rem; }
.modale header { border-bottom: 1px solid var(--bordure); }
.modale footer { border-top: 1px solid var(--bordure); display: flex; gap: .6rem; justify-content: flex-end; align-items: center; }
.modale .corps-modale { padding: 1rem 1.2rem; overflow-y: auto; }
.groupe-opt { margin-bottom: 1.1rem; }
.groupe-opt h3 { margin-bottom: .2rem; }
.choix-opt { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .45rem; margin-top: .5rem; }
.choix-opt label {
  border: 1.5px solid var(--bordure); border-radius: 8px; padding: .55rem .7rem; cursor: pointer;
  display: flex; flex-direction: column; font-size: .9rem;
}
.choix-opt input { display: none; }
.choix-opt label:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.choix-opt .sup { font-size: .78rem; color: var(--texte-doux); }

/* --- Plan de salle --- */
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; }
.table-plan {
  border-radius: 12px; padding: 1rem; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 2px solid var(--vert-clair); color: var(--texte); text-decoration: none;
}
.table-plan:hover { text-decoration: none; border-color: var(--vert); }
.table-plan.occupee { background: var(--accent-clair); border-color: #f5c9b6; }
.table-plan.occupee:hover { border-color: var(--accent); }
.table-plan .num { font-size: 1.5rem; font-weight: 800; }
.table-plan .montant { font-weight: 700; color: var(--accent-fonce); }

/* --- Cuisine --- */
.cuisine { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.bon { background: #fff; border-radius: 12px; border: 1px solid var(--bordure); overflow: hidden; box-shadow: var(--ombre); }
.bon header { padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; color: #fff; background: var(--jaune); }
.bon.en_preparation header { background: var(--bleu); }
.bon.prete header { background: var(--vert); }
.bon.retard header { background: var(--rouge); }
.bon ul { list-style: none; margin: 0; padding: .6rem 1rem; }
.bon li { padding: .35rem 0; border-bottom: 1px dashed var(--bordure); }
.bon li:last-child { border: 0; }
.bon .q { font-weight: 800; margin-right: .3rem; }
.bon footer { padding: .7rem 1rem; border-top: 1px solid var(--bordure); }

/* --- Rapports --- */
.barres { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 10px; }
.barres .b { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.barres .b:hover { background: var(--accent-fonce); }
.barres .b span { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--barre); color: #fff; font-size: .75rem; padding: .2rem .4rem; border-radius: 4px; white-space: nowrap; margin-bottom: 4px; }
.barres .b:hover span { display: block; }
.progression { height: 10px; background: #ece8e1; border-radius: 99px; overflow: hidden; }
.progression div { height: 100%; background: var(--vert); }

.etapes { list-style: none; padding: 0; margin: 0; }
.etapes li { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--bordure); }
.etapes .puce { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ece8e1; font-weight: 700; flex-shrink: 0; }
.etapes .fait .puce { background: var(--vert); color: #fff; }
.etapes .fait .txt { color: var(--texte-doux); text-decoration: line-through; }

/* --- Pages publiques --- */
.public-entete { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid var(--bordure); }
.public-entete .marque { color: var(--texte); padding: 0; }
.hero { padding: 5rem 2rem 4rem; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--fond) 100%); }
.hero h1 { font-size: 2.8rem; max-width: 820px; margin: 0 auto .8rem; letter-spacing: -.02em; }
.hero p { font-size: 1.15rem; color: var(--texte-doux); max-width: 640px; margin: 0 auto 2rem; }
.section { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
.fonction .ico { font-size: 1.6rem; }
.auth { max-width: 460px; margin: 3rem auto; }
.auth-large { max-width: 640px; }
.public-pied { text-align: center; padding: 2rem; color: var(--texte-doux); font-size: .85rem; }

/* Carte en ligne */
.couverture { height: 260px; background-size: cover; background-position: center; position: relative; background-color: var(--barre); }
.couverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.65)); }
.couverture .titre { position: absolute; bottom: 1.4rem; left: 0; right: 0; z-index: 1; color: #fff; text-align: center; padding: 0 1rem; }
.couverture .titre h1 { font-size: 2.2rem; margin: 0; }
.carte-menu { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.carte-menu .logo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; margin: -45px auto 0; display: block; position: relative; z-index: 2; background: #fff; }
.plat { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.plat img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.plat .infos { flex: 1; }
.plat .titre-plat { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.nav-cat { position: sticky; top: 0; background: var(--fond); display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; z-index: 3; }
.nav-cat a { white-space: nowrap; padding: .35rem .9rem; background: #fff; border: 1px solid var(--bordure); border-radius: 99px; color: var(--texte); }

/* --- Ticket --- */
.ticket { width: 80mm; margin: 1rem auto; background: #fff; padding: 6mm; font-family: "Courier New", monospace; font-size: 12px; color: #000; }
.ticket h2 { text-align: center; font-size: 16px; margin: 0; }
.ticket .centre { text-align: center; }
.ticket hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket td { padding: 1px 0; vertical-align: top; }
.ticket .d { text-align: right; white-space: nowrap; }
.ticket .gros { font-size: 15px; font-weight: bold; }
@media print {
  body { background: #fff; }
  .non-imprimable { display: none !important; }
  .ticket { margin: 0; width: 100%; padding: 0; }
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .pos { grid-template-columns: minmax(0, 1fr) 320px; }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { display: block; }
  .barre-laterale { position: fixed; left: -260px; z-index: 40; transition: left .2s; }
  .barre-laterale.ouverte { left: 0; }
  .btn.bouton-menu { display: inline-flex; position: fixed; top: .7rem; left: .7rem; z-index: 41; }
  .contenu { padding: 3.6rem 1rem 2rem; }
  .pos { grid-template-columns: 1fr; height: auto; }
  .pos-produits { max-height: 55vh; }
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
}

/* --- Commandes en ligne (équipe) --- */
.badge-nav { margin-left: auto; background: #fff; color: var(--accent-fonce); border-radius: 99px; font-size: .75rem; font-weight: 700; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }
.nav a.actif .badge-nav { background: #fff; }
.alerte-en-ligne {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60; background: var(--barre); color: #fff;
  border-radius: 12px; padding: .8rem 1rem; display: flex; gap: .7rem; align-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: calc(100vw - 2rem);
}
.alerte-en-ligne[hidden] { display: none; }

/* --- Commande en ligne (clients, sur téléphone) --- */
.page-commande { padding-bottom: 6rem; }
.cmd-entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; background: #fff; border-bottom: 1px solid var(--bordure); }
.cmd-entete img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cmd-couverture { height: 160px; background-size: cover; background-position: center; }
.cmd-centre { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem; }
.champ-table { font-size: 2rem; text-align: center; font-weight: 800; padding: .8rem; margin-bottom: .5rem; }
.cmd-onglets { position: sticky; top: 57px; z-index: 15; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 1rem; background: var(--fond); }
.cmd-onglets a { white-space: nowrap; padding: .4rem .9rem; background: #fff; border: 1px solid var(--bordure); border-radius: 99px; color: var(--texte); font-size: .9rem; }
.cmd-liste { max-width: 720px; margin: 0 auto; padding: 0 1rem; }
.cmd-liste section { scroll-margin-top: 110px; }
.cmd-liste h2 { margin-top: 1.2rem; }
.cmd-produit {
  width: 100%; display: flex; gap: .8rem; align-items: center; text-align: left; background: #fff; border: 1px solid var(--bordure);
  border-radius: 12px; padding: .8rem; margin-bottom: .6rem; font: inherit; color: inherit; cursor: pointer; position: relative;
}
.cmd-produit .infos { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cmd-produit .prix { font-weight: 700; margin-top: .2rem; }
.cmd-produit img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.cmd-produit .plus { position: absolute; right: .5rem; bottom: .5rem; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; }
.cmd-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fond) 30%); }
.cmd-barre[hidden] { display: none; }
.cmd-mes-commandes { max-width: 720px; margin: .6rem auto 0; padding: 0 1rem; display: grid; gap: .3rem; }
.cmd-mes-commandes a { background: var(--vert-clair); color: var(--vert); padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; }
.cmd-etapes { list-style: none; padding: 0; display: flex; justify-content: space-between; gap: .3rem; margin: 1.2rem 0 .6rem; }
.cmd-etapes li { flex: 1; font-size: .78rem; color: var(--texte-doux); padding-top: .6rem; border-top: 4px solid var(--bordure); }
.cmd-etapes li.fait { border-color: var(--vert); color: var(--vert); font-weight: 700; }
@media (max-width: 600px) {
  .page-commande .modale-fond { align-items: flex-end; padding: 0; }
  .page-commande .modale { border-radius: 16px 16px 0 0; max-height: 92vh; }
}