/* ============================================================
   RestoLounge — Site client (refonte "chic plage")
   Chargé APRÈS style.css : réutilise ses variables, boutons, champs, toasts.
   ============================================================ */

:root{
  --lagon:#0f7a85; --lagon-dark:#0a5760; --turquoise:#2dd4c8;
  --corail:#ff6f4f; --corail-dark:#e8573a; --soleil:#ffd166;
  --sable:#fffaf1; --sable-2:#f6eee0; --encre:#1f3a3d; --gris:#6b8386;
  --carte:#ffffff; --ligne:#efe5d3;
  --vert-ok:#2f9e6e; --rouge-alerte:#e6584f;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --sh-1: 0 2px 10px rgba(15,90,96,.08);
  --sh-2: 0 10px 30px rgba(15,90,96,.14);
  --sh-3: 0 22px 50px rgba(10,60,66,.22);
}

body.client{
  background: var(--sable);
  background-image:
    radial-gradient(900px 380px at 110% -80px, rgba(45,212,200,.16), transparent 60%),
    radial-gradient(700px 300px at -20% 0, rgba(255,209,102,.18), transparent 60%);
  background-attachment: fixed;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
body.client.no-scroll{ overflow:hidden; }

/* ---------- Splash ---------- */
.splash2{
  position:fixed; inset:0; z-index:400; overflow:hidden;
  background: linear-gradient(165deg, var(--lagon-dark) 0%, var(--lagon) 45%, var(--turquoise) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.splash2.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash2 .sun{
  position:absolute; width:260px; height:260px; border-radius:50%; top:12%; left:50%; transform:translateX(-50%);
  background: radial-gradient(circle, rgba(255,209,102,.55), rgba(255,111,79,0) 70%);
  animation: sunPulse 2.4s ease-in-out infinite;
}
.splash2 .logo{
  font-size:78px; position:relative; filter: drop-shadow(0 14px 22px rgba(0,0,0,.25));
  animation: logoIn .9s var(--ease-spring) both, logoFloat 2.6s ease-in-out .9s infinite;
}
.splash2 .name{
  font-family:'Playfair Display', serif; font-size:36px; margin-top:12px; letter-spacing:.5px; position:relative;
  animation: riseIn .7s var(--ease-out) .25s both;
}
.splash2 .tag{
  font-size:12px; letter-spacing:4px; text-transform:uppercase; opacity:.85; position:relative;
  animation: riseIn .7s var(--ease-out) .4s both;
}
.splash2 .bar{
  width:120px; height:3px; border-radius:3px; background:rgba(255,255,255,.25); margin-top:26px; overflow:hidden; position:relative;
  animation: riseIn .5s ease .5s both;
}
.splash2 .bar::after{
  content:""; position:absolute; inset:0; background: var(--soleil); transform-origin:left;
  animation: loadBar 1.3s var(--ease-out) .5s both;
}
.splash2 .waves{ position:absolute; left:0; right:0; bottom:0; height:120px; }
.splash2 .waves svg{ position:absolute; bottom:0; width:200%; height:100%; }
.splash2 .waves .w1{ animation: waveMove 7s linear infinite; opacity:.35; }
.splash2 .waves .w2{ animation: waveMove 11s linear infinite reverse; opacity:.25; }

@keyframes logoIn{ from{ transform: scale(.3) rotate(-20deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes logoFloat{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-8px) rotate(4deg); } }
@keyframes riseIn{ from{ transform: translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes loadBar{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes waveMove{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes sunPulse{ 0%,100%{ transform: translateX(-50%) scale(1); opacity:.9; } 50%{ transform: translateX(-50%) scale(1.12); opacity:1; } }

/* ---------- Header ---------- */
.app-header{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(255,250,241,.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.app-header.scrolled{ border-bottom-color: var(--ligne); box-shadow: 0 6px 18px rgba(15,90,96,.06); }
.app-brand{ display:flex; align-items:center; gap:10px; background:none; border:none; padding:0; color:var(--encre); }
.app-brand .mark{
  width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background: linear-gradient(135deg, var(--lagon), var(--turquoise)); box-shadow: var(--sh-1);
}
.app-brand .txt{ text-align:left; line-height:1.05; }
.app-brand .txt b{ font-family:'Playfair Display', serif; font-size:19px; display:block; }
.app-brand .txt small{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color: var(--corail); font-weight:600; }
.hdr-actions{ display:flex; gap:8px; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:14px; border:1px solid var(--ligne); background:#fff;
  display:flex; align-items:center; justify-content:center; color: var(--encre);
  transition: transform .15s ease, box-shadow .2s ease;
}
.icon-btn:active{ transform: scale(.92); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn .dot{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background: var(--corail); color:#fff; font-size:11px; font-weight:700; display:none;
  align-items:center; justify-content:center; border:2px solid var(--sable);
}
.icon-btn .dot.show{ display:flex; }
.bump{ animation: bump .5s var(--ease-spring); }
@keyframes bump{ 0%{ transform: scale(1);} 35%{ transform: scale(1.35);} 100%{ transform: scale(1);} }

/* ---------- Pages ---------- */
.page{ display:none; }
.page.active{ display:block; animation: pageIn .45s var(--ease-out); }
@keyframes pageIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
.wrap{ max-width:1180px; margin:0 auto; padding: 0 16px; }

/* ---------- Hero ---------- */
.hero2{
  position:relative; overflow:hidden; margin: 8px 0 18px; border-radius:26px; color:#fff;
  padding: 26px 22px 64px; min-height:190px;
  background: linear-gradient(135deg, var(--lagon-dark) 0%, var(--lagon) 50%, var(--turquoise) 100%);
  box-shadow: var(--sh-2);
}
.hero2 .kick{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color: var(--soleil); font-weight:700; position:relative; }
.hero2 h1{ font-family:'Playfair Display', serif; font-size:30px; line-height:1.12; margin:8px 0 8px; max-width:520px; position:relative; }
.hero2 p{ margin:0; opacity:.9; font-size:14px; max-width:420px; position:relative; }
.hero2 .sunball{
  position:absolute; right:-30px; top:-30px; width:170px; height:170px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #ffe7a3, var(--soleil) 45%, rgba(255,111,79,.75) 100%);
  opacity:.9; animation: sunFloat 6s ease-in-out infinite;
}
.hero2 .palm{ position:absolute; right:18px; bottom:22px; font-size:56px; transform-origin: bottom center; animation: sway 4s ease-in-out infinite; }
.hero2 .sea{ position:absolute; left:0; right:0; bottom:-2px; height:56px; overflow:hidden; }
.hero2 .sea svg{ position:absolute; bottom:0; width:200%; height:100%; }
.hero2 .sea .s1{ animation: waveMove 9s linear infinite; }
.hero2 .sea .s2{ animation: waveMove 14s linear infinite reverse; opacity:.6; }
@keyframes sunFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }
@keyframes sway{ 0%,100%{ transform: rotate(-4deg);} 50%{ transform: rotate(5deg);} }

/* ---------- Grandes tuiles Manger / Boire ---------- */
.mode-tiles{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:8px; }
.mode-tile{
  position:relative; overflow:hidden; border:none; border-radius:22px; padding:18px 16px; text-align:left; color:#fff;
  min-height:118px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow: var(--sh-2);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.mode-tile:active{ transform: scale(.96); }
.mode-tile.food{ background: linear-gradient(140deg, #ff9f7d, var(--corail) 60%, #e8573a); }
.mode-tile.drink{ background: linear-gradient(140deg, #6fd8cb, var(--turquoise) 40%, var(--lagon)); }
.mode-tile .emo{ position:absolute; right:10px; top:6px; font-size:54px; transition: transform .4s var(--ease-spring); }
.mode-tile:hover .emo{ transform: rotate(-10deg) scale(1.1); }
.mode-tile b{ font-family:'Playfair Display', serif; font-size:22px; position:relative; }
.mode-tile span{ font-size:12px; opacity:.92; position:relative; }
.see-all{ display:block; margin: 6px auto 0; background:none; border:none; color: var(--lagon); font-weight:600; font-size:13px; padding:8px; }

/* ---------- Titres de section ---------- */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 22px 0 10px; }
.sec-head h2{ font-family:'Playfair Display', serif; font-size:21px; margin:0; color: var(--encre); }
.sec-head button{ background:none; border:none; color: var(--corail); font-weight:600; font-size:13px; }

/* ---------- Ronds de catégories (façon Glovo) ---------- */
.cat-circles{ display:flex; gap:14px; overflow-x:auto; padding: 4px 2px 8px; scrollbar-width:none; scroll-snap-type:x proximity; }
.cat-circles::-webkit-scrollbar{ display:none; }
.cat-circle{ flex:0 0 auto; width:72px; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:7px; scroll-snap-align:start; padding:0; }
.cat-circle .ico{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px;
  background:#fff; box-shadow: var(--sh-1); border:1px solid var(--ligne);
  transition: transform .25s var(--ease-spring), box-shadow .2s ease;
}
.cat-circle:active .ico{ transform: scale(.9); }
.cat-circle:hover .ico{ transform: translateY(-3px); box-shadow: var(--sh-2); }
.cat-circle span{ font-size:11px; font-weight:600; color: var(--encre); text-align:center; line-height:1.2; }

/* ---------- Carrousel À découvrir ---------- */
.discover{ display:flex; gap:12px; overflow-x:auto; padding: 4px 2px 12px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.discover::-webkit-scrollbar{ display:none; }
.dcard{
  flex:0 0 auto; width:158px; background:#fff; border-radius:20px; overflow:hidden; box-shadow: var(--sh-1);
  border:1px solid var(--ligne); cursor:pointer; scroll-snap-align:start; position:relative;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.dcard:hover{ transform: translateY(-4px); box-shadow: var(--sh-2); }
.dcard:active{ transform: scale(.97); }
.dcard .img{ aspect-ratio: 1 / 1; width:100%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:46px; }
.dcard .body{ padding:10px 12px 12px; }
.dcard .nm{ font-size:13px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:32px; }
.dcard .pr{ font-size:13px; color: var(--lagon); font-weight:700; margin-top:4px; }
.dcard .star{ position:absolute; top:8px; left:8px; background: rgba(255,255,255,.92); border-radius:999px; font-size:10px; font-weight:700; padding:3px 8px; color: var(--corail); }

/* ---------- Carte d'infos ---------- */
.info2{ background:#fff; border-radius:20px; padding:16px 18px; box-shadow: var(--sh-1); border:1px solid var(--ligne); margin: 18px 0 8px; display:grid; gap:10px; }
.info2 .row{ display:flex; gap:12px; align-items:center; font-size:13.5px; color: var(--gris); }
.info2 .row i{ font-style:normal; width:34px; height:34px; border-radius:11px; background: var(--sable-2); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* ---------- Barre du menu (sticky) ---------- */
.menu-top{
  position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index:40; margin: 0 -16px; padding: 8px 16px 10px;
  background: rgba(255,250,241,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.seg{ position:relative; display:grid; grid-template-columns: repeat(3,1fr); background:#fff; border:1px solid var(--ligne); border-radius:16px; padding:4px; margin-bottom:10px; }
.seg button{ position:relative; z-index:1; background:none; border:none; padding:9px 4px; font-weight:600; font-size:13px; color: var(--gris); border-radius:12px; transition: color .25s ease; }
.seg button.active{ color:#fff; }
.seg .pill{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width: calc((100% - 8px) / 3); border-radius:12px;
  background: linear-gradient(135deg, var(--lagon), var(--turquoise)); box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-spring);
}
.search2{ position:relative; }
.search2 svg{ position:absolute; left:14px; top:50%; transform: translateY(-50%); width:18px; height:18px; color: var(--gris); pointer-events:none; }
.search2 input{
  width:100%; padding:12px 40px 12px 42px; border-radius:14px; border:1px solid var(--ligne); background:#fff;
  font-family:inherit; font-size:14px; transition: box-shadow .2s ease, border-color .2s ease;
}
.search2 input:focus{ outline:none; border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(45,212,200,.18); }
.search2 .clear{ position:absolute; right:8px; top:50%; transform: translateY(-50%); border:none; background: var(--sable-2); width:26px; height:26px; border-radius:50%; font-size:12px; display:none; color: var(--encre); }
.search2 .clear.show{ display:block; }
.chips{ display:flex; gap:8px; overflow-x:auto; padding-top:10px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--ligne);
  background:#fff; font-size:13px; font-weight:600; color: var(--encre); white-space:nowrap;
  transition: background .25s ease, color .25s ease, transform .15s ease, border-color .25s ease;
}
.chip:active{ transform: scale(.94); }
.chip.active{ background: var(--encre); color:#fff; border-color: var(--encre); }

/* ---------- Grille produits : 3 par ligne sur mobile ---------- */
.result-info{ font-size:12px; color: var(--gris); margin: 4px 2px 10px; }
.pgrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; padding-bottom: 20px; }
@media (min-width: 640px){ .pgrid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; } }
@media (min-width: 900px){ .pgrid{ grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px; } }
@media (min-width: 1150px){ .pgrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
.pgroup-title{ grid-column: 1 / -1; display:flex; align-items:center; gap:8px; font-family:'Playfair Display', serif; font-size:17px; margin: 10px 0 0; color: var(--encre); }
.pgroup-title small{ font-family:'Poppins',sans-serif; font-size:11px; color: var(--gris); font-weight:500; }

.pcard{
  position:relative; background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--ligne); box-shadow: var(--sh-1);
  cursor:pointer; display:flex; flex-direction:column; min-width:0;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.pcard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); }
.pcard:active{ transform: scale(.97); }
.pcard .pimg{ position:relative; aspect-ratio: 1 / 1; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:34px; }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out); }
.pcard:hover .pimg img{ transform: scale(1.06); }
.pcard .pbody{ padding:8px 9px 10px; display:flex; flex-direction:column; gap:3px; flex:1; }
.pcard .pname{ font-size:12px; font-weight:600; line-height:1.25; color: var(--encre); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:30px; }
.pcard .pprice{ font-size:12.5px; font-weight:700; color: var(--lagon); white-space:nowrap; }
.pcard .add{
  position:absolute; right:6px; top:6px; width:30px; height:30px; border-radius:50%; border:none;
  background:#fff; color: var(--corail); font-size:20px; font-weight:600; line-height:1; box-shadow: var(--sh-1);
  display:flex; align-items:center; justify-content:center; transition: transform .2s var(--ease-spring), background .2s ease;
}
.pcard .add:active{ transform: scale(.85); }
.pcard .qty-badge{
  position:absolute; right:6px; top:6px; min-width:30px; height:30px; padding:0 8px; border-radius:999px; background: var(--corail); color:#fff;
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow: var(--sh-1);
  animation: bump .45s var(--ease-spring);
}
.pcard .tag{ position:absolute; left:6px; bottom:6px; padding:2px 7px; border-radius:999px; font-size:9.5px; font-weight:700; color:#fff; }
.tag.low{ background: rgba(240,146,60,.95); }
.tag.out{ background: rgba(60,60,60,.85); }
.pcard.out{ opacity:.55; filter: grayscale(.4); }
@media (min-width: 640px){
  .pcard .pname{ font-size:13.5px; min-height:34px; }
  .pcard .pprice{ font-size:14px; }
  .pcard .pbody{ padding:10px 12px 12px; }
}

/* Couleurs des visuels de remplacement (par catégorie) */
.ph0{ background: linear-gradient(135deg, #c9f5ef, #6fd8cb); }
.ph1{ background: linear-gradient(135deg, #ffe0d1, #ff9f7d); }
.ph2{ background: linear-gradient(135deg, #fff0c2, #ffcf5c); }
.ph3{ background: linear-gradient(135deg, #d9f3ff, #8ed0f0); }
.ph4{ background: linear-gradient(135deg, #ffdcd7, #ff8f87); }
.ph5{ background: linear-gradient(135deg, #e6f7d9, #9fd98a); }
.ph6{ background: linear-gradient(135deg, #efe2ff, #c3a2f0); }

/* Révélation en cascade */
.reveal{ opacity:0; transform: translateY(16px) scale(.98); }
.reveal.in{ opacity:1; transform:none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), box-shadow .25s ease; transition-delay: var(--d, 0ms); }
.reveal.in:hover{ transition-delay: 0ms; }

/* Squelettes de chargement */
.sk{ background: linear-gradient(100deg, #efe6d3 30%, #f8f2e6 50%, #efe6d3 70%); background-size:200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius:16px; }
.sk-card{ aspect-ratio: 3 / 4; }
.sk-d{ flex:0 0 auto; width:158px; height:220px; border-radius:20px; }
@keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

.empty2{ grid-column: 1 / -1; text-align:center; padding: 40px 16px; color: var(--gris); }
.empty2 .e{ font-size:44px; margin-bottom:8px; animation: logoFloat 3s ease-in-out infinite; }

/* ---------- Feuilles (bottom sheets) ---------- */
.sheet-bg{
  position:fixed; inset:0; z-index:200; background: rgba(15,40,44,.45);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s;
}
.sheet-bg.open{ opacity:1; visibility:visible; }
.sheet{
  position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background: var(--sable); border-radius:28px 28px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%);
  transition: transform .45s var(--ease-out); box-shadow: var(--sh-3); overscroll-behavior: contain;
}
.sheet-bg.open .sheet{ transform:none; }
.sheet .grab{ width:44px; height:5px; border-radius:5px; background:#ddd0b8; margin: 4px auto 12px; }
.sheet h2{ font-family:'Playfair Display', serif; margin: 4px 0 10px; color: var(--encre); }
@media (min-width: 700px){
  .sheet-bg{ align-items:center; }
  .sheet{ border-radius:28px; transform: translateY(30px) scale(.97); opacity:0; transition: transform .4s var(--ease-out), opacity .3s ease; }
  .sheet-bg.open .sheet{ opacity:1; transform:none; }
}

/* Fiche produit */
.dt-img{ position:relative; margin: -10px -18px 14px; aspect-ratio: 4 / 3; max-height:46vh; width: calc(100% + 36px); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:84px; }
.dt-img img{ width:100%; height:100%; object-fit:cover; animation: zoomIn 1.2s var(--ease-out); }
@keyframes zoomIn{ from{ transform: scale(1.12);} to{ transform: scale(1);} }
.dt-close{ position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:none; background: rgba(255,255,255,.92); color: var(--encre); font-size:16px; font-weight:700; box-shadow: var(--sh-1); z-index:2; }
.dt-cat{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color: var(--corail); }
.dt-name{ font-family:'Playfair Display', serif; font-size:26px; line-height:1.15; margin: 6px 0 6px; }
.dt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 6px 0 4px; }
.dt-price{ font-size:22px; font-weight:700; color: var(--lagon); }
.dt-stock{ font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:#e7f6ef; color:#2f9e6e; }
.dt-stock.low{ background:#fdeedd; color:#c46a17; }
.dt-stock.out{ background:#eee; color:#666; }
.dt-desc{ color: var(--gris); line-height:1.6; font-size:14px; margin: 12px 0 16px; }
.qty-big{ display:flex; align-items:center; justify-content:center; gap:18px; margin: 8px 0 14px; }
.qty-big button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--ligne); background:#fff; font-size:22px; color: var(--encre); transition: transform .15s ease; }
.qty-big button:active{ transform: scale(.88); }
.qty-big span{ font-size:24px; font-weight:700; min-width:30px; text-align:center; }
.btn-cta{
  width:100%; border:none; border-radius:16px; padding:15px 18px; font-size:15px; font-weight:700; color:#fff;
  background: linear-gradient(135deg, var(--corail), var(--corail-dark)); box-shadow: 0 10px 24px rgba(255,111,79,.35);
  display:flex; justify-content:space-between; align-items:center; transition: transform .15s ease, box-shadow .2s ease;
}
.btn-cta:active{ transform: scale(.98); }
.btn-cta:disabled{ background:#c9c2b5; box-shadow:none; cursor:not-allowed; }
.btn-cta.center{ justify-content:center; }
.btn-soft{ width:100%; border:none; border-radius:16px; padding:13px; margin-top:10px; font-weight:600; background: var(--sable-2); color: var(--encre); }
.also{ margin-top:18px; }
.also h3{ font-size:14px; margin: 0 0 10px; font-family:'Poppins',sans-serif; color: var(--encre); }
.also .discover .dcard{ width:128px; }

/* Panier */
.cart-line{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ligne); animation: riseIn .35s var(--ease-out) both; }
.cart-line .th{ width:52px; height:52px; border-radius:14px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px; }
.cart-line .th img{ width:100%; height:100%; object-fit:cover; }
.cart-line .inf{ flex:1; min-width:0; }
.cart-line .inf b{ font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-line .inf span{ font-size:12.5px; color: var(--gris); }
.mini-qty{ display:flex; align-items:center; gap:8px; }
.mini-qty button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--ligne); background:#fff; font-size:16px; color: var(--encre); }
.mini-qty .rm{ border:none; background:none; color: var(--rouge-alerte); width:auto; padding: 0 2px; font-size:16px; }
.cart-sum{ display:flex; justify-content:space-between; font-size:18px; font-weight:700; padding: 16px 0 6px; color: var(--encre); }
.form-block{ background:#fff; border:1px solid var(--ligne); border-radius:18px; padding:14px 14px 4px; margin-top:12px; }
.pay-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap:8px; }
.pay-opt{ border:1px solid var(--ligne); border-radius:12px; padding:10px 6px; text-align:center; font-size:12px; font-weight:600; cursor:pointer; background:#fff; transition: all .2s ease; }
.pay-opt input{ display:none; }
.pay-opt .pi{ display:block; font-size:20px; margin-bottom:3px; }
.pay-opt:has(input:checked){ border-color: var(--lagon); background: #e9f7f6; color: var(--lagon); box-shadow: 0 0 0 3px rgba(15,122,133,.12); }
.field .err{ color: var(--rouge-alerte); font-size:12px; margin-top:4px; display:none; }
.field.invalid input{ border-color: var(--rouge-alerte); animation: shake .35s ease; }
.field.invalid .err{ display:block; }
@keyframes shake{ 0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-5px);} 75%{ transform: translateX(5px);} }

/* Barre panier flottante (façon Glovo) */
.cart-bar{
  position:fixed; left:12px; right:12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index:60; max-width:560px; margin:0 auto;
  border:none; border-radius:18px; padding: 13px 16px; color:#fff; display:flex; align-items:center; gap:12px;
  background: linear-gradient(135deg, var(--lagon-dark), var(--lagon)); box-shadow: var(--sh-3);
  transform: translateY(170%); transition: transform .5s var(--ease-spring);
}
.cart-bar.show{ transform:none; }
.cart-bar .cnt{ background: rgba(255,255,255,.18); border-radius:10px; padding:4px 10px; font-weight:700; font-size:13px; }
.cart-bar .lbl{ flex:1; text-align:left; font-weight:600; font-size:14px; }
.cart-bar .tot{ font-weight:700; font-size:14px; }
body.client.has-cart{ padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

/* Point qui vole vers le panier */
.fly-dot{ position:fixed; z-index:500; width:18px; height:18px; border-radius:50%; background: var(--corail); box-shadow: 0 0 0 4px rgba(255,111,79,.25); pointer-events:none; }

/* ---------- Barre d'onglets du bas ---------- */
.tabbar2{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns: repeat(4,1fr);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top:1px solid var(--ligne); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar2 button{ position:relative; background:none; border:none; padding:9px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9aa7a8; font-size:10.5px; font-weight:600; transition: color .25s ease; }
.tabbar2 button svg{ width:23px; height:23px; transition: transform .35s var(--ease-spring); }
.tabbar2 button.active{ color: var(--lagon); }
.tabbar2 button.active svg{ transform: translateY(-2px) scale(1.08); }
.tabbar2 button::before{
  content:""; position:absolute; top:0; left:30%; right:30%; height:3px; border-radius:0 0 4px 4px; background: var(--corail);
  transform: scaleX(0); transition: transform .35s var(--ease-spring);
}
.tabbar2 button.active::before{ transform: scaleX(1); }
.tabbar2 .tb-badge{ position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background: var(--corail); color:#fff; font-size:10px; display:none; align-items:center; justify-content:center; }
.tabbar2 .tb-badge.show{ display:flex; }

/* ---------- Pages Commandes / Compte ---------- */
.page-title{ font-family:'Playfair Display', serif; font-size:28px; margin: 14px 0 4px; color: var(--encre); }
.page-sub{ color: var(--gris); font-size:13.5px; margin: 0 0 16px; }
.card2{ background:#fff; border:1px solid var(--ligne); border-radius:20px; padding:16px; box-shadow: var(--sh-1); margin-bottom:14px; }
.card2 h3{ margin:0 0 10px; font-size:16px; }
.link-row{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 4px; background:none; border:none; border-bottom:1px solid var(--ligne); font-size:14px; color: var(--encre); text-align:left; text-decoration:none; }
.link-row:last-child{ border-bottom:none; }
.link-row i{ font-style:normal; width:34px; height:34px; border-radius:11px; background: var(--sable-2); display:flex; align-items:center; justify-content:center; }
.link-row span{ flex:1; }
.link-row em{ font-style:normal; color: var(--gris); }
.order2{ background:#fff; border:1px solid var(--ligne); border-radius:18px; padding:14px; margin-bottom:12px; box-shadow: var(--sh-1); }
.order2 .hd{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.order2 .hd b{ color: var(--lagon); }
.order2 ul{ margin:8px 0; padding-left:18px; font-size:13px; color: var(--gris); }
.order2 .code{ font-size:12px; color: var(--gris); }
.order2 .code b{ letter-spacing:3px; color: var(--encre); font-size:14px; }
.order2 .again{ margin-top:10px; border:1px solid var(--ligne); background: var(--sable-2); border-radius:12px; padding:8px 12px; font-size:12.5px; font-weight:600; color: var(--encre); }
.steps{ display:flex; gap:4px; margin: 10px 0 4px; }
.steps i{ flex:1; height:6px; border-radius:4px; background: var(--ligne); position:relative; overflow:hidden; }
.steps i.done{ background: var(--vert-ok); }
.steps i.now::after{ content:""; position:absolute; inset:0; background: var(--vert-ok); animation: progressPulse 1.6s ease-in-out infinite; }
.steps i.x{ background: var(--rouge-alerte); }
@keyframes progressPulse{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }
.steps-lbl{ display:flex; justify-content:space-between; font-size:10px; color: var(--gris); }

/* Confirmation */
.confirm2{ text-align:center; padding: 10px 4px 4px; }
.check-anim{ width:86px; height:86px; margin: 6px auto 10px; display:block; }
.check-anim circle{ stroke: var(--vert-ok); stroke-width:4; fill:none; stroke-dasharray:240; stroke-dashoffset:240; }
.check-anim path{ stroke: var(--vert-ok); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.sheet-bg.open .check-anim circle{ animation: drawStroke .7s var(--ease-out) .15s forwards; }
.sheet-bg.open .check-anim path{ animation: drawStroke .45s var(--ease-out) .7s forwards; }
@keyframes drawStroke{ to{ stroke-dashoffset:0; } }
.code-big{ font-family:'Playfair Display', serif; font-size:42px; font-weight:700; letter-spacing:10px; color: var(--lagon); }
.code-wrap{ background: linear-gradient(135deg, rgba(45,212,200,.12), rgba(255,111,79,.08)); border:2px dashed var(--turquoise); border-radius:18px; padding:14px; margin: 14px 0; }

/* Confettis */
.confetti{ position:fixed; top:-14px; z-index:450; width:9px; height:14px; border-radius:2px; pointer-events:none; animation: confettiFall linear forwards; }
@keyframes confettiFall{ to{ transform: translateY(105vh) rotate(720deg); opacity:.2; } }

/* Pied de page */
.foot2{ text-align:center; color: var(--gris); font-size:12px; padding: 24px 0 10px; }
.foot2 b{ font-family:'Playfair Display', serif; color: var(--lagon); font-size:15px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Les effets de survol/appui doivent rester actifs après l'animation d'apparition */
.pcard.reveal.in:hover{ transform: translateY(-3px); }
.dcard.reveal.in:hover{ transform: translateY(-4px); }
.pcard.reveal.in:active, .dcard.reveal.in:active, .mode-tile.reveal.in:active{ transform: scale(.97); }
.cat-circle.reveal.in:active .ico{ transform: scale(.9); }

/* Grand écran : l'en-tête s'aligne sur le contenu centré */
@media (min-width: 1212px){
  .app-header{ padding-left: calc((100vw - 1180px) / 2 + 16px); padding-right: calc((100vw - 1180px) / 2 + 16px); }
}
/* Suggestions de la relance : cartes plus compactes, texte aligné à gauche */
#upsellSuggest .dcard{ width:128px; text-align:left; }

/* Les messages restent visibles au-dessus des fenêtres */
.toast{ z-index: 600; }

/* ---------- Accès personnel (code PIN) ---------- */
.pin-sheet{ text-align:center; max-width:400px; }
.pin-ico{ font-size:40px; animation: logoFloat 2.6s ease-in-out infinite; }
.pin-sheet h2{ margin: 4px 0 2px; }
.pin-sub{ color: var(--gris); font-size:13px; margin:0 0 16px; }
.pin-dots{ display:flex; justify-content:center; gap:16px; margin-bottom:8px; }
.pin-dots i{ width:16px; height:16px; border-radius:50%; border:2px solid var(--lagon); transition: background .2s ease, transform .25s var(--ease-spring); }
.pin-dots i.on{ background: var(--lagon); transform: scale(1.2); }
.pin-dots.shake{ animation: shake .4s ease; }
.pin-dots.ok i{ background: var(--vert-ok); border-color: var(--vert-ok); }
.pin-err{ min-height:18px; color: var(--rouge-alerte); font-size:12.5px; font-weight:600; margin-bottom:10px; }
.pin-pad{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; max-width:300px; margin:0 auto; }
.pin-pad button{ padding:16px 0; border-radius:50px; border:1px solid var(--ligne); background:#fff; font-size:22px; font-weight:600; color: var(--encre); transition: transform .12s ease, background .2s ease; }
.pin-pad button:active{ transform: scale(.9); background: var(--sable-2); }
.pin-pad .alt{ font-size:13px; color: var(--gris); }
.app-brand .mark{ transition: transform .2s var(--ease-spring); }
.app-brand.tap .mark{ transform: scale(.88) rotate(-8deg); }

/* Compteur − / + sur la carte produit (article déjà dans le panier) */
.pcard .pstep{ position:absolute; left:6px; right:6px; bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:4px;
  background: rgba(255,255,255,.96); border-radius:999px; padding:3px; box-shadow: var(--sh-1); animation: bump .4s var(--ease-spring); z-index:2; }
.pcard .pstep button{ width:28px; height:28px; border-radius:50%; border:none; background: var(--corail); color:#fff; font-size:16px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; transition: transform .15s ease; padding:0; }
.pcard .pstep button[data-dec-card]{ background:#f3ece0; color: var(--encre); font-size:14px; }
.pcard .pstep button:active{ transform: scale(.85); }
.pcard .pstep span{ font-size:13px; font-weight:700; color: var(--encre); min-width:18px; text-align:center; }
.pcard:has(.pstep) .tag{ bottom:44px; }
.mini-qty button{ width:34px; height:34px; cursor:pointer; transition: transform .15s ease; }
.mini-qty button:active{ transform: scale(.88); }
.mini-qty button:disabled{ opacity:.35; }

/* Paiement : espèces ou Wave */
.pay-grid.pay-2{ grid-template-columns: 1fr 1fr; }
.pay-opt.pay-wave:has(input:checked){ border-color:#1aa7ec; background:#e8f6fe; color:#0b6fa4; box-shadow: 0 0 0 3px rgba(26,167,236,.15); }
.pay-hint{ margin:-4px 0 12px; padding:10px 12px; border-radius:12px; background:#e8f6fe; color:#0b5f8c; font-size:13px; animation: riseIn .3s var(--ease-out) both; }
.pay-hint[hidden]{ display:none; }
.wave-pay{ text-align:left; margin:14px 0 6px; padding:14px 16px; border-radius:18px; background: linear-gradient(135deg, #e8f6fe, #f4fbff); border:1px solid rgba(26,167,236,.3); animation: riseIn .45s var(--ease-out) both; }
.wave-pay[hidden]{ display:none; }
.wave-pay .wave-head{ display:flex; align-items:center; gap:8px; font-size:16px; color:#0b5f8c; margin-bottom:6px; }
.wave-pay .wave-logo{ width:34px; height:34px; border-radius:10px; background:#1aa7ec; display:flex; align-items:center; justify-content:center; font-size:19px; }
.wave-pay ol{ margin:6px 0 4px; padding-left:20px; font-size:13.5px; line-height:1.55; color:#21414a; }
.btn-wave{ display:block; text-align:center; margin-top:10px; padding:13px; border-radius:999px; background:#1aa7ec; color:#fff; font-weight:700; text-decoration:none; }
.btn-wave[hidden]{ display:none; }

/* Accords intelligents : barre « Avec ça ? » après un ajout */
.pair-bar{ position:fixed; left:12px; right:12px; max-width:560px; margin:0 auto; z-index:70;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); background: rgba(255,250,241,.98); border:1px solid var(--ligne);
  border-radius:20px; padding:10px 12px 12px; box-shadow: var(--sh-3, 0 12px 30px rgba(0,0,0,.15));
  transform: translateY(20px); opacity:0; transition: transform .35s var(--ease-out), opacity .3s ease; backdrop-filter: blur(8px); }
body.has-cart .pair-bar{ bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
.pair-bar.show{ transform:none; opacity:1; }
.pair-bar[hidden]{ display:none; }
.pair-bar .pb-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pair-bar .pb-head b{ font-size:14px; color: var(--encre); }
.pair-bar .pb-head button{ border:none; background:none; font-size:15px; color: var(--gris); cursor:pointer; padding:2px 6px; }
.pair-bar .pb-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.pair-bar .pb-chips::-webkit-scrollbar{ display:none; }
.pair-bar .pb-chips button{ flex-shrink:0; display:flex; align-items:center; gap:6px; border:1px solid var(--ligne); background:#fff; border-radius:999px;
  padding:8px 12px; font: 600 12.5px 'Poppins', sans-serif; color: var(--encre); cursor:pointer; transition: transform .15s ease, border-color .2s ease; animation: riseIn .35s var(--ease-out) both; }
.pair-bar .pb-chips button:active{ transform: scale(.95); }
.pair-bar .pb-chips button .i{ font-size:15px; }
.pair-bar .pb-chips button em{ font-style:normal; color: var(--corail); font-weight:700; }

/* Lignes de suggestion (fiche produit « Parfait avec » + avant le panier) */
.pair-list{ display:flex; flex-direction:column; gap:8px; margin: 6px 0 4px; text-align:left; }
.pair-row{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:16px; background:#fff; border:1px solid var(--ligne); animation: riseIn .4s var(--ease-out) both; }
.pair-row .pr-th{ width:52px; height:52px; border-radius:12px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; }
.pair-row .pr-th img{ width:100%; height:100%; object-fit:cover; }
.pair-row .pr-inf{ flex:1; min-width:0; cursor:pointer; display:flex; flex-direction:column; }
.pair-row .pr-inf small{ font-size:11px; color: var(--lagon); font-weight:600; }
.pair-row .pr-inf b{ font-size:13.5px; color: var(--encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pair-row .pr-inf span{ font-size:12.5px; color: var(--gris); font-weight:600; }
.pair-row .pr-add{ width:38px; height:38px; border-radius:50%; border:none; background: var(--corail); color:#fff; font-size:20px; font-weight:700; cursor:pointer; flex-shrink:0; transition: transform .2s var(--ease-spring), background .2s ease; }
.pair-row .pr-add:active{ transform: scale(.85); }
.pair-row .pr-add.done{ background: var(--vert-ok, #2e9e6a); font-size:16px; }

/* ===== Icônes maison : intégration ===== */
.splash2 .logo{ color:#fff; font-size:84px; line-height:1; }
.splash2 .logo .ic-d{ opacity:.28; }
.app-brand .mark{ color:#fff; font-size:23px; }
.app-brand .mark .ic-d{ opacity:.3; }
.hero2 .palm{ color: rgba(255,255,255,.92); font-size:62px; line-height:1; }
.hero2 .palm .ic-s{ stroke-width:1.3; }
.mode-tile .emo{ color: rgba(255,255,255,.95); font-size:58px; line-height:1; top:10px; right:12px; }
.mode-tile .emo .ic-s{ stroke-width:1.3; }
.mode-tile .emo .ic-d{ opacity:.25; }
.cat-circle .ico{ color: var(--lagon); font-size:30px; background: linear-gradient(160deg, #fff, #f3fbfa); }
.cat-circle:nth-child(3n+2) .ico{ color: var(--corail); background: linear-gradient(160deg, #fff, #fff4ef); }
.cat-circle:nth-child(3n) .ico{ color: #b8862b; background: linear-gradient(160deg, #fff, #fff8e8); }
.pcard .pimg{ color:#fff; font-size:44px; }
.pcard .pimg > .ic{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); transition: transform .5s var(--ease-spring); }
.pcard:hover .pimg > .ic{ transform: scale(1.08) rotate(-4deg); }
.pcard .pimg .ic-s{ stroke-width:1.4; }
.pcard .pimg .ic-d{ opacity:.3; }
.dt-img{ color:#fff; font-size:96px; }
.dt-img > .ic .ic-s{ stroke-width:1.2; }
.dt-img > .ic .ic-d{ opacity:.3; }
.dt-img .dt-close{ font-size:18px; display:flex; align-items:center; justify-content:center; }
.cart-line .th, .pair-row .pr-th{ color:#fff; font-size:26px; }
.cart-line .th .ic-d, .pair-row .pr-th .ic-d{ opacity:.3; }
.dcard .img{ color:#fff; }
.dcard .img > .ic{ font-size:46px; }
.pay-opt .pi{ font-size:24px; color: var(--lagon); }
.pay-opt.pay-wave .pi{ color:#1aa7ec; }
.radio-group span .ic, .seg button .ic, .chip .ic, .pgroup-title .ic, .also h3 .ic{ font-size:1.15em; margin-right:2px; }
.pgroup-title .ic{ color: var(--corail); }
.chip.active .ic-d{ opacity:.35; }
.empty2 .e{ color: var(--lagon); font-size:50px; }
.wave-pay .wave-logo{ color:#fff; font-size:20px; }
.pin-ico{ color: var(--lagon); font-size:44px; }
.info-card .row i, .card2 .row i, .row > i{ font-style:normal; color: var(--corail); font-size:18px; display:inline-flex; }
.link-row > i{ font-style:normal; color: var(--lagon); font-size:20px; display:inline-flex; }
.pstep button .ic{ font-size:15px; }
.pstep button .ic-s{ stroke-width:2.2; }
.mini-qty .rm{ font-size:19px; display:inline-flex; align-items:center; }
.pair-row .pr-inf small .ic{ font-size:13px; }
.pair-bar .pb-chips button .i{ display:inline-flex; color: var(--lagon); font-size:17px; }
#upsellEmoji{ color: var(--corail); }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:1px; }
.dot.ok{ background: var(--vert-ok, #2e9e6a); box-shadow: 0 0 0 3px rgba(46,158,106,.18); }
.dot.low{ background:#f0923c; box-shadow: 0 0 0 3px rgba(240,146,60,.2); }
.dot.out{ background:#555; }

/* ===================== Panier : nouveau design ===================== */
.cart-sheet{ padding-bottom:0; display:flex; flex-direction:column; }
.cart-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.cart-head h2{ margin:0 0 2px; font-size:26px; }
.cart-sub{ font-size:13px; color: var(--gris); font-weight:500; }
.cart-head-act{ display:flex; gap:8px; align-items:center; }
.ch-btn{ border:1px solid var(--ligne); background:#fff; color: var(--encre); border-radius:999px; height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; font: 600 13px 'Poppins', sans-serif; cursor:pointer; transition: transform .15s ease, background .2s ease; }
.ch-btn .ic{ font-size:17px; }
.ch-btn:active{ transform: scale(.94); }
.ch-btn.round{ width:38px; padding:0; justify-content:center; }
.ch-btn.danger{ color:#d9534f; border-color: rgba(217,83,79,.25); background:#fff7f6; }
.ch-btn[hidden]{ display:none; }

.empty-confirm{ display:flex; flex-direction:column; gap:10px; padding:14px; margin-bottom:12px; border-radius:18px; background: linear-gradient(135deg, #fff1ef, #fff8f6); border:1px solid rgba(217,83,79,.25); animation: popIn .3s var(--ease-out); }
.empty-confirm[hidden]{ display:none; }
.empty-confirm p{ margin:0; font-size:13.5px; color:#7a3b37; }
.empty-confirm div{ display:flex; gap:8px; }
.empty-confirm button{ flex:1; border:none; border-radius:12px; padding:11px; font: 700 13px 'Poppins', sans-serif; cursor:pointer; }
.ec-yes{ background:#d9534f; color:#fff; }
.ec-no{ background:#fff; color: var(--encre); border:1px solid var(--ligne) !important; }

.cart-summary{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:20px; border:1px solid var(--ligne); background: linear-gradient(135deg, #ffffff, #f6fbfa); cursor:pointer; text-align:left; box-shadow: var(--sh-1); transition: box-shadow .2s ease, transform .15s ease; }
.cart-summary:active{ transform: scale(.99); }
.cart-summary[hidden]{ display:none; }
.cs-thumbs{ display:flex; flex-shrink:0; }
.cs-thumbs i{ width:38px; height:38px; border-radius:12px; border:2px solid #fff; margin-left:-12px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; box-shadow: 0 3px 8px rgba(0,0,0,.08); font-style:normal; }
.cs-thumbs i:first-child{ margin-left:0; }
.cs-thumbs i img{ width:100%; height:100%; object-fit:cover; }
.cs-thumbs i.more{ background: var(--encre); font-size:12px; font-weight:700; }
.cs-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cs-txt b{ font-size:15px; color: var(--encre); }
.cs-txt small{ font-size:12px; color: var(--lagon); font-weight:600; }
.cs-chev{ width:32px; height:32px; border-radius:50%; background:#eef7f6; color: var(--lagon); display:flex; align-items:center; justify-content:center; font-size:18px; transition: transform .35s var(--ease-spring); }
.cart-summary.open .cs-chev{ transform: rotate(180deg); }
.cart-items-wrap{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.cart-items-wrap > div{ overflow:hidden; }
.cart-items-wrap.open{ grid-template-rows: 1fr; }
.cart-items-wrap.open > div{ padding-top:6px; }

.cart-opts{ margin-top:14px; padding:14px; border-radius:20px; background:#fff; border:1px solid var(--ligne); }
.cart-opts[hidden]{ display:none; }
.opt-title{ font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; color: var(--gris); margin: 2px 0 8px; }
.opt-title + .radio-group, .opt-title + .pay-grid{ margin-bottom:14px; }
.seg-pill{ background:#f4efe4; border-radius:16px; padding:4px; gap:4px !important; }
.seg-pill label{ flex:1; margin:0 !important; border:none !important; background:none !important; padding:0 !important; }
.seg-pill label span{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 8px; border-radius:12px; font-size:13.5px; font-weight:600; color: var(--gris); transition: all .25s var(--ease-out); }
.seg-pill input:checked + span{ background:#fff; color: var(--lagon); box-shadow: 0 3px 10px rgba(15,90,96,.12); }
#tableField{ margin-bottom:14px; }
.note-box{ border-top:1px dashed var(--ligne); padding-top:10px; }
.note-box summary{ cursor:pointer; list-style:none; font-size:13px; font-weight:600; color: var(--lagon); display:flex; align-items:center; gap:6px; }
.note-box summary::-webkit-details-marker{ display:none; }
.note-box summary .ic{ font-size:16px; }
.note-box[open] summary{ margin-bottom:8px; }
.note-box textarea{ width:100%; min-height:70px; animation: riseIn .3s var(--ease-out); }

.cart-foot{ position:sticky; bottom:0; margin: 14px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(255,250,241,.85), var(--sable) 30%); backdrop-filter: blur(6px); border-top:1px solid var(--ligne); z-index:2; }
.cf-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; font-size:14px; color: var(--gris); font-weight:600; }
.cf-total b{ font-size:22px; color: var(--encre); font-family:'Playfair Display', serif; }
.cf-link{ display:block; width:100%; background:none; border:none; margin-top:8px; padding:8px; font: 600 13px 'Poppins', sans-serif; color: var(--gris); cursor:pointer; }

/* Dernière étape : coordonnées facultatives */
.info-sheet{ text-align:center; }
.info-ico{ width:64px; height:64px; margin: 4px auto 8px; border-radius:22px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; background: linear-gradient(135deg, var(--turquoise), var(--lagon)); box-shadow: 0 12px 26px rgba(15,122,133,.3); animation: popIn .5s var(--ease-spring); }
.info-sheet h2{ margin-bottom:4px; }
.info-sub{ font-size:13.5px; color: var(--gris); margin: 0 0 16px; line-height:1.5; }
.info-sheet .field{ text-align:left; }
.info-sheet .field label{ display:flex; align-items:center; gap:6px; }
.info-sheet .field label em{ margin-left:auto; font-style:normal; font-size:11px; font-weight:600; color: var(--lagon); background:#eef7f6; padding:2px 8px; border-radius:999px; }
.btn-anon{ width:100%; margin-top:10px; padding:13px; border-radius:16px; border:1.5px dashed var(--ligne); background:#fff; color: var(--encre); font: 600 14px 'Poppins', sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.btn-anon .ic{ font-size:20px; color: var(--gris); }
.btn-anon:disabled, .btn-cta:disabled{ opacity:.6; }

/* ===== Vagues : boucle sans à-coup (motif périodique), 3 couches + houle ===== */
.splash2 .waves svg, .hero2 .sea svg{ will-change: transform; }
.splash2 .waves .w1{ animation: waveMove 16s linear infinite, waveBob 5s ease-in-out infinite; opacity:.32; }
.splash2 .waves .w2{ animation: waveMove 11s linear infinite reverse, waveBob 4s ease-in-out -1s infinite; opacity:.22; }
.splash2 .waves .w3{ animation: waveMove 24s linear infinite; opacity:.5; }
.hero2 .sea{ height:58px; }
.hero2 .sea .s3{ animation: waveMove 26s linear infinite reverse, waveBob 6s ease-in-out infinite; opacity:1; }
.hero2 .sea .s1{ animation: waveMove 15s linear infinite, waveBob 4.5s ease-in-out -2s infinite; opacity:1; }
.hero2 .sea .s2{ animation: waveMove 10s linear infinite reverse; opacity:1; }
@keyframes waveBob{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 3px; } }
@media (prefers-reduced-motion: reduce){ .splash2 .waves svg, .hero2 .sea svg{ animation:none !important; } }

/* ===== Police des noms (tuiles, catégories, produits) : Outfit ===== */
.mode-tile b, .cat-circle span, .pgroup-title, .pcard .pname, .dcard .nm, .sec-head h2, .page-title,
.dt-name, .cart-head h2, .sheet h2, .cs-txt b, .pair-row .pr-inf b, .cart-line .inf b, .info-sheet h2, .wave-head b{
  font-family: 'Outfit', 'Poppins', sans-serif !important; letter-spacing:-.2px; }
.mode-tile b{ font-weight:800; font-size:27px; }
.pgroup-title, .sec-head h2{ font-weight:700; }
.pcard .pname{ font-weight:600; font-size:12.5px; }
.page-title, .cart-head h2, .sheet h2, .dt-name{ font-weight:700; }

/* Bouton « Jouer en attendant » */
.play-cta{ display:flex; align-items:center; gap:12px; margin: 14px 0 10px; padding:12px 14px; border-radius:18px; text-decoration:none; color:#fff; text-align:left;
  background: linear-gradient(120deg, #2b2d6e, #5b3fd6 55%, var(--corail)); box-shadow: 0 10px 24px rgba(91,63,214,.35); position:relative; overflow:hidden; animation: popIn .5s var(--ease-spring) .6s both; }
.play-cta::after{ content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3s ease-in-out 1.2s infinite; }
.play-cta .ic{ font-size:34px; flex-shrink:0; animation: wiggle 2.4s ease-in-out infinite; }
.play-cta b{ display:block; font-family:'Outfit', sans-serif; font-size:16px; }
.play-cta small{ font-size:12px; opacity:.85; }
.play-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:12.5px; font-weight:700; color:#fff; padding:8px 12px; border-radius:999px; background: linear-gradient(120deg, #5b3fd6, var(--corail)); }
.play-btn .ic{ font-size:16px; }
@keyframes shine{ 0%{ transform: translateX(-100%); } 60%,100%{ transform: translateX(100%); } }
@keyframes wiggle{ 0%,100%{ transform: rotate(0); } 10%{ transform: rotate(-12deg); } 20%{ transform: rotate(10deg); } 30%{ transform: rotate(0); } }

/* Installer l'application (Android : 1 toucher · iPhone : guide) */
.install-card{ position:fixed; left:12px; right:12px; max-width:540px; margin:0 auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index:75;
  display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border-radius:20px; color:#fff;
  background: linear-gradient(120deg, #0a4a52, var(--lagon) 60%, #16a2a8); box-shadow: 0 16px 34px rgba(10,74,82,.35);
  transform: translateY(30px); opacity:0; transition: transform .45s var(--ease-spring), opacity .3s ease; }
body.has-cart .install-card{ bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.install-card.show{ transform:none; opacity:1; }
.install-card[hidden]{ display:none; }
.install-card .ii{ width:42px; height:42px; border-radius:13px; background: rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.install-card .it{ flex:1; min-width:0; }
.install-card .it b{ display:block; font-family:'Outfit', sans-serif; font-size:15px; }
.install-card .it small{ font-size:11.5px; opacity:.85; }
.install-card .ig{ border:none; border-radius:12px; padding:10px 12px; background:#fff; color: var(--lagon); font: 700 13px 'Poppins', sans-serif; display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
.install-card .ix{ border:none; background:none; color: rgba(255,255,255,.8); font-size:16px; padding:6px; cursor:pointer; }
.ios-sheet{ text-align:center; position:relative; }
.ios-steps{ list-style:none; padding:0; margin: 6px 0 18px; text-align:left; display:flex; flex-direction:column; gap:10px; }
.ios-steps li{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--ligne); border-radius:14px; padding:12px; font-size:14px; animation: riseIn .4s var(--ease-out) both; }
.ios-steps li:nth-child(2){ animation-delay:.1s; } .ios-steps li:nth-child(3){ animation-delay:.2s; }
.ios-steps .n{ width:28px; height:28px; border-radius:50%; background: var(--lagon); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.ios-steps .kbd{ margin-left:auto; color:#0a84ff; font-size:20px; display:inline-flex; }
.ios-arrow{ color:#0a84ff; font-size:30px; margin-top:12px; animation: arrowBounce 1.2s ease-in-out infinite; }
@keyframes arrowBounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } }

/* ===== Correctif tuiles Manger / Boire : appui net, sans délai ni coins qui « sautent » ===== */
.reveal.in.settled{ transition-delay:0ms; transition-duration:.18s, .18s, .25s; }
.mode-tile{ isolation:isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); -webkit-tap-highlight-color: transparent; }
.mode-tile.reveal.in.settled{ transition: transform .16s var(--ease-out), box-shadow .2s ease, opacity .2s; }
.mode-tile:hover .emo{ transform:none; }
@media (hover:hover){ .mode-tile:hover .emo{ transform: rotate(-10deg) scale(1.1); } }
.mode-tile.go{ animation: tileGo .17s var(--ease-out) both; }
.mode-tile.go .emo{ transform: rotate(-12deg) scale(1.15); }
@keyframes tileGo{ 0%{ transform: scale(1); } 45%{ transform: scale(.95); } 100%{ transform: scale(1.02); } }

/* ===== Choix du service : 3 options ===== */
.seg-pill label span{ padding:11px 4px; font-size:13px; gap:5px; white-space:nowrap; }
@media (max-width:360px){ .seg-pill label span .ic{ display:none; } }

/* ===== Livraison ===== */
.deliv{ margin: 4px 0 14px; padding:14px; border-radius:16px; background: linear-gradient(180deg, #f4fbfa, #fff); border:1px solid #d7ece9; animation: delivIn .35s var(--ease-out); }
@keyframes delivIn{ from{ opacity:0; transform: translateY(-6px); } }
.deliv-zone{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color: var(--lagon); background:#e8f6f4; border-radius:12px; padding:9px 11px; margin-bottom:12px; line-height:1.4; }
.deliv-zone .ic{ font-size:17px; flex-shrink:0; margin-top:1px; }
.deliv-2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:380px){ .deliv-2{ grid-template-columns:1fr; } }
.deliv .field{ margin-bottom:10px; }
.deliv label em{ font-style:normal; font-weight:500; color: var(--gris); font-size:11.5px; margin-left:4px; }
.deliv select{ width:100%; }
.deliv .field .err{ display:none; color:#c0392b; font-size:12px; margin-top:4px; }
.deliv .field.invalid .err{ display:block; }
.deliv .field.invalid input, .deliv .field.invalid select{ border-color:#e07a6a; background:#fff6f4; }
.deliv-gps{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:14px; border:1.5px dashed #9ccfc9; background:#fff; color: var(--lagon); font: 600 13px inherit; cursor:pointer; transition: all .2s; }
.deliv-gps .ic{ font-size:18px; }
.deliv-gps.ok{ border-style:solid; border-color: var(--vert-ok, #2e9e6a); color: var(--vert-ok, #2e9e6a); background:#eefaf3; }
.cf-fee{ display:flex; justify-content:space-between; font-size:13px; color: var(--gris); margin-bottom:4px; }
.cf-fee b{ font-weight:600; color: var(--texte, #23393b); }
.deliv-info{ margin:10px 0; padding:10px 12px; border-radius:12px; background:#f1f8f7; font-size:13px; line-height:1.45; text-align:left; }
.deliv-info a{ color: var(--lagon); font-weight:600; }

/* ===== Vagues « sur place » : elles ondulent et se balancent doucement, sans défiler vers la gauche ===== */
.splash2 .waves svg, .hero2 .sea svg{ left:0; width:200%; max-width:none; transform-origin: 50% 100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.splash2 .waves .w1{ animation: waveSway 6s ease-in-out infinite, waveBob 5s ease-in-out infinite; }
.splash2 .waves .w2{ animation: waveSway 4.6s ease-in-out -2s infinite alternate-reverse, waveBob 4s ease-in-out -1s infinite; }
.splash2 .waves .w3{ animation: waveSway 7.5s ease-in-out -1s infinite, waveBob 6s ease-in-out -3s infinite; }
.hero2 .sea .s3{ animation: waveSway 7s ease-in-out infinite, waveBob 6s ease-in-out infinite; }
.hero2 .sea .s1{ animation: waveSway 5.2s ease-in-out -2.4s infinite alternate-reverse, waveBob 4.5s ease-in-out -2s infinite; }
.hero2 .sea .s2{ animation: waveSway 6.2s ease-in-out -1.2s infinite, waveBob 5.5s ease-in-out -0.8s infinite; }
/* Balancement d'une demi-vague (4 % de la largeur) : toujours dans le cadre, aucun vide qui apparaît */
@keyframes waveSway{ 0%,100%{ transform: translate3d(0,0,0) scaleY(1); } 50%{ transform: translate3d(-4%,0,0) scaleY(1.12); } }

/* ===== Boissons : on voit toute la bouteille (pas de recadrage), sur fond blanc ===== */
.fit{ background:#fff !important; }
.fit img{ object-fit: contain !important; padding: 6%; box-sizing: border-box; background:#fff; }
.pcard .pimg.fit img{ padding: 7% 8%; }
.pcard:hover .pimg.fit img{ transform: scale(1.04); }
.dt-img.fit img{ padding: 4% 10%; animation:none; }
.cart-line .th.fit img, .pair-row .pr-th.fit img, .cs-thumbs i.fit img{ padding: 4%; }

/* ===== « À découvrir » : toutes les images dans la même case carrée (cartes alignées) ===== */
.dcard{ display:flex; flex-direction:column; }
.dcard .img{ position:relative; overflow:hidden; flex-shrink:0; }
.dcard .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease-out); }
.dcard .img.fit img{ object-fit:contain; padding: 14% 10% 8%; }
.dcard:hover .img img{ transform: scale(1.04); }
.dcard .body{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.discover{ align-items: stretch; }

/* ---------- LeMenu : réservation de table ---------- */
.rs-home{ display:flex; align-items:center; gap:12px; width:calc(100% - 32px); margin:14px 16px 4px; padding:14px; border:0; border-radius:20px; text-align:left;
  background: linear-gradient(135deg, var(--lagon-dark), var(--lagon)); color:#fff; box-shadow: var(--sh-2); cursor:pointer; }
.rs-home[hidden]{ display:none; }
.rs-home-ic{ width:44px; height:44px; flex:none; border-radius:14px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:22px; }
.rs-home-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rs-home-txt b{ font-size:15.5px; }
.rs-home-txt small{ font-size:12.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-home-go{ flex:none; background: var(--corail); color:#fff; font-weight:700; font-size:13px; padding:9px 14px; border-radius:999px; box-shadow:0 6px 14px rgba(255,111,79,.35); }
.rs-sheet{ max-height:92vh; overflow-y:auto; }
.rs-lbl{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color: var(--gris); margin:16px 0 8px; }
.rs-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rs-chip{ position:relative; border:1.5px solid var(--ligne); background:#fff; color: var(--encre); font-weight:600; font-size:14px; padding:10px 14px; border-radius:14px; cursor:pointer; }
.rs-chip.on{ border-color: var(--lagon); background:#e8f5f6; color: var(--lagon-dark); }
.rs-other input{ position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.rs-slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:8px; max-height:190px; overflow-y:auto; padding:2px; }
.rs-slot{ border:1.5px solid var(--ligne); background:#fff; color: var(--encre); font-weight:600; font-size:14px; padding:10px 0; border-radius:12px; cursor:pointer; }
.rs-slot.on{ border-color: var(--corail); background: var(--corail); color:#fff; }
.rs-people{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.rs-people b{ font-size:26px; min-width:34px; text-align:center; color: var(--encre); }
.rs-people span{ color: var(--gris); flex:1; }
.rs-pm{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ligne); background:#fff; font-size:22px; color: var(--lagon-dark); cursor:pointer; }
.rs-back{ border:0; background:none; color: var(--lagon); font-weight:600; font-size:14px; padding:0 0 6px; cursor:pointer; }
.rs-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color: var(--gris); margin:-4px 0 12px; }
.rs-legend i{ display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:5px; vertical-align:-1px; }
.lg-libre{ background:#2f9e6e; } .lg-prise{ background:#e6584f; } .lg-petite{ background:#cfc6b6; }
.rs-plan{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin-bottom:10px; }
.rs-table{ border-radius:16px; padding:14px 6px; border:2px solid; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; cursor:pointer; transition: transform .15s ease; }
.rs-table b{ font-size:14px; overflow-wrap:anywhere; text-align:center; }
.rs-table small{ font-size:11.5px; }
.rs-table.libre{ background:#eaf7f0; border-color:#2f9e6e; color:#1d6b49; }
.rs-table.libre:active{ transform:scale(.96); }
.rs-table.prise{ background: repeating-linear-gradient(45deg, #fdecea, #fdecea 6px, #fbe0dd 6px, #fbe0dd 12px); border-color:#f1b8b2; color:#a33a36; cursor:not-allowed; }
.rs-table.petite{ background:#f4f0e8; border-color:#e2dac9; color:#9a9184; cursor:not-allowed; }
.rs-recap{ background: var(--sable-2); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; margin:6px 0 14px; color: var(--encre); font-size:14px; }
.rs-recap b{ font-size:17px; }
.rs-recap.big{ text-align:center; }
.rs-recap.big b{ font-size:22px; color: var(--lagon-dark); }
.rs-code{ text-align:center; color: var(--gris); font-size:13px; margin:4px 0 8px; }
.rs-code b{ display:block; font:800 30px 'Outfit', sans-serif; letter-spacing:6px; color: var(--encre); margin-top:2px; }
.rs-help{ font-size:12.5px; color: var(--gris); text-align:center; margin:10px 0; }
.rs-cancel{ display:block; margin:10px auto 0; border:0; background:none; color: var(--rouge-alerte); font-weight:600; font-size:13.5px; cursor:pointer; padding:8px; }
.rs-cancel.sm{ margin:0; font-size:12.5px; }
.rs-mine{ margin-top:18px; border-top:1px solid var(--ligne); }
.rs-mine-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--ligne); }
.rs-mine-row b{ display:block; color: var(--encre); }
.rs-mine-row span{ font-size:12.5px; color: var(--gris); }
.rs-empty{ text-align:center; color: var(--gris); font-size:14px; padding:12px 0; }
.rs-loading{ text-align:center; color: var(--gris); padding:40px 0; }
.rs-ok{ font-size:34px; font-weight:800; }

/* Réservation : retrouver, ticket, capture d'écran */
.rs-find-home{ display:block; margin:6px auto 0; border:0; background:none; color: var(--gris); font-size:13px; padding:6px 10px; cursor:pointer; }
.rs-find-home[hidden]{ display:none; }
.rs-find-home b, .rs-find-link b{ color: var(--lagon); }
.rs-find-link{ display:block; width:100%; margin:16px 0 4px; border:1.5px dashed var(--ligne); background:#fff; border-radius:14px; padding:12px; color: var(--gris); font-size:13.5px; cursor:pointer; }
.rs-ghost{ display:block; width:100%; margin-top:10px; border:1.5px solid var(--ligne); background:#fff; color: var(--encre); font-weight:600; font-size:14px; padding:13px; border-radius:16px; cursor:pointer; }
.rs-found-acts{ display:flex; gap:10px; align-items:center; margin:-4px 0 18px; }
.rs-found-acts .rs-ghost{ margin:0; flex:1; padding:10px; }
.rs-ticket{ position:relative; overflow:hidden; border-radius:20px; background:#fff; box-shadow: var(--sh-2); margin:10px 0 14px; text-align:center; }
.rs-ticket-top{ background: linear-gradient(135deg, var(--lagon-dark), var(--lagon)); color:#fff; font:700 18px 'Poppins', sans-serif; padding:14px 12px 12px; border-bottom:4px solid var(--corail); }
.rs-ticket-top small{ display:block; font-weight:500; font-size:12.5px; opacity:.85; }
.rs-ticket-main{ padding:14px 12px 10px; display:flex; flex-direction:column; gap:2px; color: var(--encre); }
.rs-ticket-main b{ font:800 26px 'Outfit', sans-serif; color: var(--lagon-dark); }
.rs-ticket-main span{ font-size:14px; }
.rs-ticket-code{ border-top:2px dashed var(--ligne); margin:0 14px; padding:10px 0 14px; color: var(--gris); font-size:12px; }
.rs-ticket-code b{ display:block; font:800 34px 'Outfit', sans-serif; letter-spacing:7px; color: var(--encre); }
.rs-ticket::after{ content:""; position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.rs-ticket.flash::after{ animation: rsFlash .7s ease-out; }
.rs-ticket.flash{ animation: rsSnap .7s var(--ease-spring); }
@keyframes rsFlash{ 0%{ opacity:0; } 15%{ opacity:.95; } 100%{ opacity:0; } }
@keyframes rsSnap{ 0%{ transform:scale(1); } 20%{ transform:scale(.96); } 60%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
.rs-shot{ display:flex; align-items:center; gap:12px; background:#fff4e0; border:1.5px solid #f6d9a6; color:#7a4d06; border-radius:16px; padding:12px 14px; animation: rsPop .5s var(--ease-spring); }
.rs-shot-txt{ display:flex; flex-direction:column; font-size:12.5px; }
.rs-shot-txt b{ font-size:14.5px; }
.rs-shot-phone{ position:relative; flex:none; width:30px; height:48px; border:3px solid #7a4d06; border-radius:8px; animation: rsShake 2.4s ease-in-out infinite; }
.rs-shot-phone::before, .rs-shot-phone::after{ content:""; position:absolute; top:10px; width:5px; height:12px; background:#7a4d06; border-radius:2px; }
.rs-shot-phone::before{ left:-8px; } .rs-shot-phone::after{ right:-8px; }
.rs-shot-phone i{ position:absolute; inset:3px; border-radius:3px; background:#fff; opacity:0; animation: rsScreen 2.4s ease-in-out infinite; }
@keyframes rsShake{ 0%, 60%, 100%{ transform:none; } 30%{ transform:scale(.92); } }
@keyframes rsScreen{ 0%, 26%{ opacity:0; } 32%{ opacity:1; } 52%, 100%{ opacity:0; } }
@keyframes rsPop{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .rs-shot-phone, .rs-shot-phone i, .rs-ticket.flash, .rs-ticket.flash::after{ animation:none; } }

/* ---------- Modifier une commande envoyée ---------- */
.modify-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px; padding:10px 12px; border-radius:12px; border:1.5px dashed var(--lagon); background:#f2fbfa; color: var(--lagon); font:600 13.5px 'Poppins', sans-serif; cursor:pointer; }
.modify-btn .ic{ width:16px; height:16px; }
.modify-btn:active{ transform:scale(.98); }
#cEditBanner{ display:flex; align-items:center; gap:12px; background:#fff8e6; border:1px solid #f0c040; border-radius:16px; padding:12px 14px; margin:2px 0 12px; }
#cEditBanner[hidden]{ display:none; }
#cEditBanner div{ flex:1; min-width:0; }
#cEditBanner b{ display:block; font-size:14.5px; color: var(--encre); }
#cEditBanner small{ display:block; font-size:12px; color: var(--gris); line-height:1.35; margin-top:2px; }
#cEditBanner button{ flex:none; }

/* ---------- v12 : guide d'installation iPhone (4 étapes animées) ---------- */
.ios-steps4 li{ position:relative; }
.ios-steps4 li:nth-child(4){ animation-delay:.3s; } .ios-steps4 li:nth-child(5){ animation-delay:.4s; }
.ios-steps4 li > span:nth-child(2){ flex:1; line-height:1.35; }
/* chaque étape s'illumine à tour de rôle */
.ios-steps4 li:not(.ok)::after{ content:''; position:absolute; inset:-1px; border-radius:14px; border:2px solid #0a84ff; opacity:0; animation: iosStep 6s ease-in-out infinite; pointer-events:none; }
.ios-steps4 li:nth-child(2)::after{ animation-delay:1.5s; } .ios-steps4 li:nth-child(3)::after{ animation-delay:3s; } .ios-steps4 li:nth-child(4)::after{ animation-delay:4.5s; }
@keyframes iosStep{ 0%,100%{ opacity:0; } 5%,22%{ opacity:1; } 27%{ opacity:0; } }
.ios-steps4 li.ok .n{ background: #2fbf71; }
.ios-steps .kbd.dots{ font-weight:900; letter-spacing:1px; font-size:16px; background:#eef4ff; border-radius:999px; padding:2px 9px; }
.ios-sw{ width:34px; height:20px; border-radius:999px; background:#34c759; position:relative; display:inline-block; }
.ios-sw::after{ content:''; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); }
/* flèche vers le bouton « ••• » de Safari, en bas à droite */
.ios-sheet{ position:relative; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
.ios-arrow.ios-arrow-r{ position:absolute; right:18px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); margin:0; display:flex; align-items:center; gap:6px; z-index:5; font-size:24px; }
.ios-arrow-r::before{ content:'Ici, en bas à droite'; font-size:12px; font-weight:600; color:#0a84ff; }
.ios-arrow-r span{ font-weight:900; font-size:14px; background:#0a84ff; color:#fff; border-radius:999px; padding:3px 9px; letter-spacing:1px; }
@media (prefers-reduced-motion: reduce){ .ios-steps4 li::after, .ios-arrow-r{ animation:none !important; } .ios-steps4 li:not(.ok)::after{ opacity:0; } }

/* ---------- v13 : barre « verre » C2 (le nom s'affiche sur l'onglet actif) ---------- */
.tabbar2.pill-nav > button.active{ flex:0 0 auto; padding:0 18px !important; }
.tabbar2.pill-nav > button.active > span:not(.icw){ position:static; width:auto; height:auto; clip:auto; overflow:visible; animation: pillLbl .4s ease; }
@keyframes pillLbl{ from{ opacity:0; transform: translateX(-6px); } to{ opacity:1; transform:none; } }
body.client{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.client.has-cart{ padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
.cart-bar, .pair-bar{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
body.has-cart .pair-bar{ bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.install-card{ bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.has-cart .install-card{ bottom: calc(162px + env(safe-area-inset-bottom, 0px)); }
/* Logo Wave dans les blocs de paiement */
.pay-opt .pi img.ic-wave{ width:28px; height:28px; border-radius:8px; vertical-align:0; }
.wave-pay .wave-logo{ background:none !important; width:auto; height:auto; }
.wave-pay .wave-logo img.ic-wave{ width:40px; height:40px; border-radius:12px; vertical-align:0; box-shadow: 0 6px 14px rgba(8,120,170,.3); }
.btn-wave{ display:flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(135deg, #3fd0ff, #1aa7ec); }
.btn-wave[hidden]{ display:none; }
.btn-wave img.ic-wave{ width:24px; height:24px; border-radius:7px; vertical-align:0; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.pay-hint img.ic-wave{ margin-right:2px; }
@media (prefers-reduced-motion: reduce){ .tabbar2.pill-nav > button.active > span{ animation:none; } }
/* barre panier cachée : elle ne doit plus transparaître sous la barre en verre */
.cart-bar{ transition: transform .5s var(--ease-spring), opacity .25s ease; }
.cart-bar:not(.show){ transform: translateY(calc(100% + 130px)); opacity:0; pointer-events:none; }
/* Bouton « Payer avec Wave » : ouvre l'application Wave */
.wave-pay .btn-wave{ margin:12px 0 10px; font-size:15px; padding:14px; box-shadow: 0 10px 22px rgba(26,167,236,.35); }
.btn-wave-sm{ margin:8px 0 10px; padding:10px 14px; font-size:13.5px; border-radius:999px; }