/* ══════════════════════════════════════════════════════════════
   EMELYSS — « Marbre & Encre »
   Noir profond · blanc froid · marbre gris · une couleur par maison
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:dark;

  /* ── Socle ── */
  --noir:#080808;
  --noir-2:#0F0F10;
  --noir-3:#141416;
  --gris-profond:#292929;
  --blanc:#F4F4F1;
  --blanc-pur:#FFFFFF;
  --marbre:#B9B9B4;
  --mute:#76766F;
  --mute-clair:#9B9B94;

  /* ── Métaux ── */
  --champagne:#C8B27A;
  --chrome:#BFC3C7;

  /* ── Une couleur forte par maison ── */
  --atlas:#2B5CE6;
  --atlas-bg:#050914;
  --orion:#8B5CF6;
  --orion-bg:#0B0517;
  --studio:#BFC3C7;
  --studio-bg:#09090A;

  --rule:rgba(244,244,241,.09);
  --rule-fort:rgba(244,244,241,.20);
  --rule-noir:rgba(8,8,8,.12);

  /* ── Typographie : une seule échelle, tenue partout ── */
  --display:'Cormorant Garamond',Didot,'Times New Roman',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-micro:clamp(11px,.74vw,12px);
  --t-label:clamp(11.5px,.8vw,12.5px);
  --t-petit:clamp(.86rem,.95vw,.94rem);
  --t-corps:clamp(.97rem,1.06vw,1.04rem);
  --t-lede:clamp(1rem,1.22vw,1.1rem);
  --t-md:clamp(1.28rem,2.1vw,1.7rem);
  --t-lg:clamp(1.7rem,3.2vw,2.35rem);
  --t-xl:clamp(2.1rem,4.4vw,3.3rem);
  --t-2xl:clamp(2.5rem,5.6vw,4.2rem);
  --t-hero:clamp(3.2rem,12.5vw,9.5rem);

  --ls-large:.30em;
  --ls-moyen:.20em;
  --ls-serre:.012em;

  --edge:clamp(1.25rem,5vw,4.5rem);
  --pad:clamp(5rem,10vw,9.5rem);
  --wrap:1340px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-doux:cubic-bezier(.33,1,.68,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--blanc);
  font-family:var(--body);font-weight:300;
  font-size:var(--t-corps);line-height:1.66;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.--fige{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:2px}
::selection{background:var(--champagne);color:var(--noir)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--edge)}

.skip{position:fixed;top:-100px;left:0;z-index:999;background:var(--blanc);color:var(--noir);
  padding:1rem 1.4rem;font-size:var(--t-label);letter-spacing:var(--ls-moyen);
  text-transform:uppercase;transition:top .2s}
.skip:focus{top:0}

/* ═══════════════════════════════════════════
   SEUIL — la page d'accueil avant la page
   ═══════════════════════════════════════════ */
.seuil{
  position:fixed;inset:0;z-index:9000;
  background:var(--noir);
  display:grid;place-items:center;
  padding:var(--edge);
  transition:opacity .72s var(--ease),visibility .72s;
}
.seuil[hidden]{display:none!important}
.seuil.--sort{opacity:0;visibility:hidden;pointer-events:none}
.seuil canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.seuil::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 42% at 50% 48%,rgba(8,8,8,.90) 0%,rgba(8,8,8,.62) 46%,rgba(8,8,8,.28) 72%,transparent 100%);
}
.seuil__inner{position:relative;z-index:2;text-align:center;max-width:44ch}

.seuil__bienvenue{
  display:block;font-size:var(--t-micro);letter-spacing:var(--ls-large);
  text-transform:uppercase;color:var(--mute-clair);font-weight:500;
  margin-bottom:1.9rem;
  opacity:0;animation:seuilMonte .82s var(--ease) .1s forwards;
}
.seuil__mark{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.6rem,10vw,5.6rem);line-height:1;
  letter-spacing:.14em;margin:0 0 .3rem;
  color:var(--blanc);
  opacity:0;animation:seuilMarque 1.05s var(--ease) .18s forwards;
}
.seuil__filet{
  width:0;height:1px;margin:1.5rem auto 1.7rem;
  background:linear-gradient(90deg,transparent,var(--champagne),transparent);
  animation:seuilFilet .95s var(--ease) .5s forwards;
}
.seuil__cit{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,2.5vw,1.55rem);line-height:1.45;
  color:var(--blanc);margin:0 0 1rem;text-wrap:balance;
  opacity:0;animation:seuilMonte .9s var(--ease) .66s forwards;
}
.seuil__aut{
  display:block;font-size:var(--t-micro);letter-spacing:var(--ls-large);
  text-transform:uppercase;color:var(--champagne);font-weight:500;
  opacity:0;animation:seuilMonte .9s var(--ease) .82s forwards;
}
.seuil__jauge{
  position:absolute;left:50%;bottom:clamp(2rem,6vh,4rem);transform:translateX(-50%);
  width:clamp(90px,14vw,150px);height:1px;background:rgba(244,244,241,.14);overflow:hidden;
}
.seuil__jauge i{
  display:block;height:100%;width:100%;background:var(--champagne);
  transform:scaleX(0);transform-origin:left;
  animation:seuilJauge 2s linear .08s forwards;
}
.seuil__passer{
  position:absolute;right:var(--edge);bottom:clamp(2rem,6vh,4rem);
  background:none;border:0;cursor:pointer;padding:.8rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;
  color:var(--mute);font-weight:500;transition:color .3s;
  opacity:0;animation:seuilMonte .8s var(--ease) 1.1s forwards;
}
.seuil__passer:hover{color:var(--blanc)}

@keyframes seuilMonte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes seuilMarque{from{opacity:0;letter-spacing:.34em}to{opacity:1;letter-spacing:.14em}}
@keyframes seuilFilet{to{width:min(190px,48vw)}}
@keyframes seuilJauge{to{transform:scaleX(1)}}

/* ═══════════════════════════════════════════
   TYPOGRAPHIE
   ═══════════════════════════════════════════ */
h1,h2,h3,h4{margin:0;font-weight:300;text-wrap:balance}

.eyebrow{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:var(--t-micro);font-weight:500;letter-spacing:var(--ls-large);
  text-transform:uppercase;color:var(--marbre);margin:0 0 1.5rem;
}
.eyebrow::before{content:'';width:30px;height:1px;background:currentColor;opacity:.5;flex:0 0 30px}

.h-section{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-xl);line-height:1.08;letter-spacing:var(--ls-serre);
}
.h-section em{font-style:italic;color:var(--marbre)}

.lede{font-size:var(--t-lede);color:#C3C3BE;max-width:58ch;margin:0;line-height:1.64}
.micro{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.2rem var(--edge);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),
             backdrop-filter .5s var(--ease),padding .5s var(--ease);
}
.nav.--solid{
  background:rgba(8,8,8,.84);backdrop-filter:blur(16px) saturate(120%);
  border-bottom-color:var(--rule);padding-block:.85rem;
}
.nav__brand{font-family:var(--display);font-size:1.2rem;letter-spacing:.26em;font-weight:400;white-space:nowrap}
.nav__links{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.nav__links a{
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;
  font-weight:500;color:#ADADA8;position:relative;padding-block:.4rem;transition:color .32s
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--champagne);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease)
}
.nav__links a:hover,.nav__links a.--actif{color:var(--blanc)}
.nav__links a:hover::after,.nav__links a.--actif::after{transform:scaleX(1);transform-origin:left}
.nav__right{display:flex;align-items:center;gap:1.4rem}
.nav__lang{
  background:none;border:0;cursor:pointer;padding:.4rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);color:var(--mute);font-weight:500;transition:color .3s
}
.nav__lang strong{color:var(--blanc);font-weight:600}
.nav__lang:hover{color:var(--blanc)}
.nav__cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.78rem 1.4rem;border:1px solid var(--rule-fort);border-radius:999px;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;font-weight:500;
  transition:color .42s var(--ease),border-color .42s var(--ease)
}
.nav__cta::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--blanc);
  transform:translateY(101%);transition:transform .48s var(--ease)
}
.nav__cta:hover{color:var(--noir);border-color:var(--blanc)}
.nav__cta:hover::before{transform:none}
.nav__cta svg{width:11px;height:11px;transition:transform .42s var(--ease)}
.nav__cta:hover svg{transform:translateX(3px)}

.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:42px;height:42px}
.nav__burger span{display:block;height:1px;background:var(--blanc);margin:5px 0;transition:transform .4s var(--ease),opacity .25s}
.nav.--open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.--open .nav__burger span:nth-child(2){opacity:0}
.nav.--open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:6rem var(--edge) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity .42s var(--ease),visibility .42s
}
.drawer.--open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--display);font-size:clamp(1.9rem,8.5vw,2.8rem);line-height:1.55;
  border-bottom:1px solid var(--rule);padding-block:.55rem;
  opacity:0;transform:translateY(14px);
}
.drawer.--open a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.--open a:nth-child(1){transition-delay:.06s}
.drawer.--open a:nth-child(2){transition-delay:.12s}
.drawer.--open a:nth-child(3){transition-delay:.18s}
.drawer.--open a:nth-child(4){transition-delay:.24s}
.drawer.--open a:nth-child(5){transition-delay:.30s}
.drawer .micro{margin-top:2.2rem}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:9rem 4rem;overflow:hidden}
.hero__fond{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* Halo : tient lieu du bloom de post-traitement, pour une fraction du coût. */
.hero__halo{
  position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(78vh,780px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(200,178,122,.13) 0%,rgba(200,178,122,.05) 38%,transparent 68%);
  filter:blur(18px);
}
@media (max-width:980px){
  .hero__halo{right:50%;transform:translate(50%,-50%);width:min(62vh,460px)}
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  opacity:0;transition:opacity 1.6s var(--ease);mix-blend-mode:luminosity;
}
.hero__video.--prete{opacity:.30}
.hero::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(100deg,var(--noir) 0%,rgba(8,8,8,.90) 30%,rgba(8,8,8,.30) 52%,rgba(8,8,8,.10) 72%,rgba(8,8,8,.45) 100%),
    linear-gradient(180deg,rgba(8,8,8,.88) 0%,transparent 22%,transparent 70%,var(--noir) 100%);
}
.hero__inner{position:relative;z-index:4;width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}

