/* ═══════════════════════════════════════════════════════════════════════════
   LES PAGES LEGALES — conditions, confidentialite, gouvernance

   Feuille commune aux trois. Deux pages qui doivent se ressembler ne peuvent
   pas porter deux copies du meme style : elles divergent au premier
   retouchage.

   Elle etait en THEME NUIT — fond #080f1c, texte blanc, titres bleu pale dans
   des boites vitrees — alors que tout le reste du site est passe en blanc et
   navy. Une clinique qui clique sur « Conditions » depuis la page de paiement
   changeait de site.

   Ce sont des DOCUMENTS et non des ecrans : ils se lisent d'un bout a l'autre,
   parfois s'impriment. L'echelle n'est donc pas celle de la vitrine, qui est
   une echelle de composition. C'est une echelle de lecture — une colonne de
   740 px et quatre tailles fixes — et c'est voulu : ici le texte ne compose
   pas une image, il se lit.

   AUCUN CONTENU N'A ETE TOUCHE. Les trois fichiers HTML sont inchangés a la
   virgule pres ; seule cette feuille et les deux <link> de leur en-tete ont
   change. C'etait la condition posee : ne perdre aucune information.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Les memes encres et le meme accent que partout ailleurs. */
    --encre:  #0b1526;
    --gris:   rgba(11, 21, 38, 0.78);
    --faible: rgba(11, 21, 38, 0.14);
    --navy:   #14356b;
    --clair:  #79aef7;

    /* Quatre tailles de lecture, pas une de plus (regle 1). */
    --t-titre:  28px;
    --t-partie: 17px;
    --t-corps:  16px;
    --t-petit:  13px;

    --colonne: 740px;
    --trait: 2px;
    --police: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: #fff; }
body {
    background: #fff; color: var(--encre);
    font-family: var(--police);
    font-size: var(--t-corps); line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    max-width: var(--colonne); margin: 0 auto;
    padding: 104px 24px 96px;
    padding-left:  calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
}

/* La marque, au meme endroit que sur toutes les autres pages, et cliquable :
   ces trois pages n'avaient aucun chemin de retour vers le site. */
.marque {
    position: absolute; top: 20px; left: 24px;
    font-size: var(--t-petit); font-weight: 800; letter-spacing: -0.04em;
    text-decoration: none; color: var(--encre);
}
.marque span { color: var(--clair); }
/* Le sigle de marque, cale en HAUT du mot et non sur la ligne de base : un
   exposant normal le pose trop bas sous une graisse 800, et il vient toucher
   le p du App. Il reste a l encre et non au bleu clair — a cette taille, le
   clair sur blanc ne se verrait pas. */
.marque sup {
  font-size: 0.5em; vertical-align: top; line-height: 1.1;
  margin-left: 0.1em; letter-spacing: 0; font-weight: 700;
  color: var(--encre);
}

/* ─── Les titres ──────────────────────────────────────────────────────────
   Ils etaient chacun dans une boite vitree bordee de bleu. Trente-trois
   boites sur trois pages : l'oeil ne voyait plus la structure, il voyait des
   cadres. Un titre se distingue par sa taille et sa graisse — c'est a ca
   qu'ils servent. */
h1 {
    margin: 0 0 8px;
    font-size: var(--t-titre); font-weight: 800;
    line-height: 1.2; letter-spacing: -0.022em;
    text-wrap: balance;
}
/* Le seul trait de couleur de la page, sous le titre : il dit « ceci est un
   document de SteriApp » et rien d'autre (regle 8). */
h1::after {
    content: ""; display: block;
    width: 56px; height: var(--trait); margin-top: 18px;
    background: var(--navy);
}
h2 {
    margin: 44px 0 10px;
    font-size: var(--t-partie); font-weight: 800;
    line-height: 1.35; letter-spacing: -0.012em;
    color: var(--navy);
}

/* ─── Le texte courant ─────────────────────────────────────────────────── */
p  { margin: 12px 0; }
ul, ol { padding-left: 22px; margin: 12px 0; }
li { margin: 6px 0; }
ul li::marker { color: var(--navy); }
ol li::marker { color: var(--navy); font-weight: 700; }
strong { font-weight: 700; }
em { font-style: italic; }

a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(20, 53, 107, 0.35);
    text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--navy); }
:focus-visible { outline: var(--trait) solid var(--navy); outline-offset: 3px; }

/* ─── L'encadre ───────────────────────────────────────────────────────────
   Ce qu'il porte est ce qui engage SteriApp : la responsabilite sur les
   registres, les coordonnees du responsable de la protection des
   renseignements. Un filet navy a gauche suffit a le detacher — un cadre
   complet sur une page blanche le ferait lire comme un formulaire. */
.encadre {
    margin: 20px 0; padding: 4px 0 4px 20px;
    border-left: var(--trait) solid var(--navy);
}
.encadre p:first-child { margin-top: 0; }
.encadre p:last-child  { margin-bottom: 0; }

/* Les coordonnees : des lignes, pas des paragraphes. */
.coord { margin: 2px 0; }

/* ─── Les tableaux ────────────────────────────────────────────────────────
   Ils portent les durees de conservation et les sous-traitants — ce qu'une
   clinique vient verifier ici. Ils doivent rester lisibles sur un telephone,
   donc ils defilent dans leur propre boite plutot que de pousser la page. */
table {
    width: 100%; border-collapse: collapse;
    margin: 16px 0; font-size: var(--t-petit);
    display: block; overflow-x: auto;
}
th {
    text-align: left; font-weight: 800; color: var(--encre);
    padding: 10px 12px 10px 0;
    border-bottom: var(--trait) solid var(--navy);
    white-space: nowrap;
}
td {
    padding: 10px 12px 10px 0; vertical-align: top;
    border-bottom: 1px solid var(--faible);
    color: var(--gris);
}
tr:last-child td { border-bottom: none; }

/* ─── A l'impression ──────────────────────────────────────────────────────
   Une clinique qui recoit une inspection imprime ces pages. Rien a changer
   sur le fond : la page est deja noire sur blanc. On retire seulement la
   marque flottante et on empeche un tableau d'etre coupe en deux. */
@media print {
    body { padding: 0; max-width: none; }
    .marque { display: none; }
    h2 { break-after: avoid; }
    table, .encadre { break-inside: avoid; }
}