/*
  La feuille du site public.

  ## Les couleurs ne sont pas choisies ici

  Elles sont reprises de `src/design/tokens.ts`, la palette de l'application :
  ivoire #F9F6F1, bleu nuit #1B1548, accent #6D45F5, voile d'accent #EDE7FF,
  vert sauge #8FA897, bleu brume #9EB6C4. Le site et l'application doivent avoir
  l'air d'être du même endroit — et une couleur inventée ici deviendrait une
  seconde identité à entretenir.

  ## Deux mises en page, un seul gabarit

  `.page-accueil` respire : un hero, des étapes, de l'air. `.page-document` se
  lit : une colonne étroite, une ligne confortable, aucun effet. Une page où
  quelqu'un vient lire ses droits n'a pas à être belle avant d'être lisible.

  Aucune police distante, aucune animation imposée, aucun script.
*/

:root {
  --ivoire: #f9f6f1;
  --ivoire-profond: #efeae1;
  --encre: #1b1548;
  --encre-douce: #494f98;
  --encre-legere: #6f6b85;
  --accent: #6d45f5;
  --accent-profond: #5732d4;
  --accent-voile: #ede7ff;
  --sauge: #8fa897;
  --brume: #9eb6c4;

  --papier: var(--ivoire);
  --papier-creux: var(--ivoire-profond);
  --texte: var(--encre);
  --texte-doux: var(--encre-legere);
  --lien: var(--accent-profond);
  --trait: #e2dcd0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #150f3d;
    --papier-creux: #1f1856;
    --texte: #ece9f8;
    --texte-doux: #b3aed4;
    --lien: #b9a8ff;
    --accent-voile: #241c63;
    --trait: #332a6b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* Le lien d'évitement : invisible jusqu'à ce qu'on tabule dessus. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papier);
  color: var(--texte);
  padding: 0.75rem 1rem;
  border: 2px solid var(--accent);
  z-index: 10;
}
.evitement:focus {
  left: 0;
}

/* --- En-tête : deux liens, rien de plus ---------------------------------- */

.entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0.75rem;
}

.marque {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--texte);
  font-size: 1.05rem;
}

.concept {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
}

.concept:hover,
.concept:focus-visible {
  color: var(--lien);
  border-bottom-color: var(--lien);
}

/* --- Le contenu ---------------------------------------------------------- */

.contenu {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.page-accueil .contenu {
  max-width: 62rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  margin: 1.25rem 0 0.5rem;
}

h2 {
  font-size: 1.35rem;
  margin: 2.25rem 0 0.5rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.4rem;
}

h4,
h5,
h6 {
  font-size: 1rem;
  margin: 1.25rem 0 0.3rem;
}

p,
ul,
ol {
  margin: 0.75rem 0;
}

li {
  margin: 0.35rem 0;
}

a {
  color: var(--lien);
}

a:focus-visible,
.marque:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--papier-creux);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: var(--papier-creux);
  border-left: 3px solid var(--brume);
}

blockquote p {
  margin: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: 2.5rem 0;
}

/* Un tableau large défile dans son cadre ; la page, jamais. */
.tableau {
  overflow-x: auto;
  margin: 1.25rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--trait);
}

th {
  background: var(--papier-creux);
  font-weight: 700;
}

/* --- L'accueil ----------------------------------------------------------- */

.hero {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0 2rem;
}

.sur-titre {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.hero h1 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(2rem, 7vw, 3rem);
}

.accroche {
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  color: var(--encre-douce);
  margin: 0 0 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .accroche {
    color: var(--texte-doux);
  }
}

.explication {
  max-width: 34rem;
  margin: 0;
}

/*
  L'ambiance autour de Léoni : deux voiles et une trajectoire, tout en CSS.

  Aucune image de plus — le poids du site ne doit pas augmenter pour une
  atmosphère —, et rien qui bouge : la brume est peinte, pas animée. Les
  couleurs sortent des mêmes jetons que le reste (`accent-voile`, `brume`).
*/
.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

/* Le ciel : un halo très doux, derrière l'oiseau. */
.hero-image::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(92%, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, var(--accent-voile) 0%, transparent 68%),
    radial-gradient(circle at 62% 70%, color-mix(in srgb, var(--brume) 35%, transparent) 0%, transparent 62%);
}

/*
  La trajectoire : un arc pointillé, ouvert, que l'oiseau semble suivre. Un
  quart de cercle suffit — une boucle complète ferait décoratif.
*/
.hero-image::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(88%, 24.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Deux pixels et une brume franche : la courbe se lit comme un trajet, là où
     un trait à un pixel passait pour une bordure oubliée. */
  border: 2px dashed color-mix(in srgb, var(--brume) 92%, transparent);
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(-22deg);
}

