/* ============================================================
   SOBARY — site.css
   Système « Cadre » : repères de recadrage laiton, Space Grotesk 600,
   IBM Plex Mono pour les labels/données, grain léger.
   Le laiton est réservé aux sceaux (repères, numéros, filets) —
   jamais en aplat de texte courant.
   ============================================================ */

:root{
  --pierre:#E5E4E0; --encre:#16171A; --ardoise:#3A4A4F; --laiton:#9A8259;
  --muted:#5A5C60; --line:rgba(22,23,26,0.14);
  --encre-deep:#111214; --bg-deep:#14161A; --accent-live:#4E6A70;
  --pierre-dim:#A8AAAE; --line-dark:rgba(229,228,224,0.16);
  --display:"Space Grotesk",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
html.lenis-on{scroll-behavior:auto} /* Lenis prend la main */
body{
  background:var(--pierre);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;
}
::selection{background:var(--encre);color:var(--pierre)}
ul,ol{list-style:none}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ardoise);outline-offset:4px}

/* — lien d'évitement — */
.skip{
  position:fixed;top:12px;left:12px;z-index:100;
  background:var(--encre);color:var(--pierre);
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;
  padding:10px 16px;text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(24px,6vw,72px)}

/* — grain (matière, très léger) — */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:0.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* — repères de recadrage (viewport) — */
.viewport-marks{position:fixed;inset:14px;pointer-events:none;z-index:70}
.vm{position:absolute;width:18px;height:18px}
.vm::before,.vm::after{content:"";position:absolute;background:var(--laiton)}
.vm::before{width:100%;height:1px}
.vm::after{width:1px;height:100%}
.vm.tl{top:0;left:0}
.vm.tr{top:0;right:0;transform:scaleX(-1)}
.vm.bl{bottom:0;left:0;transform:scaleY(-1)}
.vm.br{bottom:0;right:0;transform:scale(-1)}
.vm.tl::before,.vm.tr::before,.vm.bl::before,.vm.br::before{top:0;left:0}
.vm.tl::after,.vm.tr::after,.vm.bl::after,.vm.br::after{top:0;left:0}

/* — repères autour des blocs clés — */
.cadre{position:relative}
.cadre::before,.cadre::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
}
.cadre::before{
  top:-9px;left:-9px;
  border-top:1px solid var(--laiton);border-left:1px solid var(--laiton);
}
.cadre::after{
  bottom:-9px;right:-9px;
  border-bottom:1px solid var(--laiton);border-right:1px solid var(--laiton);
}

/* — utilitaires typographiques — */
.mono{font-family:var(--mono);font-weight:400}
.label{
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.label .num{color:var(--laiton);margin-right:1.2em}

/* — header — */
.site-header{padding-top:clamp(24px,4vw,40px)}
.bar{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:18px;
}
.wordmark{
  font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:0.42em;text-decoration:none;
}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:0.08em}
.lang a{text-decoration:none;color:var(--muted);padding:4px 2px}
.lang a[aria-current="page"]{color:var(--encre)}
.site-nav{margin-left:auto;margin-right:clamp(24px,4vw,52px);font-family:var(--mono);font-size:12px;letter-spacing:0.12em}
.site-nav a{text-decoration:none;color:var(--muted);padding:4px 2px}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--encre)}
.lang-sep{color:var(--line);margin-inline:6px}

/* — hero — */
.hero{padding-top:clamp(72px,14vh,160px);padding-bottom:clamp(64px,12vh,140px)}
.eyebrow{
  font-size:12px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(36px,6vh,64px);
}
.thesis{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,7.4vw,88px);line-height:1.05;letter-spacing:-0.02em;
}
.thesis .line{display:block}
.subline{
  font-size:clamp(18px,2.1vw,23px);line-height:1.45;color:var(--muted);
  max-width:52ch;margin-top:clamp(32px,5vh,52px);
}
/* — champ de transmission : visible seulement si le JS est là — */
.field-frame{display:none}
.hero.field-on .field-frame{
  display:block;position:relative;
  margin-top:clamp(48px,8vh,84px);
  border:1px solid var(--line);
  height:clamp(200px,30vh,320px);
  overflow:hidden;
}
.field-canvas{display:block;width:100%;height:100%}

/* — sections — */
main section{padding-block:clamp(56px,10vh,120px)}
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(24px,5vw,80px);align-items:start;
  border-top:1px solid var(--line);
}
.split .label{padding-top:6px}
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.5vw,28px);line-height:1.42;letter-spacing:-0.01em;
  max-width:56ch;
}

