/* ===========================
   DG AZZ – styles.css (final complet)
   =========================== */

:root{
  --bg-900:#0B1730;    
  --bg-800:#0F1E3C;
  --primary:#1E4FA1;   
  --accent:#00D4FF;    
  --text:#E9EEF7;      
  --muted:#A8B4C8;     
  --card:#0f244e80;    
  --white:#fff;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, #16306f66 0%, transparent 60%),
    radial-gradient(1200px 800px at 85% 0%,  #0a8bd444 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-900), var(--bg-800));
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}

/* Top stats bar */
.top-stats{
  position:sticky; top:0; z-index:1001;
  background:linear-gradient(90deg,#0C1631,#0F1E3C);
  border-bottom:1px solid #ffffff1a; color:#CFE3FF; font-size:14px;
}
.top-stats-inner{display:flex; gap:12px; align-items:center; justify-content:center; padding:8px 0; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0b1730; border:1px solid #2a3f68; box-shadow:0 2px 8px rgba(0,0,0,.2)}
.chip strong{ color:#7ee2ff; font-weight:800; }

/* Header */
.site-header {
  position: fixed; /* colle le header en haut */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10,15,40,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff15;
}

.header-inner{display:flex; justify-content:space-between; align-items:center; padding:16px 0}
.wordmark{font-weight:800; letter-spacing:.6px; font-size:clamp(28px,2.8vw,38px); color:var(--white); text-shadow:0 2px 4px rgba(0,0,0,.35)}
.wordmark span{ color:var(--accent) }
.nav{display:flex; gap:24px; align-items:center}
.nav a{opacity:.92; transition:color .2s ease}
.nav a:hover{color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#002033; padding:10px 18px; border-radius:8px; font-weight:800; box-shadow:0 6px 18px #00d4ff40; transition:transform .15s ease}
.btn:hover{ transform:translateY(-1px) }
.btn-line{border:1px solid #ffffff3a; padding:10px 18px; border-radius:8px; font-weight:700}
.btn-small{padding:8px 14px}

/* Hero */
.hero {
  padding-top: 120px; /* avant c’était 60px */
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; min-height:75vh}
.text-gradient{background:linear-gradient(90deg,var(--accent),#7ae1ff,var(--white)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-copy h1{font-size:clamp(32px,4.2vw,56px); font-weight:800; line-height:1.1}
.muted{color:var(--muted)}
.hero-copy p{margin-top:12px; font-size:18px}
.hero-cta{margin-top:24px; display:flex; gap:14px; flex-wrap:wrap}
.pill{border:1px solid #ffffff22; padding:6px 10px; border-radius:999px; font-size:13px; color:#cfe3ff}
.trust-row{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.hero-art{position:relative; min-height:360px}
.blob{position:absolute; right:-40px; top:20px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #2f67ff, #0B1730 60%); filter:blur(6px); opacity:.9}
.blob.small{width:180px; height:180px; right:200px; top:180px; background:radial-gradient(circle at 30% 30%, #00d4ff, #0B1730 60%); opacity:.6; filter:blur(8px)}
.card{position:absolute; background:#0f1e3ccc; border:1px solid #ffffff1f; border-radius:16px; padding:16px; backdrop-filter:blur(6px); box-shadow:0 10px 30px #0006}
.card-kpi{right:10px; top:40px; min-width:180px}
.card-kpi.alt{right:190px; bottom:20px}
.kpi{font-weight:800; font-size:28px}
.kpi-sub{opacity:.78}

/* Sections */
.section{padding-block:110px; position:relative; z-index:1}
.section-alt{background:linear-gradient(180deg,#0F1E3C,#0B1730); z-index:0}
.section-title{text-align:center; font-size:clamp(22px,2.6vw,34px); font-weight:800; margin-bottom:12px}
.section-sub{text-align:center; margin-bottom:30px}

/* Services */
#services{margin-bottom:40px}
.cards-grid{display:grid; gap:18px}
.services-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; margin-top:28px}
.card.service{
  background:var(--card);
  border:1px solid #ffffff22;
  border-radius:16px;
  padding:22px;
  transition:all .35s ease;
  height:auto;
  display:flex;
  flex-direction:column;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}

/* === Nouveaux effets interactifs === */
.card.service::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, #00d4ff33 0%, transparent 70%);
  opacity:0;
  transition:opacity 0.4s ease;
}
.card.service:hover::before{opacity:1;}
.card.service::after{
  content:"👁 Voir plus";
  position:absolute;
  bottom:14px; right:16px;
  font-size:13px; color:#7de3ff;
  opacity:0; transform:translateY(8px);
  transition:all 0.3s ease;
}
.card.service:hover::after{
  opacity:1; transform:translateY(0);
}
.card.service:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:#00d4ff66;
  box-shadow:0 8px 24px #00d4ff22;
}
/* === Fin effet interactif === */

.card.service h3{margin-bottom:8px; font-size:18px}
.card.service p{margin:8px 0 10px}
.card.service .ticks{margin-top:12px}
.ticks{display:grid; gap:6px; margin-top:10px}
.ticks li{list-style:none; position:relative; padding-left:20px; color:#cfe3ff}
.ticks li::before{content:"✓"; position:absolute; left:0; color:#7de3ff}

/* Réalisations */
#realisations{padding-top:110px}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.work-card{background:var(--card); border:1px solid #ffffff24; border-radius:16px; padding:22px; transition:transform .25s ease, border-color .25s ease}
.work-card:hover{transform:translateY(-6px); border-color:#7dd3fc48}
.badge{display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background:#102855; color:#bfeaff; margin-bottom:8px; border:1px solid #2b4f9a}

/* À propos */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.about-art{position:relative; min-height:260px}
.rings{position:absolute; inset:0; margin:auto; border-radius:50%; width:280px; height:280px; border:2px dashed #4aa8ff55; animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Contact */
.contact .contact-inner{max-width:760px; margin:auto}
.contact-form{margin-top:16px; display:grid; gap:12px}
.contact-form .row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.contact-form input,.contact-form textarea{background:#0b1730; border:1px solid #ffffff22; color:var(--text); padding:12px 14px; border-radius:10px; outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:#7dd3fc66}

/* Footer */
.site-footer{border-top:1px solid #ffffff1a; background:#0b1730cc}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.to-top{border:1px solid #ffffff2a; padding:8px 12px; border-radius:10px}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.45s}

/* Modal Service */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,10,24,.62); backdrop-filter:blur(4px); z-index:2000}
.modal.show{display:flex; animation:zoomIn .35s ease}
@keyframes zoomIn{from{transform:scale(.8); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal-dialog{width:min(760px,92%); max-height:80vh; overflow:auto; background:#0f1e3c; border:1px solid #ffffff2a; border-radius:18px; padding:22px; box-shadow:0 30px 80px #000a}
.modal-close{position:sticky; top:0; float:right; margin:-8px -8px 8px 0; width:36px; height:36px; border-radius:8px; border:0; background:#15264d; color:#cfe3ff; font-size:22px; cursor:pointer}
.modal-close:hover{background:#1a3270}
.modal-content h3{margin-bottom:8px}
.modal-content p{color:var(--muted); margin:8px 0 12px}
.modal-content .ticks{margin-top:10px}
.card.service:focus-within,.card.service:focus,.card.service:active{outline:2px solid #55d8ff66; outline-offset:2px}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .services-grid,.work-grid{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .wordmark{font-size:30px}
  .top-stats{position:static}
  .site-header{top:0}
  #services{margin-bottom:56px}
}