/* =========================================================================
   ARDOISE — feuille de style pour documents de recherche documentés
   =========================================================================

   Un système typographique sobre pour dossiers, rapports, notes d'analyse et
   bibliographies. Inspiré des archives judiciaires : papier gris ardoise,
   encre profonde, un seul accent rouge de tampon, citations en monospace.

   Thème clair et sombre gérés au niveau des variables. Aucune dépendance
   réseau : polices système uniquement, pas de @import, pas de CDN.

   USAGE — trois façons :
   1. Artifact Claude : copier ce fichier dans un bloc <style> du fragment
      (obligatoire, la CSP bloque toute feuille externe).
   2. Page locale : <link rel="stylesheet" href="ardoise.css">.
   3. Sélectif : ne garder que la section « Fondations » + les composants utiles.

   Convention de nommage : classes en français, une classe = un composant.
   ========================================================================= */


/* =========================================================================
   1. FONDATIONS — jetons de thème
   ========================================================================= */

:root {
  /* Surfaces : gris légèrement bleuté, jamais un gris pur */
  --ground:      #EBEDEF;   /* fond de page */
  --surface:     #F8F9FA;   /* cartes, encadrés */
  --surface-2:   #E2E5E8;   /* en-têtes de tableau, pastilles neutres */

  /* Encres */
  --ink:         #15181C;   /* texte principal */
  --ink-soft:    #3A4048;   /* texte secondaire, corps des encadrés */
  --muted:       #5D646D;   /* métadonnées, légendes, libellés */

  /* Filets */
  --rule:        #CBD0D6;   /* bordures fines */
  --rule-strong: #A8AFB7;   /* séparateurs structurants */

  /* Accent unique — rouge de tampon d'archive */
  --accent:      #9C2A26;
  --accent-ink:  #7E2320;   /* variante lisible pour les liens */
  --accent-wash: rgba(156, 42, 38, 0.07);

  /* Couleurs sémantiques — statut d'une information, jamais décoratives */
  --pro:         #1F5F4B;   /* confirmé, favorable, vérifié */
  --pro-wash:    rgba(31, 95, 75, 0.09);
  --con:         #6B4B12;   /* objection, réserve, non vérifié */
  --con-wash:    rgba(107, 75, 18, 0.10);

  /* Familles typographiques — trois rôles distincts, polices système */
  --serif: "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Mesure de lecture */
  --mesure: 47rem;          /* 50rem pour les documents à entrées larges */
}

/* Thème sombre par préférence système.
   Garde `:not([data-theme="light"])` pour qu'un choix explicite clair l'emporte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111417;  --surface: #191D21;  --surface-2: #21262B;
    --ink: #E5E8EB;     --ink-soft: #C3C8CE; --muted: #939AA3;
    --rule: #2B3139;    --rule-strong: #3E464F;
    --accent: #E0716A;  --accent-ink: #EC8A83; --accent-wash: rgba(224,113,106,0.11);
    --pro: #5FBF9E;     --pro-wash: rgba(95,191,158,0.12);
    --con: #D2AB5E;     --con-wash: rgba(210,171,94,0.12);
  }
}

/* Thème sombre par choix explicite — doit aussi gagner sur un OS clair. */
:root[data-theme="dark"] {
  --ground: #111417;  --surface: #191D21;  --surface-2: #21262B;
  --ink: #E5E8EB;     --ink-soft: #C3C8CE; --muted: #939AA3;
  --rule: #2B3139;    --rule-strong: #3E464F;
  --accent: #E0716A;  --accent-ink: #EC8A83; --accent-wash: rgba(224,113,106,0.11);
  --pro: #5FBF9E;     --pro-wash: rgba(95,191,158,0.12);
  --con: #D2AB5E;     --con-wash: rgba(210,171,94,0.12);
}

/* RÈGLE ABSOLUE : ne jamais déclarer une couleur uniquement dans un bloc
   @media ou [data-theme]. Toute couleur passe par un jeton défini sur :root nu,
   sinon la page rend le texte d'un thème sur le fond de l'autre. */


/* =========================================================================
   2. SOCLE
   ========================================================================= */

* { box-sizing: border-box; }

body {
  background: var(--ground);       /* obligatoire : un body transparent emprunte le fond de l'hôte */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 0 1.25rem 6rem;
  -webkit-font-smoothing: antialiased;
}

