:root {
  color-scheme: dark;
  --bg: #07141f;
  --surface: #0e2233;
  --line: #1e4360;
  --text: #eaf4fb;
  --muted: #8fb0c6;
  --accent: #5eeecd;
  /* Hauteur du SVG de la surface : les deux doivent rester d'accord, sinon le motif se répète
     ou se rogne. */
  --hauteur-eau: 77px;
  /* Hauteur de la barre : sert aussi à réserver la place du contenu sous elle, et à décaler le
     menu déplié. */
  --hauteur-barre: 78px;
  /* Gouttiere unique : la barre et le contenu s'alignent sur le meme bord a toutes les tailles.
     Deux valeurs independantes decalaient le logo du bord du contenu sur telephone. */
  --gouttiere: 20px;
}

/* --- Socle commun aux pages --- */

/*
 * Ce qui doit se ressembler d'une page à l'autre vit ici : le corps, la colonne, les titres, les
 * blocs. Chaque page n'a gardé dans son propre bloc que ce qui lui est propre.
 *
 * Le socle était auparavant recopié dans les trois feuilles, écrites séparément : la colonne y
 * mesurait 640 px sur deux pages et 720 sur la troisième, et le titre 34 px contre 26.
 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 28px var(--gouttiere) 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  /* Une seule valeur suffit : en dessous de cette largeur, ce sont les retraits du corps qui
     fixent la colonne, et le plafond ne joue plus. */
  max-width: 720px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 6px;
  font-size: 34px;
  letter-spacing: -0.01em;
}

/*
 * Au-delà du téléphone, les retraits rejoignent ceux de la barre : sur une tablette en portrait,
 * la colonne plafonne à 720 px et ne laissait que 22 px de marge, plus serrés que la gouttière
 * de la barre juste au-dessus.
 */
@media (min-width: 561px) {
  :root {
    --gouttiere: 32px;
  }
}

/* Sur téléphone seulement : à 34 px, un titre long comme celui de la politique de
   confidentialité occupait trois lignes. Les tablettes gardent la taille pleine. */
@media (max-width: 560px) {
  h1 {
    font-size: 28px;
  }
}

.sous {
  margin: 0 0 28px;
  color: var(--muted);
}

section {
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

p {
  margin: 0 0 10px;
}

p:last-child,
ul:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0 0 10px;
  padding-left: 20px;
  color: var(--muted);
}

li {
  margin-bottom: 6px;
}

strong {
  color: var(--text);
}

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

footer {
  margin-top: 32px;
  color: var(--muted);
  font-size: 14px;
}

/*
 * Barre de navigation, commune aux pages du site.
 *
 * Seule la barre vit ici : chaque page garde son propre bloc de styles. Tout rassembler aurait
 * demandé de démêler trois feuilles écrites séparément, pour un site de trois pages — le jeu n'en
 * vaut pas la chandelle. La barre, elle, doit rester identique partout, d'où ce fichier.
 */

/*
 * Barre fixe, sur toute la largeur : logo à gauche, liens à droite.
 *
 * Elle reste au-dessus du menu déplié, qui couvre la page — le bouton doit demeurer atteignable
 * pour le refermer.
 */
.nav-site {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--hauteur-barre);
  /* 24 px au-dessus et en dessous du logo, qui est l'élément le plus haut de la barre. */
  padding: 0 var(--gouttiere);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* La barre étant hors du flux, le contenu passerait dessous sans cette reserve. */
body::before {
  content: '';
  display: block;
  height: var(--hauteur-barre);
}

/* Le menu déplié est un frère de ces deux-là, dans la pile de la barre : sans rang explicite,
   il les recouvrirait, bouton de fermeture compris. */
