/* ============================================================
   MAT-IA v2 — Design system
   Charte issue du hero direction B (Bord) étendue à tout le site.
   ============================================================ */

:root{
  /* Couleurs OKLCH — palette froide minimale */
  --paper: oklch(98% 0 0);
  --paper-2: oklch(96.5% 0.002 240);
  --paper-3: oklch(94% 0.003 240);
  --ink: oklch(15% 0.012 240);
  --ink-soft: oklch(28% 0.008 240);
  --ink-mute: oklch(45% 0.006 240);
  --line: oklch(85% 0.004 240);
  --hairline: oklch(90% 0.005 240);

  /* Typo */
  --serif: "Bricolage Grotesque", Garamond, serif;
  --sans: "Inter Tight", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Espacements */
  --safe: clamp(20px, 4.2vw, 56px);
  --maxw: 1280px;
  --maxw-prose: 720px;

  /* Animation */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html, body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{visibility:hidden;min-height:100vh}
body.ready{visibility:visible}
body.no-js{visibility:visible}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img, video{max-width:100%;display:block;height:auto}
ul, ol{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:8px;
  background:var(--ink);color:var(--paper);
  padding:8px 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  z-index:1000;
}
.skip:focus{left:8px}

/* Container & layout */
.wrap{padding:0 var(--safe)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--safe)}
.prose{max-width:var(--maxw-prose);margin:0 auto;padding:0 var(--safe)}

/* ============================================================
   HERO — partagé avec direction B (homepage uniquement)
   ============================================================ */

.stage{
  position:relative;width:100%;height:100svh;min-height:560px;
  overflow:hidden;background:var(--paper);isolation:isolate;
}
.stage--medium{height:72svh;min-height:480px}
.stage--small{height:54svh;min-height:380px}
.stage--inline{
  height:62svh;min-height:420px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
/* ============================================================
   VARIANTE SABLE — déclinaison home avec sable comme effet principal
   ============================================================ */

/* Hero variante sable : plein écran, sable foncé sur fond paper */
.stage--sand-hero{
  width:100%;height:100vh;min-height:600px;
  background:var(--paper);
}
.stage--sand-hero .sand{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;pointer-events:auto;cursor:crosshair;touch-action:pan-y;
}
/* Sur la stage sable hero, le pointer-events est neutralisé sur le contenu UI
   (sauf les CTAs) pour que le sable suive la souris partout. */
.stage--sand-hero .ui > *{pointer-events:none}
.stage--sand-hero .ui .cta{pointer-events:auto}

/* Mini-stage / divider sable inversée : fond ink, sable clair (paper) */
.stage--sand-inverted{
  background:var(--ink);color:var(--paper);
}
.stage--sand-inverted .sand{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;pointer-events:auto;cursor:crosshair;touch-action:pan-y;
}
.stage--sand-inverted .ui > *{pointer-events:none}
.stage--sand-inverted .ui .cta{pointer-events:auto}
/* Grain et vignette adaptés au fond ink */
.stage--sand-inverted .grain{
  mix-blend-mode:screen;opacity:.16;
  background-image:radial-gradient(rgba(250,250,250,.6) 1px,transparent 1px);
}
.stage--sand-inverted .vignette{
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%);
}

/* Stage CTA finale : grand bandeau sable inversé en bas de la home variante */
.stage--cta{
  height:78vh;min-height:520px;
  border-top:1px solid var(--ink);
}
.cta-final{
  display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);
  align-items:center;text-align:center;max-width:920px;
}
.cta-final__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(40px,7vw,108px);line-height:1.02;letter-spacing:-.022em;
  margin:0;
}
.cta-final__sub{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.2vw,18px);line-height:1.55;
  max-width:50ch;opacity:.85;margin:0;
}
.cta-final__buttons{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:8px;pointer-events:auto;
}
.cta--ghost{background:transparent;color:#fff;border-color:#fff;opacity:.78}
.cta--ghost:hover{opacity:1;background:transparent;color:#fff;border-color:#fff}

/* THEME SABLE GLOBAL — effet pixel sur les cards et composants secondaires */
.theme-sand .card{
  border-color:var(--ink);
  background-image:
    /* coins de pixels au repos */
    linear-gradient(to right, var(--ink) 0%, var(--ink) 8px, transparent 8px),
    linear-gradient(to right, transparent calc(100% - 8px), var(--ink) calc(100% - 8px)),
    linear-gradient(to bottom, var(--ink) 0%, var(--ink) 8px, transparent 8px),
    linear-gradient(to bottom, transparent calc(100% - 8px), var(--ink) calc(100% - 8px));
  background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position:top left, top right, top left, bottom left;
  background-repeat:no-repeat;
}
.theme-sand .card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:0;
  background-image:radial-gradient(rgba(10,10,14,.55) 1px,transparent 1px);
  background-size:5px 5px;
  transition:height .5s var(--ease);
  pointer-events:none;
}
.theme-sand .card{position:relative;overflow:hidden}
.theme-sand .card:hover::after{height:42%}
.theme-sand .card:hover .card__title{transform:translateX(4px)}
.theme-sand .card__title{transition:transform .35s var(--ease)}

/* THEME SABLE : sections--minimal et items prennent un look pixel discret */
.theme-sand .item{border-top-style:dashed;border-top-width:1px}
.theme-sand .kpi{border-right-style:dashed}

/* ============================================================
   THEME PIXEL — grille 12 colonnes avec bordures verticales NATURELLES.
   Les cards sont posées en grid 12-col sans gap, chacune span 4 (3 cards) ou
   span 3 (4 cards). Les bordures des cards forment des lignes verticales
   parfaitement alignées sur les multiples de 1/12 du container.
   Pas de pattern background avec calc bricolé.
   ============================================================ */
.theme-pixel-bg main{background-color:var(--paper)}

/* Cards en vraie grille 12-col, bordures qui se collapsent entre cards */
.theme-pixel-bg .cards{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.theme-pixel-bg .cards .card{
  grid-column:span 4;
  border:none;
  border-left:1px solid var(--hairline);
  background-image:none;
  transform:none !important;
  box-shadow:none;
}
.theme-pixel-bg .cards .card:hover{
  background-color:var(--paper-2);
  transform:none !important;
}
.theme-pixel-bg .cards .card:last-child{border-right:1px solid var(--hairline)}

/* 4 cards (section métier) → span 3 chacune */
.theme-pixel-bg #metier .cards .card{grid-column:span 3}

@media (max-width:1024px){
  .theme-pixel-bg .cards .card,
  .theme-pixel-bg #metier .cards .card{grid-column:span 6}
}
@media (max-width:600px){
  .theme-pixel-bg .cards .card,
  .theme-pixel-bg #metier .cards .card{grid-column:span 12}
}

/* Posts blog : également en grid 12-col, full-width avec bordures hairline */
.theme-pixel-bg .posts{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:0;
  border-top:1px solid var(--hairline);
}
.theme-pixel-bg .posts .post{
  grid-column:span 12;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  border-bottom:1px solid var(--hairline);
}
.theme-pixel-bg .posts .post .post__date{grid-column:span 2}
.theme-pixel-bg .posts .post .post__title{grid-column:span 8}
.theme-pixel-bg .posts .post .post__cat{grid-column:span 2;text-align:right}
@media (max-width:760px){
  .theme-pixel-bg .posts .post{grid-template-columns:1fr;gap:8px}
  .theme-pixel-bg .posts .post .post__date,
  .theme-pixel-bg .posts .post .post__title,
  .theme-pixel-bg .posts .post .post__cat{grid-column:span 1;text-align:left}
}

/* Container : on pose des verticales aux mêmes 12-col positions, mais en hairline
   très subtil, sur toute la hauteur du container. Le bg-image fait tomber les
   verticales pile sur les bordures des cards puisqu'elles partagent la même grille. */
.theme-pixel-bg .container{
  position:relative;
}
.theme-pixel-bg .container::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right, rgba(20,22,26,.045) 1px, transparent 1px);
  /* La cellule = (largeur intérieure du container) / 12.
     Les verticales tombent à 0/12, 1/12, ..., 12/12 du container intérieur. */
  background-size:calc((100% - 2 * var(--safe)) / 12) 100%;
  background-position:var(--safe) 0;
  background-repeat:repeat;
}
.theme-pixel-bg .container > *{position:relative;z-index:1}