.hero__wordmark{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-hero);line-height:.88;letter-spacing:.055em;
  margin:0 0 1.7rem;color:var(--blanc);
}
.hero__wordmark span{display:inline-block;opacity:0;transform:translateY(.34em)}
.--entre .hero__wordmark span{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
}
.hero__claim{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-2xl);line-height:1.09;letter-spacing:var(--ls-serre);
  margin:0 0 1.6rem;max-width:16ch;
}
.hero__claim em{font-style:italic;color:var(--marbre)}
.hero__sub{font-size:var(--t-lede);color:#B8B8B3;max-width:44ch;margin:0 0 2.7rem;line-height:1.64}

.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2.6rem}
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1.1rem 2rem;font-size:var(--t-micro);letter-spacing:var(--ls-moyen);
  text-transform:uppercase;font-weight:500;
  border:1px solid var(--rule-fort);
  transition:color .45s var(--ease),border-color .45s var(--ease)
}
.btn span{position:relative;z-index:2}
.btn svg{position:relative;z-index:2;width:12px;height:12px;transition:transform .45s var(--ease)}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .5s var(--ease)
}
.btn:hover svg{transform:translateX(5px)}
.btn--solide{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.btn--solide::before{background:var(--noir)}
.btn--solide:hover{color:var(--blanc)}
.btn--solide:hover::before{transform:none}
.btn--fantome::before{background:var(--blanc)}
.btn--fantome:hover{color:var(--noir);border-color:var(--blanc)}
.btn--fantome:hover::before{transform:none}

.hero__pills{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.hero__pills span{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500}
.hero__pills i{font-style:normal;color:var(--champagne);opacity:.55}

.hero__side{display:flex;flex-direction:column;gap:.6rem;text-align:right;padding-bottom:.5rem}
.hero__side span{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500}
.hero__side .filet{width:40px;height:1px;background:var(--rule-fort);margin-left:auto;margin-block:.7rem}

.hero__defile{
  position:absolute;left:var(--edge);bottom:clamp(1.6rem,4vh,2.6rem);z-index:3;
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.hero__defile i{display:block;width:28px;height:1px;background:var(--champagne);transform-origin:left;animation:defile 2.6s var(--ease) infinite}
@keyframes defile{0%{transform:scaleX(0);opacity:0}35%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) translateX(28px);opacity:0}}

/* ═══════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════ */
.sec{padding-block:var(--pad);position:relative}
.sec--blanc{background:var(--blanc);color:var(--noir)}
.sec--blanc .lede{color:#4E4E49}
.sec--blanc .eyebrow{color:#8C8C86}
.sec--blanc .micro{color:#8C8C86}
.sec--blanc .h-section em{color:#797974}

.sec-head{margin-bottom:clamp(2.8rem,5.5vw,4.6rem);max-width:70ch}
.sec-head .h-section{margin-bottom:1.15rem}

/* bande de marbre entre deux sections */
.veine{height:clamp(52px,6.5vw,86px);position:relative;overflow:hidden;background:var(--noir)}
.veine canvas{width:100%;height:100%;opacity:.7}
.veine--clair{background:var(--blanc)}

/* ═══════════════════════════════════════════
   MANIFESTE + DEUX PARCOURS
   ═══════════════════════════════════════════ */
.pitch{
  font-family:var(--display);font-size:var(--t-lg);line-height:1.3;font-weight:300;
  max-width:24ch;margin:0 0 3.2rem;
}
.pitch b{font-weight:400;font-style:italic}

.parcours{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:1px;background:var(--rule-noir)}
.parcours a{
  background:var(--blanc);padding:clamp(1.9rem,3.6vw,2.9rem);
  display:flex;flex-direction:column;gap:.85rem;position:relative;
  transition:background .45s var(--ease)
}
.parcours a:hover{background:#EDEDE9}
.parcours .qui{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;font-weight:600;color:var(--noir)}
.parcours .quoi{font-family:var(--display);font-size:var(--t-md);line-height:1.2;color:var(--noir)}
.parcours .det{font-size:var(--t-petit);color:#5C5C57;max-width:34ch;margin:0;line-height:1.62}
.parcours .go{
  margin-top:.6rem;font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;
  font-weight:500;display:inline-flex;align-items:center;gap:.6rem;color:var(--noir)
}
.parcours .go svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.parcours a:hover .go svg{transform:translateX(5px)}
.parcours .bar{position:absolute;left:0;top:0;bottom:0;width:2px;transition:width .4s var(--ease)}
.parcours a:hover .bar{width:5px}

/* ═══════════════════════════════════════════
   LES TROIS MAISONS
   ═══════════════════════════════════════════ */
.maisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,318px),1fr));gap:clamp(.9rem,1.6vw,1.4rem)}
.maison{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(390px,45vw,480px);
  padding:clamp(1.9rem,3vw,2.6rem);
  border:1px solid var(--rule);
  transition:transform .6s var(--ease),border-color .6s var(--ease)
}
.maison:hover{transform:translateY(-5px);border-color:var(--rule-fort)}
.maison canvas.mbg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.26;
  transform:scale(1.04);transition:transform 1.1s var(--ease)}
.maison:hover canvas.mbg{transform:scale(1.11)}
.maison::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(118% 82% at 86% 16%,var(--lueur) 0%,transparent 62%);
  opacity:.88;transition:opacity .65s var(--ease)
}
.maison:hover::before{opacity:1}
.maison__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.maison__num{font-family:var(--display);font-size:1.45rem;color:var(--maccent);opacity:.9}
.maison__kind{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500}
.maison__body{margin-top:auto;padding-top:2.6rem}
.maison__name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;letter-spacing:.1em;margin:0 0 .5rem
}
.maison__role{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--maccent);font-weight:500;margin:0 0 1.15rem}
.maison__desc{font-size:var(--t-petit);line-height:1.64;color:#B2B2AD;max-width:32ch;margin:0 0 1.6rem}
.maison__link{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;font-weight:500;
  padding-bottom:.5rem;color:var(--blanc)
}
.maison__link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--maccent);
  transform-origin:left;transition:transform .45s var(--ease)
}
.maison:hover .maison__link::after{animation:trait .65s var(--ease)}
@keyframes trait{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.maison__link svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.maison:hover .maison__link svg{transform:translateX(5px)}
.maison__verbs{
  position:absolute;right:clamp(1.4rem,2.4vw,2rem);bottom:clamp(1.9rem,3vw,2.6rem);
  display:flex;flex-direction:column;gap:.35rem;text-align:right;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--mute);font-weight:500
}

.m--atlas{--maccent:var(--atlas);--lueur:rgba(43,92,230,.22);background:var(--atlas-bg)}
.m--orion{--maccent:var(--orion);--lueur:rgba(139,92,246,.22);background:var(--orion-bg)}
.m--studio{--maccent:var(--studio);--lueur:rgba(191,195,199,.14);background:var(--studio-bg)}

/* ═══════════════════════════════════════════
   ENGAGEMENTS
   ═══════════════════════════════════════════ */
.engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));gap:1px;background:var(--rule);margin-top:clamp(2.6rem,5vw,4.2rem)}
.engagement{background:var(--noir);padding:clamp(1.6rem,2.7vw,2.2rem);display:flex;flex-direction:column;gap:.6rem;transition:background .45s var(--ease)}
.engagement:hover{background:var(--noir-2)}
.engagement .t{font-family:var(--display);font-size:var(--t-md);line-height:1.22}
.engagement .d{font-size:var(--t-petit);color:var(--mute-clair);line-height:1.6;margin:0}

/* ═══════════════════════════════════════════
   LAB
   ═══════════════════════════════════════════ */
.lab{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);gap:clamp(2rem,5vw,4.8rem);align-items:center}
.lab__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));gap:1px;background:var(--rule)}
.lab__card{
  background:var(--noir-2);padding:clamp(1.35rem,2.3vw,1.85rem);
  display:flex;flex-direction:column;gap:.55rem;min-height:178px;
  transition:background .5s var(--ease),transform .5s var(--ease)
}
.lab__card:hover{background:var(--noir-3);transform:translateY(-3px)}
.lab__card .n{font-family:var(--display);font-size:1.1rem;color:var(--champagne);opacity:.8}
.lab__card .t{font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-top:auto}
.lab__card .d{font-size:var(--t-petit);color:var(--mute);line-height:1.56;margin:0}

/* ═══════════════════════════════════════════
   MÉTHODE
   ═══════════════════════════════════════════ */
.methode{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,166px),1fr));gap:clamp(1.3rem,2.4vw,2.1rem)}
.etape{padding-top:1.2rem;border-top:1px solid rgba(8,8,8,.16);transition:border-color .45s var(--ease)}
.etape:hover{border-top-color:var(--champagne)}
.etape .n{font-family:var(--display);font-size:1.55rem;color:#8D8D87;display:block;margin-bottom:.95rem}
.etape h3{font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;font-weight:600;margin:0 0 .6rem;color:var(--noir)}
.etape p{font-size:var(--t-petit);color:#5C5C57;line-height:1.6;margin:0}

/* ═══════════════════════════════════════════
   FONDATRICE
   ═══════════════════════════════════════════ */
.fond{position:relative;overflow:hidden}
.fond canvas.fbg{position:absolute;inset:0;width:100%;height:100%;opacity:.32;z-index:0}
.fond .wrap{position:relative;z-index:1}
.fond__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,5.2rem);align-items:start}
.fond__col-g{display:flex;flex-direction:column;gap:1.6rem;position:sticky;top:7rem}
@media (max-width:980px){.fond__col-g{position:static}}
.fond__intro{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t-md);line-height:1.3;color:#7B7B76;margin:0 0 1.6rem;
}
.fond__citation{
  margin:2.4rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(8,8,8,.14);
  max-width:46ch;
}
.fond__citation q{
  quotes:none;display:block;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t-md);line-height:1.38;color:var(--noir);margin-bottom:.7rem;
}
.fond__citation cite{
  font-style:normal;font-size:var(--t-micro);letter-spacing:var(--ls-moyen);
  text-transform:uppercase;color:#8C8C86;font-weight:500;
}
.fond__citation cite em{font-style:italic;text-transform:none;letter-spacing:.02em}
.fond__portrait{
  width:clamp(190px,26vw,336px);aspect-ratio:1;overflow:hidden;position:relative;flex-shrink:0;
  box-shadow:0 34px 76px -34px rgba(8,8,8,.55)
}
.fond__portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
  transform:scale(1.02);transition:transform 1.3s var(--ease)}