.nav-marque {
  position: relative;
  z-index: 55;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

/* Vectoriel : le PNG de 32 px, agrandi par la densite de l'ecran, se pixelisait. Le coin arrondi
   est deja dans le dessin, inutile de le decouper en CSS. */
.nav-marque img {
  width: 32px;
  height: 32px;
}

.nav-menu {
  display: flex;
  align-items: center;
  /* Sur la liste, pas seulement sur le lien : c'est l'interligne heritee par l'element de liste
     qui fixe la hauteur de sa ligne, et elle depassait de six pixels le texte qu'elle contient. */
  line-height: 1;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Les puces du corps de page portent six pixels de marge basse, faits pour aerer une liste de
 * texte. Ici, c'est la boite de marge qui est centree dans la barre : le libelle se retrouvait
 * trois pixels trop haut, et l'ecart resistait a tout reglage du centrage lui-meme.
 */
.nav-menu li {
  margin: 0;
}

/*
 * `line-height: 1` colle la boite du lien a son texte. A 1,6, heritee du corps de page, elle
 * depassait de six pixels et le centrage portait sur cette boite trop haute : le libelle se
 * retrouvait cale vers le haut de la barre.
 */
.nav-menu a {
  line-height: 1;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a[aria-current='page'] {
  color: var(--accent);
}

/* Le bouton n'existe que sous le seuil : au-dessus, les trois liens tiennent sans se serrer. */
.nav-burger {
  position: relative;
  z-index: 55;
  display: none;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.nav-burger svg {
  display: block;
}

/* `aria-expanded` porte l'état, l'icône le montre : une seule source de vérité pour les deux. */
.nav-burger .icone-fermer {
  display: none;
}

.nav-burger[aria-expanded='true'] .icone-menu {
  display: none;
}

.nav-burger[aria-expanded='true'] .icone-fermer {
  display: block;
}

/* Le menu couvre la page : la faire défiler derrière lui n'aurait aucun sens. */
body.menu-ouvert {
  overflow: hidden;
}

/* Mobiles et tablettes : le menu se replie derrière le bouton. */
@media (max-width: 1024px) {
  .nav-site {
    flex-wrap: wrap;
  }

  .nav-burger {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* En surimpression plutôt qu'inséré dans le flux : déplier le menu ne doit pas pousser la page
     vers le bas, ni obliger à la faire remonter en le refermant. */
  .nav-menu.ouvert {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    /* Dégage la hauteur de la barre, pour que le premier lien ne passe pas sous le bouton. */
    padding: calc(var(--hauteur-barre) + 24px) 20px 0;
    background: var(--bg);
  }

  .nav-menu li + li {
    border-top: 1px solid var(--line);
  }

  .nav-menu a {
    display: block;
    padding: 18px 4px;
    font-size: 19px;
    color: var(--text);
  }

  .nav-menu a[aria-current='page'] {
    color: var(--accent);
  }
}

/* --- Fond de vagues --- */

/*
 * Les vagues restent au bas de la vue, quel que soit le défilement : le contenu glisse par-dessus
 * l'eau au lieu de s'en éloigner. Attachées au document, elles n'auraient été visibles qu'en bas
 * de page, et jamais pendant la lecture.
 *
 * En couche de fond plutôt qu'en fond du corps de page : un `mask-image` posé sur le corps
 * effacerait le texte avec le motif.
 */
.vagues {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* Bornée : sur un écran très haut, une hauteur en pourcentage aurait noyé la moitié de la vue ;
     sur un écran bas, une hauteur fixe aurait tout occupé. */
  height: clamp(150px, 28vh, 260px);
  z-index: -2;
  pointer-events: none;
  background: url('/vagues.svg') repeat-x left bottom;
  /* Largeur entiere : a 1212,64 px la tuile ne tombe jamais sur la grille de pixels, et le
     navigateur peut laisser un filet clair a chaque repetition. L'etirement est de trois
     centiemes de pour cent. */
  background-size: 1213px auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 85%);
}

/*
 * Surface de l'eau, devant le contenu.
 *
 * Les blocs s'enfoncent sous elle au lieu de s'arrêter net en bas de l'écran.
 *
 * Une seule couche : le SVG porte à lui seul la découpe, l'eau pleine et le motif immergé.
 * Confier le remplissage à une couleur de fond CSS remplirait la boîte entière, courbe comprise,
 * et le bord supérieur redeviendrait une ligne droite.
 */
.ligne-eau {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--hauteur-eau);
  z-index: 5;
  pointer-events: none;
  background: url('/ligne-eau.svg') repeat-x left bottom;
  background-size: 1213px auto;
  /* `drop-shadow` épouse la forme réelle, crête par crête, là où `box-shadow` aurait dessiné
     l'ombre d'un rectangle et trahi la découpe. Portée vers le haut : la surface passe devant le
     contenu, c'est donc lui qu'elle assombrit. */
  filter: drop-shadow(0 -5px 12px rgba(0, 0, 0, 0.55));
}

/*
 * Réserve sous le contenu, de la hauteur de l'eau.
 *
 * La surface étant fixe, elle recouvre le bas de la page quel que soit le défilement : sans cette
 * réserve, les dernières lignes resteraient noyées et illisibles.
 *
 * En pseudo-élément plutôt qu'en marge du corps : chaque page fixe ses propres retraits dans son
 * bloc de styles, chargé après celui-ci, et les écraserait.
 */
body::after {
  content: '';
  display: block;
  height: var(--hauteur-eau);
}

/* --- Le saut du poisson --- */

/*
 * La scene est fixe, calee sur la surface de l'eau. Le poisson passe derriere elle : il sort donc
 * de l'onde et y replonge, au lieu de la survoler.
 */
.saut {
  position: fixed;
  bottom: 0;
  left: var(--depart, 20vw);
  /* Derriere le contenu, devant le motif de fond : c'est un decor, il n'a pas a passer par-dessus
     le texte. La surface de l'eau, elle, reste devant tout et l'avale au depart. */
  z-index: -1;
  width: 0;
  height: 0;
  color: var(--accent);
  pointer-events: none;
}

/*
 * `offset-path` porte la trajectoire, et `offset-rotate` incline le poisson dans son sens de
 * marche : la nage suit la parabole sans qu'aucune rotation ne soit ecrite a la main. Les 180
 * degres viennent du dessin, dont le museau pointe a gauche.
 */
.saut .poisson {
  position: absolute;
  display: block;
  width: 40px;
  /* Invisible au repos : sans mouvement, il flotterait en permanence a la surface, dont il
     depasse d'une vingtaine de pixels. */
  opacity: 0;
  /* Depart et arrivee sous la surface, apex a 160 px : une courbe quadratique n'atteint que la
     moitie de son point de controle, d'ou le -298. */
  offset-path: path('M0 -22 Q 90 -298 180 -22');
  offset-rotate: auto 180deg;
}

/* Saut vers la gauche : la scene entiere est retournee, ce qui inverse aussi le sens de nage
   puisque l'inclinaison suit la trajectoire. */
.saut.miroir {
  transform: scaleX(-1);
}

.saut .poisson svg {
  display: block;
  width: 100%;
  height: auto;
}

.saut.joue .poisson {
  animation: saut 1.9s linear forwards;
}

/*
 * Un saut sur cent, tire au hasard : le poisson passe dore, escorte de trois etoiles. La couleur
 * est portee par la scene entiere, ecumes comprises — poisson et arches se tracent en
 * `currentColor`, il n'y a donc qu'un mot a changer.
 */
.saut.dore {
  color: #f9dc39;
}

/* Meme parabole que le poisson, mais sans son inclinaison : les etoiles restent droites. */
.saut .etoiles {
  position: absolute;
  opacity: 0;
  offset-path: path('M0 -22 Q 90 -298 180 -22');
  offset-rotate: 0deg;
}

.saut.dore.joue .etoiles {
  animation: saut 1.9s linear forwards;
}

.saut .etoile {
  position: absolute;
  display: block;
  width: 7px;
  /* Les reperes ci-dessous visent le centre de l'etoile, pas son coin. */
  margin-top: -3.5px;
  margin-left: -3.5px;
  opacity: 0;
}

.saut .etoile svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Disposees autour du poisson comme sur la maquette, a l'echelle du dessin. */
.saut .etoile-1 {
  top: -23px;
  left: 3px;
  --scintillement: 0.9s;
  --retard-etoile: 0s;
}

.saut .etoile-2 {
  top: -2px;
  left: 32px;
  --scintillement: 1.1s;
  --retard-etoile: 0.35s;
}

.saut .etoile-3 {
  top: 15px;
  left: -18px;
  --scintillement: 0.8s;
  --retard-etoile: 0.6s;
}

/* Des durees inegales, sans quoi les trois battraient a l'unisson. */
.saut.dore.joue .etoile {
  animation: scintiller var(--scintillement) ease-in-out var(--retard-etoile) infinite;
}

/*
 * L'ecume suit une arche qui nait la ou le poisson perce la surface. Un segment court la parcourt
 * d'un pied a l'autre — c'est le decoupage en pelure d'oignon du dessin d'origine.
 *
 * Deux arches par gerbe, du meme point de depart mais de portees inegales, deployees de part et
 * d'autre du passage. Les deux pieds touchant la ligne d'eau, le trait sort de l'onde et y
 * replonge sans qu'aucun fondu ne soit ecrit.
 */
.saut .gerbe {
  position: absolute;
  /* Juste sous la crete : le trait nait dans l'eau, pas posé dessus. */
  bottom: 72px;
  width: 0;
  height: 0;
}

/*
 * La parabole perce la surface a 20 px du depart et a 20 px de l'arrivee, pas a ses extremites :
 * celles-ci sont sous l'eau. Mesure sur la course reelle, le poisson y passe a 325 ms puis a
 * 1580 ms — `offset-distance` avance en longueur de courbe, pas selon le parametre de la courbe,
 * si bien que ces instants ne se deduisent pas du trace.
 */
.saut .gerbe-depart {
  left: 20px;
  --passage: 0.32s;
}

.saut .gerbe-retour {
  left: 160px;
  --passage: 1.58s;
}

/*
 * Un flanc par cote, chacun portant ses deux arches. Les pieds sont ecartes de six pixels du
 * point de passage : le poisson garde ainsi un couloir libre entre les deux gerbes.
 */
.saut .flanc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
}

.saut .flanc-droite {
  margin-left: 6px;
}

/* Renvoye de l'autre cote du passage, d'ou le retournement autour de son pied. */
.saut .flanc-gauche {
  margin-left: -6px;
  transform: scaleX(-1);
  transform-origin: 0 100%;
}

.saut .arche {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
}

.saut .arche svg {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Meme echelle pour les deux, celle du dessin, qui trace l'ecume plus finement que le poisson :
 * huit unites de trait contre douze. A l'ecran, 2,1 px contre 3,2 px.
 */
.saut .arche-large {
  width: 56px;
}

.saut .arche-courte {
  width: 45px;
}

/*
 * `pathLength` ramene chaque arche a cent unites, quelle que soit sa longueur reelle : le segment
 * et sa course s'ecrivent alors dans la meme mesure pour l'une comme pour l'autre.
 *
 * Au repos le pointille est repousse entierement avant le trace, a vingt. Cale sur dix-huit il
 * s'arretait pile sur l'extremite, ou le bout rond dessinait un disque : un point d'ecume restait
 * pose sur l'eau en permanence.
 */
.saut .arche path {
  stroke-dasharray: 18 999;
  stroke-dashoffset: 20;
}

/*
 * Le retard combine deux mesures : l'instant ou le poisson perce la surface, porte par la gerbe,
 * et le decalage propre a chaque arche — jaillies ensemble, les quatre n'auraient forme qu'un
 * seul bloc.
 */
.saut.joue .arche path {
  animation: tracer 0.85s ease-in calc(var(--passage) + var(--decalage)) forwards;
}

.saut .flanc-droite .arche-large {
  --decalage: 0s;
}

.saut .flanc-gauche .arche-large {
  --decalage: 0.03s;
}

.saut .flanc-droite .arche-courte {
  --decalage: 0.07s;
}

.saut .flanc-gauche .arche-courte {
  --decalage: 0.1s;
}

@keyframes saut {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  /* Le fondu se joue sous la surface, ou l'eau masque deja le poisson : il ne nait donc jamais
     en plein air. */
  4% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}





/*
 * Le segment entre par un pied de l'arche et ressort par l'autre. Il s'y raccourcit au fil de la
 * course pour n'etre plus qu'un point a l'entree dans l'eau, et file de plus en plus vite.
 *
 * L'arrivee depasse le trace de deux unites : arretee sur cent, elle laissait un dernier point
 * pose sur l'eau, le bout rond dessinant un disque sur l'extremite exacte du chemin.
 */
@keyframes tracer {
  from {
    stroke-dasharray: 18 999;
    stroke-dashoffset: 20;
  }
  to {
    stroke-dasharray: 1.5 999;
    stroke-dashoffset: -102;
  }
}

/* L'etoile nait d'un point, s'ouvre, puis se referme. */
@keyframes scintiller {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}