/* ═══════════════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════════════ */
:root{
  --intro:1.15s;
  --bg:#000000; --bg-2:#000000; --bg-3:#000000;
  --silver:#C0C0C0; --silver-dim:#848484; --silver-lo:#4A4A4A; --silver-hi:#D8D8D8;
  --gold:#C9A84C; --gold-dim:rgba(201,168,76,.13); --gold-line:rgba(201,168,76,.28);
  --chrome:#B0B8C4; --chrome-hi:#D4DCE8;
  --blue:#6F94F0; --blue-hi:#A9C0FF; --blue-dim:rgba(111,148,240,.14); --blue-line:rgba(111,148,240,.32);
  --white:#E8E8E8;
  --ff-display:'Cormorant Garamond',Georgia,serif;
  --ff-bold:'Fraunces',Georgia,serif;
  --ff-body:'Barlow',Helvetica Neue,Helvetica,Arial,sans-serif;
  --ff-cond:'Barlow Condensed',Helvetica Neue,Helvetica,Arial,sans-serif;
  --nav-h:64px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:24px;
}
@media(min-width:768px){ :root{ --pad:48px; --nav-h:72px; } }
@media(min-width:1100px){ :root{ --pad:60px; } }

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--silver);
  font-family:var(--ff-body); font-weight:300; line-height:1.7;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
:focus-visible{outline:1px solid var(--gold); outline-offset:3px;}

body::before{
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px; opacity:.025; pointer-events:none; z-index:9990;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

.eyebrow{
  font-family:var(--ff-body); font-weight:300; font-size:9px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:linear-gradient(90deg,var(--gold),var(--blue));flex-shrink:0;}

.section-label{
  font-family:var(--ff-body); font-size:9px; font-weight:300;
  letter-spacing:.5em; text-transform:uppercase; color:var(--silver-dim);
  margin-bottom:18px;
}

/* ═══════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════ */
#progress-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--blue));z-index:300;transition:width .1s linear;}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(201,168,76,.10);
}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-brand img{width:22px;height:22px;object-fit:contain;filter:brightness(1.3);}
.nav-brand span{
  font-family:var(--ff-body); font-weight:300; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--silver-hi);
}
.nav-links{display:none; align-items:center; gap:32px;}
.nav-links a{
  font-family:var(--ff-body); font-weight:300; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--silver-dim);
  position:relative; white-space:nowrap; transition:color .3s var(--ease);
}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease);}
.nav-links a:hover{color:var(--silver);}
.nav-links a:hover::after{width:100%;}

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:none; cursor:pointer; padding:4px; z-index:210;
}
.nav-toggle span{display:block;width:100%;height:1px;background:var(--silver-dim);transition:transform .35s var(--ease),opacity .3s,background .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--gold);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--gold);}

.nav-drawer{
  position:fixed; inset:0; background:rgba(9,9,9,.98);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  z-index:190; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.nav-drawer.open{opacity:1;pointer-events:all;}
.nav-drawer a{
  font-family:var(--ff-display); font-weight:300; font-style:italic; font-size:22px;
  color:var(--silver-hi); transition:color .3s;
}
.nav-drawer a:hover{color:var(--gold);}

@media(min-width:900px){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--pad) 60px;
  position:relative; overflow:hidden;
}
#hero .ambient-blob{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
  animation:drift 16s ease-in-out infinite alternate;
}
#hero .ambient-blob.b1{width:420px; height:420px; top:-10%; right:-8%; background:radial-gradient(circle,var(--blue-dim),transparent 70%);}
#hero .ambient-blob.b2{width:360px; height:360px; bottom:-14%; left:-6%; background:radial-gradient(circle,var(--gold-dim),transparent 70%); animation-delay:3s;}
#hero > *:not(.ambient-blob){position:relative; z-index:1;}
@keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(24px,-18px) scale(1.08);}}
@media(prefers-reduced-motion:reduce){ #hero .ambient-blob{animation:none;} }
#hero::after{content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);}
.hero-rule{width:1px;height:48px;background:linear-gradient(to bottom,transparent,var(--gold-line));margin-bottom:26px;opacity:0;animation:fadeIn .8s var(--ease) calc(var(--intro) + .2s) forwards;}
.hero-eyebrow{opacity:0;animation:fadeUp .7s var(--ease) calc(var(--intro) + .35s) forwards;}
.hero-title{
  font-family:var(--ff-bold); font-weight:800; font-size:clamp(42px,12vw,116px);
  text-transform:none; line-height:.98; letter-spacing:-.02em;
  color:var(--white); margin-top:26px; max-width:920px;
}
.hero-title .word{display:inline-block; opacity:0; transform:translateY(28px) rotate(1deg); animation:wordUp .8s var(--ease-out) forwards;}
.hero-title .accent{font-style:italic; font-weight:700;}
@keyframes wordUp{to{opacity:1; transform:none;}}
.hero-tagline{
  margin-top:30px; font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(15px,2.3vw,21px); color:var(--silver-dim); max-width:560px;
  line-height:1.6; opacity:0; animation:fadeUp .8s var(--ease) calc(var(--intro) + .72s) forwards;
}
.hero-scroll{
  margin-top:64px; display:flex; align-items:center; gap:14px;
  font-size:9px; letter-spacing:.4em; text-transform:uppercase; color:var(--silver-lo);
  opacity:0; animation:fadeIn .8s var(--ease) calc(var(--intro) + 1s) forwards;
}
.hero-scroll::after{content:'';width:1px;height:32px;background:linear-gradient(to bottom,var(--gold-line),transparent);}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ═══════════════════════════════════════════
   MANIFESTE BAND
═══════════════════════════════════════════ */
#manifeste{
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:76px var(--pad); text-align:center;
  position:relative; overflow:hidden;
}
#manifeste::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 30%,rgba(201,168,76,.06) 0%,transparent 55%),
             radial-gradient(ellipse at 75% 70%,var(--blue-dim) 0%,transparent 55%);
  pointer-events:none; animation:manifestGlow 12s ease-in-out infinite alternate;
}
@keyframes manifestGlow{from{opacity:.7;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){ #manifeste::before{animation:none;} }
.manifeste-quote{
  font-family:var(--ff-bold); font-weight:600; font-style:italic;
  font-size:clamp(24px,4.8vw,48px); line-height:1.22; color:var(--white);
  max-width:820px; margin:0 auto; position:relative; letter-spacing:-.01em;
}
.manifeste-quote em{font-style:italic;}
.manifeste-sub{
  margin-top:24px; font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--silver-lo); position:relative;
}

/* ═══════════════════════════════════════════
   GENERIC SECTION SCAFFOLD (mobile-first stack, desktop = 2-col)
═══════════════════════════════════════════ */
.section{padding:80px var(--pad); position:relative; border-top:1px solid rgba(255,255,255,.05);}
.section-inner{max-width:1180px;margin:0 auto;}
.section-head{margin-bottom:48px;}
.section-head::after{
  content:''; display:block; width:64px; height:3px; margin-top:22px;
  background:linear-gradient(90deg,var(--gold),var(--blue));
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-out) .15s;
}
.section-head.visible::after{transform:scaleX(1);}
.section-title{
  font-family:var(--ff-bold); font-weight:700; font-size:clamp(30px,5.4vw,50px);
  line-height:1.08; color:var(--white); letter-spacing:-.015em;
}
.section-title em{font-style:italic; font-weight:600;}
.section-intro{
  margin-top:20px; font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(14px,1.6vw,17px); color:var(--silver-dim); max-width:620px; line-height:1.7;
}

