:root{--navy:#11317a;--blue:#1953c8;--blue-d:#1846b0;--yellow:#f5d65a;--yellow-d:#f2c230;--ink:#101418;--body:#444b54;--muted:#7c8894;--bg:#ffffff;--soft:#f6f7f4;--soft2:#eef0ea;--line:#e4e6e2;--disp:"Archivo",system-ui,sans-serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--max:1640px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--sans);background:var(--bg);color:var(--body);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);line-height:1.1;letter-spacing:-.02em}img{max-width:100%;height:auto;display:block}.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(1.5rem,5vw,5rem)}.eyebrow{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}.btn{display:inline-flex;align-items:center;gap:.55em;background:var(--blue);color:#fff;padding:.9em 1.6em;border-radius:8px;font-weight:600;font-size:.95rem;font-family:var(--sans);border:0;cursor:pointer;transition:.2s}.btn:hover{background:var(--blue-d);transform:translateY(-1px)}.btn--light{background:#fff;color:var(--blue)}.btn--light:hover{background:var(--soft)}.topbar{background:var(--yellow);color:var(--navy);font-size:.78rem;font-weight:600}.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:1rem}.topbar__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar__type{flex:1;text-align:center;font-family:var(--disp);font-weight:800;letter-spacing:.12em;display:flex;align-items:center;justify-content:center;gap:1px}.topbar__type .tw{color:var(--navy)}.topbar__type .tw__cursor{color:var(--blue);animation:blink 1s step-end infinite;font-weight:700}@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}.topbar .social{flex:1;display:flex;gap:1rem;align-items:center;justify-content:flex-end}.topbar a:hover{color:var(--blue)}.topbar .lang a{margin-left:.5rem;font-weight:700}.topbar .lang a.on{color:var(--blue)}@media(max-width:880px){.topbar__type{display:none}}@media(max-width:620px){.topbar__name{font-size:.7rem}}.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:2rem}.logo{display:flex;align-items:center;gap:.5rem;flex:none}.logo__stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.logo__img{height:44px;width:auto;display:block}.logo__slogan{display:flex;align-items:center;gap:9px;white-space:nowrap;border-left:3px solid var(--bar,#f5b81e);padding-left:9px;margin-left:2px}.logo__slogan .sl-txt{font-family:var(--disp);font-weight:700;font-size:.56rem;letter-spacing:.14em;color:var(--sl,#11317a)}.logo__slogan .sl-d{margin:0 .35em;font-size:.5em;vertical-align:middle}.logo__slogan .sl-line{height:1px;width:34px;background:var(--line,#e4e6e2)}@media(max-width:560px){.logo__slogan{display:none}}@media(max-width:520px){.logo__slogan{display:none}}.logo svg{width:38px;height:38px}.logo b{font-family:var(--disp);font-weight:800;font-size:1.55rem;letter-spacing:-.03em;color:var(--navy)}.logo b i{color:var(--blue);font-style:normal}.nav{display:none;gap:1.5rem;font-size:.92rem;font-weight:500}.nav a{color:var(--ink);padding-block:.4rem;position:relative;transition:color .2s}.nav a:hover,.nav a.on{color:var(--blue)}.hdr .btn{display:none}.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;flex:none}.burger span{display:block;height:2.5px;width:100%;background:var(--navy);border-radius:2px;transition:.25s}.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(2){opacity:0}.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}@media(min-width:1120px){.nav{display:flex}.hdr .btn{display:inline-flex}.burger{display:none}}@media(max-width:1119px){.nav{position:fixed;top:118px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem 0;box-shadow:0 14px 30px rgba(13,36,56,.12);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s;max-height:calc(100vh - 118px);overflow-y:auto}.nav.open{display:flex;transform:none;opacity:1;pointer-events:auto}.nav a{padding:.95rem clamp(1.25rem,4vw,2.5rem);font-size:1.05rem;width:100%;border-bottom:1px solid var(--soft2)}.nav a:last-child{border-bottom:0}}.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;min-height:92vh;display:flex;align-items:center}.hero__photo{position:absolute;inset:0;z-index:0}.hero__photo img{width:100%;height:100%;object-fit:cover}.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(13,28,56,.94) 0%,rgba(17,49,122,.82) 45%,rgba(17,49,122,.45) 100%)}.hero__bg{position:absolute;inset:0;z-index:1;opacity:.5;transition:transform .2s ease-out;mix-blend-mode:soft-light}.hero__bg svg{width:100%;height:100%}.hero .wrap{position:relative;z-index:2;padding-block:clamp(5rem,11vw,9rem);width:100%}.hero__grid{display:grid;gap:4rem;align-items:center}@media(min-width:920px){.hero__grid{grid-template-columns:1.2fr .8fr}}.hero h1{color:#fff;font-size:clamp(3rem,7.5vw,6rem);font-weight:800;line-height:.98;text-shadow:0 2px 30px rgba(0,0,0,.25)}.hero h1 span{color:var(--yellow)}.hero__tick{display:block;width:170px;height:9px;margin:1.5rem 0 0;background:repeating-linear-gradient(135deg,var(--yellow),var(--yellow) 6px,var(--yellow-d) 6px,var(--yellow-d) 12px);border-radius:2px}.hero__sub{margin-top:1.3rem;font-size:clamp(1.05rem,1.7vw,1.3rem);color:#d4dcec;max-width:34ch;font-weight:500}.hero__act{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}.hero__panel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:2rem;backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.3)}.hero__panel h4{color:#fff;font-size:.95rem;margin-bottom:1.3rem;font-weight:600}.hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}.hero__stats .n{font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}.hero__stats .l{font-size:.74rem;color:#d4dcec;margin-top:.4rem}.phead{position:relative;background:var(--navy);color:#fff;overflow:hidden}.phead__bg{position:absolute;inset:0;opacity:.3}.phead__bg svg{width:100%;height:100%}.phead .wrap{position:relative;z-index:2;padding-block:clamp(3rem,6vw,4.5rem)}.phead .crumb{font-size:.8rem;color:#9fb0cc;margin-bottom:.8rem}.phead .crumb a:hover{color:#fff}.phead h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800}.phead p{color:#d4dcec;margin-top:1rem;max-width:60ch;font-size:1.1rem}.ribbon{background:var(--blue);overflow:hidden;padding:.85rem 0}.ribbon__track{display:flex;width:max-content;animation:scrollx 30s linear infinite}.ribbon:hover .ribbon__track{animation-play-state:paused}.ribbon span{font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:0 1.3rem;display:inline-flex;align-items:center;white-space:nowrap}.ribbon i{color:var(--yellow);font-style:normal;margin-left:1.3rem}@keyframes scrollx{to{transform:translateX(-50%)}}.brands{background:var(--soft);border-bottom:1px solid var(--line)}.brands .wrap{display:grid;gap:1.2rem;padding-block:2.5rem}@media(min-width:760px){.brands .wrap{grid-template-columns:repeat(3,1fr)}}.brand{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.5rem;transition:.2s;will-change:transform}.brand:hover{border-color:var(--blue);box-shadow:0 8px 24px rgba(28,82,208,.08)}.brand__ic{width:46px;height:46px;border-radius:10px;background:var(--soft2);display:flex;align-items:center;justify-content:center;color:var(--blue);flex:none;transition:.3s}.brand:hover .brand__ic{transform:translateY(-3px) scale(1.08)}.brand b{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:var(--navy);letter-spacing:-.02em;display:block}.brand small{font-size:.82rem;color:var(--muted)}.sec{padding-block:clamp(4.5rem,10vw,8.5rem)}.sec--soft{background:var(--soft)}.shead{max-width:68ch;margin-bottom:4rem}.shead h2{font-size:clamp(2.1rem,4.5vw,3.4rem);font-weight:700;margin-top:.8rem}.shead p{margin-top:1.2rem;font-size:1.15rem}.intro{display:grid;gap:2.5rem;align-items:center}@media(min-width:900px){.intro{grid-template-columns:1fr 1fr;gap:4rem}}.intro h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;margin-bottom:1.3rem}.intro p{margin-bottom:1rem}.intro strong{color:var(--ink);font-weight:600}.intro__act{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.9rem}.intro__visual{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--navy)}.intro__visual svg{position:absolute;inset:0;width:100%;height:100%}.domains{display:grid;gap:1.8rem}@media(min-width:640px){.domains{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.domains{grid-template-columns:repeat(4,1fr)}}.dom__photo{aspect-ratio:16/11;position:relative;background:var(--navy);overflow:hidden}.dom__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.dom:hover .dom__photo img{transform:scale(1.06)}.dom__photo svg{position:absolute;inset:0;width:100%;height:100%}.dom h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.01em}.dom p{font-size:.92rem;line-height:1.55}.dom a{display:inline-flex;align-items:center;gap:.3em;margin-top:auto;padding-top:.9rem;color:var(--blue);font-weight:600;font-size:.85rem}.feats{display:grid;gap:1rem}@media(min-width:760px){.feats{grid-template-columns:repeat(2,1fr)}}.feat{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.4rem}.feat__ic{width:40px;height:40px;border-radius:9px;background:var(--soft2);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}.feat b{font-family:var(--disp);font-size:1rem;color:var(--ink);display:block;margin-bottom:.2rem}.feat span{font-size:.9rem}.techs{display:grid;gap:1.3rem}@media(min-width:640px){.techs{grid-template-columns:repeat(2,1fr)}}@media(min-width:980px){.techs{grid-template-columns:repeat(3,1fr)}}.tech{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem;border-top:3px solid var(--blue)}.tech h3{font-size:1.05rem;font-weight:700;margin-bottom:.4rem}.tech p{font-size:.92rem;white-space:pre-line}.works{display:grid;gap:1.5rem}@media(min-width:640px){.works{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.works{grid-template-columns:repeat(3,1fr)}}.work{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.2s}.work:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,36,56,.1)}.work__img{aspect-ratio:16/11;position:relative;background:var(--navy);overflow:hidden}.work__img svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s ease}.work:hover .work__img svg{transform:scale(1.08)}.work__tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--yellow);color:var(--navy);font-family:var(--disp);font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;border-radius:5px}.work__b{padding:1.2rem 1.3rem}.work__b h3{font-size:1.08rem;font-weight:700;margin-bottom:.25rem}.work__b p{font-size:.85rem;color:var(--muted)}.sols{display:grid;gap:1.5rem}@media(min-width:640px){.sols{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.sols{grid-template-columns:repeat(3,1fr)}}.sol{position:relative;border-radius:12px;overflow:hidden;background:var(--navy);aspect-ratio:16/10;display:flex;align-items:flex-end;padding:1.4rem;border:1px solid var(--line)}.sol svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35}.sol b{position:relative;z-index:2;font-family:var(--disp);color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}.approach{background:var(--navy);color:#fff}.approach .wrap{padding-block:clamp(3.5rem,7vw,5.5rem)}.approach__grid{display:grid;gap:2.5rem;align-items:center}@media(min-width:900px){.approach__grid{grid-template-columns:1.1fr .9fr;gap:4rem}}.approach h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700}.approach p{color:#d4dcec;margin-top:1.2rem}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.4rem}.stat .n{font-family:var(--disp);font-weight:800;font-size:2.1rem;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}.stat .l{font-size:.82rem;color:#d4dcec;margin-top:.4rem}.news{display:grid;gap:1.5rem}@media(min-width:760px){.news{grid-template-columns:repeat(2,1fr)}}@media(min-width:1080px){.news{grid-template-columns:repeat(4,1fr)}}.ncard{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}.ncard:hover{border-color:var(--blue);transform:translateY(-3px)}.ncard__img{aspect-ratio:16/10;background:var(--soft2);position:relative;overflow:hidden}.ncard__img svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;transition:transform .5s ease}.ncard:hover .ncard__img svg{transform:scale(1.06)}.ncard__b{padding:1.2rem;flex:1;display:flex;flex-direction:column}.ncard__tag{font-family:var(--disp);font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.ncard__b h3{font-size:1rem;font-weight:700;margin-top:.5rem;line-height:1.25}.ncard__date{font-size:.78rem;color:var(--muted);margin-top:auto;padding-top:.7rem}.contact{display:grid;gap:3rem}@media(min-width:900px){.contact{grid-template-columns:.9fr 1.1fr;gap:4rem}}.contact h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;margin-bottom:1rem}.cinfo{margin-top:2rem;display:grid;gap:1.2rem}.cinfo__row{display:flex;gap:.9rem;align-items:flex-start}.cinfo__ic{width:40px;height:40px;border-radius:9px;background:var(--soft2);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}.cinfo__row b{font-family:var(--disp);font-size:.92rem;color:var(--ink);display:block}.cinfo__row span{font-size:.9rem;color:var(--muted)}.cinfo__row a:hover{color:var(--blue)}.cform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2rem;display:grid;gap:1.1rem}.cform label{display:grid;gap:.4rem}.cform span{font-family:var(--disp);font-size:.82rem;font-weight:600;color:var(--ink)}.cform input,.cform textarea{font-family:var(--sans);font-size:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink)}.cform input:focus,.cform textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent;background:#fff}.ftr{background:var(--navy);color:#aeb9c6;padding-block:4rem 2rem}.ftr__top{display:grid;gap:2.5rem}@media(min-width:760px){.ftr__top{grid-template-columns:1.7fr 1fr 1fr 1.1fr}}.ftr__logo{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.ftr__logo .logo__img{height:34px}.ftr__logo .logo__slogan{color:#aeb9c6}.ftr__logo svg{width:34px;height:34px}.ftr__logo b{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:#fff;letter-spacing:-.02em}.ftr__logo b i{color:#6f9bff;font-style:normal}.ftr__about{font-size:.92rem;max-width:36ch;line-height:1.6}.ftr h4{font-family:var(--disp);color:#fff;font-size:.92rem;margin-bottom:1rem;font-weight:600}.ftr ul{list-style:none;display:grid;gap:.55rem;font-size:.9rem}.ftr ul a:hover{color:#fff}.ftr__social{display:flex;gap:.7rem;margin-top:1.2rem}.ftr__social a{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#aeb9c6;transition:.2s}.ftr__social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}.ftr__copy{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}.reveal{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:calc(var(--d,0)*100ms)}@keyframes rise{to{opacity:1;transform:none}}[data-anim]{opacity:0;will-change:transform,opacity;transition:opacity .7s cubic-bezier(.16,.84,.3,1),transform .7s cubic-bezier(.16,.84,.3,1)}[data-anim="up"]{transform:translateY(40px)}[data-anim="zoom"]{transform:scale(.94)}[data-anim].in{opacity:1;transform:none}[data-stagger]>*{opacity:0;transform:translateY(34px);transition:opacity .65s cubic-bezier(.16,.84,.3,1),transform .65s cubic-bezier(.16,.84,.3,1)}[data-stagger].in>*{opacity:1;transform:none}[data-stagger].in>*:nth-child(1){transition-delay:.04s}[data-stagger].in>*:nth-child(2){transition-delay:.12s}[data-stagger].in>*:nth-child(3){transition-delay:.20s}[data-stagger].in>*:nth-child(4){transition-delay:.28s}[data-stagger].in>*:nth-child(5){transition-delay:.36s}[data-stagger].in>*:nth-child(6){transition-delay:.44s}[data-stagger].in>*:nth-child(7){transition-delay:.52s}[data-stagger].in>*:nth-child(8){transition-delay:.60s}.hero__bg path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.6s ease forwards}.hero__bg path:nth-child(2){animation-delay:.2s}.hero__bg path:nth-child(3){animation-delay:.4s}.hero__bg path:nth-child(4){animation-delay:.6s}@keyframes draw{to{stroke-dashoffset:0}}.hero__tick{transform-origin:left;animation:tickin .7s cubic-bezier(.16,.84,.3,1) forwards .5s;transform:scaleX(0)}@keyframes tickin{to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-anim],[data-stagger]>*{opacity:1!important;transform:none!important}.hero__bg path{stroke-dashoffset:0}.hero__tick{transform:none}.reveal{opacity:1;transform:none}}:root{--x-bg:#060a16;--x-bg2:#0b1326;--x-blue:#1953c8;--x-cyan:#f2c230;--x-yel:#f2c230;--x-vio:#1953c8;--x-text:#eaf0ff;--x-muted:#8ea3c8;--x-line:rgba(90,130,210,.16)}body{background:var(--x-bg);color:var(--x-text)}h1,h2,h3,h4{color:#fff}.eyebrow{color:var(--x-cyan);letter-spacing:.24em;text-shadow:0 0 20px rgba(29,84,214,.4)}body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(1000px 700px at 12% -10%,rgba(59,130,246,.20),transparent 60%),radial-gradient(900px 700px at 100% 5%,rgba(139,92,246,.14),transparent 55%),radial-gradient(700px 700px at 50% 120%,rgba(251,191,36,.07),transparent 60%),var(--x-bg)}.hero{min-height:100vh;background:transparent;display:flex;align-items:center}.hero__3d{position:absolute;inset:0;z-index:0;opacity:.9}.hero__3d svg{width:100%;height:100%}.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,22,.4) 0%,transparent 30%,transparent 60%,var(--x-bg) 100%),linear-gradient(90deg,var(--x-bg) 2%,rgba(6,10,22,.5) 30%,transparent 55%)}.hero .wrap{z-index:2;width:100%}.hero h1{font-size:clamp(3.2rem,9vw,8rem);line-height:.92;letter-spacing:-.04em;font-weight:800;text-shadow:0 0 80px rgba(59,130,246,.45)}.hero h1 span{color:#1953c8;-webkit-text-fill-color:#1953c8;background:none}.hero__sub{color:#b7c6e8;font-size:clamp(1.1rem,1.8vw,1.4rem)}.hero__tick{height:8px;background:#f2c230;border-radius:3px;box-shadow:none;animation:none}@keyframes shimmer{to{background-position:200% 0}}.hero__panel{background:rgba(11,19,38,.5);border:1px solid var(--x-line);backdrop-filter:blur(22px);box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);border-radius:22px;position:relative;overflow:hidden}.hero__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--x-cyan),transparent);opacity:.6}.hero__panel h4{color:var(--x-cyan)}.hero__stats .n{color:#fff;text-shadow:0 0 30px rgba(59,130,246,.5)}.hero__stats .l{color:var(--x-muted)}.x-grid{opacity:0;animation:fadeG 1.6s ease forwards .2s}@keyframes fadeG{to{opacity:1}}.x-topo{stroke-dasharray:1400;stroke-dashoffset:1400;animation:drawT 2.4s ease forwards;animation-delay:calc(var(--i)*.18s + .4s)}@keyframes drawT{to{stroke-dashoffset:0}}.x-bld{opacity:0;transform-box:fill-box;transform-origin:bottom;animation:bldRise 1.2s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:var(--dl)}@keyframes bldRise{0%{opacity:0;transform:translateY(50px) scaleY(.15)}100%{opacity:1;transform:none}}.x-laser{stroke-dasharray:6 6;opacity:0;animation:laser 1s ease forwards,laserDash 1s linear infinite;animation-delay:var(--dl),calc(var(--dl) + 1s)}@keyframes laser{to{opacity:.7}}@keyframes laserDash{to{stroke-dashoffset:-20}}.x-scan{opacity:0;animation:scanX 3.5s ease-in-out infinite;animation-delay:var(--dl)}@keyframes scanX{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.3)}}.btn{background:linear-gradient(120deg,var(--x-blue),#11317a);border-radius:12px;box-shadow:0 12px 36px rgba(59,130,246,.4);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-120%);transition:transform .6s}.btn:hover::after{transform:translateX(120%)}.btn:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(59,130,246,.6)}.btn--light{background:#fff;color:#0b1326}.hdr{background:rgba(6,10,22,.7);backdrop-filter:blur(18px);border-bottom:1px solid var(--x-line)}.nav a{color:var(--x-muted)}.nav a:hover,.nav a.on{color:#fff;text-shadow:0 0 18px rgba(29,84,214,.4)}.logo__slogan .sec{padding-block:clamp(5rem,11vw,9rem)}.sec--soft{background:rgba(255,255,255,.015)}.shead p,.intro p{color:var(--x-muted)}.intro strong{color:#fff}.brands{background:rgba(255,255,255,.015);border-block:1px solid var(--x-line)}.brand{background:rgba(255,255,255,.04);border:1px solid var(--x-line);backdrop-filter:blur(6px)}.brand:hover{border-color:var(--x-cyan);box-shadow:0 18px 44px rgba(59,130,246,.3);transform:translateY(-4px)}.brand__ic{background:rgba(59,130,246,.14);color:var(--x-cyan)}.brand b{color:#fff}.brand small{color:var(--x-muted)}.dom,.feat,.tech,.work,.ncard{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .3s}.dom h3{color:#fff}.dom p{color:var(--x-muted)}.dom a{color:var(--x-cyan)}.dom__photo{background:#0b1326}.dom__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,10,22,.6))}.feat,.tech{background:rgba(255,255,255,.04);border:1px solid var(--x-line)}.feat:hover,.tech:hover{border-color:var(--x-cyan);transform:translateY(-3px)}.feat b,.tech h3{color:#fff}.feat span,.tech p{color:var(--x-muted)}.feat__ic{background:rgba(59,130,246,.14);color:var(--x-cyan)}.tech{border-top:3px solid var(--x-blue)}.work,.ncard{background:rgba(255,255,255,.04);border:1px solid var(--x-line)}.work:hover,.ncard:hover{border-color:var(--x-cyan);transform:translateY(-5px);box-shadow:0 24px 54px rgba(59,130,246,.32)}.work__b h3,.ncard__b h3{color:#fff}.work__b p,.ncard__date{color:var(--x-muted)}.work__tag{background:var(--x-yel);color:#3a2c00;box-shadow:0 0 22px rgba(251,191,36,.6)}.ncard__tag{color:var(--x-cyan)}.sol::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,10,22,.85))}.sol b{z-index:3}.approach{background:linear-gradient(135deg,#0a1124,#0d1b3a);position:relative;overflow:hidden}.approach::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 480px at 80% 40%,rgba(59,130,246,.3),transparent 60%)}.approach .wrap{position:relative;z-index:2}.approach h2{color:#fff}.approach p{color:#b8c6e0}.stat{background:rgba(255,255,255,.05);border:1px solid var(--x-line)}.stat .n{color:var(--x-yel);text-shadow:0 0 26px rgba(251,191,36,.5)}.stat .l{color:#b8c6e0}.cform{background:rgba(255,255,255,.04);border:1px solid var(--x-line);backdrop-filter:blur(10px)}.cform input,.cform textarea{background:rgba(6,10,22,.6);border:1px solid var(--x-line);color:#fff}.cform input:focus,.cform textarea:focus{outline:2px solid var(--x-cyan)}.cform span{color:#cdd9f5}.cinfo__ic{background:rgba(59,130,246,.14);color:var(--x-cyan)}.cinfo__row b{color:#fff}.cinfo__row span{color:var(--x-muted)}.contact h2,.shead h2{color:#fff}.phead{background:transparent;border-bottom:1px solid var(--x-line)}.phead .crumb,.phead p{color:var(--x-muted)}.ftr{background:#04060f;border-top:1px solid var(--x-line)}.ftr__about,.ftr ul{color:var(--x-muted)}.ftr__social a{border-color:var(--x-line);color:var(--x-muted)}.ftr__social a:hover{background:var(--x-blue);color:#fff;box-shadow:0 0 20px rgba(59,130,246,.6)}[data-anim]{transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}[data-anim="up"]{transform:translateY(30px)}[data-stagger]>*{transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1);transform:translateY(24px)}@media(prefers-reduced-motion:reduce){.x-grid,.x-topo,.x-bld,.x-laser,.x-scan{animation:none;opacity:1;stroke-dashoffset:0;transform:none}.hero__tick{animation:none}}.phead{position:relative;overflow:hidden}.phead__deco{position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none}.phead__deco svg{width:100%;height:100%}.phead .wrap{position:relative;z-index:2}.phead::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--x-bg) 8%,rgba(7,13,31,.5) 40%,transparent 62%);pointer-events:none}.ph-grid{opacity:0;animation:fadeG 1.4s ease forwards .2s}.ph-bld{opacity:0;transform-box:fill-box;transform-origin:bottom;animation:bldRise 1s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:var(--dl)}.ph-scan{opacity:0;animation:scanX 3.5s ease-in-out infinite;animation-delay:var(--dl)}@media(prefers-reduced-motion:reduce){.ph-grid,.ph-bld,.ph-scan{animation:none;opacity:.6;transform:none}}.hero__scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(140,170,230,.5);border-radius:14px;display:flex;justify-content:center;padding-top:7px}.hero__scroll span{width:4px;height:8px;background:var(--x-yel);border-radius:2px;animation:scrollDot 1.8s ease-in-out infinite}@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}100%{opacity:0}}@media(max-width:900px){.hero__scroll{display:none}}@media(prefers-reduced-motion:reduce){.hero__scroll span{animation:none}}:root{--x-bg:#f5f8fd;--x-bg2:#eef3fb;--x-text:#16233d;--x-muted:#5a6a85;--x-line:rgba(30,70,150,.12)}body{background:#f7fafe;color:#42506a}body::before{background:radial-gradient(1000px 700px at 12% -10%,rgba(29,84,214,.10),transparent 60%),radial-gradient(900px 700px at 100% 5%,rgba(29,84,214,.06),transparent 55%),radial-gradient(700px 700px at 50% 120%,rgba(242,194,48,.05),transparent 60%),#f7fafe}h1,h2,h3,h4{color:#0e1b33}.eyebrow{color:#1953c8;text-shadow:none}.hero{background:linear-gradient(180deg,#eaf2ff 0%,#f5f9fe 65%,#fff 100%)}.hero__3d{opacity:.9}.hero::after{background:linear-gradient(180deg,rgba(245,248,253,.3) 0%,transparent 30%,transparent 60%,#f7fafe 100%),linear-gradient(90deg,#f5f8fd 2%,rgba(245,248,253,.5) 30%,transparent 55%)}.hero h1{color:#0e1b33;text-shadow:none}.hero h1 span{filter:none}.hero__sub{color:#4a5876}.hero__panel{background:rgba(255,255,255,.78);border:1px solid #fff;box-shadow:0 30px 70px rgba(20,50,110,.15)}.hero__panel h4{color:#1953c8}.hero__stats .n{color:#0e1b33;text-shadow:none}.hero__stats .l{color:#7c8aa3}.hero__scroll{border-color:rgba(30,70,150,.3)}.hdr{background:rgba(247,250,254,.82);border-bottom:1px solid var(--x-line)}.nav a{color:#4a5876}.nav a:hover,.nav a.on{color:#1953c8;text-shadow:none}.logo__slogan .sl-txt{color:#111!important}.sec--soft{background:linear-gradient(180deg,#fff,#eef3fb)}.shead p,.intro p{color:#4a5876}.intro strong{color:#0e1b33}.brands{background:linear-gradient(180deg,#fff,#f3f7fd);border-block:1px solid var(--x-line)}.brand{background:#fff;border:1px solid var(--x-line)}.brand:hover{border-color:#1953c8;box-shadow:0 18px 44px rgba(29,84,214,.14)}.brand__ic{background:#eef3fc;color:#1953c8}.brand b{color:#0e1b33}.brand small{color:#5a6a85}.dom h3{color:#0e1b33}.dom p{color:#6b7891}.dom a{color:#1953c8}.dom__photo{background:#eef3fb}.feat,.tech{background:#fff;border:1px solid var(--x-line)}.feat:hover,.tech:hover{border-color:#1953c8}.feat b,.tech h3{color:#0e1b33}.feat span,.tech p{color:#6b7891}.feat__ic{background:#eef3fc;color:#1953c8}.tech{border-top:3px solid #1953c8}.work,.ncard{background:#fff;border:1px solid var(--x-line)}.work:hover,.ncard:hover{border-color:#1953c8;box-shadow:0 24px 54px rgba(29,84,214,.15)}.work__b h3,.ncard__b h3{color:#0e1b33}.work__b p,.ncard__date{color:#6b7891}.phead{background:linear-gradient(180deg,#eaf2ff,#f5f9fe)}.phead__deco{opacity:.5}.phead::after{background:linear-gradient(90deg,#f5f8fd 8%,rgba(245,248,253,.5) 40%,transparent 62%)}.phead h1{color:#0e1b33}.phead .crumb,.phead p{color:#5a6a85}.cform{background:#fff;border:1px solid var(--x-line)}.cform input,.cform textarea{background:#f5f8fd;border:1px solid var(--x-line);color:#0e1b33}.cform input:focus,.cform textarea:focus{outline:2px solid #1953c8;background:#fff}.cform span{color:#0e1b33}.cinfo__ic{background:#eef3fc;color:#1953c8}.cinfo__row b{color:#0e1b33}.cinfo__row span{color:#5a6a85}.contact h2,.shead h2{color:#0e1b33}.preslist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}.preslist li{position:relative;padding:.9rem 1rem .9rem 2.4rem;background:#fff;border:1px solid var(--x-line);border-radius:12px;font-weight:500;color:#2c3a54;transition:.3s}.preslist li::before{content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#f2c230;border-radius:2px;transform:translateY(-50%) rotate(45deg)}.preslist li:hover{border-color:#1953c8;box-shadow:0 10px 26px rgba(29,84,214,.1);transform:translateY(-2px)}.psteps{display:grid;gap:1.4rem;max-width:920px;margin:0 auto}.pstep{display:flex;gap:1.4rem;align-items:flex-start;background:#fff;border:1px solid var(--x-line);border-radius:16px;padding:1.8rem 2rem;transition:.4s}.pstep:hover{border-color:#1953c8;box-shadow:0 18px 40px rgba(29,84,214,.12);transform:translateY(-3px)}.pstep__n{flex:none;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#1953c8,#11317a);color:#fff;font-family:var(--disp);font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(29,84,214,.3)}.pstep h3{color:#0e1b33;margin-bottom:.4rem;font-size:1.15rem}.pstep p{color:#5a6a85}.ptags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.ptags li{font-size:.72rem;font-weight:600;letter-spacing:.03em;color:#1953c8;background:#eef3fc;padding:.3rem .7rem;border-radius:20px}.artmeta{color:#7c8aa3;font-weight:600;font-size:.95rem} .article{max-width:760px;margin:0 auto} .article p{font-size:1.12rem;line-height:1.8;color:#3c4658;margin-bottom:1.4rem} .article p:first-child{font-size:1.25rem;color:#0e1b33;font-weight:500} .artback{max-width:760px;margin:2.5rem auto 0}.artimg{margin:2.5rem auto;max-width:760px;border-radius:16px;overflow:hidden;border:1px solid var(--x-line)}.artimg img{width:100%;height:auto;display:block}.article strong{color:#0e1b33;font-weight:600}.hdr .logo__slogan .sl-txt{color:#111}.ftr .logo__slogan .sl-txt{color:#dce6ff!important}.brand-link{color:inherit;text-decoration:none;border-bottom:2px solid rgba(242,194,48,.5);transition:border-color .2s,color .2s}.brand-link:hover{color:#1953c8;border-bottom-color:#f2c230}.aboutimg{margin:0 0 2.5rem;border-radius:18px;overflow:hidden;border:1px solid var(--x-line);max-width:420px;box-shadow:0 18px 40px rgba(20,50,110,.12)}.aboutimg img{width:100%;height:auto;display:block}.aboutvideo{position:relative;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--x-line);box-shadow:0 24px 60px rgba(20,50,110,.18);background:#0e1b33;aspect-ratio:16/9}.aboutvideo video{width:100%;height:100%;display:block;object-fit:cover}.reflogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;align-items:center;justify-items:center;max-width:900px;margin:0 auto} .reflogo{display:flex;align-items:center;justify-content:center;padding:1.5rem;background:#fff;border:1px solid var(--x-line);border-radius:14px;width:100%;height:120px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s} .reflogo:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,50,110,.12)} .reflogo img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain} /* ===== CORRECTIONS TEXTES INVISIBLES (thème clair) ===== *//* bouton ghost:texte foncé lisible sur fond clair *//* le bouton ghost quand il est SUR fond sombre (approach/footer) reste clair */.approach .approach /* intro strong:lisible sur fond clair */.intro strong{color:#0e1b33}/* s'assurer que les titres de section sont foncés (sauf sur bandes sombres) */.sec h2,.sec h3,.sec p{color:inherit}.sec h2{color:#0e1b33}/* ===== SLIDER D'IMAGES EN FOND DU HERO ===== */.hero__slider{position:absolute;inset:0;z-index:0;overflow:hidden}.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 30s infinite}.hero__slide:nth-child(1){animation-delay:0s}.hero__slide:nth-child(2){animation-delay:6s}.hero__slide:nth-child(3){animation-delay:12s}.hero__slide:nth-child(4){animation-delay:18s}.hero__slide:nth-child(5){animation-delay:24s}3%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}5%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0}}/* voile clair par-dessus les photos pour garder le texte lisible (charte,thème clair) */.hero__slider::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,254,.96) 0%,rgba(247,250,254,.85) 35%,rgba(247,250,254,.45) 70%,rgba(247,250,254,.35) 100%)}/* le territoire 3D passe au-dessus des photos,en transparence */.hero__3d{z-index:1;opacity:.55}.hero .wrap{z-index:2}@media(prefers-reduced-motion:reduce){.hero__slide:nth-child(2),}/* ===== CARTES MARQUES PREMIUM ===== */.brand{position:relative;display:flex;align-items:center;gap:1.1rem;padding:1.6rem 1.8rem;background:#fff;border:1px solid var(--x-line);border-radius:18px;text-decoration:none;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .3s}.brand::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#1953c8);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.brand:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(20,50,110,.18);border-color:transparent}.brand:hover::before{transform:scaleY(1)}.brand__ic{flex:none;width:60px;height:60px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--icbg,#eef3fc);color:var(--accent,#1953c8);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}.brand__ic svg{width:32px;height:32px}.brand:hover .brand__ic{transform:scale(1.08) rotate(-4deg)}.brand__tx{display:flex;flex-direction:column;gap:.25rem;flex:1}.brand__tx b{font-family:var(--disp);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:#0e1b33}.brand__tx small{font-size:.85rem;color:#6b7891;line-height:1.35}.brand__arrow{flex:none;color:var(--accent,#1953c8);font-size:1.2rem;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}.brand:hover .brand__arrow{opacity:1;transform:translateX(0)}/* accents par marque */.brand--geo{--accent:#1953c8;--icbg:#eaf1fc}.brand--bim{--accent:#11317a;--icbg:#e9edf7}.brand--map{--accent:#e0a406;--icbg:#fdf4dc}.brand--map .brand__tx b{color:#0e1b33}/* ===== SECTION MARQUES — REFONTE PREMIUM ===== */.brands{background:linear-gradient(180deg,#fff,#eef3fb);border-block:1px solid var(--x-line);padding-block:1rem}.brands .wrap{gap:1.5rem}.brand{position:relative;overflow:hidden;background:#fff;border:1px solid #e6ecf5;border-radius:18px;padding:1.6rem 1.7rem;box-shadow:0 2px 12px rgba(20,50,110,.05);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}/* barre d'accent colorée en haut de chaque carte */.brand::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1953c8,#3d6fd6);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.brand:hover::before{transform:scaleX(1)}.brand:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(20,50,110,.16);border-color:transparent}/* icône:carré en dégradé,icône blanche */.brand__ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff!important;flex:none;box-shadow:0 8px 20px rgba(29,84,214,.28);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.brand__ic svg{width:30px;height:30px}.brand:hover .brand__ic{transform:translateY(-3px) rotate(-4deg) scale(1.06)}.brand b{font-family:var(--disp);font-weight:800;font-size:1.25rem;color:#0e1b33;letter-spacing:-.02em;display:block;margin-bottom:.15rem}.brand small{font-size:.85rem;color:#5a6a85;line-height:1.4}.brand__arrow{margin-left:auto;color:#c4d0e2;font-size:1.2rem;transition:transform .4s,color .3s;align-self:center}.brand:hover .brand__arrow{color:#1953c8;transform:translateX(5px)}/* couleurs distinctives par marque */.brand--geo .brand__ic{background:linear-gradient(135deg,#1953c8,#11317a)}.brand--geo::before{background:linear-gradient(90deg,#1953c8,#3d6fd6)}.brand--bim .brand__ic{background:linear-gradient(135deg,#11317a,#0e1b33)}.brand--bim::before{background:linear-gradient(90deg,#11317a,#1953c8)}.brand--map .brand__ic{background:linear-gradient(135deg,#1953c8,#f2c230)}.brand--map::before{background:linear-gradient(90deg,#1953c8,#f2c230)}/* ===== CARTES MARQUES — VERSION PREMIUM ===== */.brands{background:linear-gradient(180deg,#f7fafe,#eef4fc)!important;padding-block:clamp(3rem,6vw,5rem)}.brand{position:relative;display:flex;align-items:center;gap:1.2rem;padding:1.8rem 1.9rem 1.8rem 1.9rem!important;background:#fff!important;border:1px solid #e3ebf6!important;border-radius:20px!important;text-decoration:none;overflow:hidden;box-shadow:0 4px 20px rgba(20,50,110,.05);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}/* barre d'accent colorée en haut */.brand::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,#1953c8);opacity:.9}.brand:hover{transform:translateY(-7px);box-shadow:0 26px 55px rgba(20,50,110,.18);border-color:transparent!important}/* icône:fond dégradé saturé + couleur vive */.brand__ic{flex:none;width:62px;height:62px;border-radius:16px!important;display:flex;align-items:center;justify-content:center;background:var(--icgrad)!important;color:#fff!important;box-shadow:0 8px 22px var(--icsh,rgba(29,84,214,.35));transition:transform .45s cubic-bezier(.2,.8,.2,1)}.brand__ic svg{width:30px;height:30px}.brand__ic svg *{stroke:#fff!important}.brand__ic svg circle[fill],.brand__ic svg path[fill]{fill:#fff!important}.brand:hover .brand__ic{transform:scale(1.1) rotate(-5deg)}.brand__tx{display:flex;flex-direction:column;gap:.3rem;flex:1}.brand__tx b{font-family:var(--disp);font-size:1.25rem;font-weight:800;color:#0e1b33;letter-spacing:-.01em}.brand__tx small{font-size:.9rem;color:#5a6a85;line-height:1.35}.brand__arrow{flex:none;color:var(--accent,#1953c8);font-size:1.3rem;font-weight:700;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}.brand:hover .brand__arrow{opacity:1;transform:translateX(0)}/* couleurs par marque (charte:bleu / navy / bleu clair,accents jaunes) */.brand--geo{--accent:#1953c8;--icgrad:linear-gradient(135deg,#1953c8,#11317a);--icsh:rgba(29,84,214,.4)}.brand--bim{--accent:#11317a;--icgrad:linear-gradient(135deg,#11317a,#1953c8);--icsh:rgba(17,49,122,.4)}.brand--map{--accent:#2b6fd6;--icgrad:linear-gradient(135deg,#2b6fd6,#1953c8);--icsh:rgba(43,111,214,.4)}/* ===== page Interface 3D:plateformes ===== */.platforms{display:grid;gap:1.8rem;max-width:1000px;margin:0 auto}@media(min-width:800px){.platforms{grid-template-columns:1fr 1fr}}.platform{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:2.2rem;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;display:flex;flex-direction:column}.platform::before{content:"";position:absolute;top:0;left:0;right:0;height:5px}.platform--bim::before{background:linear-gradient(90deg,#11317a,#1953c8)}.platform--map::before{background:linear-gradient(90deg,#2b6fd6,#1953c8)}.platform:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(20,50,110,.16)}.platform__badge{display:inline-block;font-family:var(--disp);font-weight:800;font-size:.8rem;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,#11317a,#1953c8);padding:.4rem .9rem;border-radius:8px;margin-bottom:1rem}.platform__badge--map{background:linear-gradient(135deg,#2b6fd6,#1953c8)}.platform__head h3{color:#0e1b33;font-size:1.4rem;margin-bottom:.6rem}.platform__head p{color:#5a6a85;margin-bottom:1.4rem}.platform__pts{list-style:none;margin:0 0 1.8rem;padding:0;flex:1}.platform__pts li{position:relative;padding-left:1.8rem;color:#3c4658;font-weight:500}.platform__pts li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:#f2c230;border-radius:2px;transform:rotate(45deg)}.platform .btn{align-self:flex-start}.platform__pts{columns:1;display:block} @media(min-width:560px){.platform__pts{columns:2;column-gap:1.5rem}} .platform__pts li{break-inside:avoid;margin-bottom:.55rem}.btn--ghost{background:#fff;color:#1953c8;box-shadow:inset 0 0 0 1.5px #d8e2f0}.btn--ghost:hover{background:#f2f6fd;color:#11317a;box-shadow:inset 0 0 0 1.5px #1953c8;transform:translateY(-2px)}.approach .btn--ghost,.ftr .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}.approach .btn--ghost:hover,.ftr .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}.btn--ghost{background:#fff!important;color:#1953c8!important;box-shadow:inset 0 0 0 1.5px #d8e2f0!important}.btn--ghost:hover{background:#f2f6fd!important;color:#11317a!important;box-shadow:inset 0 0 0 1.5px #1953c8!important}.approach .btn--ghost,.ftr .btn--ghost{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)!important}.approach .btn--ghost:hover,.ftr .btn--ghost:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}.ncard__tag{color:#1953c8!important;background:#eef3fc;padding:.2rem .7rem;border-radius:20px;font-weight:700;font-size:.72rem;letter-spacing:.05em;display:inline-block} /* ===== SECTION MATÉRIEL — cartes propres ===== */.mat__ic svg{width:30px;height:30px}.mat__b h3{font-size:1.15rem;color:#0e1b33;margin-bottom:.2rem}/* ===== MATÉRIEL avec photos ===== */.mat__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}/* ===== MATÉRIEL — design premium ===== */.matgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.8rem}.mat{display:flex;flex-direction:column;background:#fff;border:1px solid #e6edf7;border-radius:22px;overflow:hidden;box-shadow:0 6px 24px rgba(20,50,110,.06);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .3s}.mat:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(20,50,110,.16);border-color:#c7d8f2}.mat__img{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;background:#eef3fb}.mat__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.mat:hover .mat__img img{transform:scale(1.07)}/* voile dégradé en bas de l'image */.mat__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,27,51,.55));pointer-events:none}/* badge catégorie flottant sur l'image */.mat__badge{position:absolute;left:1rem;bottom:1rem;z-index:2;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);color:#1953c8;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.4rem .8rem;border-radius:20px;box-shadow:0 4px 14px rgba(20,50,110,.2)}.mat__b{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:1rem;flex:1}.mat__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.mat__head h3{font-size:1.2rem;color:#0e1b33;margin:0}.mat__count{flex:none;font-size:.7rem;font-weight:700;color:#8595b0;background:#f0f4fa;padding:.25rem .6rem;border-radius:12px;white-space:nowrap}.mat__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}.mat__list li{position:relative;padding-left:1.6rem;color:#3c4658;font-weight:500;font-size:.95rem;line-height:1.35}.mat__list li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:#f2c230;border-radius:2px;transform:rotate(45deg);box-shadow:0 2px 6px rgba(242,194,48,.4)}/* highlight des nouveaux modèles FARO (contiennent —) */.mat__list li:has(br),.mat__list li{transition:color .2s}/* cartes marques:3 colonnes côte à côte (comme l'ancien site) */@media(max-width:860px){}/* ===== CARTES SÉCURITÉ — premium ===== */.secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}@media(max-width:860px){.secgrid{grid-template-columns:1fr}}.secard{position:relative;background:#fff;border:1px solid #e6edf7;border-radius:20px;padding:2.4rem 1.9rem 2rem;box-shadow:0 6px 24px rgba(20,50,110,.06);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}.secard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sacc,#1953c8)}.secard:hover{transform:translateY(-7px);box-shadow:0 28px 55px rgba(20,50,110,.15);border-color:transparent}.secard__ic{width:64px;height:64px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:var(--sgrad,linear-gradient(135deg,#1953c8,#11317a));color:#fff;box-shadow:0 10px 24px var(--ssh,rgba(29,84,214,.35));margin-bottom:1.4rem;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.secard:hover .secard__ic{transform:scale(1.08) rotate(-5deg)}.secard__ic svg{width:34px;height:34px}.secard h3{font-size:1.2rem;color:#0e1b33;margin-bottom:.7rem}.secard p{color:#5a6a85;line-height:1.6;font-size:.96rem}/* couleurs distinctes par carte (charte) */.secard--shield{--sacc:#1953c8;--sgrad:linear-gradient(135deg,#1953c8,#11317a);--ssh:rgba(29,84,214,.4)}.secard--backup{--sacc:#11317a;--sgrad:linear-gradient(135deg,#11317a,#2b6fd6);--ssh:rgba(17,49,122,.4)}.secard--speed{--sacc:#f2c230;--sgrad:linear-gradient(135deg,#f2c230,#e0a500);--ssh:rgba(242,194,48,.45)}/* carte de localisation */.cmap{width:100%;max-width:900px;height:380px;margin:2rem auto 0;border-radius:20px;overflow:hidden;border:1px solid #e6edf7;box-shadow:0 18px 45px rgba(20,50,110,.14);z-index:0}.cmap-pin__dot{width:20px;height:20px;background:#1953c8;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 10px rgba(29,84,214,.5),0 0 0 6px rgba(29,84,214,.2);animation:pinPulse 2s infinite}@keyframes pinPulse{0%,100%{box-shadow:0 3px 10px rgba(29,84,214,.5),0 0 0 4px rgba(29,84,214,.25)}50%{box-shadow:0 3px 10px rgba(29,84,214,.5),0 0 0 10px rgba(29,84,214,0)}}.leaflet-popup-content{font-family:var(--sans);font-size:.9rem}/* cartes marques:3 côte à côte,largeur mini respectée,texte jamais coupé */.brandgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.brand{min-width:0}.brand__tx{min-width:0;overflow:visible}.brand__tx b,.brand__tx small{white-space:normal;overflow:visible;text-overflow:clip}/* sur tablette:1 colonne dès que trop serré pour 3 */@media(max-width:900px){.brandgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}/* fix:le wrap de la section brands ne doit PAS être en flex (conflit header) */.brands .wrap{display:block!important;max-width:var(--max);margin:0 auto;height:auto!important}.brandgrid{width:100%}/* ===== MENU DÉROULANT SERVICES ===== */.nav__drop{position:relative;display:inline-block}.nav__droptrigger{display:inline-flex;align-items:center;gap:.35rem}.nav__caret{transition:transform .3s;margin-top:1px}.nav__drop:hover .nav__caret{transform:rotate(180deg)}.nav__menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:270px;background:#fff;border:1px solid #e6edf7;border-radius:14px;box-shadow:0 20px 50px rgba(20,50,110,.18);padding:.6rem;opacity:0;visibility:hidden;transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);z-index:100}.nav__drop:hover .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}/* petit pont invisible pour éviter que le menu se ferme entre le lien et le menu */.nav__menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.nav__menu a{display:block;padding:.7rem .9rem;border-radius:9px;color:#3c4658!important;font-size:.92rem;font-weight:500;transition:background .2s,color .2s;text-shadow:none!important}.nav__menu a:hover{background:#eef3fc;color:#1953c8!important}/* mobile:le sous-menu s'affiche en liste indentée dans le burger */@media(max-width:1120px){.nav__drop{display:block;width:100%}.nav__menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:.2rem 0 .2rem 1rem;min-width:0}.nav__drop:hover .nav__menu{transform:none}.nav__menu a{padding:.5rem .5rem;font-size:.9rem}.nav__caret{display:none}}/* ============ PAGES PRESTATIONS — REFONTE MODERNE ============ *//* hero prestation immersif */.phero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0e1b33 0%,#11317a 55%,#1953c8 100%);color:#fff;padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,5rem)}.phero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent);pointer-events:none}.phero__glow{position:absolute;top:-20%;right:-5%;width:520px;height:520px;background:radial-gradient(circle,rgba(242,194,48,.22),transparent 65%);pointer-events:none}.phero .wrap{position:relative;z-index:2}.phero__crumb{color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1.5rem}.phero__crumb a{color:rgba(255,255,255,.8)}.phero__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f2c230;margin-bottom:1.2rem}.phero__eyebrow::before{content:"";width:28px;height:2px;background:#f2c230}.phero h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1.2rem;color:#fff}.phero__lead{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(255,255,255,.85);max-width:44ch;line-height:1.55}.phero__stats{display:flex;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap}.phero__stat b{display:block;font-family:var(--disp);font-size:2.2rem;font-weight:800;color:#f2c230;line-height:1}.phero__stat span{font-size:.85rem;color:rgba(255,255,255,.7)}/* section intro avec accroche large */.pintro{padding:clamp(3rem,6vw,5rem) 0}.pintro__lead{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:#0e1b33;font-weight:500;max-width:24ch;letter-spacing:-.01em}.pintro__body{color:#4a5772;font-size:1.08rem;line-height:1.7;max-width:52ch}.pintro__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}@media(max-width:820px){.pintro__row{grid-template-columns:1fr;gap:1.5rem}}/* prestations en cartes numérotées modernes */.pfeatures{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(180deg,#f7fafe,#eef4fc)}.pfeat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;margin-top:2.5rem}.pfeat{position:relative;background:#fff;border:1px solid #e6edf7;border-radius:18px;padding:2rem 1.7rem 1.7rem;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;overflow:hidden}.pfeat:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(20,50,110,.13)}.pfeat__ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#1953c8,#11317a);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;box-shadow:0 8px 20px rgba(29,84,214,.3)}.pfeat__ic svg{width:26px;height:26px;stroke:#fff;fill:none}.pfeat h3{font-size:1.08rem;color:#0e1b33;line-height:1.3}.pfeat::after{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:#f2c230;transition:width .4s}.pfeat:hover::after{width:100%}/* timeline verticale des étapes */.ptimeline{padding:clamp(3rem,6vw,5rem) 0}.ptl{position:relative;max-width:820px;margin:3rem auto 0;padding-left:0}.ptl__item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.8rem;padding-bottom:2.5rem}.ptl__item:last-child{padding-bottom:0}.ptl__num{position:relative;z-index:2;flex:none;width:66px;height:66px;border-radius:50%;background:#fff;border:2px solid #1953c8;color:#1953c8;font-family:var(--disp);font-weight:800;font-size:1.6rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(29,84,214,.18)}.ptl__item::before{content:"";position:absolute;left:33px;top:66px;bottom:0;width:2px;background:linear-gradient(#1953c8,rgba(29,84,214,.15));z-index:1}.ptl__item:last-child::before{display:none}.ptl__c{padding-top:.5rem}.ptl__c h3{font-size:1.3rem;color:#0e1b33;margin-bottom:.6rem}.ptl__c p{color:#4a5772;line-height:1.7}.ptl__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}.ptl__tags span{font-size:.72rem;font-weight:600;color:#1953c8;background:#eef3fc;padding:.3rem .7rem;border-radius:20px}/* réalisations prestation */.pworks{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(180deg,#f7fafe,#eef4fc)}.pworks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2.5rem}.pwork{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 10px 30px rgba(20,50,110,.1)}.pwork img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.pwork:hover img{transform:scale(1.08)}.pwork__o{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,27,51,.85));display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}.pwork__o h4{color:#fff;font-size:1.1rem;margin-bottom:.2rem}.pwork__o span{color:#f2c230;font-size:.82rem;font-weight:600}.peyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1953c8;margin-bottom:1rem}.peyebrow::before{content:"";width:28px;height:2px;background:#f2c230}/* encart certification buildingSMART */.pcert{padding:clamp(2rem,5vw,4rem) 0}.pcert__box{display:flex;gap:1.8rem;align-items:center;background:linear-gradient(135deg,#0e1b33,#11317a);border-radius:22px;padding:clamp(1.8rem,4vw,2.8rem);color:#fff;position:relative;overflow:hidden}.pcert__box::after{content:"";position:absolute;top:-30%;right:-5%;width:280px;height:280px;background:radial-gradient(circle,rgba(242,194,48,.18),transparent 65%);pointer-events:none}.pcert__ic{flex:none;width:74px;height:74px;color:#f2c230;position:relative;z-index:2}.pcert__ic svg{width:100%;height:100%}.pcert__tx{position:relative;z-index:2}.pcert__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f2c230;margin-bottom:.4rem}.pcert__tx h3{color:#fff;font-size:clamp(1.2rem,2.5vw,1.5rem);margin-bottom:.6rem;line-height:1.3}.pcert__desc{color:rgba(255,255,255,.82);line-height:1.6;font-size:.98rem;max-width:60ch}.pcert__desc strong{color:#fff}@media(max-width:700px){.pcert__box{flex-direction:column;text-align:center;gap:1.2rem}.pcert__desc{margin:0 auto}}.dom__icon{display:flex;align-items:center;justify-content:center;padding:1.8rem 0 1.2rem;background:#fff}.dom__svg{width:110px;height:110px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.dom:hover .dom__svg{transform:scale(1.08) translateY(-3px)} .dom:hover .dom:hover .domains{grid-template-columns:repeat(4,1fr)!important}@media(max-width:1100px){.domains{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:640px){.domains{grid-template-columns:1fr!important}} /* barre d'accent jaune qui se remplit au survol */ /* zone icône */ .dom:hover /* corps texte */ .dom:hover /* lien détails : apparaît/glisse au survol */ .dom:hover .dom:hover /* ===== CARTES PRESTATIONS — FLIP 3D (comme ancien site) ===== */ .domains{grid-template-columns:repeat(4,1fr)!important;gap:1.4rem!important} @media(max-width:1100px){.domains{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:560px){.domains{grid-template-columns:1fr!important}} .dom{display:block!important;background:transparent!important;border:none!important;box-shadow:none!important;text-decoration:none;perspective:1200px;height:300px;padding:0!important} .dom__inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d} .dom:hover .dom__inner{transform:rotateY(180deg)} /* faces */ .dom__front,.dom__back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px;padding:1.6rem;box-sizing:border-box;box-shadow:0 4px 18px rgba(20,50,110,.08)} /* face avant : icône + titre, fond blanc */ .dom__front{background:#fff;border:1px solid #eef1f6} .dom__front .dom__icon2{display:flex;align-items:center;justify-content:center;width:132px;height:132px;margin-bottom:1rem} .dom__front .dom__svg2{width:132px;height:132px} .dom__front h3{font-size:1.05rem;color:#0e1b33;font-weight:700;text-align:center;margin:0;line-height:1.25} /* face arrière : texte, fond bleu charte */ .dom__back{background:linear-gradient(150deg,#1953c8,#11317a);transform:rotateY(180deg);color:#fff;text-align:center;gap:.7rem} .dom__back h3{font-size:1.05rem;color:#fff;font-weight:800;margin:0;line-height:1.2} .dom__back p{font-size:.86rem;color:rgba(255,255,255,.9);line-height:1.55;margin:0} .dom__link{display:inline-block;margin-top:.4rem;color:#f2c230;font-weight:700;font-size:.88rem} /* ===== FIX ALIGNEMENT MENU (Services aligné avec les autres) ===== */ @media(min-width:1024px){ .nav{align-items:center!important} .nav__drop{display:inline-flex!important;align-items:center!important} .nav__droptrigger{display:inline-flex!important;align-items:center!important;gap:.35rem;padding-block:.4rem!important;color:var(--ink);cursor:pointer;font-weight:500;line-height:1.2} .nav>a,.nav__droptrigger{line-height:1.2!important} .nav__caret{margin-top:0!important} } /* ===== FIX ALIGNEMENT MENU STRICT ===== */ @media(min-width:1024px){ .nav{display:flex!important;align-items:center!important;flex-wrap:nowrap!important} .nav>a,.nav__drop,.nav__droptrigger{display:inline-flex!important;align-items:center!important;height:auto!important;padding-block:.4rem!important;margin:0!important;line-height:1.2!important;white-space:nowrap!important} .nav__caret{margin:0 0 0 2px!important;align-self:center!important} } @keyframes heroFade{0%{opacity:0}3%{opacity:1}17%{opacity:1}20%{opacity:0}100%{opacity:0}}.platform__shot{width:100%;border-radius:14px;overflow:hidden;margin-bottom:1.3rem;box-shadow:0 8px 26px rgba(20,50,110,.14);border:1px solid #e9eef6}.platform__shot img{width:100%;height:auto;display:block} /* ===== VISUEL SECTION A PROPOS - photo du stand ===== */.intro__visual{border-radius:18px;border:1px solid #e3ebf6;box-shadow:0 18px 45px rgba(20,50,110,.14);background:#eef3fb}.intro__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.intro__visual:hover img{transform:scale(1.04)} /* ============================================================ PRESTATIONS — CONCEPT "VISÉE" Chaque domaine est une cible dans le réticule. Reprend le réticule caché du logo GEOREVO. ============================================================ */ @property --pf-bk { syntax: ''; inherits: false; initial-value: #c3d4ef; } @property --pf-len { syntax: ''; inherits: false; initial-value: 13px; } /* --- grille : 3 colonnes, dernière ligne centrée (5 ou 6 cartes) --- */ .pfeat__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;margin-top:2.6rem} .pfeat{flex:0 1 calc(33.333% - .867rem);max-width:calc(33.333% - .867rem);min-width:255px} @media(max-width:1000px){.pfeat{flex-basis:calc(50% - .65rem);max-width:calc(50% - .65rem)}} @media(max-width:640px){.pfeat{flex-basis:100%;max-width:100%;min-width:0}} /* --- la carte --- */ .pfeat{ position:relative;display:flex;flex-direction:column;gap:1.35rem; min-height:190px;padding:1.9rem 1.7rem; background:#fff;border:1px solid #e6edf7;border-radius:16px;overflow:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s; } .pfeat:hover{ transform:translateY(-5px); border-color:#cddcf2; box-shadow:0 22px 48px rgba(20,50,110,.14); } /* quadrillage topographique très discret, estompé en diagonale */ .pfeat::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(25,83,200,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(25,83,200,.055) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(148deg,#000 0%,transparent 64%); mask-image:linear-gradient(148deg,#000 0%,transparent 64%); } /* --- le réticule : 4 équerres, pas de pastille dégradée --- */ .pfeat__ic{ --pf-bk:#c3d4ef; --pf-len:13px; position:relative;z-index:1; width:64px;height:64px;flex:none; display:flex;align-items:center;justify-content:center; margin-bottom:0;border-radius:0;box-shadow:none; background: linear-gradient(var(--pf-bk),var(--pf-bk)) left top / var(--pf-len) 1.5px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left top / 1.5px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right top / var(--pf-len) 1.5px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right top / 1.5px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left bottom / var(--pf-len) 1.5px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left bottom / 1.5px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right bottom / var(--pf-len) 1.5px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right bottom / 1.5px var(--pf-len) no-repeat; transition:--pf-bk .35s ease,--pf-len .45s cubic-bezier(.2,.8,.2,1); } .pfeat:hover .pfeat__ic{--pf-bk:#f2c230;--pf-len:19px} .pfeat__ic svg{ width:28px;height:28px;fill:none;stroke:#1953c8; transition:stroke .35s ease,transform .45s cubic-bezier(.2,.8,.2,1); } .pfeat:hover .pfeat__ic svg{stroke:#11317a;transform:scale(1.06)} /* --- titre --- */ .pfeat h3{ position:relative;z-index:1;margin:0; font-family:var(--disp);font-size:1.06rem;font-weight:700; letter-spacing:-.012em;line-height:1.28;color:#0e1b33; transition:color .3s ease; } .pfeat:hover h3{color:#1953c8} /* --- signature : le balayage laser au survol --- */ .pfeat::after{ content:"";position:absolute;z-index:2;left:0;right:0;top:0; width:auto;height:2px;border-radius:0; background:linear-gradient(90deg,transparent,#f2c230 22%,#f2c230 78%,transparent); opacity:0;pointer-events:none;transition:none; } .pfeat:hover::after{animation:pfScan .95s cubic-bezier(.35,0,.25,1)} @keyframes pfScan{ 0%{opacity:0;transform:translateY(0)} 12%{opacity:.95} 88%{opacity:.95} 100%{opacity:0;transform:translateY(190px)} } @media(prefers-reduced-motion:reduce){ .pfeat,.pfeat__ic,.pfeat__ic svg,.pfeat h3{transition:none} .pfeat:hover{transform:none} .pfeat:hover::after{animation:none} } /* la carte devient cliquable (page 404) : focus clavier visible */ a.pfeat:focus-visible{outline:2.5px solid #1953c8;outline-offset:3px;border-color:#cddcf2} /* ============================================================ ARTICLE LONG — titres, listes, phases, vidéo ============================================================ */ .article h2{ font-family:var(--disp);font-size:clamp(1.4rem,2.5vw,1.85rem);font-weight:800; letter-spacing:-.02em;line-height:1.22;color:#0e1b33; margin:3.4rem 0 1.4rem;padding-top:1.7rem;border-top:1px solid #e6edf7;position:relative; } .article h2::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:#f2c230} .article ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem} .article ul li{position:relative;padding-left:1.7rem;font-size:1.05rem;line-height:1.68;color:#3c4658} .article ul li::before{ content:"";position:absolute;left:0;top:.6em;width:8px;height:8px; border:1.5px solid #1953c8;border-radius:2px; } /* encadré : l'objectif de la formation */ .artnote{ margin:0 0 2.4rem;padding:1.3rem 1.6rem;background:#f5f8fd; border-left:3px solid #1953c8;border-radius:0 10px 10px 0; } .artnote p{margin:0;font-size:1.06rem;line-height:1.7;color:#26324a} .artnote p:first-child{font-size:1.06rem;font-weight:500;color:#26324a} /* les 3 phases du processus Scan-to-BIM */ .phase{ position:relative;margin:0 0 1.1rem;padding:1.9rem 1.8rem 1.7rem; background:#fff;border:1px solid #e6edf7;border-radius:16px;overflow:hidden; } .phase::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(25,83,200,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(25,83,200,.05) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(148deg,#000,transparent 60%); mask-image:linear-gradient(148deg,#000,transparent 60%); } .phase__n{ position:relative;z-index:1; display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;margin-bottom:1.05rem; font-family:var(--disp);font-size:1.08rem;font-weight:800;color:#1953c8; background: linear-gradient(#c3d4ef,#c3d4ef) left top / 11px 1.5px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) left top / 1.5px 11px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) right top / 11px 1.5px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) right top / 1.5px 11px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) left bottom / 11px 1.5px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) left bottom / 1.5px 11px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) right bottom / 11px 1.5px no-repeat, linear-gradient(#c3d4ef,#c3d4ef) right bottom / 1.5px 11px no-repeat; } .phase h3{ position:relative;z-index:1;margin:0 0 1.05rem; font-family:var(--disp);font-size:1.16rem;font-weight:700; letter-spacing:-.015em;line-height:1.32;color:#0e1b33; } .phase ul{position:relative;z-index:1;margin-bottom:0} .phase__end{ position:relative;z-index:1;margin:1.25rem 0 0;padding-top:1.15rem; border-top:1px dashed #dbe5f4;font-size:1rem;line-height:1.65;color:#5a6579; } /* domaines d'expertise en pastilles */ .artchips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.8rem;padding:0;list-style:none} .artchips li{ padding:.5rem 1.05rem;background:#eef3fb;border:1px solid #dde7f6;border-radius:999px; font-size:.95rem;font-weight:600;color:#11317a;line-height:1.4; } .article .artchips li{padding-left:1.05rem} .article .artchips li::before{display:none} /* vidéo de la formation */ .artvideo{ margin:2.4rem 0 0;border-radius:16px;overflow:hidden; border:1px solid #e6edf7;box-shadow:0 18px 45px rgba(20,50,110,.13);background:#0e1b33; } .artvideo video{display:block;width:100%;height:auto} .artvideo figcaption{ padding:.85rem 1.2rem;font-size:.9rem;color:#8fa4c4;background:#0e1b33; border-top:1px solid rgba(255,255,255,.08); } @media(max-width:560px){ .phase{padding:1.5rem 1.25rem 1.35rem} .article ul li{font-size:1rem} } /* galerie photo dans un article */ .artgal{display:grid;gap:.9rem;margin:2rem 0 2.2rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .artgal figure{margin:0;border-radius:13px;overflow:hidden;border:1px solid #e6edf7; box-shadow:0 10px 28px rgba(20,50,110,.10);background:#eef3fb} .artgal img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1)} .artgal figure:hover img{transform:scale(1.05)} .artgal--solo{grid-template-columns:minmax(0,460px);justify-content:center} .artgal--solo img{aspect-ratio:auto} /* ============================================================ CORRECTIF — débordement horizontal entre 1000 et 1220 px l'en-tête (nav + bouton devis) dépassait de ~25 px et provoquait un défilement latéral sur tout le site ============================================================ */ @media(min-width:1001px) and (max-width:1220px){ .hdr .nav{gap:1rem} .hdr .nav__menu>a,.hdr .nav__droptrigger{font-size:.85rem} .hdr .btn{padding:.62rem 1.05rem;font-size:.85rem} .hdr .logo__slogan{font-size:.58rem;letter-spacing:.06em} } /* le décor SVG des en-têtes de page débordait de son cadre */ .phead__deco{overflow:hidden} /* vidéo en fond de carte réalisation (même cadrage que les photos) */ .pwork video{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)} .pwork:hover video{transform:scale(1.08)} @media(prefers-reduced-motion:reduce){.pwork video{display:none}} /* les décors SVG des bandeaux débordaient encore sous 900px */ .phead,.phead__bg,.phero,.phero__grid{overflow:hidden} /* pied de page : à 760px exactement, les 4 colonnes débordaient de 16px (1fr = min-content, donc les libellés longs forçaient la largeur) */ @media(min-width:760px){ .ftr__top{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)} } .ftr__top a,.ftr__top li{overflow-wrap:anywhere} /* ============================================================ FRISE — apparition séquentielle les étapes se révèlent dans l'ordre et le trait se trace entre elles, comme un relevé qui progresse ============================================================ */ /* rythme : 230 ms entre deux étapes, transition d'une seconde */ .ptl[data-stagger]>*{transform:translateY(18px); transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)} .ptl[data-stagger].in>*:nth-child(1){transition-delay:.05s} .ptl[data-stagger].in>*:nth-child(2){transition-delay:.28s} .ptl[data-stagger].in>*:nth-child(3){transition-delay:.51s} .ptl[data-stagger].in>*:nth-child(4){transition-delay:.74s} .ptl[data-stagger].in>*:nth-child(5){transition-delay:.97s} .ptl[data-stagger].in>*:nth-child(6){transition-delay:1.20s} .ptl[data-stagger] .ptl__num{ transform:scale(.82); transition:transform .75s cubic-bezier(.34,1.4,.5,1); } .ptl[data-stagger].in .ptl__num{transform:scale(1)} .ptl[data-stagger].in .ptl__item:nth-child(1) .ptl__num{transition-delay:.10s} .ptl[data-stagger].in .ptl__item:nth-child(2) .ptl__num{transition-delay:.33s} .ptl[data-stagger].in .ptl__item:nth-child(3) .ptl__num{transition-delay:.56s} .ptl[data-stagger].in .ptl__item:nth-child(4) .ptl__num{transition-delay:.79s} .ptl[data-stagger].in .ptl__item:nth-child(5) .ptl__num{transition-delay:1.02s} .ptl[data-stagger].in .ptl__item:nth-child(6) .ptl__num{transition-delay:1.25s} /* le trait se trace après que le numéro soit posé */ .ptl[data-stagger] .ptl__item::before{ transform:scaleY(0);transform-origin:top; transition:transform .95s cubic-bezier(.25,.75,.3,1); } .ptl[data-stagger].in .ptl__item::before{transform:scaleY(1)} .ptl[data-stagger].in .ptl__item:nth-child(1)::before{transition-delay:.30s} .ptl[data-stagger].in .ptl__item:nth-child(2)::before{transition-delay:.53s} .ptl[data-stagger].in .ptl__item:nth-child(3)::before{transition-delay:.76s} .ptl[data-stagger].in .ptl__item:nth-child(4)::before{transition-delay:.99s} .ptl[data-stagger].in .ptl__item:nth-child(5)::before{transition-delay:1.22s} .ptl[data-stagger].in .ptl__item:nth-child(6)::before{transition-delay:1.45s} @media(prefers-reduced-motion:reduce){ .ptl[data-stagger] .ptl__num, .ptl[data-stagger] .ptl__item::before{transform:none!important} } /* ============================================================ HERO — lisibilité les visuels du slider sont des captures d'interface, pleines de texte : elles concurrençaient le titre. On les repousse au rang de texture, et on allège le bloc sur mobile. ============================================================ */ /* images nettes : c'est le voile qui donne la lisibilité, pas le flou */ .hero__slide{filter:none} .hero__slider::after{ background: linear-gradient(90deg, rgba(247,250,254,.985) 0%, rgba(247,250,254,.95) 32%, rgba(247,250,254,.80) 60%, rgba(247,250,254,.72) 100%), linear-gradient(180deg, rgba(247,250,254,.55) 0%, transparent 26%, transparent 72%, #f7fafe 100%); } /* --- tablette et mobile --- */ @media(max-width:919px){ /* les 4 chiffres sont déjà répétés plus bas dans « Notre approche » : les afficher deux fois surchargeait l'écran pour rien */ .hero__panel{display:none} .hero{min-height:auto;padding:5.5rem 0 4rem} .hero__grid{gap:0} .hero h1{font-size:clamp(2.5rem,10.5vw,4rem);line-height:.98} .hero__sub{font-size:1.05rem;max-width:30ch;margin-top:1.1rem} .hero__tick{width:120px;height:7px;margin-top:1.2rem} .hero__act{margin-top:1.8rem;gap:.7rem} .hero__act .btn{flex:1 1 auto;justify-content:center;text-align:center} .hero__slider::after{ background: linear-gradient(180deg, rgba(247,250,254,.94) 0%, rgba(247,250,254,.90) 55%, #f7fafe 100%); } } @media(max-width:480px){ .hero{padding:4.5rem 0 3.2rem} .hero h1{font-size:clamp(2.25rem,11vw,3rem)} .hero__act{flex-direction:column;align-items:stretch} } /* ============================================================ CARTES PRESTATIONS (accueil) — rythme et tactile ============================================================ */ /* bureau : le retournement était trop rapide pour être suivi */ .dom__inner{transition:transform 1.05s cubic-bezier(.22,.78,.28,1)} /* écran tactile : le retournement se déclenche au TOUCHER, pas au survol. Premier appui = la carte pivote et montre le résumé. Second appui = on part sur la page. Géré dans main.js. */ @media(hover:none){ .dom{cursor:pointer} .dom__inner{transition:transform 1.05s cubic-bezier(.22,.78,.28,1)} .dom.is-flipped .dom__inner{transform:rotateY(180deg)} .dom.is-flipped .dom__front{pointer-events:none} /* petit repère pour indiquer que la carte se retourne */ .dom__front::after{ content:"";position:absolute;right:14px;bottom:14px;width:16px;height:16px; border:1.6px solid #c3d4ef;border-radius:50%; background:radial-gradient(circle at 50% 50%,#1953c8 0 2.6px,transparent 2.6px); opacity:.9; } .dom.is-flipped .dom__front::after{opacity:0} } /* le badge matériel devient un lien vers la fiche constructeur */ a.meth__m{text-decoration:none;transition:background .3s,color .3s} a.meth__m:hover{background:#1953c8;color:#fff} a.meth__m:focus-visible{outline:2.5px solid #1953c8;outline-offset:2px} a.meth__m span{font-size:.85em;opacity:.75;margin-left:.1em} .meth__spec{margin:.7rem 0 1rem;font-size:.86rem;color:#7c8aa3;font-weight:500} /* les maillons de la chaîne de valeur (page À propos) sont cliquables */ .feat b a{color:inherit;text-decoration:none;background-image:linear-gradient(#1953c8,#1953c8); background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .3s} .feat b a:hover{color:#1953c8;background-size:100% 1.5px} .feat b a:focus-visible{outline:2.5px solid #1953c8;outline-offset:3px;border-radius:3px} /* le diaporama passe de 5 à 4 images : cadence recalculée */ .hero__slide{animation-name:heroFade4;animation-duration:24s} @keyframes heroFade4{0%{opacity:0}4%{opacity:1}22%{opacity:1}26%{opacity:0}100%{opacity:0}} .hero__slide:nth-child(1){animation-delay:0s} .hero__slide:nth-child(2){animation-delay:6s} .hero__slide:nth-child(3){animation-delay:12s} .hero__slide:nth-child(4){animation-delay:18s} /* ============================================================ ACTUALITÉS (accueil) — rail défilant Ces règles sont limitées à l'intérieur de .nrail : la grille de la page /actualites/ n'est pas touchée. ============================================================ */ .nrail{position:relative} .nrail__vp{ overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;margin:0 -.4rem;padding:.4rem; } .nrail__vp::-webkit-scrollbar{display:none} .nrail .news{display:flex;grid-template-columns:none;gap:1.2rem;width:max-content} .nrail .ncard{flex:0 0 300px;scroll-snap-align:start} @media(max-width:520px){.nrail .ncard{flex-basis:78vw}} .nrail__nav{ position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%; border:1px solid #dde7f6;background:#fff;color:#1953c8;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(20,50,110,.14); transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,background .3s; } .nrail__nav:hover{background:#1953c8;color:#fff;transform:scale(1.06)} .nrail__nav:focus-visible{outline:2.5px solid #1953c8;outline-offset:3px} .nrail__nav--prev{left:-14px} .nrail__nav--next{right:-14px} .nrail__nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} @media(hover:none){.nrail__nav{display:none}} @media(max-width:1100px){.nrail__nav--prev{left:2px}.nrail__nav--next{right:2px}} .nrail::before,.nrail::after{ content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;pointer-events:none; transition:opacity .3s; } .nrail::before{left:-.4rem;background:linear-gradient(90deg,#f7fafe,transparent)} .nrail::after{right:-.4rem;background:linear-gradient(270deg,#f7fafe,transparent)} @media(prefers-reduced-motion:reduce){ .nrail__vp{scroll-behavior:auto} .nrail__nav{transition:none} } /* les copies servant à la boucle sont invisibles aux lecteurs d'écran */ .nrail .ncard.is-dup{pointer-events:auto} /* ============================================================ CARTE DE CONTACT marqueur en réticule, plaque de coordonnées suisses, contrôles Leaflet remis à la charte ============================================================ */ .cmap{background:#eef3fb} .cmap .leaflet-container{font-family:inherit;background:#eef3fb} /* --- le réticule --- */ .cmap-pin{position:relative} .cmap-pin i{position:absolute;display:block;pointer-events:none} .cmap-pin__halo{ left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%; background:rgba(25,83,200,.16);animation:cmapHalo 2.6s ease-out infinite; } .cmap-pin__ring{ left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%; border:2px solid #1953c8;background:rgba(255,255,255,.62); box-shadow:0 2px 8px rgba(17,49,122,.28); } /* les deux traits de visée dépassent du cercle */ .cmap-pin__cx,.cmap-pin__cy{background:#11317a;border-radius:1px} .cmap-pin__cx{left:50%;top:50%;width:44px;height:1.5px;margin:-.75px 0 0 -22px} .cmap-pin__cy{left:50%;top:50%;width:1.5px;height:44px;margin:-22px 0 0 -.75px} /* on évite que les traits barrent le centre */ .cmap-pin__cx{background:linear-gradient(90deg,#11317a 0 26%,transparent 26% 74%,#11317a 74% 100%)} .cmap-pin__cy{background:linear-gradient(180deg,#11317a 0 26%,transparent 26% 74%,#11317a 74% 100%)} .cmap-pin__core{ left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:#f2c230;box-shadow:0 0 0 2px #fff; } @keyframes cmapHalo{ 0%{transform:scale(.5);opacity:.85} 70%{transform:scale(1.15);opacity:0} 100%{transform:scale(1.15);opacity:0} } @media(prefers-reduced-motion:reduce){.cmap-pin__halo{animation:none;opacity:.35;transform:scale(.9)}} /* --- plaque de coordonnées MN95 --- */ .cmap__coord{ display:flex;flex-direction:column;gap:.1rem; margin:0 12px 12px 0;padding:.55rem .8rem; background:rgba(255,255,255,.94);border:1px solid #dbe5f4;border-radius:10px; box-shadow:0 6px 18px rgba(20,50,110,.14); font-variant-numeric:tabular-nums;line-height:1.35; } .cmap__coord-lab{ font-family:var(--disp);font-size:.6rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:#8b9ab4;margin-bottom:.1rem; } .cmap__coord-val{font-size:.8rem;font-weight:700;color:#11317a} /* --- bouton recentrer --- */ .cmap__reset{ display:flex!important;align-items:center;justify-content:center; width:34px;height:34px;margin-top:8px; background:#fff;border:1px solid #dbe5f4;border-radius:9px;color:#1953c8; box-shadow:0 4px 14px rgba(20,50,110,.14);transition:background .25s,color .25s; } .cmap__reset:hover{background:#1953c8;color:#fff} .cmap__reset svg{width:19px;height:19px;stroke:currentColor} /* --- contrôles Leaflet à la charte --- */ .cmap .leaflet-control-zoom{border:0!important;box-shadow:0 4px 14px rgba(20,50,110,.14)} .cmap .leaflet-control-zoom a{ width:34px;height:34px;line-height:32px;color:#11317a;background:#fff; border:1px solid #dbe5f4;font-size:1.15rem;font-weight:700; } .cmap .leaflet-control-zoom a:first-child{border-radius:9px 9px 0 0} .cmap .leaflet-control-zoom a:last-child{border-radius:0 0 9px 9px;border-top:0} .cmap .leaflet-control-zoom a:hover{background:#eef3fb;color:#1953c8} .cmap .leaflet-top.leaflet-right{margin:8px 8px 0 0} .cmap .leaflet-control-scale-line{ background:rgba(255,255,255,.9);border:1px solid #dbe5f4;border-top:0; border-radius:0 0 6px 6px;color:#5a6579;font-size:.72rem;font-weight:600; padding:1px 6px;box-shadow:none; } .cmap .leaflet-control-attribution{ background:rgba(255,255,255,.86);font-size:.68rem;color:#8b9ab4; border-radius:6px 0 0 0;padding:2px 7px; } .cmap .leaflet-control-attribution a{color:#5a6a85} @media(max-width:560px){ .cmap{height:320px} .cmap__coord{margin:0 8px 8px 0;padding:.45rem .65rem} .cmap__coord-val{font-size:.74rem} } /* ============================================================ PAGE ACTUALITÉS — grille 3 par ligne la dernière ligne incomplète se recentre au lieu de rester collée à gauche (7 articles = 3 + 3 + 1) ============================================================ */ main .news{ display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem; grid-template-columns:none; } main .news>.ncard{flex:0 1 calc(33.333% - 1rem);max-width:calc(33.333% - 1rem);min-width:265px} @media(max-width:1000px){ main .news>.ncard{flex-basis:calc(50% - .75rem);max-width:calc(50% - .75rem)} } @media(max-width:640px){ main .news>.ncard{flex-basis:100%;max-width:100%;min-width:0} } /* le carrousel de la page d'accueil garde son comportement */ .nrail .news{display:flex;flex-wrap:nowrap;justify-content:flex-start;width:max-content} .nrail .news>.ncard{flex:0 0 300px;max-width:none;min-width:0} @media(max-width:520px){.nrail .news>.ncard{flex-basis:78vw}} /* ============================================================ TYPOGRAPHIE MULTILINGUE l'allemand a des mots très longs (Geodatenverarbeitung, 3D-Visualisierungsplattformen) : sans césure ils forçaient la largeur de la page sur petit écran ============================================================ */ body{overflow-wrap:break-word} h1,h2,h3,h4,p,li,span,b,small{overflow-wrap:break-word} html[lang^="de"]{hyphens:auto;-webkit-hyphens:auto} html[lang^="de"] h1,html[lang^="de"] h2{hyphens:manual;-webkit-hyphens:manual} /* l'en-tête allemand est plus long que le français : on resserre plus tôt */ @media(min-width:1001px) and (max-width:1300px){ html[lang^="de"] .hdr .nav{gap:.85rem} html[lang^="de"] .hdr .nav__menu>a, html[lang^="de"] .hdr .nav__droptrigger{font-size:.82rem} html[lang^="de"] .hdr .btn{padding:.58rem .9rem;font-size:.8rem} html[lang^="de"] .hdr .logo__slogan{display:none} } /* en grille CSS, "1fr" vaut minmax(auto,1fr) : le contenu le plus large impose sa taille. Avec des mots allemands très longs, la colonne dépassait la page. min-width:0 rétablit le comportement attendu. */ .wrap>*,.intro>*,.approach__grid>*,.contact>*,.shead>*,.platforms>*{min-width:0} /* ============================================================ BARRE DU HAUT — mobile les quatre blocs (nom, machine à écrire, langues, réseaux) se chevauchaient sous 620 px. On garde l'essentiel : le sélecteur de langue et le téléphone. ============================================================ */ @media(max-width:760px){ .topbar .wrap{gap:.6rem;height:38px;justify-content:space-between} .topbar__name{display:none} /* le logo juste dessous le dit déjà */ .topbar__type{display:none} .topbar .lang{flex:0 0 auto;display:flex;gap:.15rem;order:1} .topbar .lang a{ margin:0;padding:.24rem .5rem;border-radius:6px;font-size:.72rem; line-height:1;letter-spacing:.02em; } .topbar .lang a.on{background:rgba(17,49,122,.12);color:var(--navy)} .topbar .social{flex:0 0 auto;order:2;gap:.75rem;justify-content:flex-end} /* les libellés LinkedIn / Instagram prennent trop de place : on ne garde que le téléphone, qui est actionnable */ .topbar .social a:not([href^="tel:"]){display:none} .topbar .social a[href^="tel:"]{ font-size:.74rem;white-space:nowrap;font-variant-numeric:tabular-nums; } } @media(max-width:380px){ .topbar .lang a{padding:.24rem .38rem;font-size:.68rem} .topbar .social a[href^="tel:"]{font-size:.7rem} } /* ============================================================ RYTHME DES APPARITIONS 0,65 s et 80 ms d'écart, c'était trop serré : les cartes arrivaient toutes en même temps. On étire. ============================================================ */ [data-stagger]>*{ transition:opacity .95s cubic-bezier(.16,.84,.3,1), transform .95s cubic-bezier(.16,.84,.3,1); } [data-stagger].in>*:nth-child(1){transition-delay:.06s} [data-stagger].in>*:nth-child(2){transition-delay:.20s} [data-stagger].in>*:nth-child(3){transition-delay:.34s} [data-stagger].in>*:nth-child(4){transition-delay:.48s} [data-stagger].in>*:nth-child(5){transition-delay:.62s} [data-stagger].in>*:nth-child(6){transition-delay:.76s} [data-stagger].in>*:nth-child(7){transition-delay:.90s} [data-stagger].in>*:nth-child(8){transition-delay:1.04s} /* le bandeau de logos n'est pas concerné : il défile déjà */ .reflogos__track>*{transition:none!important;transition-delay:0s!important} /* retournement des cartes prestations : encore ralenti */ .dom__inner{transition:transform 1.35s cubic-bezier(.25,.8,.25,1)!important} /* ============================================================ MENU MOBILE — alignement Des regles de bureau en !important (display:flex, nowrap, inline-flex sur .nav__drop) fuitaient dans le menu deroulant mobile : "Services" sortait a gauche et les sous-entrees n'etaient plus alignees sur les autres liens. ============================================================ */ @media(max-width:1119px){ .hdr .nav{ display:flex!important;flex-direction:column!important; flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important; } .hdr .nav__drop{ display:block!important;width:100%; border-bottom:1px solid var(--soft2); } /* l'intitule "Services" s'aligne sur les autres liens du menu */ .hdr .nav__droptrigger{ display:flex!important;align-items:center!important; justify-content:space-between;width:100%; padding:.95rem clamp(1.25rem,4vw,2.5rem)!important; font-size:1.05rem;font-weight:600;color:var(--ink); } .hdr .nav__droptrigger .nav__caret{flex:none;opacity:.55} /* les 7 prestations : legerement en retrait, avec un filet de rappel */ .hdr .nav__menu{ padding:0 0 .4rem 0!important; margin:0 clamp(1.25rem,4vw,2.5rem) .3rem; border-left:2px solid var(--soft2); } .hdr .nav__menu a{ padding:.72rem 1rem!important;font-size:.97rem; border-bottom:0!important;color:#5a6a85; } .hdr .nav__menu a.on{color:var(--blue);font-weight:600} .hdr .nav__drop:last-child{border-bottom:0} } /* ============================================================ PAGE INTERFACE 3D — plateformes & atouts ============================================================ */ /* --- les deux cartes plateformes --- */ .platforms{grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1080px;align-items:stretch} @media(max-width:900px){.platforms{grid-template-columns:1fr}} .platform{padding:0;border-radius:20px;border:1px solid #e3ebf6; box-shadow:0 2px 10px rgba(20,50,110,.05)} .platform__shot{margin:0;border-radius:0;border:0;box-shadow:none; border-bottom:1px solid #e9eef6;aspect-ratio:16/10} .platform__shot img{width:100%;height:100%;object-fit:cover} .platform__head{padding:1.7rem 1.7rem 0} .platform__badge{margin-bottom:.85rem;font-size:.72rem;letter-spacing:.12em;padding:.38rem .85rem; border-radius:6px} .platform__head h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.25;margin-bottom:.55rem} .platform__head p{font-size:1rem;line-height:1.65;margin-bottom:0;color:#5a6a85} /* intitulé au-dessus de la liste */ .platform__lab{ margin:1.6rem 1.7rem .9rem;padding-top:1.3rem;border-top:1px solid #eaf0f9; font-family:var(--disp);font-size:.7rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#8b9ab4; } /* liste en UNE colonne : alignement net des deux cartes */ .platform__pts{columns:auto;display:grid;gap:.62rem;margin:0;padding:0 1.7rem;flex:1} .platform__pts li{padding-left:1.55rem;margin-bottom:0;font-size:.97rem;line-height:1.5; font-weight:500;color:#3c4658;break-inside:auto} .platform__pts li::before{top:.5em;width:8px;height:8px;border-radius:1px} .platform--map .platform__pts li::before{background:#f2c230} .platform .btn{align-self:stretch;margin:1.8rem 1.7rem 1.7rem;text-align:center;justify-content:center} /* --- les atouts --- */ .feats{grid-template-columns:repeat(4,1fr);gap:1.1rem} @media(max-width:1080px){.feats{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.feats{grid-template-columns:1fr}} .feat{ display:block;position:relative;overflow:hidden; background:#fff;border:1px solid #e6edf7;border-radius:16px;padding:1.6rem 1.4rem; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s; } .feat::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(25,83,200,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(25,83,200,.05) 1px,transparent 1px); background-size:20px 20px; -webkit-mask-image:linear-gradient(150deg,#000,transparent 62%); mask-image:linear-gradient(150deg,#000,transparent 62%); } .feat:hover{transform:translateY(-4px);border-color:#cddcf2; box-shadow:0 20px 42px rgba(20,50,110,.12)} /* icône dans le réticule, comme les cartes prestations */ .feat__ic{ --pf-bk:#c3d4ef; --pf-len:11px; position:relative;z-index:1; width:52px;height:52px;margin-bottom:1.05rem;border-radius:0; display:flex;align-items:center;justify-content:center;flex:none; background: linear-gradient(var(--pf-bk),var(--pf-bk)) left top / var(--pf-len) 1.4px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left top / 1.4px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right top / var(--pf-len) 1.4px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right top / 1.4px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left bottom / var(--pf-len) 1.4px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) left bottom / 1.4px var(--pf-len) no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right bottom / var(--pf-len) 1.4px no-repeat, linear-gradient(var(--pf-bk),var(--pf-bk)) right bottom / 1.4px var(--pf-len) no-repeat; transition:--pf-bk .35s ease,--pf-len .45s cubic-bezier(.2,.8,.2,1); } .feat:hover .feat__ic{--pf-bk:#f2c230;--pf-len:16px} .feat__ic svg{width:24px;height:24px;stroke:#1953c8;fill:none; transition:stroke .35s ease} .feat:hover .feat__ic svg{stroke:#11317a} .feat__b{position:relative;z-index:1} .feat b{font-family:var(--disp);font-size:1.02rem;font-weight:700;letter-spacing:-.012em; color:#0e1b33;display:block;margin-bottom:.45rem;transition:color .3s ease} .feat:hover b{color:#1953c8} .feat span{font-size:.93rem;line-height:1.62;color:#5a6579;display:block} @media(prefers-reduced-motion:reduce){ .feat,.feat__ic,.feat__ic svg,.feat b{transition:none} .feat:hover{transform:none} } /* ============================================================ RÉFÉRENCES — bandeau défilant ============================================================ */ .reflogos{ position:relative;display:block;overflow:hidden;max-width:100%;margin:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .reflogos__track{ display:flex;flex-wrap:nowrap;align-items:center;gap:1.5rem;width:max-content; animation:refScroll 38s linear infinite; } .reflogos:hover .reflogos__track{animation-play-state:paused} @keyframes refScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .reflogo{ flex:none;width:290px;height:172px; display:flex;align-items:center;justify-content:center;padding:1.8rem 2rem; background:#fff;border:1px solid var(--x-line);border-radius:14px; transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; } .reflogo:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,50,110,.12)} .reflogo img{max-width:100%;max-height:118px;width:auto;height:auto;object-fit:contain} @media(max-width:640px){ .reflogo{width:225px;height:140px;padding:1.3rem 1.5rem} .reflogo img{max-height:92px} .reflogos__track{gap:1rem;animation-duration:30s} } /* animations coupées côté système : on garde le rail horizontal, mais c'est le doigt qui le fait défiler */ @media(prefers-reduced-motion:reduce){ .reflogos{ overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; -webkit-mask-image:none;mask-image:none; scrollbar-width:none; } .reflogos::-webkit-scrollbar{display:none} .reflogos__track{animation:none;flex-wrap:nowrap;width:max-content} .reflogo{scroll-snap-align:center} .reflogo--dup{display:none} } /* ============================================================ FAQ — questions fréquentes ============================================================ */ .faq{max-width:820px;margin:2.6rem auto 0;display:grid;gap:.75rem} .faq__i{ background:#fff;border:1px solid #e6edf7;border-radius:14px;overflow:hidden; transition:border-color .3s,box-shadow .4s; } .faq__i[open]{border-color:#cddcf2;box-shadow:0 14px 34px rgba(20,50,110,.10)} .faq__i summary{ list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.5rem;position:relative; font-family:var(--disp);font-size:1.03rem;font-weight:700;letter-spacing:-.01em; color:#0e1b33;line-height:1.4; } .faq__i summary::-webkit-details-marker{display:none} .faq__i summary::after{ content:"";position:absolute;right:1.5rem;top:50%;width:11px;height:11px; border-right:2px solid #1953c8;border-bottom:2px solid #1953c8; transform:translateY(-70%) rotate(45deg);transition:transform .35s cubic-bezier(.2,.8,.2,1); } .faq__i[open] summary::after{transform:translateY(-30%) rotate(225deg)} .faq__i summary:hover{color:#1953c8} .faq__i summary:focus-visible{outline:2.5px solid #1953c8;outline-offset:-3px;border-radius:14px} .faq__a{padding:0 1.5rem 1.35rem;font-size:1rem;line-height:1.72;color:#4a5772} .faq__a strong{color:#0e1b33;font-weight:600} @media(prefers-reduced-motion:reduce){.faq__i summary::after{transition:none}} /* ============================================================ MÉTHODES — deux colonnes comparatives ============================================================ */ .meth{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:1120px;margin:2.8rem auto 0} @media(max-width:1040px){.meth{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.meth{grid-template-columns:1fr}} .meth__c{ position:relative;background:#fff;border:1px solid #e6edf7;border-radius:18px; padding:1.9rem 1.8rem;overflow:hidden;display:flex;flex-direction:column; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s; } .meth__c::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(25,83,200,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(25,83,200,.05) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(148deg,#000,transparent 60%); mask-image:linear-gradient(148deg,#000,transparent 60%); } .meth__c:hover{transform:translateY(-5px);border-color:#cddcf2; box-shadow:0 22px 48px rgba(20,50,110,.13)} .meth__c>*{position:relative;z-index:1} .meth__t{font-family:var(--disp);font-size:1.22rem;font-weight:800;letter-spacing:-.02em; color:#0e1b33;margin:0 0 .25rem} .meth__m{display:inline-block;font-family:var(--disp);font-size:.7rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:#1953c8;background:#eef3fc; padding:.3rem .75rem;border-radius:20px;margin-bottom:1rem} .meth__d{font-size:1rem;line-height:1.68;color:#5a6a85;margin:0 0 1.3rem} .meth__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;margin-top:auto} .meth__l li{position:relative;padding-left:1.5rem;font-size:.95rem;color:#3c4658;font-weight:500} .meth__l li::before{content:"";position:absolute;left:0;top:.48em;width:8px;height:8px; background:#f2c230;border-radius:1px;transform:rotate(45deg)} /* ============================================================ MAILLAGE INTERNE — prestations liées ============================================================ */ .plinks{padding:clamp(3rem,6vw,4.5rem) 0;background:linear-gradient(180deg,#f7fafe,#eef4fc)} .plinks__grid{display:grid;grid-template-columns:repeat(3,1fr); gap:1.1rem;margin-top:2.4rem;max-width:1000px;margin-left:auto;margin-right:auto} @media(max-width:1000px){.plinks__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.plinks__grid{grid-template-columns:1fr}} .plink{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid #e6edf7;border-radius:16px;padding:1.6rem 1.5rem; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s; } .plink::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(25,83,200,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(25,83,200,.05) 1px,transparent 1px); background-size:20px 20px; -webkit-mask-image:linear-gradient(150deg,#000,transparent 60%); mask-image:linear-gradient(150deg,#000,transparent 60%); } .plink:hover{transform:translateY(-4px);border-color:#cddcf2; box-shadow:0 20px 44px rgba(20,50,110,.12)} .plink>*{position:relative;z-index:1} .plink__k{font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#8b9ab4;margin:0 0 .5rem} .plink__t{font-family:var(--disp);font-size:1.08rem;font-weight:700;letter-spacing:-.014em; line-height:1.3;color:#0e1b33;margin:0 0 .55rem;transition:color .3s} .plink:hover .plink__t{color:#1953c8} .plink__d{font-size:.94rem;line-height:1.62;color:#5a6579;margin:0 0 1.1rem} .plink__go{margin-top:auto;font-family:var(--disp);font-size:.85rem;font-weight:700; color:#1953c8;display:inline-flex;align-items:center;gap:.35em} .plink__go span{transition:transform .35s cubic-bezier(.2,.8,.2,1);display:inline-block} .plink:hover .plink__go span{transform:translateX(4px)} .plink:focus-visible{outline:2.5px solid #1953c8;outline-offset:3px} @media(prefers-reduced-motion:reduce){ .plink,.plink__t,.plink__go span{transition:none} .plink:hover{transform:none} }