.theme-pixel-bg .section{background:transparent}
.theme-pixel-bg .section--minimal{background:transparent}
.theme-pixel-bg .section--dark{background:var(--ink)}
.theme-pixel-bg .section--dark .container::before{display:none}

/* ============================================================
   HERO A-PROPOS — grid 2 colonnes : texte à gauche, sable à droite
   avec obstacle triangulaire au centre du visuel.
   ============================================================ */
/* Hero À propos : portrait fondateur plein cadre, titre superposé. */
.apropos-hero{
  position:relative;min-height:100vh;
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--hairline);overflow:hidden;
}
.apropos-hero__media{
  position:absolute;inset:0;
  background:url('/about-portrait.jpg') center 22% / cover no-repeat;
}
.apropos-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(8,8,10,.82) 0%, rgba(8,8,10,.40) 40%, rgba(8,8,10,0) 66%);
}
.apropos-hero__in{
  position:relative;z-index:1;
  padding:0 var(--safe) clamp(48px,8vh,104px);
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  color:var(--paper);
}
.apropos-hero__in h1{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(40px,6.2vw,104px);line-height:.99;letter-spacing:-.022em;
  color:var(--paper);max-width:15ch;margin:0;
}
.apropos-hero__in > p{
  font-family:"Inter Tight",sans-serif;font-weight:300;
  font-size:clamp(15px,1.2vw,19px);line-height:1.55;
  color:rgba(250,250,250,.82);max-width:48ch;margin:0;
}
.apropos-hero__cta.btn--primary{
  margin-top:4px;background:var(--paper);color:var(--ink);border-color:var(--paper);
}
.apropos-hero__cta.btn--primary:hover{background:transparent;color:var(--paper)}
.apropos-hero .meta{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(250,250,250,.66);
}
.apropos-hero .meta span{display:inline-flex;align-items:center;gap:8px}
.apropos-hero .meta i{font-style:normal;width:5px;height:5px;background:currentColor;border-radius:999px;display:inline-block}

@media (max-width:880px){
  .apropos-hero{min-height:88vh}
  .apropos-hero__media{background-position:center 16%}
  .apropos-hero__in{padding-bottom:clamp(40px,7vh,72px)}
}

/* Stage a-propos (legacy) : sable cellular-automaton qui s'écoule */
.stage--apropos{
  width:100%;
  height:100vh;min-height:600px;
  background:var(--paper);
}
.stage--apropos .sand{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;pointer-events:auto;cursor:crosshair;
  touch-action:pan-y;
}
/* Sur la stage sable : le grain et la vignette restent en mode clair (mêmes valeurs que
   le hero principal) — la zone "papier" est claire, la zone sable est noire mais c'est
   le canvas qui peint, pas le grain. */
/* Sur la stage a-propos, on désactive pointer-events sur le contenu UI
   pour que la souris atteigne directement le canvas sable (sauf le CTA). */
.stage--apropos .ui > *{pointer-events:none}
.stage--apropos .ui .cta{pointer-events:auto}
.stage--apropos .hero h1{
  font-size:clamp(40px,7.2vw,108px);
  letter-spacing:-.02em;line-height:.98;
  max-width:24ch;
}
.stage--apropos .hero .sub{align-items:end}
@media (max-width:760px){
  .stage--apropos .hero h1{font-size:clamp(36px,9vw,72px);max-width:none}
}

/* Mini-stage divider inversée : fond noir, fluide WebGL clair en surface, label central */
.stage--divider{
  height:clamp(180px,28vh,300px);min-height:180px;
  background:var(--ink);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.stage--divider .ui{padding:clamp(20px,4vh,40px) var(--safe)}
.divider__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  text-align:center;line-height:1.6;
}
.divider__label em{
  display:block;margin-top:6px;
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,26px);
  letter-spacing:-.005em;text-transform:none;
}

