/* ===========================================================
   ACTIV-NET — design tokens
   =========================================================== */
:root{
  --ink:#0A1420;
  --panel:#0F2233;
  --paper:#F3F4EF;
  --paper-2:#E9EBE3;
  --ink-on-paper:#12181F;
  --copper:#C97D4B;
  --copper-light:#E0A275;
  --signal:#6FD3C7;
  --line:#26445A;
  --line-soft:#33506A;
  --muted:#9FB0BE;
  --muted-on-paper:#5B6670;

  --font-display:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace;

  --wrap:1160px;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

p{margin:0 0 1em;}
a{color:inherit;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

.mono-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 14px;
  display:block;
}
.mono-label.light{color:var(--signal);}
.center{text-align:center;}

.section-title{
  font-size:clamp(26px,3.4vw,38px);
  color:var(--ink-on-paper);
  max-width:720px;
}
.section-title.light{color:var(--paper);}
.section-title.center{margin-left:auto;margin-right:auto;}

.section-lead{
  max-width:620px;
  margin:0 auto 52px;
  color:var(--muted-on-paper);
  font-size:17px;
}
.light-lead{color:var(--muted); max-width:420px;}

.section-illustration{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin:28px auto 8px;
}

/* subtle blueprint grid overlay across the whole page */
.grid-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, rgba(111,211,199,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,211,199,0.035) 1px, transparent 1px);
  background-size:56px 56px;
  mix-blend-mode:screen;
}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,20,32,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:18px;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--paper);
}
.logo span{color:var(--copper);}

.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav a{
  text-decoration:none;
  font-size:14px;
  color:var(--muted);
  transition:color .2s ease;
}
.main-nav a:hover, .main-nav a:focus-visible{color:var(--paper);}
.nav-cta{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:9px 16px !important;
  color:var(--paper) !important;
}
.nav-cta:hover{border-color:var(--copper); color:var(--copper) !important;}

.lang-switch{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted) !important;
  text-decoration:none;
  border:1px solid transparent;
  padding:6px 9px;
}
.lang-switch:hover{color:var(--paper) !important; border-color:var(--line-soft);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; height:1.5px; width:100%;
  background:var(--paper);
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative;
  padding-top:64px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding-bottom:56px;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(32px,4.4vw,50px);
  color:var(--paper);
  max-width:560px;
}
.hero-lead{
  color:var(--muted);
  font-size:17.5px;
  max-width:480px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}

.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  text-decoration:none;
  padding:14px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.btn-primary{
  background:var(--copper);
  color:#191008;
}
.btn-primary:hover{background:var(--copper-light);}
.btn-ghost{
  border-color:var(--line-soft);
  color:var(--paper);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal);}
.btn-block{width:100%; text-align:center; padding:15px;}

.hero-map{display:flex; justify-content:center; align-items:center;}
.net-svg{width:100%; max-width:480px; height:auto;}
.net-lines .line{
  fill:none;
  stroke:var(--line-soft);
  stroke-width:1;
}
.net-nodes .node circle{
  fill:var(--ink);
  stroke:var(--signal);
  stroke-width:1.4;
}
.net-nodes .node-hub circle{
  fill:var(--copper);
  stroke:var(--copper-light);
}
.net-nodes .node text{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.05em;
  fill:var(--muted);
}
.net-nodes .node-hub text{fill:var(--paper); font-weight:500;}

@keyframes pulse-line{
  0%{stroke-dashoffset:24;}
  100%{stroke-dashoffset:0;}
}
.net-lines .line{
  stroke-dasharray:3 5;
  animation:pulse-line 3.2s linear infinite;
}

.region-strip{
  border-top:1px solid var(--line);
  background:var(--panel);
}
.region-strip-inner{
  display:flex; align-items:center; gap:22px;
  flex-wrap:wrap;
  padding:16px 28px;
}
.region-chips{
  list-style:none; display:flex; gap:10px; flex-wrap:wrap;
  margin:0; padding:0;
}
.region-chips li{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:5px 13px;
}

/* ===========================================================
   EXPERTISE
   =========================================================== */
.expertise{
  background:var(--paper);
  color:var(--ink-on-paper);
  padding:96px 0;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--paper-2);
  border:1px solid var(--paper-2);
}
.card{
  background:var(--paper);
  padding:30px 26px;
}
.card-icon{
  width:40px; height:40px;
  color:var(--copper);
  margin-bottom:18px;
}
.card-icon svg{width:100%; height:100%;}
.card h3{
  font-size:17px;
  color:var(--ink-on-paper);
  margin-bottom:10px;
}
.card p{
  font-size:14.5px;
  color:var(--muted-on-paper);
  margin:0;
}

/* ===========================================================
   DATA CENTERS MODULAIRES (offre phare)
   =========================================================== */
.datacenters{
  background:
    radial-gradient(ellipse 900px 500px at 15% 20%, rgba(201,125,75,0.10), transparent 60%),
    var(--ink);
  padding:100px 0;
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
}
.dc-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.dc-visual{display:flex; justify-content:center;}
.dc-illustration{width:100%; max-width:520px; height:auto;}
.dc-illustration .base{stroke:var(--line-soft); stroke-width:1.6; fill:none;}
.dc-illustration .accent{stroke:var(--copper); stroke-width:1.6; fill:none;}
.dc-illustration .signal{stroke:var(--signal); stroke-width:1.4; fill:none;}
.dc-illustration .signal-fill{fill:var(--signal);}
.dc-illustration .muted{stroke:var(--muted); stroke-width:1.2; fill:none;}
.dc-illustration .ground{stroke:var(--line-soft); stroke-width:1.2; stroke-dasharray:2 5; fill:none;}
.dc-illustration text{
  font-family:var(--font-mono);
  font-size:9.5px;
  fill:var(--muted);
  letter-spacing:.04em;
}