.two-col{display:grid; gap:36px;}
@media(min-width:900px){ .two-col{grid-template-columns:1fr 2fr; gap:64px;} }

/* ═══════════════════════════════════════════
   TRAVAUX / SELECTED WORK
═══════════════════════════════════════════ */
.work-grid{display:grid; gap:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
@media(min-width:768px){ .work-grid{grid-template-columns:1fr 1fr;} }
.work-card{
  background:var(--bg); padding:40px 28px; position:relative; overflow:hidden;
  transition:background .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover{background:var(--bg-2); transform:translateY(-6px); box-shadow:0 18px 40px -20px var(--blue-line);}
.work-card-index{font-family:var(--ff-cond); font-size:11px; letter-spacing:.3em; color:var(--blue-hi); margin-bottom:22px;}
.work-card-name{font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:28px; color:var(--white); margin-bottom:10px;}
.work-card-meta{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver-lo); margin-bottom:18px;}
.work-card-desc{font-size:13.5px; color:var(--silver-dim); line-height:1.8; max-width:420px;}
.work-card-placeholder{
  margin-top:24px; display:inline-flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-lo);
  border:1px dashed rgba(255,255,255,.12); padding:8px 14px;
}

/* ═══════════════════════════════════════════
   VISION · LES DEUX CYGNES
═══════════════════════════════════════════ */
#vision{background:var(--bg-2);}
.force-block{padding-top:44px; padding-bottom:44px;}
.force-block + .force-block{border-top:1px solid rgba(255,255,255,.05);}
.force-tag{font-family:var(--ff-cond); font-size:10px; letter-spacing:.34em; text-transform:uppercase; margin-bottom:14px;}
.force-title{font-family:var(--ff-bold); font-weight:700; font-size:clamp(26px,3.6vw,36px); color:var(--white); margin-bottom:6px; letter-spacing:-.01em;}
.force-title span{display:block; font-weight:500; font-style:italic; font-size:.54em; margin-top:8px;}
.force-body p{font-size:13.5px; color:var(--silver-dim); line-height:1.85; margin-bottom:1.3em; max-width:640px;}
.force-body p:last-child{margin-bottom:0;}
.force-body em{font-style:normal; color:var(--silver);}
.force-visual{
  margin-top:32px; max-width:340px;
}
.force-visual img{
  width:100%; height:auto; mix-blend-mode:screen; opacity:.85;
  filter:brightness(1) contrast(1) saturate(.9) drop-shadow(0 0 0 rgba(0,0,0,0));
  transform:scale(1);
  transition:opacity .6s var(--ease), filter .8s var(--ease), transform 1s var(--ease);
}
.swan-hover:hover img{
  opacity:1; transform:scale(1.035);
  filter:brightness(1.15) contrast(1.08) saturate(1) drop-shadow(0 0 26px var(--blue-line)) drop-shadow(0 0 40px var(--gold-line));
}
[data-force="blanc"] .force-tag{color:var(--silver-hi);}
[data-force="noir"] .force-tag{color:var(--gold);}
[data-force="chrome"] .force-tag{color:var(--chrome);}

.synthese-band{
  margin-top:20px; padding-top:56px; border-top:1px solid rgba(255,255,255,.05);
  display:grid; gap:40px;
}
@media(min-width:900px){ .synthese-band{grid-template-columns:1fr 1fr; align-items:center; gap:64px;} }
.synthese-stat{font-family:var(--ff-bold); font-weight:800; font-size:clamp(56px,10vw,96px); color:var(--blue-hi); line-height:1; letter-spacing:-.02em;}
.synthese-stat-label{margin-top:12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-lo); max-width:280px;}
.synthese-quote{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(16px,2vw,19px); color:var(--silver); line-height:1.7;
  border-left:2px solid var(--blue-line); padding-left:24px;
}
.synthese-quote cite{display:block; margin-top:18px; font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-lo);}