/* Sur les stages inversées (data-fluid-invert), le grain et la vignette s'adaptent : */
.stage[data-fluid-invert] .grain,
.stage--divider .grain{
  mix-blend-mode:screen;opacity:.16;
  background-image:radial-gradient(rgba(250,250,250,.6) 1px,transparent 1px);
}
.stage[data-fluid-invert] .vignette,
.stage--divider .vignette{
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%);
}
.stage--inline .ui{padding:clamp(40px,8vh,80px) var(--safe)}
.ui--centered{display:flex !important;align-items:center;justify-content:center;text-align:center}

/* ============================================================
   APROPOS SPLIT — 2 colonnes pleine largeur, image flush à gauche,
   texte à droite sur fond paper grainé (rappel du hero sans animation).
   ============================================================ */
.apropos-split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
  width:100%;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--paper);
}
.apropos-split__image{
  position:relative;background:var(--paper-2);overflow:hidden;
  min-height:520px;
}
.apropos-split__image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.apropos-split__text{
  position:relative;background:var(--paper);
  display:flex;align-items:center;
  padding:clamp(60px,9vh,120px) var(--safe);
  isolation:isolate;
}
.apropos-split__grain{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  mix-blend-mode:multiply;opacity:.32;
  background-image:radial-gradient(rgba(20,22,26,.55) 1px,transparent 1px);
  background-size:3px 3px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);
}
.apropos-split__inner{
  position:relative;z-index:1;max-width:540px;
}
.apropos-split__inner .section__title{margin:0 0 24px;max-width:none}
.apropos-split__inner .section__lede{margin:0;max-width:48ch}

@media (max-width:880px){
  .apropos-split{grid-template-columns:1fr}
  .apropos-split__image{min-height:auto;aspect-ratio:4/3}
}

/* ============================================================
   OBJECTIF — blueprint 3 colonnes sur fond noir quadrillé
   Pas de canvas, pure géométrie : barres horizontales qui se tracent,
   chiffres romains, lignes verticales entre colonnes, motif SVG signature.
   ============================================================ */
.objectif-grid{
  position:relative;
  background:var(--ink);color:var(--paper);
  padding:clamp(80px,12vh,160px) 0;
  overflow:hidden;
}
/* Fine ligne horizontale en haut pour cadrer le bandeau */
.objectif-grid::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(250,250,250,.18);
}

/* Container max-width centré + quadrillage 12-col POSÉ SUR LE CONTAINER
   (pas sur la section). Calcul identique à .theme-pixel-bg .container::before,
   donc bordures des promises + verticales du quadrillage tombent pile aux mêmes
   positions par construction. */
.objectif-grid__container{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--safe);
}
.objectif-grid__container::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right, rgba(250,250,250,.06) 1px, transparent 1px);
  background-size:calc((100% - 2 * var(--safe)) / 12) 100%;
  background-position:var(--safe) 0;
  background-repeat:repeat;
}
.objectif-grid__container > *{position:relative;z-index:1}

.objectif-grid__head{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;
  margin-bottom:clamp(40px,6vh,72px);
}
.objectif-grid__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5.4vw,80px);line-height:1.02;letter-spacing:-.018em;
  margin:0;max-width:18ch;color:var(--paper);
}
.objectif-grid__title em{font-style:italic;font-weight:400}
.objectif-grid__mark{
  width:clamp(56px,7vw,88px);height:clamp(56px,7vw,88px);
  flex-shrink:0;transform:rotate(0deg);
  transition:transform 12s linear;
  animation:mark-rotate 28s linear infinite;
}
@keyframes mark-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Grid 12-col explicite : chaque promise span 4 → bordures alignées par
   construction sur les multiples de 4/12 du container (= mêmes positions
   que le quadrillage de fond). */
.objectif-grid__cols{
  display:grid;grid-template-columns:repeat(12, 1fr);gap:0;
  border-top:1px solid rgba(250,250,250,.18);
  border-bottom:1px solid rgba(250,250,250,.18);
}

.promise{
  grid-column:span 4;
  padding:clamp(40px,6vh,72px) clamp(24px,3vw,44px);
  border-left:1px solid rgba(250,250,250,.18);
  display:flex;flex-direction:column;gap:clamp(24px,3.5vh,40px);
  position:relative;
}
.promise:last-child{border-right:1px solid rgba(250,250,250,.18)}
.promise__word{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(26px,2.8vw,44px);line-height:1.05;letter-spacing:-.012em;
  margin:0;color:var(--paper);
}
.promise__bar{
  height:1px;background:rgba(250,250,250,.18);position:relative;overflow:hidden;
}
.promise__bar > span{
  position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;
  transition:width 1.4s cubic-bezier(.2,.7,.2,1);
  /* Le délai s'enchaîne via --stagger posé par layout.js */
  transition-delay:calc(var(--stagger, 0) * 220ms + 200ms);
}
.promise.in .promise__bar > span{width:100%}
.promise__hint{
  font-size:14px;line-height:1.55;color:rgba(250,250,250,.7);margin:0;
  max-width:34ch;
}

@media (max-width:880px){
  .objectif-grid__head{grid-template-columns:1fr}
  .objectif-grid__mark{display:none}
  .promise{grid-column:span 12;border-bottom:1px solid rgba(250,250,250,.18)}
  .promise:last-child{border-bottom:none;border-right:none}
}

/* ============================================================
   STAGE OBJECTIF (legacy, plus utilisée mais conservée)
   ============================================================ */
   Vraie coupure visuelle entre la section "Comprenons" (claire) et la
   section "Sur mesure" (preview projets, claire aussi). Rappelle le footer
   global mais en plus court (50svh).
   ============================================================ */
