/* Premium expertise bento — homepage only */
.expertise-section{padding-block:170px 205px}
.expertise-section>.container{width:min(calc(100% - 80px),1360px)}
.expertise-section .expertise-heading{max-width:920px;margin:0 0 100px;text-align:left}
.expertise-section .expertise-heading h2{font-size:clamp(3.35rem,6vw,6.35rem);line-height:.98}
.expertise-section .expertise-heading p{max-width:760px;margin:30px 0 0;color:#aebdd1;font-size:1.08rem;line-height:1.85}
.expertise-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(15,110px);gap:20px}
.expertise-card{--mouse-x:50%;--mouse-y:50%;position:relative;display:flex;min-width:0;padding:36px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(20,110,255,.09),transparent 38%),linear-gradient(145deg,rgba(15,35,70,.76),rgba(4,14,34,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 60px rgba(0,0,0,.14);transition:border-color .42s var(--ease-premium),transform .42s var(--ease-premium),box-shadow .42s var(--ease-premium)}
.expertise-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 32%,transparent 72%,rgba(8,102,255,.04));pointer-events:none}
.expertise-card::after{content:"";position:absolute;width:280px;height:280px;right:-145px;top:-155px;border-radius:50%;background:rgba(8,102,255,.16);filter:blur(45px);opacity:.34;pointer-events:none;transition:opacity .4s,transform .55s var(--ease-premium)}
.expertise-card:hover{z-index:2;transform:translateY(-4px);border-color:rgba(91,163,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 75px rgba(0,0,0,.25),0 0 34px rgba(8,102,255,.07)}
.expertise-card:hover::after{opacity:.56;transform:scale(1.08)}
.expertise-content{position:static;display:flex;min-width:0;flex-direction:column;align-items:flex-start}.expertise-content>*{position:relative;z-index:3}
.expertise-index{display:block;margin-bottom:20px;color:#5ebcff;font-size:.67rem;font-weight:800;letter-spacing:.15em}
.expertise-card h3{font-size:clamp(1.45rem,2.3vw,2.45rem);line-height:1.04}
.expertise-card p{max-width:500px;margin-top:18px;color:#aab9cc;font-size:.91rem;line-height:1.72}
.expertise-link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:24px;color:#65bdff;font-size:.84rem;font-weight:750}
.expertise-link::after{content:"";position:absolute;inset:0;z-index:5}
.expertise-card:has(.expertise-link:focus-visible){outline:3px solid #65bdff;outline-offset:3px}
.expertise-link b{font-size:1rem;transition:transform .32s var(--ease-premium)}
.expertise-card:hover .expertise-link b{transform:translateX(5px)}
.expertise-card--vitrine{grid-column:1/8;grid-row:1/6;padding:48px}
.expertise-card--commerce{grid-column:8/13;grid-row:1/4}
.expertise-card--seo{grid-column:8/13;grid-row:4/6}
.expertise-card--refonte{grid-column:1/5;grid-row:6/9}
.expertise-card--ai{grid-column:5/13;grid-row:6/10;padding:46px}
.expertise-card--hosting{grid-column:1/5;grid-row:9/12}
.expertise-card--maintenance{grid-column:5/9;grid-row:10/12}
.expertise-card--app{grid-column:9/13;grid-row:10/12}
.expertise-card--custom{grid-column:1/13;grid-row:12/16;padding:48px 52% 48px 50px}

/* Site vitrine visual */
.expertise-card--vitrine .expertise-content{width:47%;justify-content:flex-end}
.vitrine-mockup{position:absolute;z-index:2;right:-6%;top:10%;width:57%;height:76%;overflow:hidden;border:7px solid #121d31;border-radius:16px;background:#071a35;box-shadow:-28px 36px 75px rgba(0,0,0,.42),0 0 40px rgba(8,102,255,.13);transform:perspective(900px) rotateY(-7deg);transition:transform .65s var(--ease-premium)}
.expertise-card--vitrine:hover .vitrine-mockup{transform:perspective(900px) rotateY(-4deg) translateY(-4px)}
.mockup-bar{display:flex;gap:5px;height:25px;padding:9px;background:#ecf1f7}.mockup-bar i{width:6px;height:6px;border-radius:50%;background:#9da7b4}
.mockup-nav{display:flex;align-items:center;gap:16px;padding:21px 25px;color:#fff;font-size:.52rem}.mockup-nav span{width:35px;height:4px;border-radius:5px;background:#49627c}.mockup-nav span:first-of-type{margin-left:auto}
.mockup-hero{position:relative;height:calc(100% - 67px);padding:35px 27px;background:radial-gradient(circle at 80% 25%,rgba(35,124,255,.32),transparent 35%),linear-gradient(145deg,#07172f,#0c315d)}
.mockup-hero::after{content:"";position:absolute;right:12%;top:18%;width:33%;aspect-ratio:1;border:1px solid rgba(89,180,255,.36);border-radius:50%;box-shadow:0 0 0 18px rgba(8,102,255,.045),0 0 45px rgba(8,102,255,.16)}
.mockup-hero small{color:#66c8ff;font-size:.47rem;letter-spacing:.11em}.mockup-hero strong{display:block;margin:13px 0 24px;color:#fff;font-size:1.42rem;line-height:1.05}.mockup-hero em{display:inline-block;padding:9px 13px;border-radius:6px;background:#1676f8;color:#fff;font-size:.49rem;font-style:normal}
.mockup-phone{position:absolute;z-index:3;right:4%;bottom:2%;width:24%;height:51%;padding:35px 12px 12px;border:6px solid #0a101d;border-radius:18px;background:linear-gradient(160deg,#0a274e,#071426);box-shadow:0 22px 45px rgba(0,0,0,.45)}
.mockup-phone>i{position:absolute;top:0;left:29%;width:42%;height:9px;border-radius:0 0 7px 7px;background:#0a101d}.mockup-phone b{color:#fff;font-size:.66rem;line-height:1.15}.mockup-phone span{display:block;width:70%;height:4px;margin-top:13px;background:#3d6b9b}

/* E-commerce visual */
.expertise-card--commerce .expertise-content{width:52%}
.commerce-ui{position:absolute;right:6%;bottom:8%;width:38%;height:61%;padding:12px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:#eef5fb;box-shadow:0 25px 55px rgba(0,0,0,.3);transform:rotate(2deg);transition:transform .5s var(--ease-premium)}
.expertise-card--commerce:hover .commerce-ui{transform:rotate(0) translateY(-3px)}
.product-image{display:grid;place-items:center;height:43%;border-radius:9px;background:linear-gradient(145deg,#cde4f5,#85bce1)}.product-image span{width:48px;height:60px;border-radius:14px 14px 9px 9px;background:linear-gradient(160deg,#0f3157,#257ad2);box-shadow:0 10px 20px rgba(5,42,86,.25)}
.product-info{padding:9px 4px}.product-info small{display:block;color:#1775cf;font-size:.42rem;font-weight:800}.product-info b{display:block;margin:3px 0 7px;color:#0b1b30;font-size:.58rem}.product-info i{display:block;width:100%;height:3px;margin:4px 0;border-radius:4px;background:#c4d1dc}.product-info i:nth-of-type(2){width:68%}.product-info .product-action{display:block;width:100%;margin-top:8px;padding:6px;border-radius:5px;background:#0870e4;color:#fff;text-align:center;font-size:.44rem}
.cart-chip{position:absolute;right:-13px;top:-13px;padding:7px 9px;border:1px solid rgba(75,174,255,.35);border-radius:999px;background:#07172e;color:#bdd8ef;font-size:.48rem;box-shadow:0 8px 24px rgba(0,0,0,.3)}.cart-chip b{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:4px;border-radius:50%;background:#1686f7;color:#fff}

/* SEO and transformation visuals */
.expertise-card--seo{align-items:center}.expertise-card--seo .expertise-content{width:54%}.seo-visual{position:absolute;right:5%;bottom:12%;width:39%;padding:14px;border:1px solid rgba(76,170,255,.17);border-radius:14px;background:rgba(3,18,40,.65)}
.seo-visual span{color:#8fb7d8;font-size:.55rem}.seo-visual svg{width:100%;margin-top:5px;overflow:visible;fill:none}.seo-grid{stroke:rgba(135,180,215,.12);stroke-width:1}.seo-curve{stroke:#38cfff;stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.4s .35s var(--ease-premium)}.expertise-card--seo.is-visible .seo-curve{stroke-dashoffset:0}.seo-visual circle{fill:#38cfff;filter:drop-shadow(0 0 6px #38cfff)}
.expertise-card--refonte{flex-direction:column}.expertise-card--refonte .expertise-content{height:61%}.refonte-visual{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:100%;margin-top:auto}.refonte-visual>span{color:#4c9cff}.refonte-before,.refonte-after{height:70px;padding:10px;border-radius:9px;background:#26303b}.refonte-before small,.refonte-after small{color:#8290a0;font-size:.43rem}.refonte-before i{display:block;height:5px;margin-top:7px;background:#48515a}.refonte-before i:nth-of-type(2){width:70%}.refonte-after{background:linear-gradient(145deg,#0b3261,#071b35)}.refonte-after small{color:#57b8ff}.refonte-after b,.refonte-after i,.refonte-after em{display:block;height:5px;margin-top:7px;border-radius:3px;background:#217fe4}.refonte-after i{width:70%;background:#7fa7c9}.refonte-after em{width:38%;height:11px;background:#1376e5}

/* AI workflow */
.expertise-card--ai{align-items:flex-start}.expertise-card--ai .expertise-content{width:46%}.ai-workflow{position:absolute;z-index:2;right:4%;top:13%;display:flex;width:47%;height:74%;align-items:center;justify-content:center;gap:8px}
.workflow-node{display:flex;position:relative;z-index:2;width:92px;min-height:92px;padding:14px 10px;flex-direction:column;justify-content:center;border:1px solid rgba(86,169,255,.2);border-radius:15px;background:rgba(6,26,53,.88);box-shadow:0 14px 35px rgba(0,0,0,.2);opacity:.35;transform:translateY(8px);transition:opacity .55s var(--ease-premium),transform .55s var(--ease-premium),border-color .4s}
.workflow-node small{color:#5daef1;font-size:.42rem;letter-spacing:.09em}.workflow-node b{margin-top:7px;color:#eaf5ff;font-size:.68rem}.workflow-node--ai{width:74px;border-color:rgba(56,207,255,.48);background:radial-gradient(circle at 50% 42%,rgba(8,102,255,.35),rgba(4,20,43,.94))}.workflow-node--ai b{font-size:1.2rem;color:#69d4ff}.workflow-node--result{border-color:rgba(69,194,255,.4)}
.ai-workflow>i{position:relative;display:block;flex:1;height:1px;background:rgba(80,159,225,.2);overflow:hidden}.ai-workflow>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#38cfff,transparent);transform:translateX(-110%)}
.expertise-card--ai.is-visible .workflow-node{opacity:1;transform:none}.expertise-card--ai.is-visible .workflow-node:nth-of-type(2){transition-delay:.16s}.expertise-card--ai.is-visible .workflow-node:nth-of-type(3){transition-delay:.32s}.expertise-card--ai.is-visible .workflow-node:nth-of-type(4){transition-delay:.48s}.expertise-card--ai.is-visible .ai-workflow>i::after{animation:workflow-light 2.7s .6s ease-in-out infinite}
@keyframes workflow-light{0%,20%{transform:translateX(-110%)}70%,100%{transform:translateX(110%)}}

/* Infrastructure, maintenance and application */
.expertise-card--hosting{flex-direction:column}.expertise-card--hosting .expertise-content{height:62%}.server-visual{width:100%;margin-top:auto}.server-visual>div{display:flex;align-items:center;gap:7px;height:31px;margin-top:6px;padding:0 11px;border:1px solid rgba(108,167,215,.15);border-radius:7px;background:rgba(3,16,34,.72)}.server-visual>div>i{width:6px;height:6px;border-radius:50%;background:#39d59f;box-shadow:0 0 10px rgba(57,213,159,.75);animation:server-pulse 2.4s ease-in-out infinite}.server-visual>div>span{width:4px;height:4px;border-radius:50%;background:#45637d}.server-visual>div>b{margin-left:auto;color:#6f91ae;font-size:.45rem;letter-spacing:.1em}.server-visual>small{display:block;margin-top:8px;color:#7998b2;font-size:.51rem}.server-visual>small i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#39d59f}@keyframes server-pulse{50%{opacity:.45;box-shadow:0 0 4px rgba(57,213,159,.3)}}
.expertise-card--maintenance,.expertise-card--app{padding:28px}.expertise-card--maintenance .expertise-content,.expertise-card--app .expertise-content{width:56%}.expertise-card--maintenance h3,.expertise-card--app h3{font-size:1.45rem}.expertise-card--maintenance p,.expertise-card--app p{font-size:.78rem}.maintenance-status{position:absolute;right:5%;top:19%;width:35%;padding:13px;border:1px solid rgba(83,166,236,.16);border-radius:13px;background:rgba(3,18,38,.7)}.maintenance-status strong{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#e9f7ff;font-size:.56rem}.maintenance-status svg{width:19px;fill:none;stroke:#41d7a4;stroke-width:1.7}.maintenance-status>span{display:block;margin-top:7px;color:#86a0b8;font-size:.46rem}.maintenance-status>span i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#41d7a4;animation:server-pulse 2.5s ease-in-out infinite}.maintenance-status>span:nth-of-type(2) i{animation-delay:-.7s}.maintenance-status>span:nth-of-type(3) i{animation-delay:-1.4s}
.expertise-card--maintenance .expertise-index{margin-bottom:12px}.expertise-card--maintenance p{margin-top:10px;line-height:1.55}.expertise-card--maintenance .expertise-link{padding-top:10px}
.dashboard-ui{position:absolute;right:4%;top:18%;width:35%;height:62%;overflow:hidden;border:1px solid rgba(91,164,225,.2);border-radius:11px;background:#071a31}.dashboard-top{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.08);color:#abc5da;font-size:.45rem}.dashboard-top i{width:14px;height:5px;border-radius:5px;background:#1879db}.dashboard-side{position:absolute;left:0;top:24px;bottom:0;width:24px;padding:9px 7px;background:#051426}.dashboard-side i{display:block;height:4px;margin-bottom:8px;background:#31506c}.dashboard-main{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-left:24px;padding:8px}.dashboard-main>span{height:23px;border:1px solid rgba(71,151,220,.16);border-radius:5px;background:rgba(18,72,123,.3)}.dashboard-main svg{grid-column:1/-1;width:100%;height:42px;fill:none;stroke:#36caff;stroke-width:2}.dashboard-main path{stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.3s .45s var(--ease-premium)}.expertise-card--app.is-visible .dashboard-main path{stroke-dashoffset:0}

/* Custom development */
.expertise-card--custom{align-items:center;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(20,110,255,.11),transparent 38%),linear-gradient(120deg,rgba(14,39,79,.86),rgba(4,14,34,.98) 65%)}
.expertise-card--custom h3{font-size:clamp(2.2rem,3.7vw,4.25rem)}.expertise-card--custom h3 span{color:#2487ff}.expertise-card--custom p{max-width:650px;font-size:1rem}.custom-code{position:absolute;right:5%;top:17%;display:flex;width:40%;height:66%;padding:38px;flex-direction:column;justify-content:center;border:1px solid rgba(79,162,235,.18);border-radius:20px;background:linear-gradient(145deg,rgba(3,18,40,.84),rgba(8,31,61,.65));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 60px rgba(0,0,0,.26);color:#5dbdff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;transition:transform .55s var(--ease-premium)}.expertise-card--custom:hover .custom-code{transform:translateY(-4px)}.custom-code span{font-size:.76rem}.custom-code b{margin:18px 0 8px;padding-left:25px;color:#e5f3ff;font-size:1.05rem}.custom-code i{padding-left:25px;color:#6688a7;font-size:.68rem;font-style:normal}

@media(max-width:1100px){
  .expertise-section>.container{width:min(calc(100% - 56px),1360px)}
  .expertise-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
  .expertise-card{grid-column:auto!important;grid-row:auto!important;min-height:330px}
  .expertise-card--vitrine,.expertise-card--ai,.expertise-card--custom{grid-column:1/-1!important;min-height:560px}
  .expertise-card--commerce{min-height:400px}.expertise-card--seo{min-height:300px}
  .expertise-card--maintenance,.expertise-card--app{min-height:330px}
}
@media(max-width:820px){
  .expertise-section{padding-block:115px 135px}
  .expertise-section>.container{width:calc(100vw - 40px);max-width:1360px}
  .expertise-section .expertise-heading{margin-bottom:65px}
  .expertise-heading,.expertise-bento{width:100%;min-width:0;max-width:100%}.expertise-bento{grid-template-columns:minmax(0,1fr);gap:16px}
  .expertise-card,.expertise-card--vitrine,.expertise-card--ai,.expertise-card--custom{grid-column:1!important;width:100%;min-width:0;max-width:100%;min-height:390px;padding:32px}
  .expertise-card--vitrine{min-height:590px}.expertise-card--ai{min-height:590px}.expertise-card--custom{min-height:520px;padding-bottom:245px}
  .expertise-card--vitrine .expertise-content,.expertise-card--commerce .expertise-content,.expertise-card--seo .expertise-content,.expertise-card--ai .expertise-content,.expertise-card--maintenance .expertise-content,.expertise-card--app .expertise-content{width:100%}
  .expertise-card--vitrine .expertise-content{height:49%;justify-content:flex-start}.expertise-card--vitrine .expertise-link{margin-top:16px}
  .vitrine-mockup{right:5%;top:auto;bottom:4%;width:90%;height:46%;transform:none}.expertise-card--vitrine:hover .vitrine-mockup{transform:translateY(-3px)}
  .commerce-ui{right:7%;bottom:6%;width:38%;height:48%}
  .seo-visual{right:7%;bottom:8%;width:45%}
  .ai-workflow{left:5%;right:5%;top:auto;bottom:4%;width:90%;height:37%}
  .custom-code{right:6%;top:auto;bottom:5%;width:88%;height:39%;padding:25px}
}
@media(max-width:540px){
  .expertise-section{padding-block:95px 110px}.expertise-section>.container{width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
  .expertise-section .expertise-heading h2{font-size:2.75rem}.expertise-section .expertise-heading p{font-size:.96rem}
  .expertise-section .expertise-heading p,.expertise-card h3,.expertise-card p{overflow-wrap:anywhere}
  .expertise-card,.expertise-card--vitrine,.expertise-card--ai,.expertise-card--custom{min-height:410px;padding:27px;border-radius:19px}
  .expertise-card h3{font-size:1.9rem}.expertise-card p{font-size:.86rem}.expertise-card--vitrine{min-height:600px}.expertise-card--commerce{min-height:500px}.expertise-card--seo{min-height:440px}.expertise-card--ai{min-height:640px}.expertise-card--custom{min-height:600px;padding-bottom:260px}.expertise-card--custom h3{font-size:2.2rem}
  .expertise-card--maintenance,.expertise-card--app{min-height:450px}.expertise-card--maintenance .expertise-content,.expertise-card--app .expertise-content{width:100%}
  .commerce-ui{width:53%;height:43%}.seo-visual{width:63%}.maintenance-status,.dashboard-ui{right:7%;top:auto;bottom:6%;width:58%;height:auto}.dashboard-ui{height:35%}
  .ai-workflow{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px;height:44%}.workflow-node{width:100%;min-height:75px}.ai-workflow>i{display:none}.workflow-node--result{grid-column:auto}.custom-code b,.custom-code i{padding-left:12px}
}
@media(hover:none),(pointer:coarse){.expertise-card{background:linear-gradient(145deg,rgba(15,35,70,.76),rgba(4,14,34,.96))}}
@media(prefers-reduced-motion:reduce){.seo-curve,.dashboard-main path{stroke-dashoffset:0!important}.workflow-node{opacity:1!important;transform:none!important}.ai-workflow>i::after,.server-visual>div>i,.maintenance-status>span i{animation:none!important}}