/* La feuille des pages publiques — landing, confidentialité, conditions.
 *
 * Écrite à la main, sans Tailwind et sans build. Ces trois pages sont servies par nginx en
 * fichiers statiques : elles ne passent pas par Vite, donc aucune classe utilitaire n'y serait
 * compilée. Les valeurs sont recopiées de `src/index.css` (`@theme`) plutôt qu'importées, et
 * c'est le prix à payer pour des pages qui s'affichent sans un octet de JavaScript.
 *
 * Ce qui garde les deux en accord : les couleurs et les polices sont déclarées une fois ici, en
 * variables portant les mêmes noms que dans l'application. Une retouche de la charte se reporte
 * en modifiant ce bloc, pas en relisant trois fichiers HTML.
 */

:root {
  --background: #15151e;
  --surface: #1e1e2a;
  --border: #2e2e3d;
  --red: #e10600;
  --red-bright: #ff0800;
  --text: #ffffff;
  --muted: #a0a0b0;
  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-sans: 'Titillium Web', system-ui, sans-serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Les bandes en pleine fenêtre (`100vw`) dépassent de la largeur de la barre de défilement :
     `clip` les coupe au bord sans ouvrir de défilement horizontal, là où `hidden` en créerait
     un et casserait au passage le `position: sticky` de l'en-tête. */
  overflow-x: clip;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* La gouttière de 20px est ce qui empêche le texte de toucher le bord sur un téléphone, et la
   largeur maximale ce qui garde une ligne lisible sur un écran large : au-delà d'une
   soixantaine de caractères, l'œil perd le début de la ligne suivante. */
.wrap {
  margin: 0 auto;
  max-width: 760px;
  padding: 0 20px;
}

/* ---------- En-tête et pied, communs aux trois pages ---------- */

/* **La barre reste en haut de l'écran pendant le défilement.**
 *
 * `sticky` et non `fixed` : la barre garde sa place dans le flux, si bien que le contenu qui la
 * suit commence naturellement dessous. `fixed` la sortirait du flux et il faudrait rendre à la
 * page, à la main, la hauteur qu'elle n'occuperait plus — un décalage de 80px à maintenir en
 * deux endroits.
 *
 * Le fond est indispensable : sans lui, le contenu défilerait en transparence derrière une barre
 * dont on ne verrait plus que le texte.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Le casque tient lieu de nom dans la barre. Le mot reste dit par `aria-label` : un lecteur
 * d'écran annonce « The Pitlane » et non « image », et le lien vers l'accueil garde un intitulé
 * — sans quoi il serait muet pour qui ne voit pas le dessin.
 *
 * `alt=""` sur l'image, à l'inverse : c'est le lien qui porte le nom, et le répéter le ferait
 * lire deux fois. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  /* 44px : la hauteur du bouton de la barre, trait compris. Le dessin remplit son fichier —
     aucune marge interne — donc la largeur donnée est bien la hauteur qu'on voit. */
  width: 44px;
  height: auto;
  /* Le dessin regarde à gauche ; retourné, il regarde vers la page plutôt que vers sa sortie.
     Les deux transformations vivent dans la même déclaration : un `transform` posé ailleurs
     remplacerait celui-ci au lieu de s'y ajouter. */
  /* Aucun retournement ni rotation : `icon.png` est déjà dessiné de face et dans le bon sens,
     là où le casque de la scène est vu de trois quarts et penché. */
  transition: transform 0.2s ease-out;
}

.brand:hover img,
.brand:focus-visible img {
  transform: scale(1.06);
}

/* **Le pied de page prolonge la route.** `#232323` est le gris du bitume de `track.svg` : la
 * bande s'arrêtait net sur un fond plus clair, et la coupure se lisait comme une erreur de
 * montage. Avec la même teinte, la route entre dans le pied de page au lieu d'y buter.
 *
 * Pas de `border-top` : c'est le changement de matière qui sépare, et un filet par-dessus une
 * couleur continue ne ferait que souligner une jonction qu'on cherche à effacer.
 */
.site-footer {
  background: #232323;
  padding: 0 0 36px;
  color: #9a9aa6;
  font-size: 14px;
}

/* Le trait qui ouvre le pied de page. Il ne va pas d'un bord à l'autre : il s'arrête à la
 * largeur du contenu, pour se lire comme le haut d'un bloc et non comme une couture entre deux
 * surfaces. La route et le pied de page partagent déjà la même couleur — ce trait dit que le
 * contenu reprend, pas que la matière change.
 *
 * Il est posé sur un conteneur plutôt qu'en `border-top` du pied de page, qui l'aurait fait
 * courir sur toute la largeur de la fenêtre. */