/* Conteneur principal. L'espacement vertical vient du gap, pas des marges. */
.wrap {
  max-width: var(--mesure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}

p { margin: 0; }
strong { font-weight: 650; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

ul, ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
li { padding-left: 0.15rem; }
li::marker { color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0.75rem 0; }


/* =========================================================================
   3. TITRAILLE
   ========================================================================= */

/* Bandeau de tête */
.masthead {
  padding: 4rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-bottom: 1px solid var(--rule-strong);
}

/* Surtitre : nature du document */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--accent); }   /* un seul mot en accent, pas davantage */

/* Chapeau */
.standfirst {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40rem;
}

/* Ligne de crédits : date, nature des sources, avertissements */
.byline {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

section { display: flex; flex-direction: column; gap: 1.05rem; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 1.4rem 0 0;
  text-wrap: balance;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

/* Numéro de section. À n'employer que si l'ordre porte une information. */
h2 .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex: none;
  transform: translateY(-0.4em);
}

h3 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.03rem;
  letter-spacing: -0.005em;
  margin: 1.15rem 0 -0.4rem;
  color: var(--ink);
}

/* Intertitre discret, en capitales monospace */
h4 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.95rem 0 -0.5rem;
}

/* Phrase d'introduction d'une section */
.lede { font-size: 0.98rem; color: var(--ink-soft); margin: 0; max-width: 42rem; }


/* =========================================================================
   4. PIÈCE — l'unité documentaire de base
   Un bloc = une pièce du dossier = un statut de preuve.
   `.pivot` marque les pièces décisives ; en réserver l'usage.
   ========================================================================= */

.piece, .statute {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  padding: 1.15rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.piece.pivot, .statute.pivot { border-left-color: var(--accent); background: var(--accent-wash); }

.piece-head, .statute-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
}

/* Date ou cote, en chiffres alignés */
.piece-date, .statute-year {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.piece.pivot .piece-date, .statute.pivot .statute-year { color: var(--accent); }

.piece-nom, .statute-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Référence bibliographique ou archivistique */
.cite-line {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.6;
}

/* Portée de la pièce : ce qu'elle établit */
.effect { font-size: 0.95rem; color: var(--ink-soft); }


/* =========================================================================
   5. CITATION
   ========================================================================= */

blockquote.src, blockquote.q {
  margin: 0;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 2px solid var(--rule-strong);
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
blockquote.src cite, blockquote.q cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Citation courte en ligne, guillemets français automatiques */
.piece q, .statute q, q.fr {
  font-family: var(--serif);
  quotes: "«\00a0" "\00a0»";
}

/* Exergue. Une par section au maximum, sinon l'effet s'annule. */
.exergue, .pull {
  font-family: var(--serif);
  font-size: 1.33rem;
  line-height: 1.4;
  color: var(--ink);
  padding: 0.4rem 0 0.4rem 1.25rem;
  border-left: 3px solid var(--accent);
  margin: 0.5rem 0;
  text-wrap: pretty;
}


/* =========================================================================
   6. ÉTIQUETTES DE PROVENANCE
   Le statut d'une information doit être visible, pas déduit.
   ========================================================================= */

.tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
  flex: none;
}
.tag.v,   .tag.pro    { color: var(--pro);   background: var(--pro-wash); }   /* vérifié */
.tag.c,   .tag.con    { color: var(--con);   background: var(--con-wash); }   /* à vérifier, objection */
.tag.key, .tag.accent { color: var(--accent); background: var(--accent-wash); }
.tag.r,   .tag.neutre { color: var(--muted); background: var(--surface-2); }  /* reconstruction */

/* Légende des étiquettes — à placer en tête de document, jamais en annexe */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.legend .item { display: inline-flex; align-items: center; gap: 0.45rem; }


/* =========================================================================
   7. ENCADRÉS
   ========================================================================= */

.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.05rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.note-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.note.pro { border-left: 3px solid var(--pro); background: var(--pro-wash); }
.note.pro .note-label { color: var(--pro); }
.note.con { border-left: 3px solid var(--con); background: var(--con-wash); }
.note.con .note-label { color: var(--con); }


/* =========================================================================
   8. FICHE — portrait d'une personne, d'une entité, d'un objet
   ========================================================================= */

.fiche, .portrait {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pname { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; }
.plife { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); letter-spacing: 0.03em; }
.pgloss { font-size: 0.97rem; color: var(--ink-soft); }

/* Paires clé / valeur */
.facts { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; }
.fact { display: flex; gap: 0.7rem; align-items: baseline; }
.fact .fk {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
  width: 6.6rem;
}
.fact .fv { color: var(--ink-soft); }


/* =========================================================================
   9. ENTRÉE — élément de liste raisonnée (bibliographie, inventaire)
   ========================================================================= */

.entries { display: flex; flex-direction: column; gap: 0.85rem; }

.entry {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  padding: 0.95rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.entry.key    { border-left-color: var(--accent); background: var(--accent-wash); }
.entry.contra { border-left-color: var(--con);    background: var(--con-wash); }

.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; }
.entry .name { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.005em; }
.entry .role { font-size: 0.85rem; color: var(--muted); }

.work { font-family: var(--serif); font-size: 1.02rem; line-height: 1.45; color: var(--ink-soft); }
.work em { font-style: italic; }
.work .pub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}

