/*
 * Institut Labeet — revue.
 *
 * Archétype « editorial ». Contrat de conception, opposé au héros :
 * le titre reste modeste (≈40 px), le texte est dense et lisible dès le
 * premier écran, la figure est reléguée en marge, et l'appareil critique
 * (cote, numérotation, notes, tableau, ours) structure la lecture.
 * Papier de bibliothèque, encre, un seul rouge de correction.
 */

@font-face { font-family: "Source Serif"; src: url("../fonts/serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("../fonts/serif-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("../fonts/serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/cond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
	--papier: #f7f5ef;
	--encre: #1a1a17;
	--gris: #55524a;
	--filet: #cdc8bb;
	--correction: #a8321f;
	--serif: "Source Serif", "Iowan Old Style", Georgia, serif;
	--appareil: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	--largeur: 1180px;
}

* { box-sizing: border-box; }
body {
	background: var(--papier);
	color: var(--encre);
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.58;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
img { display: block; height: auto; max-width: 100%; }
a { color: inherit; }
:where(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--correction); outline-offset: 2px; }
.colonne { margin-inline: auto; max-width: var(--largeur); padding-inline: clamp(18px, 3.5vw, 40px); width: 100%; }
.saut { left: -9999px; position: absolute; }
.saut:focus { background: var(--encre); color: var(--papier); left: 8px; padding: 10px 14px; top: 8px; }

/* ---- appareil de tête ---- */
.bandeau-avert {
	background: var(--encre); color: var(--papier); font-family: var(--appareil);
	font-size: 11px; letter-spacing: 0.13em; margin: 0; padding: 8px 16px;
	text-align: center; text-transform: uppercase;
}
.tete { border-bottom: 3px double var(--filet); }
.tete-int { align-items: baseline; display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; padding-block: 20px 14px; }
.institut { font-size: 27px; font-weight: 600; letter-spacing: -0.012em; text-decoration: none; }
.departement { color: var(--gris); font-family: var(--appareil); font-size: 11.5px; letter-spacing: 0.1em; margin: 2px 0 0; text-transform: uppercase; }
.sommaire-liste { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.sommaire-liste a { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 1px; }
.sommaire-liste a:hover { border-color: var(--correction); color: var(--correction); }
.tete-regie {
	border-top: 1px solid var(--filet); color: var(--gris); display: flex; flex-wrap: wrap;
	font-family: var(--appareil); font-size: 10.5px; gap: 6px 26px; letter-spacing: 0.1em;
	margin: 0; padding: 7px clamp(18px, 3.5vw, 40px); text-transform: uppercase;
	max-width: var(--largeur); margin-inline: auto;
}

/* ---- la une : titre modeste, texte dense ---- */
.une { padding-block: clamp(26px, 3.5vw, 44px) 0; }
.cote { color: var(--correction); font-family: var(--appareil); font-size: 11.5px; letter-spacing: 0.16em; margin: 0 0 10px; text-transform: uppercase; }
.une-titre {
	font-size: clamp(30px, 3.4vw, 42px);   /* jamais une affiche */
	font-weight: 600; letter-spacing: -0.018em; line-height: 1.13;
	margin: 0 0 14px; max-width: 26ch; text-wrap: balance;
}
.chapeau { font-size: 19px; line-height: 1.5; margin: 0 0 12px; max-width: 62ch; }
.chapeau::first-letter { font-size: 1.05em; }
.signature { color: var(--gris); font-family: var(--appareil); font-size: 12px; letter-spacing: 0.08em; margin: 0 0 24px; text-transform: uppercase; }

.une-corps { border-top: 1px solid var(--filet); display: grid; gap: 30px; padding-top: 22px; }
@media (min-width: 900px) { .une-corps { grid-template-columns: 1fr 300px; gap: 44px; } }
.une-texte .prose { column-gap: 34px; }
@media (min-width: 760px) { .une-texte .prose { column-count: 2; column-rule: 1px solid var(--filet); } }
.prose p { margin: 0 0 12px; text-wrap: pretty; }
.prose p:first-of-type::first-letter {
	color: var(--correction); float: left; font-size: 3.1em; font-weight: 600;
	line-height: 0.84; padding: 4px 8px 0 0;
}
.prose h2 { break-after: avoid; font-size: 19px; margin: 18px 0 6px; }

/* marge : encadré et figure — la figure n'occupe jamais l'écran */
.marge { display: flex; flex-direction: column; gap: 22px; }
.encadre { background: #efece2; border-left: 3px solid var(--correction); padding: 14px 16px; }
.encadre-titre { font-family: var(--appareil); font-size: 11px; letter-spacing: 0.14em; margin: 0 0 7px; text-transform: uppercase; }
.encadre p { font-size: 14.5px; line-height: 1.5; margin: 0 0 7px; }
.figure { margin: 0; }
.figure img { border: 1px solid var(--filet); filter: grayscale(0.32) contrast(1.04); }
.figure figcaption { color: var(--gris); font-family: var(--appareil); font-size: 11.5px; line-height: 1.42; margin-top: 6px; }
.fig-num { color: var(--encre); font-weight: 500; }

/* ---- sections de revue ---- */
.sec { padding-block: clamp(28px, 3.4vw, 44px); }
.sec + .sec { border-top: 1px solid var(--filet); }
.sec-titre { align-items: baseline; display: flex; font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; gap: 12px; letter-spacing: -0.01em; margin: 0 0 12px; max-width: 34ch; }
.para-num { color: var(--correction); font-family: var(--appareil); font-size: 12px; letter-spacing: 0.08em; }
.sec-intro { color: var(--gris); font-size: 16.5px; margin: 0 0 18px; max-width: 66ch; }

.dev { display: grid; gap: 22px 34px; }
@media (min-width: 760px) { .dev { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.dev-bloc h3 { font-size: 17px; margin: 0 0 5px; }
.dev-bloc h3::before { color: var(--correction); content: "— "; }
.dev-bloc p { color: var(--gris); font-size: 15px; margin: 0 0 7px; }
.dev-bloc ul { font-size: 14px; margin: 0; padding-left: 17px; }
.dev-bloc li { margin-bottom: 3px; }

.tableau { border-collapse: collapse; font-size: 15px; margin-top: 8px; width: 100%; }
.tableau caption { color: var(--gris); font-family: var(--appareil); font-size: 11px; letter-spacing: 0.13em; padding-bottom: 8px; text-align: left; text-transform: uppercase; }
.tableau th, .tableau td { border-bottom: 1px solid var(--filet); padding: 9px 12px 9px 0; text-align: left; vertical-align: baseline; }
.tableau thead th { border-bottom: 2px solid var(--encre); font-family: var(--appareil); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.tableau tbody th { font-weight: 400; width: 62%; }
.tableau td { font-family: var(--appareil); font-size: 15px; }

.chrono { margin: 0; }
.chrono dt { border-top: 1px solid var(--filet); font-weight: 600; margin-top: 12px; padding-top: 10px; }
.chrono-repere { color: var(--correction); font-family: var(--appareil); font-size: 12px; }
.chrono dd { color: var(--gris); font-size: 15px; margin: 4px 0 0; max-width: 70ch; }

.exergue { border-left: 3px solid var(--correction); margin: 0; padding-left: 20px; }
.exergue-texte { font-size: clamp(19px, 2vw, 25px); font-style: italic; line-height: 1.36; margin: 0; max-width: 44ch; }
.exergue-source { color: var(--gris); font-family: var(--appareil); font-size: 11.5px; letter-spacing: 0.1em; margin-top: 9px; text-transform: uppercase; }

.questions { display: grid; gap: 16px 34px; }
@media (min-width: 820px) { .questions { grid-template-columns: 1fr 1fr; } }
.question h3 { font-size: 16px; margin: 0 0 4px; }
.question p { color: var(--gris); font-size: 15px; margin: 0; }

.planche-int { display: grid; gap: 24px; }
@media (min-width: 880px) { .planche-int { grid-template-columns: 1fr 340px; } }
.planche-texte p { color: var(--gris); max-width: 62ch; }
.lien-note { color: var(--correction); font-family: var(--appareil); font-size: 13px; letter-spacing: 0.05em; }

.note-redaction { background: #efece2; border: 1px solid var(--filet); padding: 18px 20px; }
.note-etiquette { color: var(--correction); font-family: var(--appareil); font-size: 11px; letter-spacing: 0.14em; margin: 0 0 6px; text-transform: uppercase; }
.note-texte { font-size: 18px; margin: 0 0 6px; max-width: 56ch; }
.note-redaction p { color: var(--gris); font-size: 15px; margin: 0 0 5px; }

/* courrier */
.courrier { display: grid; gap: 12px; margin-top: 12px; max-width: 640px; }
@media (min-width: 620px) { .courrier { grid-template-columns: 1fr 1fr; } .courrier .large { grid-column: 1 / -1; } }
.courrier label { color: var(--gris); display: flex; flex-direction: column; font-family: var(--appareil); font-size: 11.5px; gap: 5px; letter-spacing: 0.08em; text-transform: uppercase; }
.courrier input, .courrier textarea { background: #fffdf8; border: 1px solid var(--filet); color: var(--encre); font: 400 15px/1.5 var(--serif); padding: 9px 11px; }
.courrier button { background: var(--encre); border: 0; color: var(--papier); cursor: pointer; font-family: var(--appareil); font-size: 12px; grid-column: 1 / -1; justify-self: start; letter-spacing: 0.1em; padding: 11px 22px; text-transform: uppercase; }
.courrier button:hover { background: var(--correction); }
.piege { left: -9999px; position: absolute; }
.avis { border-left: 3px solid var(--correction); font-size: 15px; margin: 0 0 12px; padding: 9px 14px; background: #efece2; }

/* ours */
.ours { border-top: 3px double var(--filet); margin-top: 30px; }
.ours-int { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; padding-block: 22px 30px; }
.ours-titre { font-weight: 600; margin: 0; }
.ours p { color: var(--gris); font-size: 13.5px; margin: 2px 0 0; }
.ours-liste { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.ours-liste a { font-family: var(--appareil); font-size: 12.5px; text-decoration: none; }
.ours-legal { color: var(--gris); font-family: var(--appareil); font-size: 11px; }

@media (max-width: 700px) {
	.une-texte .prose { column-count: 1; }
	.tete-int { flex-direction: column; gap: 10px; }
}