:root{--cp-accent:#a855f7;--cp-accent-2:#7c3aed;--cp-neon:#c084fc;--cp-accent-rgb:168,85,247;--cp-accent2-rgb:124,58,237;--cp-neon-rgb:192,132,252;}
/* ============================================================
   CP — style O'SNOW (logo en fond, bannières catégories, vidéos loop)
   Isolé sous .cp-page → n'affecte pas l'admin.
   ============================================================ */
/* Reset box-sizing : les pages cp ne chargent pas app.min.css, donc sans
   ça width:100% + padding débordait à droite (contenu décalé). */
.cp-page *, .cp-page *::before, .cp-page *::after{ box-sizing:border-box; }

.cp-page{
  margin:0;
  background:#04060e;
  color:#e7ecf3;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}

/* Fond logo plein écran */
.cp-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:100% 100%; background-position:center top; background-repeat:no-repeat;
}
.cp-bg-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,7,19,.55) 0%, rgba(10,7,19,.8) 40%, rgba(10,7,19,.94) 100%);
}
/* Le fond image s'arrête pile au-dessus de la barre du bas (toutes les pages) →
   l'image n'est jamais masquée derrière le footer. */
.cp-bg,
.cp-bg-overlay{ bottom:var(--cp-footer-h, 72px); }

/* Shell : contenu qui défile, footer épinglé (adapté Telegram) */
html.cp-html{ height:100%; overflow:hidden; }
body.cp-page{
  display:flex; flex-direction:column;
  height:100dvh; height:var(--tg-viewport-stable-height,100dvh);
  max-height:var(--tg-viewport-stable-height,100dvh);
  overflow:hidden;
}
.cp-main{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding: max(14px, env(safe-area-inset-top)) 14px 16px;
  max-width:720px; margin:0 auto; width:100%;
}

/* Hero */
.cp-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 8px 14px; }
.cp-hero-logo{
  width:clamp(104px,27vw,140px); aspect-ratio:1/1; border-radius:50%;
  object-fit:cover; border:1px solid rgba(255,255,255,.12); background:#0a1526;
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 60px rgba(var(--cp-accent-rgb),.18);
}
.cp-hero-title{
  margin:14px 0 4px; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:1px;
  color:#ffffff; -webkit-text-fill-color:#ffffff;   /* pas de dégradé : les emojis gardent leur couleur */
}
.cp-hero-sub{ margin:0 0 10px; font-size:clamp(13px,3.4vw,15px); color:rgba(220,228,240,.8); font-weight:600; }
.cp-hero-meta{ margin:0 0 14px; font-size:12.5px; font-weight:700; color:rgba(220,228,240,.72); }
.cp-label{
  display:inline-block; margin:2px 0 4px; padding:8px 20px;
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(var(--cp-accent-rgb),.08); border:1.5px solid rgba(var(--cp-neon-rgb),.95); border-radius:999px; color:#fff;
  box-shadow:0 0 8px rgba(var(--cp-accent-rgb),.75), 0 0 20px rgba(var(--cp-accent-rgb),.45), inset 0 0 9px rgba(var(--cp-accent-rgb),.28);
  text-shadow:0 0 7px rgba(var(--cp-neon-rgb),.85);
}

/* Grille catégories (bannières) */
.cp-cats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
/* Nombre impair de catégories (3, 5…) : la dernière (ex. FESTIF) est centrée en bas */
.cp-cats:has(.cp-cat:nth-child(odd):last-child) .cp-cat:last-child{
  grid-column:1 / -1; justify-self:center; width:calc(50% - 6px);
}
.cp-cat{
  position:relative; display:block; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#0e1c34,#0a1424); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.45); text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
}
.cp-cat:active{ transform:scale(.97); }
.cp-cat-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-cat-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:900; background:linear-gradient(135deg,#123052,#0c1a30); color:rgba(255,255,255,.6);
}
.cp-cat-label{
  position:absolute; left:10px; bottom:10px; font-weight:800; font-size:13px; letter-spacing:.04em;
  padding:5px 11px; background:rgba(12,8,22,.78); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; text-transform:uppercase;
}

