/* ============================================================
   JET ATLAS — ht-story (« Qui sommes-nous » — bento grid)
   A modern modular layout: big image + a white narrative card + a lime
   heritage stat tile + ink highlight tiles. No dates — heritage-led.
   ============================================================ */
.ht-story { background: var(--ht-story-bg, var(--ht-paper2)); padding: clamp(80px,12vw,150px) 0; }
.ht-story__bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px,1.4vw,18px); grid-auto-rows: minmax(0, auto); }
.ht-story__tile { border-radius: 22px; overflow: hidden; }
/* Hover invert: lime stat tile → ink, ink highlight tile → lime (text flips too). */
.ht-story__stat, .ht-story__hl, .ht-story__stat-v, .ht-story__stat-l, .ht-story__hl-v, .ht-story__hl-l { transition: background-color .35s ease, color .35s ease; }
.ht-story .ht-story__stat:hover { background: var(--ht-ink); }
.ht-story .ht-story__stat:hover, .ht-story .ht-story__stat:hover .ht-story__stat-v, .ht-story .ht-story__stat:hover .ht-story__stat-l { color: #fff; }
.ht-story .ht-story__hl:hover { background: var(--ht-lime); }
.ht-story .ht-story__hl:hover, .ht-story .ht-story__hl:hover .ht-story__hl-v, .ht-story .ht-story__hl:hover .ht-story__hl-l { color: var(--ht-ink); }

/* Image (big anchor, 2×2) */
.ht-story__img { grid-column: span 2; grid-row: span 2; position: relative; min-height: clamp(380px,44vw,580px); background: #161616; }
.ht-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-story__badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--ht-story-accent, var(--ht-lime)); color: var(--ht-ink); font-family: var(--ht-ui); font-weight: 700; font-size: 13.5px; letter-spacing: 0.3px; padding: 11px 17px; border-radius: 999px; box-shadow: 0 16px 30px -18px rgba(10,10,10,0.6); }

/* Narrative card (white, 2×2) */
.ht-story__textcard { grid-column: span 2; grid-row: span 2; background: var(--ht-white); padding: clamp(28px,3.2vw,48px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; }
.ht-story__textcard .ht-h2 { font-size: clamp(28px,3vw,44px); }
.ht-story__text { color: var(--ht-mut); line-height: 1.74; font-size: clamp(14.5px,1.3vw,16.5px); }
.ht-story__text p { margin: 0 0 12px; }
.ht-story__text p:last-child { margin: 0; }

/* Lime heritage stat tile (1×1) */
.ht-story__stat { grid-column: span 1; background: var(--ht-story-accent, var(--ht-lime)); color: var(--ht-ink); padding: clamp(20px,2vw,28px); display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 132px; }
.ht-story__stat-v { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(40px,4.4vw,60px); line-height: 0.92; }
.ht-story__stat-l { font-family: var(--ht-ui); font-size: 12.5px; font-weight: 600; line-height: 1.35; }

/* Ink highlight tiles (1×1) */
.ht-story__hl { grid-column: span 1; background: var(--ht-ink); color: var(--ht-white); padding: clamp(20px,2vw,28px); display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 132px; }
.ht-story__hl-v { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(38px,4.2vw,56px); line-height: 0.95; color: #fff; }
.ht-story__hl-l { font-family: var(--ht-ui); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,0.66); }

/* Bulletproof tile contrast (out-specifies any inherited / kit cascade). */
.ht-story .ht-story__hl-v { color: #fff; }
.ht-story .ht-story__hl-l { color: rgba(255,255,255,0.68); }
.ht-story .ht-story__stat, .ht-story .ht-story__stat-v, .ht-story .ht-story__stat-l { color: var(--ht-ink); }
.ht-story .ht-story__textcard .ht-h2 { color: var(--ht-ink); }
.ht-story .ht-story__text, .ht-story .ht-story__text p { color: var(--ht-mut); }

@media (max-width: 860px) {
  .ht-story__bento { grid-template-columns: 1fr 1fr; }
  .ht-story__img { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .ht-story__textcard { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 520px) {
  .ht-story__bento { grid-template-columns: 1fr; }
  .ht-story__img, .ht-story__textcard, .ht-story__stat, .ht-story__hl { grid-column: span 1; }
}