/* ============================================================
   INVESTIR POUR GAGNER — Landing
   Pure monochrome. Black on white. Sophistication from motion.
   ============================================================ */

:root{
  --ink:#000;
  --paper:#fff;
  --ink-04: rgba(0,0,0,.04);
  --ink-08: rgba(0,0,0,.08);
  --ink-12: rgba(0,0,0,.12);
  --ink-40: rgba(0,0,0,.40);
  --ink-55: rgba(0,0,0,.55);
  --ink-70: rgba(0,0,0,.70);
  --edge: rgba(0,0,0,.12);
  --ease: cubic-bezier(.16,1,.3,1);          /* premium ease-out */
  --ease-soft: cubic-bezier(.33,.85,.4,1);
  --pad: clamp(20px, 6vw, 120px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:"Poppins", system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:#000; color:#fff; }

/* ---------- Scroll progress hairline ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:#000; z-index:200; will-change:transform;
}

/* ---------- Fixed brand bar (no links — pure mark) ---------- */
.topbar{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  z-index:120; pointer-events:none;
  mix-blend-mode:normal;
}
.topbar .mark{ display:flex; align-items:center; gap:12px; }
.topbar a.mark{ color:inherit; text-decoration:none; pointer-events:auto; }
.topbar .mark img{ height:30px; width:auto; display:block; }
.topbar .mark .wm{
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  opacity:0; transform:translateY(-6px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.topbar.scrolled .mark .wm{ opacity:1; transform:none; }
.topbar .loc{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-40); font-weight:500;
}

/* ============================================================
   GENERIC LAYOUT
   ============================================================ */
section{ position:relative; }
.wrap{ max-width:1320px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(12px,1vw,14px); font-weight:500;
  letter-spacing:.02em; color:var(--ink-55);
}
.eyebrow::before{
  content:""; width:34px; height:1.5px; background:var(--ink);
  display:inline-block;
}

/* Declarative period — brand signature */
.dot{ color:var(--ink); }

h1,h2,h3{ font-weight:700; letter-spacing:-.03em; line-height:1; text-wrap:balance; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:14vh; padding-bottom:8vh;
  perspective:1150px; overflow:hidden;
}
.hero .wrap{ position:relative; z-index:5; width:100%; }

/* subtle architectural sketch — anchors the "immobilier" cue, below the logo */
.hero-sketch{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:5%; bottom:2%; width:clamp(440px, 56vw, 900px); height:auto;
  opacity:.13;
  -webkit-mask-image:linear-gradient(to top, #000 56%, transparent 100%);
          mask-image:linear-gradient(to top, #000 56%, transparent 100%);
}
@media(max-width:900px){
  .hero-sketch{ right:-4%; bottom:1%; width:92vw; opacity:.09; }
}

.hero-eyebrow{ will-change:transform,opacity; transition:opacity .7s var(--ease), transform .8s var(--ease); }
.js .hero-eyebrow{ opacity:0; transform:translateY(20px); }
.hero.intro .hero-eyebrow{ opacity:1; transform:none; }

.hero h1{
  font-size:clamp(2.5rem, 6.3vw, 6rem);
  line-height:.97; letter-spacing:-.035em; font-weight:700;
  max-width:13ch; margin-top:clamp(20px,3vh,40px);
}
.hero h1 .word{
  display:inline-block;
  transform-origin:bottom; will-change:transform;
  transition:opacity .85s var(--ease), transform 1s var(--ease);
}
.js .hero h1 .word{ opacity:0; transform:translateY(115%) rotateX(-38deg); }
.hero.intro h1 .word{ opacity:1; transform:none; }
.hero.intro h1 .word:nth-child(1){ transition-delay:.04s; }
.hero.intro h1 .word:nth-child(2){ transition-delay:.10s; }
.hero.intro h1 .word:nth-child(3){ transition-delay:.16s; }
.hero.intro h1 .word:nth-child(4){ transition-delay:.22s; }
.hero.intro h1 .word:nth-child(5){ transition-delay:.28s; }
.hero.intro h1 .word:nth-child(6){ transition-delay:.34s; }
.hero.intro h1 .word:nth-child(7){ transition-delay:.40s; }
.hero.intro h1 .word:nth-child(8){ transition-delay:.46s; }
.hero h1 .em{ position:relative; }
/* big declarative period */
.hero h1 .pt{ color:#000; }

.hero p.lead{
  margin-top:clamp(26px,4vh,44px);
  max-width:46ch; font-size:clamp(1rem,1.4vw,1.28rem);
  line-height:1.55; font-weight:400; color:var(--ink-70);
  transition:opacity .9s var(--ease) .5s, transform 1s var(--ease) .5s;
}
.js .hero p.lead{ opacity:0; transform:translateY(24px); }
.hero.intro p.lead{ opacity:1; transform:none; }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:clamp(20px,4vh,40px);
  display:flex; align-items:center; gap:12px; z-index:6;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-40); opacity:0; transition:opacity 1s var(--ease) .8s;
}
.scroll-cue.in{ opacity:1; }
.scroll-cue .bar{ position:relative; width:1px; height:46px; background:var(--ink-12); overflow:hidden; }
.scroll-cue .bar::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background:#000; animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(260%);} }

/* ---------- 3D logo scene — the REAL mark, deconstructed ---------- */
.scene{
  position:absolute; inset:0; z-index:1;
  transform-style:preserve-3d; pointer-events:none;
}
.logo3d{
  position:absolute; top:50%; left:74%;
  width:clamp(300px, 30vw, 470px); aspect-ratio:707/729;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d; will-change:transform;
}
.logo3d .lblk{
  position:absolute; height:auto; display:block;
  transform-style:preserve-3d; will-change:transform;
  backface-visibility:hidden;
}

@media(max-width:900px){
  .scene{ opacity:.5; }
  .logo3d{ left:78%; top:58%; width:58vw; }
}
@media(max-width:560px){
  .topbar .loc{ display:none; }
  .hero h1{ font-size:clamp(2.3rem,11vw,3.4rem); max-width:none; }
  .scene{ opacity:.32; }
  .logo3d{ left:82%; top:64%; }
}

/* (floating décor blocks removed — only the single hero logo remains) */

/* ============================================================
   APPROCHE
   ============================================================ */
.approche{ padding:clamp(120px,18vh,220px) 0; }
.approche .grid{
  display:grid; grid-template-columns:1fr; gap:clamp(40px,6vw,90px);
}
.lead-statement{
  font-size:clamp(1.8rem,3.9vw,3.4rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.08; max-width:20ch;
}
.approche .detail{
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.7;
  color:var(--ink-70); max-width:54ch; font-weight:400;
}
.approche .meta{
  display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,80px);
  margin-top:14px; align-items:flex-start;
}
.stat .n{ font-size:clamp(2.6rem,5vw,4.4rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.stat .l{ font-size:13px; color:var(--ink-55); margin-top:8px; max-width:18ch; letter-spacing:.01em; }

@media(min-width:900px){
  .approche .grid{ grid-template-columns:1.05fr .95fr; align-items:start; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:clamp(60px,8vh,120px) 0 clamp(120px,18vh,200px); }
.services .head{ display:flex; flex-direction:column; gap:22px; margin-bottom:clamp(50px,8vh,90px); }
.services h2{ font-size:clamp(2.2rem,5.4vw,4.6rem); letter-spacing:-.035em; }

.cards{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--edge); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
@media(min-width:680px){ .cards{ grid-template-columns:1fr 1fr; } }
@media(min-width:1040px){ .cards{ grid-template-columns:1fr 1fr 1fr; } }

.card{
  background:var(--paper); padding:clamp(30px,3vw,46px) clamp(26px,2.6vw,42px) clamp(40px,4vw,58px);
  position:relative; min-height:clamp(300px,34vh,380px);
  display:flex; flex-direction:column;
  transition:background .5s var(--ease), transform .6s var(--ease);
  overflow:hidden; will-change:transform;
}
.card .num{
  font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--ink-40);
  transition:color .5s var(--ease);
}
.card .ic{
  margin:clamp(20px,3vh,34px) 0 clamp(20px,3vh,30px);
  display:flex; align-items:center; color:#000;
  transition:color .5s var(--ease);
}
.card .ic svg{
  width:42px; height:42px; display:block;
  transition:transform .55s var(--ease);
}
.card h3{
  font-size:clamp(1.25rem,1.7vw,1.6rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; margin-top:clamp(20px,3vh,30px);
  transition:color .5s var(--ease);
}
.card p{
  margin-top:14px; font-size:clamp(.92rem,1.05vw,1rem); line-height:1.6;
  color:var(--ink-55); font-weight:400; transition:color .5s var(--ease);
}
/* hover: invert to black, icon turns white + lifts */
.card:hover{ background:#000; }
.card:hover .num{ color:rgba(255,255,255,.5); }
.card:hover h3{ color:#fff; }
.card:hover p{ color:rgba(255,255,255,.62); }
.card:hover .ic{ color:#fff; }
.card:hover .ic svg{ transform:scale(1.09); }

/* ============================================================
   POURQUOI
   ============================================================ */
.pourquoi{ padding:clamp(120px,18vh,220px) 0; background:#000; color:#fff; overflow:hidden; position:relative; }
.pourquoi ::selection{ background:#fff; color:#000; }
.pourquoi .dot{ color:#fff; }
.pourquoi .eyebrow{ color:rgba(255,255,255,.6); }
.pourquoi .eyebrow::before{ background:#fff; }
.pourquoi h2{
  font-size:clamp(2.2rem,5.6vw,5rem); letter-spacing:-.035em; margin-top:28px;
  max-width:18ch;
}
.pourquoi .pillars{
  display:grid; grid-template-columns:1fr; gap:1px;
  margin-top:clamp(60px,9vh,110px);
  background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
}
@media(min-width:820px){ .pourquoi .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar{ background:#000; padding:clamp(34px,4vh,56px) clamp(8px,2vw,40px) clamp(20px,3vh,30px); }
.pillar .pn{ font-size:13px; font-weight:600; letter-spacing:.05em; color:rgba(255,255,255,.4); }
.pillar h3{ font-size:clamp(1.4rem,2.2vw,2rem); font-weight:600; letter-spacing:-.025em; line-height:1.1; margin-top:22px; }
.pillar p{ margin-top:16px; font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.65; color:rgba(255,255,255,.6); font-weight:400; max-width:34ch; }

/* ============================================================
   QUI SOMMES-NOUS — team
   ============================================================ */
.equipe{ padding:clamp(120px,18vh,210px) 0 clamp(110px,16vh,190px); position:relative; overflow:hidden; }
.equipe .head{ max-width:60ch; }
.equipe h2{ font-size:clamp(2.2rem,5.4vw,4.6rem); letter-spacing:-.035em; margin-top:26px; }
.equipe .intro{
  font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.65; color:var(--ink-70);
  max-width:56ch; margin-top:clamp(26px,4vh,40px); font-weight:400;
}
.team{
  display:grid; grid-template-columns:1fr; gap:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px);
  margin-top:clamp(56px,8vh,96px);
}
@media(min-width:560px){ .team{ grid-template-columns:1fr 1fr; } }
@media(min-width:1000px){ .team{ grid-template-columns:repeat(4,1fr); } }

.member{ display:flex; flex-direction:column; transition:transform .6s var(--ease); will-change:transform; }
.member .shot{
  position:relative; width:100%; aspect-ratio:4/5; background:var(--ink-04);
  overflow:hidden; border:1px solid var(--ink-08);
}
.member .shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block;
  /* portraits are pre-treated to B&W; keep a light, even tone */
  filter:contrast(1.02);
  transition:filter .6s var(--ease), transform 1.4s var(--ease);
}
.member:hover .shot img{ filter:contrast(1.02) brightness(1.08); transform:scale(1.03); }
.member .name{
  font-size:clamp(1.05rem,1.3vw,1.28rem); font-weight:600; letter-spacing:-.02em;
  margin-top:clamp(16px,2vh,22px); line-height:1.1;
}
.member .role{
  font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--ink-55);
  margin-top:8px; line-height:1.4;
}
.member .role::before{
  content:""; display:block; width:26px; height:1.5px; background:var(--ink); margin-bottom:12px;
}
/* rendez-vous (Go High Level) booking button */
.member .book{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:clamp(18px,2.4vh,24px);
}
.member .book a{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 22px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; color:#000;
  font-family:var(--ipg-font,inherit); font-size:13px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.member .book a:hover{ background:#000; color:#fff; }
.member .book svg{ width:16px; height:16px; flex-shrink:0; transition:transform .35s var(--ease); }
.member .book a:hover svg{ transform:scale(1.08); }
.member .name{ margin-top:clamp(16px,2vh,22px); }

/* ============================================================
   AVIS GOOGLE — live reviews rail
   ============================================================ */
.avis{ padding:clamp(40px,6vh,80px) 0 clamp(120px,18vh,200px); position:relative; overflow:hidden; }
.avis .wrap{ position:relative; }
.avis .head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,4vw,60px);
}
.avis h2{ font-size:clamp(2rem,4.6vw,3.8rem); letter-spacing:-.035em; margin-top:24px; max-width:16ch; }

/* synthesis block (avg rating + count) */
.gsum{ display:flex; align-items:center; gap:clamp(18px,2vw,28px); flex-shrink:0; }
.gsum .score{ font-size:clamp(2.6rem,4.6vw,4.2rem); font-weight:700; letter-spacing:-.04em; line-height:.9; }
.gsum .meta{ display:flex; flex-direction:column; gap:7px; }
.stars{ display:inline-flex; gap:3px; }
.stars svg{ width:18px; height:18px; display:block; }
.stars svg path{ fill:#000; }
.gsum .count{ font-size:13px; color:var(--ink-55); font-weight:500; }
.gsum .gmark{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-70); }
.gmark .g{
  width:18px; height:18px; border-radius:50%; border:1.5px solid #000;
  display:grid; place-items:center; font-weight:700; font-size:11px; line-height:1;
}

/* the scrollable rail */
.rail-wrap{ position:relative; margin-top:clamp(40px,6vh,72px); }
.rail{
  display:flex; gap:clamp(16px,1.6vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px clamp(20px,6vw,120px) 4px var(--pad);
  margin:0 calc(-1 * var(--pad)); /* bleed to page edges */
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; scroll-behavior:smooth;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.rail.dragging *{ pointer-events:none; }

.rev{
  scroll-snap-align:start; flex:0 0 auto;
  width:clamp(280px,30vw,360px); min-height:230px;
  background:var(--paper); border:1px solid var(--ink-12);
  padding:clamp(24px,2.2vw,30px); display:flex; flex-direction:column;
  transition:border-color .4s var(--ease);
}
.rev:hover{ border-color:var(--ink-40); }
.rev .top{ display:flex; align-items:center; gap:13px; }
.rev .av{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:#000; color:#fff; display:grid; place-items:center;
  font-weight:600; font-size:17px; letter-spacing:-.01em;
}
.rev .av img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.03); }
.rev .who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.rev .who .nm{ font-weight:600; font-size:15px; letter-spacing:-.01em; line-height:1.1; }
.rev .who .dt{ font-size:12px; color:var(--ink-40); }
.rev .gicon{ margin-left:auto; flex-shrink:0; }
.rev .gicon .g{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-12); display:grid; place-items:center; font-weight:700; font-size:12px; color:var(--ink-55); }
.rev .stars{ margin-top:18px; }
.rev .stars svg{ width:16px; height:16px; }
.rev .body{
  margin-top:16px; font-size:14px; line-height:1.62; color:var(--ink-70); font-weight:400;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

/* rail controls */
.rail-nav{ display:flex; gap:10px; margin-top:clamp(26px,4vh,40px); padding:0 var(--pad); }
.rail-nav button{
  appearance:none; width:50px; height:50px; border-radius:50%;
  border:1.5px solid var(--ink-12); background:transparent; color:#000;
  cursor:pointer; display:grid; place-items:center;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.rail-nav button:hover{ background:#000; border-color:#000; color:#fff; }
.rail-nav button:disabled{ opacity:.3; cursor:default; }
.rail-nav button:disabled:hover{ background:transparent; border-color:var(--ink-12); color:#000; }
.rail-nav svg{ width:20px; height:20px; }

@media(max-width:560px){
  .avis .head{ flex-direction:column; align-items:flex-start; }
  .rev{ width:80vw; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  min-height:88vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(80px,14vh,160px) var(--pad); gap:clamp(30px,5vh,56px);
  position:relative; overflow:hidden;
}
.foot .mark3d{
  perspective:760px; opacity:0; transform:translateY(40px);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease); will-change:transform,opacity;
}
.foot .mark3d.in{ opacity:1; transform:none; }
.foot img.mark{ width:clamp(130px,17vw,230px); height:auto; display:block; will-change:transform; }
.foot .sig{
  font-size:clamp(2rem,6.5vw,5.6rem); font-weight:700; letter-spacing:-.035em; line-height:1;
}
.foot .sig .pt{ display:inline-block; }
.foot .copy{ font-size:12px; letter-spacing:.05em; color:var(--ink-40); margin-top:6px; }

/* ============================================================
   REVEAL SYSTEM — 3D depth on titles, text & products
   ============================================================ */
.reveal{ opacity:0; transform:perspective(1200px) translateY(48px) rotateX(15deg); transform-origin:50% 100%;
  transition:opacity 1s var(--ease), transform 1.15s var(--ease); will-change:transform,opacity; }
.reveal.in{ opacity:1; transform:perspective(1200px) translateY(0) rotateX(0deg); }
.reveal-3d{ opacity:0; transform:perspective(1200px) translateY(72px) rotateX(28deg) rotateY(-7deg) translateZ(-50px);
  transform-origin:50% 100%; transition:opacity 1s var(--ease), transform 1.2s var(--ease); will-change:transform,opacity; }
.reveal-3d.in{ opacity:1; transform:perspective(1200px) translateY(0) rotateX(0deg) rotateY(0deg) translateZ(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal,.reveal-3d,.hero h1 .word,.hero p.lead,.hero-eyebrow,.foot .mark3d,.foot img.mark{ opacity:1 !important; transform:none !important; }
}