/* Direction issue de la maquette 22, corrigée par Noa le 24 septembre 2026.
 * Champ demandé : #1522bc, référence visuelle Agentcard. Ce bleu n’est pas Wada.
 * Yellow reste issu de la combinaison Wada 22, source numérique :
 * https://raw.githubusercontent.com/mattdesl/dictionary-of-colour-combinations/master/colors.json
 * SHA-256 : 555f11c32eb8133078fd470dd7d5320533aaa8b636f12fa06a8dd3d0ee2703b4
 * Voir docs/direction-visuelle.md pour la décision qui remplace Deep Lyons Blue.
 */
:root {
  /* Bleu explicitement fourni par Noa, RGB 21, 34, 188. */
  --brand-blue: #1522bc;
  /* Yellow, combinaison 22. CMYK : 0, 0, 100, 0. */
  --wada-22-yellow: #fff200;
  /* Neutres et filets de la maquette. */
  --neutral-white: #ffffff;
  --neutral-paper: #f4f3ee;
  --neutral-ink: #171818;
  --neutral-back: #111212;
  --rule-paper: #d6d4cc;
  --rule-field: rgba(255,255,255,.28);
  --rule-back: #2b2c2c;
  --muted-paper: #5d6360;
  /* Composite opaque du blanc à 66 % sur le champ, contraste 5,2930:1. */
  --muted-field: #afb4e8;
  --muted-back: #8e9391;
  --graph-signal: var(--wada-22-yellow);
  --graph-wire: var(--muted-back);
  --font-body: 'Archivo', sans-serif;
  --font-display: 'Geist Pixel Square', sans-serif;
  /* Geist Pixel Square est dessinée sur une grille de 38/1000 d'em. Une taille multiple de ce pas
     place chaque carré sur un nombre entier de pixels de l'écran, sans bord flou. */
  --pixel-step: 13.1579px;
  --gutter: clamp(20px,5vw,56px);
  --measure: 1240px;
  --type-display: clamp(44.8px,8.512vw,116px);
  --type-section: clamp(33.6px,4.928vw,58px);
  --type-subheading: 29px;
}
:root, [data-theme='light'] {
  color-scheme: light;
  --color-background: var(--neutral-paper);
  --color-text: var(--neutral-ink);
  --color-accent: var(--brand-blue);
  --color-link: var(--brand-blue);
  --color-focus: var(--brand-blue);
  --color-decoration: var(--rule-paper);
  --color-muted: var(--muted-paper);
}
/* Blanc/champ : 10,5694:1. Yellow/champ : 9,0358:1. */
[data-theme='dark'] {
  color-scheme: dark;
  --color-background: var(--brand-blue);
  --color-text: var(--neutral-white);
  --color-accent: var(--wada-22-yellow);
  --color-link: var(--wada-22-yellow);
  --color-focus: var(--wada-22-yellow);
  --color-decoration: var(--rule-field);
  --color-muted: var(--muted-field);
}
/* Papier/dos : 16,8900:1. Encre/papier : 16,0145:1. */
[data-theme='back'] {
  color-scheme: dark;
  --color-background: var(--neutral-back);
  --color-text: var(--neutral-paper);
  --color-accent: var(--neutral-paper);
  --color-link: var(--neutral-paper);
  --color-focus: var(--neutral-paper);
  --color-decoration: var(--rule-back);
  --color-muted: var(--muted-back);
}
@media (min-resolution: 2.5dppx) { :root { --pixel-step: 8.7719px; } }
@font-face { font-family:'Archivo'; src:url('/fonts/archivo-latin-variable.woff2') format('woff2'); font-style:normal; font-weight:400 700; font-stretch:62.5% 100%; font-display:swap; }
@font-face { font-family:'Geist Pixel Square'; src:url('/fonts/geist-pixel-square.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:2rem; background:var(--color-background); color:var(--color-text); }
body { font:400 16px/1.6 var(--font-body); font-synthesis:none; font-variant-numeric:tabular-nums; }
/* Lissage fin réservé aux écrans à haute densité : sur un écran à 100 %, il amaigrit les petits corps. */
@media (min-resolution:2dppx) { body { -webkit-font-smoothing:antialiased; } }
[data-theme] { background-color:var(--color-background); color:var(--color-text); }
::selection { background:var(--color-text); color:var(--color-background); }
a { color:var(--color-link); text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--color-focus); outline-offset:5px; }
button,summary { font:inherit; }
img { max-width:100%; }
p { max-width:70ch; }
h1,h2,h3 { font-family:var(--font-display); font-weight:400; line-height:1.12; }
h3 { font-size:var(--type-subheading); margin:10px 0 18px; font-size:round(nearest, var(--type-subheading), var(--pixel-step)); }
h4 { font-size:18px; font-weight:600; }
.wrap { max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.kicker,.small,.site-head nav,.site-head .langue,.tapis,.reglure,.bouton,.auxagents,.timeline .dates,.project dt,.local-notice { font-family:var(--font-body); font-stretch:75%; font-weight:500; text-transform:uppercase; }
.kicker,.small { font-size:13px; letter-spacing:.12em; color:var(--color-muted); }
.center { text-align:center; margin-inline:auto; }
.titre { font-size:var(--type-section); text-align:center; text-wrap:balance; font-size:round(nearest, var(--type-section), var(--pixel-step)); }
.titre em { font-style:normal; color:var(--color-accent); }
.sous { text-align:center; margin:14px auto 0; font-size:19px; color:var(--color-muted); text-wrap:balance; }
.section-heading .kicker { margin-bottom:16px; }
.skip { position:absolute; left:1rem; top:-8rem; z-index:10; padding:.6rem 1rem; background:var(--color-background); }
.skip:focus { top:1rem; }
.local-notice { font-size:11px; padding:7px var(--gutter); border-bottom:1px solid var(--color-decoration); letter-spacing:.05em; }
.site-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:24px var(--gutter); }
.signature { font-size:20px; font-weight:600; text-decoration:none; color:var(--color-text); }
a.signature { display:inline-flex; align-items:center; gap:10px; }
.logo { flex:none; }
.logo-lettre { fill:currentColor; }
.logo-curseur { fill:var(--color-accent); }
.site-head nav { display:flex; gap:26px; font-size:15px; font-weight:600; letter-spacing:.1em; }
.site-head nav a { color:var(--color-text); text-decoration:none; }
.site-head nav a:hover { text-decoration:underline; }
.site-head nav i { font-style:normal; color:var(--color-accent); margin-right:7px; }
/* Lien vers la même page dans l'autre langue, nommé dans cette langue. */
.site-head nav { margin-left:auto; }
.site-head .langue { font-size:15px; font-weight:600; letter-spacing:.1em; color:var(--color-text); text-decoration:none; border:1px solid var(--color-decoration); padding:6px 12px; margin-block:-7px; }
.site-head .langue:hover { border-color:var(--color-text); }
.autres-articles { margin-top:32px; }
.hero { min-height:min(82vh,660px); display:flex; flex-direction:column; }
@media (min-width:861px) {
  /* Les 177 px équilibrent l'aperçu, l'en-tête et le bandeau de chiffres
     pour laisser 64 px de sol pointillé au premier écran. Le bandeau fait
     partie du héros. Recalculer si l'un de ces éléments change de hauteur. */
  .hero { min-height:calc(100svh - 177px); }
}
.scene { flex:1; position:relative; display:flex; align-items:flex-end; min-height:430px; overflow:clip; }
.hero h1 { position:relative; z-index:1; margin:0 var(--gutter) 54px auto; text-align:right; font-size:var(--type-display); line-height:.98; letter-spacing:-.038em; font-size:round(down, var(--type-display), var(--pixel-step)); }
.hero h1 span { display:block; }
/* Avec le portrait à ×3, le titre grandit d'autant pour garder l'équilibre. */
@media (min-width:1800px) and (min-height:1100px) { .hero h1 { font-size:calc(12 * var(--pixel-step)); } }
@media (min-width:2300px) and (min-height:1100px) { .hero h1 { font-size:calc(14 * var(--pixel-step)); } }
@media (min-width:2800px) and (min-height:1500px) { .hero h1 { font-size:calc(19 * var(--pixel-step)); } }
.tapis { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:13px var(--gutter); border-top:1px solid var(--color-decoration); font-size:15px; letter-spacing:.04em; }
.tapis a { color:var(--color-text); text-decoration:none; white-space:nowrap; }
.tapis a:hover { text-decoration:underline; }
.tapis b { color:var(--color-accent); font-weight:600; }
.compact-label { display:none; }
.bande { padding:clamp(64px,9vw,118px) 0; }
.pointille { background-image:radial-gradient(var(--color-decoration) 1px,transparent 1px); background-size:26px 26px; background-position:-1px -1px; }
.cadre { border:1px solid var(--color-decoration); padding:clamp(24px,3.4vw,40px); margin-top:clamp(34px,5vw,58px); background:var(--color-background); }
.cadre>p { color:var(--color-muted); }
.cadre h3 a { color:var(--color-link); text-decoration:underline; }
.cadre h3 a:hover { text-decoration:underline; }
.liste { margin-top:30px; }
.liste details { border-top:1px solid var(--color-decoration); }
.liste details:last-child { border-bottom:1px solid var(--color-decoration); }
.liste summary { display:flex; align-items:baseline; gap:20px; padding:17px 2px; cursor:pointer; list-style:none; font-size:19px; }
.liste summary::-webkit-details-marker { display:none; }
.liste summary .kicker { color:var(--color-accent); }
.liste summary .summary-label { flex:1; }
.affordance { font-family:var(--font-body); color:var(--color-muted); font-size:20px; }
.affordance::before { content:'+'; }
.liste details[open] .affordance::before { content:'−'; }
.excerpt { padding:0 0 19px 44px; color:var(--color-muted); }
.excerpt p { margin-bottom:14px; }
.excerpt>a { font-size:14px; }
.article-micro { margin-top:24px; }
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(34px,5vw,58px); border:1px solid var(--color-decoration); }
.duo>* { min-width:0; padding:clamp(24px,3.2vw,38px); }
.duo>*+* { border-left:1px solid var(--color-decoration); }
.project dl>div { border-top:1px solid var(--color-decoration); padding:15px 0; }
.project dt { font-size:13px; letter-spacing:.1em; color:var(--color-muted); margin-bottom:6px; }
.project dd { margin:0; font-size:16px; }
.project .small { overflow-wrap:anywhere; margin-bottom:10px; }
.project>a { font-size:14px; }
.profile-section { border-top:1px solid var(--color-decoration); }
.tuiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(34px,5vw,58px); border:1px solid var(--color-decoration); }
.tuile { min-width:0; padding:clamp(24px,3vw,36px); border-right:1px solid var(--color-decoration); border-bottom:1px solid var(--color-decoration); background:var(--color-background); }
.tuile:nth-child(3n) { border-right:0; }
.tuile:nth-last-child(-n+3) { border-bottom:0; }
.tuile .number { display:block; font:400 clamp(30px,3.6vw,46px)/1 var(--font-display); letter-spacing:-.038em; font-size:round(nearest, clamp(30px,3.6vw,46px), var(--pixel-step)); }
.tuile .label { display:block; font-size:14px; font-weight:600; font-stretch:75%; text-transform:uppercase; margin:14px 0 7px; }
.tuile p { font-size:14px; color:var(--color-muted); }
.timeline { list-style:none; padding:0; margin-top:20px; }
.timeline li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:15px 0; border-top:1px solid var(--color-decoration); }
.timeline .dates { font-size:13px; letter-spacing:.08em; text-align:right; white-space:nowrap; color:var(--color-muted); }
.timeline .description { grid-column:1/-1; color:var(--color-muted); font-size:14px; }
.profile-intro { margin-top:28px; }
.skills { margin-top:30px; }
.skills ul { padding-left:1.2em; margin-block:16px; }
.skills p { margin-top:10px; }
.dos { padding-block:clamp(52px,7vw,84px) 36px; }
.reglure { display:flex; justify-content:space-between; gap:6px 16px; font-size:13px; letter-spacing:.18em; color:var(--color-muted); flex-wrap:wrap; }
.reglure.bottom { margin-top:16px; }
.coupe { position:relative; border:1px solid var(--color-decoration); margin-top:18px; padding:clamp(44px,7vw,92px) var(--gutter); text-align:center; }
.filet { display:flex; align-items:center; gap:14px; color:var(--color-muted); font-size:13px; }
.filet::before,.filet::after { content:''; flex:1; height:1px; background:var(--color-decoration); }
.coupe h2 { font-size:var(--type-display); line-height:1.02; letter-spacing:-.038em; margin:clamp(30px,4vw,52px) 0; font-size:round(down, var(--type-display), var(--pixel-step)); }
.coupe h2 span { display:block; }
.coupe p { margin:22px auto; }
.bouton { display:inline-block; background:var(--color-text); color:var(--color-background); font-size:13px; letter-spacing:.16em; padding:17px 36px; text-decoration:none; }
.bouton:hover { text-decoration:underline; }
.pied { padding:clamp(52px,7vw,84px) 0 30px; }
.colonnes { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,50px); }
.colonnes a { display:block; color:var(--color-text); text-decoration:none; font-size:14px; padding:5px 0; overflow-wrap:anywhere; }
.colonnes a:hover { text-decoration:underline; }
.colonnes .kicker { margin-bottom:8px; }
.footer-description { font-size:14px; color:var(--color-muted); margin-top:12px; }
.vedette { font:400 clamp(30px,9.4vw,148px)/1 var(--font-display); text-align:center; margin:clamp(34px,5vw,60px) 0 22px; max-width:100%; font-size:round(nearest, clamp(30px,9.4vw,148px), var(--pixel-step)); }
.auxagents { font-size:13px; line-height:2.2; letter-spacing:.06em; color:var(--color-muted); text-align:center; margin:auto; max-width:none; }
.auxagents a { display:inline-block; padding:4px 0; }
.measurement { padding:clamp(64px,9vw,118px) 0; }
.measurement .measure-intro { margin:20px auto 0; text-align:center; }
.measure-disclaimer { text-align:center; margin:14px auto 0; }
.measure-foot { margin-top:28px; }
.measure-foot p { margin-bottom:14px; }
.reading { max-width:var(--measure); margin:auto; padding-inline:var(--gutter); }
.article-header { max-width:930px; padding:56px 0 35px; }
.article-header h1 { font-size:clamp(36px,5.4vw,72px); margin:25px 0 30px; font-size:round(nearest, clamp(36px,5.4vw,72px), var(--pixel-step)); }
.standfirst { font-size:24px; line-height:1.5; }
.article-header .small { margin-top:24px; }
.reading-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:5vw; padding:25px 0 45px; }
.reading-grid aside { border-top:4px solid var(--color-decoration); padding-top:20px; }
.reading-grid nav { margin-top:20px; }
.reading-grid nav a { display:block; margin-bottom:18px; font-size:14px; }
.prose { max-width:68ch; }
.prose h2 { font-size:30px; margin:52px 0 22px; font-size:round(nearest, 30px, var(--pixel-step)); }
.prose p { margin-bottom:24px; }
.prose code { font:inherit; font-weight:600; }
.prose pre { margin:0 0 24px; padding:14px 16px; border-left:2px solid var(--color-decoration); font-family:var(--font-body); font-stretch:75%; font-size:16px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.prose pre code { font-weight:500; }
.prose table { width:100%; table-layout:fixed; border-collapse:collapse; margin-block:28px; font-variant-numeric:tabular-nums; }
.prose th,.prose td { padding:12px 6px; border-bottom:1px solid var(--color-decoration); vertical-align:top; overflow-wrap:anywhere; }
.prose th { text-align:left; font-weight:600; }
.article-metrics { border-top:1px solid var(--color-decoration); padding:36px 0; }
.article-metrics h2 { font-size:27px; margin-bottom:20px; font-size:round(nearest, 27px, var(--pixel-step)); }
.article-metrics p { margin-bottom:16px; }
@media(max-width:1280px) { .full-label { display:none; } .compact-label { display:inline; } .tapis { justify-content:space-between; gap:8px; } }
/* Petits écrans, à haute densité : la police étroite y reste nette et le bandeau tient sur une ligne. */
@media(max-width:700px) { .tapis { font-stretch:62.5%; } }
@media(max-width:640px) { .tapis { font-size:14px; letter-spacing:.02em; } }
@media(max-width:860px) {
  .site-head { flex-wrap:wrap; gap:12px; }
  .site-head nav { width:100%; justify-content:space-between; flex-wrap:wrap; gap:0 8px; font-size:12.5px; font-weight:500; font-stretch:62.5%; letter-spacing:.02em; }
  .site-head nav a { padding:12px 0; }
  .site-head nav a { white-space:nowrap; }
  .site-head nav i { margin-right:4px; }
  .site-head nav,.site-head > a:not(.signature,.langue) { order:3; }
  .site-head .langue { font-size:12.5px; font-stretch:62.5%; letter-spacing:.02em; }
  .duo,.tuiles,.colonnes,.reading-grid { grid-template-columns:minmax(0,1fr); }
  .timeline .dates { white-space:normal; }
  .duo>*+* { border-left:0; border-top:1px solid var(--color-decoration); }
  .tuile { border-right:0; }
  .tuile:nth-last-child(-n+3) { border-bottom:1px solid var(--color-decoration); }
  .tuile:last-child { border-bottom:0; }
  .hero { min-height:0; }
  .scene { min-height:0; flex-direction:column; align-items:center; padding-top:16px; overflow:visible; }
  .hero h1 { font-size:clamp(58px,18.8vw,116px); align-self:stretch; margin:24px 20px 32px; text-align:right; font-size:round(down, clamp(58px,18.8vw,116px), var(--pixel-step)); }
  .titre { font-size:clamp(42px,10.8vw,58px); font-size:round(nearest, clamp(42px,10.8vw,58px), var(--pixel-step)); }
  .excerpt { padding-left:0; }
  .reglure { flex-direction:column; text-align:center; letter-spacing:.14em; }
  .vedette { font-size:clamp(30px,8.5vw,72px); font-size:round(nearest, clamp(30px,8.5vw,72px), var(--pixel-step)); }
}
@media(max-width:480px) {
  .tapis { padding-inline:16px; gap:10px 14px; letter-spacing:.02em; font-size:14px; }
  .coupe { padding-inline:16px; }
  .coupe h2 { font-size:clamp(30px,8.4vw,40px); font-size:round(nearest, clamp(30px,8.4vw,40px), var(--pixel-step)); }
  .timeline li { grid-template-columns:minmax(0,1fr); }
  .timeline .dates { text-align:left; }
  .standfirst { font-size:21px; }
  .article-header h1 { font-size:36px; font-size:round(nearest, 36px, var(--pixel-step)); }
}
@media(max-width:359px) {
  .site-head nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Page introuvable */
.introuvable { min-height:70vh; display:flex; flex-direction:column; justify-content:center; padding:48px var(--gutter) 96px; max-width:var(--measure); margin:auto; }
.introuvable .introuvable-code { font-family:var(--font-display); font-weight:400; line-height:1; font-size:round(down, clamp(105px,22vw,263px), var(--pixel-step)); color:var(--color-accent); letter-spacing:-.038em; margin-bottom:24px; }
.introuvable h1 { font-size:round(nearest, var(--type-section), var(--pixel-step)); margin-bottom:18px; }
.introuvable p { max-width:46ch; font-size:19px; }
.introuvable-liens { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; }
@media(prefers-reduced-motion:no-preference) { a { transition:text-decoration-thickness .15s; } .logo-curseur { animation:logo-curseur 1.1s steps(1,end) infinite; } }
@keyframes logo-curseur { 50% { opacity:0; } }
@media print { .skip,.local-notice,.site-head nav,.pied,.portrait,.bulle,.portrait-statut { display:none; } .reading-grid { display:block; } .reading-grid aside { display:none; } }

.report-page { border-top:1px solid var(--color-decoration); padding-block:24px; }
.report-page dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.report-page dd { margin:0; font-size:24px; }
@media(max-width:480px) { .report-page dl { grid-template-columns:minmax(0,1fr); } }