/* Le Veilleur — feuille de style « journal d'analyse » */

:root {
  --papier: #fbf9f4;
  --papier-2: #f3eee3;
  --encre: #1b1a18;
  --encre-douce: #45423d;
  --gris: #7c776f;
  --filet: #ddd6c8;
  --filet-fort: #1b1a18;
  --accent: #9b1c1f;
  --accent-doux: #f4e3e0;
  --lien: #7d1518;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --titre: "Playfair Display", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --largeur: 1200px;
  --ombre: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .05);
  --carte-mer: #e3e8e8;
  --carte-terre: #f1ebdf;
  --carte-trait: #fbf9f4;
  --carte-cite: #e6c3bb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #151517;
    --papier-2: #1e1e21;
    --encre: #ebe6dc;
    --encre-douce: #c6c0b5;
    --gris: #948e84;
    --filet: #34332f;
    --filet-fort: #ebe6dc;
    --accent: #e7797a;
    --accent-doux: #3a2224;
    --lien: #f09a9a;
    --ombre: none;
    --carte-mer: #1c2226;
    --carte-terre: #2b2a2d;
    --carte-trait: #151517;
    --carte-cite: #5e2f31;
  }
}
:root[data-theme="dark"] {
  --papier: #151517;
  --papier-2: #1e1e21;
  --encre: #ebe6dc;
  --encre-douce: #c6c0b5;
  --gris: #948e84;
  --filet: #34332f;
  --filet-fort: #ebe6dc;
  --accent: #e7797a;
  --accent-doux: #3a2224;
  --lien: #f09a9a;
  --ombre: none;
  --carte-mer: #1c2226;
  --carte-terre: #2b2a2d;
  --carte-trait: #151517;
  --carte-cite: #5e2f31;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-x: hidden;
  overflow-x: clip;   /* « clip » ne crée pas de conteneur de défilement : les éléments fixes restent fixes */
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.16; margin: 0 0 10px; text-wrap: balance; }

main, .masthead, .pied, .cahiers-defil { max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
main { padding-top: 28px; padding-bottom: 32px; }

.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Liens vers les sources ---------- */

a.ext {
  color: var(--lien);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--lien) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a.ext:hover { text-decoration-color: var(--lien); }
a.ext::after {
  content: "↗";
  font-family: var(--sans);
  font-size: .68em;
  margin-left: 1px;
  vertical-align: .35em;
  text-decoration: none;
  display: inline-block;
  opacity: .75;
}

/* ---------- En-tête ---------- */

.progression { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; pointer-events: none; }
.progression span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
body:not(.page-article) .progression { display: none; }

.masthead { text-align: center; padding-top: 10px; }

.barre {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 13px; color: var(--encre-douce);
  border-bottom: 1px solid var(--filet); padding-bottom: 8px;
}
.barre-outils { display: flex; align-items: center; gap: 14px; }
.outil {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.outil:hover { color: var(--accent); }

.titre-journal {
  display: block; font-family: var(--titre); font-weight: 900;
  font-size: clamp(46px, 9vw, 96px); line-height: 1.02; letter-spacing: -.012em;
  margin: 16px 0 4px;
}
.titre-journal:hover { color: var(--encre); }
.devise { margin: 0 0 14px; font-style: italic; color: var(--encre-douce); font-size: 15px; }

.cahiers {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 3px double var(--filet-fort); border-bottom: 1px solid var(--filet-fort);
}
.cahiers-defil {
  display: flex; justify-content: center; gap: 4px 24px; overflow-x: auto; scrollbar-width: none;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.cahiers-defil::-webkit-scrollbar { display: none; }
.cahiers a { padding: 10px 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.cahiers a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------- Éléments communs ---------- */

.surtitre {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 8px;
}
.surtitre .sep { margin: 0 6px; color: var(--gris); }
.chapo { font-size: 1.04em; color: var(--encre-douce); margin: 0 0 10px; }
.meta { font-family: var(--sans); font-size: 13px; color: var(--gris); margin: 0; }
.meta .auteur { color: var(--encre); font-weight: 600; }
.meta a { text-decoration: underline; text-underline-offset: 2px; }
.nb-sources { color: var(--accent); font-weight: 600; }
.lire { font-family: var(--sans); font-size: 14px; font-weight: 700; margin: 14px 0 0; }
.lire a { color: var(--accent); }
.intro { color: var(--encre-douce); margin: -4px 0 16px; max-width: 760px; font-size: .96em; }
.vide { color: var(--gris); font-style: italic; }

.titre-section {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-top: 2px solid var(--filet-fort); padding-top: 10px; margin: 0 0 18px;
}
.titre-section .compte { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--gris); font-size: 13px; }

.points { margin: 10px 0 12px; padding: 0; list-style: none; font-size: .95em; }
.points li { position: relative; padding-left: 18px; margin-bottom: 6px; color: var(--encre-douce); }
.points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.points.grands { font-size: 1.05em; margin-top: 18px; }

/* ---------- Une ---------- */

.une {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 40px;
  padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--filet);
}
.principal h1 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 14px; }
.principal > .chapo { font-size: 1.2em; font-style: italic; line-height: 1.5; }
.principal .extrait { columns: 2 260px; column-gap: 32px; column-rule: 1px solid var(--filet); margin-top: 18px; }
.principal .extrait p { margin: 0 0 12px; hyphens: auto; }

.edito { border-left: 1px solid var(--filet); padding-left: 30px; }
.edito h2 { font-size: 27px; font-style: italic; }

/* ---------- Grilles ---------- */

.section-cahier, .section-essentiel, .section-notions { margin-bottom: 40px; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px 32px; }

.carte { position: relative; padding-top: 2px; }
.carte h3 { font-size: 23px; margin-bottom: 8px; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; } /* carte cliquable */
.carte .surtitre a, .carte .meta a { position: relative; z-index: 1; }
.carte .chapo { font-size: .97em; }
.carte:hover h3 { color: var(--accent); }

/* ---------- Brèves ---------- */

.breves { columns: 3 280px; column-gap: 32px; column-rule: 1px solid var(--filet); }
.breve { break-inside: avoid; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--filet); }
.breve h3 { font-size: 18.5px; margin-bottom: 6px; }
.breve p { margin: 0 0 6px; font-size: .95em; color: var(--encre-douce); }
.article-breves .breves { columns: 2 300px; }