.stage--objectif{
  height:62svh;min-height:480px;
  background:var(--ink);color:var(--paper);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.stage--objectif .sand{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;cursor:crosshair;touch-action:pan-y;
}
.stage--objectif .grain{
  mix-blend-mode:screen;opacity:.16;
  background-image:radial-gradient(rgba(250,250,250,.6) 1px,transparent 1px);
}
.stage--objectif .vignette{
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%);
}
.stage--objectif .ui{padding:clamp(48px,8vh,88px) var(--safe)}
.stage--objectif .ui > *{pointer-events:none}

/* Bloc Objectif : label mono, titre énorme italique, sub explicatif */
.objectif{
  display:flex;flex-direction:column;gap:clamp(18px,3vh,28px);
  align-items:center;text-align:center;max-width:980px;
}
.objectif__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  margin:0;opacity:.9;
}
.eyebrow-mini{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  margin:0;
}
.objectif__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(40px,7.5vw,116px);line-height:1.02;letter-spacing:-.022em;
  margin:0;
}
.objectif__title em{font-style:italic;font-weight:400}
.objectif__sub{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.2vw,18px);line-height:1.55;
  max-width:54ch;opacity:.85;margin:0;
}

/* COMPRENONS : bloc texte centré, sobre, qui prolonge la section Approche */
.prose-block{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:clamp(18px,3vh,28px)}
.comprenons__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(28px,4vw,52px);line-height:1.06;letter-spacing:-.018em;
  color:var(--ink);margin:0;
}
.comprenons__title em{font-style:italic}
.comprenons__text{
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--ink-soft);margin:0;
}

.fluid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:multiply;opacity:.32;
  background-image:radial-gradient(rgba(20,22,26,.55) 1px,transparent 1px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);
}
.vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(8,9,11,.06) 100%);
}

/* UI overlay — z-index ET mix-blend-mode ensemble (cf. correctif du 2026-05-14).
   Grid 1fr auto : la zone hero prend tout l'espace, le foot meta reste collé en bas.
   Padding-top élevé pour décoller le contenu du nav-fixed (~62px) et donner
   de l'air au titre. */
.ui{
  position:absolute;inset:0;z-index:10;
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(110px,18vh,200px) var(--safe) var(--safe);
  pointer-events:none;
  mix-blend-mode:difference;color:#fff;
}
.ui > *{pointer-events:auto}
/* Le hero est collé en bas mais on laisse un grand espace avant la meta foot
   pour aérer (le CTA ne touche plus la ligne Marseille · Application web…) */
.ui .hero{align-self:end;margin-bottom:clamp(48px,8vh,104px)}

