/* === RESET & ROOT === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --c1: #3fbbfe;
  --c2: #527ed9;
  --c3: #8b2fe0;
  --bg: #ffffff;
  --text: #1a1a2e;
  --muted: #5a5a72;
  --mono: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* Focus visible pour accessibilité clavier */
:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; border-radius: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }

/* Skip link accessibilité */
.skip-link { position:absolute;top:-100px;left:1rem;background:var(--c2);color:#fff;padding:.5rem 1rem;border-radius:0 0 6px 6px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.75rem;font-weight:700;text-decoration:none;z-index:9999;transition:top .2s; }
.skip-link:focus { top:0; }

/* NAV */
nav { position:fixed;top:0;left:0;right:0;z-index:100;height:60px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.05); }
.nav-inner { max-width:1200px;margin:0 auto;padding:0 2rem;height:100%;display:flex;align-items:center;justify-content:space-between; }
.logo { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--c3),var(--c1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none; }
.nav-links { display:flex;align-items:center;gap:2rem;list-style:none; }
.nav-links a { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .3s; }
.nav-links a:hover { color:var(--c2); }
.nav-links .active { background:linear-gradient(135deg,var(--c2),var(--c3));color:#fff;-webkit-text-fill-color:#fff;padding:.4rem 1.2rem;border-radius:999px; }
.nav-links .cta { color:var(--c3);font-weight:700; }
.hamburger { display:none;background:none;border:none;cursor:pointer;padding:.5rem;z-index:110; }
.hamburger span { display:block;width:22px;height:2px;background:var(--c2);margin:5px 0;border-radius:2px;transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
.mobile-menu-overlay { display:none;position:fixed;inset:0;z-index:99;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:2rem; }
.mobile-menu-overlay.open { display:flex; }
.mobile-menu-overlay a { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;color:var(--text);text-transform:uppercase;letter-spacing:.08em;transition:color .3s; }
.mobile-menu-overlay a:hover { color:var(--c2); }
.mobile-menu-overlay .mobile-cta { background:linear-gradient(135deg,var(--c2),var(--c3));color:#fff;padding:.7rem 2rem;border-radius:100px;font-size:.8rem; }

/* HERO */
.hero-fallback { display:none;position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,rgba(63,187,254,0.2) 0%,rgba(82,126,217,0.25) 40%,rgba(165,65,255,0.2) 100%); }
.hero-fallback::before { content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 17.3v34.7L30 52 0 34.7V17.3Z' fill='none' stroke='rgba(82,126,217,0.12)' stroke-width='1'/%3E%3C/svg%3E");background-size:60px 52px;opacity:.6; }
.hero { position:relative;width:100%;height:347px;margin-top:60px;overflow:hidden; }
.hero #gl-canvas { display:none; }
.hero #hero-canvas { position:absolute;inset:0;width:100%;height:100%; }
.hero-overlay { position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.2) 100%);pointer-events:none;padding:2rem calc((100% - 1200px) / 2 + 2rem + 150px) 2rem calc((100% - 1200px) / 2 + 2rem); }
.hero-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:clamp(2.16rem,5.4vw,3.84rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;max-width:800px;background:linear-gradient(135deg,#4e1dcc 0%,#9b30e8 50%,#d63fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInUp .8s ease-out .1s both; }
.hero-actions { pointer-events:auto;display:flex;gap:.8rem;margin-top:1.2rem;animation:fadeInUp .8s ease-out .4s both; }
.btn-primary { display:inline-flex;align-items:center;gap:.4rem;padding:.68rem 1.44rem;background:linear-gradient(135deg,var(--c2),var(--c3));color:#fff;border:none;border-radius:100px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.58rem;font-weight:700;cursor:pointer;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:all .3s; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 10px 35px rgba(82,126,217,0.35); }
.btn-secondary { display:inline-flex;align-items:center;gap:.4rem;padding:.68rem 1.44rem;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);color:var(--c2);border:2px solid var(--c2);border-radius:100px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.58rem;font-weight:700;cursor:pointer;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:all .3s; }
.btn-secondary:hover { background:var(--c2);color:#fff;border-color:var(--c2); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

/* BANNER */
.banner { background:linear-gradient(135deg,var(--c2),var(--c3));padding:1.2rem 3rem;display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap; }
.banner-item { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.8rem;font-weight:500;color:#fff; }
.banner-item.highlight { font-weight:700;color:var(--c1); }

/* SERVICES */
.services { padding:4rem 2rem 5rem;width:100%;background:#fff; }
.services-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1200px;margin:0 auto; }
.svc-card { border-radius:14px;overflow:hidden;background:#f5f5fa;transition:transform .3s ease,box-shadow .3s ease; }
.svc-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(82,126,217,.15); }
.svc-card-anim { width:100%;height:120px;position:relative;background:#1a1a2e;overflow:hidden; }
.svc-card-anim canvas { position:absolute;inset:0;width:100%;height:100%; }
.svc-card-body { padding:1rem; }
.svc-card-body h3 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.4rem; }
.svc-card-body p { font-size:.7rem;line-height:1.5;color:var(--muted); }
/* Couleurs alternées des titres */
.svc-card:nth-child(1) .svc-card-body h3 { color:var(--c3); }
.svc-card:nth-child(2) .svc-card-body h3 { color:var(--c1); }
.svc-card:nth-child(3) .svc-card-body h3 { color:var(--c2); }
.svc-card:nth-child(4) .svc-card-body h3 { color:var(--c3); }
.svc-card:nth-child(5) .svc-card-body h3 { color:var(--c1); }
.svc-card:nth-child(6) .svc-card-body h3 { color:var(--c2); }
.svc-card:nth-child(7) .svc-card-body h3 { color:var(--c3); }
.svc-card:nth-child(8) .svc-card-body h3 { color:var(--c1); }

/* SECTION COMMON */
.section-header { text-align:center;margin-bottom:3rem; }
.section-tag { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--c3);font-weight:700;margin-bottom:.8rem;display:block; }
.section-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.3;background:linear-gradient(135deg,var(--c2),var(--c3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* PROJECTS */
.projects { padding:4rem 2rem 5rem;background:#ededf3; }
.projects .section-tag { color:var(--muted); }
.projects .section-title { background:linear-gradient(135deg,var(--c2),var(--c3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.projects-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;max-width:1200px;margin:0 auto; }
.project-card {
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 16px rgba(82,126,217,.08);
  border:none;
  transition:all .3s;
  display:flex;
  flex-direction:column;
}
.project-card:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(82,126,217,.18); }
.project-img { width:100%;height:200px;background:#e8e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px; }
.project-img img { width:100%;height:100%;object-fit:cover;display:block; }
.img-placeholder { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.55rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase; }
.project-info { padding:1rem 1rem .8rem;display:flex;flex-direction:column;flex:1;position:relative; }
.project-tag { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.52rem;text-transform:uppercase;letter-spacing:.14em;color:var(--c3);font-weight:800;margin-bottom:.35rem;display:block; }
.project-info h3 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.72rem;font-weight:700;color:var(--c2);margin-bottom:.3rem;line-height:1.4; }
.project-info p { font-size:.63rem;color:var(--muted);line-height:1.6;margin-bottom:0;flex:1; }
.project-result { display:none; }

/* ── Cartes portfolio cliquables ── */
.project-card--linked { cursor:pointer; }
.project-card-link { display:block;text-decoration:none;color:inherit; }
.project-card-link:hover { text-decoration:none; }
.project-card--linked:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(82,126,217,.18); }
.project-link-hint {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--c3);
  color:#fff;
  font-size:1rem;
  margin-top:.8rem;
  align-self:flex-end;
  transition:background .2s, transform .2s;
  flex-shrink:0;
}
.project-card--linked:hover .project-link-hint { background:var(--c2); transform:translateX(2px); }
.cards-header { text-align:center;padding:4rem 2rem 2rem; }
.cards-header h2 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.3;background:linear-gradient(135deg,var(--c2),var(--c3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.cards-section { padding:0 2rem 5rem;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;max-width:1200px;margin:0 auto; }
.card { width:320px;border-radius:16px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;background:#f5f5fa; }
.card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(82,126,217,.15); }
.card-anim { width:100%;height:200px;position:relative;background:#1a1a2e;overflow:hidden; }
.card-anim canvas { position:absolute;inset:0;width:100%;height:100%; }
.card-body { padding:1.5rem; }
.card-body h3 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c2);margin-bottom:.7rem; }
.card-body p { font-size:.82rem;line-height:1.7;color:var(--muted); }

/* ABOUT */
.about { padding:2.8rem 2rem;background:linear-gradient(135deg,var(--c2),var(--c3)); }
.about-content { max-width:900px;margin:0 auto;display:grid;grid-template-columns:160px 1fr;gap:3.5rem;align-items:center; }
.about-photo { width:160px;height:160px;border-radius:12px;overflow:hidden;flex-shrink:0; }
.about-photo img { width:100%;height:100%;object-fit:cover;border-radius:12px; }
.about-text .section-tag { color:rgba(255,255,255,.7); }
.about-text h2 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem;color:#fff;-webkit-text-fill-color:#fff; }
.about-text p { font-size:.88rem;color:rgba(255,255,255,.8);line-height:1.9;margin-bottom:.8rem; }
.about-highlights { display:flex;gap:2rem;margin-top:1.5rem; }
.highlight-num { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.6rem;font-weight:800;color:#fff;-webkit-text-fill-color:#fff; }
.highlight-label { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.62rem;color:rgba(255,255,255,.6);margin-top:.15rem;display:block;text-transform:uppercase;letter-spacing:.06em; }

/* CONTACT */
.contact { padding:4rem 2rem;text-align:center;background:#ededf3; }
.form-wrapper { max-width:540px;margin:0 auto;background:linear-gradient(135deg,var(--c2),var(--c3));border-radius:20px;padding:2.5rem;display:flex;flex-direction:column;gap:1rem; }
.form-row { display:flex;align-items:center;gap:1rem; }
.form-row label { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.72rem;font-weight:600;color:#fff;width:130px;text-align:right;flex-shrink:0; }
.form-row input,.form-row textarea,.form-row select { flex:1;padding:.75rem 1rem;border:none;border-radius:999px;font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;background:rgba(255,255,255,.95);color:var(--text);transition:box-shadow .3s; }
.form-row input:focus,.form-row textarea:focus,.form-row select:focus { box-shadow:0 0 0 3px rgba(255,255,255,.4); }
.form-row textarea { border-radius:14px;resize:vertical;min-height:90px; }
.form-row select { cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-color:rgba(255,255,255,.95); }
.form-submit { margin-top:.5rem;align-self:center;padding:.75rem 2.5rem;border:2px solid #fff;border-radius:999px;background:transparent;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .3s; }
.form-submit:hover { background:#fff;color:var(--c3);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15); }
.form-message { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.75rem;color:#fff;text-align:center;padding:.6rem 1rem;border-radius:8px;display:none; }
.form-message.show { display:block; }
.form-message.success { background:rgba(255,255,255,.2); }
.form-message.error { background:rgba(220,50,50,.4); }

/* FOOTER */
footer { background:linear-gradient(180deg,var(--c2),var(--c1));padding:2.5rem 2rem; }
.footer-content { max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem; }
.footer-brand { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.8rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em; }
.footer-links { display:flex;gap:2rem; }
.footer-links a { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;color:rgba(255,255,255,.7);text-decoration:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;transition:color .3s; }
.footer-links a:hover { color:#fff; }
.footer-copy { font-size:.72rem;color:rgba(255,255,255,.4); }

/* SCROLL REVEAL */
.reveal { opacity:0;transform:translateY(35px);transition:opacity .7s ease-out,transform .7s ease-out; }
.reveal.visible { opacity:1;transform:translateY(0); }

/* Images : éviter le CLS en réservant l'espace */
img { display:block; max-width:100%; height:auto; }
.project-img img { width:100%; height:200px; object-fit:cover; }
.about-photo img { width:100%; height:100%; object-fit:cover; }

/* RESPONSIVE */
@media(max-width:1024px){ .services-grid{grid-template-columns:repeat(4,1fr)} }
/* Menu hamburger slider — masqué sur desktop, visible sur mobile via media query */
.svc-mobile-nav { display:none; }
.svc-mobile-menu { display:none; }

@media(max-width:768px){
  .hamburger{display:block} .nav-links{display:none} .nav-inner{padding:0 1.2rem;}

  /* Hero mobile — canvas WebGL activé */
  .hero #hero-canvas{display:block} .hero #gl-canvas{display:block} .hero-fallback{display:none}
  .hero{height:260px;margin-top:52px}
  .hero-overlay{padding:1.5rem !important;align-items:flex-start;text-align:left}
  .hero-title{font-size:1.9rem;animation:none !important;opacity:1 !important;transform:none !important}

  .banner{padding:1rem 1.5rem;gap:1rem} .banner-item{font-size:.7rem}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:1rem} .svc-card-anim{height:100px}
  .svc-card-body{padding:.8rem} .svc-card-body h3{font-size:.65rem} .svc-card-body p{font-size:.65rem}
  .projects{padding:3rem 1.5rem} .projects-grid{grid-template-columns:1fr}
  .cards-section{flex-direction:column;align-items:center;padding:0 1.5rem 3rem}
  .cards-header{padding:3rem 1.5rem 1.5rem} .card{width:100%;max-width:400px}
  .about{padding:3rem 1.5rem} .about-content{grid-template-columns:1fr;gap:2rem;justify-items:center}
  .about-photo{width:120px;height:120px;min-height:unset;aspect-ratio:unset;border-radius:10px}
  .about-photo img{height:120px;border-radius:10px}
  .contact{padding:3rem 1.5rem}
  .form-row{flex-direction:column;align-items:stretch} .form-row label{text-align:left;width:auto}
  .footer-content{flex-direction:column;text-align:center} .footer-links{flex-wrap:wrap;justify-content:center;gap:1rem}

  /* Slider services mobile — navigation masquée */
  .svc-slider-nav { display:none !important; }
  .svc-mobile-nav { display:none !important; }
  .svc-mobile-menu { display:none !important; }

  /* Section slider : aucun débordement */
  .svc-slider {
    overflow:hidden;
    width:100%;
    max-width:100vw;
  }
  .svc-slider-viewport {
    overflow:hidden;
    width:100%;
    max-width:100vw;
  }
  .svc-slider-track {
    display:flex;
    width:100%;
    transition:transform .44s cubic-bezier(.4,0,.2,1);
  }

  /* Chaque slide = exactement 100% de l'écran */
  .svc-slider-slide {
    min-width:100% !important;
    max-width:100% !important;
    width:100% !important;
    flex-shrink:0 !important;
    display:block !important;
    min-height:auto !important;
    overflow:hidden !important;
    position:relative !important;
    box-sizing:border-box !important;
  }

  /* Contenu du slide — 1 colonne, marge gauche 24px */
  .svc-slide-inner {
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    padding:24px 24px 28px 24px !important;
    gap:4px 0 !important;
  }
  .svc-col-title { padding:0 0 4px !important; width:auto !important; }
  .svc-col-text  { padding:0 !important; width:100% !important; }
  .svc-slide-photo { display:none !important; }
  .svc-slide-headline { font-size:16px !important; max-width:100% !important; }
  .svc-slide-body { font-size:13px !important; max-width:100% !important; margin-bottom:16px; }
  .svc-slide-cta { font-size:12px; padding:9px 18px; }
  .svc-slider-dots { background:#eeeef8; padding:12px; }
}
@media(max-width:480px){
  .services-grid{grid-template-columns:repeat(2,1fr);gap:.8rem} .svc-card-anim{height:80px}
  .svc-card-body{padding:.6rem} .svc-card-body h3{font-size:.6rem} .svc-card-body p{display:none}
  .hero{height:350px} .hero-title{font-size:2.2rem}
  .btn-primary,.btn-secondary{font-size:.38rem;padding:.42rem .9rem}
  .banner{gap:.8rem;padding:.8rem 1rem} .banner-item{font-size:.6rem}
}

/* Réduire les animations pour les utilisateurs qui le préfèrent */
@media(prefers-reduced-motion:reduce){
  .reveal,.hero-title,.hero-actions { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}

/* =============================================
   MEGA MENU
   ============================================= */
.nav-has-mega { position:relative; }
.nav-chevron { font-size:.55rem;margin-left:.2rem;display:inline-block;transition:transform .25s; }
.nav-has-mega:hover .nav-chevron,
.nav-has-mega.open .nav-chevron { transform:rotate(180deg); }

.mega-menu {
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:16px;padding:1.2rem;
  padding-top:1.8rem;
  box-shadow:0 20px 60px rgba(82,126,217,.18),0 2px 8px rgba(0,0,0,.06);
  border:1px solid rgba(82,126,217,.08);
  width:560px;z-index:200;
}
.mega-menu::before {
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;background:#fff;border-left:1px solid rgba(82,126,217,.08);
  border-top:1px solid rgba(82,126,217,.08);rotate:45deg;
}
.mega-menu::after {
  content:'';position:absolute;top:-16px;left:0;right:0;height:16px;
  background:transparent;
}
.nav-has-mega:hover .mega-menu,
.nav-has-mega.open .mega-menu { display:block; }

.mega-menu-inner {
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
}
.mega-item {
  display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem;
  border-radius:10px;text-decoration:none;transition:background .2s;
}
.mega-item:hover { background:rgba(82,126,217,.06); }
.mega-icon {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.1rem;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--c2),var(--c3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.mega-text { display:flex;flex-direction:column;gap:.1rem; }
.mega-text strong { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text); }
.mega-text span { font-size:.72rem;color:var(--muted);line-height:1.3; }

/* =============================================
   VIGNETTES CLIQUABLES
   ============================================= */
.svc-card-link {
  display:block;text-decoration:none;color:inherit;height:100%;
}
.svc-card-link:hover { text-decoration:none; }
.svc-card:hover .svc-card-body h3 { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; }

/* =============================================
   PAGES SERVICE
   ============================================= */
.svc-page { padding-top:60px; }

.svc-hero {
  background:linear-gradient(135deg,var(--c2),var(--c3));
  padding:4rem 2rem;
}
.svc-hero-inner {
  max-width:900px;margin:0 auto;display:flex;align-items:center;gap:3rem;
}
.svc-hero-icon {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:4rem;width:100px;height:100px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.15);border-radius:20px;color:#fff;
}
.svc-hero-text { flex:1; }
.svc-hero-text .section-tag { color:rgba(255,255,255,.7); }
.svc-hero-title {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
  color:#fff;-webkit-text-fill-color:#fff;line-height:1.2;margin:.5rem 0 1rem;
}
.svc-hero-sub { font-size:1rem;color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:1.5rem; }

.svc-container { max-width:900px;margin:0 auto;padding:0 2rem; }

.svc-description {
  padding:4rem 2rem;background:#fff;
  font-size:.95rem;line-height:1.9;color:var(--text);
}
.svc-description h2 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.4rem;font-weight:700;color:var(--c2);margin:2rem 0 .8rem; }
.svc-description p { margin-bottom:1rem; }
.svc-description ul { margin:.5rem 0 1rem 1.5rem; }
.svc-description li { margin-bottom:.4rem; }

.svc-benefits { padding:3rem 2rem 4rem;background:#fafaff; }
.svc-benefits-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.3rem;font-weight:700;color:var(--c2);margin-bottom:1.5rem; }
.svc-benefits-list { list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.8rem; }
.svc-benefit-item {
  display:flex;align-items:flex-start;gap:.7rem;padding:.8rem 1rem;
  background:#fff;border-radius:10px;border:1px solid #e8e8f0;font-size:.85rem;
}
.svc-benefit-icon { color:var(--c2);font-weight:700;flex-shrink:0;margin-top:.1rem; }

.svc-cta-section {
  padding:4rem 2rem;background:linear-gradient(135deg,var(--c2),var(--c3));text-align:center;
}
.svc-cta-inner h2 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.8rem; }
.svc-cta-inner p { color:rgba(255,255,255,.8);margin-bottom:1.5rem;font-size:.95rem; }

/* =============================================
   BLOG — HOME MODULE
   ============================================= */
.home-blog { padding:4rem 2rem 5rem;background:#fff; }
.home-blog-list { max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:0; }

.home-blog-item {
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1.5rem;
  padding:1.2rem 0;border-bottom:1px solid #e8e8f0;
}
.home-blog-item:first-child { border-top:1px solid #e8e8f0; }

.home-blog-meta {
  display:flex;align-items:center;gap:.6rem;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.6rem;color:var(--muted);
  white-space:nowrap;
}
.home-blog-content { flex:1; }
.home-blog-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.8rem;font-weight:700;margin-bottom:.3rem; }
.home-blog-title a { text-decoration:none;color:var(--text); }
.home-blog-title a:hover { color:var(--c2); }
.home-blog-excerpt { font-size:.75rem;color:var(--muted);line-height:1.6; }
.home-blog-arrow {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1rem;color:var(--c2);text-decoration:none;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1.5px solid var(--c2);transition:all .2s;flex-shrink:0;
}
.home-blog-arrow:hover { background:var(--c2);color:#fff; }

/* =============================================
   BLOG — PAGE LISTE
   ============================================= */
.blog-page { padding-top:60px; }
.blog-hero { background:linear-gradient(135deg,var(--c2),var(--c3));padding:4rem 2rem; }
.blog-hero-title {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
  color:#fff;-webkit-text-fill-color:#fff;line-height:1.2;margin:.5rem 0 1rem;
}
.blog-hero-sub { font-size:.95rem;color:rgba(255,255,255,.8);line-height:1.7;max-width:600px; }
.blog-hero .section-tag { color:rgba(255,255,255,.7); }

.blog-list { padding:3rem 2rem 5rem;background:#fff; }
.blog-item {
  display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:2rem;
  padding:1.5rem 0;border-bottom:1px solid #e8e8f0;
}
.blog-item:first-child { border-top:1px solid #e8e8f0; }
.blog-item-meta { display:flex;flex-direction:column;gap:.4rem; }
.blog-item-date { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.62rem;color:var(--muted); }
.blog-item-cat {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;background:var(--c3);padding:.2rem .6rem;border-radius:100px;display:inline-block;
}
.blog-item-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.88rem;font-weight:700;margin-bottom:.4rem; }
.blog-item-title a { text-decoration:none;color:var(--text); }
.blog-item-title a:hover { color:var(--c2); }
.blog-item-excerpt { font-size:.78rem;color:var(--muted);line-height:1.7; }
.blog-item-arrow {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1rem;color:var(--c2);text-decoration:none;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1.5px solid var(--c2);transition:all .2s;flex-shrink:0;
}
.blog-item-arrow:hover { background:var(--c2);color:#fff; }
.blog-empty { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;color:var(--muted);text-align:center;padding:3rem 0;font-size:.85rem; }
.blog-pagination { margin-top:2rem;text-align:center; }
.blog-pagination .nav-links a,.blog-pagination .nav-links span {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.65rem;padding:.4rem .8rem;border-radius:6px;
  border:1px solid #e8e8f0;margin:0 .2rem;text-decoration:none;color:var(--text);
}
.blog-pagination .nav-links .current { background:var(--c2);color:#fff;border-color:var(--c2); }
.blog-pagination .nav-links a:hover { border-color:var(--c2);color:var(--c2); }

/* =============================================
   ARTICLE SINGLE
   ============================================= */
.single-post { padding-top:60px; }
.single-hero { padding:3rem 2rem; }
.single-meta { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.62rem;color:rgba(255,255,255,.7);margin-bottom:.8rem; }
.single-thumbnail { background:#fff;padding:2rem 2rem 0; }
.single-img { width:100%;max-height:400px;object-fit:cover;border-radius:12px;display:block; }
.single-content {
  padding:3rem 2rem 2rem;background:#fff;
  font-size:.92rem;line-height:1.9;color:var(--text);
}
.single-content h2 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.3rem;font-weight:700;color:var(--c2);margin:2rem 0 .8rem; }
.single-content h3 { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1.1rem;font-weight:700;color:var(--c3);margin:1.5rem 0 .6rem; }
.single-content p { margin-bottom:1rem; }
.single-content ul,
.single-content ol { margin:.5rem 0 1rem 1.5rem; }
.single-content li { margin-bottom:.4rem; }
.single-content strong { color:var(--text);font-weight:700; }
.single-content a { color:var(--c2);text-decoration:underline; }
.single-back { padding:1.5rem 2rem 3rem;background:#fff; }

/* =============================================
   RESPONSIVE MEGA MENU + BLOG
   ============================================= */
@media(max-width:768px) {
  .mega-menu { display:none !important; }
  .nav-chevron { display:none; }
  .home-blog-item { grid-template-columns:1fr auto;grid-template-rows:auto auto; }
  .home-blog-meta { grid-column:1;grid-row:1; }
  .home-blog-content { grid-column:1;grid-row:2; }
  .home-blog-arrow { grid-column:2;grid-row:1/3; }
  .blog-item { grid-template-columns:1fr auto; }
  .blog-item-meta { display:none; }
  .svc-hero-inner { flex-direction:column;gap:1.5rem; }
  .svc-hero-icon { font-size:2.5rem;width:70px;height:70px; }
  .svc-benefits-list { grid-template-columns:1fr; }
}

/* =============================================
   MENTIONS LÉGALES
   ============================================= */
.legal-page { padding-top:60px; }
.legal-content {
  padding:3rem 2rem 5rem;background:#fff;
}
.legal-section {
  margin-bottom:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid #e8e8f0;
}
.legal-section:last-of-type { border-bottom:none; }
.legal-section h2 {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:1rem;font-weight:700;
  color:var(--c2);margin-bottom:1rem;letter-spacing:.02em;
}
.legal-section p { font-size:.88rem;line-height:1.9;color:var(--text);margin-bottom:.8rem; }
.legal-section ul { margin:.5rem 0 .8rem 1.5rem; }
.legal-section li { font-size:.88rem;line-height:1.8;color:var(--text); }
.legal-section a { color:var(--c2);text-decoration:underline; }
.legal-update {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;font-size:.65rem;color:var(--muted);
  text-align:right;margin-top:2rem;
}

/* =============================================
   GSAP ANIMATIONS — état initial
   ============================================= */
/* Les éléments animés par GSAP partent invisibles — GSAP les rend visibles */
.gsap-ready .section-header,
.gsap-ready .svc-card,
.gsap-ready .project-card,
.gsap-ready .home-blog-item,
.gsap-ready .about-content {
  opacity: 0;
}
/* Fallback si GSAP ne charge pas */
@media (prefers-reduced-motion: reduce) {
  .section-header, .svc-card, .project-card,
  .home-blog-item, .about-content { opacity: 1 !important; transform: none !important; }
}

/* =============================================
   SERVICE SLIDER
   ============================================= */
.svc-slider {
  background:#fff;
  padding:0;
  width:100%;
}

/* Nav onglets */
.svc-slider-nav {
  display:flex;
  justify-content:center;
  background:#fff;
  border-bottom:none;
  overflow-x:auto;
  scrollbar-width:none;
  padding:16px 12px 8px;
  gap:48px;
}
.svc-slider-nav::-webkit-scrollbar { display:none; }

.svc-slider-tab {
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  background:none;
  border:none;
  transition:transform .2s ease;
  display:flex;
  align-items:center;
  transform-origin:center;
}
.svc-slider-tab:hover {
  transform:scale(1.2);
}
.svc-slider-tab.active {
  transform:scale(1.2);
}
.svc-slider-tab svg text {
  fill:#fff;
  stroke:#4e1dcc;
  stroke-width:2px;
  stroke-linejoin:round;
  paint-order:stroke fill;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.svc-slider-tab.active svg text {
  fill:var(--tab-color, #4e1dcc);
  stroke:var(--tab-color, #4e1dcc);
  stroke-width:2px;
}

/* Viewport & track */
.svc-slider-viewport { overflow:hidden; background:#eeeef8; }
.svc-slider-track {
  display:flex;
  transition:transform .44s cubic-bezier(.4,0,.2,1);
}
/* Slide — 2 colonnes : titre | texte */
.svc-slider-slide {
  min-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#eeeef8;
  flex-shrink:0;
  min-height:400px;
  position:relative;
  overflow:hidden;
}
.svc-slide-inner {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:0 32px;
  width:auto;
  margin-left:clamp(40px, 18vw, 260px);
  padding:0;
  z-index:1;
  position:relative;
}

/* Colonne 1 — Grand titre SVG */
.svc-col-title {
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:48px 32px 48px 0;
}

/* Colonne 2 — Texte + CTA */
.svc-col-text {
  padding:48px 0 48px 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}

.svc-slide-headline {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  font-size:20px;
  font-weight:500;
  color:var(--slide-color, #1a1a2e);
  line-height:1.4;
  margin-bottom:20px;
  max-width:380px;
}
.svc-slide-headline span {
  display:inline-block;
  color:var(--slide-color, var(--c3));
  border:2px solid var(--slide-color, var(--c3));
  border-radius:999px;
  padding:0 10px;
  line-height:1.5;
}

.svc-slide-body {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  font-size:14px;
  font-weight:400;
  color:var(--slide-color, #555);
  line-height:1.8;
  max-width:340px;
  margin-bottom:28px;
}

.svc-slide-cta {
  display:inline-flex;
  align-items:center;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  background:var(--slide-color, var(--c3));
  padding:12px 28px;
  border-radius:999px;
  text-decoration:none;
  width:fit-content;
  transition:opacity .2s;
}
.svc-slide-cta:hover { opacity:.82; }

/* Colonne 3 — logos / canvas */
.svc-col-right {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 48px 32px 20px;
  height:100%;
}

.svc-canvas-wrap {
  width:100%;
  height:280px;
  border-radius:10px;
  background:#12112a;
  position:relative;
  overflow:hidden;
}
.svc-canvas-wrap canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Logos SEA */
.svc-logos {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.svc-logos > div {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
}
.svc-logo-google { font-size:40px; color:#4285F4; }
.svc-logo-meta   { font-size:26px; color:#0082FB; display:flex; align-items:center; gap:6px; }
.svc-logo-yt     { font-size:32px; color:#FF0000; }
.svc-logo-tt     { font-size:26px; color:#010101; }
.svc-logo-ig     { font-size:26px; background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* Dots */
.svc-slider-dots {
  display:flex;
  justify-content:center;
  gap:7px;
  padding:16px;
  background:#eeeef8;
}
.svc-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccc;
  cursor:pointer;
  border:none;
  transition:all .22s;
  padding:0;
}
.svc-dot.active {
  background:#4e1dcc;
  width:20px;
  border-radius:3px;
}

/* Responsive */



/* ── Photo slide service — centrée par rapport à la page ── */
.svc-slider-slide {
  position:relative;
  overflow:hidden;
}
.svc-slide-photo {
  position:absolute;
  top:0;
  right:0;
  width:calc(50% - 40px);
  height:100%;
  pointer-events:none;
}
.svc-slide-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 25%);
  mask-image:linear-gradient(to right, transparent 0%, black 25%);
}
@media(max-width:768px) {
  .svc-slide-photo { display:none; }
}

/* ── Page service — hero bloc slider ── */
.svc-page-hero {
  background:#eeeef8;
  width:100%;
  position:relative;
  overflow:hidden;
  min-height:400px;
}
.svc-page-inner {
  margin-left:clamp(40px,18vw,260px);
  gap:0 32px;
}


