:root{
  --white:#FFFFFF;
  --paper:#F5F7FA;
  --cream:#F7F2E7;
  --pink:#F6DCE0;
  --ink:#0E1420;
  --grey:#6C7180;
  --grey-lt:#E7E9EF;
  --blue:#0A4E98;
  --blue-tint:#E7F0FB;
  --gold:#F2C219;
  --gold-tint:#FDF3D0;
  --r:20px;
  --r-lg:32px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white); color:var(--ink); font-family:'Poppins',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}
h1,h2,h3,.display{font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-0.02em;}
.eyebrow{font-family:'Montserrat',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--blue);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1360px; margin:0 auto; padding:0 32px;}
section{position:relative;}
::selection{background:var(--gold); color:var(--ink);}
.magnetic{transition:transform .25s cubic-bezier(.16,1,.3,1);}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---- DUOTONE ART TILES (placeholders — remplacer par vos photos dans assets/images/) ---- */
.art{position:relative; overflow:hidden; background:var(--paper);}
.art::before{content:'';position:absolute; inset:0;}
.art-blue::before{background:radial-gradient(circle at 25% 15%, rgba(20,100,190,0.95), transparent 55%), radial-gradient(circle at 80% 80%, rgba(4,28,58,0.98), transparent 60%), linear-gradient(155deg,#0A4E98,#041c3a);}
.art-gold::before{background:radial-gradient(circle at 70% 20%, rgba(255,224,120,0.95), transparent 55%), radial-gradient(circle at 20% 85%, rgba(180,138,10,0.95), transparent 60%), linear-gradient(155deg,#F2C219,#B48A0A);}
.art-ink::before{background:radial-gradient(circle at 65% 25%, rgba(70,78,98,0.9), transparent 55%), radial-gradient(circle at 15% 85%, rgba(8,10,16,0.98), transparent 60%), linear-gradient(155deg,#242a38,#0a0c12);}
.art-mix::before{background:radial-gradient(circle at 25% 25%, rgba(10,78,152,0.88), transparent 50%), radial-gradient(circle at 78% 75%, rgba(242,194,25,0.5), transparent 55%), linear-gradient(155deg,#041c3a,#0a0c12);}
.art[data-img] img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ---- NAV ---- */
.nav-outer{position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(255,255,255,0.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--grey-lt);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px 32px;}
.nav-logo img{height:24px;}
.nav-links{display:flex; gap:32px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px;}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-signin{font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px; color:var(--grey);}
.nav-cta{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; padding:12px 20px; border-radius:100px;}

/* ---- HERO — headline split around big photo, circular badges ---- */
.hero{padding:150px 0 70px;}
.hero-head{text-align:left; max-width:1160px; margin:0 auto;}
.hero-meta-row{display:flex; justify-content:space-between; gap:20px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--grey); margin-bottom:18px; flex-wrap:wrap;}
.hero-title{font-size:clamp(34px,6vw,72px); line-height:1.02;}
.hero-title-en{font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(42px,8.4vw,118px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase;}
.hero-title-en .outline{font-family:'Space Grotesk',sans-serif; font-weight:700; -webkit-text-stroke:1.6px var(--blue); color:transparent; letter-spacing:.01em;}
.hero-title-en .accent{color:var(--gold);}
.hero-title .imgword{display:inline-flex; vertical-align:middle; width:.95em; height:.7em; border-radius:100px; overflow:hidden; margin:0 6px; position:relative; top:-.04em;}
.hero-sub{margin-top:26px; font-size:15.5px; color:var(--grey); max-width:52ch; margin-left:0; margin-right:0; line-height:1.7;}

.hero-photo-wrap{position:relative; margin-top:44px; border-radius:var(--r-lg); overflow:hidden; height:56vh; min-height:380px;}
.hero-photo-wrap::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,17,38,0.05), rgba(4,17,38,0.55) 100%);}
.hero-cta-float{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; background:var(--ink); color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; padding:16px 30px; border-radius:100px; display:inline-flex; align-items:center; gap:10px; box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);}
.hero-badges{position:absolute; bottom:24px; left:24px; z-index:3; display:flex; gap:-6px;}
.hero-badges .b{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; border:3px solid #fff; margin-left:-12px;}
.hero-badges .b:first-child{margin-left:0;}
.hero-caption{position:absolute; bottom:26px; right:24px; z-index:3; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; background:rgba(255,255,255,0.15); backdrop-filter:blur(6px); padding:9px 15px; border-radius:100px;}

/* ---- STATS with sparkles ---- */
.stats{padding:90px 0; text-align:center; position:relative;}
.sparkle{position:absolute; font-size:20px; color:var(--gold); opacity:.9;}
.sp1{top:14%; left:6%;} .sp2{top:20%; right:8%;} .sp3{bottom:10%; left:12%;}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); max-width:920px; margin:0 auto;}
.stat-num{font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(30px,3.6vw,44px);}
.stat p{font-size:12px; color:var(--grey); margin-top:8px;}

/* ---- 3-IMAGE FEATURE ROW ---- */
.feature-row{padding-bottom:120px;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feat-card{border-radius:var(--r); overflow:hidden; position:relative; height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px;}
.feat-card.light{background:var(--gold-tint); color:var(--ink); justify-content:flex-start;}
.feat-card .flabel{font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; max-width:16ch; line-height:1.4;}
.feat-card .fstat{position:relative; z-index:2; color:#fff;}
.feat-card .fstat .n{font-family:'Montserrat',sans-serif; font-weight:800; font-size:30px;}
.feat-card .fstat p{font-size:11.5px; margin-top:2px; opacity:.85;}
.feat-card.dark::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6));}
.feat-card.dark > *{position:relative; z-index:1;}
.feat-card .mini-cta{margin-top:14px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; padding:8px 14px; border-radius:100px; width:fit-content;}

/* ---- FILTER BAR + PROJECT GRID (signature Offered-style) ---- */
.filter-section{padding-bottom:24px;}
.filter-bar{display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-top:1px solid var(--grey-lt); border-bottom:1px solid var(--grey-lt); font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey);}
.filter-tabs{display:flex; gap:22px;}
.filter-tabs span{color:var(--ink); cursor:default;}

.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-left:1px solid var(--grey-lt);}
.proj-card{border-right:1px solid var(--grey-lt); border-bottom:1px solid var(--grey-lt); padding:30px; min-height:300px; display:flex; flex-direction:column; position:relative; overflow:hidden;}
.proj-card.photo{padding:0;}
.proj-card.photo .pc-inner{position:relative; z-index:2; padding:24px; margin-top:auto; color:#fff;}
.proj-card.photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65)); z-index:1;}
.tag-row{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-family:'Montserrat',sans-serif; font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--grey-lt); border-radius:100px; padding:5px 10px; color:var(--grey);}
.proj-card.photo .tag{border-color:rgba(255,255,255,0.4); color:#fff;}
.proj-card h4{font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; margin-top:16px; line-height:1.2;}
.proj-card p{font-size:12.5px; color:var(--grey); margin-top:10px; line-height:1.6; flex:1;}
.proj-card.photo p{color:rgba(255,255,255,0.85);}
.proj-card .learn{margin-top:16px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; text-decoration:underline;}
.proj-card.cream{background:var(--cream);}
.proj-card.pink{background:var(--pink);}
.proj-card .squiggle{position:absolute; bottom:20px; right:-10px; width:160px; opacity:.5;}

/* ---- CTA BANNER (light, Offered-style) ---- */
.cta-banner{margin:0; background:var(--blue-tint); padding:70px 32px; text-align:center;}
.cta-banner h3{font-size:clamp(24px,3.2vw,36px); max-width:20ch; margin:0 auto 26px;}
.cta-form{max-width:480px; margin:0 auto; display:flex; gap:10px; background:#fff; border-radius:100px; padding:8px; box-shadow:0 14px 34px -18px rgba(14,20,32,0.25);}
.cta-form input{flex:1; border:none; outline:none; padding:12px 18px; font-family:'Poppins',sans-serif; font-size:13.5px;}
.cta-form button{background:var(--ink); color:#fff; border:none; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; padding:12px 22px; border-radius:100px; cursor:pointer;}

/* ---- MIXED GRID: testimonial / photo / dark case / dark contact / mockup (Niveo-style) ---- */
.mixed-section{padding:120px 0;}
.mixed-grid{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:20px;}
.mixed-col{display:flex; flex-direction:column; gap:20px;}
.mcard{border-radius:var(--r); overflow:hidden; padding:26px; position:relative;}
.mcard.testi{background:var(--paper);}
.mcard.dark{background:var(--ink); color:#fff;}
.mcard.dark h5{font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; line-height:1.4;}
.mcard.dark p{font-size:12px; color:#B8BDCC; margin-top:8px; line-height:1.6;}
.mcard.photo{height:220px; padding:0;}
.stars{color:var(--gold); font-size:12px; letter-spacing:2px;}
.mcard.testi p.quote{font-size:14px; line-height:1.65; margin-top:12px;}
.testi-who{display:flex; align-items:center; gap:10px; margin-top:16px;}
.avatar{width:32px; height:32px; border-radius:50%;}
.testi-who h6{font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px;}
.testi-who span{font-size:10.5px; color:var(--grey);}

/* ---- NUMBERED STEP PROCESS with connector ---- */
.process{padding-bottom:130px;}
.step-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:60px;}
.step-row::before{content:''; position:absolute; top:26px; left:12%; right:12%; height:1px; background:var(--grey-lt); z-index:0;}
.step{position:relative; z-index:1; padding:0 18px; text-align:center;}
.step .snum{width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--gold); font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.step h4{font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px;}
.step p{font-size:12.5px; color:var(--grey); margin-top:8px; line-height:1.6;}

/* ---- CAPSULE PHOTO ROW (Ocean & Silk signature shape) ---- */
.capsule-section{padding-bottom:130px;}
.capsule-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:center;}
.capsule{border-radius:100px; overflow:hidden; aspect-ratio:1/2.1; position:relative;}
.capsule.center{background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:20px;}
.capsule.center h5{font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; line-height:1.4;}
.capsule.center span{color:var(--gold); font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; margin-top:10px; text-transform:uppercase; letter-spacing:.08em;}
.capsule.text{background:var(--paper); display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;}
.capsule.text span{font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; color:var(--grey); line-height:1.5;}

/* ---- FINAL CONTACT FORM ---- */
.contact{padding-bottom:110px;}
.contact-panel{background:var(--paper); border-radius:var(--r-lg); padding:60px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:54px; align-items:center;}
.contact h2{font-size:clamp(26px,3.6vw,40px); line-height:1.12; margin-bottom:16px;}
.contact p.lead{font-size:15px; color:var(--grey); line-height:1.75; max-width:36ch;}
.form-card{background:#fff; border-radius:22px; padding:30px; box-shadow:0 24px 56px -24px rgba(14,20,32,0.18);}
.field{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.field label{font-family:'Montserrat',sans-serif; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey);}
.field input, .field textarea{border:1px solid var(--grey-lt); border-radius:12px; padding:12px 14px; font-family:'Poppins',sans-serif; font-size:14px; outline:none; transition:border-color .3s ease;}
.field input:focus, .field textarea:focus{border-color:var(--blue);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.btn-submit{width:100%; justify-content:center; margin-top:4px; display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; padding:14px 24px; border-radius:100px; border:none; cursor:pointer;}

/* ---- FOOTER ---- */
.footer{padding:40px 0; border-top:1px solid var(--grey-lt); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-social{display:flex; gap:22px; font-size:12.5px; font-weight:600;}
.footer-social a{opacity:.65; transition:opacity .25s ease;}
.footer-social a:hover{opacity:1;}
.footer p{font-size:11.5px; color:var(--grey);}

.sec-head{padding:110px 0 50px; text-align:center;}
.sec-head h2{font-size:clamp(28px,4vw,46px); max-width:18ch; margin:12px auto 0; line-height:1.1;}
.sec-head p{margin-top:14px; font-size:14.5px; color:var(--grey); max-width:48ch; margin-left:auto; margin-right:auto;}

@media (max-width:960px){
  .nav-links{display:none;}
  .stats-row{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .feature-grid{grid-template-columns:1fr;}
  .proj-grid{grid-template-columns:1fr;}
  .mixed-grid{grid-template-columns:1fr;}
  .step-row{grid-template-columns:1fr 1fr; row-gap:36px;}
  .step-row::before{display:none;}
  .capsule-row{grid-template-columns:repeat(2,1fr); row-gap:14px;}
  .capsule{aspect-ratio:1/1.3;}
  .contact-panel{grid-template-columns:1fr; padding:32px;}
  .form-row{grid-template-columns:1fr;}
  .cta-form{flex-direction:column; border-radius:20px;}
}

/* ============================================================
   PAGES DÉTAILLÉES — hero de page, timeline, valeurs, équipe
   ============================================================ */
.page-hero{padding:150px 0 70px;}
.page-hero .eyebrow{display:flex; align-items:center; gap:10px; justify-content:center;}
.page-hero .eyebrow .sq{width:7px; height:7px; background:var(--gold); border-radius:2px;}
.page-hero h1{font-size:clamp(36px,6vw,72px); line-height:1.02; text-align:center; max-width:16ch; margin:16px auto 0;}
.page-hero p.sub{margin-top:22px; font-size:15.5px; color:var(--grey); max-width:56ch; margin-left:auto; margin-right:auto; text-align:center; line-height:1.75;}
.page-hero-media{margin-top:50px; border-radius:var(--r-lg); overflow:hidden; height:48vh; min-height:320px; position:relative;}
.page-hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,17,38,0.05), rgba(4,17,38,0.5) 100%);}
.page-hero-media .cap{position:absolute; bottom:24px; left:24px; z-index:2; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px; background:rgba(255,255,255,0.15); backdrop-filter:blur(6px); padding:9px 16px; border-radius:100px;}

.breadcrumb{padding:130px 0 0; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.08em;}
.breadcrumb a{color:var(--blue);}
.breadcrumb.no-top{padding-top:0;}

/* Timeline (histoire / parcours) */
.timeline{padding-bottom:130px;}
.tl-row{display:grid; grid-template-columns:140px 1fr; gap:30px; padding:34px 0; border-top:1px solid var(--grey-lt);}
.tl-row:last-child{border-bottom:1px solid var(--grey-lt);}
.tl-year{font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:var(--blue);}
.tl-content h4{font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; margin-bottom:8px;}
.tl-content p{font-size:13.5px; color:var(--grey); line-height:1.7; max-width:60ch;}

/* Valeurs / CII detail cards */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:130px;}
.value-card{border-radius:var(--r); padding:34px; background:var(--paper);}
.value-card.dark{background:var(--ink); color:#fff;}
.value-card .vnum{font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:var(--blue);}
.value-card.dark .vnum{color:var(--gold);}
.value-card h4{font-family:'Montserrat',sans-serif; font-weight:800; font-size:20px; margin:14px 0 12px;}
.value-card p{font-size:13.5px; line-height:1.7; color:var(--grey);}
.value-card.dark p{color:#B8BDCC;}
.value-card ul{margin-top:14px; padding-left:0; list-style:none;}
.value-card ul li{font-size:12.5px; color:var(--grey); margin-bottom:8px; padding-left:18px; position:relative;}
.value-card.dark ul li{color:#B8BDCC;}
.value-card ul li::before{content:'—'; position:absolute; left:0; color:var(--blue);}
.value-card.dark ul li::before{color:var(--gold);}

/* Team cards */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:130px;}
.team-card{border-radius:var(--r); overflow:hidden;}
.team-card .tphoto{aspect-ratio:1/1.1; position:relative;}
.team-card .tphoto::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));}
.team-card .tmeta{position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff;}
.team-card .tmeta h5{font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px;}
.team-card .tmeta span{font-size:11px; opacity:.85;}

/* Service detail blocks (solutions page) */
.service-block{padding:70px 0; border-top:1px solid var(--grey-lt);}
.service-block:last-child{border-bottom:1px solid var(--grey-lt);}
.service-inner{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.service-inner.rev{grid-template-columns:1.1fr 0.9fr;}
.service-inner.rev .service-text{order:2;}
.service-tag{display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); background:var(--blue-tint); padding:8px 14px; border-radius:100px;}
.service-text h2{font-size:clamp(24px,3.2vw,36px); margin:16px 0 14px; line-height:1.15;}
.service-text p{font-size:14.5px; color:var(--grey); line-height:1.75; max-width:44ch;}
.service-list{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px;}
.service-list span{font-family:'Montserrat',sans-serif; font-weight:600; font-size:11.5px; border:1px solid var(--grey-lt); border-radius:100px; padding:8px 14px;}
.service-media{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.3; position:relative;}

/* Impact deep-dive */
.cohort-card{border-radius:var(--r); background:var(--paper); padding:30px; display:flex; flex-direction:column; gap:10px;}
.cohort-card.active{background:var(--ink); color:#fff;}
.cohort-card .status{font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); width:fit-content; background:var(--blue-tint); padding:6px 12px; border-radius:100px;}
.cohort-card.active .status{color:var(--gold); background:rgba(242,194,25,0.15);}
.cohort-card h4{font-family:'Montserrat',sans-serif; font-weight:800; font-size:19px;}
.cohort-card p{font-size:12.5px; color:var(--grey); line-height:1.6;}
.cohort-card.active p{color:#B8BDCC;}
.cohort-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:130px;}

.trainer-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:130px;}
.trainer-card{text-align:center;}
.trainer-photo{border-radius:50%; width:84px; height:84px; margin:0 auto 16px;}
.trainer-card h5{font-family:'Montserrat',sans-serif; font-weight:700; font-size:13.5px;}
.trainer-card span{font-size:11px; color:var(--grey); display:block; margin-top:4px; line-height:1.5;}

/* CTA between pages */
.page-cta{margin:0 20px 90px; border-radius:var(--r-lg); background:var(--ink); color:#fff; padding:70px 50px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.page-cta h3{font-size:clamp(22px,3vw,32px); max-width:16ch; line-height:1.2;}

/* ============================================================
   CURSEUR PERSONNALISÉ + RÉACTIONS AU SURVOL
   ============================================================ */
@media (hover:hover) and (pointer:fine){ body{cursor:none;} }
@media (hover:none), (pointer:coarse){ .cursor,.cursor-ring,.cursor-label{display:none;} }
/* Curseur repris fidèlement de la démo : point + anneau qui suit avec
   inertie + libellé texte qui apparaît au survol des éléments [data-cursor] */
.cursor,.cursor-ring{ position:fixed; left:0; top:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
.cursor{ width:9px; height:9px; border-radius:50%; background:var(--ink); transition:width .25s,height .25s,background .25s; }
.cursor-ring{ width:42px; height:42px; border:1px solid var(--ink); border-radius:50%; opacity:.35; transition:width .3s,height .3s,border-color .3s,background .3s,opacity .3s; }
.cursor-label{ position:fixed; left:0; top:0; transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; z-index:10000; font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--ink); background:var(--gold); padding:0; transition:opacity .25s,transform .25s; }
body.cursor-hover .cursor{ width:18px; height:18px; background:var(--gold); }
body.cursor-hover .cursor-ring{ width:80px; height:80px; opacity:1; background:var(--gold); border-color:var(--gold); }
body.cursor-label-on .cursor{ opacity:0; }
body.cursor-label-on .cursor-label{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Parallax-ready elements */
[data-parallax]{will-change:transform;}

/* ============================================================
   OUVERTURES DE PAGE DIFFÉRENCIÉES (première impression)
   ============================================================ */

/* ADN — grande image avec mots qui défilent dessus */
.hero-adn{padding:150px 0 40px;}
.hero-adn h1{font-size:clamp(34px,5.4vw,60px); line-height:1.05; text-align:center; margin:16px auto 0; max-width:16ch;}
.hero-adn p.sub{text-align:center; margin:20px auto 0; max-width:56ch;}
.stack-words{display:flex; flex-direction:column; gap:12px;}
.stack-words .sw{border-radius:18px; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(20px,2.6vw,28px);}
.stack-words .sw span.tag-n{font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; opacity:.7;}
.sw1{background:var(--ink); color:#fff;}
.sw2{background:var(--blue); color:#fff;}
.sw3{background:var(--gold); color:var(--ink);}

/* SOLUTIONS — split avec pastilles de services flottantes */
.hero-solutions{padding:150px 0 60px;}
.hero-solutions .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
.hero-solutions h1{font-size:clamp(32px,4.8vw,56px); line-height:1.06; text-align:left; margin:16px 0 0;}
.hero-solutions p.sub{text-align:left; margin:20px 0 0; margin-left:0;}
.pill-stack{display:flex; flex-direction:column; gap:12px;}
.pill-float{display:flex; align-items:center; gap:14px; background:var(--paper); border-radius:100px; padding:14px 20px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13.5px;}
.pill-float .pn{width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;}
.pill-float:nth-child(1){margin-left:0;}
.pill-float:nth-child(2){margin-left:24px;}
.pill-float:nth-child(3){margin-left:48px;}
.pill-float:nth-child(4){margin-left:24px;}
.pill-float:nth-child(5){margin-left:0;}

/* CRÉATIONS — filmstrip de vignettes projets dès l'ouverture */
.hero-creations{padding:150px 0 0;}
.hero-creations h1{max-width:14ch;}
.hero-creations .wrap > .eyebrow{ display:flex; align-items:center; justify-content:center; gap:8px; }
.hero-creations .sub{ text-align:center; max-width:60ch; margin:28px auto 0; }
.filmstrip{margin-top:50px; display:flex; gap:16px; overflow-x:auto; padding-bottom:50px; margin-left:calc(-1 * (50vw - 50%)); margin-right:calc(-1 * (50vw - 50%)); padding-left:calc(50vw - 50% + 32px); padding-right:32px;}
.filmstrip::-webkit-scrollbar{height:5px;}
.filmstrip::-webkit-scrollbar-thumb{background:var(--gold); border-radius:10px;}
.film-card{flex:0 0 220px; height:280px; border-radius:var(--r); position:relative; overflow:hidden;}
.film-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.7));}
.film-card .fcap{position:absolute; left:14px; bottom:14px; right:14px; z-index:2; color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; line-height:1.35;}
.film-card .ftag{position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,0.92); color:var(--ink); font-family:'Montserrat',sans-serif; font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:100px;}

/* IMPACT — headline centré + grande image d'impact */
.hero-impact{padding:150px 0 60px;}
.hero-impact h1{font-size:clamp(32px,5vw,58px); line-height:1.08; text-align:center; margin:16px auto 0; max-width:16ch;}
.hero-impact p.sub{text-align:center; margin:20px auto 0; max-width:56ch;}
.impact-callout{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:40px; position:relative; overflow:hidden;}
.impact-callout::before{content:''; position:absolute; width:70%; height:140%; top:-20%; right:-20%; background:radial-gradient(circle, rgba(242,194,25,0.18), transparent 65%);}
.impact-callout > *{position:relative; z-index:1;}
.impact-callout .big-n{font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(50px,6vw,74px); color:var(--gold); line-height:1;}
.impact-callout p{font-size:13.5px; color:#B8BDCC; margin-top:10px; max-width:22ch; line-height:1.6;}
.impact-callout .mini-row{display:flex; gap:22px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.15);}
.impact-callout .mini-row div{font-family:'Montserrat',sans-serif;}
.impact-callout .mini-row .mn{font-weight:800; font-size:20px;}
.impact-callout .mini-row .ml{font-size:10.5px; color:#8B93A8; margin-top:2px;}

@media (max-width:960px){
  .hero-adn .wrap, .hero-solutions .wrap, .hero-impact .wrap{grid-template-columns:1fr; gap:32px;}
  .hero-adn h1, .hero-solutions h1, .hero-impact h1, .hero-adn p.sub, .hero-solutions p.sub, .hero-impact p.sub{text-align:left;}
  .pill-float:nth-child(n){margin-left:0;}
}

/* ============================================================
   IMGWORD — mots-images du hero avec effet liquide
   (morph organique continu, accentué au survol / tap)
   ============================================================ */
.hero-title .imgword{
  cursor:pointer;
  will-change:border-radius, transform;
  transition:border-radius .6s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1);
  animation:liquid-idle 7s ease-in-out infinite;
}
.hero-title .imgword.art-blue{ animation-delay:-3.5s; }
.hero-title .imgword img{
  transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.hero-title .imgword:hover,
.hero-title .imgword.liquid-active{
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  transform:scale(1.18);
  z-index:2;
}
.hero-title .imgword:hover img,
.hero-title .imgword.liquid-active img{
  transform:scale(1.3) rotate(-5deg);
}
@keyframes liquid-idle{
  0%, 100%{ border-radius:100px; }
  50%{ border-radius:46% 54% 58% 42% / 48% 42% 58% 52%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-title .imgword{ animation:none; transition:none; }
  .hero-title .imgword img{ transition:none; }
}

/* ============================================================
   AJOUTS — animations flottantes, compteurs, refontes de blocs
   ============================================================ */

/* --- Flottement doux pour images / éléments --- */
@keyframes floatY{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(1deg); }
}
@keyframes floatY2{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-9px) rotate(-1.3deg); }
}
.floaty{ animation:floatY 5.5s ease-in-out infinite; }
@keyframes floatCover{ 0%,100%{ transform:scale(1.08) translateY(0); } 50%{ transform:scale(1.08) translateY(-10px); } }
.floaty-cover{ animation:floatCover 6.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .floaty-cover{ animation:none; } }
.floaty-slow{ animation:floatY 7.5s ease-in-out infinite; }
.floaty-2{ animation:floatY2 4.8s ease-in-out infinite; }
.floaty-d1{ animation-delay:.3s; }
.floaty-d2{ animation-delay:1.1s; }
.floaty-d3{ animation-delay:1.9s; }
@media (prefers-reduced-motion: reduce){ .floaty,.floaty-slow,.floaty-2{ animation:none; } }

