/* ============================================================
   DELORDINAIRE — PHASE 3 · maquette haute fidélité
   Contrat « le design s'efface » — 12 règles (planche A, §07)
   01 chrome nul · 02 typo de labeur · 03 N&B→couleur ·
   04 blancs massifs · 05 pellicule · 06 corps étrangers nus ·
   07 la métadonnée orne · 08 mots nus · 09 fiches = grand moment ·
   10 index brut · 11 accent ≤2% · 12 mouvement discret
   ============================================================ */

:root{
  --neige:#F1EEE8;
  --neige-2:#E9E5DC;
  --papier:#F7F5F0;
  --encre:#161412;
  --encre-60:rgba(22,20,18,.62);
  --encre-35:rgba(22,20,18,.38);
  /* Givre/Bouleau retirés — palette UI validée = neige · papier · encre · brique
     (planche A « Hiver habité », §07) ; les couleurs viennent des photos. */
  --brique:#9E3F22;
  --sans:'Schibsted Grotesk',-apple-system,sans-serif;
  --mono:'Fragment Mono',ui-monospace,monospace;
  --hair:1px solid rgba(22,20,18,.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto;height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--neige);
  color:var(--encre);
  font:400 13px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* easing signature du site */
:root{--expo:cubic-bezier(.19,1,.22,1)}

/* fondu de page (sortie / entrée) */
body{opacity:1;transition:opacity .5s ease}
body.leaving{opacity:0;transition:opacity .35s ease}
body.entering{opacity:0;transition:none}

/* curseur custom — rond en mix-blend-difference, suivi avec retard (JS) */
html.has-cursor, html.has-cursor *{cursor:none!important}
.cursor{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s;
  transform:translate3d(var(--x,-100px),var(--y,-100px),0);
}
.cursor.on{opacity:1}
.cursor i{
  display:block;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:1.2px solid #fff;background:transparent;
  transition:background .2s ease-in-out,transform .2s ease-in-out,border-color .2s;
}
.cursor.hover i{background:#fff;border-color:#fff;transform:scale(.6)}
@media(hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}
::selection{background:var(--encre);color:var(--neige)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer}

/* bilingue */
[data-lang="fr"] .L.en{display:none}
[data-lang="en"] .L.fr{display:none}

/* ---------- header — règle 08 : mots nus ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:20px 28px 12px;background:var(--neige);
}
.wordmark{display:inline-block;line-height:1}
.wordmark .name{
  font-size:13px;font-weight:400;letter-spacing:.38em;text-transform:uppercase;
}
.wordmark .bar{display:block;height:5px;background:var(--encre);margin-top:6px;width:82%}

/* ---------- écran d'accueil — carrousel du site actuel (delordinaire.com),
   wordmark encre en haut à gauche, clic pour entrer, sortie en fondu lent ---------- */
html.hold body{opacity:0;animation:unhold .4s ease 2.6s forwards}
@keyframes unhold{to{opacity:1}}
html.porte{overflow:hidden}
.loader{
  position:fixed;inset:0;z-index:200;background:var(--neige);
  cursor:pointer;outline:none;
  transition:opacity 1.6s ease;will-change:opacity;
}
.loader .diapo{position:absolute;inset:0;overflow:hidden}
.loader .diapo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 4s ease-in-out;
}
.loader .diapo img.on{opacity:1}
.loader .wm{position:absolute;top:55px;left:50px;z-index:4}
.loader .name{
  display:block;color:var(--encre);font-size:17px;
  font-weight:300;letter-spacing:6px;text-transform:uppercase;
}
.loader .bar{display:block;width:174px;height:16px;margin-top:7px;background:var(--encre)}
.loader.done{opacity:0;pointer-events:none}
@media(max-width:760px){.loader .wm{top:40px;left:20px}}
.anchors{display:flex;gap:22px;font-family:var(--mono);font-size:12px;padding-top:4px}
.anchors a{opacity:.55;transition:opacity .2s}
.anchors a:hover,.anchors a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.head-right{display:flex;gap:22px;align-items:baseline;font-family:var(--mono);font-size:12px;padding-top:4px}
.head-right a:hover,.head-right button:hover{text-decoration:underline;text-underline-offset:4px}
.lang button{font-family:var(--mono);font-size:12px;opacity:.35;padding:0}
.lang button.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
.lang .sep{opacity:.35;padding:0 3px}

/* ---------- menu overlay — panneau encre, glisse depuis la gauche ---------- */
.overlay{
  position:fixed;inset:0;z-index:90;background:var(--encre);color:var(--neige);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;
  padding-left:clamp(28px,10vw,160px);
  transform:translateX(-101%);visibility:hidden;
  transition:transform .8s var(--expo),visibility 0s linear .8s;
}
.overlay.open{transform:translateX(0);visibility:visible;transition:transform .8s var(--expo)}
.overlay ::selection{background:var(--neige);color:var(--encre)}
.overlay .close{position:absolute;top:22px;right:28px;font-family:var(--mono);font-size:12px;color:var(--neige)}
.overlay .close:hover{text-decoration:underline;text-underline-offset:4px}
.overlay nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.overlay nav a{
  font-size:clamp(26px,3.4vw,38px);font-weight:300;letter-spacing:.01em;
  position:relative;padding-left:0;transition:padding-left .8s var(--expo),opacity .3s;opacity:.85;
}
.overlay nav a::before{
  content:"—";position:absolute;left:-44px;opacity:0;
  transition:left .8s var(--expo),opacity .3s;
}
.overlay nav a:hover{opacity:1;padding-left:52px}
.overlay nav a:hover::before{left:0;opacity:1}
.overlay .social{margin-top:40px;display:flex;gap:18px;font-family:var(--mono);font-size:11.5px;opacity:.6}
.overlay .social a:hover{text-decoration:underline;text-underline-offset:3px}

/* aperçu de page au survol des liens du menu */
.overlay .preview{
  position:absolute;right:clamp(28px,6vw,90px);top:50%;translate:0 -50%;
  width:min(38vw,560px);aspect-ratio:4/3;overflow:hidden;pointer-events:none;
}
.overlay .preview img{
  width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);
  transition:opacity .4s ease-out,transform .8s var(--expo);
}
.overlay .preview.show img{opacity:1;transform:scale(1)}
@media(max-width:900px){.overlay .preview{display:none}}

