/* ═══════════════════════════════════════════════
   MAURICE CONNECT — maquette de démonstration
   Charte reprise du site Maurice Sfez Café Cannes
   ═══════════════════════════════════════════════ */

:root{
  --green:    #3B7858;
  --green-d:  #2B5940;
  --green-dd: #1E4230;
  --green-l:  #6A9C81;
  --cream:    #F5EDE0;
  --cream-2:  #EFE3D1;
  --cream-3:  #FAF5EC;
  --peach:    #EFC9A6;
  --ink:      #21302A;
  --amber:    #B4761F;

  --disp: 'Fraunces', 'Times New Roman', serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --app-w: 412px;
  --bar-h: 56px;
  --tab-h: 62px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--green-dd);
  color:var(--green-d);
  font-family:var(--mono);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
::selection{ background:var(--green); color:var(--cream); }

h1,h2,h3{ margin:0; font-weight:400; }
.disp{
  font-family:var(--disp);
  font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;
  color:var(--green); line-height:.95; letter-spacing:-.015em;
}
.eyebrow{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--green); opacity:.75; margin:0;
}

/* ── Scène : cadre téléphone sur grand écran ───── */
.stage{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.app{
  position:relative;
  width:100%; max-width:var(--app-w);
  height:100dvh;
  background:var(--cream);
  display:flex; flex-direction:column;
  overflow:hidden;
}
@media (min-width:760px){
  .stage{ padding:26px 16px; }
  .app{
    height:min(880px, calc(100dvh - 52px));
    border-radius:44px;
    box-shadow:0 0 0 10px #17352500, 0 0 0 11px rgba(255,255,255,.14), 0 34px 70px rgba(0,0,0,.45);
  }
}

/* ── Barre haute + festons ─────────────────────── */
.bar{
  flex:none; position:relative; z-index:40;
  background:var(--cream-3);
  height:var(--bar-h);
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
  padding-top:env(safe-area-inset-top);
  box-sizing:content-box;
}
.bar__logo{ height:15px; width:auto; }
.bar__spacer{ flex:1; }
.bar__tag{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--green); color:var(--cream-3);
  padding:6px 11px; border-radius:100px; white-space:nowrap;
}
.bar__back{
  font-size:18px; line-height:1; color:var(--green);
  width:30px; height:30px; margin-left:-6px;
  display:flex; align-items:center; justify-content:center;
}
.valance{
  --r:14px;
  flex:none; z-index:39;
  height:30px; width:100%;
  background:repeating-linear-gradient(90deg,
    var(--green) 0 calc(2*var(--r)), var(--cream-3) calc(2*var(--r)) calc(4*var(--r)));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--r)) no-repeat,
    radial-gradient(var(--r) at 50% 0, #000 99%, #0000 101%) 0 100%/calc(2*var(--r)) var(--r) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--r)) no-repeat,
    radial-gradient(var(--r) at 50% 0, #000 99%, #0000 101%) 0 100%/calc(2*var(--r)) var(--r) repeat-x;
  filter:drop-shadow(0 4px 6px rgba(30,66,48,.10));
}

/* ── Zone défilante ────────────────────────────── */
.scroll{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));
}
.view{ animation:viewIn .34s var(--ease-out) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── Barre d'onglets (démonstration) ───────────── */
.tabs{
  flex:none; z-index:40;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--green-dd);
  box-shadow:0 -8px 18px rgba(30,66,48,.10);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  height:var(--tab-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:rgba(245,237,224,.5);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .3s var(--ease);
  position:relative;
}
.tab svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; }
.tab[aria-current="true"]{ color:var(--cream); }
.tab[aria-current="true"]::before{
  content:''; position:absolute; top:7px; left:30%; right:30%; height:3px;
  background:var(--peach); border-radius:3px;
}
.tab__dot{
  position:absolute; top:12px; right:calc(50% - 24px);
  min-width:16px; height:16px; padding:0 4px;
  background:var(--peach); color:var(--green-dd);
  border-radius:100px; font-size:9px; letter-spacing:0;
  display:flex; align-items:center; justify-content:center;
}

