/* =============================================================================
   Numarena — feuille de style des pages publiques et légales
   =============================================================================

   Une seule feuille pour les quatre pages (accueil, conditions, confidentialité,
   suppression de compte) : la charte ne peut pas diverger d'une page à l'autre,
   et le navigateur ne la télécharge qu'une fois pour toute la visite.

   Direction artistique reprise de l'application :
     violet primaire #6A36D9, violet profond #2C1244 → #3F1A6E,
     orange secondaire #FF7D54, dégradé corail → orange du logo,
     surfaces « de verre » (blanc à 5 %, filet à 12 %, grands rayons).

   Deux ambiances : en clair, un document que l'on lit — fond papier, accents de
   marque ; en sombre, l'ambiance de l'app elle-même. Le mode suit le réglage
   du système, sans bouton : personne ne vient ici choisir un thème.

   Aucune police distante. Charger Google Fonts depuis le navigateur du visiteur
   transmettrait son adresse IP à un tiers — sur des pages qui, précisément,
   expliquent ce qu'on fait de ses données, ce serait se contredire. La pile
   système rend un texte natif sur chaque plateforme, et ne coûte aucune requête.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Marque */
  --violet: #6a36d9;
  --violet-deep: #3f1a6e;
  --violet-ink: #2c1244;
  --orange: #ff7d54;
  --coral: #f8747e;

  /* Surfaces et texte — ambiance claire */
  --ground: #fbfaff;
  --ground-2: #f3effc;
  --card: #ffffff;
  --card-2: #faf8ff;
  --ink: #191320;
  --ink-soft: #4a4356;
  --ink-faint: #6f6880;
  --line: #e6e0f2;
  --line-strong: #d5cce8;
  --accent: #5b2cc4;
  --accent-soft: #f0eaff;
  --on-accent: #ffffff;

  /* États */
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --ok: #12683a;
  --ok-soft: #e7f6ed;
  --field: #ffffff;

  /* Élévation — discrète en clair, inexistante en sombre */
  --shadow-sm: 0 1px 2px rgba(28, 16, 51, 0.05);
  --shadow-md: 0 6px 22px rgba(28, 16, 51, 0.08);
  --shadow-lg: 0 18px 48px rgba(28, 16, 51, 0.12);

  /* Rythme */
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --measure: 68ch;
  --shell: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #120e1b;
    --ground-2: #191330;
    --card: rgba(255, 255, 255, 0.045);
    --card-2: rgba(255, 255, 255, 0.03);
    --ink: #f2edfa;
    --ink-soft: #c0b6d6;
    --ink-faint: #948bab;
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.2);
    --accent: #b79bff;
    --accent-soft: rgba(154, 118, 255, 0.16);
    --on-accent: #1b1030;

    --danger: #ff8a80;
    --danger-soft: rgba(255, 92, 92, 0.14);
    --ok: #6fdb9c;
    --ok-soft: rgba(111, 219, 156, 0.14);
    --field: rgba(255, 255, 255, 0.05);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

/* ----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Un ancrage ne doit pas glisser sous la barre collante. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Halo de marque : deux nappes de couleur très diluées, fixées derrière la page.
   C'est ce qui rattache ces documents à l'application sans nuire à la lecture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 12% -8%, rgba(106, 54, 217, 0.11), transparent 62%),
    radial-gradient(46rem 30rem at 96% 4%, rgba(255, 125, 84, 0.09), transparent 60%);
}

@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(60rem 36rem at 10% -10%, rgba(124, 70, 235, 0.3), transparent 64%),
      radial-gradient(48rem 32rem at 98% 2%, rgba(255, 125, 84, 0.13), transparent 62%),
      linear-gradient(180deg, rgba(63, 26, 110, 0.35), transparent 46%);
  }
}

h1, h2, h3 {
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.6rem); line-height: 1.12; margin: 0 0 10px; font-weight: 800; }
h2 { font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem); line-height: 1.3; margin: 44px 0 12px; font-weight: 700; }
h3 { font-size: 1.02rem; margin: 26px 0 6px; font-weight: 650; }

p, li { color: var(--ink-soft); }
p { margin: 0 0 14px; max-width: var(--measure); }
ul { padding-left: 20px; margin: 0 0 16px; max-width: var(--measure); }
li { margin-bottom: 7px; }
li::marker { color: var(--accent); }
strong { color: var(--ink); font-weight: 650; }
em { font-style: normal; color: var(--ink); font-weight: 550; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* Passer la navigation : première tabulation d'un lecteur au clavier. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.16s ease;
}
.skip:focus { top: 12px; }

/* ----------------------------------------------------------------------------
   3. Ossature
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 22px;
}

/* Colonne resserrée : un formulaire n'a pas besoin de la largeur d'un document,
   et une ligne de saisie trop longue se vise mal. */
