/**
 * Innovant : le cahier de laboratoire, tenu avec réserve.
 *
 * Feuille chargée par template-parts/home-laboratory.php seulement, scopée
 * sous .dn-laboratory : aucune règle ne peut atteindre un autre média.
 *
 * Signature de la composition : la plaque d'observation est encartée dans le
 * texte, pas posée en tête de ligne. Le masthead applique la règle à
 * lui-même : ce n'est pas une grille, le cartouche s'y encarte comme une note
 * de marge et la copie coule autour de lui. La plaque de tête s'encarte à gauche,
 * les plaques du cahier s'encartent à droite, et le texte coule autour
 * d'elles. Il n'y a donc aucune ligne à cellules fixes dans le flux
 * principal, et aucune autre composition de la flotte ne lit ainsi.
 *
 * Le passe-partout blanc de chaque plaque et le repère bleu posé sur le filet
 * de chaque entrée sont les deux seuls ornements. Rien de triomphaliste : le
 * panneau « Sens des limites » ferme la démonstration sur ce qui reste dû.
 *
 * Contrastes relevés sur la charte Innovant, ratio par ratio :
 *   encre #071a3a sur papier #ffffff ............... 17,24:1
 *   encre #071a3a sur surface #eef5ff .............. 15,72:1
 *   papier #ffffff sur encre #071a3a ............... 17,24:1
 *   papier #ffffff sur bleu actif #1769e0 ........... 5,08:1
 *   bleu actif #1769e0 sur papier ................... 5,08:1
 *   bleu actif #1769e0 sur surface .................. 4,63:1
 *   gris de service #5b6f89 sur papier .............. 5,15:1
 *   gris de service #5b6f89 sur surface ............. 4,69:1
 *   bleu signal #34a1ff sur encre ................... 6,31:1
 *   texte sur encre #cfe0f5 sur encre ............... 12,84:1
 *   bandeau, quantième et édition papier sur encre .. 17,24:1
 *   tête de section, cadre d'encre sur papier ....... 17,24:1
 * Une seule valeur est interdite en couleur de texte sur papier, et elle
 * n'apparaît que sur l'encre ou en pastille :
 *   bleu signal #34a1ff sur papier .................. 2,73:1
 */