.fond__portrait:hover img{transform:scale(1.07)}
.fond__portrait::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(8,8,8,.14)}
.fond__nom{font-family:var(--display);font-size:var(--t-xl);line-height:1.02;font-weight:300;margin:0 0 .35rem;color:var(--noir)}
.fond__nom em{display:block;font-style:italic;color:#7B7B76}
.fond__role{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:#8C8C86;font-weight:500;margin:0 0 1.6rem}
.fond__sep{width:36px;height:1px;background:var(--champagne);margin-bottom:1.6rem}
.fond__bio{font-size:var(--t-corps);line-height:1.7;color:#4E4E49;max-width:46ch;margin:0 0 1.35rem}
.fond__bio strong{font-weight:500;color:var(--noir)}
.fond__sig{margin-top:2.1rem;max-width:210px;opacity:.92}
.fond__sig img{width:100%;filter:invert(1) contrast(1.1)}
.fond__sigcap{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:#9C9C96;font-weight:500;margin-top:.55rem;display:block}

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact__title{font-family:var(--display);font-size:var(--t-xl);line-height:1.1;font-weight:300;margin:0 0 1.25rem}
.contact__title em{font-style:italic;color:var(--marbre)}
.contact__promesse{font-size:var(--t-lede);color:#B8B8B3;margin:0 0 2.3rem;max-width:40ch;line-height:1.62}
.contact__direct{font-size:var(--t-petit);color:var(--mute-clair);line-height:1.95}
.contact__direct a{color:var(--champagne);border-bottom:1px solid rgba(200,178,122,.32);transition:border-color .3s}
.contact__direct a:hover{border-bottom-color:var(--champagne)}

.field{margin-bottom:1.6rem;position:relative}
.field label{display:block;font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:.65rem}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-fort);
  color:var(--blanc);font-family:var(--body);font-size:var(--t-corps);font-weight:300;
  padding:.72rem 0;transition:border-color .38s
}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--champagne)}
.field textarea{resize:vertical;min-height:124px;line-height:1.62}
.field__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.contact__status{font-size:var(--t-petit);margin-top:1.1rem;min-height:1.4em}
.contact__status.--ok{color:var(--champagne)}
.contact__status.--err{color:#E07A6A}
.contact__rgpd{font-size:var(--t-micro);letter-spacing:.02em;text-transform:none;color:var(--mute);line-height:1.65;margin-top:1.5rem}
.contact__rgpd a{color:var(--marbre);border-bottom:1px solid var(--rule-fort)}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.foot{border-top:1px solid var(--rule);padding-block:clamp(3rem,5vw,4.6rem) 2rem}
.foot__top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;margin-bottom:3.6rem}
.foot__mark{font-family:var(--display);font-size:1.55rem;letter-spacing:.24em}
.foot__tag{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);margin-top:.55rem}
.foot__cols{display:flex;gap:clamp(2.5rem,6vw,5rem);flex-wrap:wrap}
.foot__col h4{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;color:var(--mute);font-weight:500;margin:0 0 1.05rem}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.72rem}
.foot__col a{font-size:var(--t-petit);color:#ADADA8;transition:color .3s}
.foot__col a:hover{color:var(--blanc)}
.foot__bottom{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.9rem;border-top:1px solid var(--rule);
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--mute)
}

/* ═══════════════════════════════════════════
   RÉVÉLATION AU SCROLL — transform+opacity seuls (GPU)
   ═══════════════════════════════════════════ */
.r{opacity:0;transform:translate3d(0,24px,0);
   transition:opacity .95s var(--ease-doux),transform .95s var(--ease-doux);
   will-change:opacity,transform}
.r.--in{opacity:1;transform:none;will-change:auto}
.r-d1{transition-delay:.08s}
.r-d2{transition-delay:.16s}
.r-d3{transition-delay:.24s}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__side{display:none}
  .lab{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .fond__grid{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
}
@media (max-width:980px){
  /* Le texte passe devant la sphere, pas l'inverse. */
  .hero::after{
    background:
      linear-gradient(180deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.88) 30%,rgba(8,8,8,.42) 52%,transparent 74%,var(--noir) 100%);
  }
}
@media (max-width:640px){
  :root{--pad:clamp(3.8rem,13vw,5.6rem)}
  .hero{min-height:auto;padding-block:7.5rem 4.5rem}
  .hero__wordmark{font-size:clamp(3rem,16vw,5rem);letter-spacing:.03em}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__defile{display:none}
  .maison{min-height:340px}
  .maison__verbs{display:none}
}

/* Cibles tactiles : 44px au doigt (WCAG 2.5.5) */
@media (hover:none),(max-width:820px){
  .maison__link{padding-block:1rem .92rem}
  .contact__direct a{display:inline-block;padding-block:.58rem}
  .contact__direct{line-height:1.6}
  .foot__col ul{gap:.15rem}
  .foot__col a{display:block;padding-block:.78rem}
  .nav__lang{padding:.92rem .55rem}
  .parcours .go{padding-block:.78rem}
  .nav__brand{padding-block:.6rem;display:inline-block}
  .seuil__passer{padding:1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .r{opacity:1;transform:none}
  .hero__wordmark span{opacity:1;transform:none}
  .seuil__bienvenue,.seuil__mark,.seuil__cit,.seuil__aut,.seuil__passer{opacity:1;animation:none}
  .seuil__filet{width:min(190px,48vw);animation:none}
}
/* ═══════════════════════════════════════════════════════════
   LES TROIS MAISONS — sections pleine largeur
   Un seul dégradé traverse les trois : bleu nuit → violet → noir.
   Aucune coupure franche : c'est ce qui fait la transition douce.
   ═══════════════════════════════════════════════════════════ */
.flux{
  background:linear-gradient(180deg,
    var(--noir) 0%,
    #050914 8%,
    #060B1C 24%,
    #090819 38%,
    #0B0517 52%,
    #0A0614 66%,
    #09090A 82%,
    var(--noir) 100%);
}

.mzone{position:relative;padding-block:clamp(5rem,11vw,10rem);overflow:hidden}
.mzone__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.mzone__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(2rem,4vw,3.4rem);padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.mzone__head span{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;font-weight:500}
.mzone__head .g{color:var(--macc)}
.mzone__head .d{color:var(--mute)}

.mzone__nom{
  font-family:var(--display);font-weight:300;
  font-size:clamp(3rem,8.5vw,6.4rem);line-height:.95;letter-spacing:.11em;
  margin:0 0 1.5rem;color:var(--blanc);
}
.mzone__baseline{
  font-family:var(--display);font-weight:300;font-size:var(--t-lg);line-height:1.2;
  margin:0 0 1.5rem;max-width:18ch;
}
.mzone__baseline em{font-style:italic;color:var(--macc)}
.mzone__desc{font-size:var(--t-corps);line-height:1.68;color:#B4B4AF;max-width:46ch;margin:0 0 2.2rem}

.mzone__chiffres{
  display:flex;gap:clamp(2rem,5vw,3.6rem);flex-wrap:wrap;
  padding-block:1.6rem;margin-bottom:2.2rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.mzone__chiffre b{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;color:var(--macc);margin-bottom:.4rem;
  font-variant-numeric:tabular-nums;
}
.mzone__chiffre span{font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--mute);font-weight:500}
.mzone__chiffre i{font-style:normal;display:block;font-size:var(--t-micro);color:var(--mute);opacity:.72;margin-top:.35rem;letter-spacing:.02em;text-transform:none}

.mzone__cta{
  display:inline-flex;align-items:center;gap:.9rem;position:relative;overflow:hidden;
  padding:1.05rem 2rem;border:1px solid var(--macc);border-radius:999px;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;font-weight:500;
  color:var(--blanc);transition:color .45s var(--ease)
}
.mzone__cta span,.mzone__cta svg{position:relative;z-index:2}
.mzone__cta::before{content:'';position:absolute;inset:0;z-index:1;background:var(--macc);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.mzone__cta:hover{color:var(--noir)}
.mzone__cta:hover::before{transform:none}
.mzone__cta svg{width:12px;height:12px;transition:transform .45s var(--ease)}
.mzone__cta:hover svg{transform:translateX(5px)}

.mzone__pied{
  margin-top:clamp(2.4rem,4vw,3.6rem);padding-top:1.2rem;border-top:1px solid var(--rule);
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--mute);font-weight:500
}

.m-atlas{--macc:var(--atlas)}
.m-orion{--macc:var(--orion)}
.m-studio{--macc:var(--studio)}

/* ── Le visuel signature de chaque maison ── */
.mzone__visuel{position:relative;width:100%;aspect-ratio:16/9;display:grid;place-items:center}

/* ATLAS — la carte du monde, et les destinations qui s'allument */
.carte{position:relative;width:100%;aspect-ratio:2/1}
.carte img{width:100%;height:100%;display:block;opacity:.44;
  filter:brightness(1.4) sepia(.35) hue-rotate(180deg) saturate(2.4)}
.carte i{
  position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--atlas);
  animation:pulseCarte 3.8s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes pulseCarte{
  0%{box-shadow:0 0 0 0 rgba(43,92,230,.55);opacity:.5}
  45%{box-shadow:0 0 0 11px rgba(43,92,230,0);opacity:1}
  100%{box-shadow:0 0 0 0 rgba(43,92,230,0);opacity:.5}
}
.carte i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(43,92,230,.42)}

/* ORION — les sept briques autour de la semaine projet */
.etoile{width:100%;height:100%;overflow:visible}
.etoile .lien{stroke:rgba(139,92,246,.34);stroke-width:.6;fill:none;
  stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1)}
