/* ==========================================================================
   TS FRANCE — Avant-garde gallery / full-bleed portfolio
   Studio d'architecture intérieure & agencement
   Near-black + off-white + deep vermilion · oversized condensed display type
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --black:        #0a0a0a;
  --black-2:      #111111;
  --black-soft:   #161616;
  --black-raise:  #1f1f1f;
  --paper:        #f2ede4;
  --paper-soft:   #e7dfd1;
  --ink-on-dark:  #f2ede4;
  --ink-on-paper: #0a0a0a;

  --accent:       #ff3b1f;   /* deep vermilion */
  --accent-deep:  #c92a10;
  --accent-soft:  rgba(255,59,31,.16);

  --muted-dark:   #8f8b81;
  --muted-paper:  #6b655b;

  --line-dark:    rgba(242,237,228,.16);
  --line-paper:   rgba(10,10,10,.16);

  --font-display: "Archivo Black", "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-head:    "Archivo", "Arial Narrow", "Arial", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --rail: 92px;
  --maxw: 1560px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4rem, 9vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:300;
  font-size: clamp(1rem, .4vw + .85rem, 1.075rem);
  line-height:1.66;
  color:var(--ink-on-dark);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.015em;
}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
main{margin-top:64px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Inverted bands */
.band--paper{background:var(--paper);color:var(--ink-on-paper)}
.band--paper .muted,.band--paper .index,.band--paper .kicker{color:var(--muted-paper)}
.band--paper .rule{border-color:var(--line-paper)}
.band--soft{background:var(--black-soft);color:var(--ink-on-dark)}
.band--raise{background:var(--black-raise);color:var(--ink-on-dark)}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.86;
  text-transform:uppercase;
  font-size:clamp(2.8rem, 11vw, 11rem);
}
.display .accent{color:var(--accent)}
.h1{font-size:clamp(2.4rem, 7vw, 6rem);text-transform:uppercase;line-height:.9}
.h2{font-size:clamp(1.8rem, 4.6vw, 4.2rem);text-transform:uppercase;line-height:.92}
.h3{font-size:clamp(1.1rem, 2vw, 1.5rem);text-transform:uppercase}
.lead{font-size:clamp(1.1rem, 1.4vw, 1.4rem);line-height:1.55;color:var(--muted-dark);font-weight:300;max-width:64ch}
.band--paper .lead{color:var(--muted-paper)}
.muted{color:var(--muted-dark)}
.accent{color:var(--accent)}
.highlight{color:var(--ink-on-dark);font-weight:400}
.band--paper .highlight{color:var(--ink-on-paper)}

