/* Passelume — une colonne de lecture, un ciel d'hiver froid, une seule couleur chaude : le Soleil. */
:root {
  --ciel: #EDF1F6;
  --encre: #17212F;
  --brume: #5C6B7E;
  --givre: #D3DBE5;
  --soleil: #B86A00;
  --ombre: #2B3A4F;
  --jour: #FFFFFF;
  --nuit: #2B3A4F;
  --lueur: #A9B7C8;
  --terre: #A9B8C9;
  --repere: #C0392B;
  --titre: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --texte: "Source Serif 4", Georgia, "Times New Roman", serif;
  --outil: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jour: #3A4B63; --nuit: #05090F; --terre: #7C92AD; --repere: #FF7B6B;
    --ciel: #0F1722; --encre: #E4EAF1; --brume: #93A1B3; --givre: #263242;
    --soleil: #F2B04C; --ombre: #8FA0B6; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --jour: #3A4B63; --nuit: #05090F; --terre: #7C92AD; --repere: #FF7B6B;
  --ciel: #0F1722; --encre: #E4EAF1; --brume: #93A1B3; --givre: #263242;
  --soleil: #F2B04C; --ombre: #8FA0B6; color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ciel);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.1875rem;
  line-height: 1.62;
  padding-inline: 20px;
  padding-block: 28px 72px;
}
img, svg { max-width: 100%; }
.page { max-width: 34rem; margin-inline: auto; display: flex; flex-direction: column; gap: 2.5rem; }

a { color: var(--encre); text-decoration-color: var(--soleil); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--soleil); outline-offset: 3px; border-radius: 2px; }

.bandeau {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; align-items: baseline;
  font-family: var(--outil); font-size: .75rem; letter-spacing: .04em; color: var(--brume);
  border-bottom: 1px solid var(--givre); padding-bottom: .75rem;
}
.bandeau .maison { font-family: var(--titre); font-weight: 800; font-size: 1rem; letter-spacing: 0; color: var(--encre); text-decoration: none; }
.bandeau a.maison:hover { text-decoration: underline; text-decoration-color: var(--soleil); }