.--in .etoile .lien{stroke-dashoffset:0}
.etoile .noeud{fill:#E4DAF7}
.etoile .halo{fill:rgba(139,92,246,.20)}
.etoile .brique{font-family:'Inter',system-ui,sans-serif;font-size:3.1px;font-weight:600;
  letter-spacing:.9px;fill:#CDBCEA}
.etoile .centre-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:8.4px;fill:#F2ECFB;letter-spacing:1.6px}
.etoile .centre-s{font-family:'Cormorant Garamond',Georgia,serif;font-size:3.5px;font-style:italic;fill:#A98FD4}
.etoile .anneau{fill:none;stroke:rgba(139,92,246,.30);stroke-width:.45}
.etoile .pouls{animation:poulsOrion 3.4s ease-in-out infinite}
@keyframes poulsOrion{0%,100%{opacity:.5}50%{opacity:1}}

@media (max-width:900px){
  .mzone__grid{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .mzone__visuel{aspect-ratio:4/3;order:2}
  .mzone__texte{order:1}
}
@media (prefers-reduced-motion:reduce){
  .carte i,.etoile .pouls{animation:none}
  .etoile .lien{stroke-dashoffset:0}
}

/* ═══════════════════════════════════════════════════════════
   PAGES DES MAISONS — en-tête, constat, modules
   ═══════════════════════════════════════════════════════════ */
.phero{position:relative;min-height:78svh;display:flex;align-items:center;
  padding-block:clamp(8rem,14vw,11rem) clamp(3rem,6vw,5rem);overflow:hidden}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.phero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--pbg) 0%,rgba(0,0,0,.86) 34%,rgba(0,0,0,.34) 62%,rgba(0,0,0,.6) 100%),
             linear-gradient(180deg,rgba(0,0,0,.82) 0%,transparent 26%,transparent 68%,var(--pbg) 100%)}
.phero .wrap{position:relative;z-index:2}
.phero__retour{
  display:inline-flex;align-items:center;gap:.65rem;margin-bottom:2rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;
  color:var(--mute);font-weight:500;transition:color .3s
}
.phero__retour:hover{color:var(--blanc)}
.phero__retour svg{width:11px;height:11px;transition:transform .35s var(--ease)}
.phero__retour:hover svg{transform:translateX(-4px)}

.p-atlas{--macc:var(--atlas);--pbg:#050914}
.p-orion{--macc:var(--orion);--pbg:#0B0517}
.p-studio{--macc:var(--studio);--pbg:#09090A}
body.p-atlas,body.p-orion,body.p-studio{background:var(--pbg)}

.constat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--rule)}
.constat__col{background:var(--pbg);padding:clamp(1.8rem,3.4vw,2.8rem)}
.constat__col h3{font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  font-weight:600;margin:0 0 .5rem}
.constat__col .sous{font-family:var(--display);font-size:var(--t-md);margin:0 0 1.6rem;line-height:1.2}
.constat__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.constat__col li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  font-size:var(--t-petit);line-height:1.6;color:#AFAFAA}
.constat__col li::before{content:'';width:5px;height:5px;margin-top:.55rem;border-radius:50%;background:currentColor;opacity:.45}
.constat--avant h3{color:var(--mute)}
.constat--avant .sous{color:#8E8E88}
.constat--apres h3{color:var(--macc)}
.constat--apres .sous{color:var(--blanc)}
.constat--apres li::before{background:var(--macc);opacity:1}

.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));gap:1px;background:var(--rule)}
.module{background:var(--pbg);padding:clamp(1.7rem,3vw,2.3rem);display:flex;flex-direction:column;gap:.8rem;
  min-height:216px;transition:background .5s var(--ease)}
.module:hover{background:rgba(244,244,241,.035)}
.module .n{font-family:var(--display);font-size:1.35rem;color:var(--mtxt,var(--macc));opacity:.95}
.module h3{font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin:.4rem 0 0}
.module p{font-size:var(--t-petit);line-height:1.62;color:var(--mute-clair);margin:0}

.pourqui{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(1.4rem,2.6vw,2.2rem)}
.pourqui__bloc{padding-top:1.2rem;border-top:1px solid var(--macc)}
.pourqui__bloc h3{font-family:var(--display);font-size:var(--t-md);font-weight:300;margin:0 0 .7rem;color:var(--blanc)}
.pourqui__bloc p{font-size:var(--t-petit);line-height:1.62;color:var(--mute-clair);margin:0}

