/* ===== Alp'Sciences - redesign "carnet de terrain" =====
   Tokens, shared components and per-page layouts. Dark mode = class "dark" on <html>. */

:root {
  --cream: #f8f5ef; --white: #ffffff; --sand: #f1e6c4; --ink: #231535; --plum: #4a2e6f;
  --violet: #8c57f6; --gold: #f1cb48; --gold-light: #efcc83; --lilac: #cbb8f5; --rule: #d9d2c0;
  --bg: var(--cream); --card: var(--white); --band: var(--sand);
  --txt: #231535; --meta: #4a2e6f; --accent: #8c57f6; --line: #231535;
  --block: #231535; --block2: #4a2e6f; --on-block: #f8f5ef; --foot-line: #7a5f9c;
  --on-gold: #231535; --photo: none; --trace: 74, 46, 111; --wrap-pad: clamp(20px, 5vw, 56px);
  --ff-head: 'Familjen Grotesk', sans-serif; --ff-body: 'IBM Plex Sans', sans-serif;
  --ff-mono: 'IBM Plex Mono', monospace; --ff-read: 'Literata', serif;
  --shadow-pola: 0 2px 0 rgba(0,0,0,.06), 0 14px 26px -14px rgba(35,21,53,.5);
  color-scheme: light;
}
html.dark {
  --bg: #17111f; --card: #211a2c; --band: #1f1830; --txt: #f1ebdf; --meta: #c9b0ff;
  --accent: #b99bff; --line: #6f6285; --rule: #3a3048; --block: #3b2760; --block2: #2a1a44;
  --on-block: #f1ebdf; --foot-line: #8b6cc0; --photo: brightness(.88) contrast(1.03);
  --trace: 185, 155, 255; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--ff-body); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; }
html.dark img:not([data-nofilter]) { filter: var(--photo); }
a { color: var(--meta); }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible,
[role=button]:focus-visible { outline: 3px solid #8c57f6; outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--ff-head); margin: 0; }
p { margin: 0; }
button, [role=button], summary { min-height: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--block); color: var(--on-block); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* ---------- layout ---------- */
.page { position: relative; background: var(--bg); color: var(--txt); overflow: hidden; }
.wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--wrap-pad); }
.mono { font-family: var(--ff-mono); }
.crumb { font: 500 12px var(--ff-mono); color: var(--meta); margin-bottom: 14px; }
.h1 { font: 700 clamp(40px, 6vw, 72px)/.98 var(--ff-head); letter-spacing: -.025em; }
.h1 em, .h2 em { color: var(--accent); font-style: italic; font-weight: 500; }
.lede { font-size: 19px; line-height: 1.55; max-width: 600px; text-wrap: pretty; margin-top: 20px; }
.page-head { padding: 64px 0 36px; max-width: 880px; }
.fig { font: 400 11px var(--ff-mono); margin-top: 8px; }
.tag { border: 1px solid var(--line); padding: 1px 7px; font: 500 10.5px var(--ff-mono); display: inline-block; text-decoration: none; color: var(--txt); }
a.tag:hover { background: var(--gold); color: var(--on-gold); }