/* Apport propre de l'entrée — ce qu'elle ajoute, pas ce qu'elle est */
.adds { font-size: 0.93rem; color: var(--ink-soft); }
.adds b { font-weight: 650; color: var(--ink); }


/* =========================================================================
   10. OBJECTIONS — critiques numérotées et attribuées
   ========================================================================= */

.objections { display: flex; flex-direction: column; gap: 0.85rem; }

.obj {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--con);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.obj-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.obj-n {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--con);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.obj-t { font-weight: 650; font-size: 1rem; }
.obj-src { font-family: var(--mono); font-size: 0.69rem; color: var(--muted); letter-spacing: 0.03em; }
.obj-b { font-size: 0.95rem; color: var(--ink-soft); }


/* =========================================================================
   11. CHRONOLOGIE D'ŒUVRES
   ========================================================================= */

.works { display: flex; flex-direction: column; gap: 0.55rem; }
.w { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.95rem; }
.w .wy {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
  flex: none;
  width: 2.9rem;
}
.w .wb { color: var(--ink-soft); }
.w .wb em { font-style: italic; color: var(--ink); }


/* =========================================================================
   12. TABLEAUX
   Toujours dans .table-scroll : le corps de page ne défile jamais latéralement.
   ========================================================================= */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }

table { border-collapse: collapse; width: 100%; font-size: 0.89rem; min-width: 34rem; }
th, td { text-align: left; padding: 0.66rem 0.88rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
tbody tr:last-child td { border-bottom: 0; }

td.yr { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
td.rowh { font-weight: 650; color: var(--ink); white-space: nowrap; }


/* =========================================================================
   13. LIENS SOURCÉS
   ========================================================================= */

.links { display: flex; flex-direction: column; gap: 1.4rem; }
.link-group { display: flex; flex-direction: column; gap: 0.75rem; }

.link-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.link-row:last-child { border-bottom: 0; }
.link-row .lr-title { font-size: 0.97rem; line-height: 1.4; }
.link-row .lr-desc  { font-size: 0.86rem; color: var(--muted); }
.link-row .lr-url   { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); word-break: break-all; }


/* =========================================================================
   14. PIED — note de méthode
   ========================================================================= */

footer {
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}


/* =========================================================================
   15. NAVIGATION ENTRE DOCUMENTS
   Injectée par build-local.ps1 ; inutile pour un artifact isolé.
   ========================================================================= */

.docnav {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(6px)) {
  .docnav {
    background: color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter: blur(8px);
  }
}
.docnav-inner {
  max-width: 50rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.15rem;
  padding: 0.5rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.docnav-label { color: var(--muted); opacity: 0.7; margin-right: auto; }
.docnav a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.docnav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.docnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.docnav .current { color: var(--accent); }


/* =========================================================================
   16. ADAPTATIONS
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .docnav a { transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 34rem) {
  body { font-size: 16px; }
  h2 { flex-direction: column; gap: 0.2rem; }
  h2 .num { transform: none; }
  .fact { flex-direction: column; gap: 0.1rem; }
  .fact .fk { width: auto; }
  .docnav-inner { font-size: 0.63rem; gap: 0.3rem 0.85rem; }
  .docnav-label { display: none; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .docnav { display: none; }
  .piece, .statute, .note, .entry, .fiche, .portrait, .obj { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { color: #000; }
  /* La pagination « Page X / Y » se pose à la génération du PDF,
     pas ici : @page { @bottom-center } n'est pas honoré par les navigateurs. */
}