/* NAV — couleurs natives en blanc, mix-blend-mode sur .ui ci-dessus */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,1.6vw,26px);letter-spacing:-.01em;line-height:1;
  display:flex;align-items:baseline;gap:10px;
}
.brand .dot{width:6px;height:6px;border-radius:999px;background:#fff;display:inline-block;transform:translateY(-2px)}
.links{display:flex;gap:clamp(14px,2vw,28px);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.links a{position:relative;padding:6px 0}
.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.links a:hover::after, .links a:focus-visible::after, .links a.is-active::after{transform:scaleX(1)}
.links a:focus-visible{outline:none}
@media (max-width:760px){
  .links{display:none}
  .nav-mobile-toggle{display:flex}
}

/* Hero content */
.hero{align-self:center;display:grid;grid-template-columns:1fr;align-items:end;gap:clamp(24px,4vh,40px)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
}
.eyebrow .bar{display:inline-block;width:34px;height:1px;background:#fff}
.hero h1{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(56px,10.5vw,176px);line-height:.92;letter-spacing:-.022em;
  max-width:18ch;
}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .word > span{display:inline-block;transform:translateY(110%);will-change:transform}
.hero .sub{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  padding-top:14px;border-top:1px solid #fff;margin-top:6px;
}
.hero .sub p{max-width:46ch;font-size:clamp(14px,1.05vw,16px);line-height:1.55;margin:0}

.cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 18px;border:1px solid #fff;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  background:transparent;color:#fff;
  transition:background .35s ease, color .35s ease, transform .35s var(--ease);
}
.cta:hover{background:#fff;color:#000}
.cta .arrow{display:inline-block;width:20px;height:1px;background:currentColor;position:relative}
.cta .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

/* Foot inside hero */
.foot{display:flex;align-items:end;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.foot .meta{display:flex;gap:18px;flex-wrap:wrap}
.foot .meta span{display:inline-flex;align-items:center;gap:8px}
.foot .meta i{font-style:normal;width:5px;height:5px;background:#fff;border-radius:999px;display:inline-block}
.scroll{display:inline-flex;align-items:center;gap:10px}
.scroll .line{display:inline-block;width:48px;height:1px;background:#fff;opacity:.6;position:relative;overflow:hidden}
.scroll .line::before{
  content:"";position:absolute;inset:0;background:#fff;
  transform:translateX(-100%);animation:slide 3.4s ease-in-out infinite;
}
@keyframes slide{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@media (max-width:640px){
  .foot{font-size:10px}
  .foot .meta{gap:12px}
}

/* ============================================================
   SECONDARY HERO — pages autres que homepage (pas de WebGL)
   ============================================================ */

.hero-static{
  position:relative;
  padding:calc(var(--safe) * 2.5) var(--safe) calc(var(--safe) * 1.6);
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  min-height:64svh;display:flex;align-items:flex-end;
}
.hero-static .container{width:100%}
.hero-static .eyebrow{color:var(--ink-soft);margin-bottom:24px}
.hero-static .eyebrow .bar{background:var(--ink-soft)}
.hero-static h1{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(44px,7.5vw,128px);line-height:.96;letter-spacing:-.022em;
  color:var(--ink);max-width:18ch;
}
.hero-static .sub{
  margin-top:clamp(28px,4vh,42px);padding-top:18px;
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
}
.hero-static .sub p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--ink-soft);max-width:54ch}

/* CTA contextualisé (clair) — pour les pages standard */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 18px;border:1px solid var(--ink);color:var(--ink);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  background:transparent;
  transition:background .35s ease, color .35s ease, transform .35s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:transparent;color:var(--ink)}
.btn .arrow{display:inline-block;width:20px;height:1px;background:currentColor;position:relative}
.btn .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section{padding:clamp(80px,12vh,160px) 0;border-top:1px solid var(--hairline)}
.section:first-of-type{border-top:none}
.section--dark{
  background:var(--ink);color:var(--paper);border-top:none;
  position:relative;overflow:hidden;
}
/* Touche fluide parcimonieuse : grain papier subtil rappelant le hero */
.section--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.18;mix-blend-mode:screen;
  background-image:radial-gradient(rgba(250,250,250,.7) 1px,transparent 1px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
}
/* Et un halo fluide statique en gradient — rappelle l'esprit du WebGL sans le coût */
.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(80% 60% at 20% 30%, rgba(250,250,250,.06) 0%, transparent 60%),
    radial-gradient(60% 40% at 80% 70%, rgba(250,250,250,.04) 0%, transparent 55%);
}
.section--dark > *{position:relative;z-index:1}
.section--dark .section__num, .section--dark .section__lede, .section--dark .item__text{color:rgba(250,250,250,.72)}
.section--dark .section__title{color:var(--paper)}
.section--dark .btn{border-color:var(--paper);color:var(--paper)}
.section--dark .btn:hover{background:var(--paper);color:var(--ink)}
.section--dark .btn--primary{background:var(--paper);color:var(--ink)}
.section--dark .btn--primary:hover{background:transparent;color:var(--paper)}
.section--minimal{padding:clamp(60px,9vh,120px) 0}

/* ============================================================
   FLUID DIVIDER — bande de transition entre 2 sections
   Pure CSS (pas de WebGL pour rester léger), drift animé en boucle.
   Usage : <div class="fluid-divider"><span class="label">— en mouvement —</span></div>
   ============================================================ */
.fluid-divider{
  position:relative;height:clamp(140px,22vh,240px);
  background:var(--paper);overflow:hidden;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  isolation:isolate;
}
.fluid-divider::before, .fluid-divider::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  border-radius:50%;will-change:transform;
}
.fluid-divider::before{
  background:radial-gradient(circle, rgba(20,22,26,.10) 0%, transparent 50%);
  animation:fluid-drift-a 22s ease-in-out infinite;
}
.fluid-divider::after{
  background:radial-gradient(circle, rgba(20,22,26,.06) 0%, transparent 55%);
  animation:fluid-drift-b 28s ease-in-out infinite;
}
@keyframes fluid-drift-a{
  0%, 100%{transform:translate(-15%, -5%) scale(1)}
  33%{transform:translate(10%, 8%) scale(1.1)}
  66%{transform:translate(-8%, 12%) scale(.95)}
}
@keyframes fluid-drift-b{
  0%, 100%{transform:translate(12%, 5%) scale(1.05)}
  50%{transform:translate(-10%, -8%) scale(1.15)}
}
.fluid-divider .label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  mix-blend-mode:difference;color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  text-align:center;line-height:1.6;
}
.fluid-divider .label em{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:-.005em;text-transform:none;display:block;margin-top:6px}
@media (prefers-reduced-motion: reduce){
  .fluid-divider::before, .fluid-divider::after{animation:none}
}

.section__head{
  display:flex;flex-direction:column;gap:clamp(16px,2vh,24px);
  margin-bottom:clamp(40px,6vh,80px);
}
/* Si la section__head contient encore un .section__num quelque part, on revient en grille 2-col */
.section__head:has(.section__num){
  display:grid;grid-template-columns:140px 1fr;gap:clamp(24px,4vw,72px);
}
.section__num{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);padding-top:8px;
}
.section__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,5vw,72px);line-height:1.02;letter-spacing:-.02em;
  color:var(--ink);max-width:22ch;
}
.section__title em{font-style:italic;font-weight:400}
.section__lede{
  font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--ink-soft);
  max-width:56ch;margin-top:18px;
}
@media (max-width:760px){
  .section__head{grid-template-columns:1fr;gap:14px}
  .section__num{padding-top:0}
}

/* Manifeste : titre énorme + lede */
.manifeste{padding:clamp(100px,14vh,180px) var(--safe);text-align:left}
.manifeste h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7vw,120px);line-height:.96;letter-spacing:-.025em;
  color:var(--ink);max-width:18ch;
}
.manifeste h2 em{font-style:italic}
.manifeste .lede{
  margin-top:clamp(28px,4vh,48px);
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--ink-soft);
  max-width:54ch;
}

/* Items grid (3 colonnes, peuvent être les 3 piliers de l'approche) */
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,48px)}
.item{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--ink)}
.item__num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.item__title{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.005em;color:var(--ink)}
.item__text{font-size:clamp(14px,1vw,15px);line-height:1.6;color:var(--ink-soft)}

/* Méthode (alignée gauche, 4 étapes verticales avec gros numéros) */
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:140px 1fr;gap:clamp(24px,4vw,72px);
  padding:clamp(28px,4vh,48px) 0;border-top:1px solid var(--hairline);
}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step__num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);padding-top:8px}
.step__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:-.018em;color:var(--ink);
  margin-bottom:10px;
}
.step__title em{font-style:italic}
.step__text{font-size:clamp(15px,1.1vw,16px);line-height:1.6;color:var(--ink-soft);max-width:62ch}
@media (max-width:760px){.step{grid-template-columns:1fr;gap:8px}.step__num{padding-top:0}}

/* Bande "guide" (3 mots clés alignés) */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.kpi{
  padding:clamp(28px,4vh,48px) clamp(24px,3vw,40px);
  border-right:1px solid var(--hairline);
}
.kpi:last-child{border-right:none}
@media (max-width:760px){.kpi{border-right:none;border-bottom:1px solid var(--hairline)}.kpi:last-child{border-bottom:none}}
.kpi__num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.kpi__title{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--ink)}

