/*
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║ LA MODALE DES DOCUMENTS LÉGAUX APPORTE SA PROPRE FEUILLE.                ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 *
 * Ces règles vivaient dans `base.css`, et c'est ce qui les cassait. Le
 * composant est monté à TROIS endroits — le pied de page de la vitrine, le
 * tunnel d'inscription, et la carte « Documents légaux » du dashboard — mais
 * `base.css` n'est chargée que par les deux premiers. Dans le dashboard, la
 * modale se rendait donc SANS `position: fixed` ni fond : un bloc nu au milieu
 * de la carte, avec un `iframe` retombé à la hauteur par défaut du navigateur.
 *
 * La feuille est chargée par le composant lui-même (`useHead`, voir
 * `app/components/marketing/LegalDocumentsModal.vue`), pas par une mise en
 * page : c'est la seule façon qu'elle suive ses trois points de montage sans
 * dépendre de qui l'accueille.
 *
 * ⚠️ ELLE NE DÉCLARE QUE DES SÉLECTEURS `.legal-modal…`, ET C'EST CE QUI LA
 * REND LÉGALE DES DEUX CÔTÉS. Les deux familles CSS du projet (la vitrine et
 * le design system du dashboard) partagent sept noms de classes et ne doivent
 * jamais cohabiter — voir `app/composables/useDashboardStylesheets.ts`. Aucun
 * de ces sept noms n'apparaît ici, donc l'ordre d'injection est indifférent et
 * la collision est impossible plutôt qu'improbable.
 * `tests/modale-documents-legaux.test.ts` verrouille les deux propriétés.
 */

/*
 * LES COULEURS SUIVENT LA MOITIÉ OÙ LA MODALE SE TROUVE, EN TROIS NIVEAUX :
 *
 *   1. le canal du site      (--paper-rgb…)  → vitrine et tunnel
 *   2. le canal du dashboard (--ui-white-rgb…) → console
 *   3. un littéral           → jamais atteint dans un contexte réel
 *
 * Le niveau 1 garde la vitrine STRICTEMENT alignée sur `base.css` / `dark.css`
 * — elle ne peut pas en diverger, ce qui est exactement ce qu'on veut d'une
 * modale censée être « la même qu'en bas de page ». Le niveau 2 fait la même
 * chose côté dashboard avec `ui.css`, qui bascule déjà seul en sombre. Le
 * niveau 3 existe pour qu'une chaîne rompue ne s'effondre pas en déclaration
 * invalide, silencieusement ignorée par le navigateur.
 *
 * ⚠️ AUCUNE VALEUR EN DUR EN PREMIER RANG, ET CE N'EST PAS DU STYLE. Le garde
 * de `tests/theme-site.test.ts` qui exige un équivalent sombre pour chaque
 * canal ne balaie QUE `base.css` : un `--lm-…-rgb: 255, 255, 255` déclaré ici
 * lui échapperait en silence, et resterait clair sur fond nuit — précisément
 * le défaut que ce garde existe pour attraper. D'où la chaîne, et d'où
 * l'assertion qui l'impose dans `tests/modale-documents-legaux.test.ts`.
 */
.legal-modal {
  --lm-paper-rgb: var(--paper-rgb, var(--ui-white-rgb, 255, 255, 255));
  --lm-ink-rgb: var(--ink-rgb, var(--ui-text-rgb, 15, 23, 42));
  --lm-brand-rgb: var(--brand-rgb, var(--ui-brand-rgb, 109, 40, 217));

  /*
   * `base.css` pose `body { line-height: 1.55 }`, aucun `body` du dashboard
   * n'en pose (donc `normal`, ~1.2). Sans cette ligne, le même balisage rendait
   * plus serré dans la console. C'est un no-op démontrable sur la vitrine : la
   * valeur est celle dont la modale héritait déjà.
   */
  line-height: 1.55;

  position: fixed;
  inset: 0;
  /*
   * 1000, et non plus 90 : la même échelle que `.ui-modal-layer` du dashboard,
   * puisque les deux familles partagent désormais `useModalStack()`. Deux
   * échelles pour une seule pile, c'est une modale qui reçoit Échap tout en
   * peignant DERRIÈRE celle qu'elle croit surmonter.
   *
   * Inerte sur la vitrine : plus rien n'y siège entre 90 et 1000 (le maximum
   * suivant est 80, l'en-tête collant est à 30). Le composant surcharge de
   * toute façon cette valeur en style en ligne, depuis son rang dans la pile ;
   * celle-ci reste le repli.
   */
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(10px);
}

.legal-modal__dialog {
  width: min(1240px, 100%);
  max-height: min(92vh, 1080px);
}

.legal-modal__card {
  display: flex;
  flex-direction: column;
  min-height: min(86vh, 980px);
  border-radius: 24px;
  border: 1px solid rgba(var(--lm-ink-rgb), 0.08);
  background: rgba(var(--lm-paper-rgb), 0.98);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.2);
  overflow: hidden;
}

.legal-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(var(--lm-ink-rgb), 0.08);
}

.legal-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--lm-brand-rgb), 0.9);
}

.legal-modal__head h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  color: rgba(var(--lm-ink-rgb), 0.94);
  line-height: 1.2;
}

