/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* THEME */
:root{
  --bg-1:#1a1a1a; --bg-2:#2a2a2a; --txt:#e0e0e0;
  --cyan:#00b7eb; --red:#ff2e2e; --shadow-cyan:rgba(0,183,235,.7);
}

body{
  font-family:'Fira Code', monospace;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  color:var(--txt); line-height:1.6; overflow-x:hidden; min-height:100dvh;
}

/* Scan glitch */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,183,235,.05), rgba(0,183,235,.05) 1px, transparent 1px, transparent 20px);
  animation:glitch 5s infinite linear;
}
@keyframes glitch{
  0%{transform:translateY(-100%);opacity:.4;}50%{opacity:.6;}100%{transform:translateY(100%);opacity:.4;}
}

/* NAV */
.menu{
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:rgba(26,26,26,.9); padding:16px 12px; position:sticky; top:0; z-index:1000;
  border-bottom:2px solid var(--cyan); backdrop-filter:blur(8px);
}
.menu_bouton{
  display:none; align-items:center; justify-content:center; cursor:pointer; height:40px; width:40px;
  border:1px solid var(--cyan); border-radius:8px; background:#222;
}
.menu_bouton img{height:22px;width:22px;}
.menu_links{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;}
.menu a{
  color:var(--txt); text-decoration:none; padding:10px 18px; font-weight:500; border-radius:8px; transition:.25s;
}
.menu a:hover{color:var(--cyan); text-shadow:0 0 10px var(--shadow-cyan); transform:translateY(-1px); background:rgba(0,0,0,.2);}

/* TITRES */
.section-title{
  font-size:clamp(1.8rem,4.5vw,2.6rem);
  color:var(--cyan); text-align:center; margin:36px 0 20px;
  text-shadow:0 0 10px rgba(0,183,235,.55);
  border-bottom:2px solid var(--red); display:inline-block; padding-bottom:8px;
}

/* INTRO OFII */
.entreprise-intro{
  display:flex; gap:36px; align-items:center; justify-content:space-between;
  padding:40px; max-width:1200px; margin:28px auto;
  background:rgba(26,26,26,.9); border:2px solid var(--cyan); border-radius:18px;
  box-shadow:0 0 20px rgba(0,183,235,.25);
}
.image-wrapper{ position:relative; flex:0 0 40%; border-radius:14px; overflow:hidden; }
.entreprise-image{ width:100%; height:auto; display:block; transition:transform .35s ease; }
.image-wrapper:hover .entreprise-image{ transform:scale(1.04); }
.glow-frame{ position:absolute; inset:0; border:2px solid var(--cyan); border-radius:14px; box-shadow:0 0 20px rgba(0,183,235,.4); pointer-events:none; }

.intro-text{ flex:1; }
.intro-text p{ margin:0 0 12px; }
.intro-text strong{ color:var(--cyan); }
.intro-text ul{ list-style:none; padding:0; margin:10px 0 0; }
.intro-text li{ position:relative; padding-left:22px; margin:8px 0; }
.intro-text li::before{ content:'▹'; position:absolute; left:0; color:var(--cyan); }
.site-btn{
  display:inline-block; margin-top:14px; text-decoration:none; font-weight:700; color:#111;
  background:linear-gradient(45deg,var(--cyan),var(--red)); padding:10px 16px; border-radius:999px; transition:.2s;
}
.site-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,183,235,.35); }

/* CHIFFRES CLÉS */
.chiffres-cles{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
  padding:22px; max-width:1200px; margin:0 auto 10px;
}
.chiffre{
  width:220px; background:rgba(26,26,26,.9); border:2px solid var(--cyan);
  border-radius:16px; padding:18px; text-align:center; box-shadow:0 0 16px rgba(0,183,235,.2);
}
.percent-circle{
  --deg: 0deg; /* alimenté par JS */
  --circle-color: var(--cyan);
  width:120px; height:120px; margin:0 auto 12px; border-radius:50%;
  background:conic-gradient(var(--circle-color) var(--deg), rgba(15,15,15,.85) var(--deg));
  position:relative; display:flex; align-items:center; justify-content:center;
  font-weight:700;
  border:4px solid var(--red);
}
.percent-circle::before{
  content:''; position:absolute; width:92px; height:92px; border-radius:50%; background:rgba(15,15,15,.9);
}
.percent-circle > * { position:relative; z-index:1; }
.chiffre p{ margin:0; }

/* MISSIONS (flip cards) */
.missions{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
  max-width:1200px; margin:16px auto; padding:18px;
}
.mission-card{ perspective:1000px; height:260px; position:relative; }
.mission-front,.mission-back{
  position:absolute; inset:0; border-radius:12px; overflow:hidden; backface-visibility:hidden; transition:transform .6s;
  display:flex; flex-direction:column;
}
.mission-front{ background:linear-gradient(45deg, var(--cyan), var(--red)); z-index:2; }
.mission-back{ background:linear-gradient(45deg, var(--red), var(--cyan)); transform:rotateY(180deg); align-items:center; justify-content:center; padding:14px; text-align:center; }
.mission-card:hover .mission-front{ transform:rotateY(-180deg); }
.mission-card:hover .mission-back{ transform:rotateY(0deg); }

.mission-image img{ width:100%; height:150px; object-fit:cover; opacity:.9; transition:opacity .25s; }
.mission-card:hover .mission-image img{ opacity:1; }
.mission-front h3{ margin:10px; text-align:center; color:#111; font-size:1.05rem; font-weight:700; }

/* OUTILS */
.outils{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1200px; margin:16px auto 40px; padding:18px;
}
.outil-item{
  text-align:center; background:rgba(26,26,26,.9); border:2px solid var(--cyan); border-radius:12px; padding:20px;
  transition:.2s; box-shadow:0 0 14px rgba(0,183,235,.2);
}
.outil-item:hover{ transform:translateY(-3px); box-shadow:0 0 22px rgba(0,183,235,.35); }
.outil-item img{ width:70px; height:70px; object-fit:contain; filter:grayscale(45%); transition:filter .2s; }
.outil-item:hover img{ filter:grayscale(0%); }
.outil-item p{ margin:8px 0 0; }

/* FOOTER */
.footer{
  background:rgba(26,26,26,.9); text-align:center; padding:36px 20px; border-top:2px solid var(--cyan);
  backdrop-filter:blur(8px); margin-top:30px;
}
.footer-links img{ width:50px; height:50px; object-fit:contain; margin:0 10px; transition:.25s; }
.footer-links a:hover img{ transform:scale(1.12); filter:brightness(1.25); }
.legal-links{ margin-top:14px; }
.legal-links a{ color:var(--txt); text-decoration:none; margin:0 10px; transition:.25s; }
.legal-links a:hover{ color:var(--cyan); }
.footer p{ margin-top:14px; color:var(--txt); }

/* SCROLL ANIM (ajoutée en JS: .visible) */
.theme-section{ opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s; }
.theme-section.visible{ opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:860px){
  .menu{justify-content:space-between; padding:12px 14px;}
  .menu_bouton{display:flex;}
  .menu_links{display:none; flex-direction:column; width:100%; gap:0; margin-top:12px;}
  .menu_links a{display:block; padding:12px; border-top:1px solid rgba(255,255,255,.06); border-radius:0;}
  .menu.menu_open .menu_links{display:flex;}
  .entreprise-intro{flex-direction:column;}
  .image-wrapper{flex:0 0 100%;}
  .outils{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .outils{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .outils{grid-template-columns:1fr;}
}