/* =========================================================
   kstr — page d'accueil « éditoriale » (1.78)
   Chargée seulement sur index.php ($withHomeCss), après public.css
   (couleurs, police, en-tête et pied de page communs aux pages publiques).
   Nuit par défaut (couleurs de la story « kstr is live »),
   jour quand le visiteur ou son système choisit le clair.
   ========================================================= */

.h3 { font-family: var(--h-sans); color: var(--h-ink); -webkit-font-smoothing: antialiased; }
.h3 a { color: inherit; }
.h3 a:hover { text-decoration: none; }
.h3-mono { font-family: var(--h-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.h3-wrap { margin: 0 auto; padding: 0 var(--h-gut); }
.h3 h1, .h3 h2, .h3 h3 { color: var(--h-ink); font-family: var(--h-sans); margin: 0; }

/* bandeau en direct */
.h3-live { border-bottom: 1px solid var(--h-line); overflow: hidden; white-space: nowrap; }
.h3-live .h3-wrap { overflow: hidden; }
.h3-track { display: flex; justify-content: space-between; gap: 32px; padding: 10px 0; color: var(--h-mute); }
.h3-track > span { white-space: nowrap; }
@media (max-width: 1750px) { .h3-track .h3-opt { display: none; } }
@media (max-width: 1150px) { .h3-track .h3-opt2 { display: none; } }
@media (max-width: 700px) { .h3-track { justify-content: flex-start; } }
.h3-track b { color: var(--h-ink); font-weight: 600; }
.h3-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--h-live); margin-right: 8px; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); vertical-align: 1px; }

/* ouverture */
.h3-hero { position: relative; padding: 70px 0 0; border-bottom: 1px solid var(--h-line); overflow: hidden; }
.h3-ghost { position: absolute; right: 0; padding-right: .12em; top: 20px; font-weight: 900; font-size: clamp(150px, 21vw, 460px); letter-spacing: -.05em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--h-line); pointer-events: none; }
.h3-kick { display: flex; gap: 28px; color: var(--h-mute); position: relative; }
.h3-h1 { font-weight: 900; font-size: clamp(60px, 9.4vw, 210px); line-height: .9; letter-spacing: -.045em; margin-top: 30px !important; max-width: 13em; position: relative; }
.h3-h1 em, .h3-end em { font-style: normal; color: var(--h-acc); }
.h3-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; margin-top: 70px; border-top: 1px solid var(--h-line); position: relative; }
.h3-hero-grid > * { padding: 30px 34px 40px 0; }
.h3-intro p { font-size: 20px; line-height: 1.5; color: var(--h-soft); max-width: 420px; margin: 0; }
.h3-intro .h3-demo { font-size: 15px; margin-top: 22px; }
.h3-demo a { font-weight: 700; border-bottom: 2px solid var(--h-acc); padding-bottom: 2px; }
.h3-demo span { color: var(--h-mute); display: block; margin-top: 8px; }
.h3-door { border-left: 1px solid var(--h-line); padding-left: 34px !important; display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; }
.h3-door .h3-who { color: var(--h-mute); }
.h3-door h2 { font-size: clamp(34px, 3vw, 64px); line-height: 1; letter-spacing: -.035em; font-weight: 800; margin-top: 14px; }
.h3-door > div > span { font-size: 16px; color: var(--h-soft); margin-top: 12px; display: block; line-height: 1.45; }
.h3-go { margin-top: 24px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; border-top: 1px solid currentColor; padding-top: 14px; }
.h3-door:hover .h3-go span:last-child { transform: translateX(4px); }
.h3-go span:last-child { transition: transform .15s; }
.h3-door-c { background: var(--h-door); color: var(--h-door-ink) !important; padding-right: 34px !important; }
.h3-door-c h2 { color: var(--h-door-ink); }
.h3-door-c .h3-who, .h3-door-c > div > span { color: var(--h-door-soft) !important; }