.dn-laboratory {
    --lab-ink: var(--dn-ink, #071a3a);
    --lab-paper: var(--dn-paper, #ffffff);
    --lab-surface: var(--dn-paper-soft, #eef5ff);
    --lab-blue: var(--dn-accent, #1769e0);
    --lab-signal: var(--dn-accent-2, #34a1ff);
    --lab-line: var(--dn-line, #b9cce8);
    --lab-muted: var(--dn-muted, #5b6f89);
    --lab-on-ink: #cfe0f5;
    overflow: clip;
    color: var(--lab-ink);
    background: var(--lab-paper);
    font-family: var(--dn-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
.dn-laboratory *, .dn-laboratory *::before, .dn-laboratory *::after { box-sizing: border-box; }
.dn-laboratory .dn-shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.dn-laboratory :is(h1, h2, h3, p, ol, ul, dl, dd) { margin-top: 0; }
.dn-laboratory :is(article, aside, div, header, section, nav) { min-width: 0; }
.dn-laboratory :is(h1, h2, h3, p, a, strong, dd, time) { overflow-wrap: anywhere; }
.dn-laboratory a { color: inherit; text-decoration: none; }
.dn-laboratory a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.dn-laboratory i { font-style: normal; }
.dn-laboratory time { font-variant-numeric: tabular-nums; }
.dn-laboratory .dn-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.dn-laboratory .dn-image-placeholder { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--lab-surface) 0 10px, var(--lab-paper) 10px 20px); }
.dn-laboratory :is(h2, h3) a { transition: color .2s ease; }
.dn-laboratory :is(h2, h3) a:hover, .dn-laboratory :is(h2, h3) a:focus-visible { color: var(--lab-blue); }

/* Vocabulaire commun ---------------------------------------------------- */

.dn-laboratory .dn-category { display: inline-block; color: var(--lab-blue); font-size: var(--dn-fs-lien-2); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dn-laboratory a.dn-category:hover { text-decoration: underline; text-underline-offset: 3px; }
.dn-lab-coordinate { margin-bottom: 12px; color: var(--lab-muted); font-size: var(--dn-fs-note-2); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .16em; text-transform: uppercase; }
.dn-lab-kicker { margin-bottom: 18px; color: var(--lab-blue); font-size: var(--dn-fs-note-3); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* Bandeau de protocole : une marge de cahier, pas une bande justifiée. ---
   Le quantième tient la gouttière, la ligne de protocole court à côté de lui.
   Deux cellules, une gouttière fixe : aucune autre home de la flotte n'ouvre
   ainsi, et surtout pas sur trois zones dont une centrée. */

.dn-lab-strip { color: var(--lab-paper); background: var(--lab-ink); }
.dn-lab-strip__inner { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; min-height: 40px; font-size: var(--dn-fs-note-2); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dn-lab-strip :is(p, time) { margin-bottom: 0; }
.dn-lab-strip time { display: flex; align-items: center; padding-right: 18px; color: var(--lab-paper); font-variant-numeric: tabular-nums; }
.dn-lab-strip__line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--lab-on-ink) 34%, transparent); color: var(--lab-on-ink); }
.dn-lab-strip__state { width: 7px; height: 7px; flex: 0 0 7px; background: var(--lab-signal); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lab-signal) 28%, transparent); }
.dn-lab-strip__line b { color: var(--lab-paper); font-weight: 800; }
.dn-lab-strip__line b::before { margin-right: 12px; color: var(--lab-signal); content: "/"; }

/* Poste d'observation : le masthead applique la règle du cahier. ---------
   Il n'est pas une grille. Le cartouche s'y encarte comme une note de marge
   et la copie coule autour de lui, exactement comme les plaques du cahier
   plus bas. C'est le seul masthead de la flotte qui ne soit pas une cellule
   à colonnes. */

.dn-lab-mast { position: relative; background: var(--lab-paper); }
.dn-lab-mast__inner { display: block; padding-top: clamp(52px, 6vw, 92px); padding-bottom: clamp(34px, 4vw, 56px); }
.dn-lab-mast__inner::after { display: block; clear: both; content: ""; }
.dn-lab-mast h1 { max-width: 21ch; margin-bottom: 30px; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(38px, 5.8vw, 82px); font-weight: 660; letter-spacing: -.045em; line-height: .98; }
.dn-lab-mast h1 em { color: var(--lab-blue); font-style: normal; font-weight: 400; }
.dn-lab-mast__lede { max-width: 58ch; margin-bottom: 0; color: var(--lab-muted); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.6; }

/* Cartouche : note de marge encartée, pile de termes, jamais un rail. ---- */

.dn-lab-cartouche { float: inline-end; width: min(100%, 296px); margin: 4px 0 26px; margin-inline-start: clamp(28px, 4vw, 60px); border-top: 3px solid var(--lab-ink); border-bottom: 1px solid var(--lab-line); }
.dn-lab-cartouche > div { padding: 13px 0 14px; border-top: 1px solid var(--lab-line); }
.dn-lab-cartouche > div:first-child { border-top: 0; }
.dn-lab-cartouche dt { margin-bottom: 6px; color: var(--lab-muted); font-size: var(--dn-fs-note-2); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dn-lab-cartouche dd { margin: 0; color: var(--lab-ink); font-size: clamp(14px, 1.3vw, 17px); font-weight: 660; font-variant-numeric: tabular-nums; }

/* Têtes de section : la ligne de registre du cahier. ---------------------
   Deux colonnes égales. Le repère de temps s'inscrit à gauche dans un cadre
   d'encre tiré au trait, jamais une pastille pleine ; la ligne de référence
   se tire à droite jusqu'au bord ; le titre reprend la mesure entière ; la
   note de lecture reste en demi-mesure, comme une annotation de marge. */

.dn-lab-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); align-items: end; padding-bottom: 22px; margin-bottom: clamp(30px, 3.4vw, 46px); border-bottom: 1px solid var(--lab-line); }
.dn-lab-step { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 14px; color: var(--lab-muted); font-size: var(--dn-fs-note-3); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dn-lab-step span { padding: 4px 9px 3px; color: var(--lab-ink); background: none; border: 1px solid var(--lab-ink); font-variant-numeric: tabular-nums; }
.dn-lab-head::before { grid-row: 1; grid-column: 2; align-self: center; height: 1px; margin-bottom: 14px; background: var(--lab-line); content: ""; }
/* Meme descente que le board, sur un interlignage de .98 donc moins profonde:
   le laboratoire a son propre chiffre, il ne copie pas celui du board. */
.dn-lab-head h2 { grid-column: 1 / -1; margin-bottom: 0.08em; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(30px, 3.9vw, 54px); font-weight: 640; letter-spacing: -.05em; line-height: .98; }
.dn-lab-head__note { grid-column: 1; max-width: 52ch; margin: 16px 0 0; color: var(--lab-muted); font-size: 15px; line-height: 1.6; }
.dn-lab-head--index .dn-lab-step span { color: var(--lab-paper); background: var(--lab-ink); border-color: var(--lab-ink); }

/* Plaques montées : passe-partout blanc sur toutes les images. ----------- */

.dn-lab-plate__media,
.dn-lab-entry__plate { position: relative; display: block; overflow: hidden; background: var(--lab-surface); border: 1px solid var(--lab-line); }
.dn-lab-plate__media::after,
.dn-lab-entry__plate::after { position: absolute; inset: 0; box-shadow: inset 0 0 0 5px var(--lab-paper); content: ""; pointer-events: none; }

/* Temps 01 : l'observation de tête, plaque encartée à gauche. ------------ */

.dn-lab-observation { padding-top: clamp(52px, 5.6vw, 84px); padding-bottom: clamp(52px, 5.6vw, 84px); }
.dn-lab-plate { display: flow-root; }
.dn-lab-plate__media { float: left; width: 52%; max-width: 620px; margin: 6px clamp(24px, 3vw, 44px) 24px 0; aspect-ratio: 16 / 10; }
.dn-lab-plate__body .dn-category { margin-bottom: 10px; }
.dn-lab-plate h3 { margin: 0 0 18px; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(28px, 3.6vw, 50px); font-weight: 640; letter-spacing: -.05em; line-height: 1.02; }
.dn-lab-plate__excerpt { margin-bottom: 18px; color: var(--lab-muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.62; }
.dn-lab-plate__foot { margin-bottom: 0; color: var(--lab-muted); font-size: var(--dn-fs-note-3); font-weight: 800; letter-spacing: .12em; line-height: 2.2; text-transform: uppercase; }
.dn-lab-plate__foot > * { margin-right: 24px; }
.dn-lab-plate__foot a { color: var(--lab-blue); }
.dn-lab-plate__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dn-lab-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); margin-top: clamp(38px, 4.4vw, 62px); }
.dn-lab-adjacent__label { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 10px; color: var(--lab-muted); border-bottom: 1px solid var(--lab-line); font-size: var(--dn-fs-note-3); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dn-lab-adjacent > article { padding-top: 20px; border-top: 2px solid var(--lab-ink); }
.dn-lab-adjacent .dn-category { margin-bottom: 8px; }
.dn-lab-adjacent h3 { margin: 6px 0 12px; font-size: clamp(19px, 1.9vw, 26px); font-weight: 660; letter-spacing: -.035em; line-height: 1.14; }
.dn-lab-adjacent time { color: var(--lab-muted); font-size: var(--dn-fs-note-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Temps 02 : le cahier, plaques encartées à droite. ---------------------- */

.dn-lab-bench { padding: clamp(56px, 6vw, 92px) 0 clamp(58px, 6vw, 96px); background: var(--lab-surface); border-block: 1px solid var(--lab-line); }
.dn-lab-entries > .dn-lab-entry:last-child { border-bottom: 1px solid var(--lab-line); }
.dn-lab-entry { position: relative; display: flow-root; padding: clamp(26px, 3vw, 38px) 0 clamp(28px, 3.2vw, 42px); border-top: 1px solid var(--lab-line); }
.dn-lab-entry::before { position: absolute; top: -1px; left: 0; width: 54px; height: 3px; background: var(--lab-blue); content: ""; }
.dn-lab-entry__plate { float: right; width: 30%; max-width: 268px; margin: 6px 0 20px clamp(22px, 2.6vw, 36px); aspect-ratio: 3 / 2; background: var(--lab-paper); }
.dn-lab-entry.is-open .dn-lab-entry__plate { width: 44%; max-width: 440px; aspect-ratio: 3 / 2; }
.dn-lab-entry .dn-category { margin-bottom: 10px; }
.dn-lab-entry h3 { margin: 4px 0 0; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(20px, 2.2vw, 30px); font-weight: 660; letter-spacing: -.04em; line-height: 1.12; }
.dn-lab-entry.is-open h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.048em; line-height: 1.05; }
.dn-lab-entry__excerpt { margin: 16px 0 0; color: var(--lab-muted); font-size: 15px; line-height: 1.62; }
.dn-lab-entry__foot { margin: 16px 0 0; color: var(--lab-muted); font-size: var(--dn-fs-note-3); font-weight: 700; letter-spacing: .1em; line-height: 2; text-transform: uppercase; }
.dn-lab-entry__foot > * { margin-right: 22px; }

/* Sens des limites : la position de maison, jamais une mesure. ----------- */

.dn-lab-limits { padding: clamp(56px, 5.6vw, 84px) 0 clamp(58px, 6vw, 90px); color: var(--lab-paper); background: var(--lab-ink); }
.dn-lab-limits__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr); gap: clamp(34px, 5vw, 78px); align-items: start; }
.dn-lab-limits .dn-lab-kicker { color: var(--lab-signal); }
.dn-lab-limits h2 { margin-bottom: 0; max-width: 18ch; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(28px, 3.5vw, 48px); font-weight: 620; letter-spacing: -.05em; line-height: 1; }
.dn-lab-limits__list { margin-bottom: 0; }
.dn-lab-limits__list > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; align-items: baseline; min-height: 76px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--lab-paper) 24%, transparent); }
.dn-lab-limits__list > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--lab-paper) 24%, transparent); }
.dn-lab-limits__list dt { color: var(--lab-signal); font-size: var(--dn-fs-note-3); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.dn-lab-limits__list dd { margin: 0; color: var(--lab-on-ink); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; }

/* Temps 03 : les champs d'observation. ---------------------------------- */

.dn-lab-fields { padding-top: clamp(56px, 6vw, 90px); padding-bottom: clamp(52px, 5.6vw, 84px); }
.dn-lab-fields__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 4vw, 66px); }
.dn-lab-fields__nav a { display: grid; grid-template-columns: 3px 78px minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 88px; padding: 16px 14px 16px 0; border-bottom: 1px solid var(--lab-line); transition: color .2s ease; }
.dn-lab-fields__nav a:nth-child(-n+2) { border-top: 1px solid var(--lab-line); }
.dn-lab-fields__tick { width: 3px; height: 20px; background: var(--lab-line); transition: height .22s ease, background-color .2s ease; }
.dn-lab-fields__nav a:hover .dn-lab-fields__tick,
.dn-lab-fields__nav a:focus-visible .dn-lab-fields__tick { height: 46px; background: var(--lab-blue); }
.dn-lab-fields__nav small { color: var(--lab-muted); font-size: var(--dn-fs-note-2); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .13em; text-transform: uppercase; }
.dn-lab-fields__nav strong { font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(20px, 2.2vw, 30px); font-weight: 640; letter-spacing: -.04em; }
.dn-lab-fields__nav i { color: var(--lab-blue); font-size: 15px; }
.dn-lab-fields__nav a:hover, .dn-lab-fields__nav a:focus-visible { color: var(--lab-blue); }