.dc-lead{margin-bottom:30px;}

.feature-list{
  list-style:none; margin:0 0 34px; padding:0;
  display:flex; flex-direction:column; gap:18px;
}
.feature-list li{display:flex; gap:14px; align-items:flex-start;}
.fl-icon{
  width:22px; height:22px; flex:none; margin-top:1px;
  color:var(--signal);
}
.feature-list strong{
  display:block;
  color:var(--paper);
  font-size:15px;
  margin-bottom:3px;
}
.feature-list span{
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.dc-cta{display:inline-block;}

/* Zones connectivity illustration */
.zones-visual{
  display:flex; justify-content:center;
  margin-bottom:52px;
}
.zc{width:100%; max-width:620px; height:auto;}
.zc .line{stroke:var(--line-soft); stroke-width:1.4; fill:none; stroke-dasharray:3 5;}
.zc .hub{fill:var(--panel); stroke:var(--signal); stroke-width:1.6;}
.zc .hub-main{fill:var(--copper); stroke:var(--copper-light);}
.zc .pictogram{stroke:var(--paper); stroke-width:1.3; fill:none;}
.zc .pictogram-dark{stroke:#191008;}
.zc text{
  font-family:var(--font-mono);
  font-size:11px;
  fill:var(--paper);
  letter-spacing:.05em;
  text-anchor:middle;
}
.zc .sub{font-size:9.5px; fill:var(--muted);}

/* ===========================================================
   METHODE
   =========================================================== */
.methode{
  background:var(--ink);
  padding:96px 0;
  border-bottom:1px solid var(--line);
}
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:56px;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  top:14px; left:0; right:0;
  height:1px;
  background:var(--line);
  z-index:0;
}
.step{position:relative; z-index:1;}
.step-index{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink);
  background:var(--signal);
  width:28px; height:28px;
  border-radius:50%;
  text-align:center;
  line-height:28px;
  margin-bottom:20px;
}
.step h3{color:var(--paper); font-size:17px;}
.step p{color:var(--muted); font-size:14.5px;}

/* ===========================================================
   ZONES
   =========================================================== */
.zones{
  background:var(--panel);
  padding:96px 0;
  border-bottom:1px solid var(--line);
}
.zones-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.zones-copy p{color:var(--muted); font-size:15.5px;}
.zones-copy .section-title{color:var(--paper);}
.zones-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.zones-list li{
  background:var(--ink);
  padding:22px 24px;
  display:flex; flex-direction:column; gap:4px;
}
.zones-list li span{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--copper-light);
}
.zones-list li small{color:var(--muted); font-size:13px;}

/* ===========================================================
   POURQUOI
   =========================================================== */
.pourquoi{
  background:var(--paper);
  color:var(--ink-on-paper);
  padding:96px 0;
}
.pourquoi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:56px;
}
.pourquoi-item h3{font-size:16.5px; color:var(--ink-on-paper);}
.pourquoi-item p{font-size:14.5px; color:var(--muted-on-paper);}

/* ===========================================================
   PARTENAIRES
   =========================================================== */
.partners{
  background:var(--paper);
  padding:64px 0 80px;
  border-top:1px solid var(--paper-2);
}
.partners-grid{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:32px;
}
.partner-card{
  display:block;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  padding:22px 32px;
  min-width:220px;
  transition:border-color .2s ease;
}
.partner-card:hover{border-color:var(--copper);}
.partner-name{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--ink-on-paper);
  font-size:15px;
  margin-bottom:5px;
}
.partner-desc{
  display:block;
  color:var(--muted-on-paper);
  font-size:13px;
}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{
  background:var(--ink);
  padding:100px 0;
}
.contact-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
}
.contact-details{
  margin-top:28px;
  display:flex; flex-direction:column; gap:6px;
}
.contact-details a{
  font-family:var(--font-mono);
  color:var(--signal);
  text-decoration:none;
  font-size:15px;
}
.contact-details span{color:var(--muted); font-size:13.5px;}

.contact-form{
  background:var(--panel);
  border:1px solid var(--line);
  padding:32px;
  border-radius:var(--radius);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  color:var(--paper);
  font-family:var(--font-display);
  font-size:14.5px;
  padding:11px 13px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--signal);
  outline-offset:1px;
  border-color:var(--signal);
}
.field textarea{resize:vertical;}
.hp-field{position:absolute; left:-9999px; opacity:0;}

.form-status{
  min-height:20px;
  font-size:13.5px;
  margin:14px 0 0;
}
.form-status.ok{color:var(--signal);}
.form-status.error{color:#e08a6a;}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:26px 0;
}
.footer-inner{
  display:flex; gap:24px; flex-wrap:wrap;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}
.footer-inner a{text-decoration:none; color:var(--muted);}
.footer-inner a:hover{color:var(--signal);}

/* ===========================================================
   REVEAL ON SCROLL
   =========================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{opacity:1; transform:none;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-map{order:-1;}
  .cards-grid{grid-template-columns:repeat(2,1fr);}
  .dc-inner{grid-template-columns:1fr; gap:40px;}
  .dc-visual{order:-1;}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:44px;}
  .steps::before{display:none;}
  .zones-inner{grid-template-columns:1fr;}
  .pourquoi-grid{grid-template-columns:repeat(2,1fr);}
  .contact-inner{grid-template-columns:1fr;}
}

@media (max-width:680px){
  .main-nav{
    position:absolute; top:72px; left:0; right:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 28px 26px;
    gap:16px;
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .cards-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .pourquoi-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .region-strip-inner{flex-direction:column; align-items:flex-start;}
}