/* index : image flottante qui suit le curseur */
.row-preview{
  position:fixed;left:0;top:0;z-index:80;width:300px;height:220px;
  pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s ease-out;
  transform:translate3d(var(--px,-400px),var(--py,-400px),0);will-change:transform;
}
.row-preview img{width:100%;height:100%;object-fit:cover}
.row-preview.on{opacity:1}
@media(hover:none),(prefers-reduced-motion:reduce){.row-preview{display:none}}

/* ---------- tranches verticales ---------- */
.edge-label,.edge-social{
  position:fixed;left:14px;z-index:40;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--encre-35);
}
.edge-label{top:50%;translate:0 -50%}
.edge-social{bottom:24px;display:flex;gap:14px}
.edge-social a:hover{color:var(--encre)}
@media(max-width:1100px){.edge-label,.edge-social{display:none}}

/* ---------- page ---------- */
main{padding:120px 64px 0;max-width:1560px;margin:0 auto}
@media(max-width:760px){main{padding:108px 20px 0}}

/* H1 discret — règle 02 : jamais un héro */
.h1-discret{
  font-size:13px;font-weight:400;color:var(--encre-60);
  max-width:58ch;margin-bottom:64px;
}

/* ---------- flux collage — règles 03 / 04 / 05 ---------- */
.flux{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.flux > *{grid-column:var(--c,1/-1)}
.flux figure{margin-top:var(--mt,0);position:relative}
.flux figure a{display:block}
.flux figure img{
  width:100%;filter:grayscale(1);transition:filter .3s ease;
}
.flux figure:hover img{filter:grayscale(0)}
/* légende d'accroche : révélation étagée au survol (emprunt assumé à vincenteschalier.com) */
.flux figcaption{padding-top:12px;opacity:0;transition:opacity .4s ease-out} /* repli si JS absent */
.flux figure:hover figcaption,
.flux figure:focus-within figcaption{opacity:1}
.flux figcaption .ti,
.flux figcaption .su{
  display:block;opacity:0;transform:translateY(12px);
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.flux figcaption .ti{
  font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.3vw,32px);
  line-height:1.05;letter-spacing:-.01em;color:var(--encre);
}
.flux figcaption .su{
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.35;
  color:var(--encre-60);margin-top:7px;
}
.flux figure:hover figcaption .ti,
.flux figure:focus-within figcaption .ti{opacity:1;transform:translateY(0)}
.flux figure:hover figcaption .su,
.flux figure:focus-within figcaption .su{opacity:1;transform:translateY(0);transition-delay:.12s}
@media(hover:none){
  .flux figure img{filter:none}
  .flux figcaption{opacity:1}
  .flux figcaption .ti,.flux figcaption .su{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .flux figcaption .ti,.flux figcaption .su{transform:none;transition:opacity .3s ease}
}
.flux .gap{height:1px}

/* apparition au scroll : .8s expo, montée 24px */
.rv{opacity:0;translate:0 24px;transition:opacity .8s var(--expo),translate .8s var(--expo);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;translate:0 0;transition:none}
  .flux figure img{transition:none}
}

/* intercalaires — règle 06 : texte nu sur le blanc */
.inter{
  margin-top:var(--mt,0);align-self:center;
  font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--encre-60);
}
.inter a{color:var(--encre)}
.inter a:hover{text-decoration:underline;text-underline-offset:3px}
.inter .clocks{display:flex;gap:30px;margin-top:6px}
.inter .clocks .t{font-size:20px;color:var(--encre);letter-spacing:.04em;display:block}
.inter .encours{color:var(--brique)}
.inter blockquote{
  font-family:var(--sans);font-size:16.5px;line-height:1.55;font-weight:400;
  color:var(--encre);font-style:italic;margin-bottom:8px;
}