/* chiffre géant */
.h3-big { padding: 110px 0 100px; border-bottom: 1px solid var(--h-line); }
.h3-n { font-weight: 900; font-size: clamp(84px, 14.5vw, 320px); letter-spacing: -.05em; line-height: .85; margin-top: 10px; }
.h3-n small { font-size: .52em; color: var(--h-acc); letter-spacing: -.04em; }
.h3-cap { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--h-line); }
.h3-cap div { padding: 18px 30px 0 0; color: var(--h-soft); font-size: 17px; line-height: 1.45; }
.h3-cap b { display: block; font-size: 34px; color: var(--h-ink); letter-spacing: -.03em; margin-bottom: 6px; }

/* sections */
.h3-sec { padding: 100px 0; border-bottom: 1px solid var(--h-line); }
.h3-sec-h { display: grid; grid-template-columns: minmax(180px, 22%) 1fr; gap: 40px; align-items: start; }
.h3-sec-h .h3-mono { color: var(--h-mute); padding-top: 14px; }
.h3-sec-h h2 { font-weight: 800; font-size: clamp(38px, 4.4vw, 96px); letter-spacing: -.04em; line-height: 1; }
.h3-more { font-size: 16px; font-weight: 700; letter-spacing: 0; border-bottom: 2px solid var(--h-acc); margin-left: 16px; vertical-align: middle; }
.h3-cards { margin-top: 50px; }
.h3-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid var(--h-line); }
.h3-steps > div { padding: 26px 28px 0 28px; border-left: 1px solid var(--h-line); }
.h3-steps > div:first-child { border-left: 0; padding-left: 0; }
.h3-acc { color: var(--h-acc); }
.h3-steps h3 { font-size: 26px; font-weight: 700; margin: 16px 0 10px; letter-spacing: -.02em; }
.h3-steps p { color: var(--h-soft); font-size: 16px; line-height: 1.5; margin: 0; }

.h3-split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--h-line); }
.h3-split > div { padding: 90px 60px 90px 0; }
.h3-split > div + div { padding: 90px 0 90px 60px; border-left: 1px solid var(--h-line); }
.h3-split h2 { font-weight: 800; font-size: clamp(38px, 3.6vw, 76px); letter-spacing: -.04em; line-height: 1.02; margin: 18px 0 34px; }
.h3-split .h3-mono { color: var(--h-mute); }
.h3-split ol { list-style: none; margin: 0; padding: 0; }
.h3-split li { display: grid; grid-template-columns: 54px 1fr; padding: 16px 0; border-top: 1px solid var(--h-line); font-size: 18px; line-height: 1.45; color: var(--h-soft); }
.h3-split li i { font-style: normal; font-family: var(--h-mono); font-size: 13px; color: var(--h-acc); padding-top: 4px; }
.h3-link { display: inline-block; margin-top: 30px; font-weight: 700; border-bottom: 2px solid var(--h-acc); padding-bottom: 4px; }
.h3-og { margin: 22px 0 0; color: var(--h-soft); font-size: 15px; line-height: 1.5; }

.h3-wall { margin-top: 50px; font-weight: 800; font-size: clamp(30px, 4vw, 84px); letter-spacing: -.035em; line-height: 1.12; }
.h3-wall a, .h3-wall b { color: var(--h-ink); font-weight: 800; }
.h3-wall .alt { color: var(--h-soft); }
.h3-wall a:hover { color: var(--h-acc); }
.h3-wall span { color: var(--h-mute); font-weight: 300; margin: 0 4px; }