/* Cartes projet / réalisation */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.4vw,32px)}
.card{
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--hairline);background:var(--paper);
  transition:border-color .35s ease, transform .35s var(--ease);
}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card__viz{
  aspect-ratio:4/3;background:var(--paper-2);position:relative;overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
.card__viz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__viz svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink-mute)}
.card__viz--placeholder{
  background:var(--paper-2);
  background-image:repeating-linear-gradient(45deg,transparent 0 12px,rgba(20,22,26,.04) 12px 13px);
}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.card__cat{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.card__title{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.005em;color:var(--ink);line-height:1.2}
.card__sub{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:auto;padding-top:8px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute)}

/* Liste blog */
.posts{display:grid;gap:0;border-top:1px solid var(--hairline)}
.post{
  display:grid;grid-template-columns:140px 1fr 200px;gap:clamp(24px,4vw,48px);
  padding:clamp(24px,3.5vh,40px) 0;border-bottom:1px solid var(--hairline);
  align-items:baseline;transition:padding-left .35s var(--ease);
}
/* Survol cohérent : la ligne survolée reste pleine, les autres s'estompent.
   L'effet brutal de décalage (padding-left) est remplacé. */
.posts:hover .post{opacity:.4;transition:opacity .35s var(--ease)}
.posts .post:hover{opacity:1}

/* Image de l'article mise en avant, suit le curseur dans la section. */
#blog{position:relative;overflow:clip}
.post-peek{
  position:absolute;top:0;left:0;z-index:5;
  width:clamp(220px,21vw,320px);aspect-ratio:4/3;
  overflow:hidden;border:1px solid var(--hairline);
  opacity:0;transform:translate(-9999px,-9999px);
  transition:opacity .4s var(--ease);will-change:transform,opacity;
}
.post-peek.is-on{opacity:1}
.post-peek img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.post-peek{display:none}}
.post__date{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.post__title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,30px);line-height:1.15;letter-spacing:-.012em;color:var(--ink)}
.post__title em{font-style:italic}
.post__cat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);text-align:right}
@media (max-width:760px){.post{grid-template-columns:1fr;gap:8px}.post__cat{text-align:left}}

/* Form (contact) */
.form{display:grid;gap:clamp(16px,2vh,24px);max-width:560px}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.field input, .field textarea, .field select{
  font:inherit;color:var(--ink);
  padding:12px 0;border:none;border-bottom:1px solid var(--ink);
  background:transparent;width:100%;
  transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field--inline{display:flex;align-items:center;gap:10px;font-size:13px}
.field--inline input{width:auto}
.form .btn{justify-self:start;margin-top:10px}

/* ============================================================
   FOOTER GLOBAL — stage sable inversée fusion + CTA + footer
   Fond noir, sable blanc qui suit la souris, contenu en mix-blend-mode difference
   ============================================================ */
.cta-foot{
  position:relative;
  background:var(--ink);color:var(--paper);
  overflow:hidden;isolation:isolate;
  min-height:560px;
}
.cta-foot__sand{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;cursor:crosshair;touch-action:pan-y;
}
.cta-foot .grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:.16;
  background-image:radial-gradient(rgba(250,250,250,.6) 1px,transparent 1px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse at center,#000 60%,transparent 100%);
}
.cta-foot .vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%);
}
/* Même règle que le hero (.ui) : c'est le conteneur qui porte le
   mix-blend-mode:difference + color:#fff. Tout le contenu s'inverse
   uniformément quand le sable blanc passe dessous. */
.cta-foot__inner{
  position:relative;z-index:10;
  padding:clamp(96px,14vh,180px) var(--safe) clamp(28px,3vh,40px);
  pointer-events:none;
  mix-blend-mode:difference;color:#fff;
}
.cta-foot__inner > *{pointer-events:auto}
.cta-foot__inner a, .cta-foot__inner .cta{pointer-events:auto}

/* Le grand titre + le sous-titre gardent l'inversion mix-blend (effet stylé,
   reste lisible car grand). Les éléments interactifs en sont exclus et ont
   des pastilles de fond solides. */
.cta-foot__cta{
  max-width:var(--maxw);margin:0 auto clamp(72px,10vh,120px);
  padding-bottom:clamp(72px,10vh,120px);
  border-bottom:1px solid rgba(250,250,250,.3);
  display:flex;flex-direction:column;gap:24px;align-items:flex-start;
}
.cta-foot__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(40px,7vw,108px);line-height:.96;letter-spacing:-.022em;
  margin:0;max-width:18ch;
  color:#fff;
}
.cta-foot__sub{
  font-size:clamp(15px,1.2vw,18px);line-height:1.55;
  max-width:54ch;margin:0;
  color:#fff;
}
.cta-foot__buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* CTAs du footer : même traitement que le hero — transparent + bord blanc,
   l'inversion vient du mix-blend du conteneur. Pas de pastille (sinon le
   backdrop-filter casse le blend uniforme). */
