/* ═══════════════════════════════════════════════════════════ RESET ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none} a{text-decoration:none;color:inherit} ul{list-style:none} /* ═══════════════════════════════════════════════════════════ TOKENS — Raise Avocats (style C&C premium) ═══════════════════════════════════════════════════════════ */ :root{ --cream:#F7F5F3; --cream-2:#EDE9E3; --cream-3:#E2DDD7; --blue:#BFCDF0; --blue-dark:#8BA3D9; --navy:#202A3E; --navy-2:#2C3A54; --navy-3:#131B2A; --accent:#8BA3D9; --accent-2:#BFCDF0; --teal:#5B8A8F; --rose:#B08E86; --t2:#6B7B95; --t3:#8A97AB; --ep:'Epilogue',sans-serif; --mu:'Mulish',sans-serif; --pf:'Playfair Display',serif; --ease:cubic-bezier(.16,1,.3,1); /* Fondu des bandeaux 02 et 03 : plus long et surtout plus DOUX que --ease. --ease est une sortie très marquée (l'essentiel du changement se joue dans les cent premières millisecondes) : sur une opacité, cela se lit comme une coupure. ease-in-out étale le changement — c'est la courbe des photos du site, à laquelle ces fondus se raccordent maintenant. */ --fondu:.6s; --fondu-e:ease-in-out; /* Retard de la description des valeurs sur son titre — elle part après lui mais arrive EN MÊME TEMPS (sa durée est --fondu moins ce retard). */ --vd-retard:.26s; /* Révélation à l'entrée dans l'écran — UNE seule grammaire pour toute la page : même durée, même courbe, même distance, même pas de cascade. Tout élément [data-r] s'y conforme ; les exceptions sont documentées. */ /* Chapô — le paragraphe qui suit un titre de section. Une seule taille pour tout le site : /clients, /savoir-faire et /ressources s'en écartaient (14→16 px contre 15→18 px), le texte y paraissait plus petit qu'ailleurs. */ --chapo-taille:clamp(15px,1.3vw,18px); --chapo-interligne:1.75; --rv-dur:.85s; --rv-e:cubic-bezier(.22,.61,.36,1); --rv-y:26px; --pad:clamp(24px,6vw,100px); } /* ═══════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════ */ body{ background:var(--cream);color:var(--navy); font-family:var(--mu);font-weight:400;font-size:16px;line-height:1.7; /* lissage en niveaux de gris : évite les franges bleutées du rendu sous-pixel sur le texte clair posé sur fond navy (pages sombres) */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip; /* clip (et NON hidden) : empêche le scroll horizontal sans faire du body un conteneur de scroll — sinon overflow-y devient auto et le scroll-snap posé sur ne s'applique plus (crantage cassé). */ } body.locked{overflow:hidden} /* ═══════════════════════════════════════════════════════════ CUSTOM CURSOR ═══════════════════════════════════════════════════════════ */ .cursor,.cursor-dot{display:none!important} /* ═══════════════════════════════════════════════════════════ MENU OVERLAY — fullscreen with clip-path ═══════════════════════════════════════════════════════════ */ .menu{ position:fixed;inset:0;z-index:490; background:var(--navy-3); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); display:flex;overflow:hidden; } .menu.open{clip-path:inset(0 0 0% 0)} .menu-inner{ display:flex;width:100%; padding:clamp(100px,12vw,140px) var(--pad) 60px; gap:60px; } .menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:60%} .menu-item{border-top:1px solid rgba(247,245,243,.05);overflow:hidden} .menu-item:last-child{border-bottom:1px solid rgba(247,245,243,.05)} .menu-link{ display:flex;align-items:baseline;gap:16px; padding:clamp(10px,1.5vw,17px) 0; transform:translateY(110%); transition:transform .6s var(--ease); } .menu.open .menu-item:nth-child(1) .menu-link{transition-delay:.06s} .menu.open .menu-item:nth-child(2) .menu-link{transition-delay:.1s} .menu.open .menu-item:nth-child(3) .menu-link{transition-delay:.14s} .menu.open .menu-item:nth-child(4) .menu-link{transition-delay:.18s} .menu.open .menu-item:nth-child(5) .menu-link{transition-delay:.22s} .menu.open .menu-item:nth-child(6) .menu-link{transition-delay:.26s} .menu.open .menu-item:nth-child(7) .menu-link{transition-delay:.30s} .menu.open .menu-link{transform:translateY(0)} .menu-idx{ font-family:var(--mu);font-size:10px;font-weight:600; letter-spacing:.1em;color:var(--accent);min-width:24px; } .menu-txt{ font-family:var(--ep);font-size:clamp(34px,4.2vw,52px); font-weight:300;color:var(--cream);line-height:1; transition:color .2s,letter-spacing .3s var(--ease); } .menu-link:hover .menu-txt{color:var(--accent);letter-spacing:.01em} .menu-aside{ width:240px;display:flex;flex-direction:column;align-items:flex-end; justify-content:flex-end;align-self:flex-end;text-align:right; margin-left:auto; opacity:0;transform:translateX(12px); transition:opacity .5s,transform .5s var(--ease);transition-delay:.35s; } .menu.open .menu-aside{opacity:1;transform:none} .menu-aside-h{ font-family:var(--mu);font-size:10px;font-weight:700; letter-spacing:.16em;text-transform:uppercase; color:rgba(247,245,243,.3);margin-bottom:16px; } .menu-aside-li{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:8px; background:rgba(247,245,243,.08);color:rgba(247,245,243,.45); transition:all .3s;margin-bottom:32px; } .menu-aside-li:hover{background:var(--accent);color:var(--navy)} .menu-aside-links{ display:flex;flex-direction:column;gap:10px; margin-bottom:28px; } .menu-aside-links a{ font-family:var(--mu);font-size:13px;font-weight:400; color:rgba(247,245,243,.4);transition:color .2s; } .menu-aside-links a:hover{color:var(--accent)} .menu-aside-copy{ font-family:var(--mu);font-size:11px;font-weight:400; color:rgba(247,245,243,.15);letter-spacing:.02em; padding-top:20px; } .menu-close{ position:absolute;top:clamp(20px,3vw,32px);right:var(--pad); background:none;border:none;display:flex;align-items:center;gap:10px; padding:8px 0;z-index:10; } .menu-close-txt{ font-family:var(--mu);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:rgba(247,245,243,.3);transition:color .2s; } .menu-close:hover .menu-close-txt{color:var(--accent)} .menu-close-x{width:20px;height:20px;position:relative} .menu-close-x::before,.menu-close-x::after{ content:'';position:absolute;top:50%;left:0;right:0; height:1px;background:rgba(247,245,243,.3);transition:background .2s; } .menu-close-x::before{transform:rotate(45deg)} .menu-close-x::after{transform:rotate(-45deg)} .menu-close:hover .menu-close-x::before,.menu-close:hover .menu-close-x::after{background:var(--accent)} /* ═══════════════════════════════════════════════════════════ SCROLL PROGRESS ═══════════════════════════════════════════════════════════ */ #spb{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:1001;width:0;pointer-events:none} /* ═══════════════════════════════════════════════════════════ NAV — horizontal, floating over hero (like C&C) ═══════════════════════════════════════════════════════════ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:500; display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad); height:clamp(70px,10vw,100px); transition:background .5s,box-shadow .5s,height .4s,padding .5s; } .nav.scrolled{ background:transparent; backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none; height:68px; padding:0 clamp(6px,.8vw,12px); } .nav-logo{display:flex;align-items:center;gap:0;transition:opacity .4s} .nav-logo img{width:auto} /* Full logo — default state */ .nav-logo-w{display:block;height:clamp(62px,9.6vw,115px)} .nav-logo-d{display:none;height:clamp(62px,9.6vw,115px)} /* Symbol logos — wrapper keeps them stacked, opacity crossfade between white/dark */ .nav-symbol-wrap{display:none;position:relative;width:clamp(30px,4.7vw,56px);height:clamp(30px,4.7vw,56px)} .nav-logo-sw,.nav-logo-sd{position:absolute;left:0;top:0;height:100%;width:auto;transition:opacity 2.5s ease} .nav-logo-sw{opacity:1} .nav-logo-sd{opacity:0} /* Scrolled: instant switch to symbol wrapper */ .nav.scrolled .nav-logo-w{display:none} .nav.scrolled .nav-logo-d{display:none} .nav.scrolled .nav-symbol-wrap{display:block} /* Dynamic color — crossfade between white and dark symbols */ .nav.scrolled.nav-light .nav-logo-sw{opacity:0} .nav.scrolled.nav-light .nav-logo-sd{opacity:1} .nav.scrolled.nav-light .nav-burger span{background:var(--navy)} .nav.scrolled.nav-dark .nav-logo-sw{opacity:1} .nav.scrolled.nav-dark .nav-logo-sd{opacity:0} .nav.scrolled.nav-dark .nav-burger span{background:rgba(247,245,243,.7)} /* au scroll, la nav se réduit (symbole + burger) : on masque le sélecteur FR/EN pour ne pas laisser le séparateur « | » seul */ .nav.scrolled .nav-lang-sw{display:none} .nav-link{ font-family:var(--mu);font-size:14px;font-weight:500; letter-spacing:.03em;color:rgba(247,245,243,.75); transition:color .3s; } .nav.scrolled .nav-link{color:var(--navy)} .nav-link:hover{color:var(--accent)} .nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,28px);transition:padding .5s} .nav-contact{ font-family:var(--mu);font-size:13px;font-weight:600; letter-spacing:.08em;text-transform:uppercase; color:var(--cream); padding:10px 24px;border:1px solid rgba(247,245,243,.25); border-radius:100px;transition:all .3s; /* Masqué sur le reste du site (barre trop chargée) : n'apparaît QUE lorsque le menu plein écran est ouvert (body.locked). Cf. règle ci-dessous. */ display:none; } body.locked .nav-contact{display:inline-block;animation:navContactIn .4s var(--ease) both} @keyframes navContactIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .nav-contact:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)} .nav-lang{position:relative;font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(247,245,243,.95);padding-bottom:3px;transition:color .45s ease,opacity .5s}.nav-lang::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;border-radius:2px;transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1),background .4s}.nav-lang-sw{display:inline-flex;align-items:center;gap:11px}.nav-lang-sep{width:1px;height:11px;background:rgba(247,245,243,.32)} .nav-lang-inactive{color:rgba(247,245,243,.34);font-weight:500} /* Langue sans page équivalente (ex. /veille, articles) : affichée mais éteinte, sans soulignement ni survol — mieux qu'un lien qui mène à un 404. */ .nav-lang-absent{color:rgba(247,245,243,.18);font-weight:500;cursor:default} .nav-lang-absent::after{display:none}.nav-lang-inactive::after{transform:scaleX(0);transform-origin:right}.nav-lang-inactive:hover{color:rgba(247,245,243,.82)}.nav-lang-inactive:hover::after{transform:scaleX(1);background:var(--accent)} .nav.scrolled .nav-lang{opacity:0!important;pointer-events:none} /* Hamburger — always visible */ .nav-burger{width:46px;height:46px;position:relative;background:none;border:none;cursor:pointer;z-index:500;padding:0;display:flex;align-items:center;justify-content:center} .nav-burger span{position:absolute;left:10px;height:1.5px;width:26px;background:rgba(247,245,243,.7);transition:background 2.5s ease,width .3s var(--ease),transform .35s var(--ease),opacity .2s;transform-origin:center center} .nav-burger span:nth-child(1){top:15px} .nav-burger span:nth-child(2){top:22px;width:18px} .nav-burger span:nth-child(3){top:29px} .nav-burger:hover span:nth-child(2){width:26px} .nav-burger.is-open span:nth-child(1){top:22px;transform:rotate(45deg);width:26px} .nav-burger.is-open span:nth-child(2){opacity:0;width:0} .nav-burger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg);width:26px} /* ═══════════════════════════════════════════════════════════ SIDEBAR — fixed icons like C&C (FR, LinkedIn, mail, tel) ═══════════════════════════════════════════════════════════ */ .sidebar{ position:fixed;right:clamp(12px,1.5vw,20px);top:50%;transform:translateY(-50%); z-index:400;display:flex;flex-direction:column;gap:10px; transition:opacity .4s,visibility .4s; } .sidebar.hidden{opacity:0;visibility:hidden;pointer-events:none} .sidebar-icon{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(247,245,243,.08);backdrop-filter:blur(8px); color:rgba(247,245,243,.45);font-size:13px;font-weight:600; letter-spacing:.04em;transition:all .4s; border:1px solid rgba(247,245,243,.08); } .sidebar-icon:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)} .sidebar-icon svg{width:16px;height:16px;fill:currentColor} body.sidebar-light .sidebar-icon{ background:rgba(32,42,62,.05);color:var(--t3); border-color:rgba(32,42,62,.08); } body.sidebar-light .sidebar-icon:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)} /* ═══════════════════════════════════════════════════════════ HERO — Full viewport, navy bg, text left, decorative shapes right ═══════════════════════════════════════════════════════════ */ .hero{ position:relative;width:100%;min-height:100vh; background:var(--navy-3);overflow:hidden; display:flex;align-items:center; padding:0 var(--pad); } .hero-content{ position:relative;z-index:2; max-width:650px;padding:70px 0 80px; } .hero-h1{ font-family:var(--ep);font-size:clamp(36px,5.5vw,56px); font-weight:300;line-height:1.15; color:var(--cream);margin-bottom:32px; } /* Titre uniforme : TOUT en Epilogue (même police + graisse que le reste du titre), seule la couleur bleue distingue les mots-clés. */ .hero-h1 em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)} .hero-sub{ font-family:var(--mu);font-size:clamp(15px,1.4vw,17px);font-weight:300; color:rgba(247,245,243,.45);line-height:1.8; max-width:480px;margin-bottom:44px; } .hero-cta{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mu);font-size:14px;font-weight:500; letter-spacing:.02em;color:var(--cream); transition:color .3s; } .hero-cta:hover{color:var(--accent)} .hero-cta-circle{ width:48px;height:40px;border-radius:50%; background:var(--accent); display:flex;align-items:center;justify-content:center; transition:transform .4s var(--ease),background .3s; } .hero-cta:hover .hero-cta-circle{transform:scale(1.1)} .hero-cta-circle svg{width:16px;height:16px;stroke:var(--navy);stroke-width:2;fill:none} /* Decorative — SVG Parisian skyline, abstract & premium */ .hero-shapes{ position:absolute;right:0;bottom:0; width:clamp(500px,60vw,1000px);height:100%; z-index:1;pointer-events:none; } .hero-skyline{ position:absolute;bottom:0;right:0;width:100%;height:auto; } /* ── CONSTRUCTION ANIMATION (multi-phase) ── */ /* Phase 1 — Cranes rise from the ground */ .hero-skyline .crane{ opacity:0; transform-box:fill-box; transform-origin:center bottom; animation:craneLife 7s ease forwards; } .hero-skyline .crane-1{animation-delay:.1s} .hero-skyline .crane-2{animation-delay:.3s} .hero-skyline .crane-3{animation-delay:.2s} @keyframes craneLife{ 0%{opacity:0;transform:scaleY(0)} 10%{opacity:.7;transform:scaleY(1)} 60%{opacity:.7;transform:scaleY(1)} 80%{opacity:0;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(0)} } /* Phase 2 — Scaffolding appears during construction */ .hero-skyline .scaffold{ opacity:0; animation:scaffoldLife 6s ease forwards; } .hero-skyline .scaffold-3{animation-delay:.6s} .hero-skyline .scaffold-4{animation-delay:.5s} .hero-skyline .scaffold-5{animation-delay:.4s} @keyframes scaffoldLife{ 0%{opacity:0} 8%{opacity:1} 55%{opacity:1} 75%{opacity:0} 100%{opacity:0} } /* Phase 3 — Buildings construct slowly from ground */ .hero-skyline .bldg-g{ transform:translateY(100%); animation:buildUp 3.2s cubic-bezier(.4,.05,.25,1) forwards; } .hero-skyline .bldg-1{animation-delay:.7s} .hero-skyline .bldg-2{animation-delay:.9s} .hero-skyline .bldg-3{animation-delay:1.2s} .hero-skyline .bldg-4{animation-delay:1s} .hero-skyline .bldg-5{animation-delay:.8s} .hero-skyline .bldg-6{animation-delay:1.4s} .hero-skyline .bldg-7{animation-delay:1.1s} .hero-skyline .bldg-8{animation-delay:1.5s} @keyframes buildUp{ 0%{transform:translateY(100%);opacity:.2} 10%{opacity:.4} 50%{opacity:.7} 100%{transform:translateY(0);opacity:1} } /* Ground line — appears when construction complete */ .hero-skyline .bldg-ground{opacity:0;animation:groundIn .6s ease forwards 4.8s} @keyframes groundIn{to{opacity:1}} /* Phase 4 — Windows light up after buildings are finished */ .hero-skyline .bldg-g rect[rx]{opacity:0;animation:winOn .6s ease forwards} .hero-skyline .bldg-1 rect[rx]{animation-delay:3.5s} .hero-skyline .bldg-2 rect[rx]{animation-delay:3.7s} .hero-skyline .bldg-3 rect[rx]{animation-delay:4.2s} .hero-skyline .bldg-4 rect[rx]{animation-delay:3.9s} .hero-skyline .bldg-5 rect[rx]{animation-delay:3.6s} .hero-skyline .bldg-6 rect[rx]{animation-delay:4.4s} .hero-skyline .bldg-7 rect[rx]{animation-delay:4.1s} .hero-skyline .bldg-8 rect[rx]{animation-delay:4.5s} @keyframes winOn{to{opacity:1}} /* Phase 5 — Roof details appear last (chimneys, antennas) */ .hero-skyline .bldg-g .roof-detail{opacity:0;animation:roofIn .8s ease forwards} .hero-skyline .bldg-1 .roof-detail{animation-delay:3.8s} .hero-skyline .bldg-2 .roof-detail{animation-delay:4s} .hero-skyline .bldg-3 .roof-detail{animation-delay:4.5s} .hero-skyline .bldg-4 .roof-detail{animation-delay:4.2s} .hero-skyline .bldg-5 .roof-detail{animation-delay:3.9s} .hero-skyline .bldg-7 .roof-detail{animation-delay:4.3s} .hero-skyline .bldg-8 .roof-detail{animation-delay:4.6s} .hero-skyline .bldg-6 .roof-detail{animation-delay:4.7s} @keyframes roofIn{to{opacity:1}} /* Antenna beacon blink on tallest tower */ .antenna-blink{ animation:roofIn .8s ease forwards 3.9s, beaconBlink 2s ease-in-out infinite 5.5s!important; } .antenna-glow{ animation:roofIn .8s ease forwards 3.9s, beaconGlow 2s ease-in-out infinite 5.5s!important; } @keyframes beaconBlink{ 0%,100%{fill:rgba(139,163,217,.15);r:2.5} 50%{fill:rgba(139,163,217,.9);r:4} } @keyframes beaconGlow{ 0%,100%{fill:rgba(139,163,217,0);r:8} 50%{fill:rgba(139,163,217,.15);r:16} } /* Shooting star */ .shooting-star{ position:absolute;top:12%;right:30%;width:80px;height:1px; background:linear-gradient(to right,transparent,var(--accent),transparent); opacity:0;transform:rotate(-25deg); animation:shootStar 5s ease-in-out infinite 2s; } .shooting-star::after{ content:'';position:absolute;right:0;top:-1px; width:3px;height:3px;border-radius:50%; background:var(--accent);box-shadow:0 0 6px var(--accent),0 0 12px rgba(139,163,217,.4); } @keyframes shootStar{ 0%{opacity:0;transform:rotate(-25deg) translateX(0)} 2%{opacity:.9} 8%{opacity:0;transform:rotate(-25deg) translateX(-300px)} 100%{opacity:0} } .shooting-star-2{ position:absolute;top:22%;right:18%;width:50px;height:1px; background:linear-gradient(to right,transparent,var(--blue),transparent); opacity:0;transform:rotate(-30deg); animation:shootStar2 8s ease-in-out infinite 5s; } .shooting-star-2::after{ content:'';position:absolute;right:0;top:-1px; width:2px;height:2px;border-radius:50%; background:var(--blue);box-shadow:0 0 4px var(--blue); } @keyframes shootStar2{ 0%{opacity:0;transform:rotate(-30deg) translateX(0)} 2%{opacity:.6} 6%{opacity:0;transform:rotate(-30deg) translateX(-200px)} 100%{opacity:0} } /* Subtle ground glow */ .hero-glow{ position:absolute;bottom:-40px;right:15%; width:clamp(300px,40vw,600px);height:120px; background:radial-gradient(ellipse,rgba(139,163,217,.06) 0%,transparent 70%); pointer-events:none; } /* ── CONSTELLATION — golden network drawing in the sky ── */ .hero-constellation{ position:absolute;top:10%;left:25%;width:50%;height:45%; z-index:0;pointer-events:none;overflow:hidden; } .hero-constellation svg{width:100%;height:100%} /* Constellation lines draw themselves */ .hero-constellation .cline{ stroke:rgba(139,163,217,.12);stroke-width:.8;fill:none; stroke-dasharray:200;stroke-dashoffset:200; animation:drawLine 3s ease forwards; } .hero-constellation .cline-1{animation-delay:1.5s} .hero-constellation .cline-2{animation-delay:2s} .hero-constellation .cline-3{animation-delay:2.4s} .hero-constellation .cline-4{animation-delay:2.8s} .hero-constellation .cline-5{animation-delay:3.2s} .hero-constellation .cline-6{animation-delay:3.5s} .hero-constellation .cline-7{animation-delay:3.8s} .hero-constellation .cline-8{animation-delay:4.1s} .hero-constellation .cline-9{animation-delay:4.4s} @keyframes drawLine{ to{stroke-dashoffset:0} } /* Constellation nodes — appear then pulse */ .hero-constellation .cnode{ fill:rgba(139,163,217,.5);opacity:0; animation:nodeIn .5s ease forwards, nodePulse 4s ease-in-out infinite; } .hero-constellation .cnode-1{animation-delay:1.5s,5s} .hero-constellation .cnode-2{animation-delay:1.8s,5.3s} .hero-constellation .cnode-3{animation-delay:2.1s,5.6s} .hero-constellation .cnode-4{animation-delay:2.4s,5.1s} .hero-constellation .cnode-5{animation-delay:2.7s,5.4s} .hero-constellation .cnode-6{animation-delay:3s,5.7s} .hero-constellation .cnode-7{animation-delay:3.3s,5.2s} .hero-constellation .cnode-8{animation-delay:3.6s,5.5s} .hero-constellation .cnode-9{animation-delay:3.9s,5.8s} .hero-constellation .cnode-10{animation-delay:4.2s,5.9s} @keyframes nodeIn{ to{opacity:1} } @keyframes nodePulse{ 0%,100%{r:2;opacity:.4} 50%{r:3.5;opacity:.8} } /* Large accent node — hub */ .hero-constellation .cnode-hub{ fill:rgba(139,163,217,.7);opacity:0; animation:nodeIn .8s ease forwards 2s, nodePulseHub 5s ease-in-out infinite 5s; } @keyframes nodePulseHub{ 0%,100%{r:3.5;opacity:.5;filter:drop-shadow(0 0 3px rgba(139,163,217,.3))} 50%{r:5;opacity:.9;filter:drop-shadow(0 0 8px rgba(139,163,217,.5))} } /* Hero text stagger animation */ .hero-h1 .line{ display:block;overflow:hidden; } .hero-h1 .line-inner{ display:block; transform:translateY(110%); /* caché par défaut ; animé seulement quand l'intro s'ouvre (.intro-done) */ } /* L'animation d'entrée du hero ne démarre QU'À l'ouverture de l'intro (ou direct si déjà vue), sinon elle se jouait sous le masque de l'intro et n'était jamais visible. */ .hero-go .hero-h1 .line-inner{animation:lineUp .9s var(--ease) forwards} .hero-go .hero-h1 .line:nth-child(2) .line-inner{animation-delay:.12s} .hero-go .hero-h1 .line:nth-child(3) .line-inner{animation-delay:.24s} @keyframes lineUp{to{transform:translateY(0)}} .hero-tags,.hero-cta{opacity:0;transform:translateY(16px)} .hero-go .hero-tags{animation:fadeUp .8s ease forwards .5s} .hero-go .hero-cta{animation:fadeUp .8s ease forwards .7s} @keyframes fadeUp{to{opacity:1;transform:translateY(0)}} /* Hero tags — Structuration / Conseil / Fiscalité */ .hero-tags{ display:flex;gap:clamp(10px,1.5vw,18px);margin-top:0;margin-bottom:44px;flex-wrap:wrap; } .hero-tag{ font-family:var(--mu);font-size:12px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:rgba(247,245,243,.85); padding:10px 20px; border:1px solid rgba(247,245,243,.2);border-radius:100px; background:rgba(247,245,243,.05); transition:border-color .3s,color .3s,background .3s; } .hero-tag:hover{border-color:var(--accent);color:var(--accent)} .hero-scroll{ position:absolute;left:50%;transform:translateX(-50%);bottom:32px;z-index:3; display:flex;flex-direction:column;align-items:center; font-family:var(--mu);font-size:12px;font-weight:500; letter-spacing:.1em;color:rgba(247,245,243,.55); writing-mode:vertical-rl;cursor:pointer; transition:color .3s; } .hero-scroll:hover{color:var(--accent)} .hero-scroll::after{ content:'';display:block;width:1px;height:40px; background:linear-gradient(to bottom,transparent,var(--accent)); margin-top:12px;margin-left:auto;margin-right:auto; animation:scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}} /* Accès à l'espace avocats — bouton de la barre de nav, à gauche de FR|EN. Même règle que .nav-contact : masqué sur le site (barre trop chargée), il n'apparaît QUE menu ouvert (body.locked). Réservé à l'équipe du cabinet. */ .nav-espace{ display:none;align-items:center;gap:9px; font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:rgba(247,245,243,.7);text-decoration:none; padding:10px 20px;border:1px solid rgba(247,245,243,.2); border-radius:100px;transition:color .3s,border-color .3s,background .3s; } .nav-espace svg{width:13px;height:13px;flex:none} body.locked .nav-espace{display:inline-flex;animation:navContactIn .4s var(--ease) both} .nav-espace:hover{color:var(--accent);border-color:var(--accent);background:rgba(191,205,240,.06)} @media(max-width:620px){.nav-espace{padding:9px 15px;font-size:10px;letter-spacing:.08em}} /* ═══════════════════════════════════════════════════════════ ABOUT — still on navy bg, with description + "Découvrir" link ═══════════════════════════════════════════════════════════ */ .about{ background:var(--navy-3); padding:clamp(80px,10vw,140px) var(--pad) clamp(80px,10vw,140px); display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px); align-items:start; } .about-left{} .about-desc{ font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300; color:rgba(247,245,243,.55);line-height:1.85; margin-bottom:32px; } .about-link{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mu);font-size:14px;font-weight:500; color:var(--cream);transition:color .3s; } .about-link:hover{color:var(--accent)} .about-link-circle{ width:40px;height:40px;border-radius:50%; background:rgba(139,163,217,.15); display:flex;align-items:center;justify-content:center; transition:background .3s; } .about-link:hover .about-link-circle{background:var(--accent)} .about-link-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none} .about-link:hover .about-link-circle svg{stroke:var(--navy)} .about-right{padding-top:8px} .about-mini-shape{ width:120px;height:120px;margin-bottom:32px;position:relative; } .about-mini-shape .ms1{width:100%;height:100%;border-radius:50%;background:var(--navy-2);position:absolute} .about-mini-shape .ms2{width:60%;height:60%;border-radius:50%;background:var(--blue);opacity:.2;position:absolute;top:20%;left:20%} .about-mini-shape .ms3{width:40%;height:40%;border-radius:50%;background:var(--accent);opacity:.2;position:absolute;bottom:0;right:0} /* ═══════════════════════════════════════════════════════════ RANKINGS — horizontal carousel like C&C "companies" ═══════════════════════════════════════════════════════════ */ /* ═══ DISTINCTIONS & RÉFÉRENCES ═══ */ .distinctions{ background:var(--navy-3); padding:clamp(70px,9vw,110px) var(--pad); } .dist-header{margin-bottom:clamp(40px,6vw,64px);} .dist-eyebrow{ display:flex;align-items:center;gap:14px; font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:clamp(16px,2vw,24px); } .dist-eyebrow-line{display:block;width:28px;height:1px;background:var(--accent);flex-shrink:0;} .dist-title{ font-family:var(--ep);font-size:clamp(36px,5.5vw,68px); font-weight:300;line-height:1.05;color:var(--cream); } .dist-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400;} .dist-grid{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(247,245,243,.1); } .dist-card{ padding:clamp(28px,3vw,40px) clamp(20px,2.5vw,36px); border-right:1px solid rgba(247,245,243,.1); display:flex;flex-direction:column;gap:14px; transition:background .3s; } .dist-card:last-child{border-right:none;} .dist-card:hover{background:rgba(191,205,240,.05);} .dist-source{ font-family:var(--mu);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--accent); } .dist-card-title{ font-family:var(--ep);font-size:clamp(16px,1.6vw,20px); font-weight:300;color:var(--cream);line-height:1.35; } .dist-card-desc{ font-family:var(--mu);font-size:clamp(13px,1vw,14px); font-weight:300;color:rgba(247,245,243,.45);line-height:1.8;flex:1; } .dist-card-meta{ font-family:var(--mu);font-size:11px;color:rgba(247,245,243,.25); letter-spacing:.06em;padding-top:12px; border-top:1px solid rgba(247,245,243,.08);margin-top:4px; } @media(max-width:768px){ .dist-grid{grid-template-columns:1fr;} .dist-card{border-right:none;border-bottom:1px solid rgba(247,245,243,.1);} .dist-card:last-child{border-bottom:none;} } /* ═══════════════════════════════════════════════════════════ EXPERTISES — split layout like C&C, list with "/" separators ═══════════════════════════════════════════════════════════ */ .expertises{ background:var(--cream); padding:clamp(80px,12vw,160px) var(--pad); display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px); align-items:start; } .exp-left{} .exp-heading{ font-family:var(--ep);font-size:clamp(28px,4vw,44px); font-weight:300;line-height:1.2;color:var(--navy); margin-bottom:40px; } .exp-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .exp-mini-shapes{ width:160px;height:130px;position:relative;margin-bottom:24px; } .exp-mini-shapes .es1{width:100px;height:100px;border-radius:50%;background:var(--blue);opacity:.15;position:absolute;top:0;left:0} .exp-mini-shapes .es2{width:80px;height:80px;border-radius:50%;background:var(--accent);opacity:.15;position:absolute;bottom:0;right:20px} .exp-mini-shapes .es3{width:60px;height:60px;border-radius:50%;background:var(--navy);opacity:.1;position:absolute;top:10px;right:0} .exp-cta{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mu);font-size:14px;font-weight:500; color:var(--navy);transition:color .3s; } .exp-cta:hover{color:var(--accent)} .exp-cta .about-link-circle{background:rgba(139,163,217,.12)} .exp-cta:hover .about-link-circle{background:var(--accent)} .exp-cta .about-link-circle svg{stroke:var(--accent)} .exp-cta:hover .about-link-circle svg{stroke:var(--navy)} .exp-right{} /* ── Typologie clientèle — grille animée ── */ .typo-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px; } .typo-card{ position:relative;display:flex;flex-direction:column; padding:clamp(24px,2.5vw,36px); border:1px solid rgba(32,42,62,.08);border-radius:12px; background:var(--cream); text-decoration:none;color:var(--navy); transition:all .45s var(--ease); overflow:hidden; opacity:0;transform:translateY(28px); } .typo-card.is-visible{opacity:1;transform:none} .typo-card::before{ content:'';position:absolute;bottom:0;left:0;right:0;height:3px; background:linear-gradient(to right,var(--accent),var(--blue)); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease); } .typo-card:hover::before{transform:scaleX(1)} .typo-card:hover{ border-color:var(--accent); box-shadow:0 12px 40px rgba(32,42,62,.08); transform:translateY(-4px); } .typo-icon{ width:44px;height:44px;margin-bottom:20px; color:var(--accent);opacity:.7; transition:opacity .3s,transform .4s var(--ease); } .typo-card:hover .typo-icon{opacity:1;transform:scale(1.08)} .typo-icon svg{width:100%;height:100%} .typo-idx{ font-family:var(--mu);font-size:10px;font-weight:700; letter-spacing:.14em;color:var(--accent); margin-bottom:8px; } .typo-label{ font-family:var(--ep);font-size:clamp(16px,1.4vw,20px); font-weight:400;line-height:1.25;color:var(--navy); margin-bottom:8px; transition:color .3s; } .typo-card:hover .typo-label{color:var(--accent)} .typo-sub{ font-family:var(--mu);font-size:13px;font-weight:300; color:var(--t2);line-height:1.6;flex:1; } .typo-arrow{ position:absolute;top:clamp(20px,2vw,32px);right:clamp(20px,2vw,32px); width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(32,42,62,.08); transition:all .3s; } .typo-arrow svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none} .typo-card:hover .typo-arrow{ background:var(--accent);border-color:var(--accent); } .typo-card:hover .typo-arrow svg{stroke:var(--navy)} /* ═══════════════════════════════════════════════════════════ PARTNERS — split 50/50 (cream + navy) like C&C ═══════════════════════════════════════════════════════════ */ .partners{ display:grid;grid-template-columns:1fr 1fr; min-height:clamp(400px,50vw,600px); } .partners-left{ background:var(--cream-2); padding:clamp(60px,8vw,100px) var(--pad); display:flex;flex-direction:column;justify-content:center; position:relative;overflow:hidden; } .partners-stats{display:flex;gap:clamp(40px,6vw,80px);margin-bottom:40px} .stat{display:flex;align-items:baseline;gap:8px} .stat-bar{width:28px;height:2px;background:var(--accent);margin-bottom:4px} .stat-num{ font-family:var(--ep);font-size:clamp(48px,7vw,80px); font-weight:200;color:var(--navy);line-height:1; } .stat-label{ font-family:var(--mu);font-size:14px;font-weight:400; color:var(--t2);margin-top:4px; } .partners-text{ font-family:var(--ep);font-size:clamp(22px,3vw,32px); font-weight:300;line-height:1.35;color:var(--navy); margin-bottom:32px; } .partners-text em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .partners-link{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mu);font-size:14px;font-weight:500; color:var(--navy);transition:color .3s; } .partners-link:hover{color:var(--accent)} .partners-link .cta-circle{ width:40px;height:40px;border-radius:50%; background:rgba(139,163,217,.12);display:flex;align-items:center;justify-content:center; transition:background .3s; } .partners-link:hover .cta-circle{background:var(--accent)} .partners-link .cta-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none} .partners-link:hover .cta-circle svg{stroke:var(--navy)} /* Decorative mini shape bottom-center of partners-left */ .partners-left-shape{ position:absolute;bottom:-30px;left:50%;transform:translateX(-50%); width:100px;height:100px; } .partners-left-shape .ps1{width:80px;height:80px;border-radius:50%;background:var(--blue);opacity:.1;position:absolute;top:0;left:0} .partners-left-shape .ps2{width:60px;height:60px;border-radius:50%;background:var(--accent);opacity:.1;position:absolute;bottom:0;right:0} .partners-right{ background:var(--navy-3); padding:clamp(60px,8vw,100px) var(--pad); display:flex;flex-direction:column;justify-content:center; position:relative;overflow:hidden; } .partners-right-heading{ font-family:var(--ep);font-size:clamp(22px,3vw,32px); font-weight:300;line-height:1.35;color:var(--cream); margin-bottom:20px; } .partners-right-heading em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400} .partners-right-desc{ font-family:var(--mu);font-size:15px;font-weight:300; color:rgba(247,245,243,.45);line-height:1.8; margin-bottom:32px; } .partners-right-shape{ position:absolute;top:-20px;right:-20px; width:120px;height:120px; } .partners-right-shape .prs1{width:100%;height:100%;border-radius:50%;background:var(--navy-2);position:absolute} .partners-right-shape .prs2{width:50%;height:50%;border-radius:50%;background:var(--blue);opacity:.12;position:absolute;top:25%;left:25%} .partners-right-link{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mu);font-size:14px;font-weight:500; color:var(--cream);transition:color .3s; } .partners-right-link:hover{color:var(--accent)} .partners-right-link .cta-circle{ width:40px;height:40px;border-radius:50%; background:rgba(139,163,217,.15);display:flex;align-items:center;justify-content:center; transition:background .3s; } .partners-right-link:hover .cta-circle{background:var(--accent)} .partners-right-link .cta-circle svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2;fill:none} .partners-right-link:hover .cta-circle svg{stroke:var(--navy)} /* ═══════════════════════════════════════════════════════════ EQUIPE — team portraits section ═══════════════════════════════════════════════════════════ */ .equipe{ background:var(--cream); padding:clamp(80px,12vw,160px) var(--pad); } .equipe-header{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:clamp(40px,6vw,72px); } .equipe-heading{ font-family:var(--ep);font-size:clamp(28px,4vw,44px); font-weight:300;line-height:1.2;color:var(--navy); } .equipe-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .equipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px)} .equipe-card{position:relative;overflow:hidden} .equipe-img{ width:100%;aspect-ratio:3/4;object-fit:cover; filter:grayscale(.15);transition:filter .5s,transform .5s var(--ease); } .equipe-card:hover .equipe-img{filter:grayscale(0);transform:scale(1.03)} .equipe-info{padding:24px 0} .equipe-name{ font-family:var(--ep);font-size:clamp(20px,2.5vw,28px); font-weight:400;color:var(--navy);margin-bottom:4px; } .equipe-role{ font-family:var(--mu);font-size:14px;font-weight:400; color:var(--t2);letter-spacing:.02em;margin-bottom:8px; } .equipe-desc{font-size:14px;color:var(--t3);line-height:1.7} /* ═══════════════════════════════════════════════════════════ CLIENTS — horizontal tiles with drag ═══════════════════════════════════════════════════════════ */ .clients{ background:var(--cream-2); padding:clamp(60px,8vw,100px) 0; } /* ═══════════════════════════════════════════════════════════ PUBLICATIONS — article rows like C&C "feature-news" ═══════════════════════════════════════════════════════════ */ .publications{ background:var(--cream); padding:clamp(80px,12vw,160px) var(--pad); } .pub-header{ display:flex;justify-content:space-between;align-items:flex-start; margin-bottom:clamp(40px,6vw,72px); } .pub-heading{ font-family:var(--ep);font-size:clamp(28px,4vw,44px); font-weight:300;line-height:1.2;color:var(--navy); max-width:600px; } .pub-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} /* Article rows — horizontal like C&C */ .pub-list{} .pub-row{ display:grid;grid-template-columns:120px 140px 1fr auto; gap:clamp(16px,3vw,40px);align-items:start; padding:clamp(24px,3vw,36px) 0; border-top:1px solid rgba(32,42,62,.08); transition:background .3s; } .pub-row:last-child{border-bottom:1px solid rgba(32,42,62,.08)} .pub-row:hover{background:rgba(139,163,217,.03)} .pub-type{ font-family:var(--mu);font-size:13px;font-weight:500; color:var(--accent);letter-spacing:.02em;padding-top:4px; } .pub-date{ font-family:var(--mu);font-size:14px;font-weight:400; color:var(--teal);letter-spacing:.02em;padding-top:4px; } .pub-title{ font-family:var(--ep);font-size:clamp(16px,1.6vw,20px); font-weight:400;color:var(--navy);line-height:1.45; } .pub-arrow{ font-family:var(--mu);font-size:13px;font-weight:500; color:var(--accent);display:flex;align-items:center;gap:8px; padding-top:4px;white-space:nowrap;transition:color .3s; } .pub-row:hover .pub-arrow{color:var(--navy)} /* Outils section */ .outils{ margin-top:clamp(60px,8vw,100px); padding-top:clamp(40px,6vw,60px); border-top:1px solid rgba(32,42,62,.06); } .outils-heading{ font-family:var(--ep);font-size:clamp(20px,2.5vw,28px); font-weight:300;color:var(--navy);margin-bottom:32px; } .outils-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .outils-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .outil{ padding:28px;border:1px solid rgba(32,42,62,.06);border-radius:12px; transition:border-color .3s,box-shadow .3s; } .outil:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(139,163,217,.08)} .outil-ico{font-size:24px;margin-bottom:16px} .outil-t{font-family:var(--ep);font-size:15px;font-weight:400;color:var(--navy);margin-bottom:8px} .outil-b{font-size:13px;color:var(--t3);line-height:1.6;margin-bottom:16px} .outil-l{font-size:13px;font-weight:600;color:var(--accent);transition:color .3s} .outil-l:hover{color:var(--navy)} /* ═══════════════════════════════════════════════════════════ INSIGHTS — 3 dernières publications ═══════════════════════════════════════════════════════════ */ .insights{ background:var(--cream); padding:clamp(70px,9vw,110px) var(--pad); } .insights-header{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:clamp(32px,4vw,48px); padding-bottom:clamp(24px,3vw,36px); border-bottom:1px solid rgba(32,42,62,.08); } .insights-eyebrow{ display:flex;align-items:center;gap:14px; font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:clamp(14px,2vw,20px); } .insights-eyebrow-line{display:block;width:28px;height:1px;background:var(--accent);flex-shrink:0;} .insights-title{ font-family:var(--ep);font-size:clamp(28px,3.5vw,44px); font-weight:300;line-height:1.1;color:var(--navy); } .insights-title em{font-family:var(--ep);font-style:normal;color:var(--blue-dark);font-weight:400} .insights-all{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mu);font-size:12px;font-weight:500; color:var(--t3);text-decoration:none;letter-spacing:.08em;text-transform:uppercase; transition:color .3s;white-space:nowrap;padding-bottom:4px; } .insights-all:hover{color:var(--accent)} .insights-all svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;transition:transform .3s} .insights-all:hover svg{transform:translate(3px,-3px)} /* Grille 3 cartes */ .ins-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); } /* Card base — identique pub-card */ .pub-card{ position:relative; border:1px solid var(--cream-3);border-radius:14px; padding:clamp(28px,3vw,40px); display:flex;flex-direction:column; background:transparent; transition:border-color .35s,box-shadow .4s var(--ease),transform .4s var(--ease); cursor:pointer;overflow:hidden; } .pub-card:hover{ border-color:var(--accent); box-shadow:0 8px 32px rgba(139,163,217,.08); transform:translateY(-3px); } .pub-card-cat{ font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase; color:var(--t3);margin-bottom:14px; display:flex;align-items:center;gap:10px; } .pub-card-label{ display:inline-block;padding:4px 10px;border-radius:100px; font-size:10px;font-weight:700;letter-spacing:.12em; } .pub-card-label--actu{color:var(--accent);background:rgba(139,163,217,.1)} .pub-card-label--guide{color:var(--blue-dark);background:rgba(191,205,240,.18)} .pub-card-label--juris{color:var(--teal);background:rgba(91,138,143,.1)} .pub-card-label--revue{color:var(--rose);background:rgba(176,142,134,.12)} .pub-card-title{ font-family:var(--ep);font-size:clamp(17px,1.7vw,22px); font-weight:400;color:var(--navy);line-height:1.4;margin-bottom:12px; } .pub-card-desc{ font-family:var(--mu);font-size:clamp(13px,1.1vw,14px);font-weight:300; color:var(--t3);line-height:1.7; margin-bottom:auto; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .pub-card-bottom{ display:flex;justify-content:space-between;align-items:center; margin-top:24px;padding-top:18px; border-top:1px solid rgba(32,42,62,.06); } .pub-card-date{ font-family:var(--mu);font-size:13px;font-weight:400; color:var(--t3);letter-spacing:.02em; } .pub-card-arrow{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(32,42,62,.1); color:var(--accent);transition:all .3s; } .pub-card-arrow:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)} .pub-card-arrow svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none} @media(max-width:860px){ .ins-grid{grid-template-columns:1fr} .insights-header{flex-direction:column;align-items:flex-start;gap:20px} } /* ═══════════════════════════════════════════════════════════ FOOTER — Épuré, premium ═══════════════════════════════════════════════════════════ */ .footer{ background:var(--navy-3); padding:clamp(60px,8vw,100px) var(--pad) 0; position:relative;z-index:1; /* passe AU-DESSUS du hero sticky (z-index:0), sinon il transperce le footer */ } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(32px,4vw,60px); align-items:start; padding-bottom:clamp(48px,6vw,80px); border-bottom:1px solid rgba(247,245,243,.06); } .footer-brand{} /* logo recadré (viewBox serré sur le dessin) → son haut = haut de l'élément, s'aligne donc naturellement sur « LE CABINET » (align-items:start). height = hauteur du DESSIN (plus de vide vertical dans le SVG). */ .footer-logo{display:block;height:44px;width:auto;margin-top:3px;margin-bottom:25px;filter:brightness(0) invert(1);opacity:.85} .footer-tagline{ font-family:var(--mu);font-size:clamp(15px,1.3vw,17px); font-weight:300;color:var(--cream);line-height:1.6; max-width:175px;margin-bottom:28px; } .footer-tagline em{font-family:inherit;font-style:normal;color:var(--blue);font-weight:inherit} .footer-soc{display:flex;gap:10px} .footer-soc a{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(247,245,243,.08); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;color:rgba(247,245,243,.3); text-decoration:none;transition:all .3s; } .footer-soc a:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)} .footer-soc a svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none} .footer-col{} .footer-col-title{ font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--cream);margin-bottom:20px; } .footer-col a{ display:block;font-family:var(--mu);font-size:14.5px;font-weight:300; color:rgba(247,245,243,.45);text-decoration:none; line-height:1.5;margin-bottom:13px;transition:color .3s; } .footer-col a:hover{color:var(--accent)} .footer-col-contact{ font-family:var(--mu);font-size:14.5px;font-weight:300; color:rgba(247,245,243,.45);line-height:1.5; } .footer-col-contact span,.footer-col-contact a{display:block;margin-bottom:12px;color:rgba(247,245,243,.45)} .footer-col-contact a:hover{color:var(--accent)} .footer-bottom{ padding:20px 0; display:flex;justify-content:space-between;align-items:center; font-family:var(--mu);font-size:12.5px;color:rgba(247,245,243,.2); } .footer-bottom-links{display:flex;gap:20px} .footer-bottom-links a{color:rgba(247,245,243,.22);transition:color .3s;font-size:12.5px;text-decoration:none} .footer-bottom-links a:hover{color:var(--accent)} /* ═══════════════════════════════════════════════════════════ REVEAL ANIMATIONS ═══════════════════════════════════════════════════════════ */ [data-r]{opacity:0;transform:translateY(var(--rv-y)); transition:opacity var(--rv-dur) var(--rv-e) var(--rv-d,0s), transform var(--rv-dur) var(--rv-e) var(--rv-d,0s)} [data-r].in{opacity:1;transform:none} /* Le rang de cascade est porté par une VARIABLE, pas par transition-delay : les éléments qui redéclarent leur transition (ou qui s'animent en keyframes) peuvent la réutiliser telle quelle. Ordre partout identique : numéro (1) → titre (2) → contenu (3 et suivants), un cran = 100 ms. */ [data-d="1"]{--rv-d:.10s} [data-d="2"]{--rv-d:.20s} [data-d="3"]{--rv-d:.30s} [data-d="4"]{--rv-d:.40s} [data-d="5"]{--rv-d:.50s} [data-d="6"]{--rv-d:.60s} /* Même mouvement, en keyframes : pour les éléments dont la propriété `opacity` sert DÉJÀ à autre chose (fondu au survol). L'animation gagne pendant la révélation, la transition reprend la main ensuite. `backwards` tient l'état de départ pendant le retard. */ @keyframes rvUp{from{opacity:0;transform:translateY(var(--rv-y))}to{opacity:1;transform:none}} /* Bandeau 1 : plus de séquence propre — il suit la grammaire commune (numéro → titre → texte → lien, .10 s par cran) comme les bandeaux 2 à 5. */ /* (Deux règles retirées ici : elles visaient .hblock--refs pour faire arriver le titre du bandeau 2 en dernier. Ce bandeau porte .hblock--refsbg — elles n'ont jamais rien fait. L'ordre est désormais numéro → titre → contenu.) */ /* Mouvement réduit : la règle doit couvrir les DEUX montages — la transition et les keyframes (valeurs, tuiles, rubriques d'expertise), sans quoi ces derniers continueraient de s'animer. */ @media(prefers-reduced-motion:reduce){ [data-r],[data-art]{opacity:1;transform:none;transition:none;animation:none} } /* Hover lift on cards */ .outil,.pub-row{transition:transform .4s var(--ease),border-color .3s,box-shadow .3s} .outil:hover{transform:translateY(-4px)} /* Smooth section separator lines */ .distinctions,.expertises,.publications,.equipe{position:relative} /* Parallax-lite on hero shapes */ .hero-shapes{transition:transform .1s linear} /* ═══════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media(max-width:900px){ .nav-lang-sw{display:none} .sidebar{display:none} .menu-aside{display:none} .hero-shapes{width:70vw;height:70vw;right:-20%} .about{grid-template-columns:1fr;gap:40px} .expertises{grid-template-columns:1fr;gap:40px} .typo-grid{grid-template-columns:1fr} .partners{grid-template-columns:1fr} .equipe-grid{grid-template-columns:1fr;gap:40px} .pub-row{grid-template-columns:1fr;gap:8px} .pub-type,.pub-date{display:inline;margin-right:12px} .outils-grid{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr 1fr} .clients-heading{font-size:clamp(22px,5vw,32px)} } @media(max-width:500px){ .footer-top{grid-template-columns:1fr} .footer-bottom{flex-direction:column;gap:12px;text-align:center} } /* ═══════════════════════════════════════════════════════════ PAGE HERO — inner pages header ═══════════════════════════════════════════════════════════ */ .page-hero{ background:var(--navy-3); padding:clamp(160px,18vw,220px) var(--pad) clamp(60px,8vw,100px); position:relative;overflow:hidden; } .page-hero-breadcrumb{ position:relative;z-index:1; font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:var(--cream);margin-bottom:20px; display:flex;align-items:center;gap:8px; transition:margin-bottom .5s var(--ease); /* l'ouverture du sommaire élargit la marge (hero-sommaire.js) → transition douce */ } .page-hero-breadcrumb a{color:rgba(247,245,243,.35);transition:color .3s} .page-hero-breadcrumb a:hover{color:var(--accent)} .page-hero-breadcrumb .sep{color:rgba(247,245,243,.15)} .page-hero-title{ position:relative;z-index:1; font-family:var(--ep);font-size:clamp(40px,6vw,64px); font-weight:200;color:var(--cream);line-height:1.1; } .page-hero-title em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400} .page-hero-line{display:block;width:36px;height:1px;background:var(--accent);margin-top:clamp(16px,2vw,28px);position:relative;z-index:1} .page-hero-sub{ position:relative;z-index:1; font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300; color:rgba(247,245,243,.45);line-height:1.8;max-width:560px;margin-top:24px; } .page-hero-shapes{ position:absolute;right:clamp(60px,8vw,120px);bottom:0;width:clamp(220px,25vw,380px);height:70%; pointer-events:none;overflow:visible;opacity:.85; } .page-hero-shapes svg{ position:absolute;bottom:0;right:0;width:100%;height:100%; } .ph-glow{ animation:phGlow 3s ease-in-out infinite; } @keyframes phGlow{ 0%,100%{fill:rgba(139,163,217,0);r:7} 50%{fill:rgba(139,163,217,.25);r:10} } /* Page-hero constellation — 70% right of banner */ .page-hero-constellation{ position:absolute;top:0;right:0;width:70%;height:100%; z-index:0;pointer-events:none;overflow:hidden; } .page-hero-constellation svg{width:100%;height:100%} /* Identical styles to .hero-constellation */ .page-hero-constellation .cline{ stroke:rgba(139,163,217,.12);stroke-width:.8;fill:none; stroke-dasharray:200;stroke-dashoffset:200; animation:drawLine 3s ease forwards; } .page-hero-constellation .cline-1{animation-delay:1.5s} .page-hero-constellation .cline-2{animation-delay:2s} .page-hero-constellation .cline-3{animation-delay:2.4s} .page-hero-constellation .cline-4{animation-delay:2.8s} .page-hero-constellation .cline-5{animation-delay:3.2s} .page-hero-constellation .cline-6{animation-delay:3.5s} .page-hero-constellation .cline-7{animation-delay:3.8s} .page-hero-constellation .cline-8{animation-delay:4.1s} .page-hero-constellation .cline-9{animation-delay:4.4s} .page-hero-constellation .cnode{ fill:rgba(139,163,217,.5);opacity:0; animation:nodeIn .5s ease forwards, nodePulse 4s ease-in-out infinite; } .page-hero-constellation .cnode-1{animation-delay:1.5s,5s} .page-hero-constellation .cnode-2{animation-delay:1.8s,5.3s} .page-hero-constellation .cnode-3{animation-delay:2.1s,5.6s} .page-hero-constellation .cnode-4{animation-delay:2.4s,5.1s} .page-hero-constellation .cnode-5{animation-delay:2.7s,5.4s} .page-hero-constellation .cnode-6{animation-delay:3s,5.7s} .page-hero-constellation .cnode-7{animation-delay:3.3s,5.2s} .page-hero-constellation .cnode-8{animation-delay:3.6s,5.5s} .page-hero-constellation .cnode-9{animation-delay:3.9s,5.8s} .page-hero-constellation .cnode-10{animation-delay:4.2s,5.9s} .page-hero-constellation .cnode-hub{ fill:rgba(139,163,217,.7);opacity:0; animation:nodeIn .8s ease forwards 2s, nodePulseHub 5s ease-in-out infinite 5s; } /* Inner page nav: symbol logo, no bar, on pages without full hero */ .nav.nav-inner{ background:transparent; box-shadow:none; height:68px; padding:0 clamp(6px,.8vw,12px); } .nav.nav-inner .nav-logo-w{display:none} .nav.nav-inner .nav-logo-d{display:none} .nav.nav-inner .nav-symbol-wrap{display:block} .nav.nav-inner .nav-logo-sw{opacity:0} .nav.nav-inner .nav-logo-sd{opacity:1} .nav.nav-inner .nav-link{color:var(--navy)} .nav.nav-inner .nav-burger span{background:var(--navy)} .nav.nav-inner .nav-lang{color:var(--navy)}.nav.nav-inner .nav-lang-inactive{color:rgba(19,27,42,.4)}.nav.nav-inner .nav-lang-sep{background:rgba(19,27,42,.24)} /* ═══════════════════════════════════════════════════════════ EQUIPE PAGE — expanded team section ═══════════════════════════════════════════════════════════ */ .equipe-full{ background:var(--cream); padding:clamp(80px,12vw,140px) var(--pad); } .equipe-full .equipe-grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px); margin-bottom:clamp(60px,8vw,100px); } .equipe-bio{ font-family:var(--mu);font-size:15px;font-weight:300; color:var(--t2);line-height:1.85;margin-top:16px; } .equipe-detail-list{ margin-top:20px;display:flex;flex-direction:column;gap:8px; } .equipe-detail-item{ font-family:var(--mu);font-size:13px;color:var(--t3); padding-left:16px;position:relative;line-height:1.6; } .equipe-detail-item::before{ content:'';position:absolute;left:0;top:9px; width:6px;height:1px;background:var(--accent); } .equipe-collaborateurs{ background:var(--cream-2); padding:clamp(60px,8vw,100px) var(--pad); } .equipe-collab-heading{ font-family:var(--ep);font-size:clamp(24px,3vw,32px); font-weight:300;color:var(--navy);margin-bottom:40px; } .equipe-collab-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .equipe-collab-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px); } .equipe-collab-card{ padding:28px;border:1px solid rgba(32,42,62,.06);border-radius:12px; background:var(--cream);transition:border-color .3s; } .equipe-collab-card:hover{border-color:var(--accent)} .equipe-collab-name{font-family:var(--ep);font-size:16px;font-weight:400;color:var(--navy);margin-bottom:4px} .equipe-collab-role{font-size:13px;color:var(--t2)} /* ═══════════════════════════════════════════════════════════ EXPERTISES PAGE — detailed cards ═══════════════════════════════════════════════════════════ */ .expertises-full{ background:var(--cream); padding:clamp(80px,12vw,140px) var(--pad); } .expertise-cards{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px); } .expertise-card{ padding:clamp(32px,4vw,48px); border:1px solid rgba(32,42,62,.06);border-radius:16px; transition:border-color .4s,box-shadow .4s,transform .4s var(--ease); position:relative;overflow:hidden; } .expertise-card:hover{ border-color:var(--accent); box-shadow:0 12px 40px rgba(139,163,217,.08); transform:translateY(-4px); } .expertise-card-num{ font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.1em;color:var(--accent);margin-bottom:16px; } .expertise-card-title{ font-family:var(--ep);font-size:clamp(20px,2.5vw,26px); font-weight:300;color:var(--navy);margin-bottom:12px;line-height:1.3; } .expertise-card-title em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .expertise-card-desc{ font-family:var(--mu);font-size:14px;font-weight:300; color:var(--t2);line-height:1.8; } .expertise-card-line{ position:absolute;bottom:0;left:0;right:0;height:3px; background:linear-gradient(to right,var(--accent),var(--blue)); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease); } .expertise-card:hover .expertise-card-line{transform:scaleX(1)} /* Expertise approach section */ .expertise-approach{ background:var(--navy-3); padding:clamp(80px,10vw,140px) var(--pad); display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,100px); align-items:center; } .expertise-approach-heading{ font-family:var(--ep);font-size:clamp(28px,4vw,40px); font-weight:200;color:var(--cream);line-height:1.2; } .expertise-approach-heading em{font-family:var(--ep);font-style:normal;color:var(--blue);font-weight:400} .expertise-approach-text{ font-family:var(--mu);font-size:15px;font-weight:300; color:rgba(247,245,243,.45);line-height:1.85; } /* ═══════════════════════════════════════════════════════════ CLIENTS PAGE — expanded grid ═══════════════════════════════════════════════════════════ */ .clients-full{ background:var(--cream); padding:clamp(80px,12vw,140px) var(--pad); } .clients-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px); } .clients-grid .client-tile{width:auto;aspect-ratio:4/5} .clients-intro{ font-family:var(--mu);font-size:clamp(15px,1.3vw,17px);font-weight:300; color:var(--t2);line-height:1.85;max-width:680px;margin-bottom:clamp(40px,6vw,72px); } /* ═══════════════════════════════════════════════════════════ CONTACT PAGE — full width form ═══════════════════════════════════════════════════════════ */ .contact-full{ background:var(--cream); padding:clamp(80px,12vw,140px) var(--pad); display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,100px); } .contact-info{} .contact-info-heading{ font-family:var(--ep);font-size:clamp(24px,3vw,32px); font-weight:300;color:var(--navy);margin-bottom:32px;line-height:1.3; } .contact-info-heading em{font-family:var(--ep);font-style:normal;color:var(--accent);font-weight:400} .contact-block{margin-bottom:28px} .contact-block-label{ font-family:var(--mu);font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:8px; } .contact-block-val{font-size:15px;color:var(--t2);line-height:1.8} .contact-block-val a{color:var(--navy);transition:color .3s} .contact-block-val a:hover{color:var(--accent)} .contact-form-wrapper{ padding:clamp(32px,4vw,48px); background:var(--navy-3);border-radius:20px; } .contact-form-wrapper .footer-form-heading{margin-bottom:32px} /* ═══════════════════════════════════════════════════════════ PUBLICATIONS PAGE — expanded ═══════════════════════════════════════════════════════════ */ .publications-full{ background:var(--cream); padding:clamp(80px,12vw,140px) var(--pad); } @media(max-width:900px){ .page-hero-shapes{display:none} .page-hero-constellation{display:none} .expertise-cards{grid-template-columns:1fr} .expertise-approach{grid-template-columns:1fr;gap:40px} .clients-grid{grid-template-columns:1fr 1fr} .contact-full{grid-template-columns:1fr} .equipe-full .equipe-grid{grid-template-columns:1fr} .equipe-collab-grid{grid-template-columns:1fr} } /* ── CTA Pre-footer — Ken Burns ── */ .cta-prefooter{ position:relative;overflow:hidden; background:#0a0e18; padding:clamp(60px,7vw,100px) var(--pad); display:flex;align-items:center; } .cta-pf-bg{ position:absolute;inset:0; /* Le JS de BaseLayout tire une photo au hasard parmi /assets/hero/1..13. Aucun repli en dur ici : il était téléchargé À CHAQUE FOIS, puis aussitôt remplacé par le tirage — soit une image entière pour rien. */ background:#0a0e18 center/cover no-repeat; /* TRAITEMENT IDENTIQUE AU HERO : image nette en couleur, zoom kb-zoom, voile navy léger */ z-index:0; animation:kb-zoom 12s linear alternate infinite; will-change:transform; } .cta-pf-overlay{ position:absolute;inset:0;z-index:1; /* Voile bleuté navy du hero + halo radial derrière le texte : l'image de fond est tirée au hasard (certaines très claires), le halo garantit le contraste du texte centré sans assombrir toute la photo. */ background: radial-gradient(ellipse 58% 80% at 30% 55%, rgba(19,27,42,.58) 0%, rgba(19,27,42,.30) 55%, rgba(19,27,42,0) 100%), linear-gradient(180deg, rgba(19,27,42,.53) 0%, rgba(19,27,42,.28) 35%, rgba(19,27,42,.53) 100%), linear-gradient(90deg, rgba(19,27,42,.66) 0%, rgba(19,27,42,.18) 60%, rgba(19,27,42,.30) 100%); } .cta-stars{display:none} /* Composition ÉDITORIALE (comme le hero) : titre à gauche sur la grille du site, lien « Nous contacter » posé en bas à droite sur la même ligne de base → diagonale de lecture, plus de bloc centré « bannière ». */ /* Piste 8 : grand titre asymétrique aligné à gauche (sur le visuel photo). Calibre généreux + colonne étroite (max-width) → l'accroche se pose en pavé sur 2-3 lignes, langage du hero. Lien « Nous contacter » dessous. */ .cta-pf-content{ position:relative;z-index:2; width:100%; display:flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:clamp(30px,3.6vw,44px); text-align:left; } .cta-pf-heading{ font-family:var(--ep);font-size:clamp(36px,5.4vw,66px); font-weight:200;color:var(--cream);line-height:1.06; letter-spacing:-.02em; margin:0;max-width:9.5em; text-shadow:0 2px 24px rgba(10,14,24,.55),0 1px 3px rgba(10,14,24,.35); } .cta-pf-heading em{font-family:var(--mu);font-style:normal;color:var(--blue);font-weight:400;font-size:.56em;letter-spacing:.005em;display:block;margin-top:.5em} /* Bouton : ÉCRITURE SIMPLE + soulignement fin — même langage que le sélecteur FR/EN de la nav. Survol → bascule bleu Raise, le trait suit. */ .cta-pf-btn{ display:inline-block;position:relative;flex:none; font-family:var(--mu);font-size:13px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;white-space:nowrap; color:var(--cream);text-decoration:none; text-shadow:0 1px 12px rgba(10,14,24,.5); transition:color .35s; } .cta-pf-btn:hover{color:var(--blue)} /* Écrans étroits : on garde l'empilement centré */ @media(max-width:900px){ .cta-pf-content{gap:30px} } /* ═══════════════════════════════════════════════════════════ PANNEAU FINAL — CTA pré-footer + footer regroupés (BaseLayout). Le duo occupe TOUJOURS au moins tout l'écran : arrivé en bas de n'importe quelle page, on ne voit QUE le CTA + le footer, jamais un reste de la section précédente — et ce à toute taille de fenêtre (dvh → prise en compte des barres d'UI mobiles). ═══════════════════════════════════════════════════════════ */ .site-end{ position:relative;z-index:1; /* au-dessus d'un éventuel hero sticky (z-index:0) */ min-height:100vh;min-height:100dvh; display:flex;flex-direction:column; scroll-snap-align:start; /* on se cale sur le HAUT du panneau (crantage) */ } .site-end .cta-prefooter{flex:1 1 auto} /* le CTA s'étire pour combler l'espace au-dessus du footer */ .site-end .footer{flex:0 0 auto} /* le footer garde sa hauteur naturelle */ /* ── Override: italique supprimé partout (em rendu droit, en bleu accent) ── */ em { font-style: normal; } i { font-style: normal; } /* ═══════════════════════════════════════════════════════════ HERO — slideshow immobilier plein écran avec effet Ken Burns (remplace l'ancien skyline SVG + constellation) ═══════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; } .hero-slideshow { position: absolute; inset: 0; z-index: 0; background: var(--navy-3); /* fond pendant le chargement des images */ } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; will-change: transform, opacity; transition: opacity 1.2s linear; /* images nettes, sans flou ni filtre */ } /* La slide active joue le mouvement de caméra (Ken Burns). MOUVEMENT PERMANENT & COHÉRENT : TOUTES les images zooment dans le MÊME sens (zoom AVANT lent), jamais en arrière → aucune sensation de "retour au point de départ". Timing LINÉAIRE (vitesse constante) + durée (20s) >> temps d'affichage (~6s) : l'image est remplacée alors qu'elle zoome encore, le fondu masque le changement d'échelle. Seul le point focal (transform-origin) varie d'une image à l'autre pour éviter la monotonie. */ .hero-slide.is-active { opacity: 1; animation: kb-zoom 12s linear forwards; } .hero-slide:nth-child(6n+1) { transform-origin: 50% 50%; } .hero-slide:nth-child(6n+2) { transform-origin: 30% 40%; } .hero-slide:nth-child(6n+3) { transform-origin: 70% 55%; } .hero-slide:nth-child(6n+4) { transform-origin: 40% 65%; } .hero-slide:nth-child(6n+5) { transform-origin: 65% 35%; } .hero-slide:nth-child(6n+6) { transform-origin: 50% 60%; } /* Zoom avant TRÈS léger : on part de l'échelle native (1.0 = image affichée à 100 %, donc le plus net possible) et on monte à peine (1.06). Un zoom fort (ex. 1.24) magnifie le raster → image molle en permanence ; ici elle reste quasi à pleine définition tout du long. */ @keyframes kb-zoom { from { transform: scale(1.0); } to { transform: scale(1.06); } } /* Voile sombre + teinte BLEUTÉE pour la lisibilité du texte et l'unité chromatique avec le bleu de la marque. La 1ʳᵉ couche (bleu #8BA3D9 ~rgb 139,163,217) donne le "point bleuté" ; les 2 dégradés navy assurent le contraste du texte. */ .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(19,27,42,.53) 0%, rgba(19,27,42,.28) 35%, rgba(19,27,42,.53) 100%), linear-gradient(90deg, rgba(19,27,42,.60) 0%, rgba(19,27,42,.12) 55%, rgba(19,27,42,.30) 100%); } /* Le contenu texte passe au-dessus du slideshow + overlay. NB : on ne touche PAS au position du .hero-scroll (il est déjà absolute + z-index:3 plus haut, pour rester centré en bas) — sinon on casse son centrage. */ .hero-content { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .hero-slide.is-active { animation: none !important; transform: none !important; } } /* (Effet arrondi/remontée supprimé — transition refaite ci-dessous.) */ /* ═══════════════════════════════════════════════════════════ ACCUEIL — 3 BLOCS PLEIN ÉCRAN (premium, fonds alternés) ═══════════════════════════════════════════════════════════ */ /* (Aucun fondu : coupure nette entre le hero et le 1er bloc.) */ .hblock{ min-height:100vh;display:flex;align-items:center; padding:clamp(70px,9vh,120px) var(--pad);position:relative; } .hblock .hero-scroll{z-index:4} /* "Défiler" au-dessus du contenu du bandeau */ .hblock-inner{width:100%;max-width:var(--max-w);margin:0 auto} .hblock--present,.hblock--pubs{background:var(--navy-3);color:var(--text-on-navy)} .hblock--refs{background:var(--navy-3);color:var(--text-on-navy)} .hblock--valA,.hblock--valB,.hblock--valC,.hblock--valD{background:var(--navy-3);color:var(--text-on-navy)} .hblock--domaines{background:var(--navy-3);color:var(--text-on-navy)} /* ═══ BLOC VALEURS + ASSOCIÉS — split photo pleine hauteur / panneau navy ═══ */ .hblock--values{ /* Alternance : texte à GAUCHE, photo à DROITE (miroir du bloc références) */ padding:0;display:grid;grid-template-columns:1fr minmax(0,46%);align-items:stretch; background:var(--navy-3);color:var(--cream);overflow:hidden; } /* Photo : colonne bord-à-bord, plein cadre */ .values-photo{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;order:2} .values-panel{order:1} .values-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 45%} /* 4 visuels superposés : crossfade doux selon la valeur active */ .values-pic{opacity:0;transition:opacity 1.3s ease-in-out} .values-pic.is-active{opacity:1} /* Voile bleuté façon hero (image en couleur) + fondu progressif vers le panneau navy à droite */ .values-photo-scrim{position:absolute;inset:0;pointer-events:none;background: linear-gradient(180deg, rgba(19,27,42,.50) 0%, rgba(19,27,42,.24) 38%, rgba(19,27,42,.52) 100%), linear-gradient(270deg, rgba(19,27,42,.22) 0%, rgba(19,27,42,0) 40%, rgba(19,27,42,.5) 74%, rgba(19,27,42,1) 100%);} /* Panneau : titre + 4 valeurs */ .values-panel{display:flex;align-items:center;min-width:0; /* gauche = marge de page (--pad) pour aligner le « 03 » sur les autres bandeaux ; droite = gouttière interne vers la photo, indépendante */ padding:clamp(54px,8vh,110px) clamp(28px,5vw,90px) clamp(54px,8vh,110px) var(--pad)} .values-panel-inner{width:100%;max-width:820px} .values-lead{font-family:var(--mu);font-weight:300;font-size:clamp(15px,1.3vw,18px);line-height:1.75; color:rgba(247,245,243,.66);max-width:52ch;margin-top:18px} /* L'air sous le titre a été élargi depuis la suppression du chapô : le titre tombait sinon directement sur le premier filet. */ .values-list{list-style:none;margin:clamp(38px,6vh,68px) 0 0;padding:0; /* La liste réserve à sa gauche la gouttière du liseré (voir ci-dessous). Le retrait est posé sur la LISTE et non sur les valeurs : les filets horizontaux continuent donc de courir jusqu'au bord, comme avant. */ position:relative;padding-left:clamp(18px,1.8vw,26px)} /* ── LE LISERÉ VOYAGEUR ────────────────────────────────────── UN SEUL trait accent pour toute la liste : il glisse d'une valeur à l'autre et prend sa hauteur, au lieu d'apparaître et de disparaître quatre fois. Rien ne surgit, rien ne s'éteint — c'est un repère qui se déplace, dans le vocabulaire des barres du site (2 px d'accent, comme les sur-titres et les liens). Sa position et sa hauteur sont posées par home.js en variables ; au repos (--lo:0) il est invisible et ne laisse aucune trace. */ .values-list::before{ content:'';position:absolute;left:0;width:2px;background:var(--accent); top:var(--ly,0px);height:var(--lh,0px);opacity:var(--lo,0); /* Le déplacement du liseré est un GESTE, pas un fondu : il va d'un point à un autre et le regard le suit. À la durée des fondus (.6 s) il traînait derrière le curseur. Il part donc plus vif — .38 s — sur la courbe du site ; seule son apparition et sa disparition gardent le fondu commun. */ transition:top .38s var(--ease),height .38s var(--ease),opacity var(--fondu) var(--fondu-e); pointer-events:none} @media(prefers-reduced-motion:reduce){ .values-list::before{transition:opacity .2s var(--ease)} } /* « Fondu pur » : aucun trait, aucune déco, aucun décalage. La valeur active se distingue par le SEUL contraste d'opacité — les autres s'estompent, l'active reste nette et sa description apparaît. Le titre ne bouge pas et ne change pas de couleur (calé sur sa description). */ .values-item{position:relative;display:flex;align-items:flex-start;gap:clamp(20px,2vw,34px); /* Rangées resserrées : avec les descriptions passées à deux lignes, l'ancien pas (jusqu'à 36 px de part et d'autre) faisait déborder la liste sur le « Défiler » du bandeau. */ padding:clamp(14px,2vh,22px) 0} /* filets horizontaux encadrant les valeurs — même hairline que la section 02 (Un cabinet de référence : 1px rgba(247,245,243,.16)) : un trait au-dessus de chaque valeur (donc au-dessus de la 1re) + un trait de clôture sous la dernière */ .values-item{border-top:1px solid rgba(247,245,243,.16); /* Filet du dessous réservé sur CHAQUE valeur, transparent au repos : il ne sert qu'à la valeur retenue (voir plus bas). Le réserver d'emblée évite que la liste se décale d'un pixel au survol. */ border-bottom:1px solid transparent} /* Aucune transition sur les filets : ils basculent d'un coup, comme ceux de la grille « Un cabinet de référence ». Un trait ne se fane pas. */ .values-item:last-child{border-bottom-color:rgba(247,245,243,.16)} /* Les deux filets qui encadrent la valeur retenue restent à pleine force ; les autres s'estompent avec leur valeur (opacité .3 sur toute la ligne). Celui du dessous est porté par la valeur retenue elle-même et non par la suivante : sinon il s'estomperait avec elle, et l'encadrement paraîtrait boiteux. */ .values-item:hover,.values-item.is-current{border-bottom-color:rgba(247,245,243,.16)} .values-item:hover+.values-item, .values-item.is-current+.values-item{border-top-color:transparent} .values-c{min-width:0} /* AU REPOS, le titre est centré entre ses deux filets : la place de la description est réservée (aucun saut de hauteur), et le titre descend de la moitié de cette réserve (--vd, mesurée par home.js). Quand la valeur est lue, il remonte à sa place et la description paraît dessous — un seul glissement, à la durée commune des fondus. */ .values-t{font-family:var(--ep);font-weight:400;font-size:clamp(19px,1.7vw,26px);color:var(--cream); margin:0 0 6px;line-height:1.12; transform:translateY(var(--vd,0px)); transition:color var(--fondu) var(--fondu-e),transform var(--fondu) var(--fondu-e)} .values-item:hover .values-t, .values-item.is-current .values-t{transform:none} /* Description : l'ESPACE est réservé en permanence (aucun saut de mise en page), seule l'opacité joue → passage parfaitement fluide d'une valeur à l'autre */ .values-d{font-family:var(--mu);font-weight:300;font-size:clamp(13.5px,1vw,15px);line-height:1.65; color:rgba(247,245,243,.6);margin:0;max-width:none; opacity:0;transform:translateY(6px); transition:opacity var(--fondu) var(--fondu-e),transform var(--fondu) var(--fondu-e)} /* La description n'entre qu'une fois le titre remonté à sa place : sans ce retard elle apparaît pendant que le titre glisse encore, et les deux se frôlent à mi-parcours. Mais elle doit FINIR avec lui — sa durée est donc le reste du temps disponible, pas la durée pleine. Au retrait, ni retard ni raccourci : tout repart ensemble. */ .values-item:hover .values-d,.values-item.is-current .values-d{ opacity:1;transform:none; transition-delay:var(--vd-retard); transition-duration:calc(var(--fondu) - var(--vd-retard))} /* UNE SEULE DURÉE POUR TOUT LE BLOC — .45 s, la courbe du site, aucun retard : les valeurs qui s'effacent, les filets qui se retirent, la description qui paraît et le liseré qui se place partent et arrivent ensemble. Un seul mouvement, pas quatre qui se suivent. */ .values-item{cursor:default; transition:opacity var(--fondu) var(--fondu-e),border-color var(--fondu) var(--fondu-e)} /* Arrivée : même mouvement que partout ailleurs. En keyframes parce que la propriété `opacity` de cet élément sert déjà au fondu des voisins au survol — les deux ne peuvent pas partager une même transition. */ .values-item[data-r].in{animation:rvUp var(--rv-dur) var(--rv-e) var(--rv-d,0s) backwards} /* Les retards de la CASCADE D'APPARITION ([data-r][data-d="1..4"]) portent sur transition-delay, donc sur TOUTES les propriétés de la valeur — y compris celles du survol. Les quatre valeurs s'effaçaient donc l'une après l'autre, décalées de 100 ms à 400 ms. On rend le retard aux seules propriétés de l'apparition (opacité et glissement, gérés par [data-r]) : la liste répond au survol d'un seul tenant, exactement comme la grille du bandeau 02. */ .values-item[data-r].in{transition-delay:0s} /* LA VALEUR LUE RESTE SEULE — même geste que la grille « Un cabinet de référence » juste au-dessus : les autres valeurs ne s'estompent pas, elles s'effacent complètement, et TOUS les filets se retirent en même temps. Il ne reste que la valeur, sa photo, et le liseré qui la désigne. Les filets basculent d'un coup (aucune transition sur border-color) tandis que les valeurs fondent : c'est le comportement déjà retenu pour la grille des références. */ .values-list:hover .values-item:not(:hover):not(.is-current), .values-list:has(.values-item.is-current) .values-item:not(.is-current){opacity:0} .values-list:hover .values-item, .values-list:has(.values-item.is-current) .values-item{border-color:transparent} /* la photo se révèle en fondu seul (pas de glissement vertical sur un plein cadre) */ /* Seule exception assumée au glissement : la photo occupe tout le panneau et la décaler de 26 px ouvrirait une bande vide sous elle. Elle garde donc un fondu simple — mais à la durée commune. */ .values-photo[data-r]{transform:none;transition-duration:var(--rv-dur)} @media(max-width:920px){ .hblock--values{grid-template-columns:1fr;min-height:auto} .values-photo{height:46vh;min-height:300px;order:-1} .values-photo img{object-position:50% 28%} .values-photo-scrim{background: linear-gradient(180deg, rgba(19,27,42,.50) 0%, rgba(19,27,42,0) 22%), linear-gradient(0deg, rgba(19,27,42,.7) 0%, rgba(19,27,42,0) 34%)} .values-panel{padding:clamp(40px,7vh,72px) var(--pad)} } /* Accordéon domaines en pleine largeur */ .clientele--full{height:min(60vh,540px);margin-top:clamp(24px,4vh,48px)} /* étiquette de style (temporaire, pour comparer les 4 maquettes) */ .val-style-tag{font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--blue);opacity:.55;margin-left:14px} /* ── STYLE A : liste manifeste (lignes pleine largeur + vignette) ── */ .valA-list{list-style:none;margin:clamp(24px,4vh,48px) 0 0;padding:0;border-top:1px solid rgba(247,245,243,.16)} .valA-row{display:flex;align-items:center;gap:clamp(18px,3vw,46px); padding:clamp(20px,3vh,38px) 0;border-bottom:1px solid rgba(247,245,243,.16)} .valA-idx{font-family:var(--ep);font-weight:200;font-size:clamp(18px,1.5vw,24px);color:var(--blue);opacity:.6;flex:none;width:42px} .valA-name{font-family:var(--ep);font-weight:300;font-size:clamp(26px,3vw,44px);color:var(--cream);flex:0 0 30%;margin:0;line-height:1.05} .valA-desc{font-family:var(--mu);font-weight:300;font-size:15px;line-height:1.7;color:var(--text-on-navy-soft);flex:1;margin:0} .valA-thumb{flex:none;width:clamp(96px,9vw,140px);aspect-ratio:16/10;background-size:cover;background-position:center; filter:grayscale(1) brightness(.78);transition:filter .5s var(--ease),transform .5s var(--ease)} .valA-row:hover .valA-thumb{filter:grayscale(0) brightness(1);transform:scale(1.04)} /* ── STYLE B : chiffres géants en filigrane (2×2) ── */ .valB-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,40px);margin-top:clamp(24px,4vh,48px)} .valB-cell{position:relative;overflow:hidden;padding:clamp(24px,3vw,46px);border:1px solid rgba(247,245,243,.12)} .valB-bignum{position:absolute;top:-.22em;right:.04em;font-family:var(--ep);font-weight:200; font-size:clamp(110px,15vw,210px);line-height:1;color:rgba(191,205,240,.07);pointer-events:none} .valB-body{position:relative} .valB-name{font-family:var(--ep);font-weight:400;font-size:clamp(22px,2vw,30px);color:var(--cream);margin:0 0 12px} .valB-desc{font-family:var(--mu);font-weight:300;font-size:15px;line-height:1.7;color:var(--text-on-navy-soft);max-width:40ch;margin:0} /* ── STYLE C : accordéon d'images (survol → élargit + descriptif) ── */ .valC-accordion{display:flex;gap:6px;height:min(60vh,500px);margin-top:clamp(24px,4vh,48px)} .valC-panel{position:relative;flex:1;min-width:0;overflow:hidden;cursor:pointer; background-size:cover;background-position:center;transition:flex .55s var(--ease)} .valC-panel:hover{flex:3.4} .valC-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,27,42,.92),rgba(19,27,42,.35) 55%,rgba(19,27,42,.12))} .valC-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.8vw,28px);color:var(--cream)} .valC-idx{font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--blue);margin-bottom:8px} .valC-name{font-family:var(--ep);font-weight:400;font-size:clamp(18px,1.6vw,24px);margin:0 0 10px;white-space:nowrap} .valC-desc{font-family:var(--mu);font-weight:300;font-size:14px;line-height:1.6;color:var(--cream);max-width:38ch; opacity:0;transform:translateY(8px);transition:opacity .4s .12s,transform .4s .12s} .valC-panel:hover .valC-desc{opacity:1;transform:none} /* ── STYLE D : mots géants (descriptif au survol) ── */ .valD-list{list-style:none;margin:clamp(18px,3vh,38px) 0 0;padding:0} .valD-row{display:flex;align-items:baseline;gap:clamp(20px,4vw,60px); padding:clamp(8px,1.4vh,18px) 0;border-bottom:1px solid rgba(247,245,243,.1)} .valD-word{font-family:var(--ep);font-weight:200;font-size:clamp(40px,6.5vw,92px);line-height:1.05; color:rgba(247,245,243,.32);transition:color .4s var(--ease);flex:none} .valD-row:hover .valD-word{color:var(--cream)} .valD-desc{font-family:var(--mu);font-weight:300;font-size:15px;line-height:1.6;color:var(--text-on-navy-soft); flex:1;max-width:38ch;margin:0;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .valD-row:hover .valD-desc{opacity:1;transform:none} @media(max-width:920px){ .valB-grid{grid-template-columns:1fr} .valC-accordion{flex-direction:column;height:auto} .valC-panel{height:130px}.valC-panel:hover{flex:1} .valA-row{flex-wrap:wrap}.valA-name{flex-basis:100%}.valA-thumb{display:none} .valD-word{font-size:clamp(34px,12vw,60px)} } /* ═══════════════════════════════════════════════════════════ HEROS DE SOUS-PAGES — fond photo Ken Burns (même langage que le hero d'accueil) + titre en cascade mot par mot ═══════════════════════════════════════════════════════════ */ .page-hero{isolation:isolate} .page-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background-size:0 0} /* l'image est peinte par un calque animable (hérite de l'inline style) */ .page-hero-bg::before{content:'';position:absolute;inset:0; background-image:inherit;background-size:cover;background-position:center; transform:scale(1.001);will-change:transform; animation:phKb 20s ease-in-out infinite alternate} @keyframes phKb{from{transform:scale(1.001)}to{transform:scale(1.1)}} /* voile navy appuyé : la photo reste une matière, pas un sujet */ .page-hero-bg::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(19,27,42,.90) 0%,rgba(19,27,42,.78) 45%,rgba(19,27,42,.94) 100%)} @media(prefers-reduced-motion:reduce){.page-hero-bg::before{animation:none}} /* cascade du titre : les mots (enveloppés en JS via BaseLayout) montent en décalé ; .ph-cascade neutralise l'ancien fondu global du titre/lignes des CSS de pages */ .page-hero-title.ph-cascade, .page-hero-title.ph-cascade .line{opacity:1;animation:none;transform:none} .ph-w{display:inline-block;opacity:0;transform:translateY(26px); animation:phWord .7s var(--ease) forwards} @keyframes phWord{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.ph-w{animation:none;opacity:1;transform:none}} /* — Eyebrow + titre + lead communs — */ .hb-eyebrow{ display:flex;align-items:center;gap:14px; font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--cream);margin-bottom:26px; } .hb-eyebrow-line{width:36px;height:1px;background:var(--cream);display:inline-block} .hb-eyebrow--dark{color:var(--navy-3)} .hb-eyebrow--dark .hb-eyebrow-line{background:rgba(19,27,42,.35)} .hb-title{ font-family:var(--ep);font-weight:300;line-height:1.12;letter-spacing:-.01em; font-size:clamp(30px,3.6vw,52px);color:var(--cream); } .hb-title--dark{color:var(--navy-3)} .hb-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)} /* — Index éditorial des bandeaux : grand chiffre fin + total (style premium) — */ .hb-num{display:flex;align-items:flex-start;gap:8px;line-height:1; margin-bottom:clamp(16px,2.4vh,28px);font-family:var(--ep)} .hb-num-cur{font-size:clamp(30px,3.2vw,46px);font-weight:200;color:var(--blue);opacity:.92; font-variant-numeric:tabular-nums} .hb-num-tot{font-size:13px;font-weight:300;letter-spacing:.12em; color:rgba(247,245,243,.42);padding-top:.55em} .hb-title--dark em{color:var(--blue-dark)} .hb-lead{ font-family:var(--mu);font-weight:300; font-size:var(--chapo-taille);line-height:var(--chapo-interligne); color:var(--cream);max-width:46ch;margin-top:24px; } .hb-link{ display:inline-flex;align-items:center;gap:14px;margin-top:38px; font-family:var(--mu);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--cream); /* `gap` appartient au survol ; opacité et glissement à la révélation. Sans ces deux dernières, le raccourci ci-dessus les faisait apparaître d'un bloc, sans animation. */ transition:gap .25s var(--ease), opacity var(--rv-dur) var(--rv-e) var(--rv-d,0s), transform var(--rv-dur) var(--rv-e) var(--rv-d,0s); } .hb-link:hover{gap:20px} .hb-link-circle{ width:46px;height:46px;border-radius:50%;border:1px solid rgba(247,245,243,.25); display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s; } .hb-link:hover .hb-link-circle{background:var(--blue-dark);border-color:var(--blue-dark)} .hb-link-circle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} /* — BLOC 1 : présentation (texte + image) — */ .present-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center} .present-media{position:relative;height:min(72vh,640px)} .present-media img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid rgba(247,245,243,.1)} /* — BLOC 2 : références (3 cartes sur crème) — */ .refs-inner{display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,5vw,70px)} .hb-head{max-width:var(--max-w)} /* Colonnes séparées par de fins traits (pas de cartes) + trait horizontal au-dessus */ /* En-tête références : titre à gauche, courte note éditoriale alignée à droite (remplit le coin haut-droit) */ /* Alternance éditoriale gauche/droite : le titre des références est calé à DROITE (le bloc précédent — cabinet — a son texte à gauche) */ .refs-head{display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(40px,6vw,96px)} .refs-head-main{text-align:right} .refs-head-main .hb-num{justify-content:flex-end} .refs-head-note{flex:0 1 52ch;max-width:52ch;text-align:right; font-family:var(--mu);font-weight:300;font-size:clamp(13px,1.05vw,15px);line-height:1.7; color:rgba(247,245,243,.6);margin-bottom:6px} @media(max-width:920px){.refs-head{flex-direction:column;align-items:flex-start} .refs-head-note{text-align:left;flex-basis:auto;margin-top:18px}} /* LES TRAITS SONT UN SEUL BLOC : le filet du haut, celui du milieu et les segments verticaux partagent la même couleur, la même durée et aucun retard. Ils sont posés d'emblée — aucun ne se dessine, aucun n'attend son tour — et se retirent tous ensemble au survol. Une grille est une seule chose. */ .refs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0; border-top:1px solid rgba(247,245,243,.16); transition:border-color var(--fondu) var(--fondu-e)} .ref-col{ position:relative;display:flex;flex-direction:column; padding:clamp(30px,3vw,52px) clamp(34px,3vw,56px); border-left:1px solid rgba(247,245,243,.16); } /* colonne de gauche (items impairs) : alignée à gauche, sans trait à gauche */ .ref-col:nth-child(odd){padding-left:0} /* trait horizontal entre les 2 lignes (items de la 2ᵉ ligne) */ .refs-grid .ref-col:nth-child(n+3){border-top:1px solid rgba(247,245,243,.16)} .ref-eyebrow{margin-bottom:18px} /* — Survol : carte GRISÉE + monochrome + descriptif masqué par défaut ; au survol elle s'éclaircit, passe EN COULEUR (accents bleus) et le descriptif apparaît. — */ /* ── MÊME ANIMATION QUE LE BANDEAU 03 « Ce qui nous distingue » ── Tout ce qui répond au survol dure .45 s sur la courbe du site, sans retard : contenus, filets horizontaux, trait vertical, libellés, descriptions. Les photos, elles, se substituent en 1,3 s comme les visuels des valeurs. Deux bandeaux voisins qui bougent autrement se remarquent immédiatement. */ /* Pleines au repos, comme les valeurs du bandeau 03 : le contenu n'a aucune raison d'attendre un survol pour être lisible. C'est le survol qui retire les autres, pas le repos qui grise tout le monde. */ .ref-inner{opacity:1;transition:opacity var(--fondu) var(--fondu-e)} .ref-eyebrow{color:var(--cream);transition:color var(--fondu) var(--fondu-e)} /* label monochrome par défaut */ .ref-eyebrow .hb-eyebrow-line{transition:width var(--fondu) var(--fondu-e),background-color var(--fondu) var(--fondu-e)} .ref-col:hover .ref-eyebrow{color:var(--blue)} /* → bleu au survol */ .ref-col:hover .ref-eyebrow .hb-eyebrow-line{background:var(--blue);width:56px} .ref-title{font-family:var(--ep);font-weight:400;font-size:clamp(19px,1.7vw,26px);line-height:1.15;color:var(--cream);margin:0 0 16px} .ref-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--cream);transition:color var(--fondu) var(--fondu-e)} /* pas de couleur par défaut */ .ref-col:hover .ref-title em{color:var(--blue)} /* mot-clé devient bleu au survol */ /* descriptif : caché par défaut (espace réservé → aucun saut de mise en page), révélé au survol */ .ref-desc{font-family:var(--mu);font-weight:300;font-size:clamp(13.5px,1vw,15px);line-height:1.65;color:var(--cream); opacity:0;transform:translateY(8px);transition:opacity var(--fondu) var(--fondu-e),transform var(--fondu) var(--fondu-e)} .ref-col:hover .ref-desc{opacity:1;transform:none} /* ═══════════════════════════════════════════════════════════ RÉFÉRENCES — fond navy + image révélée au survol d'une référence ═══════════════════════════════════════════════════════════ */ /* Descriptions toujours visibles + cartes non grisées */ .refs-show .ref-inner{opacity:1} .refs-show .ref-desc{opacity:1;transform:none} .refs-grid--tight .ref-col{padding-top:clamp(20px,2.2vw,32px);padding-bottom:clamp(20px,2.2vw,32px)} /* Fond navy par défaut ; au survol d'une réf, son image emplit le fond et efface les autres */ .hblock--refsbg{position:relative;overflow:hidden;background:var(--navy-3);color:var(--cream)} .refsbg-imgs{position:absolute;inset:0;z-index:0} /* Image DÉJÀ assombrie par un filtre → même en cours de fondu elle n'est jamais claire (donc plus de "clair puis sombre"), et le fond reste le navy normal tant qu'on ne survole rien. */ .refbg-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%; filter:brightness(.6) saturate(.95);opacity:0;transition:opacity 1.3s ease-in-out} /* cartes de droite (texte à droite) : on pousse le bâtiment vers la gauche pour ne pas mordre le texte */ .refbg-pic[data-img="1"],.refbg-pic[data-img="3"]{object-position:10% 38%} /* Voile gradient révélé AVEC l'image (sinon invisible → fond navy normal par défaut) */ .refsbg-veil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.3s ease-in-out;background: linear-gradient(180deg,rgba(13,18,30,.5) 0%,rgba(13,18,30,.32) 45%,rgba(13,18,30,.6) 100%), linear-gradient(90deg,rgba(13,18,30,.46) 0%,rgba(13,18,30,.18) 70%)} .hblock--refsbg .hblock-inner{position:relative;z-index:2} /* texte + légère ombre → bien lisible sur l'image */ .refsbg2 .ref-eyebrow,.refsbg2 .ref-title,.refsbg2 .ref-desc{text-shadow:0 1px 16px rgba(8,11,18,.6)} /* au survol d'une réf : son image + le voile apparaissent (sinon fond navy normal) */ .refsbg2:has(.ref-col:hover) .refsbg-veil{opacity:1} .refsbg2:has(.ref-col[data-img="0"]:hover) .refbg-pic[data-img="0"], .refsbg2:has(.ref-col[data-img="1"]:hover) .refbg-pic[data-img="1"], .refsbg2:has(.ref-col[data-img="2"]:hover) .refbg-pic[data-img="2"], .refsbg2:has(.ref-col[data-img="3"]:hover) .refbg-pic[data-img="3"]{opacity:1} /* les 3 autres réfs s'effacent, la survolée reste pleine */ .refsbg2 .ref-col{transition:opacity var(--fondu) var(--fondu-e),border-color var(--fondu) var(--fondu-e)} .refsbg-grid{transition:border-color var(--fondu) var(--fondu-e)} /* Ce sont les CONTENUS des autres colonnes qui s'effacent, pas les colonnes : une colonne rendue transparente emportait ses filets avec elle, et comme son opacité revient en cascade (retards de l'apparition), les traits réapparaissaient l'un après l'autre. Ils ne dépendent plus que de leur couleur, synchronisée et sans retard. */ .refsbg-grid:hover .ref-col:not(:hover) .ref-inner{opacity:0} /* au survol : on efface TOUS les traits de la grille → image propre */ .refsbg-grid:hover, .refsbg-grid:hover .ref-col{border-color:transparent} /* Le trait VERTICAL entre les deux colonnes n'est pas une bordure mais un pseudo-élément animé (voir .refs-grid .ref-col::before) : la règle ci-dessus ne l'atteignait pas, et il restait seul en travers de l'image. */ .refsbg-grid:hover .ref-col::before{background-color:transparent} /* Colonne de DROITE : contenu calé sur le bord droit (symétrie) → le texte reste du côté ciel et ne tombe plus sur le bâtiment. */ .refsbg-grid .ref-col:nth-child(even){text-align:right} .refsbg-grid .ref-col:nth-child(even) .hb-eyebrow{justify-content:flex-end} .refsbg-grid .ref-col:nth-child(even) .ref-desc{margin-left:auto} /* ═══════════════════════════════════════════════════════════ SECTION FONDATEURS — 10 propositions de switcher (Alix / Julien) ═══════════════════════════════════════════════════════════ */ .hblock--founders{padding:clamp(70px,9vh,120px) 0;display:grid;grid-template-columns:minmax(0,42%) 1fr; align-items:center;background:var(--navy-3);color:var(--cream);overflow:hidden} /* — Portrait gauche (crossfade), hauteur limitée — */ /* Portrait RECTANGULAIRE (3/4, plus étroit que haut) — pas carré */ /* poussée vers la droite (vers la citation) plutôt que centrée → moins de vide à gauche */ .fdr-photo{position:relative;align-self:center;margin:0 clamp(16px,2.5vw,44px) 0 auto; width:min(calc(100% - clamp(28px,4vw,64px)),52vh);aspect-ratio:3/4;min-width:0; overflow:hidden} .fdr-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 20%; opacity:0;transition:opacity .85s ease-in-out} /* Centrage horizontal du visage (photos paysage → seul l'axe X compte) */ .fdr-pic[data-who="alix"]{object-position:36.3% 20%} .fdr-pic[data-who="julien"]{object-position:48.1% 20%} .fdr-pic.is-active{opacity:1} /* — Panneau citation commun — */ .fdr-panel{display:flex;align-items:center;min-width:0;padding:clamp(54px,8vh,110px) clamp(28px,5vw,96px)} .fdr-inner{width:100%;max-width:640px} .fdr-quote{position:relative;margin:clamp(22px,3vh,38px) 0 clamp(26px,3.4vh,42px);padding:0;border:0} /* Grand guillemet signature : le glyphe “ se dessine en HAUT de sa ligne, laissant un grand vide en dessous → on rogne ce vide (height + overflow) pour que le guillemet descende juste au-dessus du texte, avec un petit écart contrôlé. */ .fdr-mark{display:block;font-family:var(--ep);font-weight:400; font-size:clamp(72px,6.8vw,118px);line-height:1;height:.42em;overflow:hidden; color:var(--blue);opacity:.16;margin:0 0 -2px -.04em;pointer-events:none} .fdr-text{font-family:var(--ep);font-weight:200;font-size:clamp(16px,1.6vw,24px); line-height:1.55;color:var(--cream);margin:0;transition:opacity .3s var(--ease),transform .3s var(--ease)} .fdr-text.is-fading{opacity:0;transform:translateY(6px)} .fdr-pick{cursor:pointer;background:none;border:0;font-family:inherit;color:inherit} /* Onglets soulignés (sélecteur Alix / Julien) */ .fdr-tabs{display:flex;gap:clamp(20px,3vw,40px);border-top:1px solid rgba(247,245,243,.12);padding-top:18px} .fdr-tabs .fdr-pick{font-family:var(--ep);font-weight:300;font-size:clamp(16px,1.4vw,20px);color:rgba(247,245,243,.5); padding-bottom:10px;border-bottom:2px solid transparent;transition:color .35s,border-color .35s} .fdr-tabs .fdr-pick.is-active{color:var(--cream);border-bottom-color:var(--blue)} /* Transition « wipe » : Alix dessous (plein), Julien balaie par-dessus */ .fdr7 .fdr-pic{opacity:1} .fdr7 .fdr-pic[data-who="julien"]{clip-path:inset(0 0 0 100%);transition:clip-path .85s var(--ease)} .fdr7 .fdr-pic[data-who="julien"].is-active{clip-path:inset(0 0 0 0)} @media(max-width:920px){ .hblock--founders{grid-template-columns:1fr} .fdr-photo{width:min(100%,64vw);aspect-ratio:3/4;margin:0 var(--pad)} .fdr-panel{padding:clamp(36px,6vh,64px) var(--pad)} } /* — Apparition : les colonnes montent et se révèlent l'une après l'autre. Les TRAITS, eux, ne participent pas à cette cascade — voir plus haut : ils apparaissent tous ensemble dès la première colonne révélée. — */ .refs-grid .ref-col{ border-left:0; /* remplacé par un trait animé (::before) */ transform:translateY(var(--rv-y)); /* Les filets gardent leur durée de fondu et surtout AUCUN retard : la cascade ne concerne que l'arrivée du contenu. */ transition:opacity var(--rv-dur) var(--rv-e) var(--rv-d,0s), transform var(--rv-dur) var(--rv-e) var(--rv-d,0s), border-color var(--fondu) var(--fondu-e) 0s; } .refs-grid .ref-col::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:1px; background-color:rgba(247,245,243,.16); transition:background-color var(--fondu) var(--fondu-e); } /* trait vertical uniquement entre les 2 colonnes (items de droite = pairs) */ .refs-grid .ref-col:nth-child(odd)::before{display:none} .refs-grid .ref-col.in{transform:none} /* révélé → remonte à sa place (sinon resté coincé à translateY(54px)) */ /* Les retards en cascade appartiennent à l'APPARITION (opacité et glissement) et à elle seule : appliqués aussi aux filets, ils les faisaient partir les uns après les autres au survol — d'où l'impression d'un effacement en deux temps. La liste de retards suit l'ordre des propriétés déclarées ci-dessus. */ /* (Échelle propre supprimée — .05/.18/.31/.44 s, soit 130 ms par cran. Les cartes suivent maintenant data-d comme le reste de la page.) */ /* Aucun retard sur le trait vertical : il vit à la même seconde que les horizontaux. C'est le contenu qui se présente l'un après l'autre, pas la grille. */ .refs-grid .ref-col::before{transition-delay:0s} /* — BLOC 3 : publications (3 cartes sur navy) — */ .pubs-inner{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.8vh,38px)} .hblock--pubs{padding-top:clamp(54px,7vh,88px);padding-bottom:clamp(54px,7vh,88px)} .hb-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .hb-head--row .hb-link{margin-top:0} /* « Toutes nos publications » alignée sur le titre, sans décalage */ .hb-alllink{ display:inline-flex;align-items:center;gap:10px;font-family:var(--mu);font-size:14px;font-weight:600; color:var(--blue);transition:gap .25s var(--ease)} .hb-alllink:hover{gap:16px} .hb-alllink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6} /* Publications : 1 « à la une » à gauche + 2 plus petites à droite (équilibré, contrasté) */ .pubs-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(60px,5.5vw,100px);align-items:stretch} .pubc-media{display:block;overflow:hidden;background:var(--cream);border:1px solid rgba(247,245,243,.12)} .pubc-media img{display:block;width:100%;height:100%;object-fit:cover; transition:transform 1s cubic-bezier(.16,.84,.3,1), filter .6s var(--ease)} .pubc:hover .pubc-media img{transform:scale(1.04)} /* carte entièrement cliquable */ .pubc{color:inherit;text-decoration:none;cursor:pointer} /* méta : pastille catégorie (couleur selon le type) + date à côté */ .pubc-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .pubc-tag{display:inline-flex;align-items:center;padding:5px 13px;border-radius:100px; font-family:var(--mu);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .pubc-tag--actu{background:rgba(139,163,217,.18);color:#bfcdf0} /* actualité → bleu */ .pubc-tag--guide{background:rgba(120,172,150,.18);color:#a9d6bd} /* guide → vert sauge */ .pubc-tag--juris{background:rgba(170,158,202,.20);color:#cabce4} /* jurisprudence → lavande */ /* méta : catégorie (bleu) · date (clair, lisible) — pas de pastille colorée */ /* conteneur texte : rythme vertical UNIQUE (même écart entre les 4 blocs), identique gauche & droite */ .pubc-body{display:flex;flex-direction:column;gap:clamp(11px,1.4vh,15px)} .pubc-cat{display:flex;align-items:center;gap:14px;font-family:var(--mu);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0} .pubc-line{width:30px;height:1px;background:var(--blue);opacity:.6;flex:none} /* trait du label (façon eyebrow) */ /* pied de carte : bouton bulle + date discrète */ .pubc-foot{display:flex;align-items:center;gap:22px} .pubc-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 22px; border:1px solid rgba(247,245,243,.28);border-radius:100px; font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cream); transition:background .3s var(--ease),border-color .3s,color .3s,gap .3s} .pubc-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--navy-3);gap:14px} .pubc-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8} .pubc-date{font-family:var(--mu);font-size:12px;letter-spacing:.04em;color:rgba(247,245,243,.5)} .pubc-title{font-family:var(--ep);font-weight:400;color:var(--cream);line-height:1.28;transition:color .3s var(--ease)} .pubc:hover .pubc-title{color:var(--blue)} /* à la une : largeur de carte fixe → image ET texte calés sur la même largeur (alignés) */ .pubc--feat{display:flex;flex-direction:column;gap:clamp(16px,2vh,22px)} /* écart image ↔ bloc texte */ .pubc--feat .pubc-media{aspect-ratio:16/9} /* pleine largeur de la carte → texte aligné dessous */ .pubc--feat .pubc-title{font-size:clamp(19px,1.5vw,25px);margin:0} .pubc-desc{font-family:var(--mu);font-weight:300;font-size:14px;line-height:1.65; color:rgba(247,245,243,.78);max-width:100%;margin:-6px 0 0} /* resserré vers le titre */ .pubc-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mu);font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--cream);transition:gap .3s var(--ease),color .3s var(--ease)} .pubc-link:hover{color:var(--blue);gap:16px} .pubc-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8} /* colonne droite : 2 articles qui remplissent EXACTEMENT la hauteur de la « une ». min-height:0 partout → l'image n'impose plus sa hauteur intrinsèque ; c'est la « une » qui fixe la hauteur, le bas de la 2ᵉ carte tombe pile sur le bas de « Lire l'article ». */ .pubc-side{display:flex;flex-direction:column;min-height:0} .pubc--mini{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,48%) 1fr;gap:24px;align-items:stretch;padding:clamp(14px,2vh,26px) 0} .pubc--mini:first-child{padding-top:0} .pubc--mini:last-child{padding-bottom:0} .pubc--mini + .pubc--mini{border-top:1px solid rgba(247,245,243,.14)} /* image en absolu DANS sa case : elle remplit la case (48% × hauteur carte) sans jamais déborder sur le texte, et n'impose pas sa hauteur intrinsèque à la colonne. */ .pubc--mini .pubc-media{position:relative;height:100%;min-height:0;overflow:hidden} .pubc--mini .pubc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pubc--mini .pubc-body{align-self:center} .pubc--mini .pubc-title{font-size:17px;line-height:1.34} .pubc--mini .pubc-desc{font-size:13px;line-height:1.55;color:rgba(247,245,243,.62);margin:-6px 0 0;max-width:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pubc--mini .pubc-foot{gap:16px} .pubc--mini .pubc-btn{padding:9px 17px;font-size:10px} .pubc--mini .pubc-date{font-size:11px} /* Effet retenu — voile navy au repos → image claire au survol (+ zoom déjà présent) */ .pubc-media img{filter:brightness(.82) saturate(.94)} .pubc:hover .pubc-media img{filter:none} /* — Responsive — */ @media(max-width:920px){ .present-grid{grid-template-columns:1fr;gap:36px} .present-media{height:48vh;order:-1} .refs-grid,.pubs-grid{grid-template-columns:1fr} .pubc--mini{grid-template-columns:120px 1fr;gap:16px} .ref-col{border-left:0;border-top:1px solid rgba(247,245,243,.16);padding:clamp(24px,5vw,34px) 0} /* en colonne unique : plus d'alternance gauche/droite ni de trait vertical */ .refsbg-grid .ref-col:nth-child(even){text-align:left} .refsbg-grid .ref-col:nth-child(even) .hb-eyebrow{justify-content:flex-start} .refsbg-grid .ref-col:nth-child(even) .ref-desc{margin-left:0} .refs-grid .ref-col::before{display:none} .ref-col:first-child{padding-top:clamp(24px,5vw,34px)} .hblock{min-height:auto;padding:clamp(60px,9vh,90px) var(--pad)} } /* ── Hero en flux normal (plus de sticky) : sticky + scroll-snap sont incompatibles (l'élément collé est toujours « en haut » → le crantage ne bloque plus entre hero et bandeau 1). On privilégie le crantage strict → transition nette hero → bandeau. ── */ .hero{position:relative;z-index:0} .hblock--present{position:relative;z-index:2} /* ── Quadrillage très subtil, fondu sur les bords ── */ .grid-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(247,245,243,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(247,245,243,.16) 1px, transparent 1px); background-size:62px 62px;background-position:center; -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 78%); } /* (ancien slide-over obsolète — hblock-inner repassé en static pour le full-bleed photo) */ .hblock--present .hblock-inner{position:static} /* ── En-tête aligné (pleine largeur) : « Le cabinet » à gauche, « Nos clientèles » à droite ── */ .present-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between; gap:24px;padding-bottom:clamp(18px,2.4vh,32px); border-bottom:1px solid rgba(247,245,243,.16)} .present-head .hb-eyebrow{margin-bottom:0} /* annule la marge → alignement parfait sur la ligne */ .present-head-right{color:var(--text-on-navy-soft)} .present-right{display:flex;flex-direction:column;justify-content:center} .present-right-eyebrow{margin-bottom:clamp(18px,2.4vh,28px)} /* ── ACCORDÉON DE CLIENTÈLES (droite) : 4 photos, survol → expansion + descriptif ── */ .clientele{display:flex;gap:6px;height:min(78vh,660px)} /* Traitement repris À L'IDENTIQUE des onglets de la page « Notre savoir-faire » (expertises.css, .xs-tab) : l'image est peinte par un calque dédié — elle peut ainsi être animée —, le voile s'allège au survol d'un panneau fermé, et le panneau ouvert reçoit le même mouvement de caméra très lent. */ .cl-panel{ position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer; background-size:0 0; /* l'image est peinte par ::before */ transition:flex .6s var(--ease); } .cl-panel.is-open{flex:3.6 1 0} .cl-panel::before{content:'';position:absolute;inset:0; background-image:inherit;background-size:cover;background-position:center; transform:scale(1.001);will-change:transform} .cl-panel.is-open::before{animation:clKb 16s ease-in-out infinite alternate} @keyframes clKb{from{transform:scale(1.001)}to{transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){.cl-panel.is-open::before{animation:none}} .cl-panel-scrim{position:absolute;inset:0;pointer-events:none; /* Même voile navy que le hero d'accueil (uniformité), + un renfort en bas pour la lisibilité du label */ background: linear-gradient(180deg, rgba(19,27,42,.50) 0%, rgba(19,27,42,.26) 38%, rgba(19,27,42,.74) 100%), linear-gradient(90deg, rgba(19,27,42,.42) 0%, rgba(19,27,42,.10) 60%, rgba(19,27,42,.28) 100%); transition:opacity .5s var(--ease)} /* TROIS DEGRÉS, et c'est tout le propos : le panneau retenu est le plus clair, celui qu'on survole s'éclaircit un peu, les autres restent dans l'ombre. Sans cet écart, les quatre photos avaient rigoureusement le même voile et rien ne distinguait le choix — seule la largeur parlait. */ .cl-panel.is-open .cl-panel-scrim{opacity:.6} .cl-panel:not(.is-open):hover .cl-panel-scrim{opacity:.8} .cl-panel:not(.is-open):hover .cl-name{color:var(--cream)} .cl-panel-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end; padding:clamp(16px,1.6vw,26px);color:var(--cream);overflow:hidden} /* La TAILLE ne s'anime pas — l'animer faisait repasser le titre de une à deux lignes en cours de route, d'où le rebond. Le changement est masqué par un fondu montant du nom une fois le panneau ouvert : même procédé que le panneau de la page savoir-faire (.xs-panel.is-active), et rien ne saute. */ .cl-name{font-family:var(--ep);font-weight:400;color:var(--cream);margin-top:8px; transition:color .4s var(--ease)} /* PANNEAU FERMÉ : nom à la verticale (la photo est étroite) */ .cl-panel:not(.is-open) .cl-name{writing-mode:vertical-rl;transform:rotate(180deg); white-space:nowrap;font-size:15px;font-weight:300;color:rgba(247,245,243,.9);align-self:center;margin:0 0 6px} /* PANNEAU OUVERT : index + grand nom + descriptif */ @keyframes clNameIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .cl-panel.is-open .cl-name{font-size:clamp(18px,1.6vw,24px);line-height:1.2; animation:clNameIn .5s var(--ease) both} @media(prefers-reduced-motion:reduce){.cl-panel.is-open .cl-name{animation:none}} /* même interligne que .xs-tab.is-active (savoir-faire) */ .cl-desc{font-family:var(--mu);font-weight:300;font-size:13.5px;line-height:1.6;color:var(--text-on-navy-soft); margin-top:12px;max-width:34ch;opacity:0;transform:translateY(10px); transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s} .cl-panel.is-open .cl-desc{opacity:1;transform:none} .cl-panel:not(.is-open) .cl-desc{display:none} /* « Découvrir » : crème au repos, bleu au survol. Aucun filet — le mot est posé sur l'image, un trait de plus alourdirait un panneau déjà chargé. */ .cl-more{font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--cream);margin-top:14px;align-self:flex-start; padding-bottom:4px; opacity:0;transform:translateY(10px); transition:opacity .45s var(--ease) .18s,transform .45s var(--ease) .18s,color .3s} .cl-more:hover,.cl-more:focus-visible{color:var(--blue)} .cl-panel.is-open .cl-more{opacity:1;transform:none} .cl-panel:not(.is-open) .cl-more{display:none} @media(max-width:920px){ .clientele{height:auto;flex-direction:column} .cl-panel{height:120px} .cl-panel.is-open{flex:none;height:280px} .cl-panel:not(.is-open) .cl-name{writing-mode:horizontal-tb;transform:none;align-self:flex-start} } /* ═══════════════════════════════════════════════════════════ INTRO CINÉMATIQUE — révélation au masque (1×/session) Écran navy + logo, puis le panneau se referme sur une ligne centrale pour dévoiler le hero. Masqué d'emblée si déjà vue (.intro-done) ou si l'utilisateur préfère moins d'animations. ═══════════════════════════════════════════════════════════ */ #intro{ position:fixed;inset:0;z-index:9999;background-color:var(--navy-3); display:flex;align-items:center;justify-content:center; will-change:background-color; } .intro-logo{width:340px;max-width:62vw;opacity:0;transform:translateY(10px); transform-origin:center center; transition:opacity .7s var(--ease), transform .95s cubic-bezier(.62,.04,.18,1);} #intro.show .intro-logo{opacity:1;transform:none} /* révélation : le fond navy se dissout pendant que le logo glisse vers la barre de nav (le transform exact translate+scale est calculé puis posé en inline par le JS). */ #intro.reveal{background-color:transparent;transition:background-color .9s var(--ease) .15s} /* Pendant l'intro, le vrai logo de la nav est masqué (visibility = bascule instantanée, pas de fondu) → on ne voit QUE le logo voyageur ; il est révélé pile quand celui-ci s'est posé. */ .intro-active .nav-logo{visibility:hidden} /* (intro-done non utilisé pour le hero ; conservé par sécurité) */ .intro-done #intro{display:none} @media(prefers-reduced-motion:reduce){#intro{display:none}} /* ═══════════════════════════════════════════════════════════ SCROLL-SNAP (crantage) — desktop : on est toujours calé soit sur le hero, soit sur un bandeau, jamais entre les deux. (Désactivé en mobile : blocs auto.) ═══════════════════════════════════════════════════════════ */ @media (min-width: 921px){ /* Crantage STRICT — UNIQUEMENT sur l'accueil (pages à bandeaux .hblock) : impossible de s'arrêter entre deux bandeaux, on est toujours poussé vers l'un ou l'autre. :has(.hblock) cible l'accueil seul (sinon le snap + .footer:snap-align:end ferait scroller les autres pages vers le footer). */ html:has(.hblock){ scroll-snap-type: y mandatory; } html:has(.hblock) .hero, html:has(.hblock) .hblock, html:has(.hblock) .cta-prefooter{ scroll-snap-align: start; } html:has(.hblock) .footer{ scroll-snap-align: end; } /* Autres pages (sans bandeaux .hblock) : pas de crantage strict sur tout le scroll, mais le PANNEAU FINAL (.site-end) reste le seul point d'ancrage → en approchant du bas on est aspiré pile sur le duo CTA + footer, sans figer la lecture du reste de la page. */ html:not(:has(.hblock)){ scroll-snap-type: y proximity; } } /* "Défiler" du bandeau cabinet : au-dessus du quadrillage/accordéon */ .hblock--present .hero-scroll{z-index:3} /* ═══════════════════════════════════════════════════════════ PAGE PROFIL AVOCAT — /alix-brechet, /julien-benoit Portrait sticky à gauche + rubriques à droite (mêmes rubriques que l'ancien popup, en pleine page). Fond navy plein écran. ═══════════════════════════════════════════════════════════ */ .prof{ background:var(--navy-3);color:var(--cream); min-height:100vh; padding:clamp(150px,20vh,230px) var(--pad) clamp(80px,10vh,120px); } .prof-back{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(247,245,243,.5);transition:color .3s,gap .3s var(--ease); margin-bottom:clamp(36px,6vh,64px); } .prof-back:hover{color:var(--blue);gap:16px} .prof-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* fil d'Ariane des pages profil : à la marge de page, comme les heros */ /* spécificité .prof .prof-crumb OBLIGATOIRE : le CSS de page (chargé après) redéfinit .page-hero-breadcrumb{margin-bottom:20px} et écraserait la marge */ .prof .prof-crumb{margin-bottom:clamp(48px,7.5vh,88px)} /* le CONTENU reste centré (bloc de lecture) ; seul le fil d'Ariane ci-dessus est calé sur la marge de page */ .prof-grid{ display:grid;grid-template-columns:minmax(280px,340px) 1fr; gap:clamp(44px,6vw,110px);align-items:start; max-width:1240px;margin-inline:auto; } /* colonne photo/nom statique : elle défile avec la page (plus de sticky) */ .prof-aside{position:static} .prof-photo{ position:relative;width:100%;aspect-ratio:4/5;overflow:hidden; margin-bottom:30px; } .prof-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12)} .prof-role{ font-family:var(--mu);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:12px; } .prof-name{ font-family:var(--ep);font-weight:300;font-size:clamp(19px,1.9vw,27px);line-height:1.05; color:var(--cream);margin:0 0 26px; } .prof-links{display:flex;gap:12px} .prof-links a{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(247,245,243,.16);color:rgba(247,245,243,.55); transition:background .3s,border-color .3s,color .3s; } .prof-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--navy)} .prof-links svg{width:18px;height:18px} .prof-links a[aria-label="LinkedIn"] svg{fill:currentColor;stroke:none} .prof-links a[aria-label="Email"] svg, .prof-links a[aria-label="Téléphone"] svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .prof-body{max-width:660px} .prof-sec{ padding-bottom:clamp(26px,3.4vh,42px); margin-bottom:clamp(26px,3.4vh,42px); border-bottom:1px solid rgba(247,245,243,.1); } .prof-sec:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} .prof-sec-title{ font-family:var(--mu);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin:0 0 16px; } .prof-text{ font-family:var(--mu);font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.8; color:rgba(247,245,243,.72);max-width:68ch; } .prof-text + .prof-text{margin-top:12px} .prof-tags{display:flex;flex-wrap:wrap;gap:10px} .prof-tag{ font-family:var(--mu);font-size:13px;font-weight:400; padding:9px 18px;border-radius:100px; border:1px solid rgba(247,245,243,.16);color:rgba(247,245,243,.72); transition:border-color .3s,color .3s; } .prof-tag:hover{border-color:var(--blue);color:var(--blue)} @media(max-width:860px){ .prof-grid{grid-template-columns:1fr;gap:36px} .prof-aside{position:static;max-width:420px} .prof-photo{aspect-ratio:4/5} } /* ═══ SECTION 05 ACCUEIL — publications en ÉDITORIAL PUR, même forme que la page Actualités : filets 1px, étiquette accent, titre Epilogue, extrait borné, flèche cerclée. Plus d'images. ═══ */ .pubs-list{display:grid;grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,3vw,56px)} .pube{display:block;min-width:0;color:inherit;text-decoration:none; border-top:1px solid rgba(247,245,243,.12); padding:clamp(18px,2.6vh,26px) 0 clamp(20px,3vh,30px); transition:opacity .45s var(--ease)} .pubs-list:hover .pube:not(:hover){opacity:.55} .pube-meta{display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:12px} .pube-tag{font-family:var(--mu);font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .pube-date{font-family:var(--mu);font-size:11px;font-weight:300; letter-spacing:.08em;color:rgba(247,245,243,.4);white-space:nowrap} .pube-title{font-family:var(--ep);font-weight:400; font-size:clamp(16px,1.3vw,20px);line-height:1.3;color:var(--cream); margin:0 0 10px;transition:color .3s} .pube:hover .pube-title{color:var(--accent)} .pube-desc{font-family:var(--mu);font-weight:300; font-size:clamp(13px,1vw,14.5px);line-height:1.65; color:rgba(247,245,243,.6);margin:0 0 16px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pube-bottom{display:flex;align-items:center;justify-content:space-between} .pube-author{font-family:var(--mu);font-size:11px;font-weight:300; letter-spacing:.06em;color:rgba(247,245,243,.4)} .pube-arrow{width:30px;height:30px;border-radius:50%; border:1px solid rgba(247,245,243,.15);display:flex;align-items:center; justify-content:center;color:rgba(247,245,243,.5); transition:all .35s var(--ease)} .pube-arrow svg{width:13px;height:13px;stroke:currentColor;fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pube:hover .pube-arrow{background:var(--accent);border-color:var(--accent);color:var(--navy)} @media(max-width:900px){.pubs-list{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════ LA VEILLE — mise en avant sur l'accueil (2 variantes A/B) ═══════════════════════════════════════════════════════════════ */ /* — Variante A : carte « live » compacte sur le hero (bas droite, 2 brèves) [Accueil] — */ .hero-veille{position:absolute;right:var(--pad);bottom:clamp(48px,8vh,84px);z-index:3; width:min(330px,25vw);display:flex;flex-direction:column; /* padding UNIFORME 16px sur les 4 côtés : marge haute (bord→titre) = marge basse (bas du dernier texte→bord) → symétrie parfaite. 16 (vs 15 d'origine) porte la carte à +4px au total avec l'écart titre→brève élargi (.hv-top). Le bas du trait, lui, tombe pile au bas des jambages du dernier texte via la hauteur de fenêtre calculée dans home.js (clip = overflow:hidden). */ padding:16px;text-decoration:none; background:rgba(19,27,42,.38);border:1px solid rgba(247,245,243,.12); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); opacity:0;translate:0 12px; transition:opacity .9s var(--ease) .9s,translate .9s var(--ease) .9s,border-color .3s} .hero-veille.is-on{opacity:1;translate:0 0} .hero-veille:hover{border-color:rgba(191,205,240,.5)} /* « Toute la veille » : centré sur le milieu de « Veille fiscale » */ .hv-top{display:flex;align-items:center;gap:8px;padding-bottom:12px} /* titre « Veille fiscale » — même registre que /publications et /veille : Epilogue fin, « fiscale » en bleu */ .hv-title{font-family:var(--ep);font-weight:300;font-size:17px;line-height:1; letter-spacing:-.01em;color:var(--cream)} .hv-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)} /* « Toute la veille » — même registre que « Voir toute la veille » (/publications) : petites capitales gris, passage bleu + soulignement au survol */ /* MÊME traitement que « Voir toute la veille » (Ressources) : petites capitales grises, passage accent au survol — pas de soulignement */ /* align-items:center du rang + line-heights natifs : les milieux d'encre de « Veille fiscale » et « Toute la veille » coïncident (vérifié à 0,4px près) */ .hv-more{margin-left:auto;font-family:var(--mu);font-size:9px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,243,.45); text-decoration:none;transition:color .3s} .hv-more:hover{color:var(--accent)} /* la fenêtre de clip déborde de 15px à gauche (marge négative compensée) : l'onde du nœud de tête (halo 11px) n'est plus rognée par overflow:hidden */ .hv-items{display:block;overflow:hidden;margin-left:-15px;padding-left:15px;position:relative} /* RAIL de timeline : FIXE sur le conteneur visible (ne défile pas avec la pile → aucun glitch au changement de brève). top = 1er nœud ; le bas du trait est remonté de 3px (≈ la descente de la police) pour finir PILE sur la LIGNE DE BASE du dernier texte (bas visuel des lettres), et non au niveau des jambages (ce qui le faisait paraître dépasser sous le texte). Le clip, lui, reste plus bas (voir home.js) pour ne pas couper les jambages. Les nœuds défilent dessus. */ .hv-items::before{content:'';position:absolute;left:19px;top:12px;bottom:3px;width:1px; background:rgba(191,205,240,.5);pointer-events:none;z-index:1} /* Rappel de la timeline de la veille (page Ressources) : trait vertical + un nœud par brève. Trait et nœuds vivent DANS la pile → ils défilent avec elle (même langage éditorial, sans séparateurs de lignes). */ .hv-track{display:flex;flex-direction:column;will-change:transform;position:relative;padding-left:20px} /* (rail déplacé sur .hv-items — fixe, ne défile plus) */ /* chaque brève est un LIEN (article du site si data pubUrl, sinon la source) — même anatomie que le fil de /publications : date, texte, source dessous */ .hv-item{position:relative;display:flex;flex-direction:column;gap:3px;padding:7px 0; text-decoration:none;color:inherit;transition:opacity .35s ease} /* nœuds PLEINS d'une seule couleur — mêmes teintes que la page /veille : accent translucide, bleu plein pour la brève de tête, accent au survol */ .hv-item::before{content:'';position:absolute;left:-19px;top:12px;transform:translateY(-50%); width:7px;height:7px;border-radius:50%;background:rgba(139,163,217,.5); transition:background .3s} /* le nœud du haut (brève la plus récente affichée) : cœur bleu + onde-anneau IDENTIQUE à celle de « Voir toute la veille » / Ressources (opsPulse) */ .hv-item:first-child::before{background:var(--blue)} .hv-item::after{content:'';position:absolute;left:-19px;top:12px; width:7px;height:7px;border-radius:50%;transform:translateY(-50%); pointer-events:none;opacity:0;border:1px solid var(--blue)} .hv-item:first-child::after{animation:hvPing 3.2s ease-out infinite} /* au survol, l'onde SUIT la souris : elle passe sur la brève survolée… */ .hv-item:hover::before{background:var(--accent)} .hv-item:hover::after{border-color:var(--accent);animation:hvPing 3.2s ease-out infinite} /* …et les nœuds non survolés redeviennent TOUS identiques (couleur de base, sans onde) */ .hv-track:has(.hv-item:hover) .hv-item:not(:hover)::before{background:rgba(139,163,217,.5)} .hv-track:has(.hv-item:hover) .hv-item:first-child:not(:hover)::after{animation:none;opacity:0} /* mêmes keyframes que opsPulse (Ressources), avec le translateY de centrage en plus */ @keyframes hvPing{0%{transform:translateY(-50%) scale(1);opacity:.7} 70%{transform:translateY(-50%) scale(3.4);opacity:0}100%{opacity:0}} /* au survol d'une brève, les autres s'estompent — même langage que /publications */ .hv-track:has(.hv-item:hover) .hv-item:not(:hover){opacity:.45} /* rang méta compact : date + source sur la MÊME ligne (gain de place propre à cette carte ; ailleurs la source reste sous le texte) */ .hv-meta{display:flex;align-items:baseline;gap:9px; font-family:var(--mu);font-size:9px;font-weight:700;letter-spacing:.12em; line-height:1;text-transform:uppercase;color:rgba(247,245,243,.38)} /* texte en Mulish 300 — même fonte et même teinte que les brèves de la vraie veille (/veille : .vl-text) */ .hv-txt{font-family:var(--mu);font-weight:300;font-size:12.5px;line-height:1.5; color:rgba(247,245,243,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; height:calc(2 * 1.5em); /* hauteur FIXE (2 lignes exactes) → tous les items ont la même hauteur, défilement au pixel */ transition:color .3s} .hv-item:hover .hv-txt{color:var(--cream)} .hv-src{font-family:var(--mu);font-size:9px;font-weight:600;letter-spacing:.12em; line-height:1;text-transform:uppercase;color:var(--accent)} @keyframes veillehPulse{0%{box-shadow:0 0 0 0 rgba(191,205,240,.55)}70%{box-shadow:0 0 0 11px rgba(191,205,240,0)}100%{box-shadow:0 0 0 0 rgba(191,205,240,0)}} @media(max-width:1000px){.hero-veille{display:none}} /* — Variante 2 : ticker « live » sous le hero [Accueil bis] — */ .vtick{display:flex;align-items:stretch;background:var(--navy-3); border-top:1px solid rgba(247,245,243,.08);border-bottom:1px solid rgba(247,245,243,.08); height:clamp(48px,6vh,58px);overflow:hidden;position:relative;z-index:2} .vtick-live{display:inline-flex;align-items:center;gap:9px;flex:none;padding:0 clamp(18px,2vw,30px);z-index:2; background:var(--navy-3);border-right:1px solid rgba(247,245,243,.08); font-family:var(--mu);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)} .vtick-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:veillehPulse 2.6s ease-out infinite} .vtick-vp{flex:1;min-width:0;overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 93%,transparent); mask-image:linear-gradient(to right,transparent,#000 5%,#000 93%,transparent)} .vtick-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;height:100%;width:max-content; animation:vtickScroll var(--vtick-dur,40s) linear infinite} .vtick:hover .vtick-track{animation-play-state:paused} @keyframes vtickScroll{from{transform:translateX(0)}to{transform:translateX(calc(var(--vtick-dist,1000px) * -1))}} .vtick-item{flex:none;display:flex;align-items:center} .vtick-item a{display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;padding:0 clamp(26px,3vw,52px);position:relative} .vtick-item a::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(247,245,243,.14)} .vtick-src{font-family:var(--mu);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);white-space:nowrap;flex:none} .vtick-txt{font-family:var(--mu);font-size:13px;font-weight:300;color:rgba(247,245,243,.82);white-space:nowrap;transition:color .25s} .vtick-item a:hover .vtick-txt{color:var(--cream)} .vtick-all{flex:none;display:inline-flex;align-items:center;padding:0 clamp(18px,2vw,28px);z-index:2; background:var(--navy-3);border-left:1px solid rgba(247,245,243,.08); font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--cream);white-space:nowrap;transition:color .25s} .vtick-all:hover{color:var(--blue)} @media(max-width:720px){.vtick-all{display:none}} /* — Ticker INTÉGRÉ AU HERO (variante B, Accueil bis) : overlay translucide en bas — */ .vtick--hero{position:absolute;left:0;right:0;bottom:0;z-index:3; background:rgba(19,27,42,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:0;border-top:1px solid rgba(247,245,243,.12)} .vtick--hero .vtick-live,.vtick--hero .vtick-all{background:transparent} .hero--vtick .hero-scroll{bottom:calc(clamp(48px,6vh,58px) + 26px)} /* le « Défiler » remonte au-dessus du ticker */ /* Bouton « Espace avocat » : jamais sur 2 lignes ; masqué sur téléphone (reste accessible via le lien du menu burger). */ .nav-contact{white-space:nowrap} /* Sur téléphone, le bouton reste masqué même menu ouvert (barre étroite) — le lien « Espace avocats » de l'aside du menu suffit. */ @media(max-width:600px){.nav-contact,body.locked .nav-contact{display:none}} /* ══════════════════════════════════════════════════ SOMMAIRE DU HERO — bouton premium repliable + arborescence. Placé juste sous le fil d'ariane. Fermé par défaut : un petit bouton discret ; au clic, l'arbre se déplie — le tronc se dessine et les branches apparaissent une à une, cliquables. Le DOM (bouton, panneau, tronc) est construit par /js/hero-sommaire.js à partir du markup .hero-som/.hsa-item existant. Mutualisé (Ressources, Expertises, Clients…). ══════════════════════════════════════════════════ */ @keyframes somFadeUp{to{opacity:1;transform:none}} .hero-som a{color:inherit;text-decoration:none} /* — déclencheur : simple icône discrète, insérée dans le fil d'ariane juste après le dernier segment (« Ressources »). Pas de pilule, pas de libellé (aria-label sur le bouton). Le libellé du sommaire est conservé pour les lecteurs d'écran. */ .hsa-toggle{display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;margin-left:-6px;padding:0;flex:none;vertical-align:middle; /* rapproché du dernier segment (compense le gap:8px du fil d'ariane) */ background:none;border:0;border-radius:6px;cursor:pointer; color:rgba(247,245,243,.38);-webkit-appearance:none;appearance:none; transition:color .3s var(--ease),background .3s var(--ease); opacity:0;animation:somFadeUp .7s var(--ease) .55s forwards} .hsa-toggle:hover{color:var(--accent);background:rgba(126,167,255,.1)} .hsa-toggle:focus-visible{outline:none;color:var(--accent);box-shadow:0 0 0 3px rgba(126,167,255,.22)} .hsa-toggle.is-active{color:var(--accent)} /* chevron « › » fixe (pointe vers la suite, à droite) : PAS de rotation — le déploiement se fait vers la droite, un retournement vers le bas serait incohérent. L'état ouvert est signalé par la couleur accent (.is-active). */ .hsa-toggle-ic{width:14px;height:14px;flex:none} /* — panneau : ancré en absolu, centré VERTICALEMENT sur l'icône (top + left calés en JS) et déployé vers la droite. Absolu → aucun décalage du titre. Les branches se répartissent symétriquement de part et d'autre de l'icône (une au-dessus, une en dessous), pas en bloc vers le bas. */ .hsa-panel{position:absolute;left:0;z-index:5;width:max-content; transform:translateY(-50%); text-transform:none;letter-spacing:normal; /* annule l'héritage du fil d'ariane */ pointer-events:none;visibility:hidden; transition:visibility 0s linear .55s} .hsa-panel.is-open{pointer-events:auto;visibility:visible;transition:visibility 0s} /* — entrées EN LIGNE : elles prolongent le fil d'ariane sur la MÊME ligne, au même format (capitales, mono, interlettrage). PAS de séparateur : le NUMÉRO ouvre chaque entrée et fait office de repère ; un large espace entre entrées (bien supérieur à l'écart numéro↔libellé) crée le rythme. Apparition une par une. */ .hsa-tree{position:relative;display:flex;align-items:center; gap:clamp(13px,1.1vw,17px);white-space:nowrap} /* resserré : rythme proche du fil d'ariane */ /* .hsa-panel .hsa-item : spécificité > .page-hero-breadcrumb a (les entrées sont des DANS le fil d'ariane, sinon elles héritent son gris .35) */ .hsa-panel .hsa-item{display:inline-flex;align-items:baseline;gap:5px; /* numéro collé au libellé : « 01 NOS PUBLICATIONS » se lit d'un bloc */ font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:rgba(247,245,243,.35); /* MÊME gris que « ACCUEIL » au repos */ opacity:0;transform:translateX(-8px); transition:opacity .45s var(--ease) var(--d,0s),transform .45s var(--ease) var(--d,0s),color .3s} .hsa-panel.is-open .hsa-item{opacity:1;transform:none} .hsa-panel .hsa-item:hover{color:var(--accent)} /* survol → MÊME couleur que « RESSOURCES » (--accent) */ .hsa-num{display:inline-block;font-variant-numeric:tabular-nums;color:inherit} /* même couleur que le libellé */ .hsa-label{color:inherit} /* mobile : plus de place pour une ligne → le panneau se pose SOUS le fil d'ariane (aligné à gauche → aucun chevauchement) et les entrées s'empilent. */ @media(max-width:760px){ .hsa-panel{top:100%!important;left:0!important;transform:none!important;margin-top:12px} .hsa-tree{flex-direction:column;align-items:flex-start;gap:9px} .hsa-panel .hsa-item{padding:2px 0} } @media(prefers-reduced-motion:reduce){ .hsa-toggle,.hsa-item,.hsa-panel{animation-duration:.001s!important;transition-duration:.001s!important} } /* ═══ Suppression des petits traits décoratifs (eyebrows, héros, labels) ═══ Trait horizontal accolé aux sur-titres / titres de héros : retiré sur tout le site. !important pour l'emporter sur les CSS de page (page-hero-line, etc.) et sur les états :hover. Les éléments restent dans le DOM mais sans rendu. */ .hb-eyebrow-line, .page-hero-line, .dist-eyebrow-line, .insights-eyebrow-line, .art-key-points-label-line, .bld-phase-line, .pubc-line, .cl-divider-line{ display:none !important; } /* Trait bleu qui se dessinait devant les valeurs au survol (accueil) */ .values-t::before{ content:none !important; } /* ═══════════════════════════════════════════════════════════════════════ ACCUEIL SUR TÉLÉPHONE — refonte ─────────────────────────────────────────────────────────────────────── Trois des cinq bandeaux de l'accueil étaient bâtis sur le SURVOL : les expertises s'ouvraient au survol, les références révélaient leur image au survol, les valeurs affichaient leur texte au survol. Or le survol n'existe pas au doigt. Résultat sur téléphone : des photos muettes, des textes à moitié effacés et des descriptions jamais lues. Ce bloc rétablit, pour les appareils tactiles, ce que le survol donne à la souris — tout est lisible d'emblée — et resserre la typographie et les respirations à l'échelle d'un écran de 375 px. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. CE QUI DÉPEND DU SURVOL : rendu inconditionnel au doigt ────────── */ @media (hover:none){ /* Bandeau 01 — expertises : quatre cartes empilées, ouvertes en permanence. L'accordéon (une photo large, trois tranches) demande un survol pour se lire ; au doigt il ne montrait que quatre bandes verticales illisibles. */ .clientele{height:auto;flex-direction:column;gap:10px} .cl-panel{flex:none;height:auto;min-height:170px} .cl-panel-body{position:relative;inset:auto;padding:22px} .cl-panel:not(.is-open) .cl-name, .cl-panel.is-open .cl-name{writing-mode:horizontal-tb;transform:none; align-self:flex-start;white-space:normal;margin:0; font-size:20px;font-weight:400;color:var(--cream);animation:none} .cl-panel .cl-desc, .cl-panel:not(.is-open) .cl-desc{display:block;opacity:1;transform:none; margin-top:8px;max-width:none} .cl-panel .cl-more, .cl-panel:not(.is-open) .cl-more{display:inline-flex;opacity:1;transform:none;margin-top:14px} /* le voile reste plein : le texte passe par-dessus la photo sans halo */ .cl-panel .cl-panel-scrim, .cl-panel.is-open .cl-panel-scrim{opacity:1} .cl-panel.is-open::before{animation:none} /* pas de Ken Burns au doigt : batterie */ /* Bandeau 02 — références : le texte était à 50 % d'opacité en attendant un survol qui ne vient jamais, et les descriptions restaient masquées. */ .ref-inner{opacity:1} .ref-desc{opacity:1;transform:none} .ref-eyebrow{color:var(--blue)} .ref-title em{color:var(--blue)} /* Bandeau 03 — valeurs : les quatre descriptions se lisent, aucune valeur n'est estompée, et les filets restent en place (ils ne servaient qu'à accompagner le survol). */ .values-d{opacity:1;transform:none} .values-t{transform:none !important} .values-item{opacity:1 !important} /* Le liseré voyageur suppose une valeur lue : au doigt, elles le sont toutes. On retire le trait ET sa gouttière, pour que les valeurs restent alignées sur le titre et le chapô. */ .values-list{padding-left:0} .values-list::before{display:none} /* Bandeau 05 — publications : plus de mise en retrait des voisines. */ .pubs-list .pube{opacity:1 !important} /* ZONES TOUCHABLES : les liens du site sont des mots soulignés de 20 à 24 px de haut — bien en dessous des 44 px qu'un doigt vise sans se tromper. On n'agrandit pas le texte, on agrandit la zone : le rendu ne bouge pas. */ a.hero-cta,a.hb-link,a.cl-more,a.cta-pf-btn,a.hb-alllink, .fdr-pick,.hv-more{min-height:44px;display:inline-flex;align-items:center} /* liens de pied de page et de menu : un peu d'air vertical, sans desserrer la composition au point de la déformer */ .footer-col a,.footer-legal a{padding-block:11px;margin-bottom:2px} /* 44 px de zone touchable, sans doubler d'une marge */ /* les liens légaux passent à la ligne PAR LIEN, jamais au milieu d'un mot */ .footer-bottom-links{flex-wrap:wrap;justify-content:center;column-gap:22px;row-gap:0} .footer-bottom-links a{white-space:nowrap} } /* ── 2. TÉLÉPHONE : échelle typographique et respirations ──────────────── */ @media (max-width:620px){ /* Hauteur d'écran : svh et non vh — sinon la barre d'adresse mobile ampute le hero au chargement puis le fait sauter au premier défilement. */ .hero{min-height:100svh} .hero-content{max-width:none;padding:0} /* 36 px sur une colonne de 327 px cassait les trois lignes composées en quatre ou cinq : « Cabinet partenaire » passait à la ligne au milieu. */ .hero-h1{font-size:clamp(28px,8.2vw,34px);line-height:1.14;margin-bottom:24px} .hero-tags{gap:8px;margin-bottom:30px} .hero-tag{font-size:10.5px;letter-spacing:.1em;padding:9px 15px} .hero-scroll{display:none} /* le geste est évident au doigt */ /* Bandeaux : moins de blanc perdu en haut et en bas */ .hblock{padding:clamp(52px,7.5vh,72px) var(--pad)} .hb-title{font-size:clamp(25px,7.4vw,30px);line-height:1.18} /* le jeton descend d'un cran au format téléphone → TOUS les chapôs suivent, et non plus le seul .hb-lead comme c'était le cas */ :root{--chapo-taille:14.5px;--chapo-interligne:1.72} .hb-num{margin-bottom:14px} .present-grid{gap:28px} /* Expertises : la carte respire, le nom ne dépasse jamais deux lignes */ .cl-panel{min-height:160px} .cl-panel-body{padding:20px} .cl-desc{font-size:13px;line-height:1.55} /* Références : une colonne, filets fins, titres resserrés */ .ref-col{padding:22px 0} .ref-title{font-size:19px;line-height:1.2;margin-bottom:10px} .ref-desc{font-size:13.5px;line-height:1.6} .refs-head{gap:18px} .refs-head-main{text-align:left} .refs-head-main .hb-num{justify-content:flex-start} /* Valeurs : la section faisait 1 427 px — une photo de 46 vh puis quatre valeurs très espacées. Photo ramenée à une bande, valeurs resserrées. */ .values-photo{height:34vh;min-height:210px} .values-panel{padding:clamp(38px,6vh,54px) var(--pad)} .values-item{padding:18px 0;gap:16px} .values-t{font-size:18px} .values-d{font-size:13.5px;line-height:1.6} .values-lead{font-size:14.5px;line-height:1.7} /* Fondateurs : citation lisible sans devenir un mur */ .fdr-photo{width:min(100%,72vw)} .fdr-text{font-size:16.5px;line-height:1.5} .fdr-panel{padding:clamp(32px,5vh,48px) var(--pad)} /* Publications : les cases « À venir » sont des promesses vides — sur un écran d'ordinateur elles tiennent la grille, sur téléphone elles font deux pleines hauteurs de navy sans rien dedans. On ne montre que les articles réels. */ .pub-card.pub-card--soon{display:none!important} /* pub-tiles.css, chargée après, la remettait en flex */ .pube{padding:16px 0 20px} .pube-title{font-size:17px;line-height:1.25} /* Les photos des bandeaux 03 et 04 vont bord à bord : une image en pleine largeur est une respiration ; encadrée de marges, une vignette. */ .values-photo{margin-inline:calc(-1 * var(--pad));height:38vh;min-height:240px} .fdr-photo{width:auto;margin:0 calc(-1 * var(--pad));aspect-ratio:4/5} /* Pré-footer */ .cta-prefooter{padding:clamp(48px,7vw,72px) var(--pad)} } /* ── 3. TRÈS PETITS ÉCRANS (≤ 380 px) ──────────────────────────────────── */ @media (max-width:380px){ .hero-h1{font-size:27px} .hero-tag{font-size:10px;padding:8px 13px} .cl-panel:not(.is-open) .cl-name, .cl-panel.is-open .cl-name{font-size:18.5px} } }