/* ===========================
   THEME — Palette Tech / IA
=========================== */
:root{
  --ink-900:#0f1120;
  --ink-800:#171a2e;
  --ink-700:#21243b;

  --violet-800:#2f1e78;   /* violet froid */
  --violet-700:#3C00BA;   /* touche logo */
  --blue-700:#2149d9;
  --blue-600:#2a62ff;
  --blue-500:#3f7afe;
  --cyan-500:#19c9d7;

  --bg-1:#f6f8fc;   /* fond global clair */
  --bg-2:#edf1fa;   /* alternance */
  --card:#ffffff;

  --gradient-hero:
    radial-gradient(60% 80% at 12% 12%, rgba(31,182,173,.18) 0%, transparent 60%),
    radial-gradient(70% 80% at 90% 8%,  rgba(63,122,254,.18) 0%, transparent 60%),
    radial-gradient(80% 90% at 40% 92%, rgba(47,30,120,.20) 0%, transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #eff4ff 100%);

  --gradient-primary: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  --gradient-accent:  linear-gradient(135deg, var(--violet-800), var(--blue-500));

  --shadow-1: 0 10px 30px rgba(23,26,46,.10);
  --shadow-2: 0 24px 60px rgba(23,26,46,.18);

  --radius-6: 16px;
  --radius-8: 22px;

  --container: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-1); color:var(--ink-800);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans";
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.container{width:min(100% - 40px, var(--container)); margin-inline:auto}

/* ===========================
   GLOBAL FX LAYER (rectangles)
=========================== */
.fx-layer{
  position:fixed; inset:-20vh -20vw auto -20vw; height:140vh; width:140vw;
  z-index:0; pointer-events:none; overflow:visible;
  filter: drop-shadow(0 10px 24px rgba(42,98,255,.08));
}
.fx-rect{
  position:absolute; width:420px; height:220px; border-radius:24px;
  background: linear-gradient(135deg, rgba(42,98,255,.22), rgba(25,201,215,.22));
  transform-origin: 50% 50%;
  mix-blend-mode: multiply; opacity:.28; will-change: transform, opacity;
  box-shadow: 0 20px 60px rgba(33,73,217,.10), inset 0 0 60px rgba(25,201,215,.10);
  animation: spin 34s linear infinite, breathe 7.5s ease-in-out infinite;
}
.fx-rect.alt{background: linear-gradient(135deg, rgba(47,30,120,.22), rgba(63,122,254,.22));}
.fx-rect.t2{width:520px; height:260px; border-radius:28px; opacity:.24; animation-duration: 42s, 9s}
.fx-rect.t3{width:360px; height:180px; border-radius:22px; opacity:.22; animation-duration: 28s, 8.5s}
.fx-rect.t4{width:460px; height:200px; border-radius:26px; opacity:.20; animation-duration: 50s, 10s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform: scale(1)} 50%{transform: scale(1.035)}}

@media (prefers-reduced-motion: reduce){
  .fx-rect{animation:none}
}

/* ===========================
   SCROLL PROGRESS
=========================== */
#scrollbar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--gradient-primary); z-index:9999; box-shadow:0 0 12px rgba(42,98,255,.35);
  transition: width .15s ease;
}

/* ===========================
   HEADER
=========================== */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(23,26,46,.06);
  backdrop-filter: blur(10px) saturate(140%);
}
.header .row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:34px; width:auto}
.brand span{font-family:Montserrat,Inter,sans-serif; font-weight:800; font-size:20px; color:var(--ink-900); letter-spacing:.4px}
.nav{display:flex; align-items:center; gap:18px}
.nav a{color:var(--ink-700); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px; transition:transform .18s ease}
.nav a:hover{background:rgba(63,122,254,.08); transform:translateY(-1px)}
.cta{
  padding:10px 16px; border-radius:999px; font-weight:800; color: #fff !important;;
  text-decoration:none; background:var(--gradient-primary); box-shadow:var(--shadow-1);
  transition: transform .18s ease, filter .2s ease;
}
.cta:hover{transform:translateY(-1px); filter:saturate(115%)}
.burger{display:none}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; cursor:pointer}
  .mobile{position:fixed; inset:60px 16px auto 16px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; box-shadow:var(--shadow-2); display:none; padding:10px}
  .mobile a{display:block; padding:12px 10px; text-decoration:none; color:var(--ink-800); border-radius:10px}
  .mobile a:hover{background:rgba(63,122,254,.08)}
}