/* decorative backgrounds (SVG motifs, behind content) */
.bg { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: 50% 0; }
.bg-detector { height: 560px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560'%3E%3Cg fill='none'%3E%3Ccircle cx='1010' cy='270' r='60' stroke='%23231535' stroke-opacity='.2'/%3E%3Ccircle cx='1010' cy='270' r='125' stroke='%238c57f6' stroke-opacity='.22' stroke-width='40' stroke-dasharray='26 5'/%3E%3Ccircle cx='1010' cy='270' r='200' stroke='%23cbb8f5' stroke-opacity='.5' stroke-width='56' stroke-dasharray='36 6'/%3E%3Ccircle cx='1010' cy='270' r='285' stroke='%23efcc83' stroke-opacity='.5' stroke-width='66' stroke-dasharray='50 8'/%3E%3Ccircle cx='1010' cy='270' r='375' stroke='%23231535' stroke-opacity='.12' stroke-width='40' stroke-dasharray='70 10'/%3E%3Cpath d='M1010 270L700 40' stroke='%23231535' stroke-opacity='.5' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
html.dark .bg-detector { opacity: .75; filter: invert(.85) hue-rotate(180deg); }
.bg-grid { height: 560px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560'%3E%3Cdefs%3E%3Cpattern id='a' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M20 0H0V20' fill='none' stroke='%238c57f6' stroke-opacity='.16'/%3E%3C/pattern%3E%3Cpattern id='b' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23a)'/%3E%3Cpath d='M100 0H0V100' fill='none' stroke='%238c57f6' stroke-opacity='.3'/%3E%3C/pattern%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='.3' stop-color='%23000'/%3E%3Cstop offset='.75' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='560' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='1200' height='560' fill='url(%23b)'/%3E%3Cpath d='M600 520C740 517 830 505 900 470S960 240 1010 240S1070 470 1120 505S1180 517 1200 520' stroke='%238c57f6' stroke-width='2.5' fill='none'/%3E%3Cg stroke='%23231535' fill='%23231535'%3E%3Ccircle cx='760' cy='516' r='3'/%3E%3Ccircle cx='860' cy='500' r='3'/%3E%3Ccircle cx='930' cy='400' r='3'/%3E%3Ccircle cx='1010' cy='244' r='3'/%3E%3Ccircle cx='1080' cy='420' r='3'/%3E%3Ccircle cx='1150' cy='512' r='3'/%3E%3Cpath d='M930 372V428M1010 214V274M1080 392V448' fill='none'/%3E%3C/g%3E%3Ctext x='1030' y='224' font-family='IBM Plex Mono' font-size='14' fill='%234a2e6f'%3E125 GeV%3C/text%3E%3C/g%3E%3C/svg%3E"); }
html.dark .bg-grid { opacity: .8; filter: invert(.85) hue-rotate(180deg); }
.bg-collision { height: 640px; background-position: 100% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 560'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M820 300Q870 230 940 90' stroke='%23d9a400'/%3E%3Cpath d='M820 300Q760 220 740 60' stroke='%238c57f6' stroke-opacity='.6'/%3E%3Cpath d='M820 300Q900 330 1010 290' stroke='%234a2e6f' stroke-opacity='.55'/%3E%3Cpath d='M820 300Q750 360 650 350' stroke='%238c57f6' stroke-opacity='.5'/%3E%3Cpath d='M820 300Q830 400 770 540' stroke='%23d9a400' stroke-opacity='.9'/%3E%3Cpath d='M820 300Q790 250 700 190' stroke='%234a2e6f' stroke-opacity='.4'/%3E%3C/g%3E%3Ccircle cx='820' cy='300' r='170' fill='none' stroke='%238c57f6' stroke-opacity='.25'/%3E%3Ccircle cx='820' cy='300' r='110' fill='none' stroke='%238c57f6' stroke-opacity='.2'/%3E%3Ccircle cx='820' cy='300' r='5' fill='%23f1cb48' stroke='%23231535'/%3E%3C/svg%3E"); }
html.dark .bg-collision { filter: invert(.85) hue-rotate(180deg); opacity: .8; }
.bg-contour { height: 1000px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000'%3E%3Cg fill='none' stroke='%238c57f6' stroke-opacity='.28'%3E%3Cellipse cx='900' cy='300' rx='60' ry='38' transform='rotate(-18 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='110' ry='72' transform='rotate(-14 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='170' ry='112' transform='rotate(-10 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='240' ry='160' transform='rotate(-6 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='320' ry='214' transform='rotate(-2 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='410' ry='270' transform='rotate(3 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='510' ry='330' transform='rotate(7 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='620' ry='400' transform='rotate(10 900 300)'/%3E%3Cellipse cx='900' cy='300' rx='740' ry='470' transform='rotate(12 900 300)'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- header / footer ---------- */
.site-spacer { height: 68px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 0 max(var(--wrap-pad), calc((100vw - 1200px) / 2 + var(--wrap-pad))); background: var(--bg); border-bottom: 1px solid var(--rule); font-family: var(--ff-body); }
.brand { flex: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 700 24px var(--ff-head); text-decoration: none; letter-spacing: -.01em; color: var(--txt); }
.brand:hover { color: var(--txt); }
.brand img { display: block; height: 38px; width: auto; filter: none !important; }
.mark-light { display: none !important; }
html.dark .mark-light { display: block !important; }
html.dark .mark-dark { display: none !important; }
.site-right { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.site-nav { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 14px var(--ff-body); scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { text-decoration: none; padding: 8px 14px; color: var(--txt); }
.site-nav a:hover { background: var(--gold); color: var(--on-gold); }
.site-nav a[aria-current=page] { background: var(--block); color: var(--on-block); }
.site-tools { display: flex; gap: 6px; align-items: center; flex: none; }
.tool-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--txt);
  padding: 0 8px; font: 500 13px var(--ff-mono); text-decoration: none; }
.tool-btn:hover { background: var(--gold); color: var(--on-gold); }
.tool-btn .i-sun { display: none; }
html.dark .tool-btn .i-sun { display: block; }
html.dark .tool-btn .i-moon { display: none; }

.site-footer { background: var(--block); color: var(--on-block); font-family: var(--ff-body); }
.site-footer a { color: var(--on-block); }
.site-footer a:hover { color: var(--gold); }
.foot-top { max-width: 1200px; margin: 0 auto; padding: 40px var(--wrap-pad) 28px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.foot-brand { font: 700 26px var(--ff-head); }
.foot-tag { font: 400 13px var(--ff-mono); margin-top: 8px; }
.foot-links { font: 400 13px/2 var(--ff-mono); text-align: right; }
.foot-links a.mail { color: var(--gold); }
.foot-bot { max-width: 1200px; margin: 0 auto; padding: 0 var(--wrap-pad) 28px; }
.foot-bot > div { border-top: 1px solid var(--foot-line); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font: 400 12px var(--ff-mono); }

/* ---------- buttons, chips, forms ---------- */
.btn { display: inline-block; background: var(--block); color: var(--on-block); padding: 13px 22px; font: 500 14px var(--ff-body); text-decoration: none; border: 1px solid var(--block); }
.btn:hover { background: var(--block2); color: var(--on-block); }
.btn.line { background: transparent; color: var(--txt); border-color: var(--line); }
.btn.line:hover { background: var(--gold); color: var(--on-gold); }
.btn.gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn.gold:hover { background: var(--gold-light); color: var(--on-gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--txt); padding: 7px 14px; font: 500 13px var(--ff-mono); }
.chip:hover { background: var(--gold); color: var(--on-gold); }
.chip[aria-pressed=true] { background: var(--block); color: var(--on-block); border-color: var(--block); }
.chip.sm { padding: 6px 12px; font-size: 12px; }
.chip .sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 1px solid currentColor; vertical-align: -1px; }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; border: 1px solid var(--line); background: var(--card); padding: 0 14px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0; font: 400 16px var(--ff-body); color: var(--txt); outline: none; }
.search:focus-within { outline: 3px solid #8c57f6; outline-offset: 2px; }

/* ---------- home ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 40px 34px; padding: 34px 0 60px; }
.hero-photo { flex: 1 1 420px; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.ruler { position: relative; border-right: 1px solid var(--line); font: 400 10px var(--ff-mono); }
.ruler span { position: absolute; right: 6px; }
.ruler i { position: absolute; right: 0; width: 10px; border-top: 1px solid var(--line); }
.hero-photo figure { margin: 0 0 0 14px; }
.hero-photo img { display: block; width: 100%; height: clamp(260px, min(42vw, calc(100svh - 190px)), 520px); object-fit: cover; }
.hero-text { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 3vh, 36px); }
.hero-scale { font: 500 12px var(--ff-mono); color: var(--meta); margin-bottom: 14px; }
.hero h1 { font: 700 clamp(34px, min(5.2vw, 7.6vh), 62px)/.98 var(--ff-head); letter-spacing: -.025em; }
.hero h1 em { color: var(--accent); font-style: italic; font-weight: 500; }
.hero-lede { margin: clamp(10px, 2.4vh, 22px) 0 0; font: 500 clamp(16px, 2.7vh, 20px)/1.45 var(--ff-body); max-width: 480px; text-wrap: pretty; }
.hero-me { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.pola { margin: 0; background: var(--card); padding: 10px 10px 8px; box-shadow: var(--shadow-pola); position: relative; }
.pola img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pola figcaption { font: 400 10px/1.4 var(--ff-mono); padding-top: 8px; }
.pola.me { width: clamp(120px, 22vh, 196px); flex: none; transform: rotate(-2.4deg); }
.tape { position: absolute; top: -12px; left: 58px; width: 76px; height: 24px; background: rgba(241,203,72,.8); transform: rotate(3deg); }
.hero-quote { margin: 0; flex: 1 1 200px; font: 400 clamp(15px, 2.4vh, 18px)/1.5 var(--ff-body); text-wrap: pretty; }
#cloud { position: absolute; left: 0; top: 0; width: 100%; height: 760px; pointer-events: none; }

.band { position: relative; background: var(--band); border-top: 1px solid var(--line); }
.band.both { border-bottom: 1px solid var(--line); }
.band .wrap.pad { padding-top: 70px; padding-bottom: 70px; }
.h2 { font: 700 clamp(32px, 4vw, 40px)/1.05 var(--ff-head); letter-spacing: -.02em; }
.mediation { display: flex; flex-wrap: wrap; gap: 44px; }
.mediation > div:first-child { flex: 1 1 340px; }
.mediation p { margin-top: 18px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.mediation p + p { margin-top: 14px; }
.logo-link { margin-top: 24px; display: inline-flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); padding: 10px 16px; text-decoration: none; color: var(--txt); font: 500 14px var(--ff-body); }
.logo-link:hover { background: var(--gold); color: var(--on-gold); }
.logo-link img { height: 36px; width: auto; display: block; }
.mosaic { flex: 1 1 400px; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 200px 160px; gap: 12px; }
.mosaic figure { margin: 0; position: relative; min-height: 0; }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; background: var(--bg); padding: 5px 10px 0 0; font: 400 10px var(--ff-mono); }

.muon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.muon-n { display: flex; align-items: baseline; gap: 10px; }
.muon-n b { font: 700 clamp(44px, 6vw, 64px)/1 var(--ff-head); letter-spacing: -.03em; min-width: 3ch; }
.muon-n span { font: 500 12px var(--ff-mono); color: var(--meta); }
.muon p { flex: 0 1 560px; font: 500 13px/1.6 var(--ff-mono); }

.notes-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 44px; }
.notes-head h2 { font: 700 clamp(44px, 6vw, 64px)/1 var(--ff-head); letter-spacing: -.02em; }
.notes-head h2 em { color: var(--meta); font-style: italic; font-weight: 500; }
.notes-head a { font: 500 14px var(--ff-mono); color: var(--txt); text-underline-offset: 5px; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 36px 32px; align-items: start; }
.note { display: block; position: relative; text-decoration: none; color: var(--txt); background: var(--card); padding: 12px 12px 14px; box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 16px 26px -16px rgba(35,21,53,.55); transition: transform .2s; }
.note:hover { transform: rotate(0deg) !important; color: var(--txt); }
.note img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.note .clip { position: absolute; width: 26px; height: 64px; margin-left: -13px; filter: drop-shadow(0 1px 1px rgba(35,21,53,.35)); }
.note .cap { margin-top: 10px; font: 500 11px var(--ff-mono); color: var(--meta); }
.note .ttl { margin-top: 4px; font: 700 22px/1.1 var(--ff-head); }
.notes-hint { display: none; margin-top: 4px; font: 500 11px var(--ff-mono); color: var(--meta); }
.feed { border-top: 2px solid var(--line); }
.feed a, .feed .empty { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--txt); }
.feed a:hover { background: var(--band); }
.feed .empty { font: 500 12px var(--ff-mono); color: var(--meta); border-bottom: 0; }
.feed .d { flex: 0 0 130px; font: 500 11px var(--ff-mono); color: var(--meta); }
.feed .t { flex: 1 1 280px; font: 700 22px/1.2 var(--ff-head); }

.alt-badge { position: fixed; left: 14px; bottom: 14px; z-index: 80; pointer-events: none; background: var(--bg); border: 1px solid var(--line); padding: 5px 9px; font: 500 11px var(--ff-mono); color: var(--txt); display: flex; gap: 8px; align-items: center; }
.alt-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8c57f6; }
.alt-mark { position: absolute; right: 0; top: 0; width: 24px; border-top: 2px solid #8c57f6; pointer-events: none; }
.alt-mark i { position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 1.5px solid #231535; }

/* interests pie */
.pie-sec { position: relative; padding: 20px 0 60px; scroll-margin-top: 68px; }
.pie-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-bottom: 20px; }
.pie-head span { font: 500 12px var(--ff-mono); color: var(--meta); }
.pie-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.pie-box { min-width: 0; max-width: min(440px, max(280px, calc(100svh - 300px))); margin: 0 auto; width: 100%; }
.pie-svg-wrap { position: relative; aspect-ratio: 1/1; width: 100%; }
.pie-svg-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pie-svg-wrap path { cursor: pointer; outline: none; }
.pie-svg-wrap path:focus-visible { stroke: #8c57f6; stroke-width: 4; }
.pie-ico { position: absolute; transform: translate(-50%, -50%); width: 30%; text-align: center; pointer-events: none; }
.pie-ico svg { position: static; display: block; margin: 0 auto; width: 38px; height: 38px; }
.pie-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; text-align: center; pointer-events: none; }
.pie-center b { display: block; font: 700 clamp(36px, 7vw, 56px)/1 var(--ff-head); letter-spacing: -.04em; }
.pie-center span { display: block; font: 500 11px var(--ff-mono); color: var(--meta); margin-top: 4px; }
.pie-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 28px; }
.pie-list button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--rule); font: 400 16px var(--ff-body); color: var(--txt); }
.pie-list button[aria-pressed=true] { font-weight: 600; border-bottom-color: var(--line); }
.pie-list button:hover { background: var(--band); }
.pie-list button:focus-visible { outline: 3px solid #8c57f6; outline-offset: 2px; }
.pie-list .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }
.pie-list .no { font: 500 11px var(--ff-mono); color: var(--meta); }
.pie-panel figure { margin: 0; }
.pie-panel figure img { display: block; width: 100%; height: 300px; object-fit: cover; }
.pie-panel figcaption { height: 2.8em; overflow: hidden; font: 400 11px var(--ff-mono); margin-top: 8px; }
.pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 36px; margin-top: 10px; align-items: start; }
.pie-cols h3 { min-height: 2.1em; font: 700 clamp(24px, 2.8vw, 30px)/1.05 var(--ff-head); letter-spacing: -.02em; }
.pie-cols p { margin-top: 8px; min-height: 7.8em; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ex-title { font: 500 11px var(--ff-mono); color: var(--meta); }
.ex-list { margin: 8px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--line); }
.ex-list li { border-bottom: 1px solid var(--line); }
.ex-list a { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14.5px; text-decoration: none; color: var(--txt); }
.ex-list a:hover { background: var(--gold); color: var(--on-gold); }
.pie-sheet { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(23,17,31,.62); align-items: flex-end; justify-content: center; }
.pie-sheet.open { display: flex; }
.pie-sheet > div { position: relative; width: 100%; max-height: 88svh; overflow-y: auto; background: var(--bg); color: var(--txt); border-top: 2px solid var(--line); padding: 18px 20px 28px; }
.pie-sheet .x { cursor: pointer; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); font: 500 22px/1 var(--ff-mono); padding: 0; }
.pie-sheet .k { font: 500 11px var(--ff-mono); color: var(--meta); padding-right: 52px; }
.pie-sheet h3 { margin: 8px 0 0; padding-right: 52px; font: 700 28px/1.05 var(--ff-head); letter-spacing: -.02em; }
.pie-sheet img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-top: 14px; }
.pie-sheet p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; }
.pie-sheet .ex-list a { padding: 12px 0; }