.legal-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/*
 * ⚠️ COPIE ASSUMÉE DE `.btn` (base.css), ET IL FAUT DIRE POURQUOI PLUTÔT QUE
 * DE LAISSER CROIRE À UN OUBLI. Le lien portait `class="btn"` ; `.btn` est une
 * primitive de la famille VITRINE, et le dashboard ne peut pas charger
 * `base.css` (sept noms de classes en collision). Le lien y rendait donc nu.
 * Réutiliser la classe était impossible, la porter dans les deux familles
 * aurait été le mélange qu'on refuse : reste la copie, sous un nom qui
 * appartient à cette modale.
 *
 * DEUX DÉCLARATIONS QUE `.btn` N'AVAIT PAS BESOIN D'ÉCRIRE, et qui sont la
 * moitié du correctif :
 *   `color` + `text-decoration` — `base.css` pose `a { color: inherit;
 *     text-decoration: none }` ; `dashboard/app.css` pose au contraire
 *     `a { color: var(--ui-brand-500) }`. Sans ces deux lignes, « Télécharger »
 *     s'affichait en violet dans la console.
 *   `font-family` — `ui.css` pose `button, input, select, textarea
 *     { font: inherit }`, `base.css` non. C'est ce qui donnait deux polices
 *     différentes au même bouton selon la moitié.
 *
 * L'ombre est un littéral sombre, comme celle de `.legal-modal__card` juste
 * au-dessus : les ombres restent sombres dans les deux thèmes (`base.css` le
 * dit de `--shadow-rgb`), un canal de plus n'y ajouterait rien.
 */
.legal-modal__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--lm-ink-rgb), 0.09);
  background: rgba(var(--lm-paper-rgb), 0.96);
  color: rgba(var(--lm-ink-rgb), 0.94);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.05);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  white-space: nowrap;
}

.legal-modal__download:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.08);
}

.legal-modal__close {
  border: 0;
  background: transparent;
  color: rgba(var(--lm-brand-rgb), 0.9);
  /* Voir le docbloc de `__download` : `ui.css` remet `font: inherit` sur les
     boutons, `base.css` non. Sans cette ligne, le même bouton portait la police
     du navigateur d'un côté et celle du corps de page de l'autre. */
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 8px 0;
}

.legal-modal__viewer {
  flex: 1;
  min-height: 0;
  background: rgba(var(--lm-paper-rgb), 0.92);
}

.legal-modal__iframe {
  width: 100%;
  height: 100%;
  min-height: min(74vh, 860px);
  border: 0;
  display: block;
}

/*
 * Les deux paliers sont RECRÉÉS ici, et non déplacés en bloc : dans `base.css`
 * ces mêmes `@media` hébergent aussi `.footer-grid`, `.brand-title`,
 * `.brand-tagline` et `.panel-meta`, qui n'ont rien à faire dans la feuille
 * d'une modale. Emporter les enveloppes aurait cassé la grille du pied de page.
 */
@media (max-width: 980px) {
  .legal-modal__head {
    flex-direction: column;
  }

  .legal-modal__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .legal-modal {
    padding: 12px;
  }

  .legal-modal__head {
    padding: 16px;
  }
}

/*
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║ UN SEUL JETON A BESOIN DU MODE SOMBRE, ET C'EST MESURÉ.                  ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 *
 * `--ui-white-rgb` et `--ui-text-rgb` BASCULENT seuls dans `ui.css`
 * (255,255,255 → 15,23,42 ; 23,19,37 → 232,236,245) : la chaîne du niveau 2
 * suffit pour eux. `--ui-brand-rgb`, LUI, NE BASCULE PAS — il vaut 109,40,217
 * dans ses trois blocs. Un violet de niveau 1 sur fond nuit donnerait environ
 * 2,4:1 sous le bandeau de 12 px : illisible.
 *
 * ⚠️ NO-OPS DÉMONTRABLES SUR LA VITRINE, et c'est pour ça que le littéral est
 * en repli plutôt qu'en valeur. `--brand-rgb` y vaut DÉJÀ 167,139,250 en
 * sombre (`dark.css`, ses deux blocs) : ces deux règles n'y changent rien, et
 * le littéral n'est lu que par le dashboard. `tests/modale-documents-legaux.test.ts`
 * le relit dans `dark.css` plutôt que de le réécrire — un triplet recopié
 * diverge.
 *
 * MÊME MÉCANIQUE À TROIS ÉTATS QUE `dark.css` ET QUE LE DASHBOARD :
 *   [data-theme=dark]  → sombre forcé
 *   [data-theme=light] → clair forcé (la media query l'exclut)
 *   attribut ABSENT    → la préférence système tranche, sans JavaScript
 * `useTheme()` pose l'attribut sur <html> dans LES DEUX mises en page, et
 * `:root` reste <html> une fois la modale téléportée dans <body>.
 *
 * Les deux blocs sont volontairement identiques et doivent le rester : CSS ne
 * permet pas de partager un groupe de déclarations entre une règle et une
 * media query. Toute modification va dans les deux.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-modal {
    --lm-brand-rgb: var(--brand-rgb, 167, 139, 250);
  }
}

:root[data-theme="dark"] .legal-modal {
  --lm-brand-rgb: var(--brand-rgb, 167, 139, 250);
}