.cta-foot .cta{
  border-radius:999px;
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.cta-foot .cta:hover{transform:translateY(-1px)}

/* Site-foot : conteneur transparent, contenu clair. Chaque lien a une
   pastille translucide pour rester lisible par-dessus le sable. */
.cta-foot .site-foot{
  background:transparent;padding:0;color:#fff;
}
.cta-foot .site-foot__grid{padding-bottom:clamp(48px,6vh,72px)}
.cta-foot .site-foot__bottom{border-top:1px solid rgba(255,255,255,.3)}
.cta-foot .site-foot__brand,
.cta-foot .site-foot__tagline,
.cta-foot .site-foot h4,
.cta-foot .site-foot__bottom{color:#fff}
.cta-foot .site-foot ul a{
  display:inline-block;color:#fff;
  padding:5px 12px;margin:-5px -12px;border-radius:999px;
  transition:opacity .25s ease;
}
.cta-foot .site-foot ul a:hover{opacity:.6}

@media (max-width:880px){
  .cta-foot__inner{padding-top:clamp(80px,12vh,140px)}
}

/* Footer LEGACY (référencé ailleurs si besoin) */
.site-foot{
  background:var(--ink);color:var(--paper);
  padding:clamp(60px,8vh,100px) var(--safe) clamp(28px,3vh,40px);
}
.site-foot__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,72px);
  max-width:var(--maxw);margin:0 auto;
}
@media (max-width:880px){.site-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-foot__grid{grid-template-columns:1fr}}
.site-foot__brand{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,3vw,42px);letter-spacing:-.012em;color:var(--paper);margin-bottom:14px}
.site-foot__tagline{font-size:14px;line-height:1.55;color:rgba(250,250,250,.72);max-width:38ch}
.site-foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:rgba(250,250,250,.6);margin-bottom:18px}
.site-foot ul{display:grid;gap:10px}
.site-foot a{color:var(--paper);font-size:14px;transition:opacity .25s}
.site-foot a:hover{opacity:.7}
.site-foot__bottom{
  margin-top:clamp(48px,6vh,72px);padding-top:24px;
  border-top:1px solid rgba(250,250,250,.18);
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,250,250,.6);
}

/* ============================================================
   Garde-fous : cacher les trous résiduels (champs Notion vides)
   ============================================================ */
.post__cat:empty,
.post__date:empty,
.kpi__title:empty,
.kpi__num:empty,
.item__text:empty,
.step__text:empty,
.card__cat:empty,
.card__sub:empty,
.card__row:empty,
.section__lede:empty,
.section__num:empty{display:none}
/* Si une cellule client OU date est vide dans une card__row, on rééquilibre */
.card__row > span:empty{display:none}
.card__row:has(> span:only-of-type){justify-content:flex-end}

/* ============================================================
   Reveal au scroll (IntersectionObserver via layout.js)
   ============================================================ */
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal-up.in{opacity:1;transform:none}

/* Stagger naturel : les items d'une grille apparaissent en cascade légère */
.items .item.reveal-up,
.kpis .kpi.reveal-up,
.steps .step.reveal-up,
.cards .card.reveal-up,
.posts .post.reveal-up{
  transition-delay:calc(var(--stagger, 0) * 70ms);
}

/* Cartes (réalisations / applications métier) : arrivée plus posée.
   Translation plus ample + léger zoom, courbe très douce, cascade
   plus marquée → fin du « pop » brutal. */
.cards .card.reveal-up{
  transform:translateY(46px) scale(.965);
  transition:opacity 1.05s var(--ease-soft), transform 1.05s var(--ease-soft);
  transition-delay:calc(var(--stagger, 0) * 120ms);
}
.cards .card.reveal-up.in{transform:none}

/* Underline animée sur les <em> des titres de section, au scroll */
.section__title em,
.manifeste h2 em{
  position:relative;display:inline-block;
}
.section__title em::after,
.manifeste h2 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:2px;
  background:currentColor;opacity:.32;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) .25s;
}
.reveal-up.in .section__title em::after,
.reveal-up.in.manifeste h2 em::after,
.in.section__title em::after,
.in .section__title em::after,
.manifeste.reveal-up.in h2 em::after{
  transform:scaleX(1);
}
.section--dark .section__title em::after{opacity:.45;background:var(--paper)}

/* Hover renforcé sur les cards : élévation + ligne subtile */
.card{
  transition:border-color .35s ease, transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{
  border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 18px 48px -28px rgba(20,22,26,.18);
}
.card__viz{transition:transform .8s var(--ease)}
.card:hover .card__viz{transform:scale(1.02)}
.card__viz img{transition:transform .8s var(--ease)}
.card:hover .card__viz img{transform:scale(1.04)}

/* Indicateur de catégorie : petit point qui apparaît au hover */
.card__cat{position:relative;padding-left:0;transition:padding-left .3s var(--ease)}
.card:hover .card__cat{padding-left:14px}
.card__cat::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;background:var(--ink);border-radius:999px;
  transform:translateY(-50%) scale(0);transition:transform .3s var(--ease);
}
.card:hover .card__cat::before{transform:translateY(-50%) scale(1)}

/* Posts : la flèche qui apparaît au hover */
.post{position:relative}
.post::after{
  content:"→";position:absolute;right:8px;top:50%;
  font-family:var(--mono);font-size:14px;color:var(--ink);
  transform:translate(-12px, -50%);opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.post:hover::after{transform:translate(0, -50%);opacity:.7}
@media (max-width:760px){.post::after{display:none}}

/* Touche fluide subtile sur les sections--minimal aussi : grain papier très léger */
.section--minimal{position:relative;overflow:hidden}
.section--minimal::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.04;
  background-image:radial-gradient(rgba(20,22,26,.4) 1px,transparent 1px);
  background-size:4px 4px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}
.section--minimal > *{position:relative;z-index:1}

/* Manifeste : halo radial doux derrière le titre */
.manifeste{position:relative;overflow:hidden}
.manifeste::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 30% 40%, rgba(20,22,26,.025) 0%, transparent 65%);
}
.manifeste > *{position:relative;z-index:1}

/* Hero static : reveal du titre mot-par-mot (animé au load via layout.js) */
.hero-static h1{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.hero-static.is-revealed h1{opacity:1;transform:none}
.hero-static .sub{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s}
.hero-static.is-revealed .sub{opacity:1;transform:none}

/* CTA dans nav-static : magnetic + halo subtil */
.nav-static .nav__cta{position:relative;overflow:hidden}
.nav-static .nav__cta::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(100%);transition:transform .35s var(--ease);
}
.nav-static .nav__cta:hover{color:var(--paper)}
.nav-static .nav__cta:hover::before{transform:translateY(0)}
.nav-static .nav__cta > *{position:relative;z-index:1}