.shell--narrow { max-width: 660px; }
main.shell--narrow { padding-bottom: 64px; }

/* Précision de bas de bloc : mention, rappel, avertissement secondaire. */
.small { font-size: 0.9rem; }
.callout .small:last-child { margin-bottom: 0; }

/* Barre supérieure : la marque à gauche, la langue à droite. Collante, parce
   qu'un document long ne doit jamais laisser le lecteur sans issue. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand img { width: 26px; height: 26px; display: block; }
.brand span { font-size: 1rem; }

/* Sélecteur de langue */
.switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-2);
}
.switch button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--violet), #8a5cf0);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   4. En-tête de page
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 54px 0 30px;
  overflow: hidden;
}

/* Le « + » du logo, en très grand et très pâle : un filigrane qui signe la page
   sans jamais concurrencer le texte. Purement décoratif, donc hors du flux
   d'accessibilité. */
.hero__mark {
  position: absolute;
  right: -46px;
  top: -34px;
  width: min(260px, 42vw);
  opacity: 0.13;
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .hero__mark { opacity: 0.16; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 13px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--ink-faint);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.eyebrow img { width: 17px; height: 17px; display: block; }

.hero p.lede {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.updated {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   5. Mise en page des documents : sommaire + corps
   -------------------------------------------------------------------------- */
.layout {
  display: grid;
  gap: 34px;
  padding-bottom: 72px;
  align-items: start;
}

@media (min-width: 1000px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 56px;
  }
  .layout__toc { order: 2; }
  .layout__body { order: 1; }
}

.doc { max-width: 74ch; }
.doc > section { scroll-margin-top: 84px; }
.doc h2:first-child { margin-top: 0; }

/* Chaque section numérotée reçoit un liseré discret : le lecteur voit d'un coup
   d'œil où commence et où finit un article. */
.doc section + section {
  margin-top: 8px;
  padding-top: 8px;
}

/* Sommaire */
.toc {
  position: sticky;
  top: 82px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 0.9rem;
}
.toc__title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* `list-style: none` est indispensable, pas décoratif : les titres portent déjà
   leur numéro (« 7. Numarena Premium »), un compteur de liste en ajouterait un
   second. */
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--ink-faint);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
}
.toc a:hover { background: var(--card-2); color: var(--ink); }
.toc a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* Sous 1000 px, le sommaire devient un dépliant posé en tête du document. */
.toc--mobile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0;
  margin: 0 0 26px;
}
.toc--mobile > summary {
  padding: 13px 16px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.toc--mobile > summary::-webkit-details-marker { display: none; }
.toc--mobile > summary::after {
  content: "▾";
  float: right;
  color: var(--ink-faint);
  transition: transform 0.18s ease;
}
.toc--mobile[open] > summary::after { transform: rotate(180deg); }
.toc--mobile ol { list-style: none; margin: 0; padding: 0 10px 12px; max-width: none; }
.toc--mobile a { display: block; padding: 7px 10px; border-radius: 9px; color: var(--ink-soft); text-decoration: none; }
.toc--mobile a:hover { background: var(--card-2); }

@media (min-width: 1000px) {
  .toc--mobile { display: none; }
}
@media (max-width: 999px) {
  .layout__toc { display: none; }
}

/* ----------------------------------------------------------------------------
   6. Composants
   -------------------------------------------------------------------------- */

/* Carte de navigation (accueil) */
.cards {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Les listes du corps d'un document sont bornées à la mesure de lecture ;
     une grille de cartes, non — c'est de la navigation, pas de la prose. */
  max-width: none;
}
.cards li { margin: 0; }
@media (min-width: 720px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.card-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.card-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-md);
}
/* Le bloc de texte de la carte. `min-width: 0` : sans lui, un élément de grille
   refuse de descendre sous la largeur de son plus long mot, et le titre pousse
   la colonne au lieu de revenir à la ligne. */