.kicker{
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
}
.index{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-dark);
}
.rule{
  border:0;
  height:1px;
  background:var(--line-dark);
  margin-block:clamp(1.5rem,3vw,2.5rem);
}
.u-gap{margin-top:clamp(1rem,2.5vw,2.25rem)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-head);
  font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.95rem 1.7rem;
  border-radius:0;
  border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
  line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--solid{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--ghost{border-color:var(--line-dark);color:inherit}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--paper{background:var(--paper);color:var(--black)}
.btn--paper:hover{background:#fff}
.band--paper .btn--ghost{border-color:var(--line-paper);color:inherit}
.band--paper .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--lg{padding:1.15rem 2.3rem;font-size:.98rem}
.btn--sm{padding:.62rem 1.1rem;font-size:.72rem}
.btn .arrow{transition:transform .3s var(--ease);font-family:var(--font-body);font-weight:300}
.btn:hover .arrow{transform:translateX(5px)}

.tlink{
  border-bottom:1px solid var(--accent);
  padding-bottom:.1rem;
  transition:color .3s, border-color .3s;
}
.tlink:hover{color:var(--accent);border-color:var(--accent-deep)}

/* ==========================================================================
   Fixed left wordmark + fullscreen menu overlay
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:0 var(--pad);
  background:var(--black);
  border-bottom:1px solid var(--line-dark);
}
.wordmark{display:inline-flex;align-items:baseline;gap:.7rem}
.wordmark__mark{
  font-family:var(--font-display);font-weight:400;
  font-size:1.35rem;letter-spacing:.02em;line-height:1;
  color:var(--accent);
}
.wordmark__word{
  font-family:var(--font-display);font-weight:400;
  font-size:1.1rem;letter-spacing:.24em;text-transform:uppercase;line-height:1;
}
.wordmark__tag{display:none}

.menu-toggle{display:inline-flex;align-items:center;gap:.8rem}
.menu-toggle__text{
  font-family:var(--font-head);font-weight:600;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-on-dark);
}
.menu-toggle__icon{display:grid;gap:8px}
.menu-toggle__icon span{display:block;width:28px;height:2px;background:currentColor;transition:transform .3s var(--ease), opacity .3s}
.menu-toggle:hover{color:var(--accent)}
.menu-toggle.is-open .menu-toggle__icon span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle.is-open .menu-toggle__icon span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.menu-toggle.is-open .menu-toggle__text{color:var(--accent)}

/* ---------- Header actions + language switcher ---------- */
.header__actions{display:flex;align-items:center;gap:1.25rem}
.lang-switch{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-head);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  line-height:1;
}
.lang-switch__link{color:var(--muted-dark);transition:color .3s}
.lang-switch__link:hover{color:var(--accent)}
.lang-switch__link.is-active{color:var(--accent)}
.lang-switch__sep{color:var(--muted-dark);opacity:.45}

.menu-overlay{
  position:fixed;inset:0;z-index:99;
  background:var(--black);color:var(--ink-on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:5.5rem var(--pad) 2.5rem;
  transform:translateX(-102%);
  transition:transform .55s var(--ease);
  overflow-y:auto;
}
.menu-overlay.is-open{transform:none}
.menu-overlay__list{width:100%;max-width:1100px}
.menu-overlay__list a{
  display:flex;align-items:baseline;gap:1.3rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--line-dark);
}
.menu-overlay__num{
  font-family:var(--font-body);font-weight:300;font-size:.72rem;
  letter-spacing:.1em;color:var(--muted-dark);min-width:2.2rem;
}
.menu-overlay__lbl{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem, 8vw, 5rem);line-height:.95;letter-spacing:-.015em;
  transition:color .3s, transform .3s var(--ease);
}
.menu-overlay__list a:hover .menu-overlay__lbl{color:var(--accent);transform:translateX(.4rem)}
.menu-overlay__list a:hover .menu-overlay__num{color:var(--accent)}
.menu-overlay__list a.is-active .menu-overlay__lbl,
.menu-overlay__list a.is-active .menu-overlay__num{color:var(--accent)}
.menu-overlay__foot{
  margin-top:clamp(2.5rem,6vh,4rem);
  color:var(--muted-dark);font-size:.85rem;line-height:1.7;
}

/* ==========================================================================
   Placeholder imagery (no external files — CSS + inline SVG)
   ========================================================================== */
