/* Palette claire par défaut. Le mode sombre s'applique de deux façons, dans cet
ordre de priorité : (1) préférence OS via prefers-color-scheme si l'utilisateur
n'a rien choisi ; (2) choix explicite via data-theme sur , posé par le
bouton — data-theme gagne toujours, dans les DEUX sens (forcer clair ou sombre). */
:root {
--bg:#ffffff; --fg:#1a1a1a; --muted:#5b6470; --border:#e4e7eb;
--link:#0b57d0; --row:#f7f8fa; --code:#f0f2f5; --accent:#0b57d0;
--card:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.06);
/* Carte de produit arrêté : fond et bordure ambrés discrets pour la distinguer
sans crier ; le badge « Arrêté » reprend ces mêmes tons plus soutenus. */
--retired-card:#fbf6ec; --retired-border:#e7d9b8; --retired-badge:#8a6d1f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg:#14171c; --fg:#e6e8eb; --muted:#98a2b3; --border:#2a2f37;
--link:#8ab4ff; --row:#1a1e24; --code:#20252d; --accent:#8ab4ff;
--card:#191d23; --shadow:none;
--retired-card:#221e15; --retired-border:#3a3320; --retired-badge:#d9bd74;
}
}
:root[data-theme="dark"] {
--bg:#14171c; --fg:#e6e8eb; --muted:#98a2b3; --border:#2a2f37;
--link:#8ab4ff; --row:#1a1e24; --code:#20252d; --accent:#8ab4ff;
--card:#191d23; --shadow:none;
--retired-card:#221e15; --retired-border:#3a3320; --retired-badge:#d9bd74;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
margin:0 auto; max-width:64rem; padding:1.5rem clamp(1rem,4vw,2.5rem) 4rem;
background:var(--bg); color:var(--fg);
font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
a:visited { color:var(--link); }
/* Liens dans le corps de texte (pages éditoriales Markdown) : une URL longue sans
espace ne doit pas pousser la page en largeur — on la laisse se couper. Ciblé sur
les paragraphes pour ne pas toucher la navigation (fil d'Ariane, cartes, thèmes). */
main p a { overflow-wrap:anywhere; }
h1 { font-size:1.7rem; line-height:1.2; margin:0 0 .4rem; }
h2 { font-size:1.15rem; margin:2.2rem 0 .8rem; }
p { margin:.5rem 0; }
/* Pages éditoriales : plus d'air entre le titre et le 1ᵉʳ paragraphe de contenu.
Exclut p.lead (chapô d'accueil / résumé de fiche), volontairement rapproché du h1. */
main h1 + p:not(.lead) { margin-top:1rem; }
hr { border:0; border-top:1px solid var(--border); margin:2rem 0; }
code { background:var(--code); padding:.1em .35em; border-radius:4px;
font-size:.85em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
nav.crumbs { font-size:.9rem; color:var(--muted); margin-bottom:1.2rem;
word-break:break-word; }
nav.crumbs a { color:var(--muted); }
nav.crumbs a:hover { color:var(--link); }
nav.crumbs span[aria-current] { color:var(--fg); }
/* Pas de max-width ici : le chapô suit la largeur du contenu (body, 64rem), aligné
avec les cartes et le pied de page — plutôt qu'un bloc plus étroit isolé. */
p.lead { color:var(--muted); font-size:1.05rem; }
/* Sommaire de thèmes (accueil) : puces compactes qui défilent vers la section
correspondante (liens #ancre, même page). Discret, ne pousse pas les cartes trop bas. */
nav.theme-nav { display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:1.1rem 0 1.8rem; }
nav.theme-nav a { font-size:.85rem; color:var(--muted); text-decoration:none;
padding:.2rem .6rem; border:1px solid var(--border);
border-radius:999px; background:var(--row); white-space:nowrap; }
nav.theme-nav a:hover { color:var(--link); border-color:var(--accent); }
/* Bandeau « produit arrêté » en tête de fiche : même palette ambrée que les cartes. */
p.retired-banner { max-width:46rem; margin:.6rem 0; padding:.6rem .85rem;
font-size:.95rem; color:var(--fg);
background:var(--retired-card);
border:1px solid var(--retired-border);
border-left:3px solid var(--retired-badge); border-radius:6px; }
p.retired-banner strong { color:var(--retired-badge); }
/* Accueil : sections thématiques + grille de cartes produit */
section.theme { margin-top:2.2rem; }
/* Le titre de thème est un lien vers sa page : couleur de texte normale, il ne se
colore et se souligne qu'au survol (pour ne pas alourdir la hiérarchie). */
section.theme h2 a { color:inherit; }
section.theme h2 a:hover { color:var(--link); }
ul.grid { list-style:none; margin:0; padding:0; display:grid; gap:.8rem;
grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); }
ul.grid li { margin:0; }
a.card { display:flex; flex-direction:column; height:100%; padding:.9rem 1rem;
border:1px solid var(--border); border-radius:10px; background:var(--card);
box-shadow:var(--shadow); color:inherit; }
a.card:hover { border-color:var(--accent); text-decoration:none; }
/* En-tête de carte : titre à gauche, badge producteur à droite (flex, robuste). */
a.card .card-head { display:flex; align-items:flex-start; justify-content:space-between;
gap:1rem; }
a.card strong { font-size:1.02rem; color:var(--link); }
/* margin-bottom : garantit un minimum d'air entre la fin du résumé et le filet du
pied, même quand la carte est « pleine » (margin-top:auto du pied ne laisse alors
aucun espace). */
a.card .summary { margin-top:.25rem; margin-bottom:.9rem; font-size:.9rem;
color:var(--muted); }
/* Pied de carte « Mise à jour » : détaché du corps par un filet (border-top) qui
court bord à bord (marges négatives = padding de la carte). Poussé en bas
(margin-top:auto) pour aligner les cartes d'une même rangée. */
a.card .update { margin-top:auto; padding:.5rem 1rem 0; margin-left:-1rem;
margin-right:-1rem; border-top:1px solid var(--border);
font-size:.8rem; color:var(--muted); font-style:italic; }
/* Badge producteur : logo (img) ou nom, calé en haut à droite. flex-shrink:0
pour qu'il ne s'écrase pas ; le titre prend la place restante. Le gap sépare
les logos entre eux (coédition IGN + INSEE) pour qu'ils ne se touchent pas. */
a.card .producer { flex:0 0 auto; max-width:50%; font-size:.78rem;
color:var(--muted); text-align:right;
display:flex; align-items:center; gap:.7rem;
justify-content:flex-end; flex-wrap:wrap; }
/* height (et non max-height) : le logo SVG n'a pas de dimensions intrinsèques
(viewBox seul) ; sans hauteur imposée, width:auto s'effondre à 0 en flex et
l'image devient invisible. Hauteur fixe → largeur calculée par le ratio. */
a.card .producer img { display:block; height:0.8rem; max-width:100%;
width:auto; margin-left:auto; opacity:.65; }
/* Produit arrêté : carte au fond ambré, distincte du flux principal. Affichée en
ligne avec les autres pour l'instant (pas de masquage) ; le badge « Arrêté » et le
fond signalent le statut. */
a.card.card--retired { background:var(--retired-card);
border-color:var(--retired-border); }
a.card.card--retired:hover { border-color:var(--retired-badge); }
/* Badge « Arrêté » calé à gauche de la ligne d'en-tête, avant le titre. */
a.card .retired-flag { display:inline-block; font-size:.7rem; font-weight:600;
letter-spacing:.02em; text-transform:uppercase;
color:var(--retired-badge); border:1px solid var(--retired-border);
border-radius:5px; padding:.05rem .35rem; margin-bottom:.35rem;
align-self:flex-start; }
/* Fiche produit : liens de spécification */
ul.specs { list-style:none; margin:.5rem 0; padding:0; }
ul.specs li { margin:.3rem 0; }
/* L'emoji est posé dans le HTML (par type de doc, cf. _spec_icon), pas en ::before,
pour pouvoir varier d'une ligne à l'autre. */
ul.specs .spec-icon { font-style:normal; }
p.meta { font-size:.9rem; color:var(--muted); }
/* Listing de fichiers/dossiers */
table.listing { width:100%; border-collapse:collapse; font-size:.94rem; margin-top:.5rem; }
.listing th, .listing td { padding:.5rem .6rem; border-bottom:1px solid var(--border);
text-align:left; vertical-align:top; }
.listing th { color:var(--muted); font-weight:600; white-space:nowrap; }
.listing tbody tr:hover { background:var(--row); }
.listing td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* MD5 : hash de 32 car. gardé sur une seule ligne (jamais cassé). Le nom de
fichier absorbe la contrainte de largeur et se coupe proprement (aux séparateurs
_ - . via overflow-wrap:anywhere, plutôt qu'en plein milieu d'un mot). */
.listing td.md5 code { color:var(--muted); white-space:nowrap; }
.listing td:first-child a { overflow-wrap:anywhere; }
/* Dossier signalé par 📁 (préfixe) + le suffixe « / ». Fichier signalé par une
petite icône « document » (SVG inline en data-URI, fond blanc + contour sombre)
posée en ::before — définie une seule fois dans le CSS, donc légère même sur un
listing de milliers de fichiers. `:not(.dir)` évite tout conflit avec le 📁. */
.listing a.dir::before { content:"📁 "; }
.listing a.dir::after { content:"/"; color:var(--muted); }
.listing td:first-child a:not(.dir)::before {
content:""; display:inline-block; width:.72em; height:.9em;
margin-right:.4em; vertical-align:-.12em;
background:url('data:image/svg+xml,') no-repeat center/contain;
}
.up { display:inline-block; margin:.4rem 0 .2rem; }
footer { margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--border);
font-size:.85rem; color:var(--muted);
display:flex; align-items:flex-start; gap:1rem; }
/* Le texte du footer coule normalement (un seul bloc) et prend la largeur ; l'icône
dépôt reste à droite. */
footer .footer-text { flex:1; }
/* Lien dépôt : icône GitHub discrète mais bien visible, en gris muted, passant à la
couleur du texte au survol. flex-shrink:0 : ne s'écrase pas. display:flex sur le
lien pour que le SVG ne soit pas rogné par la hauteur de ligne. */
footer .repo-link { flex:0 0 auto; display:flex; color:var(--muted); }
footer .repo-link:hover { color:var(--fg); }
/* Bouton de bascule clair/sombre, fixé en haut à droite. Discret mais détaché du
fond : fond légèrement teinté (--row, distinct du blanc de la page), bordure plus
soutenue et ombre portée explicite (--shadow est nul en sombre, d'où une valeur
propre ici) pour qu'il ne se fonde pas — surtout en thème clair sur fond blanc. */
/* Interrupteur clair/sombre : une pilule (le