/* MyLuckyMeal V2 — finitions communes. Identité et palette propres à chaque écran conservées. */
:where(button, input, select, textarea, a){-webkit-tap-highlight-color:transparent}
:where(button, a, input, select, textarea):focus-visible{outline:3px solid var(--fuchsia,#E934F5);outline-offset:3px}
:where(button, input, select, textarea){max-width:100%}
:where(button){touch-action:manipulation;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease}
:where(button):not(:disabled):active{transform:scale(.985)}
:where(button):disabled{cursor:not-allowed}
:where(a){text-underline-offset:3px}
:where(img){height:auto}
:where(.card,.carte,.bon,.dish){overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){
  :where(button):not(:disabled):hover{filter:brightness(1.07)}
  :where(a):hover{text-decoration-thickness:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:480px){
  :where(input,select,textarea){font-size:max(16px,1em)}
}

/* Cuisine — lecture rapide pendant le service, sans modifier les couleurs de marque. */
body:has(#vCuisine) #vCuisine.colonnes{align-items:start}
body:has(#vCuisine) #vCuisine .colonne{min-width:0}
body:has(#vCuisine) #vCuisine .colonne>h2{position:sticky;top:69px;z-index:3;padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:16px;background:var(--perle);line-height:1.25}
body:has(#vCuisine) #vCuisine .colonne>h2 span{margin-left:auto;min-width:2.3em;text-align:center;padding:4px 10px;font-variant-numeric:tabular-nums}
body:has(#vCuisine) #vCuisine .bon{box-shadow:0 4px 18px #0002;gap:12px;min-width:0}
body:has(#vCuisine) #vCuisine .contenu{line-height:1.5;gap:6px}
body:has(#vCuisine) #vCuisine .contenu li:not(.detail){padding-block:3px}
body:has(#vCuisine) #vCuisine .bon .btn{min-height:62px}
@media (max-width:899px){body:has(#vCuisine) #vCuisine .colonne>h2{top:105px}}
@media (max-width:560px){body:has(#vCuisine) #vCuisine .colonne>h2{position:static}body:has(#vCuisine) #vCuisine .bon{border-radius:16px}}

/* Caisse — finition ergonomique, identité fuchsia conservée. */
body:has(#vCaisse) #vCaisse .onglets{position:sticky;top:64px;z-index:4;background:var(--perle);padding:10px 2px 12px;margin-bottom:8px;scrollbar-width:thin}
body:has(#vCaisse) #vCaisse .onglets button{white-space:nowrap;min-height:52px}
body:has(#vCaisse) #vCaisse .vente>.carte{min-width:0}
body:has(#vCaisse) #vCaisse .produit{min-height:100px;padding:14px;box-shadow:0 3px 12px #0002}
body:has(#vCaisse) #vCaisse .produit .prix{font-variant-numeric:tabular-nums}
body:has(#vCaisse) #vCaisse .ticket{border:1px solid var(--line);box-shadow:0 10px 30px #0003}
body:has(#vCaisse) #vCaisse .ticket .total{padding:14px 0;border-top:2px solid var(--line);font-variant-numeric:tabular-nums}
body:has(#vCaisse) #vCaisse #rangPayer .btn{min-height:64px;min-width:125px}
body:has(#vCaisse) #vCaisse .cmd{border:1px solid var(--line)}
body:has(#vCaisse) #vCaisse .ligne button{flex-shrink:0;min-width:44px;min-height:44px}
@media(max-width:899px){body:has(#vCaisse) #vCaisse .onglets{top:64px}body:has(#vCaisse) #vCaisse .ticket{position:static}}
@media(max-width:600px){body:has(#vCaisse) #vCaisse .onglets{position:static}body:has(#vCaisse) #vCaisse .produits{grid-template-columns:repeat(2,minmax(0,1fr))}body:has(#vCaisse) #vCaisse #rangPayer .btn{flex:1 1 100%!important}}
@media(max-width:360px){body:has(#vCaisse) #vCaisse .produits{grid-template-columns:minmax(0,1fr)}}

/* Gérants — tableau de service : informations prioritaires, navigation tactile. */
body:has(#listeCmd) details.tableau{border:1px solid var(--line);box-shadow:0 8px 28px #0002}
body:has(#listeCmd) details.tableau>summary{min-height:52px;line-height:1.35}
body:has(#listeCmd) .kpi{min-width:0;min-height:92px;justify-content:center;border:1px solid var(--line)}
body:has(#listeCmd) .kpi b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body:has(#listeCmd) .alerte{border:1px solid var(--line);line-height:1.4}
body:has(#listeCmd) .card{box-shadow:0 5px 20px #0002;min-width:0}
body:has(#listeCmd) .card .btns>.b{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
body:has(#listeCmd) .tag{font-variant-numeric:tabular-nums}
body:has(#listeCmd) .poste{min-width:0}
body:has(#listeCmd) nav.bas button{min-height:48px}
@media (min-width:900px){
  body:has(#listeCmd) main{max-width:1600px;width:100%;margin-inline:auto}
  body:has(#listeCmd) .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  body:has(#listeCmd) nav.bas button{min-height:54px}
}
@media (max-width:600px){
  body:has(#listeCmd) .kpis{gap:8px}
  body:has(#listeCmd) .kpi{padding:10px;min-height:84px}
  body:has(#listeCmd) .kpi b{font-size:1.45rem}
  body:has(#listeCmd) .card{padding:14px}
}

/* Parcours client — Snack Pro : étapes nettes, carte et panier lisibles. */
body:has(.wrap #panel) .wrap{gap:26px}
body:has(.wrap #panel) section.step{min-width:0;scroll-margin-top:20px}
body:has(.wrap #panel) .step>h2{letter-spacing:-.02em;line-height:1.2}
body:has(.wrap #panel) .step>h2 .n{width:38px;height:38px;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 3px 12px #0002}
body:has(.wrap #panel) .dish{border-radius:20px;box-shadow:0 4px 16px #0000000d;transition:border-color .15s ease,box-shadow .15s ease}
body:has(.wrap #panel) .dish:focus-within{border-color:var(--btn-bg);box-shadow:0 5px 20px #00000015}
body:has(.wrap #panel) .dish-head{align-items:center}
body:has(.wrap #panel) .dish h3{line-height:1.3;overflow-wrap:anywhere}
body:has(.wrap #panel) .var{min-height:54px}
body:has(.wrap #panel) .stepper button{width:44px;height:44px;flex:none}
body:has(.wrap #panel) .stepper output{min-width:28px;font-variant-numeric:tabular-nums}
body:has(.wrap #panel) .tabs{scrollbar-width:thin;scroll-padding-inline:8px}
body:has(.wrap #panel) .tab{min-height:76px}
body:has(.wrap #panel) .recap{border-width:2px;box-shadow:0 5px 22px #0000000e;scroll-margin-top:16px}
body:has(.wrap #panel) .bar{box-shadow:0 -8px 26px #0003}
body:has(.wrap #panel) .bar .send{min-height:52px;min-width:145px}
body:has(.wrap #panel) .bar .tot strong{font-variant-numeric:tabular-nums}
@media(max-width:480px){
  body:has(.wrap #panel) .wrap{gap:22px;padding-bottom:170px}
  body:has(.wrap #panel) .dish{padding:14px}
  body:has(.wrap #panel) .bar-in{gap:8px}
  body:has(.wrap #panel) .bar .send{min-width:0;padding-inline:15px}
  body:has(.wrap #panel) .bar .tot strong{font-size:1.35rem}
}

/* Snack Pro — livreur : décisions rapides, lisibles en mobilité. */
body:has(.liv.partie) main,body:has(.liv .adresse) main{min-width:0}
body:has(.liv .adresse) .liv{border:1px solid var(--line);border-left:8px solid var(--liv);box-shadow:0 6px 22px #0002;min-width:0}
body:has(.liv .adresse) .liv.partie{border-left-color:var(--fuchsia)}
body:has(.liv .adresse) .adresse{line-height:1.35;overflow-wrap:anywhere}
body:has(.liv .adresse) .rang>.btn{min-width:0;min-height:58px;white-space:normal}
body:has(.liv .adresse) .argent span:last-child{font-variant-numeric:tabular-nums}
@media(max-width:380px){body:has(.liv .adresse) .rang{grid-template-columns:minmax(0,1fr)}}

/* Snack Pro — suivi : étapes de commande et messages sans débordement mobile. */
body:has(#blocMessages) .wrap{min-width:0}
body:has(#blocMessages) .card{min-width:0;border:1px solid var(--line);box-shadow:0 5px 20px #0000000c}
body:has(#blocMessages) .steps li{min-width:0;overflow-wrap:anywhere;line-height:1.25}
body:has(#blocMessages) .steps .dot{flex:none}
body:has(#blocMessages) button{min-height:44px}
@media(max-width:380px){body:has(#blocMessages) .steps{font-size:.67rem;gap:2px}body:has(#blocMessages) .steps .dot{width:26px;height:26px}}

/* Snack Pro — rapports : lecture des chiffres et filtres tactiles. */
body:has(.filtres .periodes) .carte{border:1px solid var(--line);box-shadow:0 5px 18px #0000000c}
body:has(.filtres .periodes) .tuile{border:1px solid var(--line);min-width:0}
body:has(.filtres .periodes) .periodes button{min-height:48px}
body:has(.filtres .periodes) .filtres{align-items:end}
body:has(.filtres .periodes) .num{font-variant-numeric:tabular-nums}
@media(max-width:520px){body:has(.filtres .periodes) main{padding-inline:12px}body:has(.filtres .periodes) .carte{padding:14px}body:has(.filtres .periodes) .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){body:has(.filtres .periodes) .tuiles{grid-template-columns:minmax(0,1fr)}}

/* Snack Pro — tournées : carte et liste accessibles sur tablette. */
body:has(#vCarte #carte) #vCarte{min-width:0}
body:has(#vCarte #carte) #vCarte aside{min-width:0;scrollbar-width:thin}
body:has(#vCarte #carte) #vCarte .groupe{min-width:0;box-shadow:0 4px 16px #0002}
body:has(#vCarte #carte) #vCarte .groupe h2{overflow-wrap:anywhere}
body:has(#vCarte #carte) #vCarte .btn{min-height:48px}
@media(max-width:820px){body:has(#vCarte #carte) #vCarte aside{padding:14px}body:has(#vCarte #carte) #carte{min-height:320px}}

/* Snack Pro — accès aux outils : repères immédiats pour le personnel. */
body:has(main>.tuiles a.tuile) main{width:min(1120px,100%);margin-inline:auto}
body:has(main>.tuiles a.tuile) .tuiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
body:has(main>.tuiles a.tuile) a.tuile{min-width:0;min-height:132px;align-content:center;gap:9px;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
body:has(main>.tuiles a.tuile) a.tuile b{line-height:1.2}
body:has(main>.tuiles a.tuile) a.tuile span{line-height:1.45}
@media(hover:hover) and (pointer:fine){body:has(main>.tuiles a.tuile) a.tuile:hover{transform:translateY(-2px)}}

/* Snack Pro — espace client : commandes passées et fidélité. */
body:has(#formTel) .wrap{min-width:0}
body:has(#formTel) .card{min-width:0;border:1px solid var(--line);box-shadow:0 5px 20px #00000010}
body:has(#formTel) #cmds .cmd{min-height:58px;overflow-wrap:anywhere}
body:has(#formTel) #formTel{gap:10px}
body:has(#formTel) #formTel input{min-width:0;min-height:50px}
body:has(#formTel) #formTel button{min-height:50px}
body:has(#formTel) #blocFid{scroll-margin-top:18px}
@media(max-width:480px){body:has(#formTel) #formTel{display:flex;flex-direction:column}body:has(#formTel) #formTel button{width:100%}}

/* Snack Pro — TVA : paramètres sensibles, formulaires et tableaux lisibles. */
body:has(#vTva #taux) main{min-width:0}
body:has(#vTva #taux) .carte{min-width:0;border:1px solid var(--line);box-shadow:0 5px 18px #00000010}
body:has(#vTva #taux) #vTva .grille>*{min-width:0}
body:has(#vTva #taux) #vTva input,body:has(#vTva #taux) #vTva select{min-height:46px;max-width:100%}
body:has(#vTva #taux) #vTva details summary{min-height:48px;cursor:pointer;line-height:1.4}
body:has(#vTva #taux) #vTva .btn{min-height:50px}
body:has(#vTva #taux) #taux{width:100%;font-variant-numeric:tabular-nums}
@media(max-width:520px){body:has(#vTva #taux) #vTva .grille{grid-template-columns:minmax(0,1fr)}}

/* Finitions responsive : ne pas masquer les actions lorsque l'écran est étroit. */
:where(.card,.carte,.bon,.dish,.tuile,.kpi){min-width:0}
:where(button,.btn,.b,.send){overflow-wrap:anywhere}
:where(input,select,textarea){min-width:0}
@media(max-width:480px){
  body:has(.wrap #panel) .bar-in{min-width:0}
  body:has(.wrap #panel) .bar .tot{min-width:0}
  body:has(.wrap #panel) .bar .tot strong{overflow-wrap:anywhere}
  body:has(.wrap #panel) .bar .send{white-space:normal;text-wrap:balance;text-align:center;flex-shrink:0}
}
/* Les tableaux de gestion restent consultables sans déborder sur toute la page. */
body:has(#vTva #taux) #vTva{overflow-x:auto}
body:has(.filtres .periodes) .carte{max-width:100%}

/* Commande client — panier utilisable même sur les téléphones très étroits. */
@media (max-width:360px){
  body:has(.wrap #panel) .bar{padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px))}
  body:has(.wrap #panel) .bar-in{border-radius:18px;padding:8px;gap:8px;align-items:stretch}
  body:has(.wrap #panel) .bar .tot{justify-content:center;flex:0 1 auto}
  body:has(.wrap #panel) .bar .tot strong{font-size:1.15rem;white-space:nowrap}
  body:has(.wrap #panel) .bar .send{min-width:0;flex:1 1 0;padding:9px 10px;font-size:.85rem;line-height:1.2}
}

/* Accessibilité Snack Pro : commandes au clavier et préférences système. */
:where(button,.btn,.b,.send,a,input,select,textarea,[role="button"],[tabindex="0"]):focus-visible{
  outline:3px solid var(--fuchsia,#E934F5);
  outline-offset:3px;
}
:where(button,.btn,.b,.send):disabled,
:where(button,.btn,.b,.send)[aria-disabled="true"]{
  cursor:not-allowed;
  filter:grayscale(.2);
}
@media (forced-colors:active){
  :where(button,.btn,.b,.send,a,input,select,textarea,[role="button"]):focus-visible{
    outline:3px solid Highlight;
  }
  :where(.card,.carte,.bon,.dish,.tuile,.kpi){border-color:CanvasText}
}

/* Menu hebdomadaire — un jour consultable reste visuellement actif, même sans créneau. */
body:has(.wrap #panel) .days .tab.sans-creneau{
  opacity:1;
  filter:none;
  border-style:dashed;
  border-color:var(--line);
  background:var(--surface);
  color:var(--ink);
}
body:has(.wrap #panel) .days .tab.sans-creneau .p{
  color:var(--muted);
  font-weight:700;
  text-decoration:none;
}
body:has(.wrap #panel) .days .tab.sans-creneau::after{
  content:"À consulter";
  display:block;
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:var(--clair);
  color:var(--accent-text);
  font-size:.68rem;
  font-weight:800;
  line-height:1.2;
}
body:has(.wrap #panel) .days .tab.sans-creneau[aria-pressed="true"]{
  border-style:solid;
  border-color:var(--fuchsia);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--fuchsia) 18%,transparent);
}
body:has(.wrap #panel) .dish.closed .tag{
  background:var(--clair);
  color:var(--accent-text);
  border:1px solid var(--line);
}
body:has(.wrap #panel) .dish.closed .desc{
  color:var(--muted);
}

/* Site client — choix du service et carte complète : repères immédiats, palette MyLuckyMeal conservée. */
body:has(.wrap #panel) .modeseg{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:7px;
  border:1px solid var(--line);
  box-shadow:0 5px 18px #0000000b;
}
body:has(.wrap #panel) .modeseg button{
  min-width:0;
  min-height:104px;
  justify-content:center;
  border:1.5px solid transparent!important;
  padding:12px 8px;
}
body:has(.wrap #panel) .modeseg button svg{width:30px;height:30px;flex:none}
body:has(.wrap #panel) .modeseg button[aria-pressed="true"]{
  border-color:var(--fuchsia)!important;
  box-shadow:0 4px 14px #00000018;
}
body:has(.wrap #panel) .modeseg button:focus-visible{outline-offset:2px}
body:has(.wrap #panel) .sepcarte{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-left:5px solid var(--fuchsia);
  border-radius:16px;
  background:var(--surface);
}
body:has(.wrap #panel) .sepcarte b{line-height:1.2}
body:has(.wrap #panel) .sepcarte span{line-height:1.4}
body:has(.wrap #panel) .tuiles{padding:4px 2px 12px;scroll-padding-inline:8px}
body:has(.wrap #panel) .tuile{flex-basis:clamp(116px,34vw,148px);border-width:1.5px;box-shadow:0 3px 12px #0000000b}
body:has(.wrap #panel) .tuile img{height:112px}
body:has(.wrap #panel) .tuile[aria-pressed="true"]{border-color:var(--fuchsia);box-shadow:0 0 0 2px color-mix(in srgb,var(--fuchsia) 18%,transparent)}
body:has(.wrap #panel) .ligneart{gap:12px;padding:11px 2px}
body:has(.wrap #panel) .ligneart .nm{line-height:1.3}
body:has(.wrap #panel) .ligneart .pr{font-variant-numeric:tabular-nums}
body:has(.wrap #panel) .ligneart .plus2{width:46px;height:46px;border-color:var(--fuchsia);color:var(--accent-text);background:var(--surface)}
body:has(.wrap #panel) .ligneart .plus2:focus-visible{outline-offset:3px}
body:has(.wrap #panel) .dish.closed .tag{white-space:normal;text-align:center;line-height:1.25}
@media(max-width:380px){
  body:has(.wrap #panel) .modeseg button{min-height:94px;padding:10px 5px}
  body:has(.wrap #panel) .modeseg button b{font-size:.94rem}
  body:has(.wrap #panel) .modeseg button small{font-size:.72rem;line-height:1.25}
  body:has(.wrap #panel) .ligneart{gap:8px}
  body:has(.wrap #panel) .ligneart .nm{font-size:.9rem}
}

/* Snack Pro — récapitulatif multi-jours : lecture rapide par journée et service. */
body:has(.wrap #panel) .recap pre{
  margin:4px 0 0;
  padding:14px 15px;
  border:1px solid var(--line);
  border-left:4px solid var(--fuchsia);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  font-size:.94rem;
  line-height:1.65;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
body:has(.wrap #panel) .recap .note{line-height:1.45}
body:has(.wrap #panel) .recap .errors{margin-top:10px}
@media(max-width:480px){
  body:has(.wrap #panel) .recap pre{padding:12px;font-size:.9rem;line-height:1.6}
}


/* Panier multi-jours : chaque journée reste modifiable indépendamment. */
.panier-jours{display:grid;gap:12px;margin:12px 0}
.panier-jour{min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.panier-jour-head,.panier-jour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panier-jour-head{margin-bottom:8px}
.panier-jour-head h3{margin:0;font-size:1rem;font-weight:800;text-transform:capitalize}
.panier-modifier{flex:none;border:1px solid var(--fuchsia);border-radius:999px;padding:8px 12px;background:transparent;color:var(--ink);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.panier-lignes{margin:0;padding-left:20px;display:grid;gap:5px;font-size:.9rem;line-height:1.4}
.panier-jour-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.88rem}
.panier-jour-foot span{color:var(--muted)}
.panier-jour-foot strong{font-size:1rem;white-space:nowrap}
.panier-vide{margin:8px 0;padding:14px;border-radius:14px;background:var(--surface);color:var(--muted);font-size:.92rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:420px){.panier-jour{padding:12px}.panier-jour-head{align-items:flex-start}.panier-modifier{padding:7px 9px;font-size:.78rem}.panier-jour-foot{align-items:flex-start;flex-direction:column;gap:4px}}

/* Déplacement d'un article de la carte entre deux journées du panier */
.panier-deplacer{display:grid;gap:7px;margin-top:12px;padding:10px;border-radius:12px;background:var(--surface-2,var(--surface));border:1px solid var(--line)}
.panier-deplacer>label{font-size:.8rem;font-weight:800;color:var(--muted)}
.panier-deplacer-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:7px;align-items:center}
.panier-deplacer select{min-width:0;width:100%;min-height:40px;border:1px solid var(--line);border-radius:9px;padding:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem}
.panier-deplacer-btn{min-height:40px;padding:8px 12px;border:0;border-radius:9px;background:var(--fuchsia);color:white;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.panier-deplacer-btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:520px){.panier-deplacer-controls{grid-template-columns:1fr 1fr}.panier-deplacer-btn{grid-column:1/-1}}

/* Accessibilité : renforcer les limites et les états interactifs en contraste accru, sans changer la palette de marque. */
@media (prefers-contrast: more){
  :where(button,input,select,textarea,[role="button"],[tabindex]):focus-visible{
    outline:3px solid var(--accent-text,var(--fuchsia))!important;
    outline-offset:3px!important;
  }
  :where(button,input,select,textarea){border-color:currentColor}
  :where(.panier-jour,.panier-deplacer,.sepcarte,.dish,.ticket,.card){
    border-color:var(--ink)!important;
  }
  :where(.muted,.note,small){text-decoration-thickness:from-font}
}