/* Polices auto-hébergées — cf. fonts.css (audit RGPD, 2026-07-27). Chemin relatif : ce fichier
   est utilisé par des pages toutes situées à la racine du site, comme fonts.css lui-même. */
@import url('fonts.css');

:root {
  --bg: #16171C;
  --bg-raised: #1D1F26;
  --bg-card: #20222A;
  --line: #2C2F3A;
  --blue: #4169E1;
  --blue-soft: #5B7CFF;
  --red: #FF3B30;
  --text: #EDEEF2;
  --text-dim: #8B92A8;
  /* ⚠️ RELEVÉ À 4,7:1 MINIMUM LE 2026-08-29 (audit méga M37). Valait #565B6B, soit 2,65:1 sur
     --bg et 2,35:1 sur --bg-card : SOUS la valeur même que l'audit UX du 18-08 avait jugée
     illisible (3,1:1), et le correctif de ce jour-là n'avait été porté qu'à site.css. Ces huit
     pages sont celles qu'on lit longtemps, souvent le soir, et deux d'entre elles portent les
     boutons de paiement.
     ⚠️ NE PAS reprendre le #7E8794 de site.css : les fonds de legal.css sont plus clairs
     (--bg-card #20222A contre #181C22), et #7E8794 y retomberait à 4,37:1 sur les en-têtes du
     tableau de conservation des données, donc sous le seuil AA de 4,5:1. Mesuré, pas déduit.
     #848D9B : 5,34:1 sur --bg, 4,91:1 sur --bg-raised, 4,73:1 sur --bg-card. */
  --text-faint: #848D9B;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* ⚠️ MÊME GABARIT QUE site.css (2026-08-15, écart signalé par Clem sur upgrade.html) : barre de
   68 px, collante, mot-symbole à 56 px. Ces pages avaient leur en-tête à elles (padding de 22 px,
   donc 89 px de haut, logo rabaissé à 44 px par `brand-sm`, pas de collage) et le logo changeait
   visiblement de taille dès qu'on passait du site à une page légale ou à la page d'upgrade.

   Les valeurs sont RECOPIÉES et non partagées : les deux feuilles n'ont pas la même palette, le
   fond translucide vaut ici --bg (#16171C) à 85 % et non celui de site.css (#101216). Si l'une
   bouge, bouger l'autre. */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(22,23,28,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav .wrap {
  max-width: 1160px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text) !important;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important;
}
.logo-mark {
  width: 8px; height: 18px;
  background: var(--red);
  border-radius: 1px;
}
.back-link { font-size: 14px; color: var(--text-dim) !important; }

.legal-content { padding: 64px 0 100px; }

.legal-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blue-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

h1 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.updated {
  color: var(--text-faint);
  font-size: 13.5px;
  font-family: var(--mono);
  margin-bottom: 40px;
}

.callout {
  background: rgba(65,105,225,0.08);
  border: 1px solid rgba(65,105,225,0.3);
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 48px;
  line-height: 1.6;
}
.callout strong { color: var(--blue-soft); }

h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: none; padding-top: 0; }

p {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

ul {
  margin: 0 0 14px 0;
  padding-left: 20px;
}
li {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-left: 4px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
}
.legal-table th {
  background: var(--bg-card);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.legal-table td { color: var(--text-dim); }

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}
.footer-bottom {
  max-width: 1160px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-faint);
  flex-wrap: wrap; gap: 12px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-faint) !important; }

@media (max-width: 600px) {
  h1 { font-size: 28px; }
  .legal-table { font-size: 12.5px; }
  .legal-table th, .legal-table td { padding: 8px 10px; }
}

/* ── Mot-symbole en image (2026-08-02) ──────────────────────────────────────────────────
   Remplace le mot composé en trois <span> colorés. Le fichier est DÉJÀ RECADRÉ sur son
   empreinte visible (cf. assets/wordmark.png) : pas de rognage à faire ici, une hauteur
   suffit et la largeur suit.

   ⚠️ La hauteur porte sur TOUT le visuel, barres de waveform comprises, pas sur le lettrage.
   Celui-ci n'occupe qu'environ un quart de l'image : une hauteur de 56 px donne un nom de la
   taille d'un texte de 14 px. C'est ce qui a imposé de rester sous les 68 px de la barre de
   navigation. */
.brand { display: inline-flex; align-items: center; text-decoration: none !important; flex-shrink: 0; }
.brand img { height: 56px; width: auto; display: block; }

/* Même repli que site.css et au MÊME seuil (940 px) : sous cette largeur le mot-symbole descend à
   44 px pour laisser la place au lien de retour. `nav .brand img` et non `.brand img` : à
   spécificité égale, la règle ci-dessus gagnerait par ordre d'écriture. */
@media (max-width: 940px) {
  nav .wrap { padding: 0 20px; }
  nav .brand img { height: 44px; }
}

/* ---------- CONFIGURATION REQUISE ---------- */
/* Même bloc que dans site.css (2026-08-05). Dupliqué plutôt que factorisé parce que les deux
   feuilles ne partagent PAS leur palette : legal.css a son propre :root, un peu plus clair, et
   ne définit pas --orange. Les valeurs sont donc littérales ici. Si la couleur change, la changer
   AUX DEUX ENDROITS. La couleur n'est pas le seul signal : liseré, fond teinté et gras portent la
   même information.

   ⚠️ TEXTE EN --text ET NON --text-dim, contrairement à la version de site.css. Mesuré dans le
   navigateur : --text-dim (#8B92A8) sur le fond teinté ne donnait que 4,56:1, soit le seuil AA
   frôlé. Passable pour une note marketing, pas pour une CLAUSE des CGV que le client doit
   pouvoir lire sans effort et dont on lui opposera le contenu. */
.req-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(242, 153, 38, 0.07);
  border: 1px solid rgba(242, 153, 38, 0.22);
  border-left: 3px solid #F29926;
  border-radius: 7px;
}
.req-note strong { color: #F29926; font-weight: 700; }
.req-note .req-icon { color: #F29926; flex: 0 0 auto; line-height: 1.5; }
.req-note a { color: var(--blue-soft); font-weight: 600; }

/* Sous-article (2026-08-05, introduit par « 2.1 Configuration requise » dans les CGV/Terms).
   Calqué sur h2 sans son trait de séparation : un sous-titre ne doit pas ouvrir une section
   visuellement, sinon 2.1 paraîtrait de même rang que 3. */
h3 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 600;
  margin-top: 26px;
  margin-bottom: 10px;
  color: var(--text);
}

/* ⚠️ TEXTE EN ATTENTE DE VALIDATION JURIDIQUE (2026-08-14). Marque les passages réintégrés APRÈS
   la relecture d'Astruc & Co — ajoutés au site entre l'envoi des documents et leur retour, donc
   jamais vus par l'avocat (crédit vidéo, mise à niveau dans la devise d'origine, journal de
   désactivation à distance, mention Pro Tools Artist…). Demandé par Clem : « mets le texte en
   rouge sur ces points pour l'instant que je puisse les identifier facilement ».
   Le jour où l'avocat valide : retirer la CLASSE, jamais le texte. */
.legal-pending { color: var(--red); }
/* Les blocs imbriqués (req-note, strong, span) portent leurs propres couleurs, qui battent
   l'héritage : on les force explicitement, sinon l'encadré réintégré resterait gris et
   passerait pour validé. */
.legal-pending p, .legal-pending span, .legal-pending strong,
.legal-pending .req-note, .legal-pending .req-icon { color: var(--red); }
.legal-pending a { color: var(--red); text-decoration: underline; }