/* ==========================================================================
   Pages juridiques (CG, mentions légales, politique de confidentialité,
   annexe de sous-traitance).

   Ces pages sont générées à partir des fichiers Markdown de juridique/ par
   lib/pages-juridiques.js — il n'y a pas de fichier .html à modifier : pour
   changer un texte, on modifie le .md.

   Habillage : thème solaire. Toutes les couleurs passent par les jetons
   --so-* de couleurs.css, qui se recalculent à partir de la couleur du
   site choisie en base. Aucune couleur en dur ici : si la couleur du site
   change, ces pages suivent toutes seules (c'est js/couleurs-site.js qui pose
   --bg-start / --bg-end au chargement).
   ========================================================================== */

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  margin: 0; padding: 40px 20px 60px;
  background: var(--so-bg, #FBF8F4);
  color: var(--so-text, #1C1917);
  line-height: 1.7;
}

/* Halos très discrets derrière la plaque, teintés de l'accent du site.
   Fixes et sans backdrop-filter : c'est une grande plaque statique. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 38% at 82% -8%,
      color-mix(in srgb, var(--so-accent, #FF6B35) 16%, transparent), transparent 65%),
    radial-gradient(45% 30% at 8% -4%,
      color-mix(in srgb, var(--so-accent, #FF6B35) 10%, transparent), transparent 60%),
    radial-gradient(50% 40% at 78% 88%,
      color-mix(in srgb, var(--so-accent-end, #C0392B) 9%, transparent), transparent 62%);
}

main {
  max-width: 760px; margin: 0 auto;
  background: var(--so-surface, #FFFFFF);
  border: 1px solid var(--so-border, #ECE8E1);
  border-radius: 16px; padding: 36px 32px;
  box-shadow: var(--so-shadow-md, 0 12px 32px -10px rgba(28,25,23,0.12));
}

h1 { font-size: 1.5rem; margin: 0 0 4px; line-height: 1.3; }
h2 { font-size: 1.05rem; margin: 30px 0 8px; color: var(--so-text, #1C1917); }
h3 { font-size: 0.98rem; margin: 22px 0 6px; color: var(--so-text, #1C1917); }
p, li { font-size: 0.95rem; margin: 8px 0; }
ul, ol { padding-left: 22px; margin: 8px 0; }
strong { color: var(--so-text, #1C1917); }
a { color: var(--so-accent-deep, #2563eb); }
hr { border: 0; border-top: 1px solid var(--so-border, #ECE8E1); margin: 28px 0; }

/* Ligne de version, en tête de chaque document (blockquote du Markdown).
   Volontairement nue : pas de cadre, pas de fond, pas de filet de couleur —
   c'est une mention de service, elle ne doit pas attirer l'œil avant le titre. */
blockquote {
  margin: 14px 0 22px; padding: 0; border: 0; background: none;
  color: var(--so-text-2, #57534E); font-size: 0.85rem; line-height: 1.6;
}
blockquote p { margin: 2px 0; font-size: 0.85rem; }
/* La ligne de version suit immédiatement le titre : elle reste collée à lui. */
h1 + blockquote { margin-top: 2px; }

/* Encadré « En bref » : le résumé en langage ordinaire, en tête de document.
   Lui, au contraire de la ligne de version, DOIT attirer l'œil — c'est souvent
   la seule chose qu'une direction d'école lira en entier.
   Bord clair sur les quatre côtés, jamais un filet de couleur au bord gauche
   (voir la règle du thème solaire). */
blockquote.en-bref {
  margin: 18px 0 26px;
  padding: 16px 18px;
  background: var(--so-surface-2, #FDF8F3);
  border: 1px solid var(--so-border, #ECE8E1);
  border-radius: 14px;
  color: var(--so-text, #1C1917);
  font-size: 0.95rem;
}
blockquote.en-bref p { font-size: 0.95rem; line-height: 1.65; }

/* Tableaux (destinataires, durées de conservation…) — défilent seuls sur
   téléphone plutôt que de faire déborder la page. */
.tableau-wrap { overflow-x: auto; margin: 14px 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td {
  border: 1px solid var(--so-border, #ECE8E1);
  padding: 8px 10px; text-align: left; vertical-align: top;
}
th {
  background: var(--so-surface-2, #FCFAF7);
  font-weight: 600; color: var(--so-text, #1C1917);
}

.retour {
  display: inline-block; margin-bottom: 18px;
  /* Un peu de marge intérieure pour que la teinte du survol ait où se poser. */
  padding: 4px 8px; margin-left: -8px;
  color: var(--so-accent-deep, #2563eb); text-decoration: none; font-size: 0.9rem;
}

/* ⚠️ Ces pages ne chargent pas survol.css : leur survol s'écrit ICI, avec sa
   propre protection tactile. ⛔ Pas de soulignage, une teinte (le lien est
   DÉJÀ de la couleur d'accent au repos : le changer ne se verrait pas). */
@media (hover: hover) and (pointer: fine) {
  .retour:hover {
    background: var(--so-accent-hover);
    border-radius: var(--radius-sm, 8px);
  }
}

/* Renvois vers les autres documents, en pied de page */
.autres-docs {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--so-border, #ECE8E1);
  font-size: 0.88rem; color: var(--so-text-2, #57534E);
}
.autres-docs a { margin-right: 14px; display: inline-block; }

@media (max-width: 600px) {
  body { padding: 24px 14px 48px; }
  main { padding: 26px 20px; border-radius: 14px; }
}