/* ancres de sections du flux */
.flux-sect{grid-column:1/-1;padding-top:88px;margin-top:-44px}

/* ---------- micro-footer — écart assumé ---------- */
.micro-footer{
  margin-top:110px;border-top:var(--hair);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 28px 30px;font-family:var(--mono);font-size:11px;color:var(--encre-60);
}
.micro-footer a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}

/* ---------- registre — règle 10 : index brut ---------- */
.recherche{
  font-family:var(--mono);font-size:12.5px;display:block;width:280px;
  background:none;border:0;border-bottom:var(--hair);padding:6px 0;color:var(--encre);
  margin-bottom:46px;outline:none;
}
.recherche::placeholder{color:var(--encre-35)}
.recherche:focus{border-bottom-color:var(--encre)}
table.registre{width:100%;border-collapse:collapse}
table.registre th{
  text-align:left;font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60);
  border-bottom:1px solid var(--encre);padding:0 18px 9px 0;
}
table.registre td{border-bottom:var(--hair);padding:12px 18px 12px 0;font-size:13px}
table.registre td.an{font-family:var(--mono);font-size:11.5px;color:var(--encre-60)}
table.registre td.type{color:var(--encre-60)}
table.registre tr[data-href]{cursor:pointer}
table.registre tr[data-href]:hover td{background:var(--neige-2)}

