:root {
  --fond:#1f201f; --texte:#e4e2de; --doux:#9a958f; --trait:#444240; --actif:#2b2c2b; --accent:#ef7d5d; --exterieur:#161716;
  --filet:#383937;            /* le seul type de filet du site : fin, plein, discret */
  --colonne:37rem;            /* largeur de lecture : environ 70 caractères par ligne */
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:Helvetica, Arial, sans-serif;
  color-scheme:dark;
}
/* Police du texte, hébergée sur le site (licence libre OFL, voir polices/LICENCE-OFL.txt) */
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap; src:url("/polices/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap; src:url("/polices/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap; src:url("/polices/source-serif-4-latin-600-normal.woff2") format("woff2"); }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--exterieur); color:var(--texte); font-family:var(--serif); line-height:1.6; -webkit-font-smoothing:antialiased; }
.invisible { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Le cadre : la page, légèrement plus claire, posée sur un fond plus sombre, avec une bordure à gauche et à droite */
.page {
  max-width:880px; min-height:100vh; margin:0 auto; padding:0 3rem 2rem;
  background:var(--fond); border-left:1px solid var(--trait); border-right:1px solid var(--trait);
  box-shadow:0 0 40px rgba(0,0,0,.45);
}
@media (max-width:600px) { .page { padding:0 1rem 1.5rem; border:0; box-shadow:none; } }

/* Maxime */
.maxime { padding:2.2rem 0 1.4rem; font-style:italic; font-size:clamp(1.1rem,3vw,1.4rem); letter-spacing:.02em; color:var(--doux); }

/* Barre de navigation */
header nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:0 1.6rem; border-bottom:1px solid var(--filet); }
header nav a { display:flex; align-items:center; height:2.7rem; color:var(--doux); text-decoration:none;
  font-family:var(--sans); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
header nav a:hover { color:var(--accent); }
header nav a[aria-current] { color:var(--texte); box-shadow:inset 0 -2px 0 var(--accent); }
header nav svg { width:1.05rem; height:1.05rem; fill:currentColor; }

/* Contenu */
main { padding:3rem 0 4rem; }
/* Les pages de lecture tiennent dans une colonne centrée ; l'accueil utilise toute la largeur */
main > h1, main > p, .liste-articles, .article, main > .sources { max-width:var(--colonne); margin-left:auto; margin-right:auto; }
/* Toutes les pages de lecture (articles, listes, pages simples) sont alignées à gauche, sous le menu */
main > h1, main > p, .liste-articles, .article, main > .sources { margin-left:0; }
h1 { font-weight:400; line-height:1.2; font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:1rem; }
p { color:var(--doux); }
a { color:var(--texte); transition:color .15s; }
a:hover { color:var(--accent); }

/* Liens dans le texte */
.contact a { text-decoration:none; }

/* Pied de page */
footer { border-top:1px solid var(--filet); padding:1.5rem 0 2.5rem; font-size:.95rem; color:var(--doux); }
footer a { text-decoration:none; border-bottom:1px solid var(--trait); }
footer a:hover { color:var(--accent); border-color:transparent; }

@media (max-width:600px) {
  header nav ul { gap:0 .95rem; }
  header nav a { font-size:.68rem; letter-spacing:.04em; }
}

/* Liste des articles */
.liste-articles { list-style:none; }
.liste-articles > li { border-bottom:1px solid var(--filet); padding:1.4rem 0 1.3rem; }
.liste-titre { font-weight:400; font-size:1.35rem; line-height:1.3; margin:0; }
.liste-titre a { text-decoration:none; color:var(--texte); }
.liste-titre a:hover { color:var(--accent); }
.liste-resume { color:var(--doux); margin-top:.35rem; }
/* La ligne d'informations : date, puis étiquettes */
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:.45rem;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.02em; color:var(--doux); }
.meta .etiquettes { margin:0; }

