:root{--color-dark-primary:#12272b;--color-dark-secondary:#1a3638;--color-light-blue:#abd8d8;--color-accent-yellow:#f1fd0d;--color-white:#ffffff;--color-light-grey:#f4f6f8;--shadow-soft:0 10px 40px -10px rgba(18,39,43,0.1);--shadow-hover:0 20px 40px -10px rgba(18,39,43,0.2);--radius-lg:16px;--radius-md:8px;--spacing-sm:10px;--spacing-lg:40px;--border-radius-md:8px;--shadow-light:0 8px 22px -12px rgba(18,39,43,0.25)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{font-family:'Inter','Segoe UI',system-ui,sans-serif;line-height:1.7;color:var(--color-dark-primary);background-color:#fafbfc;overflow-x:hidden} h1,h2,h3,h4{line-height:1.2;letter-spacing:-0.02em;color:var(--color-dark-primary)} h1{font-weight:900;margin-bottom:1rem} h2{font-size:2.5rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--color-light-blue),var(--color-accent-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:none} .section:not(.graph) h2{background:linear-gradient(115deg,#17393b 0%,#2d666c 58%,#5b969d 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none} .section:not(.graph) h2::after{background:linear-gradient(90deg,var(--color-accent-yellow),var(--color-light-blue))} .seo-ia-summary .ia-title-emoji{color:#ffd54a;-webkit-text-fill-color:#ffd54a;background:none} h2::after{content:'';display:block;width:60px;height:4px;background:var(--color-accent-yellow);margin:1rem auto 0;border-radius:2px} p{margin-bottom:1.5rem;color:#546e7a;font-size:1.1rem} a{text-decoration:none;transition:all 0.3s ease} .container{max-width:1100px;margin:0 auto;padding:0 24px} #pourquoi-choisir h3,#pourquoi-choisir h3 strong{color:#546e7a} .navbar{position:fixed;top:0;width:100%;background:rgba(18,39,43,0.95);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid rgba(255,255,255,0.1)} .navbar-content{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:8px 14px} .navbar-start{justify-self:start;position:relative} .navbar-center{justify-self:center} .navbar-end{justify-self:end} .navbar-logo-link{display:inline-flex;align-items:center} .navbar-logo{height:52px;width:auto} .nav-dropdown{position:relative} .nav-dropdown summary{list-style:none} .nav-dropdown summary::-webkit-details-marker{display:none} .nav-menu-btn{width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,0.08);color:var(--color-white);border:1px solid rgba(255,255,255,0.2)} .nav-menu-btn svg{width:20px;height:20px} .nav-menu-list{position:absolute;top:calc(100% + 10px);left:0;width:min(280px,82vw);margin:0;padding:10px;list-style:none;background:#ffffff;border:1px solid #dce2ea;border-radius:12px;box-shadow:0 14px 30px rgba(18,39,43,0.22);z-index:1100} .nav-menu-list li + li{margin-top:6px} .nav-menu-list a{display:block;padding:10px 12px;border-radius:8px;color:var(--color-dark-primary);font-weight:600;text-decoration:none} .nav-menu-list a:hover{background:rgba(84,110,122,0.12)} .nav-btn-devis{background:var(--color-accent-yellow);color:var(--color-dark-primary);padding:10px 20px;border-radius:50px;font-weight:700;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px} .nav-btn-devis:hover{background:var(--color-white);transform:translateY(-2px)} .header-animation-area{position:relative;background:linear-gradient(180deg,#17393b 0%,#11282b 100%);padding:44px 0 72px;text-align:center;overflow:hidden;margin-top:60px} .header-animation-area .container{position:relative;z-index:1;max-width:1320px} .header-animation-area h1{color:var(--color-light-grey);margin:26px auto;font-size:80px} .header-animation-area p{color:rgba(255,255,255,0.86);font-size:1.1rem;max-width:740px;margin:0 auto;opacity:1} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.95);color:var(--color-dark-primary);padding:10px 20px;border-radius:999px;font-size:0.9rem;font-weight:700;box-shadow:var(--shadow-soft);margin-bottom:20px} .hero-badge-stars{color:#fbbc05;letter-spacing:2px} .hero-video-wrap{width:100%;max-width:700px;margin:32px auto 0;aspect-ratio:16 / 9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 10px 40px rgba(0,0,0,0.4)} .hero-video-wrap iframe{width:100%;height:100%;border:0;display:block} @media (max-width:768px){.hero-video-wrap{max-width:95%}} .circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;margin:0;pointer-events:none} .circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.55),rgba(255,255,255,0.12) 60%,rgba(255,255,255,0.06) 100%);animation:animate 25s linear infinite;bottom:-150px;border-radius:50%;box-shadow:inset -8px -12px 18px rgba(255,255,255,0.06),0 0 10px rgba(171,216,216,0.12)} .circles li:nth-child(1){left:25%;width:90px;height:90px;animation-delay:0s} .circles li:nth-child(2){left:10%;width:52px;height:52px;animation-delay:2s;animation-duration:12s} .circles li:nth-child(3){left:70%;width:58px;height:58px;animation-delay:4s} .circles li:nth-child(4){left:40%;width:78px;height:78px;animation-delay:0s;animation-duration:18s} .circles li:nth-child(5){left:65%;width:56px;height:56px;animation-delay:0s} .circles li:nth-child(6){left:75%;width:120px;height:120px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s} .circles li:nth-child(8){left:50%;width:60px;height:60px;animation-delay:15s;animation-duration:45s} .circles li:nth-child(9){left:20%;width:50px;height:50px;animation-delay:2s;animation-duration:35s} .circles li:nth-child(10){left:85%;width:150px;height:150px;animation-delay:0s;animation-duration:11s} @keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0} 100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}} .cta-group{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:-40px;position:relative;z-index:10;padding:0 20px} .cta-btn{background:var(--color-dark-primary);color:var(--color-white);padding:16px 32px;border-radius:8px;font-weight:600;box-shadow:0 4px 15px rgba(18,39,43,0.3);border:1px solid transparent;text-align:center} .cta-btn:hover{background:var(--color-accent-yellow);color:var(--color-dark-primary);transform:translateY(-3px);box-shadow:0 8px 25px rgba(241,253,13,0.4)} .cta-btn.alt-btn{background:transparent;border:2px solid var(--color-dark-primary);color:var(--color-dark-primary);box-shadow:none} .cta-btn.alt-btn:hover{background:var(--color-dark-primary);color:var(--color-white)} .section.graph .cta-btn,.contact-section .cta-btn{background:var(--color-accent-yellow);color:var(--color-dark-primary);border:1px solid transparent;box-shadow:0 8px 24px rgba(241,253,13,0.28)} .section.graph .cta-btn:hover,.contact-section .cta-btn:hover{background:transparent;color:#f3fbff;border-color:rgba(243,251,255,0.65);box-shadow:0 10px 26px rgba(0,0,0,0.28)} .section .container>.cta-btn{display:table;margin:22px auto 0} .table-of-contents{background:linear-gradient(180deg,#f7fbfc 0%,#eef4f6 100%);padding:48px 0;border-top:1px solid rgba(18,39,43,0.08);border-bottom:1px solid rgba(18,39,43,0.08);text-align:center} .table-of-contents .container{max-width:980px;background:var(--color-white);border:1px solid rgba(18,39,43,0.08);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:28px 24px} .table-of-contents .h2-as-p{font-size:1.75rem;color:var(--color-dark-secondary);margin-bottom:18px;position:relative;display:inline-block;font-weight:800;letter-spacing:-0.01em} .table-of-contents .h2-as-p::after{content:'';display:block;width:52%;height:3px;background:linear-gradient(90deg,transparent 0%,var(--color-accent-yellow) 25%,var(--color-light-blue) 75%,transparent 100%);margin:10px auto 0;border-radius:999px} .toc-list{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:10px;padding:0;margin:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height 0.35s ease,opacity 0.25s ease,transform 0.25s ease} .toc-list.visible{max-height:520px;margin-bottom:18px;opacity:1;transform:translateY(0)} .toc-list li{list-style:none} .toc-list li a{display:block;padding:10px 14px;background:#f3f8fa;color:var(--color-dark-primary);border-radius:999px;font-weight:600;font-size:0.9rem;transition:transform 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease,color 0.2s ease;border:1px solid rgba(18,39,43,0.12)} .toc-list li a:hover{background-color:var(--color-accent-yellow);color:var(--color-dark-primary);transform:translateY(-2px) scale(1.01);box-shadow:0 8px 18px rgba(18,39,43,0.14)} .toc-toggle-btn{margin-top:14px;padding:12px 22px;font-size:0.95rem;letter-spacing:0.02em;text-transform:uppercase;border-radius:999px;background:linear-gradient(135deg,var(--color-dark-primary),var(--color-dark-secondary));color:var(--color-white);border:1px solid rgba(255,255,255,0.1);box-shadow:0 10px 24px rgba(18,39,43,0.22)} .toc-toggle-btn:hover{background:linear-gradient(135deg,var(--color-accent-yellow),#d9ea13);color:var(--color-dark-primary);transform:translateY(-2px)} @media (max-width:768px){.table-of-contents{padding:36px 0} .table-of-contents .container{border-radius:var(--radius-md);padding:22px 14px} .table-of-contents .h2-as-p{font-size:1.45rem} .toc-list li a{font-size:0.82rem;padding:9px 12px}} .section{padding:80px 0} .section-eyebrow{display:inline-block;background:rgba(18,39,43,0.06);color:var(--color-dark-primary);border:1px solid rgba(18,39,43,0.12);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 16px;margin-bottom:16px} .section.graph .section-eyebrow{background:rgba(241,253,13,0.15);color:var(--color-accent-yellow);border-color:rgba(241,253,13,0.3)} .section-decor{position:absolute;z-index:0;width:150px;height:auto;pointer-events:none;user-select:none;opacity:0.9} #seo-vital,#temoignages,#metier,.contact-section{position:relative;overflow:hidden} #seo-vital .container,#temoignages .container,#metier .container,.contact-section .container{position:relative;z-index:1} #seo-vital .section-decor{bottom:-30px;left:-20px} #temoignages .section-decor{top:-10px;right:0;width:130px} #metier .section-decor{bottom:-20px;right:-10px} .contact-section .section-decor{top:-10px;left:-10px;width:130px;opacity:0.4} @media (max-width:900px){.section-decor{display:none}} .section.alt{background:var(--color-white);border-top:1px solid #eee;border-bottom:1px solid #eee} .section.split-layout .icon-list{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:768px){.section.split-layout .icon-list{grid-template-columns:1fr}} .icon-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:40px 0;padding:0;max-width:100%;list-style:none} .icon-list li{background:var(--color-white);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border-left:4px solid var(--color-accent-yellow);text-align:left;font-size:1rem;color:var(--color-dark-primary);transition:transform 0.3s ease} .icon-list li:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)} .icon-list li::before{content:'✓';color:var(--color-dark-primary);background:var(--color-accent-yellow);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;margin-right:10px;position:static;transform:none} .process-steps{list-style:none;margin:40px 0;padding:0;display:grid;gap:24px} .process-step{display:flex;align-items:flex-start;gap:20px;background:var(--color-white);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)} .process-step-number{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--color-dark-primary);color:var(--color-accent-yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem} .process-step-body h3{margin:0 0 6px;font-size:1.1rem} .process-step-body p{margin:0;font-size:0.95rem} @media (min-width:900px){.process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}} .section.graph{background:var(--color-dark-primary);color:var(--color-white);border-radius:var(--radius-lg);margin:40px 20px;padding:60px 40px} .section.graph h2{color:var(--color-white);background:none;-webkit-text-fill-color:currentColor;filter:none} .section.graph p{color:var(--color-light-blue)} .graph-bar{background:rgba(255,255,255,0.1);height:50px;border-radius:50px;margin:20px 0;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,0.2)} .graph-bar .bar{background:linear-gradient(90deg,var(--color-light-blue),var(--color-accent-yellow));height:100%;width:0;border-radius:50px;display:flex;align-items:center;padding-left:20px;color:#f8fbff;text-shadow:0 3px 4px #00000059;font-weight:700;font-size:0.95rem;transition:width 1.5s cubic-bezier(0.22,1,0.36,1);white-space:nowrap} .key-figures-bar-section{background:transparent;padding:60px 0} .figures-bar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;text-align:center;background:var(--color-white);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)} .figure-number{font-size:4rem;font-weight:900;color:var(--color-dark-primary);line-height:1;margin-bottom:10px;background:-webkit-linear-gradient(45deg,var(--color-dark-primary),var(--color-light-blue));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent} .figure-number::before{content:'+';background:-webkit-linear-gradient(45deg,var(--color-dark-primary),var(--color-light-blue));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent} .figure-label{color:#78909c;text-transform:uppercase;font-size:0.85rem;letter-spacing:1px;font-weight:600} .separator{display:none} .testimonials-section{background:#fafbfc} .google-certified{width:100%;text-align:center;margin:24px 0 40px;padding:18px 24px;font-weight:600;font-size:1.05rem;color:var(--color-dark-primary);background:linear-gradient(90deg,rgba(171,216,216,0.16),rgba(241,253,13,0.12),rgba(171,216,216,0.16));border-top:1px solid rgba(18,39,43,0.08);border-bottom:1px solid rgba(18,39,43,0.08)} .google-emoji{color:#fbbc05;margin-right:8px} .reviews-marquee{display:flex;flex-direction:column;gap:24px;margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .review-row{overflow:hidden} .review-track{display:flex;gap:24px;width:max-content;animation:reviews-scroll-right 100s linear infinite} .review-track.track-alt{animation-duration:130s} .reviews-marquee:hover .review-track{animation-play-state:paused} @keyframes reviews-scroll-right{from{transform:translateX(-50%)} to{transform:translateX(0)}} .review-track .review-card{flex:0 0 340px} @media (max-width:768px){.reviews-marquee{display:none}} .review-card{background:var(--color-white);padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid #eee;transition:all 0.3s ease} .review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:var(--color-accent-yellow)} .review-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px;border-bottom:1px solid #f0f0f0;padding-bottom:15px} .review-author-block{display:flex;flex-direction:column;gap:2px} .review-author{font-weight:700;color:var(--color-dark-primary)} .review-job{font-size:0.78rem;color:#8a97a3} .review-stars{color:#fbbc05;letter-spacing:2px;white-space:nowrap} .review-content{font-style:italic;color:#546e7a;font-size:0.95rem;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .review-date{display:block;margin-top:12px;font-size:0.75rem;color:#a3aeb8;text-transform:uppercase;letter-spacing:0.05em} .review-buttons{display:flex;justify-content:center;gap:20px;margin-top:40px;flex-wrap:wrap} .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px} .mockup-browser{border:1px solid #d5dae1;border-radius:14px;overflow:hidden;background:#ffffff;box-shadow:0 10px 24px rgba(18,39,43,0.14)} .mockup-browser-toolbar{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f4f6f9;border-bottom:1px solid #dfe4eb} .mockup-browser-actions{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto} .browser-btn{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35)} .browser-btn.close{background:#ff5f57} .browser-btn.minimize{background:#febc2e} .browser-btn.maximize{background:#28c840} .mockup-browser-url{flex:1;font-size:0.8rem;color:#556273;background:#ffffff;border:1px solid #d6dde8;border-radius:999px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blog-card{background:var(--color-white);border-radius:0;overflow:hidden;box-shadow:none;transition:transform 0.3s ease;display:block} .blog-card:hover{transform:translateY(-5px)} .blog-card img{width:100%;height:200px;object-fit:cover} .blog-info{padding:24px} .blog-info h3{font-size:1.2rem;margin-bottom:10px} .read-more{display:inline-block;margin-top:15px;color:var(--color-dark-primary);font-weight:700;border-bottom:2px solid var(--color-accent-yellow)} .blog-marquee{position:relative;overflow:hidden;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .blog-track{display:flex;gap:30px;width:max-content;animation:blog-scroll 90s linear infinite} .blog-marquee:hover .blog-track{animation-play-state:paused} .blog-track .mockup-browser{flex:0 0 320px} @keyframes blog-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media (max-width:768px){.blog-track .mockup-browser{flex:0 0 260px}} .blog-cta-wrap{text-align:center;margin-top:40px} .portfolio-marquee{position:relative;overflow:hidden;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .portfolio-track{display:flex;gap:24px;width:max-content;animation:portfolio-scroll 70s linear infinite reverse} .portfolio-marquee:hover .portfolio-track{animation-play-state:paused} .portfolio-card{flex:0 0 280px;display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--color-white);border-radius:var(--radius-md);padding:32px 24px;box-shadow:var(--shadow-soft);text-decoration:none;transition:transform 0.3s ease,box-shadow 0.3s ease} .portfolio-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)} .portfolio-card img{width:190px;height:190px;object-fit:contain;border-radius:8px} .portfolio-name{font-size:0.8rem;font-weight:600;color:var(--color-dark-primary);text-align:center;line-height:1.3} @keyframes portfolio-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media (max-width:768px){.portfolio-card{flex:0 0 210px;padding:22px 16px} .portfolio-card img{width:130px;height:130px}} .clients-strip-eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-transform:uppercase;letter-spacing:0.1em;font-size:0.8rem;font-weight:700;color:var(--color-dark-primary);margin:0 0 20px} .devsource-clients-strip{background:#f0f3f1 !important;padding:40px 0 !important;overflow:hidden !important;position:relative !important} .devsource-logos-wrap{overflow:hidden !important;position:relative !important;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent) !important;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent) !important} .devsource-logos{display:flex !important;align-items:center !important;gap:40px !important;width:max-content !important;animation:devsourceScroll 30s linear infinite !important} .devsource-logo{flex-shrink:0 !important;display:flex !important;justify-content:center !important;align-items:center !important;background:#ffffff !important;border-radius:24px !important;padding:20px 35px !important;box-shadow:0 4px 15px rgba(0,0,0,0.02) !important;opacity:.85 !important;transition:.3s ease !important;height:100px !important} .devsource-logo:hover{opacity:1 !important;transform:scale(1.05) !important;box-shadow:0 8px 25px rgba(0,0,0,0.05) !important} .devsource-logo img{object-fit:contain !important;filter:grayscale(100%) !important;opacity:0.8 !important;transition:.3s ease !important} .devsource-logo:hover img{filter:grayscale(0%) !important;opacity:1 !important} .logo-big img{max-width:170px !important;max-height:55px !important} .logo-medium img{max-width:155px !important;max-height:50px !important} .logo-small img{max-width:110px !important;max-height:55px !important} .logo-boosted img{max-width:190px !important;max-height:75px !important;transform:scale(1.25) !important} .devsource-your-name-link{text-decoration:none !important;display:inline-block !important;flex-shrink:0 !important;transition:transform 0.3s ease !important} .devsource-your-name-link:hover{transform:scale(1.05) !important} .devsource-your-name{display:flex !important;align-items:center !important;gap:12px !important;color:#12272b !important;font-weight:800 !important;font-size:16px !important;letter-spacing:0.5px !important;text-transform:uppercase !important;white-space:nowrap !important;padding:0 20px !important} .devsource-plus{width:34px !important;height:34px !important;border-radius:100px !important;background:#12272b !important;color:#f1fd0d !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:20px !important;font-weight:800 !important;transition:background 0.3s ease !important} .devsource-your-name-link:hover .devsource-plus{background:#1a3638 !important} .devsource-your-name span{color:#7d8a8a !important;font-size:11px !important;font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important;display:block !important;margin-top:2px !important} .devsource-clients-strip:hover .devsource-logos{animation-play-state:paused !important} .devsource-clients-tagline{text-align:center;margin:24px 0 0;color:#55645f;font-weight:600;font-size:0.95rem} @keyframes devsourceScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media (max-width:767px){.devsource-logos{gap:25px !important} .devsource-logo{padding:15px 25px !important;height:80px !important} .logo-big img{max-width:120px !important} .logo-medium img{max-width:110px !important} .logo-small img{max-width:80px !important} .logo-boosted img{max-width:140px !important;transform:scale(1.1) !important} .devsource-your-name{font-size:14px !important} .devsource-plus{width:30px !important;height:30px !important;font-size:16px !important}} .ia-box{background:var(--color-dark-secondary);color:var(--color-light-blue);padding:40px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.1);position:relative;overflow:hidden} .ia-box::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--color-accent-yellow)} .ia-box strong{color:var(--color-accent-yellow)} .ia-box p{color:var(--color-light-blue)} .faq-item{background:var(--color-white);margin-bottom:15px;border-radius:var(--radius-md);box-shadow:0 2px 5px rgba(0,0,0,0.05);overflow:hidden} .faq-question{width:100%;text-align:left;padding:20px;background:none;border:none;font-weight:600;font-size:1.1rem;cursor:pointer;display:flex;justify-content:space-between;color:var(--color-dark-primary)} .faq-question.active{color:var(--color-dark-primary);background:rgba(241,253,13,0.2)} .faq-answer{max-height:0;overflow:hidden;transition:all 0.3s ease;padding:0 20px;background:var(--color-white);color:#546e7a} .faq-answer.open{padding:20px;max-height:300px;border-top:1px solid #eee} .site-footer{background:linear-gradient(180deg,#102329 0%,#0d1b20 100%);color:#d7e7ee} .footer-top{padding:40px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .footer-col{display:flex;flex-direction:column;gap:10px} .footer-title{margin:0 0 6px;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:800;color:#f3fbff} .footer-link{color:rgba(215,231,238,0.82);font-size:0.95rem} .footer-link:hover{color:var(--color-accent-yellow);text-decoration:underline} .footer-bottom-wrap{border-top:1px solid rgba(171,216,216,0.2)} .footer-bottom{min-height:84px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px} .footer-brand{display:flex;align-items:center;gap:12px} .footer-logo{height:34px;width:auto;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35))} .footer-brand p{margin:0;color:rgba(215,231,238,0.9);font-size:0.88rem;line-height:1.4} .footer-brand p br{display:block} .footer-social{display:grid;grid-auto-flow:column;gap:10px} .footer-social a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(171,216,216,0.35);color:#d7e7ee;background:rgba(255,255,255,0.05);transition:transform 0.2s ease,background-color 0.2s ease,color 0.2s ease} .footer-social a:hover{transform:translateY(-2px);background:var(--color-accent-yellow);color:#12272b} .footer-social svg{fill:currentColor} .footer-copyright{padding:18px 24px 28px;text-align:center;border-top:1px solid rgba(171,216,216,0.12)} .footer-copyright p{margin:0;color:rgba(171,216,216,0.55);font-size:0.78rem;line-height:1.5} .floating-cta{position:fixed;bottom:30px;right:30px;z-index:2000} .mobile-call-fab{display:none;position:fixed;bottom:20px;left:16px;z-index:2000;align-items:center;gap:8px;background:var(--color-dark-primary);color:var(--color-white);padding:12px 18px;border-radius:999px;font-weight:700;font-size:0.9rem;text-decoration:none;box-shadow:0 10px 20px rgba(0,0,0,0.25)} .mobile-call-fab-icon{font-size:1.1rem} @media (max-width:768px){.mobile-call-fab{display:inline-flex}} .cta-toggle{width:60px;height:60px;border-radius:50%;background:var(--color-accent-yellow);color:var(--color-dark-primary);border:none;font-size:24px;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center} .cta-content{position:absolute;bottom:80px;right:0;width:280px;background:var(--color-white);padding:24px;border-radius:var(--radius-lg);box-shadow:0 10px 30px rgba(0,0,0,0.15);opacity:0;pointer-events:none;transform:translateY(20px);transition:all 0.3s ease;border:1px solid #eee} .floating-cta.open .cta-content{opacity:1;pointer-events:auto;transform:translateY(0)} .cta-content p{margin:10px 0;font-size:0.95rem;color:var(--color-dark-primary)} .cta-content a{color:var(--color-dark-primary);font-weight:600} .cta-content a:hover{color:var(--color-accent-yellow)} .cta-content .cta-btn{display:block;margin-top:14px;padding:12px 16px;border-radius:999px;text-align:center;background:var(--color-accent-yellow);color:var(--color-dark-primary);border:1px solid rgba(18,39,43,0.15);box-shadow:0 8px 18px rgba(18,39,43,0.18)} .cta-content .cta-btn:hover{background:var(--color-dark-primary);color:var(--color-white);transform:none} .related-links-section{background-color:var(--color-light-grey);padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)} .devsource-links-dropdown{max-width:1100px;margin:0 auto;background:var(--color-white);border:1px solid rgba(18,39,43,0.12);border-radius:var(--border-radius-md);box-shadow:var(--shadow-light);overflow:hidden} .devsource-links-dropdown summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;background:linear-gradient(135deg,var(--color-dark-primary),var(--color-dark-secondary));color:var(--color-white);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)} .devsource-links-dropdown summary::-webkit-details-marker{display:none} .devsource-links-dropdown summary::after{content:'+';font-size:1.4rem;line-height:1;color:var(--color-accent-yellow)} .devsource-links-dropdown[open] summary::after{content:'−'} .devsource-links-footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:1rem;background:#f6f6f6;border-top:1px solid #ddd;max-height:420px;overflow:auto} .devsource-links-footer a{display:block;padding:0.85rem 1rem;background-color:var(--color-white);border-radius:var(--border-radius-md);text-decoration:none;color:var(--color-dark-primary);font-weight:600;border:1px solid rgba(18,39,43,0.08);box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:transform 0.25s ease,background-color 0.25s ease,color 0.25s ease} .devsource-links-footer a:hover{background-color:var(--color-dark-secondary);color:var(--color-white);transform:translateY(-2px)} .contact-section{background:linear-gradient(180deg,var(--color-dark-secondary) 0%,var(--color-dark-primary) 100%);padding:80px 0;text-align:center} .contact-badge{display:inline-block;background:rgba(241,253,13,0.15);color:var(--color-accent-yellow);border:1px solid rgba(241,253,13,0.3);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 16px;margin-bottom:24px} .section.contact-section h2.contact-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#ffffff;letter-spacing:-0.04em;line-height:1.1;margin-bottom:12px;background:none;-webkit-text-fill-color:#ffffff;text-shadow:0 6px 22px rgba(171,216,216,0.22)} .section.contact-section h2.contact-title::after{display:none} .contact-sub{color:rgba(171,216,216,0.8);font-size:1.05rem;margin-bottom:48px} .contact-cards{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:40px} .contact-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:24px 32px;min-width:200px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.2s ease;box-shadow:var(--shadow-soft)} a.contact-card{text-decoration:none;color:inherit;cursor:pointer} .contact-card:hover{background:rgba(255,255,255,0.1);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .contact-icon{font-size:24px;margin-bottom:8px;color:var(--color-light-blue)} .contact-type{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(171,216,216,0.6);font-weight:600} .contact-value{font-size:1.05rem;font-weight:700;color:var(--color-light-grey)} .contact-trust{margin-top:16px;font-size:13px;color:rgba(171,216,216,0.45);margin-bottom:0} @media (max-width:1024px){.container{padding:0 20px} .section{padding:68px 0} .navbar-content{margin:8px 12px;gap:10px} .header-animation-area{padding:26px 0 62px} .header-animation-area h1{font-size:clamp(2.9rem,7.2vw,4.6rem);max-width:12ch} .header-animation-area p{font-size:1rem;max-width:90%} .figures-bar-grid{gap:24px;padding:28px} .section.graph{margin:24px 12px;padding:42px 26px} .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .footer-col:last-child{grid-column:1 / -1} .footer-bottom{padding:14px 20px} .footer-logo{height:30px}} @media (max-width:768px){h2{font-size:2rem} .container{padding:0 16px} .section{padding:56px 0} .navbar-content{display:flex;justify-content:space-between;align-items:center;margin:8px 10px;position:relative;min-height:48px} .navbar-start,.navbar-end{position:relative;z-index:2} .navbar-center{position:absolute;left:50%;transform:translateX(-50%);z-index:1} .navbar-logo{height:44px} .nav-menu-btn{width:38px;height:38px} .nav-menu-list{width:min(250px,86vw)} .nav-btn-devis{padding:8px 12px;font-size:0.75rem} .header-animation-area{margin-top:58px;padding:18px 0 48px} .header-animation-area h1{font-size:clamp(2.2rem,10.8vw,3.4rem);line-height:1;max-width:10ch;margin:18px auto 8px} .header-animation-area p{font-size:0.96rem;max-width:92%} .cta-group{margin-top:-26px;flex-direction:column;gap:10px;padding:0 16px} .cta-group .cta-btn{width:100%} .table-of-contents{padding:32px 0} .table-of-contents .container{padding:18px 12px} .toc-list.visible{max-height:680px} .icon-list,.section.split-layout .icon-list{grid-template-columns:1fr;gap:14px;margin:26px 0} .icon-list li{padding:18px} .graph-bar{height:46px} .graph-bar .bar{padding-left:14px;font-size:0.84rem} .figures-bar-grid{grid-template-columns:1fr 1fr;gap:16px;padding:18px} .figure-number{font-size:2.2rem} .section.graph{margin:18px 0;padding:26px 16px;border-radius:12px} .blog-grid{grid-template-columns:1fr;gap:18px} .review-buttons{gap:12px} .mockup-browser-url{font-size:0.72rem} .blog-card img{height:180px} .ia-box{padding:24px 18px} .devsource-links-footer{grid-template-columns:1fr;max-height:300px} .contact-section{padding:56px 0} .section.contact-section h2.contact-title{font-size:clamp(1.7rem,8.8vw,2.4rem)} .contact-sub{font-size:0.96rem;margin-bottom:24px} .contact-cards{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:24px} .contact-card{min-width:0;width:100%;padding:16px 14px} .floating-cta{right:14px;bottom:14px} .cta-toggle{width:54px;height:54px;font-size:21px} .cta-content{width:min(85vw,300px)} .footer-top{grid-template-columns:1fr;gap:14px;padding:26px 16px} .footer-col{gap:8px} .footer-title{font-size:0.78rem} .footer-link{font-size:0.9rem;line-height:1.35;padding:1px 0} .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:16px} .footer-brand{width:100%} .footer-logo{height:28px} .footer-brand p{font-size:0.82rem} .footer-social{grid-auto-flow:column;align-self:flex-start}} @media (max-width:480px){html{font-size:15px} .container{padding:0 14px} .header-animation-area h1{font-size:clamp(2rem,11.8vw,2.8rem)} .nav-btn-devis{padding:7px 10px;font-size:0.68rem} .graph-bar .bar{font-size:0.78rem} .figure-number{font-size:2rem} .blog-info{padding:16px} .footer-top{padding:22px 14px} .footer-bottom{padding:14px} .footer-logo{height:25px} .footer-social a{width:34px;height:34px}}