/* ---------- Notions du jour ---------- */

.puces-notions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.puces-notions a {
  display: inline-block; padding: 5px 12px; border: 1px solid var(--filet); border-radius: 999px;
  font-family: var(--sans); font-size: 14px; background: var(--papier-2);
}
.puces-notions a:hover { border-color: var(--accent); }

.precedent { font-family: var(--sans); font-size: 14px; text-align: center; color: var(--encre-douce); }
.precedent a { text-decoration: underline; }

/* ---------- Article ---------- */

.article-entete { max-width: 800px; margin: 0 auto 30px; text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--filet); }
.article-entete h1 { font-size: clamp(32px, 5vw, 52px); margin: 6px 0 16px; }
.article-entete .chapo { font-size: 1.22em; font-style: italic; line-height: 1.5; }

.article-grille { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 300px); gap: 56px; justify-content: center; }
.article-marge { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }

.en-bref {
  background: var(--papier-2); border-left: 4px solid var(--accent); padding: 16px 22px 8px; margin-bottom: 28px;
}
.en-bref h2, .notions-cles h2, .edition-nav h2, .plus-loin h2, .sources h2 {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.en-bref ul { margin: 0; padding-left: 1.1em; }
.en-bref li { margin-bottom: 8px; }

.corps p { margin: 0 0 1.1em; hyphens: auto; }
.corps > p:first-child::first-letter {
  float: left; font-family: var(--titre); font-size: 4.1em; line-height: .8; padding: 7px 10px 0 0; color: var(--accent);
}
.corps h2 { font-size: 23px; margin: 1.7em 0 .6em; font-style: italic; }
.corps h3 { font-size: 19px; margin: 1.4em 0 .5em; }
.corps ul, .corps ol { padding-left: 1.3em; }

blockquote {
  margin: 1.6em 0; padding: 16px 24px; background: var(--papier-2); border-left: 4px solid var(--accent);
  font-size: 1.12em; font-style: italic;
}
blockquote p { margin: 0; }
blockquote cite { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--gris); }

