/* Hub d'accueil : composition proposée par la direction artistique, tokens existants uniquement. */
[hidden] { display: none !important; }
  body { background: var(--sim-bg); color: var(--sim-ink); min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
  h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; line-height: var(--lh-tight); }
  p { margin: 0; }
  .eyebrow { font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sim-muted); display: inline-flex; align-items: center; gap: var(--sp-2); }
  .eyebrow .i { color: var(--sim-sky-deep); }

  /* Hero */
  .hero { display: grid; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-5); align-items: center; }
  .hero h1 { font-weight: 800; font-size: var(--fs-2xl); color: var(--sim-navy); margin-top: var(--sp-3); text-wrap: balance; }
  .hero .lead { margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--sim-muted); max-width: 52ch; }
  .hero .art { display: none; color: var(--sim-sky); }
  .hero .art svg { width: 100%; height: auto; display: block; }

  /* Cartes d'accès : chaque carte porte la palette de l'écran qu'elle ouvre */
  .cards { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-6); }
  .card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3) var(--sp-4); align-items: center; min-height: 96px; padding: var(--sp-4); border-radius: var(--r-lg); text-decoration: none; border: 1px solid transparent; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .card:active { transform: translateY(1px) scale(.995); transition-duration: var(--dur-fast); }
  .card:focus-visible { box-shadow: var(--focus); }
  .card .ico { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; }
  .card .ico .i { width: 28px; height: 28px; }
  .card h2 { font-size: var(--fs-lg); font-weight: 700; }
  .card .note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); }
  .card .note .i { width: 1em; height: 1em; }
  .card .path { font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .04em; margin-top: var(--sp-1); opacity: .8; overflow-wrap: anywhere; }
  .card .go { width: var(--tap); height: var(--tap); border-radius: var(--r-full); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out); }
  .card .txt { min-width: 0; display: block; }

  .c-phone { background: var(--os-wall); color: var(--os-text); }
  .c-phone .ico { background: var(--os-glass); color: var(--os-text); }
  .c-phone .go { background: var(--os-text); color: var(--os-wall); }
  .c-lab { background: var(--lab-ink); color: var(--lab-text); border-color: var(--lab-line); }
  .c-lab .ico { background: var(--lab-raise); color: var(--lab-accent); }
  .c-lab .note { color: var(--lab-accent); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
  .c-lab .go { background: var(--lab-accent); color: var(--lab-ink); }
  .c-rev { background: var(--sim-navy); color: var(--sim-card); }
  .c-rev .ico { background: var(--sim-yellow); color: var(--sim-navy); }
  .c-rev .note { color: var(--sim-yellow); }
  .c-rev .go { background: var(--sim-sky); color: var(--sim-navy); }
  @media (hover: hover) {
    .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
    .card:hover .go { transform: translateX(3px); }
  }

  /* Scénario */
  .band { padding-block: var(--sp-6); border-top: 1px solid var(--sim-line); }
  .band > h2 { font-size: var(--fs-xl); color: var(--sim-navy); margin: var(--sp-2) 0 var(--sp-5); }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); counter-reset: s; }
  .steps li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); padding: var(--sp-4); background: var(--sim-card); border: 1px solid var(--sim-line); border-radius: var(--r-md); }
  .steps li::before { content: counter(s); width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--sim-sky-soft); color: var(--sim-navy); font: 800 var(--fs-md) var(--font-display); }
  .steps h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-2); color: var(--sim-navy); }
  .steps h3 .i { color: var(--sim-sky-deep); }
  .steps p { margin-top: var(--sp-1); color: var(--sim-muted); font-size: var(--fs-sm); }

  /* Consentement + garantie */
  .duo { display: grid; gap: var(--sp-4); }
  .box { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); background: var(--sim-card); border: 1px solid var(--sim-line); display: grid; gap: var(--sp-3); align-content: start; }
  .box h2 { font-size: var(--fs-lg); color: var(--sim-navy); display: flex; align-items: center; gap: var(--sp-2); }
  .box h2 .i { color: var(--sim-sky-deep); }
  .box p, .box li { font-size: var(--fs-sm); color: var(--sim-muted); }
  .box ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
  .box.safe { background: var(--sim-navy); border-color: var(--sim-navy); }
  .box.safe h2 { color: var(--sim-yellow); }
  .box.safe h2 .i { color: var(--sim-yellow); }
  .box.safe p { color: var(--sim-sky-soft); }
  .box.safe strong { color: var(--sim-card); }

  footer { padding-block: var(--sp-5) var(--sp-6); border-top: 1px solid var(--sim-line); font: 400 var(--fs-xs) var(--font-mono); color: var(--sim-muted); }

  @media (min-width: 768px) {
    .hero h1 { font-size: var(--fs-3xl); }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .steps li { grid-template-columns: 1fr; }
    .duo { grid-template-columns: 1fr 1fr; }
    .box { padding: var(--sp-5); }
  }
  @media (min-width: 1100px) {
    .hero { grid-template-columns: 1.1fr .9fr; padding-block: var(--sp-8) var(--sp-6); gap: var(--sp-7); }
    .hero .art { display: block; }
    .cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
    .card { grid-template-columns: 1fr auto; grid-template-areas: "ico go" "txt txt"; align-items: start; gap: var(--sp-6) var(--sp-4); min-height: 240px; padding: var(--sp-5); }
    .card .ico { grid-area: ico; width: 60px; height: 60px; }
    .card .go { grid-area: go; justify-self: end; }
    .card .txt { grid-area: txt; align-self: end; }
    .card h2 { font-size: var(--fs-xl); }
  }