/* ——— Article ——— */
.tete { display: flex; flex-direction: column; gap: 1rem; }
h1 {
  font-family: var(--titre); font-weight: 800;
  font-size: clamp(1.9rem, 7.2vw, 2.9rem); line-height: 1.06; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
h1 span { color: var(--soleil); display: block; }
.signature { font-family: var(--outil); font-size: .78rem; color: var(--brume); margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.signature b { font-weight: 500; color: var(--encre); }

.corps { display: flex; flex-direction: column; gap: 1.15rem; counter-reset: para; }
.corps p { margin: 0; position: relative; counter-increment: para; }
/* Le relief : une chose mise en avant par paragraphe, passée au surligneur */
.corps strong { font-weight: 600; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--soleil) 30%, transparent) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.corps p.question { font-family: var(--titre); font-weight: 600; font-size: 1.45rem; line-height: 1.2; padding-top: .6rem; }
.corps p.chute {
  font-family: var(--titre); font-weight: 800; font-size: clamp(1.4rem, 5.2vw, 1.8rem); line-height: 1.15;
  letter-spacing: -.01em; text-wrap: balance; padding-top: .8rem;
}
.corps p.chute em { font-style: normal; color: var(--soleil); }

figure { margin: .6rem 0; display: flex; flex-direction: column; gap: .6rem; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { font-family: var(--outil); font-size: .74rem; line-height: 1.5; color: var(--brume); }
.sol { stroke: var(--givre); stroke-width: 2; fill: none; }
.rayon { stroke: var(--soleil); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.astre { fill: var(--soleil); }
.perso { stroke: var(--encre); stroke-width: 3; stroke-linecap: round; fill: none; }
.tete-perso { fill: var(--encre); }
.portee { stroke: var(--ombre); stroke-width: 6; stroke-linecap: round; fill: none; }
.etiq { font-family: var(--outil); font-size: 12.5px; fill: var(--brume); }
.etiq-fort { font-family: var(--titre); font-weight: 600; font-size: 15px; fill: var(--encre); }
.globe { fill: var(--jour); stroke: var(--encre); stroke-width: 1.5; }
.nuit { fill: var(--nuit); }
.contour { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.axe { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; }
.equateur { stroke: var(--brume); stroke-width: 1; fill: none; }
.paris-jour { stroke: var(--soleil); stroke-width: 5; stroke-linecap: round; fill: none; }
.paris-nuit { stroke: var(--lueur); stroke-width: 5; stroke-linecap: round; fill: none; }
.ville { fill: var(--encre); stroke: var(--jour); stroke-width: 1.5; }
.faisceau { fill: var(--soleil); opacity: .22; }
.tache { stroke: var(--soleil); stroke-width: 6; stroke-linecap: round; fill: none; }

.guide { stroke: var(--brume); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.ecart { stroke: var(--soleil); stroke-width: 5; fill: none; }
.orbite { fill: none; stroke: var(--givre); stroke-width: 2; }
.ronde { display: none; fill: var(--brume); }
@supports (offset-path: path("M0 0")) {
  .ronde { display: inline; offset-path: path("M24,100 a194.45,58 0 1,0 388.9,0 a194.45,58 0 1,0 -388.9,0"); offset-rotate: 0deg; animation: ronde 24s linear infinite; }
}
@keyframes ronde { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .ronde { animation: none; display: none; } }

/* Paris fait son tour : le point va et vient entre son jour et sa nuit */
@keyframes tour-juin { to { transform: translate(70px, 30.4px); } }
@keyframes tour-decembre { to { transform: translate(-70px, -30.4px); } }
.tour-juin { animation: tour-juin 4s ease-in-out infinite alternate; }
.tour-decembre { animation: tour-decembre 4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .tour-juin, .tour-decembre { animation: none; } }

.sources { border-top: 2px solid var(--encre); margin-top: 1.5rem; padding-top: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.sources h2, .rubrique {
  font-family: var(--outil); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brume); margin: 0;
}
.sources ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; line-height: 1.5; color: var(--brume); }
.sources code { font-family: var(--outil); font-size: .82em; overflow-wrap: anywhere; }
.avertissement { font-size: .8rem; line-height: 1.5; color: var(--brume); margin: 0; }
.avertissement strong { color: var(--encre); font-weight: 600; }

/* ——— Accueil ——— */
.enseigne { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 1.5rem; }
.enseigne svg { width: 100%; height: auto; display: block; }
.enseigne h1 { font-size: clamp(3rem, 15vw, 5.4rem); line-height: .92; letter-spacing: -.04em; }
.devise { font-family: var(--titre); font-weight: 600; font-size: clamp(1.25rem, 4.6vw, 1.6rem); line-height: 1.2; margin: 0; text-wrap: balance; }
.intro { margin: 0; }

.rayonnage { display: flex; flex-direction: column; gap: 1rem; }
.textes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.textes li { border-top: 1px solid var(--givre); padding-block: 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.textes li:last-child { border-bottom: 1px solid var(--givre); }
.textes a { font-family: var(--titre); font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.65rem); line-height: 1.12; letter-spacing: -.01em; text-decoration: none; text-wrap: balance; }
.textes a:hover { text-decoration: underline; text-decoration-color: var(--soleil); text-decoration-thickness: 3px; }
.textes .meta { font-family: var(--outil); font-size: .74rem; color: var(--brume); display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.textes .meta b { font-weight: 500; color: var(--soleil); }
.suite { font-size: .9rem; color: var(--brume); margin: 0; }

.auteur { border-top: 1px solid var(--givre); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .7rem; }
.auteur p { margin: 0; }

/* ——— Fais tourner l'année ——— */
.annee { border-top: 1px solid var(--givre); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.annee h2 { font-family: var(--titre); font-weight: 800; font-size: clamp(1.4rem, 5.2vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.annee p { margin: 0; }
.annee canvas { width: 100%; height: auto; display: block; }
.annee-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.annee output { font-family: var(--titre); font-weight: 800; font-size: 1.5rem; line-height: 1; }
#annee-lecture { font: 500 .82rem var(--outil); color: var(--ciel); background: var(--encre); border: 0; border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer; }
#annee-lecture:hover { background: var(--soleil); }
.annee button:focus-visible, .annee input:focus-visible { outline: 2px solid var(--soleil); outline-offset: 3px; }
.annee-reglette { display: flex; flex-direction: column; gap: .2rem; }
.annee input[type=range] { width: 100%; margin: 0; accent-color: var(--soleil); }
.annee-mois { display: grid; grid-template-columns: repeat(12, 1fr); font: .68rem var(--outil); color: var(--brume); text-align: center; }
.annee-distance { font: .8rem/1.5 var(--outil); color: var(--brume); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.annee-distance b { color: var(--encre); font-weight: 500; font-variant-numeric: tabular-nums; }
#annee-note { color: var(--soleil); }
.jauge { position: relative; flex: 1 1 6rem; min-width: 5rem; height: 2px; background: var(--givre); }
.jauge i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--soleil); }
.lieux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lieu { display: grid; grid-template-columns: minmax(6rem, 9.5rem) minmax(0, 1fr); column-gap: .9rem; row-gap: .3rem; align-items: center; padding-block: .6rem; border-top: 1px solid var(--givre); }
.lieu:last-child { border-bottom: 1px solid var(--givre); }
.lieu-nom { grid-row: 1 / span 2; justify-self: start; text-align: left; font: 600 1rem/1.2 var(--titre); color: var(--encre); background: none; border: 0; border-bottom: 2px solid transparent; padding: .15rem 0; cursor: pointer; }
.lieu-nom[aria-pressed="true"] { border-bottom-color: var(--soleil); }
.lieu-barre { display: block; height: 10px; border-radius: 5px; background: var(--nuit); overflow: hidden; }
.lieu-barre i { display: block; height: 100%; background: var(--soleil); }
.lieu-texte { font: .74rem/1.4 var(--outil); color: var(--brume); font-variant-numeric: tabular-nums; }
.annee-legende { font: .74rem/1.5 var(--outil); color: var(--brume); }

/* Solstices et équinoxes, en rouge */
.annee-coches { position: relative; height: 9px; }
.annee-coches i { position: absolute; bottom: 0; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 1px; background: var(--repere); }
.annee-reperes { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: .35rem; }
.annee-reperes button { font: 600 .72rem/1.15 var(--titre); color: var(--repere); background: none; border: 1.5px solid var(--repere); border-radius: .7rem; padding: .4rem .55rem; cursor: pointer; text-align: center; }
.annee-reperes button:hover, .annee-reperes button[aria-pressed="true"] { background: var(--repere); color: var(--ciel); }
.annee p.annee-repere-texte { font-size: .95rem; line-height: 1.45; min-height: 4.4em; }
.annee-repere-texte strong { color: var(--repere); font-weight: 600; }

/* ——— Accueil : menu, affiche, texte à la une, sujets ——— */
.page.accueil { max-width: 44rem; }
.barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1.2rem; border-bottom: 1px solid var(--givre); padding-bottom: .75rem; }
.barre .maison { font-family: var(--titre); font-weight: 800; font-size: 1.05rem; color: var(--encre); text-decoration: none; }
.barre .liens { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; font: 500 .78rem var(--outil); }
.barre .liens a { color: var(--brume); text-decoration: none; }
.barre .liens a:hover { color: var(--encre); text-decoration: underline; text-decoration-color: var(--soleil); }
.affiche { display: flex; flex-direction: column; gap: 1rem; }
.affiche svg { width: 100%; height: auto; display: block; }
.affiche h1 { font-size: clamp(3.4rem, 17vw, 7.6rem); line-height: .9; letter-spacing: -.028em; margin-top: -.1em; }
.affiche .intro { max-width: 36rem; }
.lueur { fill: var(--soleil); opacity: .14; }
.horizon { stroke: var(--encre); stroke-width: 2; fill: none; }
.une { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.3rem; align-items: center; text-decoration: none; background: var(--jour); border: 1.5px solid var(--encre); border-radius: 1.1rem; padding: 1.2rem; transition: transform .15s ease, box-shadow .15s ease; }
.une:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--soleil); }
.une-image svg { width: 100%; height: auto; display: block; }
.une-texte { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.etiquette { align-self: flex-start; font: 500 .68rem var(--outil); letter-spacing: .08em; text-transform: uppercase; color: var(--ciel); background: var(--encre); border-radius: 999px; padding: .22rem .65rem; }
.une-titre { font: 800 clamp(1.3rem, 4.4vw, 1.7rem)/1.1 var(--titre); letter-spacing: -.01em; color: var(--encre); text-wrap: balance; }
.une-chapo { font-size: 1rem; line-height: 1.45; color: var(--encre); }
.une .meta { font: .74rem var(--outil); color: var(--encre); display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.une .meta span { opacity: .7; }
.une .meta b { font-weight: 500; color: var(--soleil); }
.sujets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sujets a { display: inline-flex; align-items: baseline; gap: .55rem; font: 600 1.05rem var(--titre); color: var(--encre); text-decoration: none; border: 1.5px solid var(--encre); border-radius: 999px; padding: .4rem 1rem; }
.sujets a:hover { background: var(--encre); color: var(--ciel); }
.sujets b { font: 500 .72rem var(--outil); color: var(--brume); }
@media (max-width: 34rem) { .une { grid-template-columns: 1fr; } .une-image { max-width: 15rem; } }
@media (prefers-reduced-motion: reduce) { .une { transition: none; } .une:hover { transform: none; } }

/* ——— Le mètre : quart de Terre, carte, loupe, triangle ——— */
.etiq-rouge { font-family: var(--titre); font-weight: 600; font-size: 14px; fill: var(--repere); }
.quart { fill: none; stroke: var(--soleil); stroke-width: 6; stroke-linecap: round; }
.mesure { fill: none; stroke: var(--repere); stroke-width: 8; stroke-linecap: round; }
.france { fill: var(--jour); stroke: var(--encre); stroke-width: 1.5; stroke-linejoin: round; }
.voisins { fill: var(--givre); stroke: var(--ciel); stroke-width: 1; opacity: .6; }
.chaine { fill: none; stroke: var(--soleil); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chaine.rail { opacity: .45; stroke-width: 1.2; }
.trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 9s ease-in-out infinite; }
@keyframes trace { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
.base-point { fill: var(--repere); stroke: var(--jour); stroke-width: 1.5; }
.pouls { animation: pouls 1.8s ease-in-out infinite alternate; }
@keyframes pouls { from { opacity: 1; } to { opacity: .45; } }
.barre { stroke: var(--encre); stroke-width: 9; fill: none; }
.barre-plein { fill: var(--encre); }
.manque { fill: var(--repere); }
@media (prefers-reduced-motion: reduce) { .trace { animation: none; stroke-dashoffset: 0; } .pouls { animation: none; } }

.tri svg { width: 100%; height: auto; display: block; touch-action: none; background: var(--jour); border: 1.5px solid var(--encre); border-radius: 1.1rem; }
.base { stroke: var(--repere); stroke-width: 5; stroke-linecap: round; }
.visee { stroke: var(--soleil); stroke-width: 2; stroke-dasharray: 5 4; }
.arc-angle { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.fantome { stroke: var(--repere); stroke-width: 1.5; stroke-dasharray: 2 4; }
.fantome-point { fill: none; stroke: var(--repere); stroke-width: 2.5; }
#tri-C { cursor: grab; outline: none; }
#tri-C:active { cursor: grabbing; }
#tri-C .prise { fill: var(--soleil); opacity: .18; }
#tri-C:hover .prise, #tri-C:focus-visible .prise { opacity: .38; }
.clocher { fill: var(--encre); stroke: var(--jour); stroke-width: 1.5; stroke-linejoin: round; }
.annee p.tri-resultat { font: .82rem/1.5 var(--outil); color: var(--brume); }
.tri-resultat b { font: 800 1.25rem/1 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.tri .annee-reperes button[aria-pressed="true"] { background: var(--repere); color: var(--ciel); }

/* ——— Sujets en étiquettes : un texte peut en porter plusieurs ——— */
.etiquettes { display: flex; flex-wrap: wrap; gap: .3rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags button { display: inline-flex; align-items: baseline; gap: .5rem; font: 600 1rem var(--titre); color: var(--encre); background: none; border: 1.5px solid var(--encre); border-radius: 999px; padding: .35rem .95rem; cursor: pointer; }
.tags button b { font: 500 .72rem var(--outil); color: var(--brume); }
.tags button:hover, .tags button[aria-pressed="true"] { background: var(--encre); color: var(--ciel); }
.tags button[aria-pressed="true"] b, .tags button:hover b { color: var(--ciel); opacity: .75; }
.tags button:focus-visible { outline: 2px solid var(--soleil); outline-offset: 3px; }
.textes li[hidden] { display: none; }