/* ═══════════════════════════════════════════
   APPROACH · swan-marked process
═══════════════════════════════════════════ */
.approach-list{display:grid; gap:1px; background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);}
.approach-step{
  background:var(--bg); padding:32px var(--pad);
  display:grid; gap:18px; align-items:start;
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.approach-step.visible{opacity:1; transform:none;}
@media(min-width:768px){ .approach-step{grid-template-columns:160px 1fr; gap:36px;} }
.approach-mark{display:flex; align-items:center; gap:14px;}
.approach-mark img{width:20px; height:20px; object-fit:contain; opacity:.7;}
.approach-num{font-family:var(--ff-cond); font-size:12px; letter-spacing:.2em; color:var(--blue-hi);}
.approach-name{font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:23px; color:var(--white); margin-top:6px;}
.approach-desc{font-size:13.5px; color:var(--silver-dim); line-height:1.85; max-width:560px;}

/* ═══════════════════════════════════════════
   CAPABILITIES
═══════════════════════════════════════════ */
.cap-grid{display:grid; gap:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
@media(min-width:600px){ .cap-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1000px){ .cap-grid{grid-template-columns:1fr 1fr 1fr 1fr;} }
.cap-item{background:var(--bg); padding:30px 24px; transition:background .4s var(--ease), transform .4s var(--ease);}
.cap-item:hover{background:var(--bg-2); transform:translateY(-4px);}
.cap-item-num{font-family:var(--ff-cond); font-size:10px; color:var(--silver-lo); letter-spacing:.2em; margin-bottom:14px;}
.cap-item-name{font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:19px; color:var(--white); margin-bottom:8px;}
.cap-item-desc{font-size:12.5px; color:var(--silver-dim); line-height:1.7;}

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
#about{background:var(--bg-2);}
.about-portrait{
  aspect-ratio:4/5; width:100%; max-width:340px;
  background:linear-gradient(160deg,#151515,#0a0a0a);
  border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.about-portrait img{width:46px; height:46px; opacity:.35; object-fit:contain;}
.about-portrait span{
  position:absolute; bottom:18px; left:18px; right:18px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-lo);
}
.about-body p{font-size:14px; color:var(--silver-dim); line-height:1.9; margin-bottom:1.3em; max-width:620px;}
.about-body p:last-child{margin-bottom:0;}
.about-body em{font-style:normal; color:var(--silver);}
.about-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.about-tag{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-lo); border:1px solid rgba(255,255,255,.1); padding:8px 14px; transition:border-color .3s,color .3s;}
.about-tag:hover{border-color:var(--blue-line); color:var(--blue-hi);}

/* ═══════════════════════════════════════════
   OFFRE
═══════════════════════════════════════════ */
.offer-grid{display:grid; gap:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
@media(min-width:768px){ .offer-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1100px){ .offer-grid{grid-template-columns:repeat(4,1fr);} }
.offer-card{background:var(--bg); padding:34px 26px; display:flex; flex-direction:column; transition:background .4s var(--ease), transform .4s var(--ease);}
.offer-card:hover{background:var(--bg-2); transform:translateY(-4px);}
.offer-name{font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:24px; color:var(--white); margin-bottom:6px;}
.offer-for{font-size:10px; letter-spacing:.12em; color:var(--silver-lo); margin-bottom:20px;}
.offer-list{margin-bottom:24px; flex-grow:1;}
.offer-list li{font-size:12.5px; color:var(--silver-dim); line-height:1.8; padding-left:14px; position:relative;}
.offer-list li::before{content:'·'; position:absolute; left:0; color:var(--gold-line);}
.offer-price{
  margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.07);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-hi);
}
.offer-price a{border-bottom:1px solid var(--blue-line); padding-bottom:1px; transition:color .3s;}
.offer-price a:hover{color:var(--white);}

/* ═══════════════════════════════════════════
   CTA / CONTACT
═══════════════════════════════════════════ */
#contact{text-align:center; padding-top:96px; padding-bottom:96px;}
.contact-quote{
  font-family:var(--ff-bold); font-weight:700; font-style:italic;
  font-size:clamp(30px,6.4vw,60px); color:var(--white); line-height:1.1; margin-bottom:40px; letter-spacing:-.01em;
}
.contact-quote em{font-style:italic;}
.btn-primary{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ff-cond); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-line); padding:18px 32px;
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn-primary:hover{background:var(--gold-dim); box-shadow:0 0 0 1px var(--blue-line), 0 14px 30px -16px var(--blue-line); transform:translateY(-2px);}
.contact-channels{margin-top:48px; display:flex; flex-wrap:wrap; justify-content:center; gap:28px;}
.contact-channels a{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-dim); border-bottom:1px solid transparent; transition:color .3s,border-color .3s;}
.contact-channels a:hover{color:var(--gold); border-color:var(--gold-line);}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{
  padding:48px var(--pad); border-top:1px solid rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;
}
@media(min-width:768px){ footer{flex-direction:row; justify-content:space-between; text-align:left;} }
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--ff-body); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--silver-dim);}
.footer-brand img{width:18px; height:18px; object-fit:contain; opacity:.6;}
.footer-legal{font-size:10px; letter-spacing:.06em; color:var(--silver-lo); line-height:1.8;}

/* ═══════════════════════════════════════════
   REVEAL UTILITY
═══════════════════════════════════════════ */
.reveal{opacity:0; transform:translateY(22px); filter:blur(6px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);}
.reveal.visible{opacity:1; transform:none; filter:none;}

/* ═══════════════════════════════════════════
   NAV ACTIVE STATE (multi-page)
═══════════════════════════════════════════ */
.nav-links a.active{color:var(--gold);}
.nav-links a.active::after{width:100%;}
.nav-drawer a.active{color:var(--gold);}

/* ═══════════════════════════════════════════
   INNER PAGE HERO (Vision / About)
═══════════════════════════════════════════ */
.page-hero{
  min-height:56vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--pad) 56px; position:relative; overflow:hidden;
}
.page-hero::after{content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);}
.page-hero .ambient-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;animation:drift 16s ease-in-out infinite alternate;}
.page-hero .ambient-blob.b1{width:360px;height:360px;top:-14%;right:-6%;background:radial-gradient(circle,var(--blue-dim),transparent 70%);}
.page-hero .ambient-blob.b2{width:300px;height:300px;bottom:-16%;left:-8%;background:radial-gradient(circle,var(--gold-dim),transparent 70%);animation-delay:2.5s;}
.page-hero > *:not(.ambient-blob){position:relative;z-index:1;}
.page-hero-rule{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--gold-line));margin-bottom:24px;opacity:0;animation:fadeIn .8s var(--ease) calc(var(--intro) + .15s) forwards;}
.page-hero-label{opacity:0;animation:fadeUp .7s var(--ease) calc(var(--intro) + .3s) forwards;}
.page-hero-title{
  font-family:var(--ff-bold); font-weight:800; font-size:clamp(36px,7.4vw,80px);
  line-height:1.02; letter-spacing:-.015em; color:var(--white); margin-top:22px; max-width:820px;
  opacity:0; animation:fadeUp .85s var(--ease) calc(var(--intro) + .42s) forwards;
}
.page-hero-title em{font-style:italic;}
.page-hero-tagline{
  margin-top:22px; font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(15px,2vw,19px); color:var(--silver-dim); max-width:540px; line-height:1.65;
  opacity:0; animation:fadeUp .8s var(--ease) calc(var(--intro) + .62s) forwards;
}
.breadcrumb{display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-lo); margin-bottom:18px;}
.breadcrumb a{color:var(--silver-lo); transition:color .3s;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb span{color:var(--silver-lo);}

/* ═══════════════════════════════════════════
   TIMELINE (About page parcours)
═══════════════════════════════════════════ */
.timeline{margin-top:56px; border-top:1px solid rgba(255,255,255,.06);}
.timeline-item{
  display:grid; gap:6px 28px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.timeline-item.visible{opacity:1; transform:none;}
@media(min-width:700px){ .timeline-item{grid-template-columns:140px 1fr;} }
.timeline-year{font-family:var(--ff-cond); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-hi);}
.timeline-title{font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:19px; color:var(--white); margin-bottom:6px;}
.timeline-desc{font-size:13px; color:var(--silver-dim); line-height:1.8; max-width:560px;}

/* ═══════════════════════════════════════════
   PULL QUOTE
═══════════════════════════════════════════ */
.pull-quote{
  margin:56px 0; padding:40px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--ff-bold); font-weight:600; font-style:italic; color:var(--white);
  font-size:clamp(20px,3.2vw,30px); line-height:1.35; max-width:720px;
}
.pull-quote em{color:var(--blue-hi);}