/* ── Éléments communs ──────────────────────────── */
.card{
  background:var(--cream-3);
  border:1px solid rgba(59,120,88,.14);
  border-radius:18px; padding:16px;
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px 20px;
  background:var(--green); color:var(--cream-3);
  border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ background:var(--green-l); opacity:.5; cursor:default; }
.btn--ghost{ background:none; color:var(--green); border:1px solid rgba(59,120,88,.35); }
.btn--amber{ background:var(--amber); }
.rule{ height:1px; background:rgba(59,120,88,.16); border:0; margin:20px 0; }
.muted{ color:var(--green); opacity:.62; }
.tiny{ font-size:11px; line-height:1.5; }

/* ── Bandeau « maquette » ──────────────────────── */
.demo-note{
  display:flex; gap:9px; align-items:flex-start;
  background:rgba(239,201,166,.4);
  border:1px solid rgba(180,118,31,.3);
  border-radius:14px; padding:10px 12px;
  font-size:11px; line-height:1.45; color:#7A4E12;
  margin-bottom:16px;
}
.demo-note b{ color:#5E3B0C; }

/* ══════════ VUE : TABLE / MENU ══════════ */
.head{ margin-bottom:18px; }
.head h1{ font-size:40px; }
.head p{ margin:8px 0 0; font-size:12px; }

.chips{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 -16px 16px; padding:0 16px 2px;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:9px 15px; border-radius:100px;
  border:1px solid rgba(59,120,88,.3);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--green); color:var(--cream-3); border-color:var(--green); }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pcard{
  background:var(--cream-3);
  border:1px solid rgba(59,120,88,.14);
  border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; text-align:left;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:active{ transform:scale(.985); }
.pcard__shot{
  position:relative; aspect-ratio:1/.82;
  background:linear-gradient(160deg,var(--cream-2),var(--peach));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pcard__shot img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.pcard__shot img.cover{ object-fit:cover; padding:0; }
.pcard__flag{
  position:absolute; top:7px; left:7px;
  background:var(--green); color:var(--cream-3);
  font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 7px; border-radius:100px;
}
.pcard__body{ padding:10px 11px 12px; flex:1; display:flex; flex-direction:column; }
.pcard__name{ font-size:12.5px; line-height:1.3; color:var(--green-dd); }
.pcard__desc{ font-size:10px; line-height:1.4; opacity:.6; margin:3px 0 0; }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.pcard__price{ font-family:var(--disp); font-size:17px; color:var(--green); font-variation-settings:'SOFT' 100,'WONK' 1; }
.pcard__add{
  width:28px; height:28px; border-radius:100px;
  background:var(--green); color:var(--cream-3);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
}
.cat-title{ margin:24px 0 12px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); }
.cat-title:first-child{ margin-top:0; }

/* ── Panneau d'options ─────────────────────────── */
.sheet-bg{
  position:absolute; inset:0; z-index:60;
  background:rgba(30,66,48,.55);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.sheet-bg.on{ opacity:1; pointer-events:auto; }
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:61;
  background:var(--cream-3);
  border-radius:26px 26px 0 0;
  max-height:88%; overflow-y:auto;
  padding:0 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(102%);
  transition:transform .42s var(--ease-out);
}
.sheet.on{ transform:none; }
.sheet__grab{ width:42px; height:4px; border-radius:4px; background:rgba(59,120,88,.25); margin:11px auto 14px; }
.sheet__shot{
  height:150px; border-radius:16px; margin-bottom:14px;
  background:linear-gradient(160deg,var(--cream-2),var(--peach));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sheet__shot img{ height:100%; width:100%; object-fit:contain; padding:10px; }
.sheet__shot img.cover{ object-fit:cover; padding:0; }
.opt{
  display:flex; align-items:center; gap:11px;
  padding:11px 0; border-bottom:1px solid rgba(59,120,88,.12);
  font-size:13px; width:100%; text-align:left;
}
.opt:last-of-type{ border-bottom:0; }
.opt__box{
  flex:none; width:20px; height:20px; border-radius:6px;
  border:1.5px solid rgba(59,120,88,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-3); font-size:12px;
}
.opt--radio .opt__box{ border-radius:100px; }
.opt[aria-pressed="true"] .opt__box{ background:var(--green); border-color:var(--green); }
.opt__name{ flex:1; }
.opt__price{ font-size:12px; opacity:.65; }
.qty{ display:flex; align-items:center; gap:14px; justify-content:center; margin:16px 0 14px; }
.qty button{
  width:38px; height:38px; border-radius:100px; border:1px solid rgba(59,120,88,.3);
  color:var(--green); font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.qty span{ font-family:var(--disp); font-size:24px; min-width:32px; text-align:center; color:var(--green); }

/* ── Panier ────────────────────────────────────── */
.line{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid rgba(59,120,88,.13); }
.line__shot{
  flex:none; width:54px; height:54px; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,var(--cream-2),var(--peach));
}
.line__shot img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.line__shot img.cover{ object-fit:cover; padding:0; }
.line__main{ flex:1; min-width:0; }
.line__name{ font-size:13px; color:var(--green-dd); }
.line__opts{ font-size:10.5px; opacity:.6; margin-top:2px; }
.line__ctl{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.line__ctl button{
  width:24px; height:24px; border-radius:100px; border:1px solid rgba(59,120,88,.3);
  color:var(--green); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.line__ctl span{ font-size:12px; min-width:14px; text-align:center; }
.line__price{ font-family:var(--disp); font-size:15px; color:var(--green); white-space:nowrap; }
.total{ display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 4px; }
.total span{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.total b{ font-family:var(--disp); font-weight:400; font-size:32px; color:var(--green); }
.field{
  width:100%; padding:14px 16px; margin:14px 0 4px;
  border:1px solid rgba(59,120,88,.28); border-radius:14px;
  background:var(--cream-3); color:var(--green-dd);
  font-family:var(--mono); font-size:14px;
}
.field::placeholder{ color:rgba(43,89,64,.4); }
.field:focus{ outline:2px solid var(--green); outline-offset:-1px; }
.empty{ text-align:center; padding:50px 20px; }
.empty img{ width:78px; margin:0 auto 16px; opacity:.5; }

/* ── Suivi ─────────────────────────────────────── */
.track{ margin:22px 0 4px; }
.step{ display:flex; gap:14px; padding-bottom:22px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px;
  background:rgba(59,120,88,.2);
}
.step:last-child::before{ display:none; }
.step__dot{
  flex:none; width:28px; height:28px; border-radius:100px;
  border:2px solid rgba(59,120,88,.3); background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-3); font-size:13px; z-index:1;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.step.done .step__dot{ background:var(--green); border-color:var(--green); }
.step.now .step__dot{
  border-color:var(--green);
  box-shadow:0 0 0 0 rgba(59,120,88,.45);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(59,120,88,0); }
  100%{ box-shadow:0 0 0 0 rgba(59,120,88,0); }
}
.step__t{ font-size:13.5px; color:var(--green-dd); }
.step.done .step__t, .step.now .step__t{ font-weight:700; }
.step__s{ font-size:11px; opacity:.6; margin-top:2px; }

/* ── Comptoir ──────────────────────────────────── */
.ticket{
  background:var(--cream-3);
  border:1px solid rgba(59,120,88,.16);
  border-left:4px solid var(--green);
  border-radius:14px; padding:13px 14px; margin-bottom:11px;
  animation:viewIn .34s var(--ease-out) both;
}
.ticket.s-prep{ border-left-color:var(--amber); }
.ticket.s-pret{ border-left-color:var(--green-l); opacity:.72; }
.ticket__top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.ticket__table{ font-family:var(--disp); font-size:20px; color:var(--green); }
.ticket__who{ font-size:11px; opacity:.65; flex:1; }
.ticket__age{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
.ticket ul{ margin:0 0 11px; padding:0; list-style:none; }
.ticket li{ font-size:12.5px; display:flex; gap:8px; padding:2px 0; }
.ticket li b{ color:var(--green); font-weight:700; min-width:18px; }
.ticket li em{ font-style:normal; font-size:10.5px; opacity:.6; }
.ticket__act{ display:flex; gap:8px; }
.ticket__act .btn{ padding:11px 12px; font-size:10px; letter-spacing:.12em; }

/* ── Fidélité ──────────────────────────────────── */
.loyal{
  position:relative; overflow:hidden;
  background:var(--green); color:var(--cream-3);
  border-radius:22px; padding:20px; margin-bottom:18px;
}
.loyal::after{
  content:''; position:absolute; right:-30px; bottom:-40px;
  width:160px; height:160px; border-radius:100px;
  background:rgba(245,237,224,.07);
}
.loyal__n{ font-family:var(--disp); font-size:54px; line-height:1; color:var(--cream-3); font-variation-settings:'SOFT' 100,'WONK' 1; }
.loyal__l{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.loyal__bar{ height:7px; border-radius:7px; background:rgba(245,237,224,.22); margin:15px 0 8px; overflow:hidden; }
.loyal__bar i{ display:block; height:100%; border-radius:7px; background:var(--peach); width:0; transition:width .9s var(--ease-out); }
.reward{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(59,120,88,.13);
}
.reward__n{
  flex:none; width:38px; height:38px; border-radius:100px;
  background:var(--cream-2); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:14px;
}
.reward.on .reward__n{ background:var(--green); color:var(--cream-3); }
.reward__t{ flex:1; font-size:13px; }
.reward__s{ font-size:10.5px; opacity:.6; }
.reward__go{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); border:1px solid rgba(59,120,88,.35); border-radius:100px; padding:7px 11px; }

/* ── Pilotage ──────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.kpi{ background:var(--cream-3); border:1px solid rgba(59,120,88,.14); border-radius:16px; padding:13px 14px; }
.kpi__l{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }
.kpi__v{ font-family:var(--disp); font-size:28px; color:var(--green); line-height:1.1; margin-top:4px; font-variation-settings:'SOFT' 100,'WONK' 1; }
.kpi__d{ font-size:10.5px; margin-top:3px; }
.kpi__d.up{ color:#2F6B45; }
.kpi__d.down{ color:#9A4A2A; }

.chart{ margin:6px 0 4px; }
.chart caption, .chart__t{
  text-align:left; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px; display:block;
}
.hrow{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:11.5px; }
.hrow__l{ width:104px; flex:none; color:var(--green-dd); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrow__t{ flex:1; height:15px; background:rgba(59,120,88,.10); border-radius:0 4px 4px 0; overflow:hidden; }
.hrow__b{ display:block; height:100%; border-radius:0 4px 4px 0; background:var(--green); width:0; transition:width .8s var(--ease-out); }
.hrow__v{ width:42px; flex:none; text-align:right; font-size:11px; color:var(--green-dd); }

.cols{ display:flex; align-items:flex-end; gap:5px; height:104px; margin-bottom:7px; }
.col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.col i{ display:block; width:100%; background:var(--green); border-radius:4px 4px 0 0; height:0; transition:height .8s var(--ease-out); }
.col.low i{ background:rgba(59,120,88,.28); }
.colx{ display:flex; gap:5px; }
.colx span{ flex:1; text-align:center; font-size:8.5px; opacity:.55; }

.report{ background:var(--green); color:var(--cream-3); border-radius:20px; padding:18px; margin-top:20px; }
.report h3{ font-family:var(--disp); font-size:22px; color:var(--cream-3); font-variation-settings:'SOFT' 100,'WONK' 1; }
.report p{ font-size:12px; line-height:1.55; opacity:.85; margin:9px 0 0; }
.report ul{ margin:12px 0 0; padding:0; list-style:none; }
.report li{ font-size:12px; padding:7px 0 7px 18px; position:relative; border-top:1px solid rgba(245,237,224,.16); }
.report li::before{ content:'→'; position:absolute; left:0; opacity:.7; }

/* ── Écran d'accueil de la démonstration ───────── */
.intro{
  position:absolute; inset:0; z-index:80;
  background:var(--cream); display:flex; flex-direction:column;
  padding:30px 24px calc(26px + env(safe-area-inset-bottom));
  transition:opacity .45s var(--ease), visibility .45s;
}
.intro.off{ opacity:0; visibility:hidden; }
.intro__logo{ width:180px; margin:0 auto; }
.intro__mid{ flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.intro__mid h1{ font-size:42px; margin-bottom:14px; }
.intro__logo{ margin-bottom:8px; }
.intro__mid p{ font-size:13px; line-height:1.6; margin:0 auto; max-width:30ch; }
.qr{ width:112px; height:112px; margin:20px auto 0; }
.qr rect{ fill:var(--green-dd); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}