#sll {
  /* Couleurs du branding. */
  --noir:    #0C0C0C;
  --carte:   #151513;
  --ligne:   #2E2E2A;
  --jaune:   #FFD600;
  --blanc:   #F4F4F0;
  --gris:    #8C8C84;

  --titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 2px;
  --t: 180ms cubic-bezier(.2,.8,.2,1);

  box-sizing: border-box;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--titre);
  -webkit-font-smoothing: antialiased;
  padding: 0 20px calc(60px + env(safe-area-inset-bottom));
}
#sll *, #sll *::before, #sll *::after { box-sizing: border-box; }

/* ---------- Fond plein ecran ----------
   GHL enferme le bloc dans une colonne centree. Sans ca, des bandes
   blanches apparaissent a gauche et a droite. Ce pseudo-element peint
   le fond sur tout l'ecran, sans toucher a la mise en page ni creer
   de barre de defilement horizontale. */
#sll { position: relative; z-index: 0; }
#sll::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--noir);
  z-index: -1;
}

#sll .wrap { width: 100%; max-width: 680px; margin: 0 auto; }

/* ---------- Entete ---------- */
#sll .top {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 0 0;
}
#sll .mark {
  display: block;
  width: 7px; height: 30px;
  background: var(--jaune);
  transform: skewX(-16deg);
  flex: none;
}
#sll .top b {
  display: block;
  font-size: 15px; font-weight: 800; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase; color: var(--blanc);
}
#sll .top i {
  display: block;
  font-family: var(--mono); font-style: normal;
  font-size: 8.5px; font-weight: 500; line-height: 1;
  letter-spacing: .34em; text-transform: uppercase;
  margin-top: 4px; color: var(--gris);
}

/* ---------- Chemin des 5 activites ---------- */
#sll .chemin {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 2.1;
  margin: 0 0 22px;
}
#sll .chemin i { font-style: normal; color: var(--jaune); padding: 0 6px; }

/* ---------- Hero ---------- */
#sll .hero { padding: 78px 0 64px; }
#sll h1 {
  font-size: clamp(34px, 8vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
#sll .chapo {
  font-size: clamp(16px, 3.6vw, 18px);
  line-height: 1.55;
  color: var(--blanc);
  margin: 22px 0 0;
  max-width: 50ch;
}

/* ---------- Boutons ---------- */
#sll .cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 34px; margin-top: 32px;
  background: var(--jaune); color: var(--noir);
  border: 1px solid var(--jaune); border-radius: var(--r);
  font-size: 17px; font-weight: 800; text-decoration: none;
  transition: filter var(--t), transform var(--t);
}
#sll .cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
#sll .cta:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
#sll .rassure {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--gris); margin: 14px 0 0;
}

/* ---------- Sections ---------- */
#sll section { padding: 52px 0; border-top: 1px solid var(--ligne); }
#sll h2 {
  font-size: clamp(23px, 5.2vw, 31px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
#sll p.txt {
  font-size: 16px; line-height: 1.62; color: var(--gris);
  margin: 18px 0 0; max-width: 52ch;
}
#sll p.txt b { color: var(--blanc); font-weight: 600; }

/* ---------- Etapes ---------- */
#sll ol { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 2px; }
#sll ol li {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 20px 18px;
  font-size: 15.5px; line-height: 1.5;
}
#sll ol li em {
  font-family: var(--mono); font-style: normal; font-size: 12px;
  color: var(--jaune); padding-top: 3px; flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Liste en slashs ---------- */
#sll ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
#sll ul li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.55; }
#sll ul li::before {
  content: "/"; font-family: var(--mono); color: var(--jaune); flex: none;
}
#sll ul li span { color: var(--gris); }

/* ---------- Signature ---------- */
#sll .sign {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--gris); margin: 24px 0 0;
}

/* ---------- Pied ---------- */
#sll footer {
  border-top: 1px solid var(--ligne);
  padding: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gris);
}
#sll footer a { color: var(--gris); text-underline-offset: 3px; }
#sll footer a:hover { color: var(--jaune); }

@media (prefers-reduced-motion: reduce) {
  #sll *, #sll *::before, #sll *::after { transition-duration: 1ms !important; }
}