.notions-cles { border-top: 2px solid var(--filet-fort); padding-top: 10px; margin-bottom: 26px; }
.notions-cles dl { margin: 0; }
.notions-cles div { padding: 10px 0; border-bottom: 1px solid var(--filet); }
.notions-cles dt { font-family: var(--titre); font-weight: 700; font-size: 17px; }
.notions-cles dd { margin: 4px 0 0; font-size: .92em; color: var(--encre-douce); line-height: 1.5; }
.comprendre { font-family: var(--sans); font-size: 13px; font-weight: 600; white-space: nowrap; }

.edition-nav { border-top: 2px solid var(--filet-fort); padding-top: 10px; }
.edition-nav ol { list-style: none; margin: 0; padding: 0; }
.edition-nav li { border-bottom: 1px solid var(--filet); }
.edition-nav a { display: block; padding: 8px 0; font-size: 14.5px; line-height: 1.35; }
.edition-nav a span { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.edition-nav li[aria-current] a { color: var(--accent); }

.plus-loin { margin-top: 36px; border-top: 2px solid var(--filet-fort); padding-top: 10px; }
.ressources { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ressource {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--filet);
  background: var(--papier-2); border-radius: 4px; box-shadow: var(--ombre); transition: border-color .15s, transform .15s;
}
a.ressource:hover { border-color: var(--accent); transform: translateY(-1px); color: inherit; }
.ressource-domaine { overflow-wrap: anywhere; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ressource-domaine::after { content: " ↗"; }
.ressource-titre { font-family: var(--titre); font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.ressource-detail { font-family: var(--sans); font-size: 13.5px; color: var(--encre-douce); line-height: 1.4; }

.sources { margin-top: 36px; border-top: 3px double var(--filet-fort); padding-top: 10px; font-family: var(--sans); font-size: 14.5px; }
.sources h2 span { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--papier); font-size: 11px; letter-spacing: 0; }
.sources ol { margin: 0; padding-left: 1.6em; }
.sources li { margin-bottom: 9px; padding-left: 4px; line-height: 1.4; }
.sources li::marker { color: var(--gris); font-size: 12.5px; }
.source-detail { color: var(--encre-douce); }
.source-detail::before { content: " — "; }
.source-detail:empty::before { content: none; }
.domaine { overflow-wrap: anywhere; display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--filet); border-radius: 3px; font-size: 11.5px; color: var(--gris); }

.suite { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1056px; margin: 44px auto 0; border-top: 1px solid var(--filet-fort); padding-top: 16px; }
.suite a { font-family: var(--titre); font-weight: 700; font-size: 18px; line-height: 1.3; }
.suite a span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.suite-suiv { text-align: right; }

/* ---------- Bouton clair / sombre : il montre le mode vers lequel il bascule ---------- */

.theme .icone-soleil { display: none; }
:root[data-theme="dark"] .theme .icone-lune { display: none; }
:root[data-theme="dark"] .theme .icone-soleil { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .icone-lune { display: none; }
  :root:not([data-theme="light"]) .theme .icone-soleil { display: inline; }
}

/* ---------- Carte de situation ---------- */

.carte { max-width: 800px; margin: 0 auto 30px; }
.article-entete .carte { margin: 4px auto 22px; text-align: left; }
.carte svg { display: block; width: 100%; height: auto; border-top: 2px solid var(--filet-fort); border-bottom: 1px solid var(--filet); }
.carte-mer { fill: var(--carte-mer); }
.carte-terres path { fill: var(--carte-terre); stroke: var(--carte-trait); stroke-width: 1; stroke-linejoin: round; }
.carte-cites path { fill: var(--carte-cite); stroke: var(--carte-trait); stroke-width: 1; stroke-linejoin: round; }
.carte-pays {
  font: 700 16px var(--sans); letter-spacing: .14em; text-anchor: middle; fill: var(--encre-douce);
  paint-order: stroke; stroke: var(--carte-cite); stroke-width: 4px; stroke-linejoin: round;
}
.carte-lieu circle { fill: var(--papier); stroke: var(--accent); stroke-width: 3; }
.carte-lieu .carte-lieu-coeur { fill: var(--accent); stroke: none; }
.carte-lieu text {
  font: 700 22px var(--titre); fill: var(--encre);
  paint-order: stroke; stroke: var(--papier); stroke-width: 5px; stroke-linejoin: round;
}
.carte-echelle path { fill: none; stroke: var(--encre); stroke-width: 2; }
.carte-echelle text { font: 600 15px var(--sans); fill: var(--encre); text-anchor: middle; paint-order: stroke; stroke: var(--carte-mer); stroke-width: 4px; }
.carte-vignette-fond { fill: var(--papier); stroke: var(--filet); }
.carte-vignette image { opacity: .75; }
.carte-cadre { fill: none; stroke: var(--accent); stroke-width: 2; }
.carte figcaption { margin-top: 6px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.carte figcaption span { font-weight: 400; color: var(--gris); }

/* ---------- Listes (cahiers, rubriques, archives, glossaire, recherche) ---------- */

.entete-liste { text-align: center; margin: 0 auto 32px; max-width: 820px; }
.entete-liste h1 { font-size: clamp(32px, 5vw, 46px); }
.entete-liste .chapo { font-style: italic; }
.rubriques-cahier, .lettres { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.rubriques-cahier a, .lettres a { color: var(--accent); }

.archives { list-style: none; padding: 0; max-width: 840px; margin: 0 auto; }
.archives > li { border-top: 1px solid var(--filet); padding: 16px 0; }
.archives .date { font-family: var(--titre); font-size: 22px; font-weight: 700; }
.archives ul { list-style: none; padding: 0; margin: 8px 0 0; }
.archives ul li { margin: 5px 0; }
.archives .rub { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }

.glossaire { max-width: 840px; margin: 0 auto; }
.lettre { font-size: 34px; color: var(--accent); border-bottom: 2px solid var(--filet-fort); padding-bottom: 4px; margin-top: 26px; }
.glossaire dl { margin: 0; }
.notion { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.notion:target { background: var(--accent-doux); margin: 0 -12px; padding: 14px 12px; }
.notion dt { font-family: var(--titre); font-weight: 700; font-size: 20px; }
.notion dd { margin: 4px 0 0; }
.notion dd p { margin: 0 0 6px; }
.notion-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--sans); font-size: 13.5px; }
.notion-liens a:not(.ext) { color: var(--gris); text-decoration: underline; text-underline-offset: 2px; }

.recherche { display: flex; gap: 10px; max-width: 760px; margin: 0 auto 10px; }
.recherche input, .recherche select {
  font: inherit; font-family: var(--sans); font-size: 16px; color: var(--encre); background: var(--papier-2);
  border: 1px solid var(--filet); border-radius: 4px; padding: 11px 14px;
}
.recherche input { flex: 1; min-width: 0; }
.recherche input:focus, .recherche select:focus { border-color: var(--accent); outline: none; }
.recherche-etat { text-align: center; font-family: var(--sans); font-size: 14px; color: var(--gris); margin-bottom: 26px; }

/* ---------- Pied de page ---------- */

.pied {
  border-top: 3px double var(--filet-fort); padding-top: 18px; padding-bottom: 44px;
  font-family: var(--sans); font-size: 13.5px; color: var(--gris); text-align: center;
}
.pied p { margin: 0 0 6px; }
.pied-nom { font-family: var(--titre); font-weight: 900; font-size: 22px; color: var(--encre); }
.pied a, .pied .lien-bouton { text-decoration: underline; text-underline-offset: 2px; }
.pied .lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ---------- Adaptation ---------- */

@media (max-width: 980px) {
  .article-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article-marge { position: static; max-height: none; overflow: visible; margin-top: 36px; }
}

@media (max-width: 820px) {
  body { font-size: 16.5px; }
  .carte, .article-entete .carte { margin: 4px calc(var(--marge, 16px) * -1) 18px; }
  .carte figcaption { padding: 0 var(--marge, 16px); }
  .une { grid-template-columns: 1fr; gap: 26px; }
  .edito { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 18px; }
  .cahiers-defil { justify-content: flex-start; gap: 4px 18px; font-size: 12px; }
  .barre-date { text-align: left; }
  .outil span { display: none; }
  .outil:not(.theme) span:only-child { display: inline; }
  .suite { grid-template-columns: 1fr; }
  .suite-suiv { text-align: left; }
  .recherche { flex-direction: column; }
}

@media print {
  .cahiers, .barre-outils, .article-marge .edition-nav, .suite, .progression, .pied { display: none; }
  a.ext::after { content: " (" attr(href) ")"; font-size: .7em; }
}