/* ═══════════════════════════════════════════
   MINI CTA BAND (bottom of inner pages)
═══════════════════════════════════════════ */
.mini-cta{
  padding:80px var(--pad); text-align:center; border-top:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.mini-cta-text{
  font-family:var(--ff-bold); font-weight:700; font-style:italic;
  font-size:clamp(24px,4.6vw,42px); color:var(--white); margin-bottom:32px; line-height:1.2;
}
.mini-cta-text em{font-style:italic;}

/* Capabilities regroupees en triade : Essence, Clarte, Incarnation */
@media(min-width:1000px){ .cap-grid.cap-grid--triad{grid-template-columns:1fr 1fr 1fr;} }
@media(min-width:600px) and (max-width:999px){ .cap-grid.cap-grid--triad{grid-template-columns:1fr;} }
.cap-grid--triad .cap-item{padding:40px 32px;}
.cap-grid--triad .cap-item-name{font-size:24px;}
.cap-sub{list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.08); display:grid; gap:18px;}
.cap-sub li{font-size:12.5px; color:var(--silver-dim); line-height:1.7;}
.cap-sub span{display:block; font-family:var(--ff-bold); font-weight:700; font-style:italic; font-size:15px; color:var(--white); margin-bottom:2px;}


/* ═══════════════════════════════════════════
   MOTION SYSTEM v2 : voile d'ouverture, transitions de page, bandeau, revelations
═══════════════════════════════════════════ */
html.cx-seen{--intro:0s;}

/* Voile d'ouverture, une fois par session */
.veil{
  position:fixed; inset:0; z-index:10000; background:#000000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  animation:veilOut .7s var(--ease-out) .85s forwards; pointer-events:none;
}
.veil img{width:64px; height:auto; opacity:0; filter:brightness(1.3); animation:veilLogo .9s var(--ease-out) .05s forwards;}
.veil-line{width:0; height:1px; background:linear-gradient(90deg,transparent,var(--chrome-hi),transparent); animation:veilLine .8s var(--ease-out) .2s forwards;}
@keyframes veilLogo{from{opacity:0; transform:scale(.92);}to{opacity:1; transform:none;}}
@keyframes veilLine{to{width:120px;}}
@keyframes veilOut{to{opacity:0; visibility:hidden;}}
html.cx-seen .veil{display:none;}

/* Transition entre pages */
body{animation:pageIn .6s var(--ease-out) both;}
html:not(.cx-seen) body{animation:none;}
@keyframes pageIn{from{opacity:0;}to{opacity:1;}}
body.is-leaving{opacity:0; transition:opacity .45s var(--ease);}

/* Navigation qui s'efface a la descente */
nav{transition:transform .5s var(--ease-out), background .4s var(--ease);}
nav.nav-hidden{transform:translateY(-100%);}

/* Bandeau defilant */
.marquee{
  overflow:hidden; border-top:1px solid rgba(255,255,255,.06);
  padding:34px 0; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex; width:max-content; animation:marquee 60s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex; align-items:center; flex-shrink:0;}
.marquee-item{
  font-family:var(--ff-bold); font-weight:700; font-style:italic;
  font-size:clamp(30px,5.4vw,68px); line-height:1.1; letter-spacing:-.02em;
  color:var(--white); white-space:nowrap; padding:0 .45em;
}
.marquee-item.is-outline{color:transparent; -webkit-text-stroke:1px var(--chrome);}
.marquee-sep{width:9px; height:9px; flex-shrink:0; transform:rotate(45deg); background:linear-gradient(135deg,var(--chrome-hi),var(--silver-lo));}
@keyframes marquee{to{transform:translateX(-50%);}}

/* Titres de section : devoilement par masque */
.section-head .section-title{clip-path:inset(0 0 100% 0); transform:translateY(18px); transition:clip-path 1.2s var(--ease-out) .1s, transform 1.2s var(--ease-out) .1s;}
.section-head.visible .section-title{clip-path:inset(-20% -5% -25% -5%); transform:none;}

/* Images de cygnes : devoilement vertical */
.force-visual{opacity:0; transform:translateY(40px) scale(.97); transition:opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);}
.force-visual.visible{opacity:1; transform:none;}

@media(prefers-reduced-motion:reduce){
  .veil{display:none;}
  html{--intro:0s;}
  .marquee-track{animation:none; flex-wrap:wrap; width:auto;}
  .marquee-group[aria-hidden="true"]{display:none;}
  .marquee-group{flex-wrap:wrap; justify-content:center; padding:0 var(--pad);}
  .reveal,.section-head .section-title,.force-visual{filter:none; clip-path:none; transform:none; opacity:1;}
}


/* Selecteur de langue FR / EN */
.nav-right{display:flex; align-items:center; gap:28px;}
.lang-switch{display:flex; align-items:center; gap:6px; font-family:var(--ff-body); font-size:10px; letter-spacing:.2em;}
.lang-switch span{color:var(--silver-lo);}
.lang-switch button{background:none; border:none; cursor:pointer; padding:6px 2px; font:inherit; letter-spacing:inherit; color:var(--silver-lo); transition:color .3s var(--ease);}
.lang-switch button:hover{color:var(--silver);}
.lang-switch button[aria-pressed="true"]{color:var(--chrome-hi);}
@media(max-width:767px){ .nav-right{gap:18px;} }
html.i18n-pending body{visibility:hidden;}
body.lang-fading main, body.lang-fading section, body.lang-fading footer{opacity:0; transition:opacity .28s var(--ease);}
body main, body section, body footer{transition:opacity .4s var(--ease);}