/* Article */
/* .article : largeur fixée par --colonne, plus haut */
.article-date { font-family:var(--sans); font-size:.78rem; letter-spacing:.02em; margin-bottom:.6rem; }
.article-corps { font-size:1.08rem; line-height:1.65; }
.article-corps p, .article-corps ul { color:var(--texte); margin:0 0 1.1rem; }
.article-corps ul { padding-left:1.3rem; }
.article-corps li { margin-bottom:.4rem; }
.article-corps h2 { font-weight:400; font-size:1.5rem; margin:2.4rem 0 .8rem; }
.article-corps h3 { font-weight:400; font-style:italic; font-size:1.2rem; margin:1.8rem 0 .5rem; }
.article-corps strong { font-weight:600; }
.article-corps table { width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.95rem; }
.article-corps th, .article-corps td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--filet); vertical-align:top; }
.article-corps th { font-family:var(--sans); font-weight:400; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--doux); }
.article-corps figure { margin:1.6rem 0 2rem; }
.article-corps figcaption { text-align:center; font-size:.9rem; color:var(--doux); margin-top:.6rem; }
.retour { margin-top:2.5rem; }
.retour a { text-decoration:none; color:var(--doux); }
.retour a:hover { color:var(--accent); }

/* Liens d'un article vers ses sous-pages */
.article-date a { text-decoration:none; color:var(--doux); }
.article-date a:hover { color:var(--accent); }
.sous-pages { margin-top:3rem; border-top:1px solid var(--filet); padding-top:1.4rem; }
.sous-pages-titre { font-family:var(--sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.sous-pages ol { padding-left:1.3rem; }
.sous-pages li { margin-bottom:.45rem; color:var(--doux); }
.sous-pages a { text-decoration:none; }
.sous-pages [aria-current] { color:var(--doux); font-style:italic; }

/* Définitions au survol : [[mot]] dans un article */
.terme { position:relative; cursor:help; border-bottom:1px dotted #67635e; outline:none; }
.terme:hover, .terme:focus { color:var(--accent); border-bottom-color:var(--accent); }
.terme-def {
  position:absolute; left:0; top:calc(100% + .5rem); z-index:10;
  width:max-content; max-width:20rem; padding:.7rem .9rem;
  background:var(--actif); border:1px solid var(--trait); border-radius:4px;
  color:var(--texte); font-size:.9rem; font-style:normal; line-height:1.5; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .15s;
}
.terme:hover .terme-def, .terme:focus .terme-def { opacity:1; visibility:visible; }
@media (max-width:600px) {
  .terme-def { position:fixed; left:1rem; right:1rem; top:auto; bottom:1rem; width:auto; max-width:none; }
}

/* Étiquettes de thèmes : petite étiquette à bout pointu, trou et fil blanc.
   Couleurs dans src/_data/catalogueThemes.json */
.etiquettes { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .95rem; margin:.2rem 0 1.6rem; padding:0 0 0 .6rem; }
.etiquettes li { border:0; }
.etiquette {
  --p:.2em; /* taille d'une marche du bout pointu */
  position:relative; isolation:isolate; display:inline-block;
  padding:.28em .7em .3em 1.45em;
  color:#1f201f; text-decoration:none;
  font-family:var(--sans); font-size:.69rem; font-weight:700;
  letter-spacing:.02em; line-height:1.25;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.25));
  transition:filter .15s, transform .15s;
}
/* Le corps de l'étiquette, avec un bout pointu en deux marches */
.etiquette::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--couleur);
  clip-path:polygon(
    calc(var(--p) * 2) 0, 100% 0, 100% 100%, calc(var(--p) * 2) 100%,
    calc(var(--p) * 2) calc(100% - var(--p)), var(--p) calc(100% - var(--p)),
    var(--p) calc(100% - var(--p) * 2), 0 calc(100% - var(--p) * 2),
    0 calc(var(--p) * 2), var(--p) calc(var(--p) * 2),
    var(--p) var(--p), calc(var(--p) * 2) var(--p)
  );
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Le trou */
.etiquette::after {
  content:""; position:absolute; left:.6em; top:50%;
  width:.32em; height:.32em; border-radius:50%; transform:translateY(-50%);
  background:var(--fond);
}
/* Le fil blanc : il sort du trou et part vers la gauche, en retombant légèrement */
.etiquette .fil {
  position:absolute; left:-.55em; top:50%; width:1.31em; height:.45em;
  border-top:1px solid rgba(255,255,255,.85);
  border-top-left-radius:100% 100%; pointer-events:none;
}
a.etiquette:hover { color:#1f201f; filter:brightness(1.08) drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 3px 5px rgba(0,0,0,.25)); transform:translateY(-1px); }
.etiquette-titre { font-size:1rem; }

/* Sources : numéro dans le texte, bandeau au clic, liste en bas de page */
.note-appel { font-size:.68em; line-height:0; vertical-align:super; margin-left:.08em; }
.note-appel a {
  font-family:var(--sans); font-weight:700; text-decoration:none;
  color:var(--accent); padding:0 .15em;
}
.note-appel a:hover, .note-appel a[aria-expanded] { color:var(--fond); background:var(--accent); border-radius:2px; }
.sources { margin-top:3rem; border-top:1px solid var(--filet); padding-top:1.2rem; }
.sources h2 { font-weight:400; font-size:1.5rem; margin:0 0 1rem; }
.sources-liste { padding-left:1.4rem; font-size:.95rem; }
.sources-liste .source { margin-bottom:.8rem; color:var(--doux); scroll-margin-top:1rem; }
.sources-liste .source p { color:var(--doux); margin:0; display:inline; }
.sources-liste .source:target { color:var(--texte); }
.sources-liste .source:target p { color:var(--texte); }
.retour-texte { text-decoration:none; color:var(--accent); font-family:var(--sans); padding:0 .2em; }
[id^="appel-"] { scroll-margin-top:30vh; }
.bandeau-source {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:.9rem 1rem 1rem;
  background:var(--actif); border-top:3px solid var(--accent);
  box-shadow:0 -8px 24px rgba(0,0,0,.45); font-size:.95rem; color:var(--texte);
}
/* Le contenu reste aligné sur la colonne de texte de la page */
.bandeau-interieur { max-width:calc(880px - 6rem); margin:0 auto; }
.bandeau-interieur > * { max-width:var(--colonne); }
.bandeau-source[hidden] { display:none; }
.bandeau-entete { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.bandeau-numero { font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--doux); }
.bandeau-fermer { background:none; border:0; color:var(--doux); font-size:1.4rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.bandeau-fermer:hover { color:var(--accent); }
.bandeau-contenu p { color:var(--texte); margin:0; }
.bandeau-tout { display:inline-block; margin-top:.6rem; font-family:var(--sans); font-size:.75rem; letter-spacing:.04em; text-decoration:none; color:var(--doux); }

/* Accueil : surtitres, édito, une à la façon d'un quotidien */
.surtitre { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .9rem; }
.edito { max-width:var(--colonne); margin:0 auto 3rem; }
.edito p { font-size:1.22rem; line-height:1.6; color:var(--texte); font-style:italic; margin:0 0 .8rem; }
.edito p + p { font-size:1.05rem; color:var(--doux); }
.une { border-top:1px solid var(--filet); padding-top:1.2rem; margin-bottom:3rem; }
.une-grille { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); }
.une-principale { padding-right:2rem; border-right:1px solid var(--filet); }
.une-secondaires { padding-left:2rem; }
.une-secondaires .carte + .carte { border-top:1px solid var(--filet); margin-top:1.3rem; padding-top:1.3rem; }
.carte-rubrique { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--couleur); margin:0 0 .45rem; }
.carte-titre { font-weight:400; line-height:1.2; margin:0; }
.carte-titre a { text-decoration:none; color:var(--texte); }
.carte-titre a:hover { color:var(--accent); }
.carte-principale .carte-titre { font-size:clamp(1.6rem, 3.4vw, 2.15rem); }
.carte-secondaire .carte-titre { font-size:1.15rem; }
.carte-resume { color:var(--doux); margin-top:.6rem; }
.carte-principale .carte-resume { font-size:1.1rem; line-height:1.55; }
.carte-secondaire .carte-resume { font-size:.95rem; }
.carte .meta { margin-top:.6rem; }
.tous-les-articles { margin-top:1.6rem; font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; }
.tous-les-articles a { text-decoration:none; color:var(--doux); }
.tous-les-articles a:hover { color:var(--accent); }
.themes-accueil { border-top:1px solid var(--filet); padding-top:1.2rem; }
@media (max-width:700px) {
  .page { padding-left:1rem; padding-right:1rem; }
  .une-grille { grid-template-columns:1fr; }
  .une-principale { padding:0 0 1.3rem; border-right:0; border-bottom:1px solid var(--filet); }
  .une-secondaires { padding:1.3rem 0 0; }
  .edito p { font-size:1.1rem; }
}
.liste-articles > li:first-child { padding-top:0; }

/* Liens externes : ouverts dans un nouvel onglet, signalés par une petite flèche discrète. */
a[target="_blank"]::after { content: "\2009↗"; font-size: .75em; color: var(--doux); }
a[target="_blank"]:hover::after { color: inherit; }