/* ludovic.baillet.org : feuille de style unique.
   De la famille du site de Heclium : bandeau sombre (en-tête, « À la une », pied),
   lecture sur cartes blanches, titres en Outfit, texte en Inter, bleu en accent. */

/* Polices hébergées sur le site (licence SIL OFL : u/f/OFL-*.txt) */
@font-face {font-family:Inter;font-weight:400;font-display:swap;src:url(../f/inter-latin-400-normal.woff2) format("woff2");}
@font-face {font-family:Inter;font-weight:500;font-display:swap;src:url(../f/inter-latin-500-normal.woff2) format("woff2");}
@font-face {font-family:Inter;font-weight:600;font-display:swap;src:url(../f/inter-latin-600-normal.woff2) format("woff2");}
@font-face {font-family:Outfit;font-weight:500;font-display:swap;src:url(../f/outfit-latin-500-normal.woff2) format("woff2");}
@font-face {font-family:Outfit;font-weight:600;font-display:swap;src:url(../f/outfit-latin-600-normal.woff2) format("woff2");}

:root
{
	--fond: #f3f5f8;
	--carte: #ffffff;
	--nuit: #0e1624;
	--nuit-texte: #dfe4ec;
	--nuit-pale: #8b93a5;
	--encre: #161c2a;
	--texte: #2a3040;
	--pale: #646c7d;
	--filet: #e2e6ec;
	--accent: #2563c9;
	--accent-fonce: #1d4fa3;
	--accent-clair: #e7eefb;
	--accent-nuit: #8ab8ff;        /* accent sur fond sombre */
	--titres: Outfit, "Segoe UI", sans-serif;
	--ui: Inter, "Segoe UI", sans-serif;
}

* {box-sizing:border-box;}
body {margin:0;background:var(--fond);color:var(--texte);font-family:var(--ui);font-size:16.5px;line-height:1.7;min-width:320px;}
a {color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover {color:var(--accent-fonce);}
img, video {max-width:100%;height:auto;}
.col {max-width:1140px;margin:0 auto;padding:0 28px;}
.surtitre {font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);}

/* ---------- En-tête : bandeau sombre, nom à gauche, menu à droite ---------- */