/* ---------- blog list ---------- */
.blog-tools { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding-bottom: 18px; }
.count { font: 500 12px var(--ff-mono); color: var(--meta); }
.blog-chips { padding-bottom: 30px; }
.rows { border-top: 2px solid var(--line); padding-bottom: 90px; }
.rows .none { padding: 32px 0; font: 500 14px var(--ff-mono); color: var(--meta); border-bottom: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--txt); }
.row:hover { background: var(--band); color: var(--txt); }
.row-date { flex: 0 0 130px; font: 500 12px/1.8 var(--ff-mono); color: var(--meta); }
.row-txt { flex: 1 1 320px; }
.row-title { font: 700 clamp(28px, 3.6vw, 42px)/1.05 var(--ff-head); letter-spacing: -.015em; text-wrap: balance; }
.row-abs { margin-top: 12px; font-size: 16px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.row figure { flex: 0 0 200px; margin: 0; border: 1px solid var(--line); padding: 6px; background: var(--card); }
.row figure img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.row figcaption { font: 400 10px var(--ff-mono); padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--line); }

/* ---------- article ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 101; background: #8c57f6; width: 0; }
.art-head { padding: 56px 0 30px; max-width: 860px; }
.art-head .back, .back { font: 500 12px var(--ff-mono); }
.art-meta { font: 500 12px var(--ff-mono); margin: 26px 0 12px; color: var(--meta); }
.art-title { font: 700 clamp(40px, 6vw, 68px)/1 var(--ff-head); letter-spacing: -.025em; text-wrap: balance; }
.art-cover { margin: 0 0 56px; width: min(100%, 400px); }
.art-cover img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.art-layout { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.toc { flex: 0 0 200px; position: sticky; top: 92px; font: 400 12px/1.5 var(--ff-mono); }
.toc-t { color: var(--meta); margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: block; padding: 8px 8px 8px 10px; text-decoration: none; color: var(--txt); border-left: 4px solid transparent; }
.toc a[aria-current=true] { background: var(--gold); color: var(--on-gold); border-left-color: #231535; font-weight: 500; }
.prose { flex: 1 1 480px; max-width: 680px; min-width: 0; font: 400 19px/1.75 var(--ff-read); text-wrap: pretty; }
.prose > p { margin: 0 0 1.2em; }
.prose > p:first-child { font-size: 22px; line-height: 1.6; }
.prose blockquote:not(.instagram-media) { margin: 2em -20px; padding: 26px 28px; background: var(--gold); color: var(--on-gold); border: 1px solid #231535; }
.prose blockquote:not(.instagram-media) p { font: 600 22px/1.45 var(--ff-read); }
.prose blockquote footer { margin-top: 14px; font: 500 12px var(--ff-mono); }
.prose h2 { margin: 2em 0 .6em; font: 700 32px/1.1 var(--ff-head); letter-spacing: -.01em; }
.prose h2 small { font: 400 14px var(--ff-mono); }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose .quote-line { padding-left: 22px; border-left: 3px solid #8c57f6; font-style: italic; }
.prose .cards { display: grid; gap: 14px; margin: 0 0 1.2em; }
.prose .cards > div { border: 1px solid var(--line); background: var(--card); padding: 16px 18px; font-size: 17px; line-height: 1.6; }
.prose .cards b { font: 700 20px var(--ff-head); }
.prose .instagram-media { margin-left: auto !important; margin-right: auto !important; }
.prose iframe { max-width: 100%; }
.sources { margin-top: 3em; padding-top: 20px; border-top: 2px solid var(--line); }
.sources h2 { margin: 0 0 14px; font: 500 13px var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; }
.sources ol { margin: 0; padding: 0; list-style: none; font: 400 13px/1.6 var(--ff-mono); display: grid; gap: 12px; overflow-wrap: anywhere; }
.more-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; }
.more-head h2 { font: 700 32px var(--ff-head); }
.more-head a { font: 500 13px var(--ff-mono); }
.more { margin-top: 90px; padding-bottom: 90px; }
.more-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.more-cards a { flex: 1 1 220px; max-width: 260px; text-decoration: none; color: var(--txt); border: 1px solid var(--line); background: var(--card); padding: 8px; display: block; }
.more-cards.wide a { flex-basis: 280px; max-width: 380px; }
.more-cards img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.more-cards.wide img { aspect-ratio: auto; height: 170px; }
.more-cards .in { border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 4px 4px; }
.more-cards .k { font: 500 11px var(--ff-mono); color: var(--meta); margin-bottom: 6px; }
.more-cards .n { font: 700 24px/1.1 var(--ff-head); }
.more-cards.wide .n { font-size: 21px; }
.more-cards a:hover { box-shadow: 6px 6px 0 var(--gold); }

/* ---------- parcours ---------- */
.dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.embed { position: relative; width: min(100%, 820px); padding-top: min(46%, 461px); margin-bottom: 56px; border: 1px solid var(--line); background: var(--card); }
.embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.pc-chips { margin-bottom: 34px; }
.pc-year { display: grid; grid-template-columns: minmax(0, 130px) 24px minmax(0, 1fr); gap: 0 24px; }
.pc-year .y { font: 700 clamp(32px, 4vw, 44px)/1 var(--ff-head); letter-spacing: -.03em; padding-top: 2px; }
.pc-year .rail { position: relative; }
.pc-year .rail::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.pc-year .rail i { position: relative; display: block; width: 14px; height: 14px; margin: 14px 0 0 5px; border-radius: 50%; background: var(--gold); border: 2px solid #231535; }
.pc-items { padding-bottom: 26px; display: grid; gap: 12px; min-width: 0; }
.pc-card { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--c); padding: 14px 18px; }
.pc-card .k { font: 500 11px var(--ff-mono); color: var(--meta); }
.pc-card h3 { margin: 5px 0 0; font: 700 20px/1.2 var(--ff-head); }
.pc-card .org { margin-top: 3px; font-size: 14px; line-height: 1.4; }
.pc-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-card details { margin-top: 8px; }
.pc-card summary { cursor: pointer; font: 500 12px var(--ff-mono); color: var(--meta); }
.pc-card details p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; max-width: 70ch; text-wrap: pretty; }
.pc-card img { width: 120px; height: 84px; object-fit: contain; }
html.dark .pc-card img { background: #f1ebdf; padding: 4px; }
[hidden] { display: none !important; }

/* ---------- médiation / projects ---------- */
.view-tabs { display: flex; width: fit-content; border: 1px solid var(--line); margin-bottom: 22px; }
.view-tabs button { cursor: pointer; border: 0; padding: 8px 16px; font: 500 13px var(--ff-mono); background: transparent; color: var(--txt); }
.view-tabs button + button { border-left: 1px solid var(--line); }
.view-tabs button[aria-selected=true] { background: var(--block); color: var(--on-block); }
.proj-chips { padding-bottom: 30px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; padding-bottom: 100px; align-items: stretch; }
.proj-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); padding: 8px; text-decoration: none; color: var(--txt); }
.proj-card:hover { box-shadow: 6px 6px 0 var(--gold); color: var(--txt); }
.proj-card img { display: block; width: 100%; height: 210px; object-fit: cover; }
.proj-card .in { border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 6px 8px; flex: 1; display: flex; flex-direction: column; }
.proj-card .k { font: 500 11px var(--ff-mono); color: var(--meta); }
.proj-card h2 { margin: 6px 0 10px; min-height: 2.2em; font: 700 24px/1.1 var(--ff-head); }
.proj-card .abs { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.proj-card .abs > * { margin: 0; }
.proj-card .tags, .tl-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.proj-line { padding: 10px 0 100px; }
.tl-year { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 28px; }
.tl-year .rail { position: relative; }
.tl-year .rail::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-year .rail i { position: relative; display: block; width: 16px; height: 16px; margin: 26px 0 0 6px; border-radius: 50%; background: var(--gold); border: 2px solid #231535; }
.tl-year .yy { font: 700 clamp(48px, 7vw, 72px)/1 var(--ff-head); letter-spacing: -.04em; margin-bottom: 20px; }
.tl-body { padding-bottom: 44px; }
.tl-cards { display: flex; flex-wrap: wrap; gap: 18px; }
.tl-card { position: relative; display: block; width: 290px; max-width: 100%; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--txt); }
.tl-card:hover { box-shadow: 6px 6px 0 var(--gold); color: var(--txt); }
.tl-card img { display: block; width: 100%; height: 170px; object-fit: cover; }
.tl-card .in { padding: 14px 16px 16px; }
.tl-card .k { font: 500 11px var(--ff-mono); color: var(--meta); }
.tl-card .n { margin-top: 6px; font: 700 21px/1.12 var(--ff-head); }
.tl-card .tags { margin-top: 12px; gap: 5px; }

/* ---------- project detail ---------- */
.proj-top { display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: flex-start; padding-bottom: 60px; }
.proj-top > div { flex: 1 1 420px; }
.proj-top h1 { font: 700 clamp(38px, 5vw, 60px)/1 var(--ff-head); letter-spacing: -.025em; text-wrap: balance; }
.proj-top .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.proj-top .abstract { margin-top: 26px; font-size: 20px; line-height: 1.6; max-width: 540px; text-wrap: pretty; }
.proj-top figure { flex: 1 1 380px; margin: 0; border: 1px solid var(--line); background: var(--card); padding: 8px; }
.proj-top figure img { display: block; width: 100%; height: clamp(240px, 34vw, 400px); object-fit: cover; }
.proj-top figcaption { font: 400 11px var(--ff-mono); padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.psec { display: flex; flex-wrap: wrap; gap: 30px 56px; padding: 44px 0; border-top: 1px solid var(--line); }
.psec:first-of-type { border-top-width: 2px; }
.psec-h { flex: 0 0 200px; }
.psec-h .no { font: 500 12px var(--ff-mono); color: var(--meta); }
.psec-h h2 { margin-top: 6px; font: 700 26px/1.1 var(--ff-head); }
.psec-b { flex: 1 1 440px; max-width: 680px; min-width: 0; font-size: 17px; line-height: 1.7; }
.psec-b > p { margin: 0 0 1em; text-wrap: pretty; }
.psec-b .subhead { margin: 1.4em 0 10px; font: 700 19px var(--ff-head); }
.psec-b .subhead:first-child { margin-top: 0; }
.psec-b ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.psec-b img, .psec-b iframe { max-width: 100%; height: auto; }
.psec-b details.exp { margin: 10px 0; border: 1px solid var(--line); background: var(--card); padding: 0 14px; }
.psec-b details.exp summary { cursor: pointer; padding: 10px 0; font: 500 13px var(--ff-mono); color: var(--meta); }
.psec-b details.exp .body { padding-bottom: 14px; font-size: 15px; }
.psec-b .stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 18px; }
.psec-b .stat { background: var(--gold); color: var(--on-gold); border: 1px solid #231535; padding: 20px 28px; min-width: 200px; }
.psec-b .stat:nth-child(even) { background: var(--block2); color: #f8f5ef; }
html.dark .psec-b .stat:nth-child(even) { background: #3b2760; }
.psec-b .stat b { display: block; font: 700 72px/1 var(--ff-head); }
.psec-b .stat span { display: block; font: 500 12px var(--ff-mono); margin-top: 8px; }
.res-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.res-list a, .res-list span { font: 500 16px var(--ff-mono); }

/* ---------- contact ---------- */
.postcard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); background: var(--card); color: var(--txt); border: 1px solid var(--line); box-shadow: 0 18px 30px -20px rgba(35,21,53,.55); }
.pc-a { padding: clamp(22px, 4vw, 40px); border-right: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
.pc-a h1 { font: 700 clamp(34px, 4.6vw, 52px)/1 var(--ff-head); letter-spacing: -.025em; }
.pc-a h1 em { color: var(--accent); font-style: italic; font-weight: 500; }
.pc-a p { margin-top: 16px; font-size: 17px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.pc-a form { margin-top: 24px; }
.pc-a label { display: block; border-bottom: 1px solid var(--line); padding: 8px 0 4px; font: 500 11px var(--ff-mono); color: var(--meta); }
.pc-a input, .pc-a textarea { display: block; width: 100%; border: 0; background: transparent; padding: 8px 0 6px; font: 400 17px var(--ff-body); color: var(--txt); }
.pc-a textarea { line-height: 1.5; resize: vertical; }
.pc-a button { cursor: pointer; margin-top: 22px; border: 1px solid var(--block); background: var(--block); color: var(--on-block); padding: 14px 24px; font: 500 15px var(--ff-body); }
.pc-a button:hover { background: var(--block2); }
.pc-b { position: relative; padding: clamp(22px, 4vw, 34px); }
.pc-photo { position: relative; margin: 0 0 28px auto; width: 68%; min-width: 220px; max-width: 100%; }
.pc-photo .frame { background: var(--bg); border: 3px double #8c57f6; padding: 8px; transform: rotate(1.2deg); }
.pc-photo img { display: block; width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: 50% 25%; }
.stamp { position: absolute; top: -18px; left: -70px; width: 100px; height: 100px; border: 2px solid var(--meta); border-radius: 50%; background: rgba(248,245,239,.82); opacity: .9; transform: rotate(-14deg);
  display: flex; align-items: center; justify-content: center; font: 500 9px/1.3 var(--ff-mono); text-align: center; color: #4a2e6f; }
html.dark .stamp { background: rgba(23,17,31,.82); color: var(--meta); }
.ct-rows { border-top: 2px solid var(--line); }
.ct-row { display: flex; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; text-decoration: none; color: var(--txt); }
.ct-row:hover { background: var(--gold); color: var(--on-gold); }
.ct-row span:first-child { flex: 0 0 78px; font: 500 11px var(--ff-mono); padding-top: 4px; }
.ct-row span:last-child { font: 500 16px var(--ff-head); overflow-wrap: anywhere; }

/* ---------- mentions ---------- */
.legal { max-width: 720px; padding-bottom: 100px; border-top: 2px solid var(--line); }
.legal section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.legal h2 { margin: 0 0 12px; font: 700 24px var(--ff-head); }
.legal p { margin: 0 0 12px; line-height: 1.65; }
.legal p:last-child { margin-bottom: 0; }

/* ---------- 404 (always dark) ---------- */
.p404 { --bg: #17111f; --card: #211a2c; --txt: #f1ebdf; --meta: #c9b0ff; --accent: #b99bff; --line: #6f6285; --rule: #3a3048; --block: #3b2760; --on-block: #f1ebdf; background: #17111f; color: #f1ebdf; }
.p404 a { color: #cbb8f5; }
.p404 a:hover { color: #f1cb48; }
.p404 .bg { height: 100%; background-size: cover; background-position: 50% 50%; background-image: none; }
.p404 .site-header, .p404 .site-footer { }
.p404 .lost { padding: 56px 0 90px; text-align: center; }
.p404 .lost h1 { margin: 16px auto 0; font: 700 clamp(40px, 5.6vw, 68px)/1 var(--ff-head); letter-spacing: -.025em; max-width: 16ch; }
.p404 .lost h1 em { color: #b99bff; font-style: italic; font-weight: 500; }
.p404 .lost p.s { margin: 22px auto 0; font-size: 18px; max-width: 54ch; }
.p404 .lost figure { margin: 40px auto 0; max-width: 520px; border: 1px solid #cbb8f5; background: #211a2c; padding: 10px; }
.p404 .lost figure img { width: 100%; display: block; }
.p404 .lost figcaption { margin-top: 8px; text-align: left; font: 400 11px/1.5 var(--ff-mono); color: #c9b0ff; }
.p404 .lost .acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.p404 .btn { color: #f1ebdf; border: 1px solid #cbb8f5; background: transparent; }
.p404 .btn:hover { background: #3b2760; color: #f1ebdf; }
.p404 .btn.gold { background: #f1cb48; color: #231535; border-color: #f1cb48; }
.p404 .btn.gold:hover { background: #efcc83; color: #231535; }
.p404-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .pie-panel figure img { height: 300px; }
}
@media (min-width: 900px) {
  .pie-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .pie-panel figure img { height: var(--pie-h, 440px); }
}
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; row-gap: 4px; }
  .site-spacer { height: 102px; }
  .site-right { display: contents; }
  .site-header > .brand { order: 1; }
  .site-tools { order: 2; margin-left: auto; }
  .site-nav { order: 3; flex: 0 0 100%; margin: 0 -20px; padding: 0 20px 8px; }
  .site-nav a { padding: 10px 12px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
  .tool-btn { min-height: 44px; }
  button, [role=button], summary { min-height: 44px; }
  .notes { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--wrap-pad)); padding: 40px var(--wrap-pad) 22px; scrollbar-width: none; }
  .notes::-webkit-scrollbar { display: none; }
  .notes > a { flex: 0 0 74%; max-width: 300px; scroll-snap-align: center; }
  .notes-hint { display: block; }
  .pie-panel, .pie-list { display: none; }
  .blog-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--wrap-pad)); padding: 0 var(--wrap-pad) 22px; scrollbar-width: none; }
  .blog-chips::-webkit-scrollbar { display: none; }
  .blog-chips > * { flex: none; }
  .row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; align-items: start; }
  .row figure { grid-column: 1; grid-row: 1 / span 2; padding: 0; width: 84px; border: 0; }
  .row figcaption { display: none; }
  .row-date { grid-column: 2; grid-row: 1; font-size: 11px; line-height: 1.5; }
  .row-txt { grid-column: 2; grid-row: 2; }
  .row-title { font-size: 22px; line-height: 1.08; }
  .row-abs { margin: 6px 0 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-a { border-right: 0; }
  .pc-photo { width: 100%; min-width: 0; margin-top: 8px; }
  .stamp { left: -6px; top: -26px; width: 84px; height: 84px; }
  .pc-a button { width: 100%; min-height: 48px; }
  .ct-row { padding: 14px 0; min-height: 44px; align-items: center; }
  .prose blockquote:not(.instagram-media) { margin-left: 0; margin-right: 0; }
  .toc { position: static; flex: 1 1 100%; }
  .psec-h { flex-basis: 100%; }
  input, textarea, select { font-size: 16px; }
}
@media (max-width: 560px) {
  .pc-year { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .pc-year .y { grid-column: 2; grid-row: 1; padding-bottom: 12px; }
  .pc-year .rail { grid-column: 1; grid-row: 1 / span 2; }
  .pc-year .pc-items { grid-column: 2; grid-row: 2; }
  .pc-card { grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; padding: 12px; }
  .pc-card img { width: 64px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* chrome placeholder reserves space until the partial is injected */
[data-include=header] { min-height: 68px; }
@media (max-width: 720px) { [data-include=header] { min-height: 102px; } }

.pola img, .note img { height: auto; }

/* project images keep their natural ratio (same in médiation listing, project page and "autres projets") */
.proj-card img, .tl-card img, .proj-top figure img, .more-cards.wide img { height: auto; aspect-ratio: auto; object-fit: contain; }