/* ---------- fiche projet — règle 09 : le grand moment ---------- */
.proj-nav{
  display:flex;justify-content:space-between;gap:18px;
  font-family:var(--mono);font-size:11.5px;color:var(--encre-60);margin-bottom:72px;
}
.proj-nav a:hover,.proj-nav button:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.proj-nav .bascule{display:flex;gap:14px}
.proj-nav .bascule a.on{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.proj-id h1{
  font-weight:500;font-size:clamp(46px,8.6vw,118px);line-height:.98;letter-spacing:-.02em;
}
.proj-id h1 .l2{display:block;font-weight:300;margin-left:.9em}
.proj-id h2{font-size:15px;font-weight:400;color:var(--encre-60);margin-top:22px}
.proj-meta{
  margin-top:30px;padding-top:16px;border-top:var(--hair);
  font-size:13.5px;line-height:2;max-width:78ch;
}
.proj-meta b{font-weight:700}
.proj-meta .sep{opacity:.3;padding:0 .5em}
.galerie{margin-top:74px;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.galerie > figure{grid-column:var(--c,1/-1);margin-top:var(--mt,64px);position:relative}
.galerie img{width:100%}
.galerie figcaption{
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:11px;color:var(--encre-60);padding-top:8px;
}
.pin{font-family:var(--mono);font-size:11px;color:var(--encre-60);white-space:nowrap}
.pin .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brique);margin-right:6px;vertical-align:1px}
.pin:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.proj-infos{margin-top:96px;max-width:64ch}
.proj-infos dl{font-size:13.5px;line-height:2.1}
.proj-infos dt{display:inline;color:var(--encre-60)}
.proj-infos dd{display:inline;font-weight:700;margin-right:1.6em}
.plus-bloc{margin-top:40px}
.plus-bloc .plus{font-family:var(--mono);font-size:22px;transition:transform .3s,color .2s;display:inline-block}
.plus-bloc .plus:hover{color:var(--brique)}
.plus-bloc .plus.open{transform:rotate(45deg)}
.plus-bloc .texte{display:none;margin-top:22px}
.plus-bloc .texte.show{display:block}
.plus-bloc .texte p{margin-bottom:1.2em;max-width:62ch}
.decouvrez{margin-top:110px}
.decouvrez .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.decouvrez .liés{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
@media(max-width:760px){.decouvrez .liés{grid-template-columns:1fr}}

/* ---------- studio ---------- */
.manifeste{
  max-width:54ch;margin:40px auto 0;text-align:center;
  font-size:17px;line-height:2;font-weight:400;
}
.studio-photo{margin-top:80px}
.studio-photo img{width:100%}
.fondateurs{margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:760px){.fondateurs{grid-template-columns:1fr}}
.fondateurs .nom{font-weight:700;font-size:14px}
.fondateurs .role{font-family:var(--mono);font-size:11px;color:var(--encre-60);margin:4px 0 12px}
.fondateurs p{color:var(--encre-60);font-size:12.5px}
.collabs{margin-top:54px;font-size:13px;line-height:2.15;column-count:2;column-gap:48px;max-width:760px}
@media(max-width:760px){.collabs{column-count:1}}
.collabs .role{color:var(--encre-60);font-family:var(--mono);font-size:11px}
.recit{margin-top:96px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.recit{grid-template-columns:1fr}}
.recit p{margin-bottom:1.3em;color:var(--encre-60);max-width:54ch}
.recit h2,.sect-k{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-60);margin-bottom:20px;
}
.distinctions{margin-top:96px}
.distinctions li{
  list-style:none;border-bottom:var(--hair);padding:11px 0;font-size:13.5px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
}
.distinctions .an{font-family:var(--mono);font-size:11.5px;color:var(--encre-60);min-width:44px}
.distinctions a:hover{text-decoration:underline;text-underline-offset:3px}
.distinctions .proj{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--encre-60)}
.ordres{margin-top:72px;font-family:var(--mono);font-size:11.5px;line-height:2.2;color:var(--encre-60)}