header {position:sticky;top:0;z-index:10;background:var(--nuit);}
.entete {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:74px;}
.marque {font-family:var(--titres);font-size:21px;font-weight:600;color:#fff;text-decoration:none;}
.marque:hover {color:#fff;}
nav.menu > ul {list-style:none;margin:0;padding:4px;display:flex;gap:2px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;}
nav.menu li {position:relative;padding:0;}
nav.menu > ul > li > a {display:block;padding:7px 14px;font-size:15px;font-weight:500;color:var(--nuit-texte);text-decoration:none;border-radius:6px;}
nav.menu > ul > li > a:hover, nav.menu li:focus-within > a {color:#fff;background:rgba(255,255,255,0.08);}
nav.menu > ul > li > a[aria-current] {color:#fff;background:rgba(37,99,201,0.5);}
nav.menu ul ul {display:none;position:absolute;top:100%;left:0;min-width:230px;list-style:none;margin:0;padding:8px 0;background:#fff;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,0.3);z-index:20;}
nav.menu ul ul::before {content:"";position:absolute;left:0;right:0;top:-8px;height:8px;}
nav.menu li:hover > ul, nav.menu li:focus-within > ul {display:block;}
nav.menu ul ul a {display:block;padding:6px 18px;color:var(--encre);text-decoration:none;font-size:15px;}
nav.menu ul ul a:hover {background:var(--accent-clair);color:var(--accent);}

/* ---------- Pages : une carte blanche de lecture ---------- */

main {padding:10px 0 20px;}
article {max-width:880px;margin:30px auto;padding:10px 40px 30px;background:var(--carte);border-radius:12px;box-shadow:0 2px 10px rgba(10,13,22,0.06);}
article.large {max-width:1140px;}
.fil {font-size:13px;color:var(--pale);margin:14px 0 0;}
.fil a {color:var(--pale);text-decoration:none;}
.fil a:hover {color:var(--accent);text-decoration:underline;}
.fil span {margin:0 7px;opacity:0.6;}
h1, h2, h3, h4 {font-family:var(--titres);font-weight:600;color:var(--encre);line-height:1.2;margin:0;letter-spacing:-0.01em;}
h1 {font-size:40px;padding:18px 0 14px;}
h2 {font-size:26px;padding:28px 0 8px;}
h3 {font-size:20px;padding:18px 0 4px;}
h4 {font-size:18px;padding:12px 0 2px;}
p {margin:0 0 16px;}
ul, ol {margin:0 0 16px;padding-left:26px;}
li {padding:3px 0;}
li > ul, li > ol {margin:0;}
strong {font-weight:600;color:var(--encre);}
code, kbd, .source {font-family:Consolas,"Courier New",monospace;font-size:0.85em;}
code {padding:1px 5px;background:var(--accent-clair);border-radius:3px;}
kbd {padding:1px 6px;border:1px solid var(--filet);border-bottom-width:2px;border-radius:4px;background:#fff;}
.source {padding:12px 16px;margin:0 0 16px;overflow-x:auto;background:var(--fond);border-radius:6px;}
math {font-size:1.05em;}
.chapeau {font-size:18.5px;line-height:1.6;color:#4a5264;margin-bottom:24px;}
.discret {color:var(--pale);font-size:15px;}
.center {text-align:center;}
hr {border:0;border-top:1px solid var(--filet);margin:30px 0;}

/* Tableaux (les pages à tableaux particuliers gardent leurs propres styles) */
table {border-collapse:collapse;}
.tableau {overflow-x:auto;margin:0 0 18px;}
.tableau table {font-size:15.5px;}
.tableau th, .tableau td {border-bottom:1px solid var(--filet);padding:8px 14px 8px 0;vertical-align:top;text-align:left;}
.tableau th {font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--encre);}
.tableau td ul {margin:0;padding-left:20px;}

/* Captures légendées (miniature 384×216, image 4K dans la visionneuse) */
figure {margin:0;}
figure.capture {display:inline-block;vertical-align:top;max-width:384px;margin:10px 8px 20px;text-align:center;}
figure.capture img, .illustration img {display:block;border:1px solid var(--filet);border-radius:8px;background:#fff;}
figure.capture figcaption, .illustration figcaption {margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--pale);}
.illustration {margin:10px 0 24px;}

/* Boutons */
.bouton {display:inline-block;padding:12px 22px;border-radius:8px;background:var(--accent);color:#fff;font-size:15px;font-weight:500;text-decoration:none;border:0;cursor:pointer;}
.bouton:hover {background:var(--accent-fonce);color:#fff;}
.lien-fleche {font-size:15px;font-weight:500;margin-left:16px;}

/* Formulaires */
label {display:block;margin:14px 0 4px;font-size:14px;font-weight:600;}
input, textarea {width:100%;max-width:560px;padding:9px 11px;font:inherit;font-size:16px;border:1px solid var(--filet);border-radius:6px;background:#fff;color:var(--texte);}
input:focus, textarea:focus {outline:2px solid rgba(37,99,201,0.3);border-color:var(--accent);}
form .bouton {margin-top:12px;}
.piege {position:absolute;left:-9999px;}

/* Encadré */
.encadre {margin:24px 0;padding:18px 22px;background:var(--accent-clair);border-radius:8px;font-size:15.5px;}
.encadre p:last-child {margin-bottom:0;}

/* Sommaires : une entrée par ligne, titre + résumé (+ image) */
.sommaire {list-style:none;padding:0;margin:10px 0 24px;border-top:1px solid var(--filet);}
.sommaire li {padding:0;border-bottom:1px solid var(--filet);}
.sommaire a {display:grid;grid-template-columns:minmax(0,1fr);gap:2px 22px;padding:14px 0;color:inherit;text-decoration:none;}
.sommaire a.avec-image {grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;}
.sommaire img {width:200px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--filet);border-radius:8px;background:#fff;grid-row:span 2;}
.sommaire a.avec-image b {padding-top:6px;}
.sommaire b {font-family:var(--titres);font-weight:600;font-size:20px;color:var(--encre);line-height:1.25;}
.sommaire span {color:var(--pale);font-size:15.5px;}
.sommaire a:hover b {color:var(--accent);}
.sommaire .externe b::after {content:" ↗";font-size:0.7em;color:var(--pale);}

/* Liens commentés (pages de liens) */
.liens {list-style:none;padding:0;}
.liens li {padding:8px 0;border-bottom:1px solid var(--filet);}
.liens li a {font-size:16.5px;font-weight:500;}
.liens li span {display:block;font-size:13px;color:var(--pale);overflow-wrap:anywhere;}

/* ---------- Accueil ---------- */

/* À la une : dans le bandeau sombre, sous l'en-tête */
.accueil main {padding-top:0;}
.une {background:var(--nuit);padding:30px 0 50px;color:var(--nuit-texte);}
.une .col {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:44px;align-items:center;}
.une .surtitre {color:var(--accent-nuit);}
.une h1 {font-weight:500;font-size:50px;line-height:1.08;color:#fff;padding:12px 0 18px;}
.une h1 em {font-style:normal;color:var(--accent-nuit);}
.une .chapeau {color:#b3bccb;}
.une .lien-fleche {color:#fff;}
.une figure img {display:block;width:100%;border-radius:10px;}
.une figcaption {font-size:13px;color:var(--nuit-pale);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.1);}

.corps {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;padding:40px 28px 20px;}
.corps > div, aside {background:var(--carte);border-radius:12px;padding:24px 26px;box-shadow:0 2px 10px rgba(10,13,22,0.05);align-self:start;}
.corps h2 {font-size:30px;padding:0 0 4px;}
.intro {color:var(--pale);margin:0 0 22px;}
.titre-article {display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--filet);text-decoration:none;color:inherit;}
.titre-article img {width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border:1px solid var(--filet);border-radius:8px;background:#fff;}
.titre-article h3 {font-size:20px;padding:4px 0 6px;}
.titre-article p {margin:0;font-size:15.5px;color:#4a5264;}
.titre-article:hover h3 {color:var(--accent);}
.breves {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--filet);padding-top:20px;}
.breve {text-decoration:none;color:inherit;}
.breve h4 {font-size:19px;padding:4px 0;}
.breve p {margin:0;font-size:15.5px;color:var(--pale);}
.breve:hover h4 {color:var(--accent);}

aside h2 {font-size:24px !important;border-bottom:2px solid var(--encre);padding-bottom:6px !important;margin-bottom:10px;}
aside ol, aside ul {list-style:none;margin:0 0 30px;padding:0;}
aside li {padding:9px 0;border-bottom:1px solid var(--filet);}
aside li a {color:var(--encre);text-decoration:none;font-size:15.5px;font-weight:500;}
aside li a:hover {color:var(--accent);}
aside li span span {display:block;font-size:14.5px;color:var(--pale);}
aside ol {counter-reset:n;}
aside ol li {counter-increment:n;display:grid;grid-template-columns:34px 1fr;}
aside ol li::before {content:counter(n,upper-roman);font-size:12px;font-weight:600;color:var(--accent);padding-top:3px;}
.carte-auteur {background:var(--accent-clair);padding:20px 22px;border-radius:8px;font-size:15.5px;}
.carte-auteur strong {font-family:var(--titres);font-size:19px;display:block;margin-bottom:4px;}

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

.pied {margin-top:40px;background:var(--nuit);padding:28px 0 40px;font-size:14px;color:var(--nuit-pale);}
.pied .col {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.pied a {color:var(--nuit-texte);text-decoration:none;margin-right:20px;}
.pied a:hover {color:#fff;}

/* ---------- Téléphone ---------- */

@media (max-width:900px)
{
	.col {padding:0 16px;}
	.entete {flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;padding-bottom:10px;}
	/* Menu : les rubriques passent à la ligne si besoin (sinon le sous-menu serait coupé) ; chacune a sa page de sommaire */
	nav.menu {max-width:100%;}
	nav.menu > ul {flex-wrap:wrap;}
	nav.menu > ul > li > a {padding:6px 10px;white-space:nowrap;}
	article {margin:0;padding:4px 16px 20px;border-radius:0;box-shadow:none;}
	h1, .une h1 {font-size:32px;}
	h2 {font-size:22px;}
	.une .col, .corps {grid-template-columns:minmax(0,1fr);gap:24px;}
	.corps {padding:24px 16px 10px;}
	.corps > div, aside {padding:18px 16px;}
	.titre-article, .sommaire a.avec-image {grid-template-columns:minmax(0,1fr);}
	.sommaire img {width:100%;grid-row:auto;}
	.breves {grid-template-columns:minmax(0,1fr);}
	figure.capture {margin:10px 0 18px;}
}

/* ---------- Visionneuse d'images (u/j/lightbox.js) ---------- */

dialog.lightbox {border:none;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(20,20,20,0.94);color:rgb(230,230,230);overflow:hidden;font-family:var(--ui);}
dialog.lightbox::backdrop {background:rgba(0,0,0,0.6);}
html.lightbox-open {overflow:hidden;}
.lightbox-figure {margin:0;height:100%;padding:52px 72px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.lightbox-img {display:block;max-width:100%;max-height:calc(100% - 5em);object-fit:contain;background:black;box-shadow:0 4px 24px rgba(0,0,0,0.6);}
.lightbox-caption {margin-top:12px;max-width:900px;font-size:14.5px;font-style:italic;line-height:1.4;text-align:center;color:rgb(220,220,220);}
.lightbox-bar {position:fixed;top:0;left:0;right:64px;padding:14px 18px;font-size:14px;display:flex;gap:20px;align-items:center;}
.lightbox-full {color:var(--accent-nuit);text-decoration:none;}
.lightbox-full:hover {text-decoration:underline;}
.lightbox-close, .lightbox-prev, .lightbox-next {position:fixed;border:none;border-radius:50%;width:44px;height:44px;padding:0;font-size:22px;line-height:44px;text-align:center;cursor:pointer;color:white;background:rgba(255,255,255,0.14);}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {background:rgba(138,184,255,0.9);color:black;outline:none;}
.lightbox-close {top:8px;right:10px;}
.lightbox-prev, .lightbox-next {top:50%;margin-top:-22px;font-size:32px;}
.lightbox-prev {left:12px;}
.lightbox-next {right:12px;}
@media screen and (max-width:640px)
{
	.lightbox-figure {padding:52px 8px 64px;}
	.lightbox-prev, .lightbox-next {top:auto;bottom:10px;margin-top:0;}
	.lightbox-caption {font-size:13px;}
}