/* ═══════════════════════════════════════════
   TITRES CHROME POLI
   Deux couches : reflets speculaires en biais (repetes tous les 7em) et chrome de base.
   Le chrome de base se repete a chaque ligne (1lh) pour que chaque ligne
   de texte ait son propre horizon lumineux, comme une piece de metal eclairee en studio.
═══════════════════════════════════════════ */
:root{
  /* Chrome principal : ciel clair, horizon anthracite, rebond lumineux, bord argent */
  --chrome-base:linear-gradient(180deg,
    #ffffff 0%, #f2f4f7 14%, #dce0e5 28%, #b7bdc6 40%, #8e95a0 50%,
    #545962 56%, #3c4046 59%, #737982 64%, #aeb5be 71%, #e0e3e8 80%,
    #ffffff 87%, #e3e6ea 93%, #a9afb7 100%);
  /* Variante plus douce pour les petits titres : horizon moins sombre, lisibilite d'abord */
  --chrome-soft:linear-gradient(180deg,
    #ffffff 0%, #eceff3 18%, #c6cbd3 38%, #8f96a0 52%, #b8bec7 62%,
    #eef0f3 80%, #ffffff 88%, #c3c8cf 100%);
  /* Chrome froid pour les mots en italique : meme metal, reflet legerement bleute */
  --chrome-cool:linear-gradient(180deg,
    #ffffff 0%, #eef2fb 14%, #d5ddee 28%, #aeb9d2 40%, #8390ab 50%,
    #4a5266 56%, #363d4e 59%, #6a758f 64%, #a6b1c8 71%, #dbe1ee 80%,
    #ffffff 87%, #e2e7f2 93%, #a6b0c6 100%);
  /* Reflets speculaires : deux eclats de lumiere en biais */
  --chrome-sheen:linear-gradient(112deg,
    rgba(255,255,255,0) 8%, rgba(255,255,255,.5) 20%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 58%, rgba(255,255,255,.28) 66%, rgba(255,255,255,0) 74%);
  /* Profondeur : fin liseré lumineux en haut, halo studio tres discret */
  --chrome-depth:drop-shadow(0 -1px 0 rgba(255,255,255,.14)) drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(190,200,215,.07));
}

.hero-title .word,
.page-hero-title,
.section-title,
.force-title,
.manifeste-quote,
.contact-quote,
.mini-cta-text,
.hero-title .accent,
.page-hero-title em,
.section-title em,
.force-title span,
.manifeste-quote em,
.contact-quote em,
.mini-cta-text em,
.work-card-name,
.approach-name,
.cap-item-name,
.cap-sub span,
.offer-name,
.timeline-title{
  background-image:var(--chrome-sheen), var(--chrome-base);
  background-size:7em 100%, 100% 100%;
  background-repeat:repeat-x, repeat-y;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  text-shadow:none;
}
/* Un horizon par ligne quand le navigateur connait l'unite lh */
@supports (height:1lh){
  .hero-title .word,
  .page-hero-title,
  .section-title,
  .force-title,
  .manifeste-quote,
  .contact-quote,
  .mini-cta-text,
  .work-card-name,
  .approach-name,
  .cap-item-name,
  .cap-sub span,
  .offer-name,
  .timeline-title{background-size:7em 100%, 100% 1lh;}
}

/* Mots en italique : chrome froid */
.hero-title .accent,
.page-hero-title em,
.section-title em,
.force-title span,
.manifeste-quote em,
.contact-quote em,
.mini-cta-text em{
  background-image:var(--chrome-sheen), var(--chrome-cool);
  background-size:7em 100%, 100% 100%;
  background-repeat:repeat-x, no-repeat;
}

/* Petits titres : chrome doux, sans ombrage lateral */
.work-card-name,
.approach-name,
.cap-item-name,
.cap-sub span,
.offer-name,
.timeline-title{
  background-image:var(--chrome-sheen), var(--chrome-soft);
  background-size:7em 100%, 100% 1lh;
  background-repeat:repeat-x, repeat-y;
}

/* Titres H3 des forces (interligne 1.7) : meme chrome, reflets recalés sur la hauteur reelle des lettres */
.force-title{
  background-image:var(--chrome-sheen), linear-gradient(180deg,
    #ffffff 0%, #ffffff 21%, #f2f4f7 29%, #dce0e5 37%, #b7bdc6 44%, #8e95a0 50%,
    #545962 53.5%, #3c4046 55.5%, #737982 58.5%, #aeb5be 62.5%, #e0e3e8 67.5%,
    #ffffff 72%, #e3e6ea 75%, #a9afb7 79%, #a9afb7 100%);
}

/* Profondeur : appliquee aussi apres la revelation au defilement */
.hero-title .word,
.page-hero-title,
.section-title,
.force-title,
.manifeste-quote.reveal.visible,
.contact-quote.reveal.visible,
.mini-cta-text,
.work-card-name,
.approach-name,
.cap-item-name,
.offer-name,
.timeline-title{filter:var(--chrome-depth);}

/* Securite : navigateurs sans background-clip:text, retour a un argent lisible */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title .word, .page-hero-title, .section-title, .force-title, .manifeste-quote, .contact-quote, .mini-cta-text,
  .work-card-name, .approach-name, .cap-item-name, .cap-sub span, .offer-name, .timeline-title,
  .hero-title .accent, .page-hero-title em, .section-title em, .force-title span, .manifeste-quote em, .contact-quote em, .mini-cta-text em{
    background:none; -webkit-text-fill-color:currentColor; color:var(--chrome-hi);
  }
}


/* ═══════════════════════════════════════════
   TYPOGRAPHIE v3 : capitales espacees, style futuriste
═══════════════════════════════════════════ */
:root{ --ff-caps:'Syncopate','Barlow',Helvetica,Arial,sans-serif; }

/* Titres et accroches : capitales espacees */
.hero-title,.page-hero-title,.section-title,.force-title,.manifeste-quote,.contact-quote,
.mini-cta-text,.pull-quote,.synthese-quote,.offer-name,.timeline-title{
  font-family:var(--ff-caps); font-style:normal; font-weight:700; text-transform:uppercase;
}
.hero-title em,.page-hero-title em,.section-title em,.force-title em,.manifeste-quote em,.contact-quote em,
.mini-cta-text em,.pull-quote em,.hero-title .accent,.force-title span{font-style:normal;}
.hero-title{font-size:clamp(28px,6.6vw,70px); letter-spacing:.1em; line-height:1.15;}
.page-hero-title{font-size:clamp(26px,5vw,54px); letter-spacing:.08em; line-height:1.15;}
.section-title{font-size:clamp(18px,3vw,30px); letter-spacing:.08em; line-height:1.3;}
.force-title{font-size:clamp(16px,2.4vw,24px); letter-spacing:.06em; line-height:1.35;}
.force-title span{font-size:.62em; letter-spacing:.12em;}
.manifeste-quote,.contact-quote,.mini-cta-text,.pull-quote{font-size:clamp(16px,2.8vw,28px); letter-spacing:.1em; line-height:1.45; font-weight:400;}
.synthese-quote{font-size:clamp(12px,1.5vw,15px); letter-spacing:.1em; line-height:1.8; font-weight:400;}
.offer-name{font-size:clamp(16px,1.8vw,20px); letter-spacing:.14em;}
.timeline-title{font-size:13px; letter-spacing:.12em; line-height:1.5;}

/* Sous-titres et accroches secondaires : batons legers espaces */
.hero-tagline,.page-hero-tagline,.section-intro,.offer-for,.timeline-desc{
  font-family:var(--ff-body); font-style:normal; font-weight:300; text-transform:uppercase;
  letter-spacing:.16em; line-height:1.9;
}
.hero-tagline,.page-hero-tagline{font-size:clamp(11px,1.3vw,13px); color:var(--silver);}
.section-intro{font-size:11px;}
.offer-for{font-size:10px;}
.timeline-desc{font-size:10.5px; letter-spacing:.1em; text-transform:none;}

/* Formules : bouton de demande */
.offer-cta{display:inline-block; margin-top:6px; padding:10px 14px; border:1px solid var(--gold-line);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--chrome-hi);
  transition:background .3s var(--ease), border-color .3s var(--ease);}
.offer-cta:hover{background:rgba(201,168,76,.08); border-color:var(--gold);}

/* Portrait */
.about-photo{border:1px solid rgba(255,255,255,.08); overflow:hidden;}
.about-photo img{width:100%; height:auto; display:block; filter:contrast(1.02);}

/* Image Wall Street et credit */
.about-figure{margin:28px 0 8px;}
.about-figure img{width:100%; height:auto; display:block;}
.about-figure figcaption{margin-top:8px; font-size:9px; letter-spacing:.08em; color:var(--silver-lo);}

.nav-drawer a{font-family:var(--ff-caps); font-style:normal; font-weight:400; text-transform:uppercase; font-size:15px; letter-spacing:.16em;}
.hero-title .word{padding-top:.16em;}
.page-hero-title,.section-title,.force-title,.manifeste-quote,.contact-quote,.mini-cta-text,.pull-quote,.offer-name,.timeline-title{padding-top:.14em;}
.offer-price{line-height:1; padding-bottom:4px; overflow:visible;}
.offer-cta{line-height:1.2;}
.offer-for{color:var(--silver-dim);}
.about-figure{max-width:664px;}

/* ═══════════════════════════════════════════
   MATIERE v4 : nacre naturelle (remplace le chrome)
   Cinq couches : eclats diffus, strates de la coquille, deux nappes d'irisation
   de tailles differentes (motif jamais repete a l'identique), base ivoire rosee.
═══════════════════════════════════════════ */
:root{
  --nacre-base:linear-gradient(180deg,
    #fffaf6 0%, #f8efe9 18%, #f2e6df 42%, #ece0da 58%, #f6eee9 74%, #fbf5f1 86%, #e6d9d2 100%);
  --nacre-base-cool:linear-gradient(180deg,
    #fbf9fb 0%, #f1edf3 20%, #e9e4ee 44%, #e3dfe9 58%, #f0edf3 74%, #f8f6f9 86%, #dcd8e2 100%);
  --nacre-iris-a:
    radial-gradient(38% 70% at 16% 34%, rgba(238,206,214,.80), rgba(238,206,214,0) 72%),
    radial-gradient(30% 60% at 47% 78%, rgba(200,224,238,.72), rgba(200,224,238,0) 70%),
    radial-gradient(34% 64% at 76% 22%, rgba(218,208,240,.78), rgba(218,208,240,0) 72%);
  --nacre-iris-b:
    radial-gradient(42% 80% at 30% 62%, rgba(236,219,190,.70), rgba(236,219,190,0) 70%),
    radial-gradient(28% 56% at 84% 66%, rgba(198,234,226,.62), rgba(198,234,226,0) 72%);
  --nacre-strata:repeating-linear-gradient(-13deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2.6px, rgba(255,255,255,.22) 3.1px, rgba(255,255,255,0) 3.7px,
    rgba(255,255,255,0) 5.9px, rgba(150,130,140,.07) 6.3px, rgba(255,255,255,0) 6.8px);
  --nacre-sheen:
    radial-gradient(60% 46% at 28% 14%, rgba(255,255,255,.70), rgba(255,255,255,0) 64%),
    radial-gradient(34% 40% at 71% 31%, rgba(255,252,250,.40), rgba(255,255,255,0) 66%);
  --chrome-depth:drop-shadow(0 -.5px 0 rgba(255,250,246,.38)) drop-shadow(0 1.2px .8px rgba(46,30,36,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.32));
}

.hero-title .word,
.page-hero-title,
.section-title,
.force-title,
.manifeste-quote,
.contact-quote,
.mini-cta-text,
.work-card-name,
.approach-name,
.cap-item-name,
.cap-sub span,
.offer-name,
.timeline-title{
  background-image:var(--nacre-sheen), var(--nacre-strata), var(--nacre-iris-a), var(--nacre-iris-b), var(--nacre-base);
  background-size:11.3em 100%, 11.3em 100%, auto, 13.7em 100%, 13.7em 100%, 13.7em 100%, 7.9em 100%, 7.9em 100%, 100% 100%;
  background-repeat:repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat-y;
  background-position:0 0, 0 0, 0 0, 3.1em 0, 3.1em 0, 3.1em 0, 1.4em 0, 1.4em 0, 0 0;
}
@supports (height:1lh){
.hero-title .word,
.page-hero-title,
.section-title,
.force-title,
.manifeste-quote,
.contact-quote,
.mini-cta-text,
.work-card-name,
.approach-name,
.cap-item-name,
.cap-sub span,
.offer-name,
.timeline-title{
  background-image:var(--nacre-sheen), var(--nacre-strata), var(--nacre-iris-a), var(--nacre-iris-b), var(--nacre-base);
  background-size:11.3em 1lh, 11.3em 1lh, auto, 13.7em 1lh, 13.7em 1lh, 13.7em 1lh, 7.9em 1lh, 7.9em 1lh, 100% 1lh;
  background-repeat:repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat-y;
  background-position:0 0, 0 0, 0 0, 3.1em 0, 3.1em 0, 3.1em 0, 1.4em 0, 1.4em 0, 0 0;
}
}
/* Mots en accent : nacre aux reflets plus froids, lavande et bleu perle */
.hero-title .accent,
.page-hero-title em,
.section-title em,
.force-title span,
.manifeste-quote em,
.contact-quote em,
.mini-cta-text em{
  background-image:var(--nacre-sheen), var(--nacre-strata), var(--nacre-iris-a), var(--nacre-iris-b), var(--nacre-base-cool);
  background-size:11.3em 100%, 11.3em 100%, auto, 13.7em 100%, 13.7em 100%, 13.7em 100%, 7.9em 100%, 7.9em 100%, 100% 100%;
  background-repeat:repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat-y;
  background-position:0 0, 0 0, 0 0, 3.1em 0, 3.1em 0, 3.1em 0, 1.4em 0, 1.4em 0, 0 0;
}

.hero-title .sub-line{display:block; font-size:.3em; font-weight:400; letter-spacing:.16em; line-height:1.5; margin-top:.9em;}

/* ═══════════════════════════════════════════
   CASE STUDY · ZAFRAN
═══════════════════════════════════════════ */
.breadcrumb a{color:inherit; transition:color .3s var(--ease);}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb span{color:var(--gold-line); margin:0 .5em;}

.cs-section .section-head{position:relative;}
.cs-section .section-head > .cs-status{margin-top:18px;}

.cs-status{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--ff-body); font-weight:400; font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  padding:6px 12px; border:1px solid rgba(255,255,255,.12); color:var(--silver);
}
.cs-status::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;}
.cs-done{color:var(--silver); border-color:rgba(192,192,192,.22);}
.cs-ongoing{color:var(--gold); border-color:var(--gold-line);}
.cs-ongoing::before{animation:csPulse 2.2s ease-in-out infinite;}
.cs-dev,.cs-offer{color:var(--blue-hi); border-color:rgba(111,148,240,.3);}
.cs-live{color:var(--chrome-hi); border-color:rgba(212,220,232,.3);}
.cs-live::before{background:var(--blue-hi); box-shadow:0 0 8px var(--blue);}
@keyframes csPulse{0%,100%{opacity:1;}50%{opacity:.25;}}
@media(prefers-reduced-motion:reduce){ .cs-ongoing::before{animation:none;} }

.cs-img,.cs-video{margin:0 0 36px; border:1px solid rgba(255,255,255,.06); overflow:hidden; background:var(--bg);}
.cs-img img,.cs-video video{display:block; width:100%; height:auto; transition:transform 1.4s var(--ease-out);}
.cs-img:hover img{transform:scale(1.025);}
.cs-hero-img img{max-height:72vh; object-fit:cover;}
.cs-video{max-width:420px;}
@media(min-width:900px){
  .cs-img{max-width:860px;}
  .cs-wide{max-width:none;}
}

.cs-lead{
  font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(18px,2.4vw,26px); line-height:1.55; color:var(--silver); max-width:780px;
}
.cs-meta{display:grid; gap:1px; margin-top:44px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
.cs-meta > div{background:var(--bg); padding:22px 24px;}
@media(min-width:768px){ .cs-meta{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1100px){ .cs-meta{grid-template-columns:repeat(4,1fr);} }
.cs-meta-k{font-family:var(--ff-cond); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.cs-meta-v{font-size:13px; color:var(--silver-dim); line-height:1.7;}
.cs-meta-v .cs-status{margin-top:0;}

.cs-text{font-size:14px; color:var(--silver-dim); line-height:1.9; max-width:680px; margin-top:28px;}
.cs-note{
  margin-top:28px; padding:16px 20px; max-width:780px;
  border-left:1px solid var(--gold-line); font-size:12px; color:var(--silver-lo); line-height:1.8;
}
.cs-soon{
  margin-top:16px; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-lo);
}

.cs-grid{display:grid; gap:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
.cs-grid > *{background:var(--bg); padding:30px 26px;}
@media(min-width:768px){
  .cs-grid-2,.cs-grid-4{grid-template-columns:repeat(2,1fr);}
  .cs-grid-3{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1100px){ .cs-grid-4{grid-template-columns:repeat(4,1fr);} }
.cs-card{display:flex; flex-direction:column; align-items:flex-start; transition:background .4s var(--ease);}
.cs-card:hover{background:var(--bg-2);}
.cs-card-title{margin-bottom:12px;}
.cs-card-text{font-size:13px; color:var(--silver-dim); line-height:1.8;}
.cs-list li{font-size:13px; color:var(--silver-dim); line-height:1.8; padding-left:16px; position:relative; margin-bottom:4px;}
.cs-list li::before{content:'·'; position:absolute; left:2px; color:var(--gold);}
.cs-card .cs-list{margin-top:4px;}

/* Parcours en etapes : ligne or vers bleu */
.cs-flow{
  position:relative; display:grid; gap:0; margin:48px auto 0; max-width:1180px; text-align:left;
}
.cs-flow::before{
  content:''; position:absolute; left:11px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(180deg,var(--gold),var(--blue));
}
.cs-step{position:relative; padding:12px 0 12px 40px;}
.cs-step::before{
  content:''; position:absolute; left:7px; top:19px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1px solid var(--gold); box-shadow:0 0 10px rgba(201,168,76,.35);
}
.cs-step i{display:block; font-style:normal; font-family:var(--ff-cond); font-size:10px; letter-spacing:.3em; color:var(--blue-hi); margin-bottom:4px;}
.cs-step b{font-family:var(--ff-caps); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); line-height:1.6;}
#manifeste .cs-flow{position:relative; z-index:1;}
@media(min-width:900px){
  .cs-flow-6{grid-template-columns:repeat(6,1fr);}
  .cs-flow-7{grid-template-columns:repeat(7,1fr);}
  .cs-flow::before{left:0; right:0; top:28px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg,var(--gold),var(--blue));}
  .cs-step{padding:0 14px 0 0; text-align:left;}
  .cs-step::before{position:relative; display:block; left:0; top:auto; margin:24px 0 18px; }
  .cs-step i{position:absolute; top:0; left:0;}
  .cs-step b{font-size:10px;}
}

.cs-figures{display:flex; flex-wrap:wrap; gap:1px; margin-top:28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);}
.cs-figures > div{flex:1 1 180px; background:var(--bg); padding:26px 24px;}
.cs-figures b{display:block; font-family:var(--ff-caps); font-weight:700; font-size:clamp(34px,5vw,52px); line-height:1; color:var(--blue-hi); margin-bottom:12px;}
.cs-figures span{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-dim);}
.cs-figures-row{margin-top:44px;}

.cs-gallery{display:grid; gap:12px;}
.cs-gallery .cs-img{margin:0; max-width:none;}
.cs-gallery img{aspect-ratio:4/5; object-fit:cover;}
@media(min-width:768px){ .cs-gallery{grid-template-columns:repeat(3,1fr);} }

.cs-testimonial{max-width:860px; margin:0 auto; text-align:center; position:relative;}
.cs-stars{color:var(--gold); font-size:16px; letter-spacing:.5em; margin-bottom:22px; text-shadow:0 0 14px rgba(201,168,76,.35);}
.cs-quote-title{font-size:clamp(15px,2vw,22px); line-height:1.5; margin-bottom:30px;}
.cs-quote-body p{font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(15px,1.7vw,18px); line-height:1.8; color:var(--silver-dim); margin-bottom:1.1em;}
.cs-quote-author{margin-top:26px; font-family:var(--ff-cond); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);}

