:root{--bg-main:#FFFFFF;--bg-secondary:#F8F6FC;--night-violet:#241242;--primary-violet:#6D28D9;--light-violet:#EDE7FB;--cta-blue:#38BDF8;--cta-blue-hover:#0EA5E9;--text-main:#241B36;--text-muted:#6B6478;--error-red:#DC2626;--font-title:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;--radius-card:16px;--radius-btn:10px;--shadow-soft:0 10px 30px -10px rgba(36,18,66,.1);--shadow-cta:0 10px 20px -5px rgba(56,189,248,.4);--transition:.3s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text-main);background:var(--bg-main);line-height:1.6;font-size:clamp(15px, 1.6vw, 17px);overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-title);color:var(--night-violet);line-height:1.2;margin-bottom:16px}
p{margin-bottom:16px}
a{color:var(--primary-violet);text-decoration:none}
ul{list-style:none}
img{max-width:100%;height:auto}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:clamp(64px, 10vw, 96px) 0;position:relative}
.section-bg-alt{background:var(--bg-secondary)}
.grid{display:grid;gap:clamp(20px, 4vw, 32px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}
.badge{display:inline-block;background:var(--light-violet);color:var(--primary-violet);padding:6px 14px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:16px;font-family:var(--font-title)}
.h1-xl{font-size:clamp(32px, 6vw, 56px);font-weight:700;margin-bottom:24px}
.h2-lg{font-size:clamp(26px, 4vw, 36px);margin-bottom:48px}
.text-muted{color:var(--text-muted)}
.lead{font-size:clamp(16px, 2vw, 19px);color:var(--text-muted)}
.highlight{color:var(--primary-violet);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:var(--radius-btn);font-weight:600;font-size:16px;transition:all var(--transition);cursor:pointer;border:none;font-family:var(--font-body);text-decoration:none;margin-top:8px}
.btn-primary{background:var(--cta-blue);color:var(--night-violet);box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:var(--cta-blue-hover);transform:translateY(-2px)}
.btn-primary:disabled{background:var(--bg-secondary);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none}
.btn-secondary{background:transparent;color:var(--night-violet);border:2px solid var(--night-violet)}
.btn-secondary:hover{background:var(--night-violet);color:#fff}
.btn-lg{padding:18px 36px;font-size:18px}
header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid var(--bg-secondary)}
.nav{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{font-family:var(--font-title);font-weight:700;font-size:22px;color:var(--night-violet);}
.logo span{color:var(--primary-violet);}
.nav-links{display:flex;gap:32px}
.nav-links a{color:var(--text-main);font-weight:500;font-size:15px;transition:color var(--transition);position:relative}
.nav-links a:hover{color:var(--primary-violet)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary-violet);transition:width var(--transition)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:16px;align-items:center}
.menu-toggle{display:none;flex-direction:column;justify-content:space-around;width:32px;height:32px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}
.menu-toggle span{width:100%;height:3px;background:var(--night-violet);border-radius:2px;transition:all .3s linear;transform-origin:center}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
.menu-toggle.active span:nth-child(2){opacity:0;transform:translateX(-20px)}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
.card{background:#fff;border-radius:var(--radius-card);padding:clamp(20px, 3vw, 32px);box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition);border:1px solid rgba(36,18,66,.05);position:relative}
.card:hover{transform:translateY(-5px);box-shadow:0 15px 40px -10px rgba(109,40,217,.15)}
.card-feature{border-top:4px solid var(--primary-violet)}
.blob{position:absolute;z-index:-1;filter:blur(80px);opacity:.5;border-radius:50%;pointer-events:none}
footer{background:var(--night-violet);color:#fff;padding:80px 0 40px}
footer h4{color:#fff;margin-bottom:20px;font-size:18px;font-family:var(--font-title)}
footer a{color:#B8B0CC;display:block;margin-bottom:12px;transition:color var(--transition)}
footer a:hover{color:var(--cta-blue)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:32px;display:flex;justify-content:center;color:#B8B0CC;font-size:14px}
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:8px;font-weight:500;font-size:15px}
.form-input,.form-select,.form-textarea{width:100%;padding:14px 16px;border:1px solid var(--light-violet);border-radius:8px;font-family:var(--font-body);font-size:16px;background:#fff;transition:border-color var(--transition)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--cta-blue);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.error-msg{color:var(--error-red);font-size:14px;margin-top:4px;display:none}
.accordion-item{border-bottom:1px solid var(--light-violet);padding:24px 0;cursor:pointer}
.accordion-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-family:var(--font-title);color:var(--night-violet);font-size:18px}
.accordion-icon{transition:transform var(--transition);font-size:24px;color:var(--primary-violet);margin-left:16px;flex-shrink:0}
.accordion-item.active .accordion-icon{transform:rotate(45deg)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--text-muted)}
.accordion-item.active .accordion-content{max-height:1000px;padding-top:16px}
.timeline{position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--light-violet)}
.timeline-item{position:relative;margin-bottom:40px;padding:24px;border-radius:var(--radius-card);background:#fff;box-shadow:var(--shadow-soft);cursor:pointer;border:1px solid rgba(36,18,66,.05);border-left:4px solid transparent;transition:transform .35s cubic-bezier(.25,.8,.25,1),box-shadow .35s ease,border-color .35s ease}
.timeline-item:hover{transform:translateY(-6px) translateX(8px);box-shadow:0 20px 40px -10px rgba(109,40,217,.25);border-left:4px solid var(--primary-violet)}
.timeline-dot{position:absolute;left:-33px;top:24px;width:24px;height:24px;background:var(--cta-blue);border:4px solid var(--bg-main);border-radius:50%;box-shadow:0 0 0 2px var(--cta-blue);transition:all .35s cubic-bezier(.25,.8,.25,1)}
.timeline-item:hover .timeline-dot{transform:scale(1.25);background:var(--primary-violet);box-shadow:0 0 0 4px var(--primary-violet),0 0 0 8px var(--light-violet)}
.mockup-window{background:var(--night-violet);border-radius:12px 12px 0 0;padding:12px;display:flex;gap:6px}
.mockup-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.mockup-body{background:#fff;padding:24px;border-radius:0 0 12px 12px;box-shadow:var(--shadow-soft)}
.article-content h3{margin-top:32px;margin-bottom:16px;color:var(--primary-violet)}
.article-content p{margin-bottom:16px}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.portfolio-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.portfolio-img { background: var(--bg-secondary); height: 240px; position: relative; overflow: hidden; }
.portfolio-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s ease; }
.portfolio-card:hover .portfolio-img img { transform: scale(1.05); }
.portfolio-overlay { position: absolute; inset: 0; background: rgba(36, 18, 66, 0); transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; }
.portfolio-card:hover .portfolio-overlay { background: rgba(36, 18, 66, 0.85); }
.portfolio-visit { background: var(--cta-blue); color: var(--night-violet); padding: 12px 24px; border-radius: 8px; font-weight: 700; font-family: var(--font-title); transform: translateY(20px); opacity: 0; transition: all 0.3s ease; }
.portfolio-card:hover .portfolio-visit { transform: translateY(0); opacity: 1; }
.trust-link { display:flex; align-items:center; gap:12px; text-decoration:none; transition:transform 0.3s ease; }
.trust-link:hover { transform: translateY(-3px); }
.trust-link img { width: 32px; height: 32px; border-radius: 6px; }
.trust-link span { font-family: var(--font-title); font-weight: 700; font-size: 20px; color: var(--text-muted); transition: color 0.3s ease; }
.trust-link:hover span { color: var(--primary-violet); }
.blog-img { height: 200px; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .blog-img img { transform: scale(1.05); }
.article-hero { width: 100%; height: 300px; object-fit: cover; border-radius: 16px; margin-bottom: 32px; }
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--night-violet); color: #fff; padding: 24px; z-index: 2000; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); transform: translateY(100%); transition: transform 0.4s ease-in-out; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { color: #B8B0CC; margin: 0; font-size: 14px; flex: 1; min-width: 250px; }
.cookie-banner a { color: var(--cta-blue); text-decoration: underline; }
.cookie-btns { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner .btn { margin: 0; padding: 10px 20px; font-size: 14px; width: auto; }

/* Classes Utilitaires (Remplaçant les styles inline) */
.text-white { color: #fff; }
.text-blue { color: var(--cta-blue); }
.bg-alt { background: var(--bg-secondary); }
.text-center { text-align: center; }
.max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.max-w-700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.my-16 { margin: 16px 0; }
.mb-8 { margin-bottom: 8px; }
.mb-24 { margin-bottom: 24px; }
.text-sm { font-size: 14px; }
.text-15 { font-size: 15px; }
.btn-row { display:flex; gap:16px; flex-wrap:wrap; }
.btn-block { width:100%; }
.lead-center { max-width:600px; margin:0 auto; }
.lead-mb { margin-bottom:32px; }
.hp-container { position:absolute; left:-9999px; top:-9999px; }
.hero-grid { align-items: center; gap: 64px; }
.pos-rel { position: relative; }
.align-stretch { align-items: stretch; }

/* Home Hero */
.home-hero { position:relative; overflow:hidden; }
.home-hero-blob { background:var(--light-violet); width:500px; height:500px; top:-150px; right:-150px; }
.stats-row { margin-top: 48px; display: flex; gap: 48px; flex-wrap: wrap; }
.stat-num { font-size: 28px; color: var(--primary-violet); font-family: var(--font-title); }
.stat-label { font-size: 14px; }
.trust-title { text-transform:uppercase; letter-spacing:2px; font-size:14px; font-weight:600; }
.mockup-placeholder { background:var(--bg-secondary); height:250px; border-radius:8px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.mockup-line-1 { height:12px; background:var(--light-violet); border-radius:4px; width:80%; margin-bottom:8px; }
.mockup-btn { width:140px; height:40px; background:var(--cta-blue); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--night-violet); font-weight:600; }

/* Final CTA & Dark Sections */
.section-dark { background:var(--night-violet); color:#fff; text-align:center; }
.section-dark h2 { color:#fff; }
.section-dark p { color:#B8B0CC; max-width:600px; margin:0 auto 32px; }

/* Footer */
.footer-desc { color:#B8B0CC; max-width:300px; }

/* Blog & Articles */
.blog-card { padding:0; overflow:hidden; }
.blog-link { text-decoration:none; color:inherit; display:block; height:100%; }
.blog-content { padding:24px; }
.article-box { background:var(--bg-secondary); padding:24px; border-radius:16px; margin-bottom:32px; border-left:4px solid var(--primary-violet); }
.article-cta-box { margin:48px 0; background:var(--night-violet); color:#fff; border:none; }
.article-cta-box h3 { color:#fff; }
.article-cta-box p { color:#B8B0CC; }

/* Services */
.help-box { margin-top:32px; background:var(--light-violet); text-align:center; border:none; }
.card-list { margin:16px 0; }
.card-list-item { margin-bottom:8px; }

/* Portfolio */
.filter-row { display:flex; justify-content:center; gap:16px; margin:32px 0 48px; flex-wrap:wrap; }
.portfolio-link { text-decoration:none; color:inherit; display:block; height:100%; }
.case-study { margin-top:64px; border-top:4px solid var(--primary-violet); }
.case-study h2 { font-size:28px; margin-bottom:24px; }

/* About */
.team-card { text-align:center; background:var(--bg-secondary); }
.team-avatar { width:150px; height:150px; background:#fff; border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; font-size:40px; box-shadow:var(--shadow-soft); }
.h2-sm { font-size:30px; }
.manifesto { max-width:800px; margin:0 auto; font-style:italic; }

/* Pricing */
.price-card { display:flex; flex-direction:column; }
.price-amount { font-size:40px; font-weight:700; color:var(--night-violet); margin:16px 0; font-family:var(--font-title); }
.pricing-popular { border:2px solid var(--primary-violet); transform:scale(1.05); display:flex; flex-direction:column; }
.badge-popular { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--primary-violet); color:#fff; }

/* Process */
.timeline-container { max-width:800px; margin:64px auto 0; }

/* Legal & 404 */
.legal-content { margin-top:32px; line-height:1.8; }
.h1-md { font-size:36px; }
.error-section { min-height:60vh; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.error-404 { font-size:120px; color:var(--light-violet); }

/* Form Success */
.success-msg { text-align:center; padding:40px 0; }
.success-icon { font-size:48px; margin-bottom:24px; }

/* Cookie Btn */
#refuse-cookies { background:transparent; color:#fff; border-color:#B8B0CC; }

@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 768px) { .nav-links{display:flex;position:absolute;top:72px;left:0;width:100%;background:#fff;flex-direction:column;padding:24px;box-shadow:var(--shadow-soft);gap:8px;transform:translateY(-150%);opacity:0;pointer-events:none;transition:transform .4s ease-in-out,opacity .3s ease;z-index:999} .nav-links.active{transform:translateY(0);opacity:1;pointer-events:auto} .nav-links a { padding: 12px 0; font-size: 18px; } .menu-toggle{display:flex} .grid-2, .grid-3, .grid-4, .footer-grid { grid-template-columns: 1fr; } .nav-cta .btn{display:none} .footer-bottom{flex-direction:column;gap:16px;text-align:center} .timeline-item:hover{transform:none} .pricing-popular { transform: none !important; } }
@media (max-width: 480px) { .container { padding: 0 16px; } .section { padding: 48px 0; } .btn { width: 100%; } .mockup-body { padding: 16px; } .timeline { padding-left: 30px; } .timeline-dot { left: -25px; width: 18px; height: 18px; } .accordion-header { font-size: 16px; } .trust-link span { font-size: 16px; } .cookie-btns { width: 100%; } .cookie-btns .btn { flex: 1; } .logo { font-size: 18px; } }