/* Maquette restaurant (fictive) : fiche Google avec le lien « Commander », page de commande au nom du restaurant, notification.
   Mobile : la fiche, puis le haut de la page de commande ; la notification couvre la coupe du téléphone.
   À partir de 600 px : composition centrée (480 px au plus, 24 px de marge), la page de commande entière,
   la fiche et la notification qui mordent sur le bord du téléphone. */

.resto-scene{position:relative;display:grid;justify-items:center;width:100%;padding:16px 16px 14px}
.gcard{position:relative;z-index:3;width:100%;padding:12px;border-radius:16px;background:#fff;box-shadow:var(--sh-float)}
.phone--order{--pw:min(256px,100%);--ph:540px;margin-top:18px}
.resto-scene .phone--order{max-height:262px;overflow:hidden;border-radius:46px 46px 0 0;box-shadow:0 0 0 1.5px #2C3554,0 0 0 3px #4A577C}
.resto-scene .phone--order::before,.resto-scene .phone--order::after{display:none}
.notif{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:100%;margin-top:-30px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 2px 6px rgba(5,10,30,.12),0 20px 40px -16px rgba(5,10,30,.5)}

/* Fiche Google stylisée (jamais copiée de l'interface), vignettes de plats en aplats illustrés */
.g-photos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px;height:58px;margin-bottom:10px;overflow:hidden;border-radius:10px}
.g-photos svg{width:100%;height:100%}
.g-name{color:var(--ink);font:800 .875rem/1.3 var(--font);letter-spacing:-.01em}
.g-cat{color:var(--muted);font:600 .75rem/1.3 var(--font)}
.g-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.g-acts span{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid var(--trait-2);border-radius:999px;color:var(--bleu-700);font:800 .6875rem/1.2 var(--font)}
.g-acts .hl{border-color:var(--bleu);background:var(--bleu);color:#fff;box-shadow:0 0 0 3px rgba(47,91,255,.22)}
.gcard .g-acts .i{width:13px;height:13px;stroke-width:2.2}
.g-note{display:flex;align-items:center;gap:5px;margin-top:9px;color:var(--bleu-700);font:800 .75rem/1.3 var(--font)}
.gcard .g-note .i{width:14px;height:14px;stroke-width:2.4}

/* Page de commande au nom du restaurant */
.op-banner{flex:none;height:84px;overflow:hidden}
.op-banner svg{width:100%;height:100%}
.op-head{flex:none;padding:12px 14px;border-bottom:1px solid var(--trait)}
.op-brand{display:flex;align-items:center;gap:10px}
.op-tile{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-top:-30px;border:3px solid #fff;border-radius:11px;background:var(--nuit);color:#fff;font:800 .75rem/1 var(--font);box-sizing:content-box}
.op-brand strong{color:var(--ink);font:800 .8125rem/1.25 var(--font)}
.op-seg{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;padding:3px;border-radius:12px;background:var(--brume);font:800 .75rem/1 var(--font);text-align:center}
.op-seg span{padding:8px 0;border-radius:9px;color:var(--muted)}
.op-seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,22,51,.14)}
.op-list{list-style:none;padding:0 14px}
.op-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait)}
.op-img{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden}
.op-list li>span:not(.op-add){flex:1;min-width:0}
.op-list strong{display:block;color:var(--ink);font:800 .8125rem/1.3 var(--font)}
.op-list small{display:block;color:var(--muted);font:600 .75rem/1.3 var(--font)}
.op-add{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bleu);color:#fff}
.phone .op-add .i{width:14px;height:14px;stroke-width:2.6}
.op-cta{display:grid;place-items:center;flex:none;height:44px;margin:auto 14px 28px;border-radius:999px;background:var(--bleu);color:#fff;font:800 .8125rem/1 var(--font)}

/* Notification de commande sur le téléphone du restaurant */
.n-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--nuit);color:#fff}
.n-ic .i{width:17px;height:17px}
.notif strong{display:block;color:var(--ink);font:800 .8125rem/1.3 var(--font)}
.notif small{display:block;color:var(--muted);font:600 .75rem/1.35 var(--font)}

@media (min-width:600px){
  .stage--resto{min-height:600px}
  .resto-scene{display:block;width:min(100% - 48px,480px);padding:0}
  .resto-scene .phone--order{position:absolute;right:0;top:50%;margin:0;max-height:none;border-radius:50px;transform:translateY(-50%);box-shadow:0 0 0 1.5px #2C3554,0 0 0 3px #4A577C,0 44px 80px -36px rgba(3,8,26,.8),0 16px 34px -16px rgba(3,8,26,.5)}
  .resto-scene .phone--order::before,.resto-scene .phone--order::after{display:block}
  .phone--order{--pw:264px;--ph:540px}
  .gcard{position:absolute;left:0;top:64px;width:240px}
  .notif{position:absolute;left:0;bottom:72px;width:232px;margin:0}
}
@media (min-width:960px) and (max-width:1179px){.phone--order{--pw:248px;--ph:520px}.gcard{width:200px}.notif{width:212px}}