/* ========================================================================== STRATEGY page — capability, not case study Minh : ce fichier ne contient QUE le spécifique strategy. Les patterns éditoriaux (hl-brand-head / -statement / -result / -caps / -prose) viennent de branding.css, inclus dans le de strategy.html. Toujours passer par les tokens (var(--…)), jamais de valeur en dur. ========================================================================== */ /* léger espacement de la liste de capacités sur cette page */ .hl-strategy-caps { max-width: calc(var(--container-max) + 2 * var(--padding-x)); margin: 24px auto 0; padding: 0 var(--padding-x); } /* ----- bandeau de preuve (chiffres) ----- */ .hl-strategy-proof { margin: 64px 0 0; background: var(--color-ink); color: var(--color-bg); } .hl-strategy-proof-inner { max-width: var(--container-max); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--padding-x); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); } .hl-stat { display: flex; flex-direction: column; gap: 8px; } .hl-stat-fig { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -1px; color: var(--color-bg); } .hl-stat-fig .accent, .hl-stat-fig::first-letter { /* placeholder hook, harmless */ } .hl-stat-lab { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(247, 249, 251, 0.6); } @media (max-width: 767px) { .hl-strategy-proof-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; } } /* ----- zones image ----- */ .hl-strategy-img { max-width: calc(var(--container-max) + 2 * var(--padding-x)); margin: 64px auto 0; padding: 0 var(--padding-x); } .hl-strategy-img figure { width: 100%; aspect-ratio: 16 / 5; max-height: 380px; background: var(--color-bg-soft); border: 0.5px solid var(--color-line); overflow: hidden; } .hl-strategy-img figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .hl-strategy-img-pair { max-width: calc(var(--container-max) + 2 * var(--padding-x)); margin: 48px auto 0; padding: 0 var(--padding-x); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hl-strategy-img-pair figure { aspect-ratio: 3 / 2; max-height: 280px; background: var(--color-bg-soft); border: 0.5px solid var(--color-line); overflow: hidden; } .hl-strategy-img-pair figure img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 767px) { .hl-strategy-img-pair { grid-template-columns: 1fr; } }