/* Navigation and inner pages */
.topbar{display:block!important;position:fixed;z-index:50;top:22px;right:24px;left:auto;padding:0!important;background:none!important}.menu-mark{display:grid!important;place-content:center;gap:5px;width:46px;height:46px;padding:0!important;border:1px solid rgba(199,176,139,.62)!important;border-radius:50%;background:#090909!important;box-shadow:0 10px 26px rgba(0,0,0,.34)}.menu-mark i{display:block;width:18px;height:1px;background:#c7b08b}.menu-mark i:nth-child(2){width:12px}.menu-mark i:nth-child(3){width:8px}.site-menu{position:fixed;z-index:60;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:56px max(9vw,28px);background:rgba(5,5,5,.98);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s ease}.site-menu.is-open{opacity:1;visibility:visible;transform:none}.site-menu>a{width:max-content;color:#f2f0e9;font:400 clamp(2.15rem,6vw,4.8rem)/.95 'Cormorant Garamond',Georgia,serif}.site-menu>a:hover{color:#c7b08b}.menu-brand{margin-bottom:20px!important;color:#c7b08b!important}.menu-brand span{padding-left:10px;font:500 .66rem Poppins,sans-serif;letter-spacing:.22em;text-transform:uppercase}.menu-close{position:absolute;top:23px;right:26px;border:0;background:none;color:#f2f0e9;font:300 2.7rem/1 Arial;cursor:pointer}.menu-social{display:flex;gap:15px;margin-top:22px}.menu-social a,.footer a{color:#bcb9b0;font:.65rem Poppins,sans-serif;letter-spacing:.08em}.menu-social a:hover,.footer a:hover{color:#c7b08b}.footer-inner{display:flex;gap:18px;align-items:center;justify-content:space-between}.footer-inner div{display:flex;gap:14px}.content-page{min-height:100vh;padding:125px 0 78px;background:#000}.page-intro{max-width:780px;margin:0 0 55px}.page-intro h1{margin:14px 0 20px;font-size:clamp(3.6rem,9vw,7rem);line-height:.84}.page-intro p:last-child{max-width:55ch;color:#c5c1b8;font-size:1rem;line-height:1.65}.case-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:38px;align-items:center;padding-bottom:58px;border-bottom:1px solid rgba(255,255,255,.12)}.case-cover{min-height:420px;display:grid;place-items:center;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:radial-gradient(circle at 50% 30%,#252421,#090909 70%)}.case-cover img,.case-gallery img{max-width:100%;max-height:100%;object-fit:contain}.case-meta h1{font-size:clamp(3.5rem,7vw,6.2rem);line-height:.86;margin:12px 0 20px}.case-meta p:last-child{color:#c5c1b8;line-height:1.65}.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:42px}.case-gallery figure{height:310px;margin:0;display:grid;place-items:center;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:#0c0c0b}.case-gallery img{width:100%;height:100%}.service-detail{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:46px;padding:46px 0;border-top:1px solid rgba(255,255,255,.13)}.service-detail h2{margin:10px 0;font-size:clamp(2.6rem,5vw,4.3rem);line-height:.9}.service-detail p{color:#c5c1b8;line-height:1.65}.deliverables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:22px 0;list-style:none}.deliverables li{padding:14px;border:1px solid rgba(199,176,139,.28);border-radius:10px;color:#f2f0e9;font:.77rem/1.4 Poppins,sans-serif}.service-examples{color:#c7b08b!important;font-size:.75rem!important;letter-spacing:.05em}.about-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}.about-copy p,.contact-copy p{color:#c5c1b8;line-height:1.7}.about-points{display:grid;gap:12px;margin:28px 0}.about-points div{padding:18px;border-left:1px solid #c7b08b;background:#0b0b0a}.contact-form{display:grid;gap:15px;padding:26px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#0c0c0b}.contact-form label{display:grid;gap:7px;color:#f2f0e9;font:.72rem Poppins,sans-serif}.contact-form input,.contact-form textarea,.contact-form select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#050505;color:#f2f0e9;padding:12px;font:400 .86rem Poppins,sans-serif}.contact-form textarea{min-height:135px;resize:vertical}.form-status{padding:12px 14px;border:1px solid rgba(199,176,139,.35);border-radius:9px;color:#c7b08b;font:.78rem Poppins,sans-serif}.contact-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.project-card{color:inherit;text-decoration:none}.project-card-copy .project-link{margin-top:auto;color:#c7b08b;font-size:.77rem;font-weight:600}.project-grid--cases .project-card{min-height:100%}.project-grid--cases .project-cover{aspect-ratio:4/3;height:auto}.project-grid--cases .project-cover img{width:100%;height:100%;object-fit:contain}.service{text-decoration:none;color:inherit}.service:hover{border-color:rgba(199,176,139,.72);transform:translateX(3px)}
@media(max-width:700px){.topbar{top:16px;right:16px}.menu-mark{width:42px;height:42px}.content-page{padding-top:98px}.page-intro{margin-bottom:38px}.case-hero,.about-grid,.contact-grid,.service-detail{grid-template-columns:1fr;gap:28px}.case-cover{min-height:280px}.case-gallery{grid-template-columns:1fr}.case-gallery figure{height:270px}.deliverables{grid-template-columns:1fr}.footer-inner{align-items:flex-start;flex-direction:column}.project-grid--cases .project-cover{height:255px;aspect-ratio:auto}.site-menu>a{font-size:3rem}.site-menu{padding-left:40px}.page-intro h1{font-size:4rem}}


/* === Ajouts 24/09/2026 : bande marques + chiffres clés === */
.clients-band{padding:34px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.clients-band .eyebrow{margin:0 0 18px}
.clients-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;gap:56px;width:max-content;animation:saif-marquee 45s linear infinite}
.clients-track span{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(22px,2.4vw,32px);color:var(--muted);white-space:nowrap;letter-spacing:.01em;transition:color .3s}
.clients-track span:hover{color:var(--gold)}
.clients-marquee:hover .clients-track{animation-play-state:paused}
@keyframes saif-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.clients-track{animation:none;flex-wrap:wrap;width:auto;gap:18px 36px;padding:0 24px}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink);padding:34px 28px;display:flex;flex-direction:column;gap:12px}
.stat b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--gold)}
.stat span{color:var(--muted);font-size:14px;line-height:1.5;max-width:24ch}
@media (max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:26px 20px}}
@media (max-width:480px){.stats-grid{grid-template-columns:1fr}}