/* ---------- presse — mur de parutions ---------- */
.presse-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.presse-grille figure{grid-column:var(--c,span 4);margin-top:var(--mt,0);position:relative}
.presse-grille figure a{display:block;position:relative}
.presse-grille figure img{
  width:100%;height:var(--h,320px);object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .3s ease;
}
.presse-grille figure:hover img{filter:grayscale(0)}
/* nameplate de la publication, posé en surimpression sur l'image (fausse une) */
.presse-grille .cover-name{
  position:absolute;left:0;right:0;padding:0 20px;color:#fff;pointer-events:none;
  font-family:var(--sans);font-weight:700;line-height:.95;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,40px);
}
.presse-grille .cn-top{top:22px}
.presse-grille .cn-bottom{bottom:22px}
.presse-grille .cn-center{top:50%;transform:translateY(-50%);text-align:center}
.presse-grille .cn-mono{
  font-family:var(--mono);font-weight:400;letter-spacing:0;text-transform:lowercase;
  font-size:clamp(15px,1.9vw,24px);
}
/* légende mono, visible au repos — la métadonnée orne (règle 07) */
.presse-grille figcaption{
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--encre-60);padding-top:8px;
}
.presse-grille figcaption a{color:var(--encre-60)}
.presse-grille figure:hover figcaption a{color:var(--encre)}
@media(hover:none){.presse-grille figure img{filter:none}}
@media(max-width:1000px){.presse-grille figure{grid-column:span 6!important}}
@media(max-width:640px){.presse-grille figure{grid-column:1/-1!important;margin-top:46px!important}}
.contact-presse{margin-top:80px;font-family:var(--mono);font-size:12px;color:var(--encre-60)}
.contact-presse a{color:var(--encre)}
.contact-presse a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- privé ---------- */
.porte{min-height:46vh;display:flex;flex-direction:column;justify-content:center;max-width:46ch;margin:0 auto;text-align:center}
.porte h1{font-size:15px;font-weight:500;letter-spacing:.04em}
.porte p{color:var(--encre-60);margin-top:14px}
.porte form{margin-top:40px;display:flex;gap:26px;justify-content:center;align-items:baseline;flex-wrap:wrap}
.porte input{
  font-family:var(--mono);font-size:12.5px;background:none;border:0;
  border-bottom:var(--hair);padding:6px 0;width:240px;color:var(--encre);outline:none;text-align:center;
}
.porte input:focus{border-bottom-color:var(--encre)}
.porte button[type=submit]{font-family:var(--mono);font-size:12px}
.porte button[type=submit]:hover{color:var(--brique);text-decoration:underline;text-underline-offset:4px}
.porte .demo{margin-top:64px;font-family:var(--mono);font-size:10.5px;color:var(--encre-35)}
.porte .demo:hover{color:var(--encre)}
.espace{display:none}
.espace.open{display:block}
.espace .salut{font-size:15px;margin-bottom:48px}
.chantiers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.chantiers{grid-template-columns:1fr}}
.chantiers figure img{width:100%}
.chantiers figcaption{font-family:var(--mono);font-size:11px;color:var(--encre-60);padding-top:8px;display:flex;justify-content:space-between;gap:10px}
.chantiers .maj{color:var(--brique)}
.docs{margin-top:46px;font-family:var(--mono);font-size:12px;line-height:2.2}
.docs a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- divers ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.page-title{font-size:15px;font-weight:500;margin-bottom:46px}

/* header mobile */
@media(max-width:900px){
  .anchors{display:none}
  .site-head{padding:16px 20px 10px}
}

/* flux mobile : empilement pleine largeur, retraits alternés */
@media(max-width:760px){
  .flux > figure,.flux > .inter{grid-column:1/-1!important;margin-top:46px!important}
  .flux > figure:nth-of-type(3n){padding-left:13%}
  .flux > figure:nth-of-type(3n+2){padding-right:13%}
  .flux > figure:first-of-type{margin-top:0!important}
  .galerie > figure{grid-column:1/-1!important;margin-top:42px!important}
}