/* ============================================================================
   PostEx — Accueil « Le Poste »
   Mosaïque bento vivante. Cellules = cartes fonctionnelles, jamais du décor.
   Bricolage Grotesque (display) + Instrument Sans (corps) + Geist Mono (données).
   ========================================================================== */

.lp-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-lo);margin:0}
.lp-k__dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;
  animation:lpBlink 2s var(--ease) infinite}
@keyframes lpBlink{50%{opacity:.25}}
.lp-k--ink{color:rgba(255,255,255,.5)}

/* ---------- Cellule bento de base ------------------------------------------ */
.lp-cell{background:var(--paper-2);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);
  position:relative;overflow:hidden;padding:22px 24px;
  animation:lpBreathe 6s ease-in-out infinite;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.lp-cell:nth-child(2n){animation-delay:-1.4s}
.lp-cell:nth-child(3n){animation-delay:-3.1s}
@keyframes lpBreathe{0%,100%{transform:scale(1)}50%{transform:scale(.997)}}
.lp-cell:hover{box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--brand);transform:translateY(-2px)}
.lp-cell::before,.lp-cell::after{content:"";position:absolute;width:14px;height:14px;opacity:0;transition:opacity .3s}
.lp-cell::before{top:8px;left:8px;border-top:1.5px solid var(--brand);border-left:1.5px solid var(--brand)}
.lp-cell::after{bottom:8px;right:8px;border-bottom:1.5px solid var(--brand);border-right:1.5px solid var(--brand)}
.lp-cell:hover::before,.lp-cell:hover::after{opacity:1}
.lp-cell--flat{padding:0}
.lp-cell--black{background:var(--ink);color:#fff;box-shadow:none}
.lp-cell--yellow{background:var(--amber);color:var(--ink);box-shadow:none}
.lp-cell--outline{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2)}

/* ---------- Hero mosaïque --------------------------------------------------- */
.lp-hero{padding:calc(var(--nav-h) + clamp(16px,3vw,28px)) 0 clamp(24px,4vw,40px);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lp-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.lp-photo{grid-column:1/7;grid-row:1/3;min-height:340px}
.lp-photo picture,.lp-photo__img{width:100%;height:100%}
.lp-photo__img{object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.98)}
.lp-photo__tag{position:absolute;left:14px;bottom:14px;background:rgba(11,13,18,.72);backdrop-filter:blur(3px);
  color:#fff;font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  padding:8px 12px;border-radius:5px;display:flex;align-items:center;gap:8px}
.lp-photo__tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;animation:lpBlink 2s infinite}
.lp-head{grid-column:7/13;grid-row:1/2;display:flex;flex-direction:column;justify-content:center}
.lp-head .lp-k{padding-bottom:6px;border-bottom:2px solid var(--amber);width:max-content}
.lp-head h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.9rem,1.6rem+1.6vw,3rem);line-height:1.04;margin-top:14px;text-wrap:balance;color:var(--t-hi)}
.lp-head p{color:var(--t-mid);margin-top:12px;max-width:42ch;font-size:.98rem}
.lp-head__cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.lp-metric{grid-row:2/3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.lp-metric__n{font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums;line-height:.95;margin:0}
.lp-metric__l{font-family:var(--f-mono);font-size:.58rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin:8px 0 0;opacity:.7}
.lp-m60{grid-column:7/9}
.lp-m60 .lp-metric__n{font-size:clamp(1.5rem,2.6vw,2rem)}
.lp-m99{grid-column:9/11}
.lp-m99 .lp-metric__n{font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--t-hi)}
.lp-m247{grid-column:11/12}
.lp-m247 .lp-metric__n{font-size:1.3rem}
.lp-m15{grid-column:12/13}
.lp-m15 .lp-metric__n{font-size:1.15rem}
@media(max-width:980px){
  .lp-mosaic{grid-template-columns:repeat(6,1fr)}
  .lp-photo{grid-column:1/7;grid-row:1/2;min-height:260px}
  .lp-head{grid-column:1/7;grid-row:2/3}
  .lp-m60{grid-column:1/3;grid-row:3/4}
  .lp-m99{grid-column:3/5;grid-row:3/4}
  .lp-m247{grid-column:5/7;grid-row:3/4}
  .lp-m15{grid-column:1/3;grid-row:4/5}
}

/* ---------- Sections communes (services / process / client) --------------- */
.lp-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}

.lp-services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lp-scard{display:block;padding:24px}
.lp-scard__ic{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);
  display:grid;place-items:center;margin-bottom:14px;color:var(--brand)}
.lp-scard__ic svg{width:17px;height:17px}
.lp-scard h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;font-size:1.15rem;color:var(--t-hi)}
.lp-scard p{color:var(--t-mid);font-size:.9rem;margin-top:8px;line-height:1.55}
.lp-scard--wide{grid-column:span 2}
@media(max-width:820px){.lp-services{grid-template-columns:1fr}.lp-scard--wide{grid-column:span 1}}

.lp-covband{background:var(--ink);color:#fff;padding:clamp(28px,4.4vw,44px) 0}
.lp-chips{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin-top:16px}
.lp-chips span{font-family:var(--f-mono);font-size:.82rem;font-weight:600;padding:6px 0;color:#fff}
.lp-chips i{width:4px;height:4px;border-radius:50%;background:var(--brand);margin:0 14px;flex:none}

.lp-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lp-how .lp-cell{padding:26px}
.lp-step{font-family:var(--f-mono);font-weight:700;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);margin:0}
.lp-how h3{font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;margin:10px 0 0;color:var(--t-hi)}
.lp-how p{color:var(--t-mid);font-size:.92rem;margin-top:8px}

.lp-client{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.lp-client{grid-template-columns:1fr}}
.lp-client .lp-cell{padding:28px}
.lp-stepper{display:flex;align-items:center;margin-top:20px}
.lp-pt{width:11px;height:11px;border-radius:50%;background:var(--line-2);flex:none;position:relative}
.lp-pt.on{background:var(--brand)}
.lp-pt span{position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--t-lo)}
.lp-ln{flex:1;height:2px;background:var(--line-2)}
.lp-ln.on{background:var(--brand)}
.lp-checklist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.lp-checklist li{display:flex;align-items:center;gap:10px;font-size:.94rem;color:var(--t-hi)}
.lp-checklist svg{width:15px;height:15px;color:var(--brand);flex:none}

@media(prefers-reduced-motion:reduce){
  .lp-cell{animation:none}
  .lp-photo__tag i,.lp-k__dot{animation:none}
}