/* Bureau Privé des Études Expérimentales, v2 (Nov 3 2026). Same principles as Algorithme du Temps, its own system:
   a 10-column grid, Archivo (slightly expanded) for text and titles, IBM Plex Mono for labels and figures, five sizes,
   flush-left ragged-right, hairline rules. Mainly white; neon accents, one per programme (Nadim: "use neon colors
   (yellow, blue, green, pink, orange) as accent colors"). Neon is used as fields and marks, never as text on white.
   v1 (12 columns, Inter Tight, plaster renders) = index-v1.html + assets/site-v1.css. */
:root{
  color-scheme:light;
  --paper:#f5f5f2; --white:#ffffff; --ink:#0e0e0e; --grey:#6b6b6b; --hair:rgba(14,14,14,.16); --rule:#0e0e0e;
  --yellow:#e4ff1a; --blue:#2f4bff; --green:#00e08a; --pink:#ff2f92; --orange:#ff6a13;
  --c:var(--orange);
  --f-body:"Archivo",Helvetica,Arial,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace; --wd:112;
  --m:clamp(20px,4.44vw,96px); --g:clamp(14px,1.67vw,32px); --bar:52px;
  --sp:clamp(96px,12.5vw,240px); --rg:clamp(40px,4.44vw,80px); --open:clamp(44px,5.56vw,104px);
  --t-s:11.5px; --t-b:clamp(15px,1.07vw,17px); --t-l:clamp(20px,1.9vw,32px); --t-h:clamp(30px,3.9vw,74px); --t-d:clamp(42px,8.2vw,160px);
}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--yellow);color:var(--ink)}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-b)/1.45 var(--f-body);font-variation-settings:"wdth" var(--wd);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* grid: 10 columns */
.g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--g);padding-left:var(--m);padding-right:var(--m)}
.g>*{grid-column:1/-1;min-width:0}
.sub{grid-column:1/-1;padding:0}

/* type: five sizes */
.display{font-weight:500;font-size:var(--t-d);line-height:.92;letter-spacing:-.04em;margin-left:-.04em;font-variation-settings:"wdth" 118}
.display span{display:block}
.display .v2{color:var(--grey)}
.h{font-weight:500;font-size:var(--t-h);line-height:1.04;letter-spacing:-.028em;font-variation-settings:"wdth" 116}
.lead{font-weight:400;font-size:var(--t-l);line-height:1.22;letter-spacing:-.012em}
.mono,.lab,.n,dt,figcaption,.idx th,.idx td.k,.nav{font-family:var(--f-mono);font-variation-settings:normal}
.lab,figcaption,dt{font-size:var(--t-s);line-height:1.4;letter-spacing:.02em;color:var(--grey);text-transform:uppercase}
p+p{margin-top:.9em}
.measure{max-width:30em}

/* bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--bar);align-items:center;background:rgba(245,245,242,.94);
  border-bottom:1px solid var(--rule);font-size:13px;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;grid-column:1/6;white-space:nowrap}
.brand .mark{height:20px;width:auto;display:block}
.nav{grid-column:6/11;display:flex;justify-content:flex-end;gap:0 clamp(12px,1.4vw,26px);flex-wrap:wrap;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.nav a:hover{text-decoration:none;background:linear-gradient(var(--c),var(--c)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
main{padding-top:var(--bar)}

/* sections */
section{border-top:1px solid var(--rule);padding-top:var(--open);padding-bottom:var(--sp)}
section.first{border-top:0}
.head{row-gap:18px;margin-bottom:var(--rg)}
.white{background:var(--white)}
.ink{background:var(--ink);color:var(--paper);--rule:var(--paper);--grey:#9b9b9b}
.plate{position:relative;overflow:hidden;background:#e7e7e3}
.plate img{width:100%;height:100%;object-fit:cover}
.r11{aspect-ratio:1/1}.r45{aspect-ratio:4/5}
figcaption{margin-top:10px;max-width:40em;text-transform:none;letter-spacing:.01em}
.chip{display:inline-block;width:.62em;height:.62em;background:var(--c);vertical-align:.04em;margin-right:.45em}

/* hero */
.hero{padding-top:clamp(40px,5vw,96px);padding-bottom:var(--sp);row-gap:var(--rg)}
.hero .plate{box-shadow:calc(var(--g) * -1) var(--g) 0 var(--c)}

/* programmes */
.prog{row-gap:24px;padding-top:var(--rg);border-top:1px solid var(--hair)}
.prog+.prog{margin-top:var(--rg)}
.prog .n{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .3em;background:var(--c);
  color:var(--ink);font-size:var(--t-l);font-weight:500;justify-self:start}
.prog .q{max-width:18em}
.prog .body{display:flex;flex-direction:column;gap:22px}
.status{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;border-top:1px solid var(--hair);padding-top:12px;max-width:30em}
.status dd{font-size:var(--t-s);line-height:1.4}
.status dd a{background:linear-gradient(var(--c),var(--c)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.status dd a:hover{text-decoration:none;background-size:100% 100%}
.p1{--c:var(--blue)}.p2{--c:var(--pink)}.p3{--c:var(--yellow)}.p4{--c:var(--green)}
.p1 .n{color:#fff}

/* index */
.idx{width:100%;border-collapse:collapse;font-size:var(--t-b)}
.idx th{font-size:var(--t-s);font-weight:400;color:var(--grey);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.02em}
.idx td{padding:16px 12px 16px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.idx td.k{font-size:var(--t-s);color:var(--grey);white-space:nowrap;padding-top:20px}
.idx td.t{font-weight:500;max-width:28em}
.idx td.t small{display:block;font-weight:400;color:var(--grey);font-size:var(--t-s);margin-top:4px}
.idx td.go a{white-space:nowrap;--c:var(--orange);background:linear-gradient(var(--c),var(--c)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.idx td.go a:hover{text-decoration:none;background-size:100% 100%}
.idx tr:hover td{background:rgba(228,255,26,.18)}

/* method, bureau */
.tenet{border-top:1px solid var(--hair);padding-top:16px;display:grid;grid-template-columns:3em 1fr;gap:8px 12px}
.tenet+.tenet{margin-top:28px}
.tenet .n{font-size:var(--t-s);color:var(--grey);grid-row:1/3}
.tenet h3{font-size:var(--t-l);font-weight:400;letter-spacing:-.012em;line-height:1.2}
.txt{display:flex;flex-direction:column;gap:22px}
.about dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;border-top:1px solid var(--hair);padding-top:14px}
.about dd{font-size:var(--t-s);line-height:1.4}
.about dd a{--c:var(--pink);background:linear-gradient(var(--c),var(--c)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.about dd a:hover{text-decoration:none;background-size:100% 100%}

/* correspondence */
.corr .addr{font-size:var(--t-h);font-weight:500;letter-spacing:-.028em;line-height:1.04;word-break:break-word;font-variation-settings:"wdth" 116}
.corr .addr a{color:var(--yellow)}
.corr ul li{border-top:1px solid rgba(245,245,242,.2);padding:12px 0;display:grid;grid-template-columns:3em 1fr;gap:0 12px}
.corr ul li span{font-family:var(--f-mono);font-size:var(--t-s);color:var(--grey);padding-top:4px}
.swatches{display:flex;margin-top:var(--rg)}
.swatches i{flex:1;height:10px}

/* footer */
footer{border-top:1px solid var(--rule);padding-top:28px;padding-bottom:40px;row-gap:20px;font-size:var(--t-s);color:var(--grey)}
footer svg.mk{width:120px;color:var(--ink)}
footer .cols{display:flex;flex-wrap:wrap;gap:8px 28px}

/* placement on the 10 columns */
@media (min-width:761px){
  .head .lab{grid-column:1/3}.head .h{grid-column:3/11;max-width:16em}
  .hero .kick{grid-column:1/4}.hero .display{grid-column:1/11}
  .hero .lead{grid-column:1/5;align-self:end}.hero figure{grid-column:6/11}
  .prog .n{grid-column:1/2}.prog .body{grid-column:2/6}.prog figure{grid-column:7/11}
  .prog.alt .body{grid-column:6/10;grid-row:1}.prog.alt figure{grid-column:1/5;grid-row:1}.prog.alt .n{grid-column:10/11;grid-row:1;justify-self:end}
  .method figure{grid-column:1/5}.method .tenets{grid-column:6/11}
  .about figure{grid-column:1/5}.about .txt{grid-column:6/11}
  .corr .addr{grid-column:1/6}.corr ul{grid-column:7/11}
  footer .a{grid-column:1/3}footer .b{grid-column:3/8}footer .c{grid-column:8/11;text-align:right}
}

/* phones */
@media (max-width:760px){
  :root{--bar:48px}
  .brand{grid-column:1/-1}
  .brand .full{display:none}
  .nav{display:none}
  .display{font-size:clamp(38px,11.5vw,60px)}
  .hero .plate{box-shadow:none;border-left:8px solid var(--c)}
  .method figure,.about figure{margin-bottom:var(--rg)}
  .idx thead{display:none}
  .idx tr{display:grid;grid-template-columns:3em 1fr;border-bottom:1px solid var(--hair);padding:14px 0}
  .idx td{border:0;padding:2px 0}
  .idx td.k{grid-column:1;grid-row:1/span 5;padding-top:4px}
  .idx td:not(.k){grid-column:2}
  .idx td.p,.idx td.f,.idx td.y{font-size:var(--t-s);color:var(--grey)}
  .idx td.p::before{content:"Programme "}
}