/* Coup de coeur : bloc distinct, filets or */
.cs-pick{padding:96px var(--pad); position:relative; text-align:center; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);}
.cs-pick::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.07) 0%,transparent 60%);
}
.cs-pick-inner{position:relative; max-width:720px; margin:0 auto;}
.cs-pick-label{font-family:var(--ff-cond); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.cs-pick-intro{margin:20px auto 0; font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:16px; color:var(--silver-dim); line-height:1.7;}
.cs-pick .cs-soon{margin-top:36px;}
.cs-pick-title{margin-top:28px;}
.cs-pick-text{margin-top:10px; font-size:13px; color:var(--silver-lo);}
.cs-grid > .cs-figures{margin:0; border:0; background:var(--bg); padding:30px 26px; gap:12px; align-content:center;}
.cs-grid > .cs-figures > div{border:1px solid rgba(255,255,255,.06);}
.cs-hero-img img{object-position:50% 0;}
.cs-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:12px 20px;
  border:1px solid var(--gold-line); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.cs-link:hover{background:var(--gold-dim); color:var(--white); border-color:var(--gold);}
.cs-pick-grid{position:relative; display:grid; gap:1px; max-width:1180px; margin:56px auto 0; text-align:left; background:rgba(201,168,76,.16); border:1px solid rgba(201,168,76,.16);}
@media(min-width:900px){ .cs-pick-grid{grid-template-columns:3fr 2fr;} }
.cs-pick-card{background:var(--bg); padding:32px 28px; display:flex; flex-direction:column; align-items:flex-start;}
.cs-pick-card .cs-pick-title{margin-top:6px;}
.cs-pick-sub{margin-top:6px; font-family:var(--ff-display); font-style:italic; font-size:16px; color:var(--silver);}
.cs-pick-card .cs-pick-text{margin-top:14px; font-size:13px; line-height:1.8; color:var(--silver-dim); max-width:620px;}
.cs-pick-card .about-tags{margin-top:22px;}
.cs-pick-imgs{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin-bottom:28px;}
.cs-pick-imgs a{display:block; overflow:hidden; border:1px solid rgba(255,255,255,.06);}
.cs-pick-imgs img{display:block; width:100%; height:auto; transition:transform 1.4s var(--ease-out);}
.cs-pick-imgs a:hover img{transform:scale(1.03);}
.cs-pair{display:grid; gap:12px; margin-bottom:36px; max-width:860px;}
.cs-pair .cs-video,.cs-pair .cs-img{margin:0; max-width:none;}
.cs-pair .cs-img img,.cs-pair .cs-video video{height:100%; object-fit:cover;}
@media(min-width:768px){ .cs-pair{grid-template-columns:1fr 1fr;} }
.cs-eco{margin-top:20px; border:1px solid var(--gold-line); padding:30px 26px;}
.cs-eco .about-tags{margin-top:20px;}

/* ═══ ZAFRAN : légendes et compositions éditoriales ═══ */
.cs-fig{margin:0;}
.cs-fig .cs-img{margin:0;}
.cs-cut{border:0;}
.cs-cap{display:flex; flex-direction:column; gap:3px; margin-top:14px;}
.cs-cap b{font-family:var(--ff-cond); font-weight:400; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);}
.cs-cap span{font-family:var(--ff-display); font-style:italic; font-size:16px; line-height:1.4; color:var(--silver-dim);}
.cs-hero-img{margin-bottom:0;}
#cs-intro .cs-fig{margin-bottom:36px;}