/* Prose (article body) */
.prose-article{
  max-width:var(--maxw-prose);margin:0 auto;padding:clamp(60px,8vh,100px) var(--safe);
  font-size:17px;line-height:1.7;color:var(--ink-soft);
}
.prose-article h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.15;color:var(--ink);margin:48px 0 18px;letter-spacing:-.014em}
.prose-article h3{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);color:var(--ink);margin:32px 0 12px}
.prose-article p{margin-bottom:18px}
.prose-article a{color:var(--ink);border-bottom:1px solid var(--ink-mute);transition:border-color .25s}
.prose-article a:hover{border-color:var(--ink)}
.prose-article blockquote{margin:32px 0;padding-left:24px;border-left:2px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.prose-article ul, .prose-article ol{margin:18px 0;padding-left:24px}
.prose-article ul li{list-style:disc;margin-bottom:8px}
.prose-article ol li{list-style:decimal;margin-bottom:8px}
.prose-article code{font-family:var(--mono);font-size:14px;background:var(--paper-2);padding:2px 6px;border-radius:3px}
.prose-article img{margin:32px 0;border:1px solid var(--hairline)}

/* ============================================================
   NAV FIXE GLOBAL — pastilles de fond adaptatives.
   Plus de mix-blend-mode (illisible sur zones animées intermédiaires).
   Chaque élément interactif (logo, liens, CTA) a une pastille de fond
   semi-opaque + backdrop-filter pour rester lisible par-dessus l'animation.
   Le thème (clair/sombre) bascule via .on-dark posé par layout.js selon
   la section qui passe sous le nav.
   ============================================================ */
.nav-fixed{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px var(--safe);
  pointer-events:none;
  /* Thème clair par défaut : pastille claire, texte sombre */
  --nav-fg:var(--ink);
  --nav-pill:rgba(250,250,250,.66);
  --nav-pill-hover:var(--ink);
  --nav-pill-hover-fg:var(--paper);
  color:var(--nav-fg);
  transition:color .4s ease;
}
.nav-fixed.on-dark{
  --nav-fg:var(--paper);
  --nav-pill:rgba(10,10,14,.5);
  --nav-pill-hover:var(--paper);
  --nav-pill-hover-fg:var(--ink);
}
/* Voile flou progressif derrière la nav : pleinement flou en haut,
   se dissout vers le bas (masque dégradé) → aucune arête nette. */
.nav-fixed::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:128px;
  z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.nav-fixed::before{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}}
.nav-fixed > *{pointer-events:auto}
.nav-fixed__inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:none;
}

/* Pas de pastille en statique : juste le texte coloré selon le thème.
   La pastille (fond + flou) n'apparaît QU'AU SURVOL / actif. */
.nav-fixed .brand,
.nav-fixed .links a,
.nav-fixed__cta{
  background:transparent;
  border-radius:999px;
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
/* Neutralise le trait underline hérité du .links générique du hero */
.nav-fixed .links a::after{display:none !important;content:none !important}

.nav-fixed .brand{
  font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.5vw,24px);
  letter-spacing:-.01em;line-height:1;
  display:flex;align-items:center;gap:9px;
  padding:9px 18px;color:var(--nav-fg);
}
.nav-fixed .brand .dot{width:6px;height:6px;border-radius:999px;background:currentColor;display:inline-block}

.nav-fixed .links{display:flex;gap:4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.nav-fixed .links a{padding:9px 15px;color:var(--nav-fg)}
.nav-fixed .links a.is-active,
.nav-fixed .links a:hover{
  background:var(--nav-pill-hover);color:var(--nav-pill-hover-fg);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  transform:translateY(-1px);
}
.nav-fixed .links a:focus-visible{outline:2px solid var(--nav-fg);outline-offset:2px}

.nav-fixed__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;color:var(--nav-fg);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;
}
.nav-fixed__cta:hover{
  background:var(--nav-pill-hover);color:var(--nav-pill-hover-fg);border-color:var(--nav-pill-hover);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  transform:translateY(-1px);
}

/* Burger : caché en desktop, visible < 880px */
.nav-burger{
  display:none;
  width:44px;height:44px;border-radius:999px;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
  color:var(--nav-fg);background:transparent;
  transition:background .3s ease;
  flex-shrink:0;
}
.nav-burger span{
  display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .35s var(--ease), opacity .25s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Panneau plein écran */
.nav-panel{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,14vh,140px) var(--safe) var(--safe);
  opacity:0;transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.nav-panel.is-open{opacity:1;transform:none;pointer-events:auto}
.nav-panel__links{display:flex;flex-direction:column;gap:clamp(8px,2vh,18px)}
.nav-panel__links a{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,7vw,52px);line-height:1.1;letter-spacing:-.018em;
  color:var(--paper);padding:6px 0;
  border-bottom:1px solid rgba(250,250,250,.14);
  transition:padding-left .3s var(--ease), opacity .3s ease;
}
.nav-panel__links a:hover,
.nav-panel__links a.is-active{padding-left:14px;opacity:.7}
.nav-panel__cta{
  font-family:var(--mono) !important;font-style:normal !important;
  font-size:13px !important;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(24px,4vh,40px);padding:16px 24px !important;
  border:1px solid var(--paper);border-radius:999px;align-self:flex-start;
}
.nav-panel__cta:hover{background:var(--paper);color:var(--ink);padding-left:24px !important}
.nav-panel__foot{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:clamp(40px,6vh,72px);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,250,250,.6);
}
.nav-panel__foot a:hover{color:var(--paper)}

body.nav-open{overflow:hidden}

@media (max-width:880px){
  .nav-fixed{padding:14px 16px}
  .nav-fixed .links{display:none}
  .nav-fixed__cta{display:none}
  .nav-burger{display:flex}
}
@media (min-width:881px){
  .nav-panel{display:none}
}

/* Pages sans hero plein écran : on réserve un padding-top pour ne pas que
   le contenu passe sous le nav fixé. Le hero plein écran de la home n'en
   a pas besoin (il couvre toute la viewport). */
.has-static-hero{padding-top:0} /* hero-static a déjà son top padding suffisant */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .scroll .line::before{animation:none;transform:none}
  .reveal-up,
  .cards .card.reveal-up{opacity:1;transform:none}
}