/* Kayefy — finitions animées (v1.1), chargé après app.css */
/* Images : fondu à l'arrivée plutôt qu'un affichage brutal */
.kfx .thumb img,.kfx .pslide img{opacity:0;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.kfx .thumb img.ld,.kfx .pslide img.ld{opacity:1}
/* En-tête qui se compacte au défilement */
.head-row{transition:height .25s var(--ease)}
.head.scrolled .head-row{height:calc(var(--head-h) - 8px)}
.logo{transition:transform .25s var(--ease)}
.head.scrolled .logo{transform:scale(.94);transform-origin:left center}
/* Barre d'onglets : l'indicateur s'ouvre depuis le centre */
.tabbar [aria-current="page"]::before{animation:grow .35s var(--spring) both}
.tabbar [aria-current="page"] .ico{animation:hop .45s var(--spring) both}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes hop{40%{transform:translateY(-3px)}}
/* Pastilles et liens : retour au toucher */
.chip{transition:transform .15s,background .2s,border-color .2s,color .2s}
.chip:active{transform:scale(.95)}
.cat .ico{transition:transform .35s var(--spring)}
@media (hover:hover){.cat:hover .ico{transform:rotate(-8deg) scale(1.12)}}
/* Prix barré qui s'efface doucement au survol de la carte */
@media (hover:hover){.card .price s{transition:opacity .2s}.card:hover .price s{opacity:.6}}
/* Titres de section : le soulignement se dessine à l'apparition */
.sec-head h2{position:relative}
.js .sec-head.rv h2::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:42px;border-radius:2px;background:var(--track);transform:scaleX(0);transform-origin:left;transition:transform .6s .15s var(--ease)}
.js .sec-head.rv.in h2::after{transform:none}
/* Compteur des ventes flash : chaque seconde bascule */
.timer b.tick{animation:tick .35s var(--ease)}
@keyframes tick{from{transform:translateY(-35%);opacity:.3}}
@media (prefers-reduced-motion:reduce){.kfx .thumb img,.kfx .pslide img{opacity:1}.js .sec-head.rv h2::after{transform:none}}


/* ==========================================================
   Stabilité & fluidité (v1.2) — prioritaire sur ce qui précède
   ========================================================== */
/* Pas de fondu entre les pages : navigation instantanée, plus de flash */
@view-transition{navigation:none}
.head,.tabbar{view-transition-name:none}
/* En-tête : hauteur fixe au défilement (évitait un recalcul de toute la page) */
.head-row{transition:none}
.head.scrolled .head-row{height:var(--head-h)}
.head.scrolled .logo{transform:none}
/* Flou d'arrière-plan retiré : très coûteux au défilement sur mobile */
.head,.tabbar{-webkit-backdrop-filter:none;backdrop-filter:none}
.head{background:var(--surface)}
.tabbar{background:var(--surface)}
/* Contenu visible tout de suite (plus d'apparition décalée au défilement) */
.js .rv{opacity:1;transform:none;transition:none}
/* Images affichées dès qu'elles arrivent, sur un fond neutre */
.kfx .thumb img,.kfx .pslide img{opacity:1;transition:none}
.thumb{background:var(--sunk)}

/* ---------- Zone de livraison repliable ---------- */
.zone-pick{border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.zone-pick:has(input:checked){border-color:var(--track)}
.zone-pick>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-radius:11px}
.zone-pick>summary::-webkit-details-marker{display:none}
.zone-pick>summary .grow{flex:1;min-width:0}
.zone-pick>summary b{display:block;font-size:14.5px}
.zone-pick>summary small{color:var(--muted);font-size:12.5px}
.zone-pick>summary .zp-fee{font-size:16px;white-space:nowrap}
.zone-pick>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 2px 0 4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.zone-pick[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.zone-pick[open]>summary{border-bottom:1px solid var(--line);border-radius:11px 11px 0 0}
.zone-pick .zones{padding:10px}
.zone-pick .opt-row{padding:10px 12px}