/* Galerie des plats (accueil) — validée par Dimitri le 05/10 (maquette P4), voir galerie-plats.js. Toutes les cartes ont le même format :
   elles restent alignées. */
body.apercu-appli .plates.p4{gap:20px!important}
body.apercu-appli .p4 .plate{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;position:relative;display:grid!important;padding:0!important;
  aspect-ratio:2/3;border-radius:26px!important;overflow:hidden;background:#14120F!important;isolation:isolate;
  box-shadow:0 26px 50px -30px rgba(40,30,15,.55)!important;outline-offset:4px;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .6s!important}
body.apercu-appli .p4 .plate:hover,body.apercu-appli .p4 .plate:focus-visible{box-shadow:0 40px 70px -34px rgba(40,30,15,.7)!important}
body.apercu-appli .p4 .plate.p4-tilt{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);transition:transform .2s ease-out,box-shadow .6s!important}
body.apercu-appli .p4 .plate>img,body.apercu-appli .p4 .plate>.plate-in{grid-area:1/1}
body.apercu-appli .p4 .plate>img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0!important;
  transform:scale(1.03);transition:transform 2.2s cubic-bezier(.2,.7,.2,1),filter 1s}
body.apercu-appli .p4 .plate:is(:hover,:focus-visible)>img{transform:scale(1.11);filter:saturate(1.08)}

/* le texte posé sur la photo */
body.apercu-appli .p4 .plate-in{align-self:end;flex:none!important;z-index:1;padding:110px 20px 20px!important;color:#fff;
  background:linear-gradient(to top,rgba(12,10,7,.92) 0%,rgba(12,10,7,.72) 42%,rgba(12,10,7,0) 100%)}
body.apercu-appli .p4 .plate h3{color:#fff!important;min-height:2.24em!important;display:flex;align-items:flex-end;margin:12px 0 0!important;font-size:clamp(20px,1.8vw,23px)!important;text-wrap:balance}
body.apercu-appli .p4 .plate .tag{box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* description et macros : se déplient au survol (toujours visibles au toucher) */
.p4-plus{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(8px);
  transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.p4-plus>div{min-height:0;overflow:hidden}
body.apercu-appli .p4 .plate:is(:hover,:focus-visible,:focus-within) .p4-plus{grid-template-rows:1fr;opacity:1;transform:none}
body.apercu-appli .p4 .plate p{margin:8px 0 0!important;color:rgba(255,255,255,.82)!important;font-size:13.5px!important;line-height:1.5}
body.apercu-appli .p4 .plate .mac{margin-top:14px!important;padding-top:0!important;color:#fff}
body.apercu-appli .p4 .plate .mac span{background:rgba(255,255,255,.14)!important;color:#fff!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.apercu-appli .p4 .plate .mac .kc{background:#fff!important;color:#111!important}

/* reflet discret qui suit la souris */
.p4-reflet{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,255,255,0) 55%)}
.p4 .plate.p4-tilt .p4-reflet{opacity:1}

@media(hover:none),(max-width:560px){ .p4-plus{grid-template-rows:1fr;opacity:1;transform:none} }
@media(max-width:560px){ body.apercu-appli .p4 .plate-in{padding-top:80px!important} }
html[data-theme="obscur"] body.apercu-appli .p4 .plate{box-shadow:0 26px 50px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)!important}
@media(prefers-reduced-motion:reduce){
  body.apercu-appli .p4 .plate,body.apercu-appli .p4 .plate>img,.p4-plus{transition:none!important}
  body.apercu-appli .p4 .plate,body.apercu-appli .p4 .plate>img{transform:none!important}
}