/* OHI SUSHI — section « Poke + הכי מוזמנים » (accueil) */
.pop{padding-top:0}
.pop-title{font-size:var(--fs-2xl);color:var(--ink);margin-top:var(--sp-2)}
.pop-ico{width:1.1em;height:1.1em;flex:none}

/* — Partie 1 : bandeau poke (fond blanc pour fondre les photos) — */
.pop-poke{background:var(--paper);border-block:1px solid var(--line);padding-block:var(--sp-8);overflow:hidden}
.pop-poke-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--sp-7)}
.pop-lead{color:var(--ink-2);font-size:var(--fs-lg);max-width:36ch;margin-top:var(--sp-4)}
.pop-link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:var(--sp-5);color:var(--plum);font-weight:600;border-bottom:1px solid currentColor;transition:color var(--dur) var(--ease)}
.pop-link:hover{color:var(--plum-deep)}
.pop-bowls{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;gap:var(--sp-3)}
.pop-bowl-wrap{display:block;will-change:transform}
.pop-bowl-wrap--b{padding-block-end:8%}
.pop-bowl{width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper)}
/* Flottements décalés : chorégraphie propre (prime sur [data-float] du socle), chaque bol a sa phase */
@media (prefers-reduced-motion:no-preference){
  .pop-bowl[data-float]{animation:pop-float 6.5s ease-in-out infinite alternate;will-change:transform}
}
@keyframes pop-float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-12px) rotate(1.5deg)}}
.pop-bowl--a{animation-delay:-1.2s}
.pop-bowl--b{animation-delay:-3.4s}
.pop-bowl--c{animation-delay:-5.1s}

/* — Partie 2 : les plus commandés — */
.pop-best{padding-top:var(--sp-8)}
.pop-best-head{margin-bottom:var(--sp-6)}
.pop-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.pop-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pop-card:hover{box-shadow:var(--shadow-2);border-color:transparent}
.pop-media{aspect-ratio:4/3;background:var(--washi);overflow:hidden}
.pop-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover){.pop-card:hover .pop-media img{transform:scale(1.06)}}
.pop-body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) var(--sp-4);flex:1}
.pop-name{font-family:var(--f-display);font-size:var(--fs-lg);font-weight:500;line-height:1.25;margin:0}
.pop-open{all:unset;cursor:pointer}
.pop-open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pop-open:focus-visible::after{outline:2px solid var(--plum);outline-offset:-2px}
.pop-desc{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-2)}
.pop-price{color:var(--ink);font-size:var(--fs-md)}
.pop-add{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--plum);color:#fff;flex:none;transition:background var(--dur) var(--ease),transform .15s var(--ease)}
.pop-add:hover{background:var(--plum-deep)}
.pop-add:active{transform:scale(.92)}
.pop-add svg{width:20px;height:20px;transition:transform .45s var(--ease)}
.pop-add:hover svg,.pop-add:focus-visible svg{transform:rotate(90deg)}
.pop-add.is-added{animation:pop-pulse .5s var(--ease)}
@keyframes pop-pulse{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.pop-plus1{position:absolute;inset-block-end:100%;inset-inline:0;text-align:center;font-size:var(--fs-sm);font-weight:700;color:var(--plum);pointer-events:none;animation:pop-fly .8s var(--ease) forwards}
@keyframes pop-fly{from{opacity:0;transform:translateY(6px)}25%{opacity:1}to{opacity:0;transform:translateY(-26px)}}
.pop-cta{display:flex;justify-content:center;margin-top:var(--sp-7)}

/* — Tablette — */
@media (max-width:960px){
  .pop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* — Mobile : calme, 2 cartes par ligne compactes — */
@media (max-width:700px){
  .pop-poke{padding-block:var(--sp-7)}
  .pop-poke-inner{grid-template-columns:1fr;gap:var(--sp-5)}
  .pop-bowls{order:-1;max-width:420px;margin-inline:auto;gap:var(--sp-2)}
  .pop-lead{font-size:var(--fs-md)}
  .pop-best{padding-top:var(--sp-7)}
  .pop-best-head{margin-bottom:var(--sp-5)}
  .pop-grid{gap:var(--sp-3)}
  .pop-card{border-radius:var(--r-sm)}
  .pop-body{padding:var(--sp-3);gap:var(--sp-1)}
  .pop-name{font-size:var(--fs-md)}
  .pop-desc{display:none}
  .pop-price{font-size:var(--fs-sm)}
  .pop-add{width:44px;height:44px}
  .pop-cta{margin-top:var(--sp-6)}
  .pop-cta .btn{width:100%}
}

/* — Sens de lecture : chevrons « suivant » orientés selon la langue — */
[dir="ltr"] .pop-ico{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  .pop-add.is-added,.pop-plus1{animation:none}
  .pop-plus1{display:none}
  .pop-add:hover svg,.pop-card:hover .pop-media img{transform:none}
}