/* Entête page catégorie */
.cp-cat-hero{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 8px 12px; }
.cp-back{
  position:absolute; left:0; top:6px; padding:8px 15px; font-size:14px; font-weight:800;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.22),rgba(var(--cp-accent2-rgb),.12));
  border:1.5px solid rgba(var(--cp-neon-rgb),.7); border-radius:999px;
  box-shadow:0 0 10px rgba(var(--cp-accent-rgb),.35);
}
.cp-back:active{ transform:scale(.95); }
.cp-cat-title{
  margin:2px 0 6px; font-size:clamp(22px,6vw,30px); font-weight:900; letter-spacing:.5px;
  color:#ffffff; -webkit-text-fill-color:#ffffff;   /* pas de dégradé : emojis en couleur */
}
.cp-cat-count{ margin:0 0 8px; font-size:13px; color:rgba(220,228,240,.7); font-weight:600; }

/* Grille produits */
.cp-products{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.cp-prod{
  display:block; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#0e1c34,#0a1424); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 6px 18px rgba(0,0,0,.4); text-decoration:none; color:inherit;
  transition:transform .16s ease;
}
.cp-prod:active{ transform:scale(.97); }
.cp-prod-media{ position:relative; width:100%; aspect-ratio:1/1; background:#0a1526; overflow:hidden; }
.cp-prod-media img, .cp-prod-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-prod-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:38px; color:rgba(255,255,255,.3); }
.cp-prod-badge{
  position:absolute; top:8px; right:8px; padding:3px 9px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.14); border-radius:999px; backdrop-filter:blur(4px);
}
.cp-prod-price{
  position:absolute; top:8px; left:8px; padding:4px 9px; font-size:11px; font-weight:900; color:#f5ecff;
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.95),rgba(var(--cp-accent2-rgb),.95)); border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
}
.cp-prod-title{
  padding:10px 12px 12px; font-size:14px; font-weight:800; line-height:1.3; letter-spacing:.2px;
  overflow-wrap:anywhere; word-break:break-word;
}

.cp-empty{ text-align:center; padding:40px 20px; color:rgba(220,228,240,.6); font-weight:600; font-size:14px; }

