/* ============================================================
   POP Consulting — style.css — Version finale
   Syne + DM Sans · #2563eb · #0f172a · #22c55e
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:#2563eb; --blue-dark:#1a4fcf; --blue-light:#eff6ff; --blue-mid:#dbeafe;
  --navy:#0f172a; --navy-mid:#1e293b; --green:#22c55e; --green-dark:#16a34a;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0;
  --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --white:#ffffff;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:100px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);
  --transition:all .25s cubic-bezier(.4,0,.2,1);
  --font-head:'Syne',sans-serif; --font-body:'DM Sans',sans-serif;
}
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); font-weight:400; font-size:1rem; color:var(--navy); background:var(--white); line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-head); line-height:1.2; letter-spacing:-.3px; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ANIMATIONS */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in.delay-1 { transition-delay:.10s; }
.fade-in.delay-2 { transition-delay:.20s; }
.fade-in.delay-3 { transition-delay:.30s; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes barGrow { from{width:0!important} }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--radius-md); font-family:var(--font-body); font-weight:500; font-size:.9rem; cursor:pointer; transition:var(--transition); border:none; white-space:nowrap; }
.btn-primary { background:var(--blue); color:var(--white); }
.btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.30); }
.btn-green { background:var(--green); color:var(--white); font-size:1rem; padding:14px 28px; }
.btn-green:hover { background:var(--green-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(34,197,94,.35); }
.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.25); font-size:1rem; padding:13px 28px; }
.btn-outline:hover { border-color:var(--white); background:rgba(255,255,255,.08); transform:translateY(-2px); }

/* SECTION COMMONS */
.section-tag { display:inline-block; background:var(--blue-light); color:var(--blue); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; padding:5px 14px; border-radius:var(--radius-full); margin-bottom:14px; }
.section-header { text-align:center; margin-bottom:56px; }
.section-header h2 { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:var(--navy); }
.section-header p { margin-top:12px; font-size:1rem; color:var(--gray-600); max-width:560px; margin-left:auto; margin-right:auto; }

/* HEADER */
.site-header { position:sticky; top:0; z-index:200; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--gray-200); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px; }
.header-logo { display:flex; flex-direction:column; align-items:flex-start; gap:1px; flex-shrink:0; }
.logo-img { height:36px; width:auto; mix-blend-mode:multiply; }
.logo-tagline { font-size:.62rem; font-weight:500; color:var(--gray-500); letter-spacing:.8px; text-transform:uppercase; }
.main-nav { display:flex; align-items:center; gap:28px; }
.main-nav a { font-size:.87rem; font-weight:500; color:var(--gray-600); transition:var(--transition); position:relative; padding-bottom:2px; }
.main-nav a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--blue); border-radius:2px; transition:width .25s ease; }
.main-nav a:hover { color:var(--blue); }
.main-nav a:hover::after { width:100%; }
.header-cta { flex-shrink:0; }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:6px; border-radius:var(--radius-sm); }
.burger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:var(--transition); }
.burger.burger-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.burger-open span:nth-child(2) { opacity:0; }
.burger.burger-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-cta-sticky { display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:300; background:var(--green); color:var(--white); font-family:var(--font-body); font-weight:600; font-size:.9rem; padding:14px 28px; border-radius:var(--radius-full); box-shadow:0 8px 32px rgba(34,197,94,.40); gap:8px; align-items:center; white-space:nowrap; transition:var(--transition); }
.mobile-cta-sticky:hover { background:var(--green-dark); }