/* === À propos : parcours, méthode, outils (24/09/2026) === */
.about-block{padding:80px 0 0}
.about-block h3{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--paper)}
.about-block p{color:var(--muted);line-height:1.65;margin:0}
.timeline{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.timeline-item{background:var(--ink);padding:32px 28px}
.timeline-tag{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.method-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.method-steps li{border-top:1px solid var(--line);padding-top:22px}
.method-steps b{display:block;font-family:Georgia,serif;font-weight:400;font-size:34px;color:var(--gold);margin-bottom:14px}
.tool-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tool-list li{border:1px solid var(--line);border-radius:999px;padding:10px 18px;color:var(--paper);font-size:14px}
@media (max-width:900px){.timeline{grid-template-columns:1fr}.method-steps{grid-template-columns:1fr 1fr}.about-block{padding-top:56px}}
@media (max-width:480px){.method-steps{grid-template-columns:1fr}}


/* === Études de cas : fiche, récit, navigation, CTA (24/09/2026) === */
.case-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 36px;margin:26px 0 30px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-facts dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.case-facts dd{margin:0;color:var(--paper);font-size:15px}
.case-story{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:70px 0 0}
.case-story p:not(.eyebrow){color:var(--muted);line-height:1.7;margin:0}
.case-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:80px}
.case-nav a{background:var(--ink);padding:28px;display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:background .3s}
.case-nav a:hover{background:var(--charcoal)}
.case-nav span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-nav b{font-family:Georgia,serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--paper)}
.case-nav-next{text-align:right;align-items:flex-end}
.case-cta{text-align:center;padding:90px 0 40px}
.case-cta .actions{justify-content:center;margin-top:26px}
@media (max-width:900px){.case-story{grid-template-columns:1fr;gap:26px}.case-facts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.case-nav{grid-template-columns:1fr}.case-nav-next{text-align:left;align-items:flex-start}}

/* ==========================================================
 * Saif Motion v3 — effets pilotés par le scroll (25/09/2026)
 * --p = progression d'entrée (0→1), --f = mise en valeur au centre (0→1)
 * ========================================================== */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.2,.7,.2,1);--gold-rgb:232,187,103}