.footer-rule {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 56px);
}

.footer-rule::after {
  content: '';
  display: block;
  height: 1px;
  background: #3d3d45;
}

/* Marque à gauche, liens à droite : la ligne se lit d'un bout à l'autre. Elle passe en colonne
   sur un écran étroit, où deux blocs côte à côte se réduiraient à deux colonnes de mots. */
/* **Trois colonnes, chacune centrée sur elle-même.** La marque, les liens, puis la mention
 * légale : l'ordre va du nom du site à ce qu'il faut bien dire, en passant par ce qu'on peut y
 * faire.
 *
 * Trois parts égales : la rangée se lit comme trois blocs de même poids, et les colonnes
 * tombent aux mêmes verticales d'une page à l'autre quel que soit ce qu'elles portent.
 */
.footer-grid {
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(3, 1fr);
  padding-top: 44px;
  text-align: center;
}

/* Trois lignes par colonne : le casque, le nom, puis l'adresse. La colonne des liens en compte
   trois elle aussi, et la mention légale s'y accorde — les trois blocs ont alors la même assise
   et le pied de page se lit comme une seule rangée. */
.footer-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
}

.footer-contact {
  font-size: 13px;
}

/* La mention de droits ferme le pied de page, sous le paragraphe légal : elle se lit en
   dernier et n'appelle aucune action. */
.footer-copy {
  display: block;
  margin-top: 12px;
  color: #82828e;
  font-size: 12.5px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-brand img {
  display: block;
  width: 40px;
  height: auto;
}

.footer-brand em {
  color: var(--red);
  font-style: normal;
}

/* Les liens l'un sous l'autre : en ligne, ils forceraient la colonne du milieu à une largeur
   que les deux autres n'auraient plus. */
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
}

.site-footer a {
  color: #b4b4bf;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
}

.footer-legal {
  color: #82828e;
  font-size: 12.5px;
  line-height: 1.6;
}

.footer-legal p {
  margin: 0 0 12px;
}

/* Sous 860px, trois colonnes donneraient trois bandes trop étroites pour leur contenu. Elles
   s'empilent, l'ordre du document faisant l'ordre de lecture. */
/* **Le pied de page sur téléphone : trois rangées.**
 *
 * La marque seule en haut, les quatre liens en 2 × 2 dessous, puis la mention légale et la date.
 * Les liens en colonne unique faisaient quatre lignes pour quatre mots courts, ce qui étirait le
 * bas de page sans rien y gagner ; par deux, ils tiennent en deux rangées et le bloc se lit d'un
 * regard.
 */
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 12px clamp(20px, 7vw, 40px);
  }
}

/* Sous 380px — un iPhone SE — « Conditions d'utilisation » et « Confidentialité » côte à côte se
   couperaient en plein mot. Les liens repassent l'un sous l'autre. */
@media (max-width: 380px) {
  .footer-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}



/* **La barre de navigation va d'un bord à l'autre**, comme le hero sous elle : elle n'est
   pas un bloc de contenu mais le cadre de la page. Sa gouttière est celle du hero, si bien
   que la marque tombe sur la même verticale que le titre. Les pages légales gardent
   `.wrap` tel quel, c'est là que sa mesure étroite sert. */
.site-header .wrap {
  max-width: none;
  padding-left: clamp(20px, 3.5vw, 56px);
  padding-right: clamp(20px, 3.5vw, 56px);
  /* 80px de haut, déclarés plutôt que déduits du contenu : changer la taille du bouton ne
     déplace donc plus la barre. Le padding vertical repasse à zéro, sinon il s'ajouterait
     aux 80px. */
  height: 80px;
  padding-top: 0;
  padding-bottom: 0;
}

/* **L'emplacement partagé du coin droit.** Les deux contenus y sont superposés en
   grille — même cellule, même place — de sorte que l'échange ne déplace rien autour : la
   barre ne change pas de hauteur quand l'un remplace l'autre. */
.header-slot {
  display: grid;
  align-items: center;
  justify-items: end;
}

