:root{--navy:#06172c;--navy2:#0b3157;--blue:#1597ff;--cyan:#41c8ff;--green:#0a9c66;--ink:#10243a;--muted:#61758a;--paper:#f4f8fc;--line:#d9e5ef;--white:#fff;--shadow:0 16px 50px rgba(6,23,44,.13);--radius:20px;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.62}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 38px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(6,23,44,.97);border-bottom:1px solid rgba(255,255,255,.1)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:900}.brand img{width:58px;height:58px;border-radius:50%;object-fit:contain}.brand small{display:block;color:#9fc0d9;font-weight:700}.links{display:flex;align-items:center;gap:22px;color:#fff;font-weight:800}.links a:hover{color:#64d0ff}.menu{display:none;background:transparent;border:1px solid #8098ad;color:#fff;border-radius:10px;padding:8px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:12px;font-weight:900;border:0;cursor:pointer}.btn-primary{color:#fff;background:linear-gradient(135deg,#0f83dc,#24b9ff);box-shadow:0 10px 28px rgba(21,151,255,.25)}.btn-outline{border:1px solid rgba(255,255,255,.55);color:#fff}.hero{min-height:760px;color:#fff;display:flex;align-items:center;background-size:cover;background-position:center;position:relative}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,14,28,.94) 0%,rgba(4,25,48,.76) 48%,rgba(4,22,40,.18) 100%)}.hero .container{position:relative}.hero-content{max-width:700px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;color:#45c8ff;font-weight:950;font-size:.8rem}.hero h1{font-size:clamp(3.2rem,6vw,5.6rem);line-height:.98;letter-spacing:-.05em;margin:.22em 0}.hero p{font-size:1.13rem;color:#d8e7f4}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}.trustline{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}.trustline span:before{content:"✓";color:#47d6a5;margin-right:7px;font-weight:900}.section{padding:82px 0}.soft{background:var(--paper)}.dark{background:var(--navy);color:#fff}.head{max-width:780px;margin-bottom:38px}.head h2{font-size:clamp(2.2rem,4.7vw,3.6rem);line-height:1.05;letter-spacing:-.035em;margin:.2em 0}.head p{color:var(--muted)}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 9px 28px rgba(6,23,44,.05)}.card h3{font-size:1.35rem;margin:10px 0}.card p{color:var(--muted)}.icon{width:52px;height:52px;border-radius:15px;background:#e5f5ff;display:grid;place-items:center;font-size:1.5rem}.green .icon{background:#e4f7ef}.checks{list-style:none;padding:0}.checks li{padding:6px 0 6px 27px;position:relative}.checks li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.page-hero{padding:74px 0;background:linear-gradient(135deg,var(--navy),#0c567c);color:#fff}.page-hero h1{font-size:clamp(2.6rem,5vw,4.5rem);margin:0;line-height:1.05}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.portfolio-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.portfolio-cover{height:150px;background:linear-gradient(135deg,#0a3158,#1597ff);display:grid;place-items:center;color:#fff;font-size:2.3rem}.portfolio-body{padding:22px}.tag{display:inline-block;padding:5px 10px;border-radius:999px;background:#e8f5fd;color:#075f99;font-size:.78rem;font-weight:900}.form{display:grid;gap:15px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-weight:800;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:13px;border:1px solid #c8d8e5;border-radius:11px}.field textarea{min-height:150px}.notice{background:#eaf7ff;border-left:5px solid var(--blue);padding:16px;border-radius:12px}.cta{background:linear-gradient(135deg,var(--navy),#0d5c82);color:#fff;border-radius:26px;padding:46px;display:flex;justify-content:space-between;align-items:center;gap:25px}.footer{background:#03111f;color:#bfd1df;padding:52px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer a{display:block;margin:7px 0}.footer img{width:95px}.bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px}.whatsapp{position:fixed;right:18px;bottom:18px;background:#13b86b;color:white;padding:13px 18px;border-radius:999px;font-weight:900;z-index:40}
.admin-shell{max-width:1000px;margin:40px auto;padding:20px}.admin-box{border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:18px}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}.entry{border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}.entry input,.entry textarea{width:100%;margin:5px 0;padding:10px;border:1px solid #c8d8e5;border-radius:9px}
@media(max-width:950px){.links{display:none;position:absolute;left:0;right:0;top:78px;background:var(--navy);padding:20px;flex-direction:column;align-items:flex-start}.links.open{display:flex}.menu{display:block}.grid2,.grid3,.portfolio-grid,.footer-grid{grid-template-columns:1fr}.hero{min-height:680px}.hero:before{background:rgba(3,18,35,.82)}.row2{grid-template-columns:1fr}.cta{flex-direction:column;align-items:flex-start}}

/* =========================================================
   VERSION 2 AMÉLIORÉE — fond simple, clair et professionnel
   ========================================================= */
:root{
  --paper:#f8fbfe;
  --paper2:#eef7fd;
  --navy:#08233d;
  --navy2:#0c3558;
  --blue:#20aeea;
  --cyan:#57d1f4;
  --ink:#10283f;
  --muted:#5a7186;
  --line:#d8e8f2;
}
body{background:#fff}
.site-header{
  background:#fff;
  border-bottom:1px solid #dce9f2;
  box-shadow:0 5px 20px rgba(8,35,61,.06);
}
.brand{color:var(--ink)}
.brand small{color:#527187}
.brand img{
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:2px solid #d7edf8;
  box-shadow:0 6px 16px rgba(8,35,61,.13);
}
.links{color:var(--ink)}
.links a:hover{color:#0796d4}
.menu{color:var(--ink);border-color:#9eb5c6}
.hero{
  min-height:690px;
  background-image:none !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(87,209,244,.20), transparent 28%),
    radial-gradient(circle at 72% 75%, rgba(32,174,234,.12), transparent 32%),
    linear-gradient(135deg,#f9fdff 0%,#eef8fd 55%,#e4f4fb 100%);
  color:var(--ink);
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:auto -120px -180px auto;
  width:620px;
  height:620px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(32,174,234,.13),rgba(87,209,244,.04));
  border:1px solid rgba(32,174,234,.15);
}
.hero:after{
  content:"";
  position:absolute;
  right:8%;
  top:18%;
  width:350px;
  height:350px;
  border-radius:38px;
  transform:rotate(8deg);
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(226,245,253,.72));
  box-shadow:0 24px 70px rgba(8,35,61,.12);
  border:1px solid rgba(32,174,234,.16);
}
.hero .container{z-index:2}
.hero-content{max-width:720px}
.hero h1{font-size:clamp(3.25rem,6vw,5.5rem);color:#0a2944}
.hero p{color:#405d74}
.eyebrow{color:#008dc9}
.btn-outline{border-color:#7ba7c2;color:#153d59;background:rgba(255,255,255,.55)}
.trustline{color:#2c526e}
.soft{background:#f5faff}
.card{box-shadow:0 13px 40px rgba(8,35,61,.07)}
.page-hero{
  background:
    radial-gradient(circle at 85% 25%,rgba(87,209,244,.20),transparent 28%),
    linear-gradient(135deg,#f8fdff,#e8f6fc);
  color:var(--ink);
  border-bottom:1px solid #d7e8f2;
}
.page-hero p{color:#4e6d82}
.dark{background:#0b2a45}
.cta{background:linear-gradient(135deg,#0d385d,#0c5f84)}
.footer{background:#08233d}
@media(max-width:950px){
  .links{background:#fff;color:var(--ink);border-top:1px solid #dce9f2}
  .hero:after{opacity:.25;right:-140px}
}

/* =========================================================
   VERSION 3 — HERO BLEU CYBERSÉCURITÉ
   Fond inspiré du visuel validé par le client.
   ========================================================= */
.site-header{
  background:rgba(3,18,35,.98);
  border-bottom:1px solid rgba(80,164,230,.22);
  box-shadow:0 6px 25px rgba(0,0,0,.22);
}
.brand{color:#fff}
.brand small{color:#9dc3df}
.brand img{
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:2px solid rgba(73,190,255,.65);
  box-shadow:0 0 20px rgba(27,169,255,.25);
}
.links{color:#fff}
.links a:hover{color:#32b8ff}
.menu{color:#fff;border-color:#6f93ae}

.hero-v3{
  min-height:760px;
  color:#fff;
  background:
    linear-gradient(90deg,
      rgba(2,15,30,.98) 0%,
      rgba(3,24,48,.96) 38%,
      rgba(3,28,56,.82) 56%,
      rgba(3,20,39,.28) 100%
    ),
    url('/assets/img/hero-cyber-v3.jpg') right center / 58% 100% no-repeat,
    linear-gradient(135deg,#031326,#06284d 60%,#073967);
}
.hero-v3:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 48%,rgba(24,142,255,.18),transparent 26%),
    linear-gradient(180deg,rgba(1,10,22,.06),rgba(0,10,24,.22));
  pointer-events:none;
}
.hero-v3:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(40,120,190,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,120,190,.055) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(90deg,black,transparent 62%);
  pointer-events:none;
}
.hero-v3 .container{position:relative;z-index:2}
.hero-v3 .hero-content{max-width:710px}
.hero-v3 h1{
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.28);
}
.hero-v3 p{color:#d7e7f6}
.hero-v3 .eyebrow{color:#2fc3ff}
.hero-v3 .btn-outline{
  color:#fff;
  border-color:rgba(100,190,255,.72);
  background:rgba(4,33,65,.34);
}
.hero-v3 .trustline{color:#d5e8f7}
.hero-v3 .trustline span:before{color:#2dc1ff}

@media(max-width:950px){
  .links{background:#06182d;color:#fff;border-top:1px solid rgba(255,255,255,.1)}
  .hero-v3{
    min-height:720px;
    background:
      linear-gradient(rgba(2,16,32,.90),rgba(2,20,39,.90)),
      url('/assets/img/hero-cyber-v3.jpg') center / cover no-repeat;
  }
}