.cs-seq{display:grid; gap:20px; align-items:center; max-width:1000px; margin:0 0 64px;}
.cs-seq-arrow{font-family:var(--ff-cond); font-size:30px; line-height:1; color:var(--gold); text-align:center; transform:rotate(90deg);}
@media(min-width:768px){
  .cs-seq{grid-template-columns:1fr 64px 1fr; gap:24px;}
  .cs-seq-arrow{transform:none;}
}
.cs-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin-bottom:12px;}
@media(min-width:768px){ .cs-duo{gap:32px;} }

.cs-asym{display:grid; gap:28px; max-width:980px; margin-bottom:12px;}
.cs-asym-side{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start;}
@media(min-width:768px){
  .cs-asym{grid-template-columns:1.35fr 1fr; gap:40px; align-items:start;}
  .cs-asym-side{grid-template-columns:1fr; gap:32px;}
}
.cs-text-wide{max-width:760px; margin-bottom:56px;}

.cs-pick-fig{width:100%; max-width:420px; margin-bottom:26px;}
.cs-pick-imgs + .cs-cap{margin-top:-14px; margin-bottom:26px;}
@media(max-width:767px){
  .cs-seq .cs-cut img{aspect-ratio:1.1; object-fit:cover; object-position:50% 50%;}
}