/* Liens (cartes) */
.cp-link-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.cp-link{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px;
  background:rgba(12,22,40,.72); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.4); text-decoration:none; color:inherit;
  transition:transform .16s ease, background .16s ease;
}
.cp-link:active{ transform:scale(.985); background:rgba(20,28,40,.85); }
.cp-link-ico{
  flex:0 0 auto; width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg,#123056,#0b1830); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.cp-link-text{ flex:1; min-width:0; }
.cp-link-title{ font-weight:900; font-size:15px; letter-spacing:.03em; margin-bottom:2px; }
.cp-link-sub{ font-size:13px; color:rgba(220,228,240,.68); font-weight:600; }

/* Bloc info (services / secteur / horaires) */
.cp-info-card{
  border-radius:18px; padding:16px 16px 14px; margin-bottom:12px;
  background:linear-gradient(180deg,rgba(63,220,255,.06),rgba(255,255,255,0) 60%),rgba(12,24,44,.72);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.cp-info-card h3{ margin:0 0 8px; font-size:16px; font-weight:900; }
.cp-info-card p{ margin:6px 0; color:#d7dde7; font-weight:600; font-size:14px; line-height:1.5; }
.cp-info-card ul{ margin:8px 0 0; padding-left:18px; color:#d7dde7; line-height:1.6; font-weight:600; font-size:14px; }
.cp-info-card li{ margin:5px 0; }

/* Bottom nav */
.cp-tabs{
  position:relative; z-index:2; flex:0 0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(6,9,14,.92); border-top:1px solid rgba(255,255,255,.06); backdrop-filter:blur(14px);
}
.cp-tabs-4{ grid-template-columns:repeat(4,1fr); }
.cp-tabs-4 .cp-tab{ font-size:10.5px; padding:8px 3px; }
.cp-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px 6px; border-radius:12px; color:rgba(220,228,240,.55); font-weight:700; font-size:11px;
  text-decoration:none; transition:color .14s ease, background .14s ease;
}
.cp-tab.active{
  color:#fff; border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--cp-accent-rgb),.26), rgba(var(--cp-accent2-rgb),.13));
  text-shadow:0 0 8px rgba(var(--cp-neon-rgb),.9);
  box-shadow:
    inset 0 0 0 1.6px rgba(var(--cp-neon-rgb),.95),
    0 0 10px rgba(var(--cp-accent-rgb),.75), 0 0 22px rgba(var(--cp-accent-rgb),.5),
    inset 0 0 10px rgba(var(--cp-accent-rgb),.3);
  animation:cpTabNeon 2.1s ease-in-out infinite;
}
.cp-tab-ico{ position:relative; font-size:20px; line-height:1; }
.cp-tab-badge{
  position:absolute; top:-8px; right:-12px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2)); color:#fff; font-size:10px; font-weight:900;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2);
}

/* ============================================================
   ÉCRANS COURTS (mobiles) — compacte le hero pour que la grille
   des catégories et le footer restent visibles sans surcharge.
   ============================================================ */
@media (max-height:740px){
  .cp-main{ padding-top:max(8px, env(safe-area-inset-top)); }
  .cp-hero{ padding:2px 8px 8px; }
  .cp-hero-logo{ width:clamp(72px,19vw,104px); }
  .cp-hero-title{ margin:8px 0 3px; font-size:clamp(20px,6vw,28px); }
  .cp-hero-sub{ margin:0 0 6px; font-size:clamp(12px,3.2vw,14px); }
  .cp-hero-meta{ margin:0 0 8px; }
  .cp-label{ padding:6px 16px; margin:0; }
  .cp-cats{ margin-top:10px; gap:10px; }
  .cp-cat-hero{ padding:2px 8px 8px; }
  .cp-tab-ico{ font-size:18px; }
  .cp-tabs{ padding:6px 12px calc(6px + env(safe-area-inset-bottom)); }
}
@media (max-height:600px){
  .cp-hero-logo{ width:clamp(60px,16vw,84px); }
  .cp-hero-title{ font-size:clamp(18px,5.5vw,24px); }
  .cp-cats{ margin-top:8px; }
}

/* ============================================================
   CENTRAGE MOBILE — tout centré (textes + actions)
   ============================================================ */
.cp-main{ text-align:center; }

/* Labels catégories : centrés en bas de la bannière */
.cp-cat-label{
  left:50% !important; right:auto !important; transform:translateX(-50%);
  width:max-content; max-width:88%; text-align:center;
}

/* Titres produits centrés */
.cp-prod-title{ text-align:center; }

/* Cartes liens : icône en haut, texte centré dessous */
.cp-link{ flex-direction:column; text-align:center; gap:10px; padding:18px 16px; }
.cp-link-ico{ margin:0 auto; }
.cp-link-text{ text-align:center; width:100%; }

/* Cartes info : tout centré, puces sans retrait */
.cp-info-card{ text-align:center; }
.cp-info-card h3{ text-align:center; }
.cp-info-card ul{ list-style:none; padding-left:0; margin:8px auto 0; max-width:340px; }
.cp-info-card li{ margin:6px 0; }

/* Entête catégorie : back centré au-dessus du titre sur mobile */
@media (max-width:520px){
  .cp-back{ position:static !important; margin:0 auto 8px; display:inline-flex; }
  .cp-cat-hero{ padding-top:2px; }
}

/* ============================================================
   ANIMATIONS — entrées, flottaison, halo, aurora (100% GPU)
   ============================================================ */

/* Orbes violettes qui dérivent en fond */
.cp-bg-overlay::before, .cp-bg-overlay::after{
  content:""; position:fixed; border-radius:50%; filter:blur(60px); pointer-events:none;
  will-change:transform, opacity;
}
.cp-bg-overlay::before{
  width:60vw; height:60vw; left:-12%; top:8%;
  background:radial-gradient(closest-side, rgba(var(--cp-accent-rgb),.4), transparent 70%);
  animation:cpOrbA 16s ease-in-out infinite;
}
.cp-bg-overlay::after{
  width:55vw; height:55vw; right:-12%; bottom:6%;
  background:radial-gradient(closest-side, rgba(var(--cp-accent2-rgb),.34), transparent 70%);
  animation:cpOrbB 20s ease-in-out infinite;
}
@keyframes cpOrbA{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7} 50%{transform:translate3d(8%,-6%,0) scale(1.15);opacity:1} }
@keyframes cpOrbB{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.6} 50%{transform:translate3d(-7%,7%,0) scale(1.12);opacity:.95} }