body{animation:saif-page-in .6s var(--ease-soft) both}
body.is-leaving{opacity:0;transition:opacity .26s ease}
@keyframes saif-page-in{from{opacity:0}to{opacity:1}}

/* Barre de progression */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8a6d3f,var(--gold),#f3dca8);box-shadow:0 0 12px rgba(var(--gold-rgb),.55);pointer-events:none}
.admin-bar .scroll-progress{top:46px}
@media (min-width:783px){.admin-bar .scroll-progress{top:32px}}

/* ---------- HERO : intro puis effet lié au scroll ---------- */
.hero h1.is-split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1.is-split .w>span{display:inline-block;transform:translateY(110%) rotate(4deg);animation:saif-word-up 1.1s var(--ease-out) forwards;animation-delay:calc(var(--i) * 120ms + .25s)}
@keyframes saif-word-up{to{transform:none}}
.hero .signature{animation:saif-sign 1.8s var(--ease-soft) 1.1s both}
@keyframes saif-sign{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.hero .portrait img{animation:saif-portrait-in 1.6s var(--ease-out) .1s both;scale:calc(1 + var(--hp,0) * .12);filter:brightness(calc(1 - var(--hp,0) * .55))}
@keyframes saif-portrait-in{from{opacity:0;clip-path:inset(14% 14% 14% 14% round 28px)}to{opacity:1;clip-path:inset(0 0 0 0 round 0)}}
.hero-grid>.reveal:not(.portrait)>*{translate:0 calc(var(--hp,0) * -70px);opacity:calc(1 - var(--hp,0) * 1.15)}
.hero .eyebrow{animation:saif-fade-up .9s var(--ease-out) .05s both}
.hero .hero-copy{animation:saif-fade-up 1s var(--ease-out) .7s both}
.hero .actions{animation:saif-fade-up 1s var(--ease-out) .85s both}
@keyframes saif-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .btn-primary{position:relative;overflow:hidden;isolation:isolate}
.hero .btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:saif-shine 4s ease-in-out 2.2s infinite}
@keyframes saif-shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---------- Base commune ---------- */
.js-motion .sc{will-change:transform,opacity}

/* Titres : les mots montent et s'allument un par un + soulignement doré */
.scrub-title .sw{display:inline-block;--w:clamp(0,calc(var(--p,1) * (var(--n,4) + 1.5) - var(--i,0)),1);opacity:calc(.08 + .92 * var(--w));transform:translate3d(0,calc((1 - var(--w)) * .6em),0) rotate(calc((1 - var(--w)) * 6deg));transform-origin:0 100%}
.scrub-title{background:linear-gradient(var(--gold),var(--gold)) 0 100%/calc(var(--p,1) * 100%) 2px no-repeat;padding-bottom:.12em}

/* Lignes de texte */
.sc-line{opacity:calc(.1 + .9 * var(--p,1));transform:translate3d(0,calc((1 - var(--p,1)) * 26px),0)}

/* Bande marques */
.sc-band{opacity:calc(.35 + .65 * var(--f,1))}
.sc-band .clients-track span{color:rgba(255,255,255,calc(.3 + .45 * var(--f,1)))}
@media (max-width:700px){.clients-track{animation-duration:60s!important}}

/* Services : glissent de gauche/droite, la ligne au centre s'illumine */
.sc-row{transform:translate3d(calc((1 - var(--p,1)) * 110px * var(--side,-1)),0,0) scale(calc(.9 + .1 * var(--f,1)));opacity:calc(.15 + .85 * var(--f,1))}
.sc-row{transition:border-color .45s,box-shadow .45s}
.sc-row.is-focus{border-color:rgba(var(--gold-rgb),.75)!important;box-shadow:0 22px 48px -26px rgba(var(--gold-rgb),.65)}
.sc-row.is-focus b,.sc-row.is-focus h3{color:var(--gold)}
.sc-row.is-focus i{color:var(--gold);transform:translateX(6px)}
.service b,.service i,.sc-row h3{transition:color .35s,transform .35s var(--ease-out)}

/* Chiffres : zoom + compteur lié au scroll */
.sc-stat{transform:scale(calc(.75 + .25 * var(--f,1)));opacity:calc(.2 + .8 * var(--f,1))}
.sc-stat b{transition:text-shadow .5s}
.sc-stat.is-focus b{text-shadow:0 0 30px rgba(var(--gold-rgb),.7)}