.card-link > span:last-child { flex: 1 1 auto; min-width: 0; }
.card-link b { display: block; font-size: 1.02rem; color: var(--ink); font-weight: 700; }
/* Le descriptif est le frère du titre, pas n'importe quel <span> de la carte :
   viser `.card-link span` attraperait aussi la pastille et le conteneur. */
.card-link b + span { display: block; font-size: 0.9rem; color: var(--ink-faint); margin-top: 4px; }

/* Pastille d'icône : dégradé de marque, glyphe en texte pour ne charger aucune
   image supplémentaire. */
.card-link .ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--coral), var(--orange));
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(255, 125, 84, 0.28);
}
.card-link .ico--violet {
  background: linear-gradient(140deg, var(--violet), #9a6bf5);
  box-shadow: 0 4px 14px rgba(106, 54, 217, 0.28);
}

/* Panneau (formulaires, encarts) */
.panel {
  margin: 24px 0 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.panel > h2:first-child,
.panel > h3:first-child { margin-top: 0; }

/* Encart d'insistance dans un document */
.callout {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--card-2);
}
.callout p:last-child { margin-bottom: 0; }
.callout--danger { border-left-color: var(--danger); background: var(--danger-soft); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-weight: 650;
  padding: 13px 18px;
  margin-top: 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.16s ease, background 0.16s ease;
}
.btn:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active:not([disabled]) { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--violet), #8a5cf0);
  color: #fff;
  box-shadow: 0 6px 18px rgba(106, 54, 217, 0.26);
}
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.btn--ghost:hover:not([disabled]) { background: var(--card-2); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

/* Champs */
label.field {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 16px 0 6px;
}
input[type="email"],
input[type="password"] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--field);
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Séparateur « ou » */
.sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.sep::before,
.sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Messages d'état */
.msg {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.msg.error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: var(--danger-soft); color: var(--danger); }
.msg.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-soft); color: var(--ok); }

/* Case à cocher d'engagement */
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.check input {
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* Fil d'étapes de la page de suppression */
.steps {
  display: flex;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.steps li::after { content: "›"; color: var(--line-strong); }
.steps li:last-child::after { content: ""; }
.steps li[aria-current="step"] { color: var(--accent); }

/* Qui est connecté */
.who {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.who strong { color: var(--ink); word-break: break-all; }

/* ----------------------------------------------------------------------------
   7. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground-2) 60%, transparent);
  padding: 30px 0 44px;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  justify-content: space-between;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.site-footer a { color: var(--ink-faint); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .legal-line { color: var(--ink-faint); font-size: 0.84rem; }

/* Retour en haut : n'apparaît qu'une fois le lecteur descendu. */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
@media (prefers-color-scheme: dark) {
  .to-top { background: #221a33; }
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ----------------------------------------------------------------------------
   8. Bilinguisme
   --------------------------------------------------------------------------
   Les deux langues coexistent dans le document : le sélecteur bascule une
   classe sur <html>, sans rechargement et sans dupliquer les URL. Le texte
   masqué reste dans le DOM, donc indexable et lisible par un lecteur d'écran
   qui suit la langue choisie. */
/* Une seule paire de règles, et seulement du masquage.
   Rien ne force l'affichage de la langue active : l'élément garde son `display`
   naturel — un <span> reste en ligne au milieu d'une phrase, un <div> reste en
   bloc. C'est ce que faisait auparavant une règle `.inline` séparée, mais dont
   la spécificité (0,2,0) l'emportait sur le masquage (0,1,0) : les fragments en
   ligne des DEUX langues s'affichaient côte à côte — « Confidentialité Privacy »
   dans le pied de page. Ici le masquage est le plus spécifique des deux, donc
   il gagne toujours. */
html:not(.en) [data-lang="en"],
html.en [data-lang="fr"] { display: none; }

/* ----------------------------------------------------------------------------
   9. Confort et impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  body::before, .topbar, .toc, .toc--mobile, .to-top, .switch, .hero__mark { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { max-width: none; padding: 0; }
  .layout { display: block; }
  a { color: #000; text-decoration: underline; }
  /* Les liens internes ne veulent rien dire sur papier ; les externes, si. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  h2 { break-after: avoid; }
  section, li { break-inside: avoid; }
}