/* Logo héro : pop d'entrée + flottaison + halo pulsant */
.cp-hero-logo{
  animation: cpPop .6s cubic-bezier(.2,.9,.25,1.3) both, cpFloat 5.5s ease-in-out 0.6s infinite;
}
.cp-hero{ position:relative; }
.cp-hero::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(150px,40vw,200px); aspect-ratio:1/1;
  border-radius:50%; background:radial-gradient(closest-side, rgba(var(--cp-accent-rgb),.45), transparent 70%);
  filter:blur(26px); z-index:0; animation:cpHalo 3s ease-in-out infinite; pointer-events:none;
}
.cp-hero > *{ position:relative; z-index:1; }
@keyframes cpPop{ 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes cpFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes cpHalo{ 0%,100%{opacity:.45;transform:translateX(-50%) scale(.9)} 50%{opacity:.9;transform:translateX(-50%) scale(1.08)} }

/* Textes du hero : montée en fondu échelonnée */
.cp-hero-title{ animation:cpFadeUp .55s var(--cp-e,cubic-bezier(.22,.61,.36,1)) .15s both; }
.cp-hero-sub{ animation:cpFadeUp .55s cubic-bezier(.22,.61,.36,1) .28s both; }
.cp-label{ animation:cpPopIn .5s cubic-bezier(.2,.9,.25,1.3) .4s both, cpNeon 2.6s ease-in-out 1s infinite; }
@keyframes cpFadeUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes cpPopIn{ 0%{opacity:0;transform:translateY(10px) scale(.85)} 100%{opacity:1;transform:none} }
@keyframes cpNeon{
  0%,100%{ box-shadow:0 0 7px rgba(var(--cp-accent-rgb),.6), 0 0 16px rgba(var(--cp-accent-rgb),.35), inset 0 0 8px rgba(var(--cp-accent-rgb),.22); }
  50%{ box-shadow:0 0 13px rgba(var(--cp-neon-rgb),.95), 0 0 30px rgba(var(--cp-accent-rgb),.6), inset 0 0 11px rgba(var(--cp-accent-rgb),.3); }
}

/* Bannières catégories : apparition 3D échelonnée + interactions */
.cp-cats{ perspective:1000px; }
.cp-cat{ animation:cpCardIn .6s cubic-bezier(.2,.9,.25,1.12) both; }
.cp-cat:nth-child(1){ animation-delay:.10s } .cp-cat:nth-child(2){ animation-delay:.18s }
.cp-cat:nth-child(3){ animation-delay:.26s } .cp-cat:nth-child(4){ animation-delay:.34s }
.cp-cat:nth-child(5){ animation-delay:.42s } .cp-cat:nth-child(6){ animation-delay:.50s }
.cp-cat:nth-child(n+7){ animation-delay:.55s }
.cp-cat-img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.cp-cat:active{ transform:scale(.96); }
@media (hover:hover){ .cp-cat:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(var(--cp-accent-rgb),.3); } .cp-cat:hover .cp-cat-img{ transform:scale(1.06); } }
@keyframes cpCardIn{ 0%{opacity:0;transform:translateY(24px) rotateX(10deg) scale(.97)} 100%{opacity:1;transform:none} }

/* Produits : même apparition échelonnée */
.cp-products{ perspective:1000px; }
.cp-prod{ animation:cpCardIn .55s cubic-bezier(.2,.9,.25,1.12) both; }
.cp-prod:nth-child(1){ animation-delay:.06s } .cp-prod:nth-child(2){ animation-delay:.12s }
.cp-prod:nth-child(3){ animation-delay:.18s } .cp-prod:nth-child(4){ animation-delay:.24s }
.cp-prod:nth-child(5){ animation-delay:.30s } .cp-prod:nth-child(6){ animation-delay:.36s }
.cp-prod:nth-child(n+7){ animation-delay:.4s }
.cp-prod-media img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){ .cp-prod:hover .cp-prod-media img{ transform:scale(1.06); } }

