/* ===================================================================
   SIPTRUNK.MA — Landings « Cas d'usage »
   Réutilise les jetons du thème siptrunk-hybrid, avec replis.
=================================================================== */

.stlp{
  --lp-navy: var(--navy, #1A237E);
  --lp-navy-ink: var(--navy-ink, #0E1442);
  --lp-accent: var(--accent, #FF6D00);
  --lp-sky: var(--sky, #2D6CDF);
  --lp-ink: var(--ink, #101638);
  --lp-body: var(--body, #2B3350);
  --lp-slate: var(--slate, #5C6685);
  --lp-muted: var(--muted, #8B93AD);
  --lp-wire: var(--wire, #DCE2F2);
  --lp-paper: var(--paper, #F4F7FE);
  --lp-tint: var(--navy-tint, #ECEFFB);
  --lp-radius: var(--radius, 18px);
  --lp-radius-sm: var(--radius-sm, 12px);
  --lp-shadow: var(--shadow, 0 12px 34px rgba(16,22,56,.10));
  --lp-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(16,22,56,.05), 0 4px 14px rgba(16,22,56,.05));
  --lp-font-display: var(--font-display, "Space Grotesk", "Inter", sans-serif);
  --lp-font: var(--font, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);
  --lp-font-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --lp-maxw: var(--maxw, 1160px);
  font-family: var(--lp-font);
  color: var(--lp-body);
}

.stlp *,
.stlp *::before,
.stlp *::after{ box-sizing: border-box; }

.stlp-wrap{ max-width: var(--lp-maxw); margin: 0 auto; padding: 0 22px; }

.stlp h1,.stlp h2,.stlp h3{ font-family: var(--lp-font-display); color: var(--lp-ink); margin: 0 0 12px; line-height: 1.18; }
.stlp p{ margin: 0 0 14px; }

/* ------------------------------------------------------------ HÉRO */
.stlp-hero{
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(45,108,223,.18), transparent 60%),
    linear-gradient(160deg, var(--lp-navy-ink) 0%, var(--lp-navy) 68%, #24309b 100%);
  color: #fff;
  padding: 66px 0 62px;
}
.stlp-hero h1{ color:#fff; font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing:-.015em; }
.stlp-hero-grid{ display:flex; flex-wrap:wrap; gap: 34px; align-items:flex-start; }
.stlp-hero-main{ flex: 1 1 560px; min-width: 300px; }
.stlp-hero-side{ flex: 0 1 330px; min-width: 280px; }

.stlp-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--lp-font-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  color:#dfe5ff; padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.stlp-eyebrow-ic{ width:15px; height:15px; }

.stlp-lede{ color:#cfd7f5; font-size:1.06rem; max-width:640px; }

.stlp-checks{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:10px; }
.stlp-checks li{ display:flex; gap:11px; align-items:flex-start; color:#e6ebff; font-size:.97rem; }
.stlp-ic{ width:19px; height:19px; flex:0 0 auto; margin-top:2px; }
.stlp-checks .stlp-ic{ color: var(--lp-accent); }

/* boutons */
.stlp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:12px; font-weight:600; font-size:.97rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.stlp-btn .stlp-ic{ width:18px; height:18px; margin:0; }
.stlp-btn:hover{ transform: translateY(-2px); }
.stlp-btn-accent{ background: var(--lp-accent); color:#fff; box-shadow: 0 12px 28px rgba(255,109,0,.30); }
.stlp-btn-accent:hover{ background: var(--accent-2, #FF8A33); color:#fff; }
.stlp-btn-ghost{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.30); }
.stlp-btn-ghost:hover{ background: rgba(255,255,255,.16); color:#fff; }
.stlp-btn-light{ background:#fff; color: var(--lp-navy); }
.stlp-btn-light:hover{ color: var(--lp-navy); }
.stlp-btn-sm{ padding:10px 16px; font-size:.9rem; width:100%; background: var(--lp-navy); color:#fff; }
.stlp-btn-sm:hover{ color:#fff; }

.stlp-cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.stlp-cta-center{ justify-content:center; }
.stlp-note{ margin-top:14px; font-size:.83rem; color:#9fabdd; font-family: var(--lp-font-mono); letter-spacing:.03em; }

/* encart socle */
.stlp-card-stack{
  background:#fff; border-radius: var(--lp-radius); padding:24px;
  box-shadow: 0 24px 60px rgba(6,10,40,.34); color: var(--lp-body);
}
.stlp-stack-label{
  display:block; font-family: var(--lp-font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--lp-muted); margin-bottom:14px;
}
.stlp-card-stack ul{ list-style:none; margin:0 0 18px; padding:0; }
.stlp-card-stack li{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--lp-wire); font-size:.94rem; color: var(--lp-ink); }
.stlp-card-stack li:first-child{ border-top:0; }
.stlp-card-stack .stlp-ic{ color: var(--lp-sky); }
.stlp-price{ background: var(--lp-tint); border-radius: var(--lp-radius-sm); padding:14px 16px; margin-bottom:14px; }
.stlp-price strong{ font-family: var(--lp-font-display); font-size:1.5rem; color: var(--lp-navy); display:inline-block; margin-right:6px; }
.stlp-price span{ font-size:.86rem; color: var(--lp-slate); }

/* --------------------------------------------------------- SECTIONS */
.stlp-sec{ padding: 62px 0; background:#fff; }
.stlp-sec-alt{ background: var(--lp-paper); }
.stlp-head{ max-width: 720px; margin: 0 0 34px; }
.stlp-head h2{ font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
.stlp-head p{ color: var(--lp-slate); }
.stlp-kicker{
  display:inline-block; font-family: var(--lp-font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--lp-accent); margin-bottom:10px;
}

.stlp-grid{ display:flex; flex-wrap:wrap; gap:20px; }
.stlp-grid-2 > *{ flex: 1 1 calc(50% - 20px); min-width: 290px; }
.stlp-grid-3 > *{ flex: 1 1 calc(33.333% - 20px); min-width: 255px; }

.stlp-card{
  position:relative; background:#fff; border:1px solid var(--lp-wire);
  border-radius: var(--lp-radius); padding:26px; box-shadow: var(--lp-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stlp-card:hover{ transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.stlp-card h3{ font-size:1.08rem; }
.stlp-card p{ color: var(--lp-slate); font-size:.95rem; margin:0; }

.stlp-badge{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background: var(--lp-navy); color:#fff; margin-bottom:16px;
}
.stlp-badge svg{ width:22px; height:22px; }
.stlp-badge-alert{ background: linear-gradient(135deg, var(--lp-accent), #ff9241); }

.stlp-num{
  display:block; font-family: var(--lp-font-mono); font-size:.78rem; letter-spacing:.1em;
  color: var(--lp-accent); margin-bottom:10px;
}

.stlp-card-link .stlp-more{
  display:inline-block; margin-top:14px; font-weight:600; font-size:.9rem;
  color: var(--lp-sky); text-decoration:none;
}
.stlp-card-link h3 a{ color: var(--lp-ink); text-decoration:none; }

/* preuve */
.stlp-proof{ background: var(--lp-navy-ink); color:#fff; padding:26px 0; }
.stlp-proof-in{ display:flex; gap:16px; align-items:center; justify-content:center; text-align:center; }
.stlp-proof p{ margin:0; color:#dbe2ff; font-size:1rem; }
.stlp-proof-ic{ width:26px; height:26px; color: var(--lp-accent); flex:0 0 auto; }

/* prose éditeur */
.stlp-prose{ max-width: 780px; }
.stlp-prose h2, .stlp-prose h3{ margin-top: 28px; }

/* FAQ */
.stlp-faq{ max-width: 820px; }
.stlp-faq details{
  border:1px solid var(--lp-wire); border-radius: var(--lp-radius-sm);
  background:#fff; padding:16px 18px; margin-bottom:12px;
}
.stlp-faq summary{
  cursor:pointer; font-weight:600; color: var(--lp-ink);
  font-family: var(--lp-font-display); list-style:none;
}
.stlp-faq summary::-webkit-details-marker{ display:none; }
.stlp-faq summary::after{ content:"+"; float:right; color: var(--lp-accent); font-weight:700; }
.stlp-faq details[open] summary::after{ content:"–"; }
.stlp-faq details p{ margin:12px 0 0; color: var(--lp-slate); font-size:.95rem; }

/* CTA final */
.stlp-final{
  background: linear-gradient(150deg, var(--lp-navy) 0%, var(--lp-navy-ink) 100%);
  color:#fff; padding: 64px 0 70px;
}
.stlp-final-in{ text-align:center; max-width:760px; }
.stlp-final h2{ color:#fff; }
.stlp-final p{ color:#cfd7f5; margin-bottom:24px; }

/* barre collante mobile */
.stlp-sticky{ display:none; }

@media (max-width: 782px){
  .stlp-sec{ padding: 46px 0; }
  .stlp-hero{ padding: 46px 0 44px; }
  .stlp-proof-in{ flex-direction:column; }
  .stlp-sticky{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9990;
    gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top:1px solid var(--lp-wire);
    box-shadow: 0 -6px 24px rgba(16,22,56,.10);
  }
  .stlp-sticky .stlp-btn{ flex:1 1 0; padding:13px 10px; font-size:.9rem; }
  .stlp-sticky .stlp-btn-ghost{ background: var(--lp-tint); color: var(--lp-navy); border-color: var(--lp-wire); }
  .stlp-final{ padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce){
  .stlp-btn, .stlp-card{ transition: none; }
  .stlp-btn:hover, .stlp-card:hover{ transform:none; }
}

/* ===================================================================
   PACKS (/pack/…)
=================================================================== */

.stlp-bestfor{
  display:flex; gap:11px; align-items:flex-start;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius: var(--lp-radius-sm); padding:14px 16px; margin:22px 0 24px;
  color:#e6ebff; font-size:.95rem; max-width:600px;
}
.stlp-bestfor .stlp-ic{ color: var(--lp-accent); }

.stlp-price-lg{ text-align:left; }
.stlp-price-lg strong{ display:block; font-size:1.35rem; margin:0 0 4px; line-height:1.25; }
.stlp-price-lg span{ display:block; font-size:.82rem; color: var(--lp-slate); }

.stlp-card-price{ margin-top:14px !important; }
.stlp-card-price strong{ font-family: var(--lp-font-display); color: var(--lp-navy); font-size:1.02rem; }

.stlp-inline-link{ color:#fff; text-decoration:underline; margin-left:8px; white-space:nowrap; }

/* trajets entrant / sortant */
.stlp-flows{ display:flex; flex-wrap:wrap; gap:20px; }
.stlp-flows > *{ flex:1 1 calc(50% - 20px); min-width:290px; }
.stlp-flow{
  background:#fff; border:1px solid var(--lp-wire); border-radius: var(--lp-radius);
  padding:26px; box-shadow: var(--lp-shadow-sm);
}
.stlp-flow h3{ display:flex; align-items:center; gap:10px; font-size:1.05rem; margin-bottom:16px; }
.stlp-flow h3 .stlp-ic{ width:20px; height:20px; }
.stlp-flow-in h3 .stlp-ic{ color: var(--lp-sky); }
.stlp-flow-out h3 .stlp-ic{ color: var(--lp-accent); }
.stlp-flow ol{ margin:0; padding:0; list-style:none; counter-reset: stlpstep; }
.stlp-flow ol li{
  counter-increment: stlpstep; position:relative; padding:0 0 16px 38px;
  color: var(--lp-slate); font-size:.95rem; line-height:1.5;
}
.stlp-flow ol li::before{
  content: counter(stlpstep); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--lp-font-mono); font-size:.72rem; font-weight:500;
  background: var(--lp-tint); color: var(--lp-navy);
}
.stlp-flow ol li::after{
  content:""; position:absolute; left:13px; top:26px; bottom:2px; width:1px; background: var(--lp-wire);
}
.stlp-flow ol li:last-child{ padding-bottom:0; }
.stlp-flow ol li:last-child::after{ display:none; }
.stlp-flow-out ol li::before{ background: var(--accent-soft, #FFF1E4); color: var(--lp-accent); }

/* tableau comparatif */
.stlp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.stlp-table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--lp-wire); border-radius: var(--lp-radius); overflow:hidden;
  font-size:.92rem; min-width:640px;
}
.stlp-table th, .stlp-table td{ padding:13px 14px; text-align:left; border-bottom:1px solid var(--lp-wire); }
.stlp-table thead th{
  background: var(--lp-navy); color:#fff; font-family: var(--lp-font-display);
  font-size:.9rem; font-weight:600; vertical-align:bottom;
}
.stlp-table thead th a{ color:#fff; text-decoration:none; }
.stlp-table tbody th{ font-weight:600; color: var(--lp-ink); background: var(--lp-paper); width:210px; }
.stlp-table td{ color: var(--lp-slate); }
.stlp-table td.is-yes{ color: #1B7F4B; font-weight:600; }
.stlp-table td.is-no{ color: var(--lp-muted); }
.stlp-table tbody tr:last-child th, .stlp-table tbody tr:last-child td{ border-bottom:0; }

.stlp-note-dark{ margin-top:16px; font-size:.88rem; color: var(--lp-slate); }