/* ==========================================================================
   PAGES LEGALES — habillage de texte long
   styles.css est ecrit pour une landing : il stylise des titres, des cartes et
   des grappes de boutons, pas un document qui se lit du haut vers le bas. Ce
   fichier n'ajoute que ce qui manque pour ca — une colonne de lecture, des
   listes, un tableau de traitements et un fil de titres — et rien d'autre.

   Aucune valeur en dur : tout passe par les tokens de css/tokens.css et par la
   couche semantique, donc ces pages suivent la peau du site sans le savoir.
   ========================================================================== */

.doc{
  width:var(--layout-narrow);
  margin-inline:auto;
}

.doc-entete{
  padding-block:var(--space-16) var(--space-10);
  border-bottom:var(--border-hair) solid var(--rule);
  margin-bottom:var(--space-12);
}
.doc-entete h1{
  font-size:var(--size-h2);
  margin:var(--space-3) 0 0;
}
.doc-maj{
  margin-top:var(--space-6);
  font-family:var(--font-mono);
  font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--fg-mute);
}

/* Un article par section numerotee du document. */
.doc article{
  padding-block:var(--space-10);
  border-top:var(--border-hair) solid var(--rule);
}
.doc article:first-of-type{border-top:0;padding-top:0}
.doc h2{
  font-size:var(--size-h3);
  margin:0 0 var(--space-5);
}
.doc h3{
  font-size:var(--size-lead);
  margin:var(--space-8) 0 var(--space-3);
}
.doc p{
  margin:0 0 var(--space-4);
  max-width:var(--measure-prose);
  color:var(--fg-soft);
}
.doc p:last-child{margin-bottom:0}
.doc strong{font-weight:var(--weight-bold);color:var(--fg)}

.doc a:not(.btn):not(.logo){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* Listes. styles.css n'en stylise aucune : tout est ici. */
.doc ul,
.doc ol{
  margin:0 0 var(--space-4);
  padding-left:var(--space-6);
  max-width:var(--measure-prose);
  color:var(--fg-soft);
}
.doc li{margin-bottom:var(--space-2)}
.doc li::marker{color:var(--accent)}

/* Bloc d'identification : un couple libelle / valeur par ligne. */
.doc-identite{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-3) var(--space-8);
  margin:0 0 var(--space-4);
  padding:var(--space-6);
  border:var(--border-hair) solid var(--card-border);
  border-radius:var(--radius-sharp);
}
.doc-identite dt{
  font-family:var(--font-mono);
  font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--fg-mute);
  white-space:nowrap;
}
.doc-identite dd{margin:0;color:var(--fg)}

/* Le tableau des traitements deborde sur telephone : il defile seul. */
.doc-cadre{
  overflow-x:auto;
  border:var(--border-hair) solid var(--rule);
  margin-bottom:var(--space-4);
}
.doc table{
  border-collapse:collapse;
  width:100%;
  min-width:var(--layout-medium);
  font-size:var(--size-sm);
}
.doc th,
.doc td{
  text-align:left;
  padding:var(--space-4);
  border-bottom:var(--border-hair) solid var(--rule);
  vertical-align:top;
  color:var(--fg-soft);
}
.doc thead th{
  font-family:var(--font-mono);
  font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--fg-mute);
  border-bottom:var(--border-hair) solid var(--rule-strong);
  white-space:nowrap;
}
.doc tbody th{
  font-weight:var(--weight-bold);
  color:var(--fg);
  font-size:var(--size-sm);
}
.doc tbody tr:last-child td,
.doc tbody tr:last-child th{border-bottom:0}

/* Le constat qui distingue ce site : aucun traceur. */
.doc-constat{
  border-inline-start:var(--border-accent) solid var(--accent-surface);
  padding:var(--space-2) 0 var(--space-2) var(--space-6);
  margin-bottom:var(--space-6);
}
.doc-constat p{color:var(--fg)}

/* En-tete allege : le logo et le retour, pas la navigation de la landing dont
   les ancres ne mènent nulle part depuis une page legale. */
.head-doc{justify-content:space-between}
.doc-retour{
  font-family:var(--font-mono);
  font-size:var(--size-mono-sm);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.doc-retour:hover{color:var(--accent)}

.doc-suite{
  display:flex;flex-wrap:wrap;gap:var(--space-6);
  padding-block:var(--space-10) var(--space-16);
  border-top:var(--border-hair) solid var(--rule);
  margin-top:var(--space-10);
}
.doc-suite a{
  font-family:var(--font-mono);
  font-size:var(--size-mono-sm);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}

@media (max-width:600px){
  .doc-identite{grid-template-columns:1fr;gap:var(--space-1) 0}
  .doc-identite dd{margin-bottom:var(--space-3)}
}

/* Donnee en attente, impossible a rater et impossible a publier par
   inadvertance. CLAUDE.md est explicite : aucune mention « a completer » ne
   doit survivre a la mise en production. Le marqueur est donc voyant sur la
   page elle-meme, pas seulement dans le code source.

   Il n'est pas possible de rendre ce controle mecanique ici : tools/ est
   vendore depuis salus-design-system et ne s'edite jamais dans un
   consommateur. La regle passerait par une evolution de verify.sh en amont.

   Le fond et la bordure viennent des tokens de charte et non de la couche
   semantique : sur fond clair --danger et --danger-fg y valent la MEME valeur,
   le marqueur aurait ete rouge sur rouge.

   Le texte, lui, reste sur --fg. Le rouge de charte n'atteint que 5,7:1 sur son
   propre fond clair quand le bleu de marque en donne 12,3:1, et le cadre rouge
   suffit a signaler l'anomalie.

   Le selecteur est prefixe par .doc a dessein : .doc p et .doc-identite dd sont
   plus specifiques que la seule classe, et ecrasaient silencieusement la couleur
   declaree ici. Une declaration qui ne s'applique jamais est un piege. */
.doc .a-completer{
  display:inline-block;
  padding:var(--space-1) var(--space-3);
  border:var(--border-accent) solid var(--color-error);
  border-radius:var(--radius-sharp);
  background:var(--color-error-surface);
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:var(--size-mono-sm);
  font-weight:var(--weight-mono-bold);
  letter-spacing:var(--tracking-mono);
}