/* ==========================================================
   Heavy's — couche d'effets (design + animations)
   Chargée après le runtime ; toutes les règles sont préfixées
   .hv pour passer devant les styles d'origine.
   ========================================================== */

html{scroll-behavior:smooth;scrollbar-color:#D7262E #0D0D0D}
::selection{background:#F4B400;color:#0D0D0D}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0D0D0D}
::-webkit-scrollbar-thumb{background:linear-gradient(#F4B400,#D7262E);border-radius:10px;border:2px solid #0D0D0D}

/* ---------- Performance ----------
   Le grain plein écran (filtre SVG + mode de fusion) et le flou derrière
   la navigation forcent un redessin à chaque scroll : on les neutralise. */
.hv .grain{display:none}
.hv .nav{background:rgba(13,13,13,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
.hv .bbar{background:rgba(13,13,13,.98);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- Barre de progression + retour en haut ---------- */
.fx-progress{position:fixed;top:0;left:0;width:100%;height:4px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#F4B400,#D7262E);box-shadow:0 0 14px rgba(244,180,0,.7);z-index:200;pointer-events:none}
.fx-top{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:#0D0D0D;color:#F4B400;display:grid;place-items:center;text-decoration:none;font:900 26px/1 "Big Shoulders Display",Impact,sans-serif;z-index:85;opacity:0;scale:.5;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:opacity .3s,scale .4s cubic-bezier(.3,1.6,.5,1),translate .3s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
.fx-top.on{opacity:1;scale:1;pointer-events:auto}
.fx-top:hover{background:#F4B400;color:#0D0D0D}
.fx-top .fx-arrow{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-top svg:first-child{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.fx-top-bg{fill:none;stroke:rgba(245,240,230,.15);stroke-width:4}
.fx-top-ring{fill:none;stroke:#D7262E;stroke-width:4;stroke-linecap:round}

/* ---------- Particules, pluie, toast ---------- */
.fx-bit{position:fixed;z-index:500;border-radius:50%;pointer-events:none}
.fx-rain{position:fixed;top:0;z-index:500;pointer-events:none;line-height:1}
.fx-toast{position:fixed;left:50%;top:96px;translate:-50% 0;z-index:520;background:#F4B400;color:#0D0D0D;font:900 26px/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:14px 26px;border-radius:999px;box-shadow:0 6px 0 #B98600;pointer-events:none;white-space:nowrap}

/* ---------- Boutons : reflet, aimant, pulsation ---------- */
.hv .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s cubic-bezier(.3,1.6,.5,1),translate .3s cubic-bezier(.2,.8,.2,1),background .15s,box-shadow .15s,color .15s}
.hv .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hv .btn:hover::after{transform:skewX(-20deg) translateX(460%)}
.hv .btn:not(:hover)::after{transition:none}

/* ---------- Navigation ---------- */
.hv .nav{transition:translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.hv .nav.fx-scrolled{box-shadow:0 12px 34px rgba(0,0,0,.5)}
.fx-navhide .hv .nav{translate:0 -100%}
.hv .tabs{transition:top .45s cubic-bezier(.2,.8,.2,1)}
.fx-navhide .hv .tabs{top:0}
.hv .nav-links a{position:relative;padding:6px 0;transition:color .2s}
.hv .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:#D7262E;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hv .nav-links a:hover::after,.hv .nav-links a.fx-active::after{transform:scaleX(1);transform-origin:left}
.hv .nav-links a.fx-active{color:#F4B400}
.hv .nav-logo img{transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.hv .nav-logo:hover img{transform:rotate(-7deg) scale(1.1)}

/* ---------- Hero ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hv .hero-kicker{display:block;margin:0 0 .9em;font:800 clamp(13px,1.5vw,17px)/1.2 Archivo,"Helvetica Neue",sans-serif;letter-spacing:.22em;color:#F4B400;animation:up .6s 1.15s cubic-bezier(.2,1.2,.4,1) both}
.hv .title .l{transform-origin:50% 100%}
.fx-sticker{position:absolute;right:5%;top:10%;width:156px;height:156px;z-index:1;pointer-events:none;animation:fx-pop .8s 2.7s cubic-bezier(.3,1.7,.5,1) both}
.fx-sticker::before{content:"";position:absolute;inset:0;border-radius:50%;background:#D7262E;box-shadow:0 6px 0 #A9161D,0 18px 40px rgba(0,0,0,.55)}
.fx-sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:fx-spin 16s linear infinite}
.fx-sticker text{font:900 17px "Big Shoulders Display",Impact,sans-serif;letter-spacing:.22em;fill:#F5F0E6}
.fx-sticker b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 46px/.9 "Big Shoulders Display",Impact,sans-serif;color:#F4B400}
.fx-sticker small{font-size:13px;letter-spacing:.14em;color:#F5F0E6;margin-top:4px}
@keyframes fx-pop{0%{scale:0;rotate:-200deg}100%{scale:1;rotate:0deg}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* QR Instagram : pendant du sticker Google, à gauche */
.hero-qr{position:absolute;left:5%;top:10%;width:124px;padding:9px;border-radius:14px;background:#F5F0E6;box-shadow:0 6px 0 #B9B1A4,0 18px 40px rgba(0,0,0,.55);transform:rotate(-8deg);z-index:1;animation:fx-pop .8s 2.7s cubic-bezier(.3,1.7,.5,1) both}
.hero-qr img{display:block;width:100%;height:auto}
@media (max-width:1100px){.fx-sticker,.hero-qr{display:none}}

/* ---------- Bandeau croisé ---------- */
.fx-mq2{position:relative;z-index:4;margin:-84px -20px 0;background:#F4B400;color:#0D0D0D;overflow:hidden;transform:rotate(3.4deg);border-top:4px solid #0D0D0D;border-bottom:4px solid #0D0D0D}
.fx-mq2-track{display:flex;width:max-content;animation:fx-mq-rev 34s linear infinite}
.fx-mq2-track span{font:900 clamp(22px,2.6vw,34px)/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;padding:12px 0}
@keyframes fx-mq-rev{from{transform:translateX(-50%)}to{transform:none}}

/* ---------- Titres de section ---------- */
.hv .h2::after{content:"";display:block;width:2.1em;height:.075em;margin-top:.14em;border-radius:99px;background:linear-gradient(90deg,#D7262E,#F4B400);transform:scaleX(0);transform-origin:left;transition:transform 1s .35s cubic-bezier(.2,.9,.2,1)}
.hv .rv.fx-in .h2::after{transform:scaleX(1)}
.hv .rv.fx-in .kicker{animation:fx-kick .8s cubic-bezier(.3,1.8,.5,1) both}
@keyframes fx-kick{0%{scale:0;rotate:-25deg;opacity:0}100%{scale:1;rotate:0deg;opacity:1}}

/* Apparition au scroll pour les navigateurs sans animation-timeline */
.fx-nosdt .hv .rv{opacity:0;transform:translateY(70px) scale(.95);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,1.2,.3,1)}
.fx-nosdt .hv .rv.fx-in{opacity:1;transform:none}

/* ---------- La carte ---------- */
/* Toute la carte est dans le HTML ; seul l'onglet actif est affiché */
.hv .carte-cat{display:none}
.hv .carte-cat.is-on{display:block}
.hv .tab{transition:all .15s,scale .2s cubic-bezier(.3,1.8,.5,1)}
.hv .tab:active{scale:.9}
.hv .tab.on{box-shadow:0 5px 0 #A9161D}
.hv .panel{box-shadow:0 40px 80px -30px rgba(215,38,46,.45)}
.hv .panel img,.hv .ph img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hv .card{animation-fill-mode:backwards;overflow:hidden}
.hv .card.fx-tilt{transition:transform .1s linear,box-shadow .22s}
.hv .card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .25s;pointer-events:none}
.hv .card:hover::after{opacity:1}
.hv .price{transition:rotate .35s cubic-bezier(.3,1.8,.5,1),scale .35s cubic-bezier(.3,1.8,.5,1)}
.hv .card:hover .price{rotate:5deg;scale:1.14}
.hv .idx{transition:translate .3s cubic-bezier(.3,1.8,.5,1)}
.hv .card:hover .idx{translate:4px -3px}

/* ---------- En vedette ---------- */
.hv .ved-copy.fx-in .chips > *{animation:fx-chip .5s cubic-bezier(.3,1.8,.5,1) backwards}
.hv .ved-copy .chips > *:nth-child(2){animation-delay:.08s}
.hv .ved-copy .chips > *:nth-child(3){animation-delay:.16s}
.hv .ved-copy .chips > *:nth-child(4){animation-delay:.24s}
.hv .ved-copy .chips > *:nth-child(5){animation-delay:.32s}
.hv .ved-copy .chips > *:nth-child(6){animation-delay:.4s}
@keyframes fx-chip{0%{scale:0;opacity:0}100%{scale:1;opacity:1}}
.hv .ved-prices div{transition:translate .3s cubic-bezier(.3,1.8,.5,1),rotate .3s cubic-bezier(.3,1.8,.5,1)}
.hv .ved-prices div:hover{translate:0 -6px;rotate:-2deg}
.hv .chips > *{transition:background .2s,color .2s}
.hv .chips > *:hover{background:#fff;color:#D7262E}

/* Photo pleine largeur : texte en contour qui se remplit */
.hv .bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.75),transparent 55%);pointer-events:none}
.hv .bleed .bleed-t{z-index:1;filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))}
/* lettres qui tombent et s'écrasent, comme le titre du hero */
.hv .bleed-t .line{justify-content:flex-start;gap:0 .26em;flex-wrap:nowrap;white-space:nowrap}
/* tout sur une ligne : la taille suit la largeur de l'écran (le slogan fait environ 12,4 fois la taille du texte) */
.hv .bleed .bleed-t{font-size:min(120px,calc((100vw - 64px) / 12.6));right:32px}
.hv .bleed-t .l{display:inline-block;transform-origin:50% 100%}
.hv .bleed-t .mus{color:#F4B400}
.hv .bleed-t .bang{color:#D7262E;margin-left:.14em}
.hv .bleed:not(.fx-in) .bleed-t .l{opacity:0}
.hv .bleed.fx-in .bleed-t .l{animation:letter .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.15s + var(--i) * 38ms)}

/* ---------- Le resto ---------- */
.hv .ph{box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}
.hv .ph figcaption{transform:translateX(-170%);transition:transform .7s .35s cubic-bezier(.3,1.5,.5,1)}
.hv .ph.fx-in figcaption{transform:none}
.hv .svc span{transition:translate .3s cubic-bezier(.3,1.8,.5,1)}
.hv .svc span:hover{translate:0 -7px}

/* ---------- Note Google ---------- */
.hv .note .stars{margin-top:56px}
.hv .note .stars svg{scale:0;rotate:-120deg;filter:drop-shadow(0 0 10px rgba(244,180,0,.65))}
.hv .note .rv.fx-in .stars svg{animation:fx-star .6s cubic-bezier(.3,1.8,.5,1) forwards}
.hv .note .stars svg:nth-child(2){animation-delay:.12s}
.hv .note .stars svg:nth-child(3){animation-delay:.24s}
.hv .note .stars svg:nth-child(4){animation-delay:.36s}
.hv .note .stars svg:nth-child(5){animation-delay:.48s}
@keyframes fx-star{to{scale:1;rotate:0deg}}

/* ---------- Questions fréquentes ---------- */
.hv .faq{padding-top:40px}
.hv .faq-list{display:grid;gap:12px;margin-top:40px;max-width:900px}
.hv .faq-item{background:#171514;border:1px solid rgba(245,240,230,.1);border-radius:18px;transition:border-color .2s}
.hv .faq-item[open]{border-color:rgba(244,180,0,.45)}
.hv .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 22px;cursor:pointer;list-style:none;font:900 clamp(22px,2.6vw,30px)/1.05 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase}
.hv .faq-item summary::-webkit-details-marker{display:none}
.hv .faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#D7262E;color:#fff;font-size:26px;transition:rotate .3s cubic-bezier(.3,1.6,.5,1)}
.hv .faq-item[open] summary::after{rotate:45deg}
.hv .faq-item summary:hover{color:#F4B400}
.hv .faq-item p{margin:0;padding:0 22px 20px;font-size:17px;font-weight:600;color:#E4DED3;max-width:62ch}
.hv .faq-item a{color:#F4B400}

/* ---------- Infos, Instagram, newsletter : halo qui suit la souris ---------- */
.hv .info{transition:translate .3s cubic-bezier(.3,1.5,.5,1),rotate .3s cubic-bezier(.3,1.5,.5,1),border-color .3s,opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,1.2,.3,1)}
.hv .info:hover{translate:0 -6px;rotate:-.6deg;border-color:rgba(244,180,0,.45)}
.hv .info h3 .ic{transition:rotate .5s cubic-bezier(.3,1.8,.5,1),scale .5s cubic-bezier(.3,1.8,.5,1)}
.hv .info:hover h3 .ic{rotate:-15deg;scale:1.25}
.hv .field input{transition:border-color .2s,box-shadow .25s}
.hv .field input:focus{box-shadow:0 0 0 5px rgba(244,180,0,.18)}

/* ---------- Footer : nom géant ---------- */
.hv .foot{position:relative;overflow:hidden}
.fx-giant{display:flex;justify-content:center;margin:50px auto -3%;width:min(92%,1240px);overflow:hidden;user-select:none}
.fx-giant svg{display:block;width:100%;height:auto;fill:transparent;stroke:rgba(255,255,255,.55);stroke-width:2;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,1.2,.3,1),fill .3s,stroke .3s}
.hv .foot.fx-in .fx-giant svg{transform:none}
.fx-giant svg:hover{fill:#0D0D0D;stroke:#0D0D0D}

@media (max-width:760px){
  .fx-top{display:none}
  .fx-mq2{margin-top:-8px;transform:rotate(1.4deg)}
  .fx-giant{margin-top:36px}
}

/* ==========================================================
   Mobile first : correctifs issus de l'audit (320 → 980 px)
   ========================================================== */

@media (max-width:980px){
  .hv .nav-logo{padding:2px 0}
  .hv .foot a{display:inline-block;padding:10px 0}
  .hv .ved-prices small{font-size:13px}
  .hv .nav-logo span{display:none}
  .hv .nav-cta .call{display:none}
}
@media (max-width:760px){
  .hv .nav-cta{display:none}            /* doublon avec la barre du bas */
  .hv .nav-in{gap:6px}
  .hv .nav-logo{padding:6px 0}
}

/* Navigation mobile first : menu burger par défaut, liens en ligne à partir de 981 px */
.hv .nav-cta .btn{white-space:nowrap}
.hv .nav-burger{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:12px;background:transparent;color:#F5F0E6;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hv .nav-burger span{display:block;width:26px;height:3px;border-radius:3px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.hv .nav.is-open .nav-burger{color:#F4B400}
.hv .nav.is-open .nav-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hv .nav.is-open .nav-burger span:nth-child(2){opacity:0}
.hv .nav.is-open .nav-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.hv .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;padding:4px 16px 18px;background:#0D0D0D;border-bottom:1px solid rgba(245,240,230,.12);box-shadow:0 30px 50px -20px rgba(0,0,0,.9);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.hv .nav.is-open .nav-links{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.hv .nav-links a{display:flex;align-items:center;column-gap:.28em;min-height:58px;padding:0 4px;border-bottom:1px solid rgba(245,240,230,.1);font:900 30px/1 "Big Shoulders Display","Arial Narrow",Impact,sans-serif;letter-spacing:.02em;white-space:nowrap}
.hv .nav-links a:last-child{border-bottom:0}
.hv .nav-links a::after{display:none}
.hv .nav.is-open{background:#0D0D0D}
.fx-navhide .hv .nav.is-open{translate:none}
@media (min-width:981px){
  .hv .nav-burger{display:none}
  .hv .nav-links{position:static;flex:none;flex-direction:row;gap:28px;max-height:none;overflow:visible;padding:0;background:none;border:0;box-shadow:none;visibility:visible;opacity:1;transform:none;transition:none}
  .hv .nav-links a{display:inline;min-height:0;padding:6px 0;border:0;font-family:inherit;font-weight:800;font-size:15px;line-height:inherit;letter-spacing:.08em}
  .hv .nav-links a::after{display:block}
}
/* cinq liens + deux boutons : on allège entre 981 et 1240 px pour que rien ne se chevauche */
@media (min-width:981px) and (max-width:1400px){
  .hv .nav-logo span{display:none}    /* « Smashed Burger » passait sur deux lignes à côté du badge Ouvert */
}
@media (min-width:981px) and (max-width:1240px){
  .hv .nav-cta .call{display:none}
  .hv .nav-in{gap:20px}
  .hv .nav-links{gap:20px}
}

/* Accueil : sur-titre compact */
@media (max-width:760px){
  .hv .hero-kicker{letter-spacing:.14em;font-size:12.5px}
}

/* Accueil : CTA sur une seule ligne */
@media (max-width:760px){
  .hv .hero-cta .btn{white-space:nowrap;font-size:clamp(16px,5.2vw,22px);padding:0 14px}
}

/* La carte */
.hv .panel:not(.shk):not(.drk):not(.brg):not(.sds):not(.mnu)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:65%;background:linear-gradient(transparent,rgba(13,13,13,.85));pointer-events:none;z-index:1}
.hv .panel-tag{z-index:2}
@media (max-width:760px){
  .hv .tabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}
  .hv .panel-tag p{font-size:13px}
  .hv .cards{gap:10px}
  .hv .card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top price" "name price" "desc desc";column-gap:14px;row-gap:4px;align-items:center;padding:16px 18px;min-height:0}
  .hv .card-top{grid-area:top}
  .hv .card h3{grid-area:name;font-size:clamp(26px,8vw,32px)}
  .hv .card p{grid-area:desc;font-size:13px}
  .hv .card .price{grid-area:price;margin:0;align-self:center;font-size:clamp(22px,7vw,28px)}
  .hv .idx{font-size:24px}
}

/* Le Smash : burger centré, prix côte à côte */
@media (max-width:760px){
  .hv .ved-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hv .ved-prices div{padding:12px 14px}
  .hv .ved-prices strong{font-size:clamp(28px,9vw,44px)}
  .hv .ved-prices small{letter-spacing:.05em;white-space:nowrap}
}

/* Le resto */
.hv .ph figcaption{font-size:13px}

/* Infos : numéro sur une ligne, zone tactile 44 px */
.hv .big-tel{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
@media (max-width:760px){
  .hv .big-tel{font-size:clamp(28px,9.5vw,40px)}
}

/* Instagram : plus de grand vide */
@media (max-width:760px){
  .hv .insta{min-height:0;gap:24px;justify-content:flex-start}
}

/* Pied de page : nom géant qui tient dans l'écran */


/* Écrans tactiles : pas d'effet de survol qui « colle » après un tap */
@media (hover:none){
  .hv .card:hover{transform:none;box-shadow:none}
  .hv .card:hover::after{opacity:0}
  .hv .card:hover .price{rotate:0deg;scale:1}
  .hv .card:hover .idx{translate:none}
  .hv .panel:hover img{transform:scale(1.02)}
  .hv .btn:hover{transform:none}
  .hv .btn:active{transform:scale(.95)}
  .hv .info:hover{translate:none;rotate:0deg}
  .hv .ved-prices div:hover{translate:none;rotate:0deg}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx-sticker,.hero-qr,.fx-sticker svg,.fx-mq2-track{animation:none!important}
  .fx-giant svg,.hv .ph figcaption{transform:none!important}
  .hv .bleed .bleed-t .l{opacity:1}
  .hv .note .stars svg{scale:1;rotate:0deg}
  .fx-nosdt .hv .rv{opacity:1;transform:none}
}

/* Cards avec photo sur mobile : vignette à gauche */
@media (max-width:760px){
  /* photo agrandie (76 → 112 px) : le prix remonte à côté du numéro pour laisser toute la largeur au nom */
  .hv .card.has-img{grid-template-columns:112px 1fr auto;grid-template-areas:"img top price" "img name name" "img desc desc";padding:12px 16px 12px 12px;min-height:0}
  .hv .card-img{position:static;grid-area:img;width:112px;height:104px;object-position:center;align-self:center}
  .hv .card.has-img .price{align-self:start;white-space:nowrap}
  /* Menus : la photo (burger + twisters + canette) est large, elle passe au-dessus du texte sur toute la largeur */
  .hv #cat-menus .card.has-img{grid-template-columns:1fr auto;grid-template-areas:"img img" "name price" "desc price";padding:12px 16px 14px;row-gap:2px}
  .hv #cat-menus .card-img{width:100%;height:132px;margin-bottom:6px}
  .hv #cat-menus .card.has-img .card-top{position:absolute;left:16px;top:12px}
  .hv #cat-menus .card.has-img .price{align-self:center}
  .hv .card.has-img .card-top{position:static;z-index:auto}   /* sinon la pastille reste coincée sous la photo */
  .hv .card.has-img .badge{position:absolute;left:8px;top:8px;z-index:3;font-size:11px;padding:3px 8px;transform:rotate(-6deg)}   /* « Nouveau » en pastille sur le coin de la photo : plus de place à côté du prix */
}
@media (hover:none){
  .hv .card.has-img:hover .card-img{transform:none}
}