/* style.css - style global pour le site OGI */

/* Reset simple */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; font-family: "Inter", Arial, sans-serif; color:#111; background:#f7f9fb; }

/* Couleurs */
:root{
  --primary:#0b63d6;      /* bleu principal */
  --accent:#ff8c42;       /* orange accent */
  --muted:#6b7280;        /* gris */
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(13,26,47,0.08);
}

/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Site header / nav */
.header {
  position:fixed; left:0; right:0; top:0; z-index:1000;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
  border-bottom:1px solid rgba(11,99,214,0.04);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--primary); }
.brand .logo {
  width:52px; height:52px; background:linear-gradient(135deg,var(--primary),#4ea8ff); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:18px;
  box-shadow: var(--shadow);
}
.nav {
  display:flex; gap:18px; align-items:center;
}
.nav a {
  color:#163a5a; text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600;
}
.nav a:hover { background: rgba(11,99,214,0.06); color:var(--primary); }

/* CTA bouton */
.btn-primary {
  background:linear-gradient(90deg,var(--primary),#2a99ff);
  color:white; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow: 0 6px 20px rgba(11,99,214,0.12);
}

.logo-img {
  height:48px;   /* control size here */
  width:auto;
  object-fit:contain;
}

/* Hamburger pour mobile */
.hamburger { display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; }

/* Hero */
/* Hero */ 
.hero { padding:130px 0 60px; background: linear-gradient(180deg, rgba(11,99,214,0.05), rgba(255,255,255,0)),url('/images/factory-1983460_1280-52787568.jpg'); }
.hero-grid { display:grid; grid-template-columns: 1fr 480px; gap:34px; align-items:center; } 
.hero h1 { font-size:34px; color:#07263d; line-height:1.05; margin-bottom:14px; } 
.hero p { color:var(--muted); margin-bottom:20px; font-size:16px; }

/* Card sections */
.section { padding:50px 0; }
.card { background:var(--card); border-radius:12px; padding:20px; box-shadow:var(--shadow); }

/* Services grid */
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.service { padding:18px; border-radius:10px; background: linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(11,99,214,0.03); }
.service h3 { color:var(--primary); margin-bottom:6px; }

/* Réalisations (gallery) */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 20px;
}

.gallery .thumb {
  height: 250px;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.gallery .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery .thumb img {
  transition: transform 0.4s ease;
}

.gallery .thumb:hover img {
  transform: scale(1.08);
}
/* Contact form */
.form-row { display:flex; gap:12px; margin-bottom:12px; }
.form-row .field { flex:1; display:flex; flex-direction:column; }
input[type="text"], input[type="email"], textarea {
  border:1px solid rgba(11,99,214,0.08); padding:12px; border-radius:8px; font-size:15px; background:#fff;
}
textarea { min-height:140px; resize:vertical; }

/* Footer */
.footer { background:#071433; color:#dbeafe; padding:28px 0; margin-top:40px; }
.footer a { color:#bae6fd; text-decoration:none; }

/* Utilities */
.kv { display:flex; gap:18px; align-items:center; margin-top:10px; color:var(--muted); font-weight:600; }
.highlight { color:var(--accent); font-weight:800; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .services, .gallery { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .nav { display:none; }
  .hamburger { display:flex; }
  .services, .gallery { grid-template-columns:1fr; }
  .header-inner { padding:0 14px; }
  .hero { padding-top:110px; }
}