/* Cartes liens + info : slide-in échelonné */
.cp-link, .cp-info-card{ animation:cpFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.cp-info-card:nth-of-type(1){ animation-delay:.06s } .cp-info-card:nth-of-type(2){ animation-delay:.12s }
.cp-info-card:nth-of-type(3){ animation-delay:.18s } .cp-info-card:nth-of-type(4){ animation-delay:.24s }
.cp-info-card:nth-of-type(5){ animation-delay:.30s }
.cp-link:nth-child(1){ animation-delay:.34s } .cp-link:nth-child(2){ animation-delay:.40s }
.cp-link:nth-child(3){ animation-delay:.46s } .cp-link:nth-child(4){ animation-delay:.52s }

/* Badges prix : petit pop */
.cp-prod-price{ animation:cpPopIn .4s cubic-bezier(.2,.9,.25,1.3) .3s both; }

/* Onglet actif : pastille NÉON violette (sur l'élément → jamais masquée) */
.cp-tab.active{ position:relative; }
@keyframes cpTabNeon{
  0%,100%{ box-shadow: inset 0 0 0 1.6px rgba(var(--cp-neon-rgb),.9), 0 0 8px rgba(var(--cp-accent-rgb),.6), 0 0 16px rgba(var(--cp-accent-rgb),.35), inset 0 0 8px rgba(var(--cp-accent-rgb),.24); }
  50%{ box-shadow: inset 0 0 0 1.6px rgba(var(--cp-neon-rgb),1), 0 0 16px rgba(var(--cp-neon-rgb),.98), 0 0 34px rgba(var(--cp-accent-rgb),.65), inset 0 0 12px rgba(var(--cp-accent-rgb),.36); }
}
.cp-tab:active{ transform:scale(.92); }
.cp-tab-ico{ transition:transform .2s cubic-bezier(.2,.9,.25,1.3); }
.cp-tab.active .cp-tab-ico{ transform:translateY(-2px) scale(1.1); filter:drop-shadow(0 0 6px rgba(var(--cp-neon-rgb),.9)); }

/* Retour catégorie : petit slide */
.cp-back{ animation:cpFadeUp .4s ease both; }
.cp-cat-title{ animation:cpFadeUp .5s cubic-bezier(.22,.61,.36,1) .1s both; }
.cp-cat-count{ animation:cpFadeUp .5s cubic-bezier(.22,.61,.36,1) .2s both; }

@media (prefers-reduced-motion: reduce){
  .cp-cat,.cp-prod,.cp-link,.cp-tab,.cp-info-card,.cp-hero-logo,.cp-hero-title,.cp-hero-sub,
  .cp-label,.cp-cat-title,.cp-cat-count,.cp-prod-price,.cp-back,
  .cp-hero::before,.cp-bg-overlay::before,.cp-bg-overlay::after,.cp-tab.active{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ============================================================
   POPUP DE COMMANDE (cp-modal) — centré dans le viewport téléphone
   ============================================================ */
.cp-modal{
  position:fixed;
  left:0; right:0; top:0;
  height:100vh;
  height:100dvh;
  height:var(--tg-viewport-stable-height,100dvh);
  z-index:2147483000;
  display:none; align-items:center; justify-content:center;
  padding:16px;
  overscroll-behavior:contain;
}
.cp-modal.open{ display:flex; }
.cp-modal-scrim{ position:absolute; inset:0; background:rgba(4,3,10,.72); animation:cpFade .25s ease both; }
.cp-modal-card{
  position:relative; z-index:1;
  width:min(94vw,460px); max-height:88dvh; max-height:88svh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),#160f2c;
  border:1px solid rgba(255,255,255,.1); border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--cp-accent-rgb),.2);
  padding:22px 18px 20px;
  text-align:center;
  animation:cpModalIn .4s cubic-bezier(.2,.9,.25,1.12) both;
}
@keyframes cpFade{ from{opacity:0} to{opacity:1} }
@keyframes cpModalIn{ 0%{opacity:0;transform:translateY(18px) scale(.94)} 100%{opacity:1;transform:none} }
.cp-modal-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff;
  font-weight:900; font-size:14px; cursor:pointer; display:grid; place-items:center;
}
.cp-modal-title{ margin:0 0 14px; font-size:20px; font-weight:900; text-align:center; }
/* Formulaire dans la popup : tout centré, champs pleine largeur */
.cp-modal-card .form-grid{ display:grid; gap:12px; text-align:center; }
.cp-modal-card label{ display:grid; gap:5px; text-align:center; }
.cp-modal-card .label-title{ font-weight:800; font-size:14px; }
.cp-modal-card .hint{ color:var(--pr-muted,#93a3bd); font-size:12px; }
.cp-modal-card input, .cp-modal-card select, .cp-modal-card textarea{ width:100%; text-align:center; }
.cp-modal-card textarea{ text-align:left; }
.cp-modal-card .btn.primary.large{ width:100%; }

/* ============================================================
   CENTRAGE MOBILE FORT — toutes les pages present.css (panier/detail)
   ============================================================ */
html, body{ overflow-x:hidden; }
main.page{ width:100%; max-width:640px; margin-left:auto; margin-right:auto; align-self:center; }
main.page > *{ text-align:center; }
.cp-main{ align-self:center; }
.detail, .cart, .info-wrap, .form-grid{ margin-left:auto; margin-right:auto; text-align:center; }
.detail h1, .detail h2, .detail .desc, .continue-shopping{ text-align:center; }

/* --- PANIER : TOUT centré (plus rien collé aux bords) --- */
/* .cart est une grille : sans minmax(0,1fr) une piste peut dépasser le
   conteneur (min-content d'un enfant) → tout est poussé ~11px à droite. */
.cart{
  max-width:540px; margin-left:auto; margin-right:auto; width:100%;
  grid-template-columns:minmax(0,1fr) !important;
  justify-items:stretch !important;
}
.cart > *{ min-width:0 !important; max-width:100% !important; }
.cart-item{
  text-align:center !important;
  align-items:center !important;
  max-width:520px; margin-left:auto; margin-right:auto; width:100%;
}
.cart-item .meta{ align-items:center !important; text-align:center !important; width:100%; }
.cart-item .name{ text-align:center !important; }
.cart-item .sub{ text-align:center !important; }
.cart-item .right{ justify-content:center !important; gap:16px !important; width:100%; }
.cart-remove{ margin:0 !important; }

/* Totaux : libellé + montant centrés côte à côte, pas aux extrémités */
.total-line{
  justify-content:center !important; gap:16px !important;
  max-width:520px; margin-left:auto; margin-right:auto; width:100%; text-align:center;
}

/* Code promo centré */
.promo-box{ max-width:520px; margin-left:auto; margin-right:auto; width:100%; text-align:center; }
.promo-applied{ justify-content:center !important; gap:12px !important; }
.promo-form{ max-width:460px; margin-left:auto; margin-right:auto; justify-content:center; }

.cart-actions{ justify-content:center; flex-wrap:wrap; }
.minimum-order-card{ text-align:center; }
.order-help{ text-align:center; max-width:460px; margin-left:auto; margin-right:auto; }
.small-note{ text-align:center; }
.cta, .btn.large, .continue-shopping{ margin-left:auto; margin-right:auto; }

/* Empêche la disparition : app.min.css met opacity:0 + animation d'entrée
   sur ces éléments → on force la visibilité. */
.minimum-order-card, .cart-livraison, .total-line, .total-sub, .total-discount,
.cart-item, .order-help, .detail-order-note, .catalog-note{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Placeholders colorés (violet) au lieu du gris terne */
.cp-cat-ph{ background:linear-gradient(135deg,var(--cp-accent-2),#0e3a6e) !important; color:#fff !important; }
.cp-prod-ph{ background:linear-gradient(135deg,var(--cp-accent-2),#0e3a6e) !important; color:rgba(255,255,255,.9) !important; }

/* On masque le bouton "remonter" (flèche) — remplacé par WhatsApp */
.pr-fab, .fab-top{ display:none !important; }

/* Fiche produit : barre du haut épurée (pas de "Détail produit" ni bouton ℹ️),
   marque (logo + nom) centrée. */
.appbar-solo .appbar-row{ justify-content:center !important; }
.appbar-solo .brand{ justify-content:center; }

/* Avertissement minimum sous "Commander" */
.cart-min-warn{
  max-width:460px; margin:8px auto 0; text-align:center;
  color:#ffc2c8; font-weight:800; font-size:13px; line-height:1.4;
  background:rgba(255,90,106,.12); border:1px solid rgba(255,90,106,.4);
  border-radius:12px; padding:10px 14px;
}

/* Bouton WhatsApp flottant */
.cp-wa{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  z-index:2147482000;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2));
  box-shadow:0 10px 26px rgba(var(--cp-accent-rgb),.5), 0 2px 8px rgba(0,0,0,.4);
  border:1.5px solid rgba(255,255,255,.35);
  animation:cpWaPop .5s cubic-bezier(.2,.9,.25,1.3) both;
  -webkit-tap-highlight-color:transparent;
}
.cp-wa svg{ width:30px; height:30px; fill:#fff; position:relative; z-index:1; }
.cp-wa:active{ transform:scale(.9); }
.cp-wa::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(var(--cp-accent-rgb),.5); animation:cpWaPulse 1.8s ease infinite;
}
@keyframes cpWaPop{ 0%{opacity:0;transform:translateY(16px) scale(.6)} 100%{opacity:1;transform:none} }
@keyframes cpWaPulse{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.45);opacity:0} }
@media (prefers-reduced-motion: reduce){ .cp-wa, .cp-wa::after{ animation:none !important; } }

/* ---------- 3 boutons de livraison dans le panier ---------- */
.cp-deliv{ margin:14px auto 8px; max-width:480px; text-align:center; }
.cp-deliv-label{ font-weight:900; font-size:15px; margin-bottom:10px; }
.cp-deliv-modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cp-deliv-mode{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 6px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:#e7ecf3; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.cp-deliv-mode .cp-deliv-ico{ font-size:24px; line-height:1; }
.cp-deliv-mode:active{ transform:scale(.95); }
.cp-deliv-mode.active{
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.25),rgba(var(--cp-accent2-rgb),.15));
  border-color:rgba(var(--cp-accent-rgb),.7);
  box-shadow:0 0 0 2px rgba(var(--cp-accent-rgb),.2) inset, 0 8px 20px rgba(var(--cp-accent-rgb),.22);
  color:#fff;
}
.cp-deliv-zones{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
/* IMPORTANT : display:flex ci-dessous écrase l'attribut [hidden] → on le rétablit
   pour que les zones restent cachées tant qu'un mode n'est pas choisi. */
.cp-deliv-zones[hidden], .cp-deliv-zone[hidden]{ display:none !important; }
.cp-deliv-zone{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 16px; border-radius:14px; cursor:pointer; text-align:center;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  color:#e7ecf3;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
  animation:cpFadeUp .3s ease both;
}
.cp-zone-name{ font-weight:900; font-size:14.5px; letter-spacing:.02em; }
.cp-zone-min{ font-weight:800; font-size:12.5px; color:#c9a2ff; }
.cp-zone-delay{ font-weight:700; font-size:12px; color:rgba(220,228,240,.72); }
.cp-deliv-zone:active{ transform:scale(.97); }
.cp-deliv-zone.active{
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.22),rgba(var(--cp-accent2-rgb),.12));
  border-color:rgba(var(--cp-accent-rgb),.7);
  box-shadow:0 0 0 2px rgba(var(--cp-accent-rgb),.2) inset;
  color:#fff;
}
.cp-deliv-zone.active .cp-zone-min{ color:#e2ccff; }
.cp-deliv-zone.active::after{
  content:"✓"; position:absolute; top:9px; right:13px; color:#c9a2ff; font-weight:900; font-size:15px;
}

/* Choix dans la popup : heure de passage (meet-up) · transporteur (postal) */
.cp-choice{ margin:2px auto 6px; max-width:460px; text-align:center; }
.cp-choice .label-title{ display:block; font-weight:900; font-size:14px; margin-bottom:8px; }
.cp-choice-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cp-choice-row-2{ grid-template-columns:repeat(2,1fr); }
.cp-choice-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:11px 8px; border-radius:13px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  color:#e7ecf3; font-weight:800; font-size:13.5px;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.cp-choice-btn small{ font-weight:700; font-size:11px; color:#c9a2ff; }
.cp-choice-btn:active{ transform:scale(.95); }
.cp-choice-btn.active{
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.25),rgba(var(--cp-accent2-rgb),.14));
  border-color:rgba(var(--cp-accent-rgb),.75);
  box-shadow:0 0 0 2px rgba(var(--cp-accent-rgb),.2) inset;
  color:#fff;
}
.cp-choice-btn.active small{ color:#e2ccff; }
.cp-choice-note{ font-size:12px; color:rgba(220,228,240,.78); font-weight:700; margin:9px auto 0; max-width:420px; line-height:1.45; }

/* Bouton Commander "verrouillé" (minimum non atteint) */
.cp-order-open.is-locked{ filter:grayscale(.4) brightness(.8); }

/* Secousse d'attention sur la carte minimum */
@keyframes cpShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.cp-shake{ animation:cpShake .45s ease; border-color:rgba(255,90,106,.5) !important; }

/* Récap livraison dans la popup */
.cp-modal-livraison{
  display:inline-block; margin:0 auto 10px; padding:8px 16px; border-radius:999px;
  background:linear-gradient(135deg,rgba(var(--cp-accent-rgb),.2),rgba(var(--cp-accent2-rgb),.12));
  border:1px solid rgba(var(--cp-accent-rgb),.4); font-weight:800; font-size:13px; color:#eadcff;
}