/* Cinq lombaires (maquette A) : gris clair froid, encre bleu-noir, rouge signal ; Space Grotesk + Literata */
@font-face{font-family:"Space Grotesk";src:url(polices/spacegrotesk-normal-400-700.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(polices/literata-normal-400-600.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(polices/literata-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--backdrop:#f3f4f2;--paperwhite:#fff;--inkdark:#14202b;--type-text:#2b3640;--soften:#5f6b75;--hairline-col:#d9ddde;--accent-signal:#e4572e;--steel:#3d5a73;--mist:#e6eaec;
--type-display:"Space Grotesk",system-ui,sans-serif;--type-body:"Literata",Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--backdrop);color:var(--type-text);font:400 18px/1.65 var(--type-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel)}
h1,h2,h3{font-family:var(--type-display);color:var(--inkdark);line-height:1.15;letter-spacing:-.015em;margin:0}
.shell{max-width:1200px;margin:0 auto;padding:0 24px}
.measure{max-width:760px}
.strapline{display:inline-block;font:600 12px/1.2 var(--type-display);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-signal)}
.action{display:inline-block;background:var(--inkdark);color:#fff;text-decoration:none;font:600 15px/1 var(--type-display);padding:15px 22px;border-radius:2px}
.action:hover{background:var(--accent-signal)}
.textlink{font:600 15px/1 var(--type-display);color:var(--inkdark);text-decoration:none;border-bottom:2px solid var(--accent-signal);padding-bottom:4px}
.textlink.pale-mode{color:#fff}
/* en-tête */
.masthead{background:var(--paperwhite);border-bottom:1px solid var(--hairline-col)}
.masthead-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:14px}
.wordmark{font:700 24px/1 var(--type-display);color:var(--inkdark);text-decoration:none;letter-spacing:-.02em}
.wordmark .lv5{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;color:#fff;background:var(--accent-signal);padding:5px 7px;border-radius:2px;margin-right:8px;vertical-align:3px}
.tagline{margin:0;font:400 15px/1.3 var(--type-body);font-style:italic;color:var(--soften)}
.masthead nav ul{list-style:none;margin:0;padding:0 0 0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.masthead nav a{display:block;white-space:nowrap;padding:12px 14px;font:500 15px/1 var(--type-display);color:var(--type-text);text-decoration:none;border-bottom:3px solid transparent}
.masthead nav a:hover,.masthead nav a[aria-current]{border-bottom-color:var(--accent-signal);color:var(--inkdark)}
.masthead nav a.viewall{color:var(--accent-signal)}
/* accueil */
.frontpage{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:72px}
.frontpage h1{font-size:clamp(40px,5.4vw,70px);font-weight:700;margin:18px 0 22px}
.frontpage h1 em{font-style:normal;color:var(--accent-signal)}
.deck{font-size:20px;color:var(--type-text);max-width:36em;margin:0 0 30px}
.actionbar{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:0}
.figure-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:42px 0 0;border-top:2px solid var(--inkdark)}
.figure-nums div{padding:16px 16px 0 0}
.figure-nums div+div{padding-left:16px;border-left:1px solid var(--hairline-col)}
.figure-nums dt{font:700 26px/1.1 var(--type-display);color:var(--inkdark)}
.figure-nums dd{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--soften)}
.frontpage-figure{margin:0;position:relative}
.frontpage-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frontpage-figure figcaption{position:absolute;left:-24px;bottom:28px;background:var(--inkdark);color:#fff;font:500 14px/1.4 var(--type-display);padding:14px 18px;max-width:270px}
.section-band{padding:72px 0}
.greyed{background:var(--mist)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:32px;border-bottom:1px solid var(--hairline-col);padding-bottom:14px}
.band-head h2{font-size:30px}
.band-head p{margin:0;color:var(--soften);font-style:italic}
.band-head a{font:600 15px var(--type-display);color:var(--accent-signal);text-decoration:none}
.markers{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-left:1px solid var(--hairline-col)}
.marker{display:block;padding:8px 22px 18px;border-right:1px solid var(--hairline-col);text-decoration:none;color:inherit}
.marker .ordinal{display:block;font:700 46px/1 var(--type-display);color:var(--accent-signal);margin-bottom:16px;letter-spacing:-.03em}
.marker h3{font-size:19px;margin-bottom:10px}
.marker p{margin:0;font-size:15px;line-height:1.55;color:var(--soften)}
.marker:hover h3{color:var(--accent-signal)}
.inkwash{background:var(--inkdark);color:#d5dde3}
.pairing{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pairing figure{margin:0}
.pairing img{width:100%;aspect-ratio:4/3;object-fit:cover}
.inkwash h2{color:#fff;font-size:clamp(30px,3.6vw,44px);margin:14px 0 18px}
.inkwash h2 em{font-style:normal;color:var(--accent-signal)}
.inkwash p{margin:0 0 26px}
.contents{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.overline-alt h3{font-size:21px;margin-bottom:8px}
.overline-alt h3 a{color:var(--inkdark);text-decoration:none}
.overline-alt p{margin:0 0 12px;font-size:15px;color:var(--soften)}
.overline-alt ul{margin:0;padding:0;list-style:none}
.overline-alt li{border-top:1px solid var(--hairline-col);padding:9px 0;font-size:16px;line-height:1.4}
.overline-alt li a{color:var(--type-text);text-decoration:none}
.overline-alt li a:hover{color:var(--accent-signal)}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.tile-card{display:block;text-decoration:none;color:inherit}
.tile-card .shot{overflow:hidden;margin-bottom:16px}
.tile-card img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.tile-card:hover img{transform:scale(1.03)}
.overline{font:600 12px/1 var(--type-display);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-signal)}
.tile-card h3{font-size:21px;margin:10px 0 8px}
.tile-card p{margin:0 0 10px;font-size:15.5px;line-height:1.55;color:var(--soften)}
.minutes{font:500 13px var(--type-display);color:var(--soften)}
/* pages intérieures */
.cat-masthead{background:var(--paperwhite);border-bottom:1px solid var(--hairline-col);padding:46px 0 40px;margin-bottom:48px}
.cat-masthead h1{font-size:clamp(32px,4vw,48px);margin:10px 0 12px}
.trail{margin:0;font:500 14px var(--type-display);color:var(--soften)}
.trail a{color:var(--soften)}
.preamble{margin:0;max-width:44em;color:var(--soften)}
.related{margin:64px 0 80px;padding-top:22px;border-top:2px solid var(--inkdark);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline}
.related span{font:600 13px var(--type-display);text-transform:uppercase;letter-spacing:.12em;color:var(--soften)}
.related ul{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0;padding:0}
.related a{font:600 16px var(--type-display);color:var(--inkdark)}
.entry-masthead-bg{background:var(--paperwhite);padding:44px 0 36px}
.entry-masthead h1{font-size:clamp(32px,4.4vw,50px);margin:14px 0 18px}
.standfirst{font-size:21px;line-height:1.55;color:var(--type-text);margin:0 0 16px}
.byline{margin:0;font:500 14px var(--type-display);color:var(--soften)}
.entry-figure{margin:0 auto 44px;max-width:1000px}
.entry-figure img{width:100%;max-height:560px;object-fit:cover}
.longform h2{font-size:28px;margin:46px 0 14px;padding-top:14px;border-top:2px solid var(--inkdark)}
.longform h3{font-size:21px;margin:30px 0 10px}
.longform p,.longform li{margin:0 0 18px}
.longform ul,.longform ol{padding-left:24px;margin:0 0 22px}
.longform li{margin-bottom:8px}
.longform ol li::marker{font-family:var(--type-display);font-weight:700;color:var(--accent-signal)}
.longform strong{color:var(--inkdark)}
/* croquis anciens entre les paragraphes : cadre discret, fond papier */
.sketch{margin:36px auto 34px;padding:14px 14px 10px;background:#f6f3ec;border:1px solid var(--hairline-col);box-shadow:0 1px 0 #e7e2d6}
.sketch img{width:100%;mix-blend-mode:multiply}
.sketch figcaption{margin-top:10px;padding-top:8px;border-top:1px solid #e3ddd0;font:italic 400 15px/1.45 var(--type-body);color:var(--soften);text-align:center}
.aside-box{margin:44px 0 30px;padding:20px 24px;background:var(--mist);border-left:4px solid var(--accent-signal)}
.aside-box b{font:700 13px var(--type-display);text-transform:uppercase;letter-spacing:.12em;color:var(--inkdark)}
.aside-box p{margin:8px 0 0;font-size:16.5px}
/* pied */
.sitefoot{background:var(--inkdark);color:#aeb9c2;padding:60px 0 28px;font-size:15px}
.sitefoot .colophon-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.sitefoot .wordmark{color:#fff;font-size:21px}
.sitefoot p{margin:16px 0 0;max-width:30em}
.sitefoot h2{font:600 13px var(--type-display);text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:12px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin:7px 0}
.sitefoot a{color:#d5dde3;text-decoration:none}
.sitefoot .colophon{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:18px;border-top:1px solid #2c3a47;font:500 13px var(--type-display)}
@media (max-width:980px){
.frontpage,.pairing{grid-template-columns:1fr;gap:36px}
.frontpage-figure img{aspect-ratio:3/2}
.frontpage-figure figcaption{left:12px}
.markers{grid-template-columns:1fr;border-left:0}
.marker{display:grid;grid-template-columns:62px 1fr;gap:12px;border-right:0;border-bottom:1px solid var(--hairline-col);padding:16px 0}
.marker .ordinal{font-size:32px;margin:0}
.contents,.layout-grid{grid-template-columns:1fr 1fr}
.sitefoot .colophon-main{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
body{font-size:17px}
.shell{padding:0 16px}
.masthead-row{flex-direction:column;gap:6px}
.frontpage{padding-top:36px;padding-bottom:48px}
.figure-nums{grid-template-columns:1fr}
.figure-nums div,.figure-nums div+div{padding:12px 0;border-left:0;border-bottom:1px solid var(--hairline-col)}
.section-band{padding:52px 0}
.contents,.layout-grid,.sitefoot .colophon-main{grid-template-columns:1fr}
.band-head{flex-direction:column;gap:6px}
.standfirst{font-size:19px}
.sketch{margin:28px auto 26px;padding:10px 10px 8px}
.sketch figcaption{font-size:14px}
}