.header-slot > * {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Sur une page de texte, les deux cohabitent : la barre n'a rien à échanger, faute d'un bouton
   plus haut qui disparaîtrait au défilement. La grille superposée laisse donc la place à une
   simple rangée. */
.header-slot--static {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-slot--static > * {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* En haut de page : la langue se voit, le bouton attend. `visibility` en plus de
   l'opacité, sinon le bouton invisible resterait cliquable par-dessus les liens de
   langue. */
.header-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

/* Une fois le bouton du hero passé, les rôles s'inversent. */
:root[data-scrolled] .lang {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}

:root[data-scrolled] .header-cta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Les deux langues, côte à côte. Celle qu'on lit est pleine, l'autre en retrait : c'est ce
   qui dit où l'on se trouve sans avoir à l'écrire. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Le drapeau montre, le sigle dit : les deux ensemble, parce qu'un drapeau désigne un
   pays et non une langue — celui du Royaume-Uni ne peut pas porter « anglais » tout seul.
   `alt=""` sur l'image puisque le sigle à côté l'énonce déjà ; l'annoncer deux fois
   ferait lire « drapeau anglais EN ». */
.lang-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 7px 11px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Les drapeaux de l'application sont déjà ronds et cadrés en 16×16 : rien à recadrer ici.
   Le léger voile sur la langue qu'on ne lit pas accompagne le gris du sigle, pour que la
   paire se lise d'un coup comme active ou en retrait. */
.lang-option img {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.lang-option:hover img,
.lang-option:focus-visible img,
.lang-option.is-current img {
  opacity: 1;
}

.lang-option:hover,
.lang-option:focus-visible {
  color: var(--text);
  background: #252533;
}

.lang-option.is-current {
  color: var(--text);
  background: #252533;
}

/* Rien ne s'échange en fondu pour qui a demandé que rien ne bouge : la bascule reste, elle
   est utile, mais elle est instantanée. */
@media (prefers-reduced-motion: reduce) {
  .header-slot > * {
    transition: none;
  }
}

/* 44px : la hauteur de cible tactile recommandée. Le `padding-bottom` compense le trait de
   4px du bouton — `align-items: center` centre le texte dans la boîte entière, trait
   compris, si bien qu'il paraît posé trop bas. */
.site-header .cta {
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 4px;
}

/* **L'emplacement partagé du coin droit.** Les deux contenus y sont superposés en
   grille — même cellule, même place — de sorte que l'échange ne déplace rien autour : la
   barre ne change pas de hauteur quand l'un remplace l'autre. */
.header-slot {
  display: grid;
  align-items: center;
  justify-items: end;
}

.header-slot > * {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* En haut de page : la langue se voit, le bouton attend. `visibility` en plus de
   l'opacité, sinon le bouton invisible resterait cliquable par-dessus les liens de
   langue. */
.header-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

/* Une fois le bouton du hero passé, les rôles s'inversent. */
:root[data-scrolled] .lang {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}

:root[data-scrolled] .header-cta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Les deux langues, côte à côte. Celle qu'on lit est pleine, l'autre en retrait : c'est ce
   qui dit où l'on se trouve sans avoir à l'écrire. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Le drapeau montre, le sigle dit : les deux ensemble, parce qu'un drapeau désigne un
   pays et non une langue — celui du Royaume-Uni ne peut pas porter « anglais » tout seul.
   `alt=""` sur l'image puisque le sigle à côté l'énonce déjà ; l'annoncer deux fois
   ferait lire « drapeau anglais EN ». */
.lang-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 7px 11px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Les drapeaux de l'application sont déjà ronds et cadrés en 16×16 : rien à recadrer ici.
   Le léger voile sur la langue qu'on ne lit pas accompagne le gris du sigle, pour que la
   paire se lise d'un coup comme active ou en retrait. */
.lang-option img {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.lang-option:hover img,
.lang-option:focus-visible img,
.lang-option.is-current img {
  opacity: 1;
}

.lang-option:hover,
.lang-option:focus-visible {
  color: var(--text);
  background: #252533;
}

.lang-option.is-current {
  color: var(--text);
  background: #252533;
}

/* Rien ne s'échange en fondu pour qui a demandé que rien ne bouge : la bascule reste, elle
   est utile, mais elle est instantanée. */
@media (prefers-reduced-motion: reduce) {
  .header-slot > * {
    transition: none;
  }
}

/* 44px : la hauteur de cible tactile recommandée. Le `padding-bottom` compense le trait de
   4px du bouton — `align-items: center` centre le texte dans la boîte entière, trait
   compris, si bien qu'il paraît posé trop bas. */
.site-header .cta {
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 4px;
}

/* ---------- Le bouton d'entrée dans l'application ---------- */

/* **Le bouton de l'application, recopié à l'identique.** Il vient de `src/components/Button.tsx`,
   variante `primary`, et trois traits font son allure :

     • l'épaisseur basse — `inset 0 -4px 0 0`, une ombre *interne* et non une bordure : une
       bordure agrandirait la boîte et décalerait le texte d'un pixel vers le haut ;
     • le rayon de 16px, le `rounded-2xl` de Tailwind ;
     • l'enfoncement au clic — le bouton descend de la hauteur de son trait, qui disparaît en
       même temps. C'est ce qui lui donne sa matière.

   La typographie est celle du corps de texte, `--font-sans` (Titillium Web) : c'est ce que fait
   l'application, où `font-sans` est écrit sur le bouton. Barlow Condensed reste aux titres. */
.cta {
  display: inline-block;
  /* **Le même arrondi à l'œil, pas à la mesure.** Dans l'application le bouton fait toute la
     largeur et 56px de haut, avec 16px de rayon. Recopier ces 16px sur un bouton de 44px
     donnerait un angle proportionnellement plus rond — le rayon se lit par rapport à la
     hauteur, pas dans l'absolu. 12px pour 44px de haut est le même rapport, donc le même
     rendu. */
  border-radius: 12px;
  /* `--color-red-500` et son trait, les valeurs exactes de la variante `primary` du login. */
  background: var(--red);
  box-shadow: inset 0 -4px 0 0 #7c0906;
  padding: 14px 28px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.24px;
  text-decoration: none;
  /* Les libellés de l'application sont écrits en capitales dans le texte lui-même — `'CONNECT'`,
     `'GET STARTED'`. Ici c'est la feuille qui s'en charge : le HTML garde une casse normale,
     lisible pour un lecteur d'écran, qui épellerait sinon les sigles. */
  text-transform: uppercase;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out;
}

.cta:hover,
.cta:focus-visible {
  filter: brightness(1.12);
}

/* Enfoncé : le bouton descend de l'épaisseur de son trait, et le trait s'efface. Les deux
   ensemble — l'un sans l'autre donnerait un bouton qui glisse, pas un bouton qu'on presse. */
.cta:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Le second d'une paire, blanc — la variante `secondary` de `Button.tsx`, celle que
   `AuthActions` pose sous le bouton rouge sur l'écran d'accueil de l'application. Fond blanc,
   encre sombre, trait `#9E9E9E`. */
.cta--secondary {
  background: #fff;
  box-shadow: inset 0 -4px 0 0 #9e9e9e;
  color: var(--background);
}

/* La variante grise — `ghost` dans `Button.tsx`, fond `#252533` et trait `#15151E`. Elle porte
   une action de repli : quitter, annuler. Conservée pour ce cas, même si aucun bouton de cette
   page ne s'en sert aujourd'hui. */
.cta--ghost {
  background: #252533;
  box-shadow: inset 0 -4px 0 0 #15151e;
}

/* ---------- Pages de texte (confidentialité, conditions) ---------- */

/* **Les pages de texte : confidentialité, conditions.**
 *
 * Elles sont écrites comme un document, pas comme une page de site — une colonne, des titres,
 * des paragraphes, et rien d'autre. Ni encadrés, ni tableaux, ni filets : ce sont des ornements
 * qui font paraître le texte plus important qu'il ne se lit, et un lecteur qui cherche une
 * information précise les traverse sans les voir.
 *
 * La typographie est celle du reste du site — Barlow Condensed aux titres, Titillium au corps —
 * mais la mesure y est plus étroite et l'interligne plus généreux : on lit ces pages ligne à
 * ligne, là où la page d'accueil se parcourt.
 */
.doc {
  max-width: 68ch;
  padding-top: 56px;
  padding-bottom: 72px;
}

.doc h1 {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.doc .updated {
  margin: 0 0 40px;
  color: #6f6f7d;
  font-size: 13px;
}

.doc h2 {
  margin: 40px 0 10px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.doc p,
.doc li,
.doc dd {
  color: #c9c9d4;
  font-size: 15.5px;
  line-height: 1.75;
}

.doc p {
  margin: 0 0 14px;
}

.doc ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.doc li {
  margin-bottom: 6px;
}

.doc a {
  color: #ff615c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* La liste des données : un terme, sa raison d'être. Elle a remplacé un tableau à trois
   colonnes, qui demandait un défilement horizontal sur téléphone et se lisait mal partout. */
.doc dl {
  margin: 0 0 14px;
}

.doc dt {
  margin-top: 16px;
  color: var(--text);
  font-weight: 600;
  font-size: 15.5px;
}

.doc dd {
  margin: 2px 0 0;
}

.doc .keep {
  color: #82828e;
}