.hero-image img {
  position: relative;
  width: min(72vw, 21rem);
  height: auto;
}

/* Les trois étapes. Des cartes, pas des slogans. */
.etapes-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.etapes-liste li {
  position: relative;
  margin: 0;
  padding: 1.75rem 1.6rem 1.6rem;
  /* Un fond qui s'éclaircit vers le bas : un relief qu'on sent sans le voir. */
  background: linear-gradient(
    to bottom,
    var(--papier-creux) 0%,
    color-mix(in srgb, var(--papier-creux) 45%, var(--papier)) 100%
  );
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--encre) 7%, transparent);
}

/* Le numéro est assumé : c'est lui qui raconte l'ordre du voyage. */
.etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-profond);
  background: var(--accent-voile);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
}

@media (prefers-color-scheme: dark) {
  .etape-numero {
    color: var(--lien);
  }
}

/* Le titre se détache du numéro par un filet, pas par du gras en plus. */
.etapes-liste h3 {
  margin: 0.9rem 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--trait) 80%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}

.etapes-liste p {
  margin: 0;
}

/*
  La phrase du site.

  « L'attente fait partie du message » dit à elle seule ce qui sépare PITIWIK
  d'une messagerie ordinaire. Elle méritait mieux qu'un encadré en bas de page :
  elle devient une respiration, centrée, au calme, entre deux filets. Sobre —
  aucune couleur de plus, aucun fond criard, rien qui bouge.
*/
.difference {
  margin: 3.5rem 0 0;
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.difference h2 {
  margin: 0 auto 1.25rem;
  /* Assez large pour tenir sur une ligne au-delà du téléphone : la phrase perd
     sa force quand « message. » se retrouve seul en dessous. */
  max-width: 34ch;
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  line-height: 1.25;
}

/* Les quatre refus, en ligne sur grand écran : une liste de renoncements se lit
   mieux d'un coup d'œil qu'en colonne. */
.sans-puces {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.sans-puces li {
  margin: 0;
}

.chute {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  color: var(--encre-douce);
}

@media (prefers-color-scheme: dark) {
  .chute {
    color: var(--texte-doux);
  }
}

.ecrire {
  margin-top: 2.75rem;
}

.contenu .sobre {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* --- La page d'erreur ----------------------------------------------------- */

.erreur {
  padding: 2.5rem 0 3rem;
  max-width: 34rem;
}

.erreur h1 {
  margin-top: 0.35rem;
}

/* --- Pied de page -------------------------------------------------------- */

/*
  Le pied porte tout ce que la loi demande — et rien ne s'y perd si on le rend
  discret : on l'y cherche, on ne le lit pas en passant. Typographie réduite,
  liens sur une ligne, informations sur deux.
*/
.pied {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.75rem;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: 0.82rem;
  line-height: 1.55;
}

.liens-juridiques {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0 0 0.6rem;
  padding: 0;
}

.liens-juridiques li {
  margin: 0;
}

.liens-juridiques a {
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.liens-juridiques a:hover,
.liens-juridiques a:focus-visible {
  color: var(--lien);
  border-bottom-color: var(--lien);
}

.liens-juridiques a[aria-current="page"] {
  color: var(--texte);
  border-bottom-color: var(--texte);
}

.pied p {
  margin: 0.25rem 0;
}

.pied .sobre {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  opacity: 0.85;
}

/* --- Tablette et au-delà -------------------------------------------------- */

@media (min-width: 48rem) {
  body {
    font-size: 1.1rem;
  }

  .entete,
  .contenu,
  .pied {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  /* Le texte à gauche, le pigeon à droite : l'ordre du DOM reste celui de la
     lecture, donc le mobile empile texte puis pigeon sans rien inverser. */
  /*
    Le hero respirait trop : près de soixante-dix pixels de vide entre
    l'introduction et la première étape. On les reprend sur le bas du hero et
    sur le titre qui suit — le mobile, lui, garde son espacement.
  */
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
    padding: 1.5rem 0 1.25rem;
  }

  .etapes > h2 {
    margin-top: 1.25rem;
  }

  .hero-image img {
    width: min(32vw, 24rem);
  }

  .etapes-liste {
    grid-template-columns: repeat(3, 1fr);
  }

  /*
    Le fil du voyage, d'une carte à l'autre. Il n'existe que sur la grille à
    trois colonnes : dès que les cartes s'empilent, il n'aurait plus de sens et
    il disparaît avec la règle qui le porte. Purement décoratif, donc masqué aux
    lecteurs d'écran par construction (aucun texte, aucun contenu réel).
  */
  .etapes-liste li + li::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: -1rem;
    width: 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--brume) 80%, transparent);
  }
}