/* STEALTH */
.h3-stealth { background: var(--h-stealth); color: #fff; padding: 110px 0; font-family: var(--h-sans); }
.h3-stealth-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; }
.h3-stealth h2 { color: #fff; font-weight: 900; font-size: clamp(44px, 5.4vw, 116px); letter-spacing: -.045em; line-height: 1; margin-top: 22px; }
.h3-redact { display: inline-block; background: #fff; width: 3.1em; height: .7em; border-radius: 3px; vertical-align: -.02em; margin: 0 .08em; }
.h3-stealth p { color: #cfc6ec; font-size: 19px; line-height: 1.55; margin: 0; }
.h3-stealth ul { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.h3-stealth li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.h3-stealth li em { font-style: normal; color: #9b8fc4; text-align: right; }
.h3-stealth .h3-mono { color: #9b8fc4; }
.h3-stealth .h3-link { color: #fff; border-color: #c4b5fd; }

/* IA */
.h3-term { margin-top: 50px; background: var(--h-panel); border: 1px solid var(--h-line); border-radius: 6px; font-family: var(--h-mono); font-size: 16px; line-height: 1.9; padding: 30px 34px; color: var(--h-soft); }
.h3-tlabel { color: var(--h-mute); margin-bottom: 10px; }
.h3-term .u { color: var(--h-acc); }
.h3-term .k { color: var(--h-k); }
.h3-three { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid var(--h-line); }
.h3-three div { padding: 20px 30px 0 0; font-size: 16px; color: var(--h-soft); line-height: 1.5; }
.h3-three b { display: block; color: var(--h-ink); font-size: 19px; margin-bottom: 6px; }

/* confiance */
.h3-trust { padding: 100px 0; display: grid; grid-template-columns: minmax(180px, 22%) 1fr 1fr; gap: 40px; border-bottom: 1px solid var(--h-line); }
.h3-trust > .h3-mono { color: var(--h-mute); padding-top: 10px; }
.h3-trust h3 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; }
.h3-rn { font-weight: 300; font-size: 22px; color: var(--h-acc); margin-bottom: 6px; }
.h3-trust p { color: var(--h-soft); font-size: 17px; line-height: 1.5; margin: 0 0 34px; }

/* questions */
.h3-qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; margin-top: 50px; }
.h3-qa > div { border-top: 1px solid var(--h-line); padding: 22px 0 30px; }
.h3-qa b { display: block; font-size: 20px; margin-bottom: 10px; }
.h3-qa p { color: var(--h-soft); font-size: 16px; line-height: 1.55; margin: 0; }
.h3-qa a { color: var(--h-acc); text-decoration: underline; }

/* fin */
.h3-end { padding: 120px 0 80px; }
.h3-end h2 { font-weight: 900; font-size: clamp(50px, 11.6vw, 260px); letter-spacing: -.05em; line-height: .9; }
.h3-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid var(--h-line); }
.h3-row a { padding: 22px 30px 0 0; font-size: 24px; font-weight: 700; display: block; margin-right: 30px; }
.h3-row a strong { display: block; font-weight: 700; }
.h3-row a i { font-style: normal; color: var(--h-acc); }
.h3-row a span { color: var(--h-mute); font-weight: 400; font-size: 16px; display: block; margin-top: 6px; }

/* écrans moyens */
@media (max-width: 1100px) {
  .h3-hero-grid { grid-template-columns: 1fr 1fr; }
  .h3-intro { grid-column: 1 / -1; }
  .h3-door { border-left: 0; padding-left: 0 !important; }
  .h3-door + .h3-door { border-left: 1px solid var(--h-line); padding-left: 34px !important; }
}

/* mobile */
@media (max-width: 700px) {
  .h3-ghost { top: 120px; }
  .h3-n small { display: block; }
  .h3-hero { padding-top: 40px; }
  .h3-kick { flex-direction: column; gap: 6px; }
  .h3-hero-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .h3-hero-grid > * { padding: 24px 0; }
  .h3-door, .h3-door + .h3-door { border-left: 0; border-top: 1px solid var(--h-line); padding-left: 0 !important; min-height: 0; }
  .h3-door.h3-door-c { padding: 24px 18px !important; }
  .h3-big { padding: 70px 0; }
  .h3-cap, .h3-steps, .h3-split, .h3-qa, .h3-three, .h3-row, .h3-stealth-grid, .h3-trust, .h3-sec-h { grid-template-columns: 1fr; }
  .h3-sec-h { gap: 8px; }
  .h3-more { display: block; margin: 14px 0 0; width: max-content; }
  .h3-sec, .h3-trust { padding: 64px 0; }
  .h3-steps > div, .h3-steps > div:first-child { border-left: 0; border-bottom: 1px solid var(--h-line); padding: 20px 0; }
  .h3-split > div, .h3-split > div + div { padding: 56px 0; border-left: 0; }
  .h3-split > div + div { border-top: 1px solid var(--h-line); }
  .h3-stealth { padding: 70px 0; }
  .h3-stealth-grid { gap: 30px; }
  .h3-row a { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--h-line); }
}