/* Digital Stoic — landing digitalstoic.net
   Ajouts propres au site, par-dessus base.css (copie du socle design-system).
   Tout passe par les jetons : aucune couleur en dur. */

.links{display:flex; gap:var(--s3); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em}
.links a{color:var(--muted); text-decoration:none}
.links a:hover{color:var(--accent)}

/* La glose sous une conviction : retour au registre neutre */
.reg-conv .gloss{display:block; font-family:var(--sans); font-size:.9rem; color:var(--muted)}

/* Le geste central : impression → intervalle → assentiment.
   Seule la case du milieu porte l'accent : ce qui dépend de nous. */
.gap{
  display:grid; grid-template-columns:1fr 1.15fr 1fr; margin:var(--s4) 0;
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
}
.gap .step{display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3)}
.gap .step + .step{border-left:1px dashed var(--line-strong)}
.gap .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.gap .v{font-size:.95rem; color:var(--muted)}
.gap .mid{background:var(--accent-weak); border-left:2px solid var(--accent) !important; border-right:2px solid var(--accent)}
.gap .mid .k{color:var(--accent)}
.gap .mid .v{font-family:var(--serif); font-size:1.05rem; color:var(--fg)}
.gap .step:not(:last-child) .k::after{content:"  →"; color:var(--faint)}
@media (max-width:620px){
  .gap{grid-template-columns:1fr}
  .gap .step + .step{border-left:0; border-top:1px dashed var(--line-strong)}
  .gap .mid{border-left:2px solid var(--accent) !important; border-right:0}
}