.ph{
  --p1:#33291f;--p2:#0e0c0a;
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--p1) 0%,var(--p2) 75%);
  aspect-ratio:4/3;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 74% 16%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.62), transparent 46%);
}
.ph::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0V44' fill='none' stroke='%23f2ede4' stroke-opacity='.28' stroke-width='.6'/%3E%3C/svg%3E");
  background-size:44px 44px;
  mix-blend-mode:overlay;opacity:.5;
}
.ph.is-light{--p1:#efe9dd;--p2:#c6bdae}
.ph.is-light::before{
  background:
    radial-gradient(120% 90% at 74% 16%, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.28), transparent 46%);
}
.ph.is-light::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0V44' fill='none' stroke='%230a0a0a' stroke-opacity='.2' stroke-width='.6'/%3E%3C/svg%3E")}
/* palettes */
.ph--ember{--p1:#9a341f;--p2:#1f0a05}
.ph--ochre{--p1:#b98a3c;--p2:#241505}
.ph--sage{--p1:#5f7a5a;--p2:#101d10}
.ph--plum{--p1:#5b3b63;--p2:#140a18}
.ph--steel{--p1:#3a4a5c;--p2:#070b10}
.ph--sand{--p1:#c9b08c;--p2:#20180f}
.ph--vermilion{--p1:#c23019;--p2:#1c0803}
.ph--graphite{--p1:#4a4a4a;--p2:#0b0b0b}
.ph--olive{--p1:#6b6b2e;--p2:#131307}
.ph--lilac{--p1:#7a5f86;--p2:#150d18}
/* ratios */
.ph--tall{aspect-ratio:3/4}
.ph--wide{aspect-ratio:16/9}
.ph--banner{aspect-ratio:21/9}
.ph--sq{aspect-ratio:1/1}
/* textures */
.ph--lines::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 26L26 0M-6 6L6 -6M20 32L32 20' stroke='%23f2ede4' stroke-opacity='.18' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size:26px 26px;
}
.ph--dots::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.2' fill='%23f2ede4' fill-opacity='.3'/%3E%3C/svg%3E");
  background-size:22px 22px;
}
.ph__label{
  position:absolute;left:1.25rem;bottom:1rem;z-index:2;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.9rem;
  color:var(--paper);
}
.ph.is-light .ph__label{color:var(--black)}
.ph__num{
  position:absolute;right:1.25rem;top:1rem;z-index:2;
  font-family:var(--font-display);font-weight:400;font-size:1.5rem;
  color:var(--paper);opacity:.9;
}

/* ==========================================================================
   Home — folio intro + full-bleed project panels
   ========================================================================== */
.folio-intro{
  position:relative;
  min-height:calc(100svh - 64px);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
}
.folio-intro::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255,59,31,.16), transparent 52%),
    var(--black);
}
.folio-intro__inner{padding:0 var(--pad) clamp(2.5rem,7vw,5rem);width:100%}
.folio-intro .kicker{display:block;margin-bottom:clamp(1.25rem,3vw,2.25rem)}
.folio-display{
  font-family:var(--font-display);font-weight:400;
  letter-spacing:-.02em;line-height:.82;text-transform:uppercase;
  font-size:clamp(3.4rem, 14vw, 15rem);
}
.folio-display .accent{color:var(--accent)}
.folio-intro__scroll{
  display:inline-flex;align-items:center;gap:.8rem;
  margin-top:clamp(2rem,5vw,3.5rem);
  font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted-dark);
}
.folio-intro__scroll::after{
  content:"";width:1px;height:44px;background:var(--accent);
  animation:scrollcue 1.8s var(--ease) infinite;
}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* panels */
.panel{display:block;position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.panel__visual{
  display:block;width:100%;min-height:clamp(54vh,70vh,700px);
  background:
    linear-gradient(160deg,var(--p1) 0%,var(--p2) 78%);
  position:relative;
}
.panel__visual::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(110% 80% at 74% 12%, rgba(255,255,255,.2), transparent 54%),
    linear-gradient(to top, rgba(0,0,0,.72), transparent 55%);
}
.panel__visual::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0V60' fill='none' stroke='%23f2ede4' stroke-opacity='.16' stroke-width='.5'/%3E%3C/svg%3E");
  background-size:60px 60px;
  mix-blend-mode:overlay;opacity:.5;
}
.panel--ochre{--p1:#b98a3c;--p2:#241505}
.panel--sage{--p1:#5f7a5a;--p2:#101d10}
.panel--plum{--p1:#5b3b63;--p2:#140a18}
.panel--steel{--p1:#3a4a5c;--p2:#070b10}
.panel--sand{--p1:#c9b08c;--p2:#20180f}
.panel--ember{--p1:#9a341f;--p2:#1f0a05}

.panel__caption{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  margin-top:calc(-1 * clamp(2.5rem, 8vw, 6rem));
  padding:0 var(--pad) clamp(2.25rem,6vw,4.5rem);
}
.panel--alt .panel__caption{align-items:flex-end;text-align:right}
.panel__index{
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(2rem,6vw,4.5rem);line-height:1;
  color:var(--accent);letter-spacing:.02em;
}
.panel__title{
  font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(3rem, 12vw, 11.5rem);
  line-height:.82;
  color:var(--ink-on-dark);
}
.panel__meta{
  margin-top:clamp(.5rem,1.5vw,1.25rem);
  font-family:var(--font-head);font-weight:600;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-dark);
}
.panel__cta{
  margin-top:clamp(.75rem,2vw,1.5rem);
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-on-dark);
  display:inline-flex;align-items:center;gap:.6rem;
}
.panel__cta .arrow{color:var(--accent);transition:transform .3s var(--ease)}
.panel:hover .panel__cta .arrow{transform:translateX(6px)}
.panel:hover .panel__title{color:var(--paper)}

/* clients strip */
.folio-clients{
  display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:center;margin-top:1.5rem;
}
.folio-clients span{
  font-family:var(--font-display);font-weight:400;
  letter-spacing:.02em;font-size:clamp(1.15rem,2.6vw,1.9rem);
  text-transform:uppercase;color:var(--muted-dark);
  transition:color .3s;
}
.folio-clients span:hover{color:var(--accent)}

/* full-bleed CTA band */
.cta-band{background:var(--accent);color:var(--ink-on-dark)}
.cta-band .display{font-size:clamp(2.8rem,9vw,8rem)}
.cta-band .lead{color:rgba(242,237,228,.8)}
.cta-band .btn--paper{color:var(--ink-on-paper)}

/* ==========================================================================
   Before / after slider
   ========================================================================== */
.ba{
  position:relative;overflow:hidden;
  border:1px solid var(--line-dark);aspect-ratio:16/9;
  cursor:ew-resize;user-select:none;touch-action:pan-y;
}
.ba__layer{position:absolute;inset:0}
.ba__layer--after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__layer .ph{width:100%;height:100%;aspect-ratio:auto}
.ba__divider{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:var(--paper);z-index:3;transform:translateX(-50%);
}
.ba__handle{
  position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);
  z-index:4;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:400;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.ba__tag{
  position:absolute;top:1rem;z-index:5;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:.68rem;letter-spacing:.18em;
  background:rgba(10,10,10,.82);color:var(--paper);padding:.45rem .85rem;
}
.ba__tag--before{left:1rem}
.ba__tag--after{right:1rem}

/* ==========================================================================
   Section heads
   ========================================================================== */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,4rem)}
.section-head .index{margin-bottom:.9rem;display:block}

/* ==========================================================================
   Feature split
   ========================================================================== */
.split{display:grid;gap:clamp(2rem,5vw,4rem)}
.split__media{min-width:0}
.split__body{display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.split__body p{color:var(--muted-dark);max-width:58ch}
.band--paper .split__body p{color:var(--muted-paper)}
.split__body .h2{margin-top:.25rem}

/* ==========================================================================
   Portfolio listing (gallery bands — no card grid)
   ========================================================================== */
.filterbar{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line-dark);padding-bottom:1rem}
.filterbar button{
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-dark);padding:.35rem 0;
  border:none;border-radius:0;
  position:relative;transition:color .3s;
}
.filterbar button::after{
  content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease);
}
.filterbar button:hover{color:var(--ink-on-dark);transform:none}
.filterbar button.is-active{color:var(--accent)}
.filterbar button.is-active::after{width:100%}

.grid--masonry{display:grid;grid-template-columns:1fr;gap:0}
.card{position:relative;display:block;border-bottom:1px solid var(--line-dark);padding-bottom:clamp(1.5rem,4vw,3rem)}
.card__media{position:relative;overflow:hidden}
.card__media .ph{transition:transform .7s var(--ease)}
.card:hover .card__media .ph{transform:scale(1.02)}
.card__media .ph{aspect-ratio:21/9}
.card--hero .card__media .ph{aspect-ratio:2/1}
.card__meta{
  display:flex;gap:1.6rem;flex-wrap:wrap;
  margin:0;
  padding:clamp(1rem,2.5vw,1.6rem) var(--pad) 0;
  font-family:var(--font-head);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.card h3{
  position:relative;z-index:2;
  margin-top:calc(-1 * clamp(1.4rem,4vw,3rem));
  padding:0 var(--pad);
  font-size:clamp(1.9rem,6vw,5rem);
  max-width:24ch;
  transition:color .3s;
}
.card:hover h3{color:var(--accent)}
.card .card__link{
  padding:0 var(--pad);margin-top:.75rem;
  color:var(--accent);font-size:.85rem;display:inline-flex;gap:.5rem;align-items:center;
  font-family:var(--font-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.card .card__link .arrow{transition:transform .3s var(--ease)}
.card:hover .card__link .arrow{transform:translateX(5px)}
.card .tag{
  position:absolute;top:1.2rem;left:1.4rem;z-index:3;
  font-family:var(--font-head);font-weight:600;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;background:var(--accent);color:var(--paper);
  padding:.45rem .8rem;
}
.card.is-hidden{display:none}

/* ==========================================================================
   Case study detail
   ========================================================================== */
.cs-hero{padding-top:clamp(4rem,8vw,6rem);padding-bottom:clamp(3rem,6vw,5rem)}
.cs-hero__grid{display:grid;gap:2rem}
.cs-hero .kicker a{color:var(--accent)}
.cs-facts{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.cs-fact{padding:clamp(1.5rem,3vw,2.5rem);border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.cs-fact__label{
  font-family:var(--font-head);font-weight:600;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);
}
.cs-fact__value{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,5vw,3.4rem);margin-top:.5rem;line-height:.9}
.cs-body{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.cs-body p{color:var(--muted-dark);max-width:66ch}
.cs-quote{
  font-family:var(--font-display);font-size:clamp(1.4rem,3.6vw,2.8rem);
  line-height:1.12;letter-spacing:-.015em;
  border-left:3px solid var(--accent);padding-left:clamp(1.25rem,3vw,2rem);
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-list{border-top:1px solid var(--line-dark)}
.service{
  display:grid;gap:1.1rem;
  padding-block:clamp(1.75rem,4vw,3rem);
  border-bottom:1px solid var(--line-dark);
}
.service .index{grid-row:1}
.service h3{font-size:clamp(1.6rem,5vw,3.4rem)}
.service p{color:var(--muted-dark);max-width:62ch}
.service ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:.7rem}
.service ul li{font-size:.88rem;color:var(--muted-dark)}
.service ul li::before{content:"— ";color:var(--accent)}

/* ==========================================================================
   Approche / process
   ========================================================================== */
.steps{border-top:1px solid var(--line-dark)}
.step{
  display:grid;gap:1rem;
  padding-block:clamp(1.75rem,4vw,3rem);
  border-bottom:1px solid var(--line-dark);
}
.step__num{
  font-family:var(--font-display);font-weight:400;
  color:var(--accent);font-size:1.15rem;letter-spacing:.02em;
}
.step h3{font-size:clamp(1.5rem,4.6vw,3rem)}
.step p{color:var(--muted-dark);max-width:62ch}
.step .muted{font-size:.88rem;font-style:italic}

/* ==========================================================================
   Studio / team
   ========================================================================== */
.founder{display:grid;gap:clamp(2rem,5vw,4rem)}
.founder__portrait{position:relative;overflow:hidden;border:1px solid var(--line-dark)}
.founder__portrait .ph{aspect-ratio:3/4}
.team-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.team-card{border:1px solid var(--line-dark);padding:1.6rem;transition:border-color .3s,transform .3s var(--ease)}
.team-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.team-card .index{display:block;margin-bottom:.85rem}
.team-card h3{font-size:1.15rem}
.team-card p{color:var(--muted-dark);font-size:.92rem;margin-top:.45rem}
.ubo{
  border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line-dark);
  padding:clamp(1.75rem,3vw,3rem) 0;
}
.ubo__label{color:var(--accent)}

/* ==========================================================================
   Actualites
   ========================================================================== */
.news{border-top:1px solid var(--line-dark)}
.news-item{
  display:grid;gap:.8rem;
  padding-block:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid var(--line-dark);
}
.news-item__meta{
  font-family:var(--font-head);font-weight:600;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.news-item h3{font-size:clamp(1.4rem,3.4vw,2.4rem)}
.news-item p{color:var(--muted-dark);max-width:70ch}
.news-item .lmore{
  margin-top:.3rem;color:var(--accent);font-weight:400;font-size:.9rem;
  display:inline-flex;gap:.4rem;align-items:center;
  font-family:var(--font-head);letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   Contact / form
   ========================================================================== */
.contact-grid{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.coord{display:grid;gap:1.5rem;align-content:start}
.coord__item{border-bottom:1px solid var(--line-dark);padding-bottom:1.2rem}
.coord__item .index{display:block;margin-bottom:.4rem}
.coord__item a{transition:color .3s}
.coord__item a:hover{color:var(--accent)}
.coord__item .muted{font-size:.9rem}
.coord__item .uco{border:1px solid var(--line-dark);padding:1.25rem}

.form{display:grid;gap:1.4rem}
.field{display:grid;gap:.5rem}
.field label{
  font-family:var(--font-head);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;color:inherit;
  border:1px solid var(--line-dark);border-radius:0;
  padding:1rem 1.1rem;
  font-family:inherit;font-size:1rem;font-weight:300;
  transition:border-color .3s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
}
.field select option{background:var(--black);color:var(--ink-on-dark)}
.form__row{display:grid;gap:1.4rem}
.form__note{font-size:.82rem;color:var(--muted-dark)}
.form__success{
  display:none;
  border:1px solid var(--accent);
  background:var(--accent-soft);
  padding:1.75rem;
}
.form__success.is-visible{display:block}
.form__success h3{color:var(--accent)}

/* ==========================================================================
   Metrics
   ========================================================================== */
.metrics{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.metric{
  padding:clamp(1.5rem,3.5vw,3rem);
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.metric__num{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.4rem,7vw,5.5rem);line-height:.9;letter-spacing:-.02em;
}
.metric__label{margin-top:.7rem;color:var(--muted-dark);font-size:.88rem}
.metric__num .unit{color:var(--accent);font-size:.45em;letter-spacing:0}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{max-width:860px}
.legal h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:clamp(2.75rem,5vw,3.75rem);text-transform:none;letter-spacing:-.01em;line-height:1.05}
.legal h3{font-size:1.1rem;margin-top:2rem;text-transform:none;letter-spacing:0}
.legal p,.legal li{color:var(--muted-dark)}
.legal ul,.legal ol{margin:1rem 0 1rem 1.25rem;display:grid;gap:.6rem}
.legal ul li::before{content:"— ";color:var(--accent)}
.legal ol{list-style:decimal;padding-left:1rem}
.legal ol li::before{content:none}
.legal a{color:var(--accent);text-decoration:underline}
.legal .highlight{color:var(--ink-on-dark);font-weight:400}
.legal blockquote{
  border-left:3px solid var(--accent);padding-left:1.25rem;
  margin:1.5rem 0;font-style:italic;color:var(--muted-dark);
}

/* ==========================================================================
   Footer (identity content unchanged — restyled)
   ========================================================================== */
.footer{
  border-top:1px solid var(--line-dark);
  background:var(--black-2);
  padding-top:clamp(3.5rem,7vw,5.5rem);
  padding-bottom:2rem;
}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.footer__brand .logo{display:inline-flex;align-items:center;gap:.7rem;line-height:1}
.logo__mark{
  font-family:var(--font-display);font-weight:400;font-size:1.15rem;
  color:var(--paper);background:var(--accent);padding:.45rem .5rem;
}
.logo__word{
  font-family:var(--font-display);font-weight:400;font-size:1.15rem;
  letter-spacing:.12em;text-transform:uppercase;
  display:flex;flex-direction:column;line-height:1;
}
.logo__word small{
  font-family:var(--font-body);font-weight:300;font-size:.55rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);margin-top:.4rem;
}
.footer__tagline{color:var(--muted-dark);max-width:42ch;margin-top:1.4rem;font-size:.94rem}
.footer__title{
  font-family:var(--font-head);font-weight:600;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.5rem;
}
.footer__list{display:grid;gap:.65rem;font-size:.92rem}
.footer__list a{color:var(--muted-dark);transition:color .3s}
.footer__list a:hover{color:var(--accent)}
.footer__meta{margin-top:1.4rem;font-size:.82rem;color:var(--muted-dark);line-height:1.8}
.footer__meta strong{color:var(--paper);font-weight:400}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.75rem;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:1.25rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-size:.8rem}
.footer__legal a{color:var(--muted-dark)}
.footer__legal a:hover{color:var(--accent)}
.footer__copy{font-size:.76rem;color:var(--muted-dark)}

/* ==========================================================================
   Cookie banner
   ========================================================================== */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:101;
  max-width:520px;
  background:var(--black-raise);
  border:1px solid var(--line-dark);
  border-left:3px solid var(--accent);
  padding:1.4rem 1.5rem;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.cookie-banner p{font-size:.88rem;color:var(--muted-dark);line-height:1.55}
.cookie-banner p a{color:var(--accent);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.6rem;margin-top:1.1rem}
.cookie-banner[hidden]{display:none}

/* ==========================================================================
   Reveal animations (JS present only)
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js [data-reveal].is-revealed{opacity:1;transform:none}
.js [data-reveal="scale"]{transform:scale(.96)}
.js [data-reveal="scale"].is-revealed{transform:none}

/* ==========================================================================
   Responsive — enhance up (rail at ≥900px)
   ========================================================================== */
@media (min-width:640px){
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metric{border-bottom:1px solid var(--line-dark);border-right:1px solid var(--line-dark)}
  .metric:last-child{border-right:1px solid var(--line-dark)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr 1fr}
  .cs-facts{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:900px){
  main{margin:0 0 0 var(--rail)}

  .site-header{
    top:0;right:auto;left:0;bottom:0;
    width:var(--rail);height:auto;
    flex-direction:column;justify-content:space-between;align-items:center;
    padding:1.7rem 0 1.5rem;
    border-bottom:none;border-right:1px solid var(--line-dark);
  }
  .wordmark{
    flex-direction:column;align-items:center;gap:.7rem;
    writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  }
  .wordmark__mark{font-size:1.25rem;letter-spacing:.06em}
  .wordmark__word{font-size:1rem;letter-spacing:.34em}
  .wordmark__tag{
    display:block;
    font-family:var(--font-body);font-weight:300;font-size:.56rem;
    letter-spacing:.3em;text-transform:uppercase;color:var(--muted-dark);
  }
  .menu-toggle{gap:.7rem;flex-direction:column;align-items:center}
  .menu-toggle__text{font-size:.62rem;letter-spacing:.3em}
  .header__actions{flex-direction:column;gap:1.1rem}

  .menu-overlay{padding:3rem calc(var(--rail) + var(--pad)) 3rem}

  .folio-intro{min-height:100svh}
  .split{grid-template-columns:1.05fr 1fr;align-items:center}
  .split--rev{grid-template-columns:1fr 1.05fr}
  .split--rev .split__media{order:2}
  .founder{grid-template-columns:.9fr 1.1fr;align-items:center}
  .contact-grid{grid-template-columns:.8fr 1.2fr}
  .cs-hero__grid{grid-template-columns:1.6fr 1fr;align-items:end}
  .service{grid-template-columns:120px 1fr;gap:2rem}
  .step{grid-template-columns:160px 1fr;gap:2rem}
  .news-item{grid-template-columns:220px 1fr;gap:2rem}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}

@media (min-width:1100px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  .folio-intro__scroll::after{animation:none}
}