/* Journal de laboratoire : l'index de bas de page. ----------------------- */

.dn-lab-register { padding-top: clamp(50px, 5.4vw, 80px); padding-bottom: clamp(62px, 6.4vw, 104px); }
.dn-lab-register__list > article { padding: 20px 0 22px; border-bottom: 1px solid var(--lab-line); }
.dn-lab-register__list > article:first-child { border-top: 2px solid var(--lab-ink); }
.dn-lab-register .dn-lab-coordinate { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 8px; }
.dn-lab-register .dn-lab-coordinate b { color: var(--lab-blue); font-weight: 800; }
.dn-lab-register h3 { margin: 0; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(18px, 2vw, 27px); font-weight: 640; letter-spacing: -.04em; line-height: 1.14; }

/* Effondrements --------------------------------------------------------- */

@media (max-width: 1024px) {
    .dn-lab-plate__media { width: 48%; }
    .dn-lab-fields__nav a { grid-template-columns: 3px 66px minmax(0, 1fr) auto; gap: 16px; }
    .dn-lab-limits__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 38px; }
}

@media (max-width: 768px) {
    .dn-laboratory .dn-shell { width: min(1220px, calc(100% - 40px)); }
    /* La gouttière du cahier se resserre, elle ne disparaît pas : c'est elle
       qui tient l'identité du bandeau. */
    .dn-lab-strip__inner { grid-template-columns: 74px minmax(0, 1fr); min-height: 36px; font-size: var(--dn-fs-note-1); letter-spacing: .11em; }
    .dn-lab-strip time { padding-right: 12px; }
    .dn-lab-strip__line { padding-left: 12px; }
    .dn-lab-mast h1 { max-width: none; }
    /* Le cartouche se déplie comme les plaques : il reprend toute la mesure
       et passe au-dessus du lede, plus aucun flottant ne subsiste. */
    .dn-lab-cartouche { float: none; width: 100%; max-width: none; margin: 0 0 26px; margin-inline-start: 0; }
    /* La ligne de registre se replie : le titre garde la mesure, la ligne de
       référence n'a plus de place à droite. */
    .dn-lab-head { grid-template-columns: minmax(0, 1fr); }
    .dn-lab-head::before { display: none; }
    /* Les encarts se déplient : la plaque reprend toute la mesure et passe
       au-dessus du texte, plus aucun flottant ne subsiste. */
    .dn-lab-plate__media,
    .dn-lab-entry__plate,
    .dn-lab-entry.is-open .dn-lab-entry__plate { float: none; width: 100%; max-width: none; margin: 0 0 20px; aspect-ratio: 16 / 9; }
    .dn-lab-adjacent { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .dn-lab-limits__inner { grid-template-columns: minmax(0, 1fr); }
    .dn-lab-limits__list { margin-top: 30px; }
    .dn-lab-fields__nav { grid-template-columns: minmax(0, 1fr); }
    .dn-lab-fields__nav a:nth-child(-n+2) { border-top: 0; }
    .dn-lab-fields__nav a:first-child { border-top: 1px solid var(--lab-line); }
}

@media (max-width: 390px) {
    .dn-laboratory .dn-shell { width: min(1220px, calc(100% - 32px)); }
    .dn-lab-strip__inner { grid-template-columns: 62px minmax(0, 1fr); font-size: var(--dn-fs-note-1); letter-spacing: .08em; }
    .dn-lab-strip__line b { flex-basis: 100%; }
    .dn-lab-strip__line b::before { display: none; }
    .dn-lab-mast h1 { letter-spacing: -.04em; }
    .dn-lab-plate__media,
    .dn-lab-entry__plate,
    .dn-lab-entry.is-open .dn-lab-entry__plate { aspect-ratio: 4 / 3; }
    .dn-lab-limits__list > div { display: block; min-height: 0; }
    .dn-lab-limits__list dd { margin-top: 10px; }
    .dn-lab-fields__nav a { grid-template-columns: 3px 54px minmax(0, 1fr) auto; gap: 12px; min-height: 74px; }
    .dn-lab-fields__nav small { font-size: var(--dn-fs-note-1); letter-spacing: .09em; }
}

@media (prefers-reduced-motion: reduce) {
    .dn-laboratory *,
    .dn-laboratory *::before,
    .dn-laboratory *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}