/* ===== Tokens ===== */
  :root{
    --void: #0a0a0d;
    --panel: #131318;
    --panel-2: #1a1a21;
    --line: #2c2c34;
    --line-soft: #1f1f26;
    --bone: #ece7df;
    --bone-dim: #9a958d;
    --ice: #8fd8d1;
    --brass: #c9a063;

    --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --spine: 1px;
    --maxw: 640px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ -webkit-text-size-adjust:100%; }

  body{
    background:var(--void);
    color:var(--bone);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
  }

  .needle{ transform-origin: 100px 100px; }

  @media (prefers-reduced-motion: no-preference){
    .needle{ animation: drift 9s ease-in-out infinite; }
    .pulse{ animation: pulse 3.4s ease-in-out infinite; }
  }
  @keyframes drift{
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2.2deg); }
  }
  @keyframes pulse{
    0%, 100% { opacity:.55; }
    50% { opacity:1; }
  }

  a{ color: var(--ice); text-decoration: none; }
  a:hover{ text-decoration: underline; }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--ice);
    outline-offset: 3px;
  }

  /* ===== Spine: ligne verticale qui traverse la page, comme l'axe N-S du logo ===== */
  .spine-track{
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:var(--spine);
    background: linear-gradient(to bottom, transparent, var(--line) 4%, var(--line) 96%, transparent);
    transform: translateX(-50%);
    z-index:0;
  }

  .page{ position:relative; }

  /* ===== Eyebrow cardinal (N / E / S / W) ===== */
  .bearing{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    padding: 2.4rem 0 1.1rem;
    position:relative;
    z-index:1;
  }
  .bearing__mark{
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .18em;
    color: var(--brass);
    background: var(--void);
    padding: 0 .6rem;
  }
  .bearing__label{
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bone-dim);
    background: var(--void);
    padding: 0 .4rem;
  }

  /* ===== Hero ===== */
  .hero{
    position:relative;
    z-index:1;
    padding: 3.4rem 1.4rem 2.6rem;
    text-align:center;
    max-width: var(--maxw);
    margin: 0 auto;
  }

  .compass{
    width: min(64vw, 220px);
    margin: 0 auto 1.4rem;
    display:block;
  }
  .compass .hair{ stroke: var(--line); fill:none; }
  .compass .hair-soft{ stroke: var(--line-soft); fill:none; }
  .compass .star{ fill: var(--bone); }
  .compass .star-dim{ fill: var(--panel-2); }
  .compass .tick{ stroke: var(--bone-dim); }
  .compass .core{ fill: var(--brass); }

  .wordmark{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone);
  }
  .wordmark span{ color: var(--ice); }

  .tagline{
    margin-top: .85rem;
    font-size: .98rem;
    color: var(--bone-dim);
    max-width: 30ch;
    margin-inline:auto;
  }

  .cta-row{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    margin-top: 1.8rem;
  }
  .btn{
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .06em;
    padding: .85rem 1.2rem;
    border-radius: 2px;
    display:block;
  }
  .btn--primary{
    background: var(--bone);
    color: var(--void);
    border: 1px solid var(--bone);
  }
  .btn--primary:hover{ background: var(--ice); border-color: var(--ice); text-decoration:none; }
  .btn--ghost{
    border: 1px solid var(--line);
    color: var(--bone-dim);
  }
  .btn--ghost:hover{ border-color: var(--brass); color: var(--brass); text-decoration:none; }

  /* ===== Sections ===== */
  section.block{
    position:relative;
    z-index:1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.4rem 2.6rem;
  }

  h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    margin-bottom: .9rem;
    text-align:center;
  }

  p{ color: var(--bone-dim); font-size: .95rem; }
  .lede{ text-align:center; max-width: 34ch; margin: 0 auto 1.6rem; }

  /* Caractéristiques — liste sans numérotation générique, en relevés (comme des points de carte) */
  .traits{
    border-top: 1px solid var(--line-soft);
  }
  .trait{
    display:flex;
    gap: 1rem;
    align-items:flex-start;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .trait__deg{
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--brass);
    flex: 0 0 3.2rem;
    padding-top: .15rem;
  }
  .trait__body h3{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .95rem;
    color: var(--bone);
    margin-bottom: .25rem;
  }
  .trait__body p{ font-size: .88rem; }

  /* Terminal / installation */
  .terminal{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow:hidden;
  }
  .terminal__bar{
    display:flex;
    align-items:center;
    gap:.4rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
  }
  .dot{ width:8px; height:8px; border-radius:50%; background: var(--line); }
  .terminal__title{
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--bone-dim);
    margin-left: .4rem;
    letter-spacing: .05em;
  }
  .terminal__body{
    padding: 1rem .9rem 1.1rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--bone);
    overflow-x:auto;
  }
  .terminal__body .muted{ color: var(--bone-dim); }
  .terminal__body .accent{ color: var(--ice); }
  .terminal__body .line{ white-space:pre; }
  .note{
    margin-top:.9rem;
    font-size: .8rem;
    color: var(--bone-dim);
  }
  .note code{
    font-family: var(--font-mono);
    color: var(--brass);
  }

  /* Liens / footer */
  .links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap: .55rem;
  }
  .links a{
    display:flex;
    justify-content:space-between;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--bone);
    font-size: .9rem;
  }
  .links a:hover{ border-color: var(--ice); text-decoration:none; }
  .links small{ color: var(--bone-dim); font-family: var(--font-mono); font-size: .72rem; }

  footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding: 2.2rem 1.4rem 3rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--bone-dim);
  }
  footer .callsign{ color: var(--brass); }

  /* ===== Tablette / desktop ===== */
  @media (min-width: 720px){
    .hero{ padding-top: 5rem; }
    .cta-row{ flex-direction:row; justify-content:center; }
    .btn{ display:inline-block; }
    .traits{ }
    h2{ font-size: 1.8rem; }
  }