/* ===========================
   HERO — animations
=========================== */
.hero{position:relative; isolation:isolate; overflow:hidden; background: var(--gradient-hero); z-index:1}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; padding:76px 0 84px; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
  background:#fff; color:var(--blue-700); font-weight:800; box-shadow:var(--shadow-1)
}
.badge::before{content:"🌐"}
h1{
  font-family:Montserrat,Inter,sans-serif; font-weight:900; line-height:1.05; margin:12px 0 12px;
  font-size: clamp(36px, 4.6vw, 60px); color:var(--ink-900);
}
h1 .accent{
  background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 200%;
  animation: gradientSweep 6s ease-in-out infinite;
}
@keyframes gradientSweep{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
.hero p{max-width:660px; font-size:18px; color:var(--ink-700); margin:0 0 26px}
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none; border:1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; will-change: transform;
}
.btn.primary{background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-1)}
.btn.primary:hover{transform: translateY(-2px); filter:saturate(115%); box-shadow:0 14px 30px rgba(42,98,255,.24)}
.btn.ghost{background:#fff; color:var(--ink-800); border:1px solid rgba(23,26,46,.08)}
.btn.ghost:hover{border-color: rgba(23,26,46,.16); transform:translateY(-2px)}
.hero-visual{
  position:relative; height:420px; border-radius:var(--radius-8); background: linear-gradient(180deg,#ffffff,#f7fbff);
  box-shadow:var(--shadow-2); overflow:hidden; transform: translateZ(0);
}
.orb{position:absolute; border-radius:50%; filter: blur(12px) saturate(120%); opacity:.9}
.orb.violet{width:210px; height:210px; left:14%; top:12%; background: radial-gradient(circle at 30% 30%, #c9d0ff, var(--violet-800))}
.orb.cyan{width:270px; height:270px; right:10%; top:18%; background: radial-gradient(circle at 30% 30%, #b7f7ff, var(--cyan-500))}
.orb.blue{width:180px; height:180px; left:40%; bottom:12%; background: radial-gradient(circle at 30% 30%, #c6d8ff, var(--blue-600))}
@keyframes floaty{from{transform:translateY(0)} 50%{transform:translateY(-14px)} to{transform:translateY(0)}}
.orb{animation: floaty 8s ease-in-out infinite}
.orb.cyan{animation-duration: 10s}
.orb.blue{animation-duration: 7.5s}

/* ===========================
   SECTIONS
=========================== */
.section{padding:70px 0; position:relative; z-index:1}
.section.alt{background:var(--bg-2)}
.section .head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px}
.section h2{
  font-family:Montserrat,Inter,sans-serif; font-size: clamp(26px,3.2vw,36px); margin:0 0 6px; color:var(--ink-900)
}
.section p.lead{margin:0; color:var(--ink-700); max-width:720px}

.grid{display:grid; gap:20px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){
  .hero .container{grid-template-columns:1fr}
  .hero-visual{height:360px}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){ .cols-3,.cols-4{grid-template-columns:1fr} }

/* ===========================
   CARDS + animations
=========================== */
.card{
  background:linear-gradient(180deg,#ffffff, #fbfbff);
  border:1px solid rgba(23,26,46,.06);
  border-radius: var(--radius-6);
  box-shadow: var(--shadow-1);
  padding:22px; transform-style:preserve-3d; will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform: translateY(-4px) scale(1.01); box-shadow:0 20px 50px rgba(33,73,217,.18)}
.card h3{margin:0 0 8px; font-size:20px; color:var(--ink-900)}
.card p{margin:0; color:var(--ink-700)}
.card .meta{font-size:13px; color:#5d6280}
.card .icon{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; margin-bottom:12px;
  background: var(--gradient-accent); color:#fff; font-size:22px; box-shadow: var(--shadow-1);
  transform: translateZ(24px);
}
.tag{font-size:12px; color:#4a4e6e; padding:6px 10px; background:#f0f2fb; border-radius:999px; transition: transform .15s ease}
.tag:hover{transform: translateY(-2px)}

/* ===========================
   DIFFERENCIANTS — border animée
=========================== */
.tile{
  position:relative; padding:22px; border-radius:18px;
  background: linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);
  border:1px solid rgba(33,73,217,.08); box-shadow: var(--shadow-1);
  overflow:hidden;
}
.tile::before{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  background: conic-gradient(from 0deg, rgba(42,98,255,.35), rgba(25,201,215,.35), rgba(47,30,120,.35), rgba(42,98,255,.35));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:2px; z-index:0; opacity:.0; transition: opacity .25s ease;
  animation: spin 8s linear infinite;
}
.tile::before{opacity:.9}
.tile > *{position:relative; z-index:1}
.tile h3{margin:0 0 12px; font-size:18px}
.tile ul{margin:0; padding-left:18px}
.tile li{margin:8px 0}

/* ===========================
   BANDEAU CTA
=========================== */
.band{
  background: linear-gradient(135deg, rgba(42,98,255,.10), rgba(25,201,215,.10));
  border:1px solid rgba(42,98,255,.16);
  padding:18px; border-radius:18px; box-shadow:var(--shadow-1);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap
}

/* ===========================
   CONTACT
=========================== */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
@media (max-width:980px){ .contact{grid-template-columns:1fr} }
.form{
  background:#fff; border:1px solid rgba(23,26,46,.08); border-radius:20px; padding:22px; box-shadow: var(--shadow-2)
}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
label{font-weight:700; color:var(--ink-800)}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(23,26,46,.15);
  background:linear-gradient(180deg,#ffffff,#f7f9ff); color:var(--ink-800); outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
input:focus, select:focus, textarea:focus{border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(42,98,255,.12); transform: translateY(-1px)}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  padding:12px 18px; border-radius:12px; font-weight:800; border:none; color:#fff;
  background: var(--gradient-primary); box-shadow: var(--shadow-1);
  transition: transform .18s ease, filter .2s ease, box-shadow .2s ease;
}
.button:hover{transform: translateY(-2px); filter:saturate(115%); box-shadow:0 14px 30px rgba(42,98,255,.24)}
.button.secondary{background: var(--gradient-accent)}
.helper{font-size:13px; color:#666}

/* ===========================
   FOOTER
=========================== */
footer{
  background: linear-gradient(180deg, #ffffff 0%, #eef2fb 100%);
  border-top:1px solid rgba(23,26,46,.08); margin-top:40px
}
.footer{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:26px; padding:32px 0
}
.footer h4{margin:0 0 10px; color:var(--ink-900)}
.footer a{display:block; text-decoration:none; color:var(--ink-700); padding:6px 0; transition:transform .15s ease}
.footer a:hover{color: var(--blue-600); transform:translateX(2px)}
.copyright{padding:14px 0 32px; color:#64698b; text-align:center}

/* ===========================
   REVEAL (stagger)
=========================== */
.reveal{opacity:0; transform: translateY(14px); transition: .6s ease; will-change:transform,opacity}
.reveal.in{opacity:1; transform: none}
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}
.reveal[data-delay="4"]{transition-delay:.24s}
.reveal[data-delay="5"]{transition-delay:.30s}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .orb{animation:none}
  .tile::before{animation:none}
  .btn, .card, .nav a, .button{transition:none}
  .reveal{transition:none}
}
/* ===== BACKGROUND RECTANGLES (même style que .tile::before, SANS HOVER) ===== */
@keyframes bgSpin{to{transform:rotate(360deg)}}

.bg-rects{
  position:fixed; inset:-20vh -20vw auto -20vw;  /* déborde pour passer partout */
  width:140vw; height:140vh;
  z-index:0; pointer-events:none; overflow:visible;
}
.bg-rect{
  position:absolute;
  --w: 520px; --h: 240px; --r: 28px;  /* taille par défaut */
  width:var(--w); height:var(--h); border-radius:var(--r);
  padding:2px;                                /* épaisseur du “trait” */
  /* >>> même dégradé que dans .tile::before <<< */
  background: conic-gradient(from 0deg,
    rgba(42,98,255,.35),
    rgba(25,201,215,.35),
    rgba(47,30,120,.35),
    rgba(42,98,255,.35)
  );
  /* ne garder que la bordure (“stroke only”) */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;

  opacity:.22; mix-blend-mode:multiply;
  filter: drop-shadow(0 10px 24px rgba(42,98,255,.10));
  animation: bgSpin 40s linear infinite;   /* tourne en continu */
}

/* variations (vitesses/directions/tailles) */
.bg-rect.slow   { animation-duration: 60s }
.bg-rect.fast   { animation-duration: 28s }
.bg-rect.rev    { animation-direction: reverse }
.bg-rect.sm     { --w: 380px; --h: 180px; --r: 22px }
.bg-rect.lg     { --w: 680px; --h: 300px; --r: 34px }
.bg-rect.faint  { opacity:.16 }
.bg-rect.strong { opacity:.28 }

@media (prefers-reduced-motion: reduce){
  .bg-rect{ animation:none }
}

/* s’assurer que le contenu passe au-dessus du fond */
.hero, .section, header, footer { position:relative; z-index:1 }
/* === Mobile nav fix === */
.header { z-index: 100; } /* par-dessus les backgrounds */
.burger{ display:none; }
@media (max-width: 900px){
  .nav{ display:none; }
  .burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid rgba(0,0,0,.08);
    border-radius:10px; background:#fff; cursor:pointer; z-index:1001;
  }
  /* panneau + backdrop */
  .mobile-backdrop{
    position:fixed; inset:0; background:rgba(15,17,32,.45);
    backdrop-filter: blur(4px); z-index:1000; display:none;
  }
  .mobile{
    position:fixed; right:16px; left:16px; top:64px;
    background:#fff; border:1px solid rgba(0,0,0,.08);
    border-radius:16px; box-shadow:0 24px 60px rgba(23,26,46,.18);
    z-index:1001; display:none; padding:10px;
  }
  .mobile a{
    display:block; padding:14px 12px; text-decoration:none;
    color:var(--ink-800); border-radius:10px;
  }
  .mobile a:hover{ background:rgba(63,122,254,.08); }
  /* état ouvert (géré en JS) */
  .nav-open .mobile,
  .nav-open .mobile-backdrop{ display:block; }
  .nav-open { overflow:hidden; } /* bloque le scroll de la page */
}

/* === Footer responsive fix === */
/* Footer compact responsive */
.footer{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap:26px;
  padding:28px 0;
}
.footer h4{margin:0 0 8px; font-size:16px; line-height:1.2}
.footer p{margin:6px 0 0; font-size:14px; line-height:1.45}
.footer a{display:block; padding:4px 0; font-size:14px; line-height:1.45}

/* Tablet: 2 colonnes équilibrées */
@media (max-width: 900px){
  .footer{grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px}
}

/* Mobile: toujours 2 colonnes (pas 1), plus serré */
@media (max-width: 560px){
  .footer{grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; padding:22px 0}
  .footer h4{font-size:15px; margin-bottom:6px}
  .footer a{padding:3px 0}
  .footer p{font-size:13.5px}
}

/* Ultra-petit écran (secours) : on tolère 1 colonne */
@media (max-width: 360px){
  .footer{grid-template-columns: 1fr}
}

/* Sécurité anti-débordement horizontal */
img, svg, canvas, video{ max-width:100%; height:auto; }
body{ overflow-x:hidden; }
/* Hide mobile panel on desktop */
.mobile,
.mobile-backdrop { display:none !important; }

/* Mobile-only styles */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  /* Ouverture contrôlée par .nav-open sur <body> */
  .nav-open .mobile,
  .nav-open .mobile-backdrop { display:block !important; }
}

/* Desktop only */
@media (min-width:901px){
  .nav{ display:flex; }
  .burger{ display:none; }
}