/* ============================================
   TECHLIA — DESIGN SYSTEM
   Variables CSS uniquement — aucune couleur en dur
   dans les fichiers de page. Un futur mode sombre
   se fait en redéfinissant ce bloc, sans toucher au reste.
   ============================================ */

:root{
  /* Palette de marque */
  --navy:#0D1F3C;
  --navy-light:#16294A;
  --navy-soft:#22355A;
  --green:#00C896;
  --green-dim:#00A67D;
  --green-tint:#EAF7F1;

  /* Sémantique (light mode par défaut) */
  --bg:#FFFFFF;
  --bg-subtle:#F7F8FA;
  --surface:#FFFFFF;
  --border:#E5E9EF;
  --text:#0D1F3C;
  --text-muted:#5B6B7C;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:#B8C4D9;

  /* Ombres */
  --shadow-sm:0 2px 8px rgba(13,31,60,0.06);
  --shadow-md:0 12px 32px -12px rgba(13,31,60,0.14);
  --shadow-lg:0 24px 56px -20px rgba(13,31,60,0.22);

  /* Rayons */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-full:999px;

  /* Typographie */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace; /* usage très limité désormais */

  /* Espacements */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
}

/* Emplacement réservé pour un futur mode sombre :
[data-theme="dark"]{
  --bg:#0B1424; --bg-subtle:#0F1B30; --surface:#101E36;
  --border:#22314D; --text:#F2F5F9; --text-muted:#93A3BE;
}
*/

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
  line-height:1.15;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{padding:var(--space-9) 0;}
@media (max-width:760px){ section{padding:var(--space-7) 0;} .wrap{padding:0 20px;} }

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo{ font-family:var(--font-display); font-weight:700; font-size:20px; display:flex; align-items:baseline; gap:2px; }
.logo .ia{color:var(--green);}
.nav-links{display:flex; gap:28px; font-size:14px; font-weight:500;}
.nav-links a{opacity:0.75; transition:opacity .15s; position:relative;}
.nav-links a:hover{opacity:1;}
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:var(--green); transition:width .2s ease; }
.nav-links a:hover::after{width:100%;}
@media (max-width:960px){ .nav-links{display:none;} }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-sm);
  font-weight:600; font-size:14.5px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-accent{background:var(--green); color:var(--navy);}
.btn-accent:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,200,150,0.45);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-ghost-dark{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25);}
.btn-ghost-dark:hover{border-color:#fff;}

@media (max-width:960px){ .nav-cta-desktop{display:none;} }
.nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; }
@media (max-width:960px){ .nav-burger{display:flex;} }
.nav-burger span{ width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  display:none; flex-direction:column; gap:4px;
  background:#fff; border-bottom:1px solid var(--border);
  padding:16px 20px 20px; max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.mobile-menu.open{ display:flex; max-height:420px; }
.mobile-menu a{ padding:12px 4px; font-size:15px; font-weight:500; border-bottom:1px solid var(--border); }
.mobile-menu a:last-child{border-bottom:none;}

/* SECTION HEADERS */
.eyebrow{
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--green-dim);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }
.eyebrow.on-dark{color:var(--green);}
.sec-head{max-width:680px; margin-bottom:56px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head.center .eyebrow{justify-content:center;}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);}
.sec-head p{color:var(--text-muted); margin-top:16px; font-size:17px;}
.bg-subtle{background:var(--bg-subtle);}
.bg-navy{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.bg-navy::before{
  content:'';
  position:absolute; top:-20%; right:-8%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,150,0.10) 0%, rgba(0,200,150,0) 70%);
  pointer-events:none;
}
.bg-navy .wrap{ position:relative; z-index:1; }
.bg-navy .sec-head h2{color:#fff;}
.bg-navy .sec-head p{color:var(--text-on-dark-muted);}

/* CARDS — sobres, ombres douces */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(0,200,150,0.4); }

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.show{opacity:1; transform:translateY(0);}

footer{padding:var(--space-7) 0; border-top:1px solid var(--border);}
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13.5px; color:var(--text-muted); }