/* =============================================================
   OFFERS — the 3 cards + the two-booth showcase below them.
   ============================================================= */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}

.offer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex;flex-direction:column;cursor:pointer}
.offer:hover{transform:translateY(-5px);box-shadow:0 34px 60px -26px rgba(28,21,18,.4);border-color:var(--gold)}
.offer:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.offer .oico{width:52px;height:52px;border-radius:14px;background:var(--gold-wash);color:var(--gold-2);
  display:grid;place-items:center;margin-bottom:18px}
.offer h3{font-size:21px}
.offer p{color:var(--ink-2);font-size:14.5px;margin:10px 0 20px;flex:1}
/* "Découvrir" is now just an affordance — the whole card is clickable */
.offer .more{font-weight:700;color:var(--gold-2);font-size:14.5px;display:inline-flex;gap:7px;align-items:center;
  background:none;border:0;padding:0;font-family:inherit}
.offer:hover .more{gap:11px;transition:gap .2s}
.offer:hover .more svg{transform:translateX(2px);transition:transform .2s}

/* Feature card with photo — image fills the whole area (no letterbox) */
.offer.feature{padding:0;overflow:hidden}
.offer.feature .photo{aspect-ratio:16/11;overflow:hidden;background:var(--paper-2)}
.offer.feature .photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .4s ease}
.offer.feature:hover .photo img{transform:scale(1.04)}
.offer.feature .body{padding:24px 28px 28px}

/* Booth showcase */
.booths-section{padding-top:0}
.booths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.booth-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(165deg,#f4eee1,#e9dec8);min-height:340px;display:flex;align-items:flex-end}
:root[data-theme="dark"] .booth-card{background:linear-gradient(165deg,#2a1a2c,#180d1b)}
.booth-card img{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:108%;width:auto;max-width:none;
  z-index:0;filter:drop-shadow(0 20px 34px rgba(28,21,18,.34))}
/* solid colour panel on the left so the photo never sits under the label */
.booth-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#f4eee1 0%,#f4eee1 46%,rgba(244,238,225,0) 74%)}
:root[data-theme="dark"] .booth-card::before{
  background:linear-gradient(90deg,#2a1a2c 0%,#2a1a2c 46%,rgba(42,26,44,0) 74%)}
.booth-card .tag{position:relative;z-index:2;padding:24px 26px}
.booth-card .tag span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.booth-card .tag h3{font-size:24px;margin-top:6px;max-width:8ch}

/* Medium screens (big phones / small tablets): one WIDE card per row so the
   "fondue" (image behind the fade) always has room to show the photo.
   Two narrow columns here would hide the image under the fade panel. */
@media (max-width:860px){
  .booths{grid-template-columns:1fr}
}
/* Small phones: the fade can't show enough of a narrow card, so stack the
   full image above the label instead (whole booth visible). */
@media (max-width:560px){
  .booth-card{min-height:0;flex-direction:column;align-items:stretch}
  .booth-card::before{display:none}
  .booth-card img{position:relative;right:auto;top:auto;transform:none;height:auto;
    width:100%;max-height:260px;object-fit:contain;order:1;margin-top:20px;filter:none}
  .booth-card .tag{order:2;padding:14px 22px 22px}
}