/* Design system Synaps — la base : la page, le texte, les liens, la mise en
   page. Repris de synaps.re (styles.css, accueil-stripe.css,
   accueil-sections.css). Demande tokens.css avant elle. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--paper); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* une ancre ne passe pas sous la barre collante */
[id] { scroll-margin-top: calc(var(--topbar-h) + 18px); }

body {
  font-family: var(--body-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* garde-fou contre l'encre des flous, que WebKit compte parfois dans la
     largeur de la page (navigateur intégré de Facebook, 09/09). Posé sur
     body, il passe à la fenêtre : la barre reste collante. C'est le seul
     overflow-x: hidden ; ailleurs, overflow-x: clip, sinon le conteneur
     défile et ce qui colle à l'intérieur ne colle plus. */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3 { font-family: var(--title-font); }
fieldset { border: 0; padding: 0; min-width: 0; }
img { max-width: 100%; height: auto; }

/* Un lien dans le texte est souligné : la couleur seule ne suffit pas à le
   distinguer. Ce qui forme déjà un bloc (bouton, navigation, carte) retire
   le trait. */
a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.accent { color: var(--accent-text); }
.fort { font-weight: 800; color: var(--ink); }
.gris { color: var(--texte-gris); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Un fond sombre : l'encre. Le texte orange y reprend l'orange vif. */
.sombre {
  background: var(--ink);
  color: var(--paper);
  --accent-text: var(--orange-vif);
}

/* ---------- La mise en page ----------
   Une colonne de contenu de 1 432 px au plus, avec la marge de côté ; une
   section a 96 px au-dessus (48 px au téléphone), pas de surtitre. */
.colonne {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--pad-x));
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: var(--marge-section) var(--pad-x) 0;
}
.section:last-child { padding-bottom: var(--marge-section); }
/* le dernier sous-bloc d'une section n'ajoute rien en bas : seul l'écart de
   section compte (un panneau d'onglet garde son padding) */
.section > .sous-bloc:last-child:not(.panneau) { padding-bottom: 0; }

/* la grille de 12 colonnes à 16 px de gouttière */
.grille-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }

/* ---------- Les titres ----------
   Le titre du haut de page en 800 ; les titres de section plus petits et
   en 700, jamais extra-gras. Un titre de section est en deux tons : une
   phrase foncée, puis une phrase grise à la même taille, dans le même titre
   (<h2 class="titre-section">Vous en êtes où ? <span class="gris">On part de là.</span></h2>). */
.titre-heros {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--taille-heros);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.titre-heros .accent { display: block; }
.chapeau { margin: 0; font-size: var(--taille-chapeau); line-height: 1.45; max-width: 34ch; }
.note { margin: 0; font-size: var(--taille-note); color: var(--ink-60); }

.titre-section {
  margin: 0 0 var(--marge-titre);
  max-width: 30ch;
  font-family: var(--title-font);
  font-size: var(--taille-section);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.titre-section .gris,
.titre-banniere .gris,
.phrase .gris { color: var(--texte-gris); }
.titre-section--centre { margin-left: auto; margin-right: auto; text-align: center; }

.titre-banniere {
  margin: 0 0 20px;
  font-family: var(--title-font);
  font-size: var(--taille-banniere);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.sous-titre {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--taille-sous-titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/* une phrase mise en avant, en deux tons */
.phrase {
  font-family: var(--title-font);
  font-size: var(--taille-phrase);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.texte { margin: 0; max-width: 52ch; font-size: var(--taille-texte); line-height: 1.55; color: var(--ink-60); }
.texte b, .texte strong { color: var(--ink); }

/* le mot « SYNAPS », tel qu'il est dans la barre du haut */
.marque {
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 760px) {
  .titre-heros { font-size: var(--taille-heros-tel); }
  .section { --marge-section: 48px; }
}
@media (max-width: 420px) {
  /* très petit écran : 10 px de chaque côté, le minimum (Loïc, 27/10) */
  :root { --pad-x: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}