/* — le modèle : registre sombre « salle des machines » — */
.model-section{
  background:var(--bg-deep);color:var(--pierre);
  padding-block:clamp(72px,12vh,140px);
  margin-block:clamp(24px,4vh,48px);
}
.model-section .label{color:var(--pierre-dim)}
.model-section .wrap>.label{margin-bottom:clamp(20px,3vh,28px)}
.model-sub{
  font-size:clamp(17px,1.9vw,21px);color:var(--pierre-dim);
  max-width:52ch;margin-bottom:clamp(48px,7vh,72px);
}
.model{max-width:760px;margin-inline:auto}
.model.cadre::before,.model.cadre::after{width:20px;height:20px}
.model-section .op-block{border-color:var(--line-dark)}
.model-section .op-label,
.model-section .layer-body p,.model-section .model-legend{color:var(--pierre-dim)}
.model-operators{display:flex;flex-direction:column}
.op-block{
  border:1px solid var(--line);padding:clamp(16px,2.5vw,24px);
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:24px;row-gap:4px;
}
.op-title{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.8vw,19px)}
.op-link{
  display:flex;align-items:center;gap:14px;
  padding-block:6px;margin-left:clamp(18px,3vw,28px);
}
.op-arrow{width:18px;height:52px;stroke:var(--laiton);stroke-width:1.2;flex:none}
.op-label{
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
}
/* Couches : ordre DOM = lecture montante (socle → création → détention),
   column-reverse = la détention s’affiche en haut, le socle porte le tout. */
.layers{display:flex;flex-direction:column-reverse}
.layer{
  position:relative;
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:clamp(12px,2vw,24px);align-items:start;
  border:1px solid var(--line-dark);border-bottom:none;
  padding:clamp(18px,3vw,28px);
}
/* le socle : filet laiton en base — la fondation du modèle */
.layers .layer:first-child{border-bottom:1px solid var(--laiton)}
/* flux montant : chevrons laiton aux frontières entre couches */
.layer[data-layer="1"]::after,.layer[data-layer="2"]::after{
  content:"";position:absolute;top:-5px;left:50%;
  width:9px;height:9px;background:var(--bg-deep);
  border-top:1px solid var(--laiton);border-left:1px solid var(--laiton);
  transform:translateX(-50%) rotate(45deg);
}
.layer-num{font-size:12px;letter-spacing:0.1em;color:var(--laiton);padding-top:4px}
.layer-body h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,2.1vw,22px);letter-spacing:-0.01em;margin-bottom:6px;
}
.layer-body p{color:var(--muted);font-size:clamp(14px,1.5vw,16px);max-width:56ch}
.model-legend{
  margin-top:clamp(20px,3vh,28px);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
}

/* — capacités / participations — */
.group .label{margin-bottom:clamp(28px,4vh,44px)}
.rows .row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,5vw,72px);align-items:baseline;
  padding-block:clamp(24px,3.5vh,36px);border-top:1px solid var(--line);
}
.rows .row:last-child{border-bottom:1px solid var(--line)}
@media (hover:hover){
  .rows .row{transition:padding-left 0.4s var(--ease-out)}
  .rows .row:hover{padding-left:14px}
  .rows .row:hover h3{color:var(--ardoise);transition:color 0.3s ease}
}
.row h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;line-height:1.15;
}
.row p{color:var(--muted);font-size:clamp(15px,1.5vw,17px);max-width:44ch}
.row .tag{
  display:block;margin-top:10px;
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--encre);
}
.note{
  margin-top:clamp(20px,3vh,28px);color:var(--muted);
  font-size:clamp(15px,1.5vw,17px);
}

/* — contact — */
.contact{display:flex;flex-direction:column;gap:clamp(20px,3vh,28px);border-top:1px solid var(--line)}
.contact-line{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4.4vw,48px);line-height:1.12;letter-spacing:-0.015em;max-width:22ch;
}
.mailto{
  color:var(--encre);text-decoration:none;width:max-content;max-width:100%;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  font-size:clamp(17px,1.9vw,21px);
  transition:border-color 0.3s ease,color 0.3s ease;
}
.mailto:hover,.mailto:focus-visible{border-color:var(--ardoise);color:var(--ardoise)}

/* — footer — */
.site-footer{border-top:1px solid var(--line);padding-block:32px 44px}
.foot{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center}
.foot .mono{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}

/* — responsive — */
@media (max-width:540px){
  /* la thèse se répartit naturellement, sans découpage forcé */
  .thesis .line{display:inline}
}
@media (max-width:720px){
  body{font-size:16px}
  .split{grid-template-columns:1fr;gap:18px}
  .rows .row{grid-template-columns:1fr;gap:8px}
  .layer{grid-template-columns:40px minmax(0,1fr)}
  .op-arrow{height:44px}
}