/* Cartes projets : se redressent en 3D, se colorent au centre, s'inclinent selon la vitesse */
.sc-card{transform-origin:50% 100%;transform:perspective(1000px) translate3d(0,calc((1 - var(--p,1)) * 150px),0) rotateX(calc((1 - var(--p,1)) * 32deg)) scale(calc(.82 + .18 * var(--f,1))) skewY(calc(var(--vel,0) * -1.4deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));opacity:calc(.15 + .85 * var(--f,1))}
.sc-card{transition:border-color .5s,box-shadow .5s}
.sc-card.is-focus{border-color:rgba(var(--gold-rgb),.7)!important;box-shadow:0 40px 80px -36px rgba(var(--gold-rgb),.6)}
.sc-card .project-cover{overflow:hidden;position:relative}
.sc-card .project-cover img{transform:scale(calc(1.4 - .4 * var(--f,1)));filter:grayscale(calc(1 - var(--f,1))) brightness(calc(.5 + .5 * var(--f,1)))}
.sc-card .project-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(var(--gold-rgb),.3),transparent 60%);opacity:calc(var(--f,1) * .85)}
.sc-card h3{transition:color .35s,transform .45s var(--ease-out)}
.sc-card.is-focus h3{color:var(--gold);transform:translateX(8px)}

/* Blocs */
.sc-block{opacity:calc(.15 + .85 * var(--p,1));transform:scale(calc(.9 + .1 * var(--p,1)))}

/* Images d'études de cas : ouverture en rideau + couleur au centre */
.sc-media{overflow:hidden;clip-path:inset(calc((1 - var(--p,1)) * 24%) calc((1 - var(--p,1)) * 12%) round 18px);transform:skewY(calc(var(--vel,0) * -1deg))}
.sc-media img{transform:scale(calc(1.35 - .35 * var(--p,1)));filter:grayscale(calc(1 - var(--f,1)))}

/* Filtres : pastilles entières, défilement horizontal fluide sur mobile */
.project-filter{flex:0 0 auto;white-space:nowrap}
@media (max-width:700px){
  .project-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:-24px;padding:4px 24px 8px 0;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .project-filters::-webkit-scrollbar{display:none}
  .project-filter{scroll-snap-align:start;padding:10px 16px;font-size:.72rem}
}


/* ---------- Retour tactile ---------- */
.btn,.project-filter,.case-nav a,.menu-mark{position:relative;overflow:hidden}
.btn:active,.project-filter:active{transform:scale(.96)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(var(--gold-rgb),.45),rgba(var(--gold-rgb),0) 70%);transform:scale(0);animation:saif-ripple .7s var(--ease-out) forwards;z-index:0}
@keyframes saif-ripple{to{transform:scale(1);opacity:0}}
.project-filter.is-active{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12)}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:9990;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#0b0b0b;background:linear-gradient(145deg,#f3dca8,var(--gold) 45%,#a8834a);box-shadow:0 14px 30px -10px rgba(var(--gold-rgb),.7);transform:translateY(120px) scale(.6);opacity:0;transition:transform .6s var(--ease-out),opacity .4s}
.wa-fab svg{width:28px;height:28px;position:relative;z-index:1}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:saif-pulse 2.2s ease-out infinite}
.wa-fab.is-visible{transform:none;opacity:1}
@keyframes saif-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
body.menu-open .wa-fab{opacity:0;pointer-events:none}

/* ---------- Menu mobile en cascade ---------- */
.site-menu a{transition:transform .5s var(--ease-out),opacity .5s,color .3s}
.site-menu:not(.is-open) a{transform:translateY(24px);opacity:0}
.site-menu.is-open a{transform:none;opacity:1}
.site-menu.is-open a:nth-child(3){transition-delay:.05s}.site-menu.is-open a:nth-child(4){transition-delay:.1s}.site-menu.is-open a:nth-child(5){transition-delay:.15s}.site-menu.is-open a:nth-child(6){transition-delay:.2s}.site-menu.is-open a:nth-child(7){transition-delay:.25s}

/* ---------- Mouvement réduit : on garde la mise en valeur (lumière), sans déplacement ---------- */
.is-reduced .sc,.is-reduced .scrub-title .sw,.is-reduced .sc-card .project-cover img,.is-reduced .sc-media img{transform:none!important}
.is-reduced .sc-media{clip-path:none}