/* --- Titre hero animé (mots qui apparaissent en cascade) --- */
.hero-title .word{ display:inline-block; opacity:0; transform:translateY(18px) rotate(-1deg); animation:wordIn .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes wordIn{ to{ opacity:1; transform:translateY(0) rotate(0deg); } }

/* --- Badges héros devenus liens flottants vers les pages --- */
.hero-badges{ gap:0; }
.hero-badges a.b{ text-decoration:none; box-shadow:0 10px 22px -10px rgba(0,0,0,.45); transition:transform .3s ease; }
.hero-badges a.b:hover{ transform:translateY(-4px) scale(1.08); }

/* --- Compteurs animés --- */
.stat-num.is-counting, .impact-callout .big-n.is-counting, .impact-callout .mn.is-counting{ color:var(--blue); }

/* --- Capsule row : formes réduites + lien central --- */
.capsule-row{ max-width:1080px; margin:0 auto; }
.capsule{ aspect-ratio:1/1.7; }
.capsule.center{ padding:16px; }
.capsule.center a.cap-link{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:inherit; }
@media (max-width:960px){ .capsule{ aspect-ratio:1/1.2; } }

/* ============================================================
   ADN — nouvelle ouverture : grande image + mots qui défilent
   ============================================================ */
.adn-media-hero{ margin-top:44px; border-radius:var(--r-lg); overflow:hidden; position:relative; height:64vh; min-height:420px; }
.adn-media-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.adn-media-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,17,38,.05), rgba(4,17,38,.72) 100%); }
.adn-scroll-words{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:36px; display:flex; gap:14px; flex-wrap:wrap; }
.adn-scroll-words span{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,4vw,44px); color:#fff; opacity:0; transform:translateY(24px); animation:adnWord .8s cubic-bezier(.16,1,.3,1) forwards; }
.adn-scroll-words span:nth-child(1){ animation-delay:.15s; color:#fff; }
.adn-scroll-words span:nth-child(2){ animation-delay:.4s; color:var(--gold); }
.adn-scroll-words span:nth-child(3){ animation-delay:.65s; color:#fff; }
@keyframes adnWord{ to{ opacity:1; transform:translateY(0); } }
.adn-media-hero .cap-tag{ position:absolute; top:24px; right:24px; z-index:2; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); padding:9px 16px; border-radius:100px; }

/* --- Équipe ADN : une grande photo fusion, style Pinterest --- */
.team-photo-single{ border-radius:var(--r-lg); overflow:hidden; position:relative; max-width:720px; margin:0 auto; aspect-ratio:4/3.2; }
.team-photo-single img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-photo-single::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72)); }
.team-photo-single .tmeta{ position:absolute; left:26px; right:26px; bottom:22px; z-index:2; color:#fff; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.team-photo-single .tmeta .tperson h5{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; }
.team-photo-single .tmeta .tperson span{ font-size:11.5px; opacity:.85; }

/* --- Espacement + fluidité lien SCD + bloc CTA en image --- */
.scd-link-row{ margin:34px 0 60px; display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.scd-link-row.in{ opacity:1; transform:translateY(0); }
.scd-link-row a{ text-decoration:underline; font-weight:600; transition:color .25s ease; }
.scd-link-row a:hover{ color:var(--blue); }

.page-cta.img-cta{ position:relative; overflow:hidden; background:var(--ink); }
.page-cta.img-cta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.page-cta.img-cta::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(4,17,38,.92), rgba(4,17,38,.35)); }
.page-cta.img-cta > *{ position:relative; z-index:1; }