/* Exemples : jamais confondables avec des références clientes */
.exemples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr));gap:1px;background:var(--rule)}
.exemple{background:var(--pbg);padding:clamp(1.5rem,2.8vw,2.1rem);display:flex;flex-direction:column;gap:.55rem}
.exemple .cat{font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--macc);font-weight:600}
.exemple .titre{font-family:var(--display);font-size:var(--t-md);line-height:1.2;color:var(--blanc)}
.exemple .meta{font-size:var(--t-petit);color:var(--mute);line-height:1.6;margin:0}
.avis{
  margin-top:1.6rem;padding:1rem 1.2rem;border:1px dashed rgba(244,244,241,.30);
  font-size:var(--t-petit);line-height:1.6;color:var(--mute-clair)
}
.avis strong{color:var(--blanc);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE DES PAGES MAISON — texte et visuel en vis-à-vis.
   Sans ça, l'en-tête sonne creux et le texte flotte au centre.
   ═══════════════════════════════════════════════════════════ */
.phero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem,5.5vw,5.5rem);align-items:center;
}
.phero__visuel{position:relative;width:100%;display:grid;place-items:center}
@media (max-width:980px){
  .phero__grid{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .phero__visuel{order:2}
  .phero__texte{order:1}
}

/* ═══════════════════════════════════════════════════════════
   GRILLES À FILETS — nombre de colonnes qui DIVISE le nombre
   d'éléments. Avec auto-fit, 6 modules sur 4 colonnes laissent
   2 cellules vides : le fond des filets s'y voit en gris.
   ═══════════════════════════════════════════════════════════ */
.modules{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.modules{grid-template-columns:1fr}}

.engagements{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.engagements{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.engagements{grid-template-columns:1fr}}

.exemples{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.exemples{grid-template-columns:1fr}}

.tarif{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.tarif{grid-template-columns:1fr}}

.constat{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.constat{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   TRANSITION ENTRE LES MAISONS
   Le blanc entre deux sections venait d'un vide de 20 rem.
   On resserre, et un filet lumineux marque le passage.
   ═══════════════════════════════════════════════════════════ */
.mzone{padding-block:clamp(4rem,7.5vw,6.5rem)}
.mzone + .mzone{padding-top:clamp(3rem,5.5vw,5rem)}
.mzone + .mzone::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1340px,calc(100% - 2*var(--edge)));height:1px;
  background:linear-gradient(90deg,transparent,var(--macc),transparent);
  opacity:.34;
}

/* ═══════════════════════════════════════════════════════════
   DIAPHRAGME — la signature visuelle du Studio.
   Six lamelles qui respirent : c'est l'objet du métier
   (cadrer, doser la lumière) sans schéma didactique.
   ═══════════════════════════════════════════════════════════ */
.iris{position:relative;width:100%;aspect-ratio:1;max-width:min(100%,420px);margin-inline:auto}
.iris svg{width:100%;height:100%;overflow:visible}
.iris .lame{
  fill:rgba(244,244,241,.055);
  stroke:rgba(244,244,241,.42);stroke-width:.5;stroke-linejoin:round;
  transform-origin:50px 50px;
  animation:irisRespire 11s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes irisRespire{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%    {transform:rotate(19deg) scale(.86)}
}
.iris .bague{fill:none;stroke:rgba(244,244,241,.20);stroke-width:.5}
.iris .grad{fill:none;stroke:rgba(244,244,241,.30);stroke-width:.7;stroke-linecap:round}
.iris .coeur{
  fill:url(#lueurIris);
  animation:irisLueur 11s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes irisLueur{
  0%,100%{opacity:.85;transform:scale(1);transform-origin:50px 50px}
  50%    {opacity:.35;transform:scale(.6);transform-origin:50px 50px}
}
.iris__legende{
  position:absolute;left:0;right:0;bottom:-2.2rem;text-align:center;
  font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
@media (prefers-reduced-motion:reduce){
  .iris .lame,.iris .coeur{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   CANVAS — apparition en fondu plutôt qu'en surgissement
   ═══════════════════════════════════════════════════════════ */
canvas[data-sphere],canvas[data-sphere-seuil]{
  opacity:0;transition:opacity 1.1s var(--ease-doux);
}
canvas[data-sphere].--prete,canvas[data-sphere-seuil].--prete{opacity:1}

/* ═══════════════════════════════════════════════════════════
   SIGNATURE — typographique plutôt qu'une image matricielle
   ═══════════════════════════════════════════════════════════ */
.fond__signe{
  margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid rgba(8,8,8,.14);
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.fond__signe b{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--noir);
  letter-spacing:.01em;
}
.fond__signe span{
  font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  color:#8C8C86;font-weight:500;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT — plus visuel, plus commercial
   ═══════════════════════════════════════════════════════════ */
.ct__sujets{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.ct__sujet{
  position:relative;cursor:pointer;
  padding:.72rem 1.15rem;border:1px solid var(--rule-fort);border-radius:999px;
  font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;font-weight:500;
  color:var(--mute-clair);transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
  user-select:none;
}
.ct__sujet input{position:absolute;opacity:0;pointer-events:none}
.ct__sujet:hover{color:var(--blanc);border-color:var(--blanc)}
.ct__sujet:has(input:checked){background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.ct__sujet:has(input:focus-visible){outline:2px solid var(--champagne);outline-offset:3px}

.ct__gages{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:760px){.ct__gages{grid-template-columns:1fr}}
.ct__gage{background:var(--noir);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.45rem}
.ct__gage b{
  font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,1.9rem);
  line-height:1;color:var(--champagne);font-variant-numeric:tabular-nums;
}
.ct__gage span{font-size:var(--t-micro);letter-spacing:var(--ls-moyen);text-transform:uppercase;color:var(--mute);font-weight:500}
.ct__gage i{font-style:normal;font-size:var(--t-petit);color:var(--mute-clair);line-height:1.55}


/* ═══════════════════════════════════════════════════════════
   SEUIL — champ d'étoiles en CSS pur.
   Aucun WebGL ici : il arrivait après l'écran, on voyait le retard.
   ═══════════════════════════════════════════════════════════ */
.seuil__ciel{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 1.0px at 33.09% 16.48%, rgba(244,244,241,0.21), transparent 100%),
    radial-gradient(circle 2.0px at 37.11% 7.57%, rgba(244,244,241,0.27), transparent 100%),
    radial-gradient(circle 2.0px at 42.14% 25.10%, rgba(244,244,241,0.37), transparent 100%),
    radial-gradient(circle 2.0px at 13.88% 23.43%, rgba(244,244,241,0.60), transparent 100%),
    radial-gradient(circle 1.0px at 40.08% 95.72%, rgba(244,244,241,0.42), transparent 100%),
    radial-gradient(circle 2.0px at 42.24% 53.91%, rgba(244,244,241,0.32), transparent 100%),
    radial-gradient(circle 1.0px at 19.35% 57.83%, rgba(244,244,241,0.34), transparent 100%),
    radial-gradient(circle 1.0px at 8.03% 7.72%, rgba(244,244,241,0.40), transparent 100%),
    radial-gradient(circle 1.5px at 76.61% 46.70%, rgba(244,244,241,0.34), transparent 100%),
    radial-gradient(circle 1.0px at 19.26% 76.86%, rgba(244,244,241,0.43), transparent 100%),
    radial-gradient(circle 1.0px at 86.01% 72.03%, rgba(244,244,241,0.45), transparent 100%),
    radial-gradient(circle 1.0px at 51.15% 17.84%, rgba(244,244,241,0.25), transparent 100%),
    radial-gradient(circle 2.0px at 5.76% 66.15%, rgba(244,244,241,0.43), transparent 100%),
    radial-gradient(circle 2.0px at 32.12% 68.75%, rgba(244,244,241,0.40), transparent 100%),
    radial-gradient(circle 1.0px at 8.60% 10.99%, rgba(244,244,241,0.39), transparent 100%),
    radial-gradient(circle 2.0px at 7.82% 69.34%, rgba(244,244,241,0.62), transparent 100%),
    radial-gradient(circle 1.0px at 29.32% 39.04%, rgba(244,244,241,0.19), transparent 100%),
    radial-gradient(circle 1.0px at 18.13% 13.24%, rgba(244,244,241,0.28), transparent 100%),
    radial-gradient(circle 1.5px at 72.88% 40.20%, rgba(244,244,241,0.22), transparent 100%),
    radial-gradient(circle 1.5px at 54.75% 86.80%, rgba(244,244,241,0.56), transparent 100%),
    radial-gradient(circle 1.5px at 41.87% 36.44%, rgba(244,244,241,0.60), transparent 100%),
    radial-gradient(circle 1.0px at 18.92% 24.27%, rgba(244,244,241,0.19), transparent 100%),
    radial-gradient(circle 1.0px at 19.50% 29.07%, rgba(244,244,241,0.36), transparent 100%),
    radial-gradient(circle 2.0px at 56.37% 93.50%, rgba(244,244,241,0.60), transparent 100%),
    radial-gradient(circle 2.0px at 73.02% 45.84%, rgba(244,244,241,0.35), transparent 100%),
    radial-gradient(circle 1.0px at 11.94% 62.89%, rgba(244,244,241,0.26), transparent 100%),
    radial-gradient(circle 2.0px at 44.30% 12.55%, rgba(244,244,241,0.20), transparent 100%),
    radial-gradient(circle 1.0px at 16.52% 11.74%, rgba(244,244,241,0.45), transparent 100%),
    radial-gradient(circle 1.0px at 21.96% 38.12%, rgba(244,244,241,0.60), transparent 100%),
    radial-gradient(circle 1.5px at 47.52% 13.07%, rgba(244,244,241,0.62), transparent 100%),
    radial-gradient(circle 1.0px at 48.45% 10.24%, rgba(244,244,241,0.51), transparent 100%),
    radial-gradient(circle 2.0px at 47.95% 68.44%, rgba(244,244,241,0.19), transparent 100%),
    radial-gradient(circle 2.0px at 52.71% 16.07%, rgba(244,244,241,0.58), transparent 100%),
    radial-gradient(circle 1.0px at 30.62% 63.72%, rgba(244,244,241,0.49), transparent 100%),
    radial-gradient(circle 1.0px at 37.20% 18.04%, rgba(244,244,241,0.41), transparent 100%),
    radial-gradient(circle 1.0px at 33.65% 23.41%, rgba(244,244,241,0.53), transparent 100%),
    radial-gradient(circle 2.0px at 73.03% 23.77%, rgba(244,244,241,0.40), transparent 100%),
    radial-gradient(circle 1.5px at 97.00% 77.85%, rgba(244,244,241,0.29), transparent 100%),
    radial-gradient(circle 1.0px at 93.83% 44.93%, rgba(244,244,241,0.60), transparent 100%),
    radial-gradient(circle 1.0px at 23.16% 23.78%, rgba(244,244,241,0.33), transparent 100%),
    radial-gradient(circle 1.0px at 96.58% 60.59%, rgba(244,244,241,0.39), transparent 100%),
    radial-gradient(circle 1.0px at 78.77% 10.14%, rgba(244,244,241,0.58), transparent 100%),
    radial-gradient(circle 1.0px at 74.01% 47.89%, rgba(244,244,241,0.37), transparent 100%),
    radial-gradient(circle 1.5px at 10.33% 92.83%, rgba(244,244,241,0.38), transparent 100%),
    radial-gradient(circle 1.0px at 10.15% 17.25%, rgba(244,244,241,0.19), transparent 100%),
    radial-gradient(circle 2.0px at 46.67% 64.96%, rgba(244,244,241,0.54), transparent 100%),
    radial-gradient(circle 2.0px at 65.10% 35.64%, rgba(244,244,241,0.42), transparent 100%),
    radial-gradient(circle 1.0px at 78.74% 71.73%, rgba(244,244,241,0.41), transparent 100%),
    radial-gradient(circle 1.0px at 43.65% 85.69%, rgba(244,244,241,0.19), transparent 100%),
    radial-gradient(circle 1.0px at 50.11% 75.31%, rgba(244,244,241,0.29), transparent 100%),
    radial-gradient(circle 1.0px at 14.58% 89.36%, rgba(244,244,241,0.57), transparent 100%),
    radial-gradient(circle 2.0px at 80.24% 51.61%, rgba(244,244,241,0.24), transparent 100%),
    radial-gradient(circle 1.0px at 51.01% 85.79%, rgba(244,244,241,0.45), transparent 100%),
    radial-gradient(circle 2.0px at 16.38% 15.59%, rgba(244,244,241,0.50), transparent 100%),
    radial-gradient(circle 2.0px at 33.29% 51.76%, rgba(244,244,241,0.39), transparent 100%),
    radial-gradient(circle 1.0px at 86.79% 7.45%, rgba(244,244,241,0.30), transparent 100%),
    radial-gradient(circle 1.0px at 50.74% 55.93%, rgba(244,244,241,0.38), transparent 100%),
    radial-gradient(circle 1.0px at 50.53% 51.17%, rgba(244,244,241,0.38), transparent 100%),
    radial-gradient(circle 2.0px at 47.89% 92.38%, rgba(244,244,241,0.57), transparent 100%),
    radial-gradient(circle 1.0px at 26.92% 55.71%, rgba(244,244,241,0.55), transparent 100%);
  animation:cielRespire 7s ease-in-out infinite;
}
@keyframes cielRespire{0%,100%{opacity:.75}50%{opacity:1}}
.seuil__ciel::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 54% 44% at 50% 48%,rgba(8,8,8,.92) 0%,rgba(8,8,8,.55) 52%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.seuil__ciel{animation:none}}

/* ═══════════════════════════════════════════════════════════
   CARTE — elle portait mal à cette taille : on lui donne
   la colonne large, et davantage de présence.
   ═══════════════════════════════════════════════════════════ */
.phero__grid.--carte{grid-template-columns:minmax(0,.82fr) minmax(0,1.42fr)}
.mzone__grid.--carte{grid-template-columns:minmax(0,.84fr) minmax(0,1.38fr)}
@media (max-width:980px){
  .phero__grid.--carte,.mzone__grid.--carte{grid-template-columns:1fr}
}
.carte img{opacity:.52}
.carte i{width:8px;height:8px;margin:-4px 0 0 -4px}

/* ═══════════════════════════════════════════════════════════
   ORION — un flux, pas une étoile.
   L'étoile dispersait les sept briques ; une ligne les ordonne
   et dit littéralement ce que la copie promet : « sept briques,
   un flux ». Les libellés alternent pour tenir en hauteur.
   ═══════════════════════════════════════════════════════════ */
.flux7{width:100%;height:100%;overflow:visible}
.flux7 .rail{stroke:rgba(139,92,246,.26);stroke-width:.7;fill:none}
.flux7 .parcouru{
  stroke:rgba(139,92,246,.95);stroke-width:1;fill:none;stroke-linecap:round;
  stroke-dasharray:26 172;
  animation:flux7Onde 6.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes flux7Onde{0%{stroke-dashoffset:198}100%{stroke-dashoffset:0}}
.flux7 .halo{fill:rgba(139,92,246,.16)}
.flux7 .pastille{fill:#0B0517;stroke:rgba(139,92,246,.75);stroke-width:.7}
.flux7 .num{font-family:'Cormorant Garamond',Georgia,serif;font-size:4.4px;fill:#C9B6ED}
.flux7 .nom{font-family:'Inter',system-ui,sans-serif;font-size:3.5px;font-weight:600;
  letter-spacing:.85px;fill:#E4DAF7}
.flux7 .tige{stroke:rgba(139,92,246,.30);stroke-width:.4;stroke-dasharray:1.2 1.2}
.flux7 .cap{font-family:'Inter',system-ui,sans-serif;font-size:3px;font-weight:500;
  letter-spacing:1.1px;fill:rgba(201,182,237,.62)}
@media (prefers-reduced-motion:reduce){.flux7 .parcouru{animation:none;stroke-dasharray:none;opacity:.5}}

/* ═══════════════════════════════════════════════════════════
   UNE COLONNE TECHNIQUE
   Le serif classique porte l'émotion ; il lui fallait un
   contrepoint. Le monospace prend TOUT ce qui est donnée,
   coordonnée ou repère système — jamais la prose. C'est ce
   frottement qui fait « maison » ET « système », plutôt que
   « maison » seule.
   ═══════════════════════════════════════════════════════════ */
:root{--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace}

.mzone__chiffre span,
.mzone__chiffre i,
.mzone__pied,
.mzone__head span,
.maison__kind,
.module .n,
.etape .n,
.field label,
.foot__bottom,
.foot__col h4,
.seuil__aut,
.iris__legende,
.hero__pills span,
.ct__sujet,
.nav__lang,
.exemple .cat,
.tarif__carte .k{
  font-family:var(--mono);
  font-weight:400;
  letter-spacing:.14em;
}
.module .n,.etape .n{letter-spacing:.04em;font-weight:300}
.mzone__chiffre i{letter-spacing:.04em;text-transform:none}
.field label{letter-spacing:.16em}

/* ═══════════════════════════════════════════════════════════
   LA DIRECTION — ce que le site ne disait nulle part :
   où tout cela va. Sans cette bande, on décrit un catalogue.
   ═══════════════════════════════════════════════════════════ */
.cap{position:relative;padding-block:clamp(4.5rem,9vw,8rem);overflow:hidden}
.cap__ligne{
  position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--champagne),transparent);
  opacity:.18;
}
.cap__inner{position:relative;max-width:62ch;margin:0 auto;text-align:center}
.cap__these{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1.18;letter-spacing:.005em;
  margin:0 0 1.6rem;text-wrap:balance;
}
.cap__these em{font-style:italic;color:var(--champagne)}
.cap__corps{font-size:var(--t-lede);line-height:1.68;color:#B4B4AF;margin:0 auto;max-width:56ch}
.cap__socle{
  display:flex;justify-content:center;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
.cap__socle span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
}
.cap__socle b{color:var(--champagne);font-weight:400}

/* ═══════════════════════════════════════════════════════════
   LISIBILITÉ — correction mesurée
   42 éléments passaient sous le seuil WCAG AA (4,5:1) et 43
   textes descendaient sous 14 px. La cause était à la racine :
   l'échelle s'arrêtait à 9 px et les gris étaient trop faibles.
   On corrige les jetons — tout le site suit.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Plancher à 11 px pour les micro-libellés, 15 px pour le petit texte. */
  --t-micro:clamp(11px,.78vw,12px);
  --t-label:clamp(12px,.86vw,13px);
  --t-petit:clamp(.94rem,1.02vw,1rem);
  --t-corps:clamp(1rem,1.1vw,1.06rem);
  --t-lede:clamp(1.06rem,1.28vw,1.16rem);

  /* Gris relevés : 5,6:1 et 7,8:1 sur le noyer, au lieu de 4,1:1. */
  --mute:#8C8C84;
  --mute-clair:#B4B4AC;
}

/* Sections claires : les gris y étaient les pires (3,07:1). */
.sec--blanc .eyebrow,
.sec--blanc .micro,
.fond__role,
.fond__sigcap,
.fond__citation cite,
.etape h3{color:#63635D}
.sec--blanc .lede,
.parcours .det,
.etape p,
.fond__bio{color:#3E3E3A}
.fond__nom em{color:#63635D}
.fond__intro{color:#5A5A55}
.parcours .quoi{color:var(--noir)}

/* Le corps de texte sur fond sombre */
.mzone__desc,.lede,.hero__sub,.contact__promesse{color:#C8C8C2}
.module p,.constat__col li,.pourqui__bloc p,.lab__card .d,.exemple .meta,
.tarif__carte li,.cap__corps{color:#B4B4AC}
.contact__rgpd,.avis{color:#A6A69E}

/* Les capitales espacées restent, mais lisibles */
.eyebrow,.micro,.mzone__head span,.mzone__pied,.hero__pills span,
.foot__col h4,.foot__bottom,.field label{font-size:var(--t-micro)}
.mzone__chiffre span{font-size:var(--t-micro)}
.mzone__chiffre i{font-size:var(--t-petit);letter-spacing:.01em}
.foot__col a,.contact__direct{font-size:var(--t-petit)}

/* Les deux derniers sous le seuil, et un plancher à 12 px. */
:root{--t-micro:clamp(12px,.82vw,13px)}
.fond__signe span{color:#63635D}
/* Le cobalt sur fond marine ne tenait que 3,6:1 : on l'éclaircit
   pour ce libellé seul, sans toucher à la couleur de la maison. */
.m-atlas .mzone__head .g,.p-atlas .mzone__head .g{color:#7E9BF0}
.m-orion .mzone__head .g,.p-orion .mzone__head .g{color:#B79CF7}
.m-studio .mzone__head .g,.p-studio .mzone__head .g{color:#CFD2D6}

/* ═══════════════════════════════════════════════════════════
   LE SOCLE — la vision avait besoin d'une forme concrète
   ═══════════════════════════════════════════════════════════ */
.socle{margin-top:clamp(2.4rem,4.5vw,3.4rem);text-align:left;max-width:560px;margin-inline:auto}
.socle__tronc{
  font-family:var(--mono);font-size:var(--t-petit);letter-spacing:.06em;
  color:var(--champagne);padding-bottom:.9rem;margin-bottom:.2rem;
  border-bottom:1px solid var(--rule);
}
.socle__branche{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid var(--rule);
}
.socle__branche:last-child{border-bottom:0}
.socle__branche .arbre{font-family:var(--mono);color:var(--mute);font-size:var(--t-petit)}
.socle__branche .quoi{font-family:var(--display);font-size:var(--t-md);line-height:1.2;color:var(--blanc)}
.socle__branche .quoi small{
  display:block;font-family:var(--body);font-size:var(--t-petit);
  color:var(--mute-clair);letter-spacing:0;margin-top:.2rem;
}
.socle__branche .etat{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .65rem;border:1px solid var(--rule-fort);border-radius:999px;white-space:nowrap;
}
.socle__branche .etat.--vif{color:var(--champagne);border-color:rgba(200,178,122,.45)}
.socle__branche .etat.--venir{color:var(--mute)}
.socle__gains{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(2rem,3.5vw,2.8rem);padding-top:1.6rem;border-top:1px solid var(--rule);text-align:left;
}
@media (max-width:760px){.socle__gains{grid-template-columns:1fr;gap:1.2rem}}
.socle__gains p{font-size:var(--t-petit);line-height:1.6;color:var(--mute-clair);margin:0}
.socle__gains b{display:block;color:var(--blanc);font-weight:500;margin-bottom:.3rem;font-size:var(--t-corps)}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE — l'échéance, et un choix pour ceux qui ne savent pas
   ═══════════════════════════════════════════════════════════ */
.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-fort);
  color:var(--blanc);font-family:var(--body);font-size:var(--t-corps);font-weight:300;
  padding:.72rem 0;transition:border-color .38s;cursor:pointer;
}
.field select:focus{outline:0;border-bottom-color:var(--champagne)}
.field select option{background:var(--noir-2);color:var(--blanc)}
.contact__status.--ok{
  display:block;padding:1rem 1.2rem;margin-top:1.2rem;
  border:1px solid rgba(200,178,122,.45);background:rgba(200,178,122,.07);
}

/* ═══════════════════════════════════════════════════════════
   LISIBILITÉ, SECONDE PASSE
   Les ratios passaient tous (5,9:1 minimum) et le texte semblait
   pourtant pâle : la cause n'était pas la couleur mais la GRAISSE.
   Du 300 sur du texte courant donne des traits si fins qu'ils
   disparaissent, quel que soit le contraste calculé.
   Le serif de titrage garde son 300 — c'est son dessin.
   ═══════════════════════════════════════════════════════════ */
:root{
  --mute:#9C9C94;        /* 7,0:1 au lieu de 5,9:1 */
  --mute-clair:#C4C4BC;  /* 10,9:1 */
}
body{font-weight:400}
p,li,span,label,input,textarea,select,.lede,.mzone__desc,
.module p,.constat__col li,.pourqui__bloc p,.cap__corps,
.tarif__carte li,.exemple .meta,.contact__rgpd,.avis,
.socle__gains p,.fond__bio{font-weight:400}

/* Le texte courant, plus franc */
.hero__sub,.mzone__desc,.lede,.contact__promesse,.cap__corps{color:#D4D4CE}
.sec--blanc .lede,.parcours .det,.etape p,.fond__bio{color:#363632}

/* Les capitales espacées : 500 minimum, sinon elles se délavent */
.eyebrow,.micro,.mzone__head span,.mzone__pied,.hero__pills span,
.hero__side span,.foot__col h4,.foot__bottom,.field label,
.mzone__chiffre span,.hero__defile{font-weight:500}

/* Le hero écrit par-dessus la sphère : le voile doit être
   assez dense sous le texte pour que le contraste soit STABLE,
   et pas seulement bon en moyenne. */
.hero::after{
  background:
    linear-gradient(100deg,var(--noir) 0%,rgba(8,8,8,.96) 34%,rgba(8,8,8,.52) 56%,rgba(8,8,8,.14) 74%,rgba(8,8,8,.48) 100%),
    linear-gradient(180deg,rgba(8,8,8,.90) 0%,transparent 24%,transparent 68%,var(--noir) 100%);
}
@media (max-width:980px){
  .hero::after{
    background:linear-gradient(180deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.92) 32%,rgba(8,8,8,.46) 54%,transparent 76%,var(--noir) 100%);
  }
}

/* Les boutons doivent se voir comme des boutons */
.btn--fantome{border-color:rgba(244,244,241,.42)}
.btn--fantome:hover{border-color:var(--blanc)}
.nav__cta{border-color:rgba(244,244,241,.38)}
.mzone__cta{border-width:1px}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE — « LES MAISONS » et le bouton passaient sur deux
   lignes : on resserre, on raccourcit, et le menu replié
   arrive plus tôt (tablette comprise).
   ═══════════════════════════════════════════════════════════ */
.nav__links{gap:1.6rem}
.nav__links a{white-space:nowrap}
.nav__cta{white-space:nowrap;padding:.72rem 1.15rem}
.nav__cta span{white-space:nowrap}
@media (max-width:1100px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
}

/* ═══════════════════════════════════════════════════════════
   UNE VARIANTE TEXTE PAR MAISON
   Le cobalt et le violet sont justes comme COULEUR DE MAISON
   (filets, lueurs, bordures) mais ne tiennent que 3,6:1 en
   petit texte. On éclaircit uniquement pour le texte : la
   couleur de marque ne bouge pas.
   ═══════════════════════════════════════════════════════════ */
:root{
  --atlas-txt:#8AA5F2;
  --orion-txt:#BEA5F8;
  --studio-txt:#D2D5D9;
}
.p-atlas,.m-atlas{--mtxt:var(--atlas-txt)}
.p-orion,.m-orion{--mtxt:var(--orion-txt)}
.p-studio,.m-studio{--mtxt:var(--studio-txt)}

/* Les styles en ligne l'emportent sur les classes : on neutralise
   ces trois-la nommement plutot que d'editer chaque balise. */
.p-atlas  .eyebrow[style*="--atlas"]{color:var(--atlas-txt)!important}
.p-orion  .eyebrow[style*="--orion"]{color:var(--orion-txt)!important}
.p-studio .eyebrow[style*="--studio"]{color:var(--studio-txt)!important}

/* Petits textes colorés par la maison */
.constat--apres h3,
.exemple .cat,
.maison__role{color:var(--mtxt,var(--champagne))}
.p-atlas .constat--apres li::before{background:var(--atlas-txt)}
.p-orion .constat--apres li::before{background:var(--orion-txt)}
.p-studio .constat--apres li::before{background:var(--studio-txt)}

/* ═══════════════════════════════════════════════════════════
   DIAGNOSTIC — deux questions, une orientation
   Le visiteur sait ce qu'il veut faire avancer ; il ne sait pas
   toujours laquelle de nos trois maisons le concerne.
   ═══════════════════════════════════════════════════════════ */
.diag{max-width:760px;margin:0 auto}
.diag__q{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.diag__q > legend{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--champagne);font-weight:500;
  padding:0;margin-bottom:1rem;display:block;
}
.diag__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;border:0;padding:0;margin:0}
@media (max-width:640px){.diag__opts{grid-template-columns:1fr}}
.diag__opt{
  position:relative;display:block;cursor:pointer;
  padding:1.05rem 1.25rem;border:1px solid var(--rule-fort);
  font-size:var(--t-petit);line-height:1.45;color:var(--mute-clair);
  transition:color .32s var(--ease),border-color .32s var(--ease),background .32s var(--ease);
}
.diag__opt input{position:absolute;opacity:0;width:1px;height:1px}
.diag__opt:hover{color:var(--blanc);border-color:rgba(244,244,241,.45)}
.diag__opt:has(input:checked){background:var(--blanc);color:var(--noir);border-color:var(--blanc);font-weight:500}
.diag__opt:has(input:focus-visible){outline:2px solid var(--champagne);outline-offset:3px}

.diag__out{
  margin-top:clamp(1.8rem,3vw,2.6rem);padding-top:1.8rem;border-top:1px solid var(--rule);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.diag__out.--vu{opacity:1;transform:none}
.diag__out[hidden]{display:none}
.diag__verdict{
  font-family:var(--display);font-weight:300;font-size:var(--t-lg);line-height:1.2;
  margin:0 0 1.2rem;color:var(--blanc);
}
.diag__verdict em{font-style:italic;color:var(--champagne)}
.diag__etapes{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.diag__etapes li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  font-size:var(--t-petit);line-height:1.6;color:var(--mute-clair);
}
.diag__etapes li b{font-family:var(--mono);font-size:var(--t-micro);color:var(--champagne);font-weight:400}

/* ═══════════════════════════════════════════════════════════
   FLUX — Atlas et Orion rendus lisibles en cinq secondes
   ═══════════════════════════════════════════════════════════ */
.etapes-flux{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--rule);
}
@media (max-width:760px){.etapes-flux{grid-auto-flow:row;grid-auto-columns:auto}}
.etapes-flux > div{
  position:relative;padding:1.1rem 1rem 0 0;
}
.etapes-flux > div::before{
  content:'';position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--mtxt,var(--champagne));
  transition:width .9s var(--ease);
}
.--in .etapes-flux > div::before{width:100%}
.--in .etapes-flux > div:nth-child(2)::before{transition-delay:.18s}
.--in .etapes-flux > div:nth-child(3)::before{transition-delay:.36s}
.--in .etapes-flux > div:nth-child(4)::before{transition-delay:.54s}
.--in .etapes-flux > div:nth-child(5)::before{transition-delay:.72s}
.etapes-flux .q{
  display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--mtxt,var(--champagne));margin-bottom:.4rem;
}
.etapes-flux .n{display:block;font-size:var(--t-petit);line-height:1.4;color:var(--blanc);font-weight:500}
.etapes-flux .d{display:block;font-size:var(--t-micro);line-height:1.5;color:var(--mute);margin-top:.3rem;
  letter-spacing:0;text-transform:none;font-family:var(--body)}

/* ═══════════════════════════════════════════════════════════
   APRÈS LA LIVRAISON — rendre la promesse de durée concrète
   ═══════════════════════════════════════════════════════════ */
.apres{margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.8rem;border-top:1px solid rgba(8,8,8,.16)}
.apres__titre{
  font-family:var(--display);font-weight:300;font-size:var(--t-md);line-height:1.2;
  color:var(--noir);margin:0 0 1.6rem;
}
.apres__ligne{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
@media (max-width:760px){.apres__ligne{grid-auto-flow:row;gap:1rem}}
.apres__pt{position:relative;padding-top:1.4rem;padding-right:1rem}
.apres__pt::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(8,8,8,.18);
}
.apres__pt::after{
  content:'';position:absolute;top:-3.5px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--noir);
}
.apres__pt:last-child::after{background:var(--champagne);width:9px;height:9px;top:-4.5px}
.apres__pt .q{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;color:#63635D;margin-bottom:.35rem}
.apres__pt .n{display:block;font-size:var(--t-petit);line-height:1.45;color:var(--noir);font-weight:500}

/* ══════════════════════════════════════════════════════════════════
   LE CŒUR — noyau minéral et arborescence vers les trois maisons.
   Tout est en trait de 1 px : on cherche le plan d'architecte,
   pas la boule d'énergie. Aucune lueur, aucune pulsation.
   ══════════════════════════════════════════════════════════════════ */
/* Au-dessus de .hero__inner (z-index 4) : les maisons vivent dans cette
   couche, et sous lui elles recevaient .hero__grid a leur place — donc
   ni survol ni clic. La couche ne capte rien (pointer-events:none),
   seuls les liens .branche le font : les boutons du hero sont intacts. */
[data-coeur]{position:absolute;inset:0;z-index:5;pointer-events:none}
[data-coeur] svg{width:100%;height:100%;display:block;overflow:visible}
[data-coeur].est-muet{opacity:0}

/* Le glyphe : trois cercles concentriques et un point. Rien d'inscrit
   dedans — un hexagone dans un cercle se lit comme un écrou. */
.coeur__glyphe{opacity:.46;transition:opacity 1.1s var(--ease)}
[data-coeur].est-eveil .coeur__glyphe{opacity:.92}

.coeur__glyphe circle,
.coeur__glyphe path,
.coeur__glyphe line{
  fill:none;stroke:var(--champagne);
  vector-effect:non-scaling-stroke;stroke-width:1;
}
.coeur__anneau{stroke-opacity:.46}
.coeur__anneau--mince{stroke-opacity:.28}
.coeur__reticule{stroke-opacity:.30}
.coeur__noyau{fill:var(--champagne);stroke:none;fill-opacity:.55;
  transition:fill-opacity 1.1s var(--ease)}
[data-coeur].est-eveil .coeur__noyau{fill-opacity:1}

/* Tronc, épine, branches : tracés au dash, en cascade. */
.coeur__trait{
  fill:none;stroke:var(--champagne);stroke-width:1;
  vector-effect:non-scaling-stroke;stroke-opacity:.55;
  transition:stroke-dashoffset 1.05s var(--ease), stroke-opacity .5s var(--ease);
}
[data-coeur].est-eveil .coeur__trait{stroke-dashoffset:0 !important}
.coeur__trait[data-epine]{transition-delay:.42s}
.coeur__trait[data-branche]{transition-delay:.62s}
.coeur__trait[data-branche="orion"]{transition-delay:.72s}
.coeur__trait[data-branche="studio"]{transition-delay:.82s}

/* Une maison visée : sa branche ressort, les autres s'effacent un peu.
   Poids égal entre les deux règles (0,4,0) : c'est l'ordre qui tranche,
   donc la mise en avant, écrite après, l'emporte. Avec un :not() en plus,
   l'atténuation pesait plus lourd et éteignait aussi la branche visée. */
[data-coeur][data-vise] .coeur__trait[data-branche]{stroke-opacity:.16}
[data-coeur][data-vise="atlas"]  .coeur__trait[data-branche="atlas"],
[data-coeur][data-vise="orion"]  .coeur__trait[data-branche="orion"],
[data-coeur][data-vise="studio"] .coeur__trait[data-branche="studio"]{stroke-opacity:.95}

/* Écran étroit : pas d'index latéral, donc pas d'arbre — le noyau reste
   seul, en repère gravé dans la sphère. */
[data-coeur].est-seul .coeur__trait{display:none}

/* ── Les trois maisons, en regard du cœur ── */
/* Les maisons sont posees par le script a cote du noyau, a sa hauteur :
   ancrees au bord droit de la page, elles en etaient trop loin et le
   tronc traversait un vide de 300 px. */
.branches{
  position:absolute;visibility:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;
  text-align:left;
}
.branches.est-posee{visibility:visible}
@media (max-width:980px){ .branches{display:none} }
.branche{
  display:block;border:0;pointer-events:auto;
  padding:.26rem 0 .3rem;line-height:1.25;
  transition:opacity .5s var(--ease);
}
/* .hero__side span (0,1,1) battrait une classe seule (0,1,0) : sans ce
   préfixe, la phrase repasserait en capitales avec l'interlettrage des
   étiquettes, et ne se lirait plus comme une légende. */
[data-coeur] .branche__nom{
  display:block;
  font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  color:var(--mute);font-weight:500;
  transition:color .45s var(--ease);
}
/* La phrase occupe sa ligne dès le repos, invisible : sans cette réserve,
   son apparition pousserait les étiquettes et l'arbre bougerait. */
[data-coeur] .branche__dit{
  display:block;height:1.05em;overflow:hidden;
  font-size:var(--t-micro);letter-spacing:.06em;text-transform:none;
  color:var(--mute);opacity:0;transform:translateX(-5px);
  white-space:nowrap;font-weight:400;
  transition:opacity .55s var(--ease), transform .55s var(--ease), color .45s var(--ease);
}
[data-coeur] .branche.est-actif .branche__nom{color:var(--blanc)}
[data-coeur] .branche.est-actif .branche__dit{opacity:.92;transform:none;color:var(--champagne)}
.branche:focus-visible{outline:1px solid var(--champagne);outline-offset:4px}

.hero__side{align-items:flex-end}
.hero__hebergement{
  font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  color:var(--mute);font-weight:500;text-align:right;
}

/* ══════════════════════════════════════════════════════════════════
   LE PLAN DE DÉPART — la conclusion du diagnostic.
   Une chaîne verticale qui se trace, pas une liste à puces : le
   visiteur doit voir un chemin, pas trois phrases de plus.
   ══════════════════════════════════════════════════════════════════ */
.plan__mot{
  font-size:var(--t-lede);line-height:1.6;color:var(--marbre);
  margin:0 0 clamp(1.8rem,3.4vw,2.6rem);max-width:54ch;
}
.plan{margin:0 0 clamp(2rem,3.6vw,2.8rem)}
.plan__titre{
  display:block;margin-bottom:1.5rem;
  font-size:var(--t-micro);letter-spacing:var(--ls-large);text-transform:uppercase;
  color:var(--champagne);font-weight:600;
}
.plan__liste{list-style:none;margin:0;padding:0}

.plan__pas{
  --puce:26px;
  position:relative;display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(1rem,2vw,1.5rem);
  padding-bottom:clamp(1.15rem,2.2vw,1.6rem);
  opacity:0;transform:translateY(8px);
}
.plan__pas:last-child{padding-bottom:0}

/* Le fil qui relie les étapes. Il descend depuis le numéro. */
.plan__pas::before{
  content:'';position:absolute;left:calc(var(--puce) / 2);
  top:var(--puce);bottom:0;width:1px;
  background:linear-gradient(180deg,var(--champagne),rgba(200,178,122,.22));
  transform:scaleY(0);transform-origin:top;
}
.plan__pas:last-child::before{display:none}

.plan__n{
  width:var(--puce);height:var(--puce);border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(200,178,122,.38);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--champagne);background:var(--noir-2);
  position:relative;z-index:1;
}
.plan__corps{padding-top:.18rem}
.plan__t{
  display:block;font-size:var(--t-petit);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blanc);
  margin-bottom:.34rem;
}
.plan__d{display:block;font-size:var(--t-petit);line-height:1.62;color:#B8B8B3;max-width:52ch}

/* Le tracé : les étapes arrivent l'une après l'autre, le fil descend
   derrière elles. L'index --i est posé par le script. */
.plan__liste.est-trace .plan__pas{
  opacity:1;transform:none;
  transition:opacity .52s var(--ease), transform .52s var(--ease);
  transition-delay:calc(var(--i) * .13s);
}
.plan__liste.est-trace .plan__pas::before{
  transform:scaleY(1);
  transition:transform .5s var(--ease);
  transition-delay:calc(var(--i) * .13s + .22s);
}

@media (max-width:560px){
  .plan__pas{--puce:23px}
  .plan__n{font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  .coeur__trait{transition:none}
  [data-coeur] .branche__dit{transition:none}
  .plan__pas{opacity:1;transform:none}
  .plan__pas::before{transform:scaleY(1)}
  .plan__liste.est-trace .plan__pas,
  .plan__liste.est-trace .plan__pas::before{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   HERO SUR TÉLÉPHONE — alléger.
   Le hero mesurait 909 px pour un écran de 812 : rien ne tenait, la
   rangée de publics passait sur deux lignes et les deux boutons pleine
   largeur empilaient 127 px de blocs. On réduit l'échelle et les
   respirations plutôt que de retirer du contenu.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .hero{padding-block:7.5rem 3rem}
  .hero .eyebrow{margin-bottom:1.1rem}
  .hero__wordmark{margin-bottom:1.3rem}
  .hero__claim{font-size:clamp(1.95rem,8.4vw,2.3rem);line-height:1.1;margin-bottom:1.1rem}
  .hero__sub{font-size:1rem;line-height:1.55;margin-bottom:1.9rem;max-width:36ch}
  .hero__actions{gap:.6rem;margin-bottom:1.7rem}
  .hero__actions .btn{padding-block:.92rem}

  /* Les publics tenaient sur deux lignes : resserrés, ils tiennent sur une,
     et la rangée cesse d'être un pavé. */
  .hero__pills{gap:.7rem;flex-wrap:nowrap;white-space:nowrap}
  .hero__pills span{letter-spacing:.16em;font-size:10.5px}

  /* Le halo faisait une tache claire derrière le texte, à pleine
     intensité et centré : c'est lui qui donnait l'impression de bruit. */
  .hero__halo{opacity:.55;width:min(52vh,340px)}

  /* Le hero compact ne laisse plus de place sous le texte : la sphère
     passe forcément derrière lui. À pleine intensité elle concurrence la
     lecture — on la ramène au rang de texture. */
  .hero canvas[data-sphere].--prete{opacity:.46}
}

/* La maison visée teinte le noyau et sa branche : cobalt pour Atlas,
   violet pour Orion, chrome pour Studio. La DA de chaque maison existe
   déjà en variante lisible (--atlas-txt et consorts) — on la réutilise
   plutôt que d'inventer une seconde palette. */
[data-coeur][data-vise="atlas"]  .coeur__trait[data-branche="atlas"]{stroke:var(--atlas-txt)}
[data-coeur][data-vise="orion"]  .coeur__trait[data-branche="orion"]{stroke:var(--orion-txt)}
[data-coeur][data-vise="studio"] .coeur__trait[data-branche="studio"]{stroke:var(--studio-txt)}

[data-coeur] .coeur__glyphe circle,
[data-coeur] .coeur__glyphe line{transition:stroke 1s var(--ease)}
[data-coeur] .coeur__noyau{transition:fill-opacity 1.1s var(--ease), fill 1s var(--ease)}

/* Le trait des anneaux prend la teinte. Surtout PAS le remplissage :
   ces cercles doivent rester creux, sinon le noyau devient un disque. */
[data-coeur][data-vise="atlas"]  .coeur__glyphe circle:not(.coeur__noyau),
[data-coeur][data-vise="atlas"]  .coeur__glyphe line{stroke:var(--atlas-txt)}
[data-coeur][data-vise="orion"]  .coeur__glyphe circle:not(.coeur__noyau),
[data-coeur][data-vise="orion"]  .coeur__glyphe line{stroke:var(--orion-txt)}
[data-coeur][data-vise="studio"] .coeur__glyphe circle:not(.coeur__noyau),
[data-coeur][data-vise="studio"] .coeur__glyphe line{stroke:var(--studio-txt)}

/* Le point central est le seul élément plein. */
[data-coeur][data-vise="atlas"]  .coeur__noyau{fill:var(--atlas-txt)}
[data-coeur][data-vise="orion"]  .coeur__noyau{fill:var(--orion-txt)}
[data-coeur][data-vise="studio"] .coeur__noyau{fill:var(--studio-txt)}

[data-coeur][data-vise="atlas"]  .branche.est-actif .branche__dit{color:var(--atlas-txt)}
[data-coeur][data-vise="orion"]  .branche.est-actif .branche__dit{color:var(--orion-txt)}
[data-coeur][data-vise="studio"] .branche.est-actif .branche__dit{color:var(--studio-txt)}