/* HERO */
.hero { background:var(--navy); position:relative; overflow:hidden; padding:90px 0 80px; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 55% 50% at 85% 50%,rgba(37,99,235,.16) 0%,transparent 70%),radial-gradient(ellipse 35% 55% at 5% 85%,rgba(34,197,94,.07) 0%,transparent 60%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:center; position:relative; z-index:1; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.30); color:#93c5fd; font-size:.78rem; font-weight:500; padding:6px 14px; border-radius:var(--radius-full); margin-bottom:24px; }
.hero-tag::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.hero h1 { font-size:clamp(2.1rem,4vw,3.1rem); font-weight:800; color:var(--white); margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--green); }
.hero-sub { font-size:1.05rem; color:#94a3b8; margin-bottom:14px; max-width:520px; }
.hero-spec { font-size:.88rem; color:#64748b; margin-bottom:36px; }
.hero-spec strong { color:#7dd3fc; font-weight:500; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-micro { margin-top:14px; font-size:.8rem; color:#64748b; font-style:italic; }

/* Hero dashboard */
.hero-dashboard { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-xl); padding:20px; }
.dash-topbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.dash-dot { width:10px; height:10px; border-radius:50%; }
.dash-dot.red{background:#ef4444} .dash-dot.amber{background:#f59e0b} .dash-dot.green{background:#22c55e}
.dash-title { font-size:.72rem; color:#64748b; margin-left:8px; font-family:var(--font-head); font-weight:600; }
.dash-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.dash-stat { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-sm); padding:12px 10px; text-align:center; }
.dash-stat-val { font-family:var(--font-head); font-size:1.3rem; font-weight:800; line-height:1; }
.dash-stat-val.blue{color:#60a5fa} .dash-stat-val.green{color:#4ade80} .dash-stat-val.amber{color:#fbbf24}
.dash-stat-lbl { font-size:.62rem; color:#64748b; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.dash-bars { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.dash-bar-row { display:flex; align-items:center; gap:10px; }
.dash-bar-lbl { font-size:.68rem; color:#64748b; width:60px; flex-shrink:0; }
.dash-bar-track { flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.dash-bar-fill { height:100%; border-radius:3px; animation:barGrow 1.4s ease forwards; }
.dash-bar-fill.blue{background:#3b82f6} .dash-bar-fill.green{background:#22c55e} .dash-bar-fill.amber{background:#f59e0b}
.dash-bar-val { font-size:.68rem; color:#94a3b8; width:26px; text-align:right; }
.dash-footer { display:flex; gap:8px; flex-wrap:wrap; }
.dash-badge { background:rgba(37,99,235,.20); border:1px solid rgba(37,99,235,.30); color:#93c5fd; font-size:.62rem; font-weight:600; padding:4px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.5px; }

/* RÉASSURANCE */
.reassurance { padding:72px 0; background:var(--gray-50); border-bottom:1px solid var(--gray-200); }
.reassurance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.reassurance-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.reassurance-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.reassurance-icon { width:44px; height:44px; background:var(--blue-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.reassurance-icon svg { width:22px; height:22px; stroke:var(--blue); fill:none; }
.reassurance-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.reassurance-card p { font-size:.875rem; color:var(--gray-600); }

/* SERVICES */
.services { padding:96px 0; background:var(--white); }
.seo-phrase { text-align:center; font-size:.85rem; color:var(--gray-400); font-style:italic; margin-top:-40px; margin-bottom:56px; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-card { background:var(--gray-50); border:1px solid var(--gray-200); border-left:3px solid transparent; border-radius:var(--radius-lg); padding:28px; display:flex; gap:20px; transition:var(--transition); }
.service-card:hover { background:var(--blue-light); border-color:rgba(37,99,235,.20); border-left-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.service-num { font-family:var(--font-head); font-size:2.2rem; font-weight:800; color:var(--gray-200); line-height:1; flex-shrink:0; transition:var(--transition); }
.service-card:hover .service-num { color:rgba(37,99,235,.15); }
.service-card h3 { font-size:.98rem; font-weight:700; margin-bottom:6px; }
.service-card p { font-size:.86rem; color:var(--gray-600); }

/* TECHNOLOGIES */
.technologies { padding:96px 0; background:var(--gray-50); }
.tech-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tech-group { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.tech-group:hover { box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.20); transform:translateY(-3px); }
.tech-group-title { font-family:var(--font-head); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray-400); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); }
.tech-badges { display:flex; flex-wrap:wrap; gap:10px; }
.tech-badge { display:flex; align-items:center; gap:8px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:8px 12px; font-size:.82rem; font-weight:600; color:var(--navy-mid); transition:var(--transition); cursor:default; }
.tech-badge:hover { background:var(--blue-light); border-color:rgba(37,99,235,.30); color:var(--blue); transform:translateY(-1px); }
.tech-badge svg { width:16px; height:16px; flex-shrink:0; }

/* POURQUOI */
.why { padding:96px 0; background:var(--navy); }
.why .section-header h2 { color:var(--white); }
.why .section-tag { background:rgba(37,99,235,.20); color:#93c5fd; }
.why-intro { text-align:center; font-size:1rem; color:#7dd3fc; font-weight:500; margin-top:-40px; margin-bottom:56px; }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.why-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:28px; transition:var(--transition); }
.why-card:hover { background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.30); transform:translateY(-3px); }
.why-card-icon { width:42px; height:42px; background:rgba(37,99,235,.20); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why-card-icon svg { width:20px; height:20px; stroke:#93c5fd; fill:none; }
.why-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.why-card p { font-size:.875rem; color:#94a3b8; }
.why-differentiator { text-align:center; margin:48px auto 0; padding:20px 28px; background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.25); border-radius:var(--radius-lg); font-size:.95rem; color:#93c5fd; font-weight:500; max-width:680px; }

/* RÉFÉRENCES */
.references { padding:96px 0; background:var(--white); }
.references-proof { text-align:center; font-size:.88rem; color:var(--gray-500); font-style:italic; margin-top:-40px; margin-bottom:56px; }
.clients-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:16px; }
.clients-row2 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:880px; margin:0 auto; }
.client-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:18px 14px; display:flex; align-items:center; justify-content:center; min-height:86px; transition:var(--transition); box-shadow:var(--shadow-sm); }
.client-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.client-card img { max-width:110px; max-height:48px; width:auto; height:auto; object-fit:contain; filter:grayscale(100%) opacity(.6); transition:var(--transition); }
.client-card.dark-bg img { filter:grayscale(100%) invert(1) opacity(.6); }
.client-card:hover img,.client-card.dark-bg:hover img { filter:none; transform:scale(1.07); }

/* ÉCOSYSTÈME */
.ecosystem { padding:96px 0; background:var(--navy); }
.ecosystem .section-header h2 { color:var(--white); }
.ecosystem .section-tag { background:rgba(37,99,235,.20); color:#93c5fd; }
.ecosystem-intro { text-align:center; font-size:.95rem; color:#94a3b8; max-width:640px; margin:-36px auto 56px; line-height:1.75; }
.ecosystem-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:700px; margin:0 auto; }
.ecosystem-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; transition:var(--transition); }
.ecosystem-card:hover { background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.30); transform:translateY(-4px); box-shadow:0 8px 32px rgba(37,99,235,.15); }
.ecosystem-logo { height:44px; width:auto; max-width:160px; object-fit:contain; filter:brightness(1.2); transition:var(--transition); }
.ecosystem-card:hover .ecosystem-logo { filter:brightness(1.5); transform:scale(1.04); }
.ecosystem-logo-svg { height:44px; display:flex; align-items:center; }
.ecosystem-card h3 { font-size:.98rem; font-weight:700; color:var(--white); }
.ecosystem-card p { font-size:.82rem; color:#94a3b8; }
.ecosystem-link { font-size:.78rem; color:#64748b; font-weight:500; letter-spacing:.3px; transition:color .2s ease; }
.ecosystem-card:hover .ecosystem-link { color:#93c5fd; }
.ecosystem-logo-dark { border-radius:var(--radius-sm); }

/* FAQ */
.faq-section { padding:96px 0; background:var(--gray-50); }
.faq-list { max-width:760px; margin:0 auto; }
.faq-list details { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; }
.faq-list details:hover { border-color:var(--blue); }
.faq-list details[open] { border-color:var(--blue); box-shadow:var(--shadow-sm); }
.faq-list summary { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-family:var(--font-head); font-weight:600; font-size:.93rem; cursor:pointer; list-style:none; color:var(--navy); gap:16px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-toggle { width:28px; height:28px; min-width:28px; background:var(--blue-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:300; color:var(--blue); line-height:1; transition:var(--transition); }
.faq-list details[open] .faq-toggle { background:var(--blue); color:var(--white); transform:rotate(45deg); }
.faq-list details p { padding:0 24px 20px; font-size:.9rem; color:var(--gray-600); border-top:1px solid var(--gray-100); padding-top:14px; line-height:1.75; }

/* CTA */
.cta-section { padding:100px 0; background:var(--navy); position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 70% at 50% 110%,rgba(37,99,235,.18) 0%,transparent 70%); pointer-events:none; }
.cta-inner { text-align:center; position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-inner h2 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:var(--white); margin-bottom:16px; }
.cta-inner > p { font-size:1rem; color:#94a3b8; margin-bottom:36px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-micro { margin-top:14px; font-size:.8rem; color:#64748b; font-style:italic; }
.cta-contact { margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.cta-name { font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--white); }
.cta-title { font-size:.82rem; color:#64748b; }
.cta-avail { font-size:.8rem; color:var(--green); display:flex; align-items:center; gap:6px; }
.cta-avail::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }

/* FOOTER */
.site-footer { background:var(--navy-mid); border-top:1px solid rgba(255,255,255,.06); padding:56px 0 0; }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-logo-img { height:34px; width:auto; mix-blend-mode:screen; filter:brightness(1.2); margin-bottom:8px; }
.footer-tagline { font-size:.78rem; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.footer-location { display:flex; align-items:center; gap:6px; font-size:.82rem; color:#64748b; }
.footer-location svg { stroke:#64748b; flex-shrink:0; }
.footer-contact-name { font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--white); margin-bottom:4px; }
.footer-contact-title { font-size:.78rem; color:#64748b; margin-bottom:16px; }
.footer-phone,.footer-email { display:flex; align-items:center; gap:8px; font-size:.88rem; color:#94a3b8; margin-bottom:10px; transition:color .2s ease; }
.footer-phone svg,.footer-email svg { stroke:#64748b; flex-shrink:0; }
.footer-phone:hover{color:var(--green)} .footer-email:hover{color:var(--blue)}
.footer-nav-title { font-family:var(--font-head); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:#64748b; margin-bottom:16px; }
.footer-nav nav { display:flex; flex-direction:column; gap:10px; }
.footer-nav nav a { font-size:.88rem; color:#94a3b8; transition:color .2s ease; }
.footer-nav nav a:hover { color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; flex-wrap:wrap; }
.footer-bottom p { font-size:.78rem; color:#475569; }

/* RESPONSIVE */
@media(max-width:1024px){
  .tech-groups{grid-template-columns:repeat(2,1fr)}
  .clients-grid{grid-template-columns:repeat(3,1fr)}
  .clients-row2{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .reassurance-grid{grid-template-columns:1fr;gap:14px}
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .ecosystem-grid{grid-template-columns:1fr;max-width:400px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .tech-groups{grid-template-columns:1fr}
}
@media(max-width:768px){
  .header-cta{display:none}
  .burger{display:flex}
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--white);flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 16px;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-md)}
  .main-nav.nav-open{display:flex}
  .main-nav a{width:100%;padding:12px 24px;font-size:1rem}
  .main-nav a::after{display:none}
  .mobile-cta-sticky{display:flex}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .clients-row2{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
  body{padding-bottom:80px}
}
@media(max-width:480px){
  .hero{padding:64px 0 52px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .cta-actions{flex-direction:column;align-items:center}
  .section-header{margin-bottom:40px}
  .clients-grid,.clients-row2{grid-template-columns:repeat(2,1fr);gap:10px}
}