/* ============================================================
   SOLUTIONS — hero avec image forte + mots type moodboard
   ============================================================ */
.sol-media{ margin-top:34px; border-radius:var(--r-lg); overflow:hidden; position:relative; height:340px; }
.sol-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 6s ease; }
.hero-solutions:hover .sol-media img{ transform:scale(1.08); }
.sol-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(4,17,38,.6)); }
.sol-media .sol-tag{ position:absolute; left:20px; bottom:18px; z-index:2; color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; }
.pill-float{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.pill-float:hover{ transform:translateX(6px) scale(1.02); background:var(--gold-tint); }

.cta-banner-media{ position:relative; overflow:hidden; }
.cta-banner-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.cta-banner-media::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(231,240,251,.7), rgba(231,240,251,.94)); }
.cta-banner-media > *{ position:relative; z-index:1; }

/* ============================================================
   CRÉATIONS — titre éclaté qui fuit le curseur
   ============================================================ */
.scatter-title{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:center; text-align:center; max-width:980px; margin-left:auto; margin-right:auto; }
.scatter-title .sc-word{ display:inline-block; font-family:'Montserrat',sans-serif; font-weight:800; line-height:1; transition:transform .35s cubic-bezier(.16,1,.3,1); will-change:transform; }
.scatter-title .sc-word.big{ font-size:clamp(40px,7.4vw,86px); }
.scatter-title .sc-word.mid{ font-size:clamp(22px,3.6vw,38px); color:var(--blue); }
.scatter-title .sc-word.sm{ font-size:clamp(14px,2vw,18px); color:var(--grey); font-weight:600; align-self:center; }
.scatter-title .sc-word.gold{ color:var(--gold); }

/* ============================================================
   IMPACT — hero image forte + bande de redirection SCD
   ============================================================ */
.impact-media-hero{ margin-top:40px; border-radius:var(--r-lg); overflow:hidden; position:relative; height:56vh; min-height:380px; }
.impact-media-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.impact-media-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,17,38,.08), rgba(4,17,38,.6) 100%); }
.impact-media-hero .imc{ position:absolute; left:26px; bottom:24px; right:26px; z-index:2; color:#fff; }
.impact-media-hero .imc .big-n{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(40px,5vw,60px); color:var(--gold); line-height:1; }
.impact-media-hero .imc p{ font-size:13.5px; margin-top:6px; max-width:34ch; }

.scd-redirect{ border-radius:var(--r-lg); background:var(--paper); padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.scd-redirect h3{ font-size:clamp(19px,2.4vw,26px); max-width:34ch; line-height:1.3; }
.scd-redirect p{ color:var(--grey); font-size:13px; margin-top:8px; }

@media (max-width:960px){
  .scatter-title{ gap:8px 12px; }
  .adn-media-hero,.impact-media-hero{ height:44vh; }
}