/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: system-ui, Arial, sans-serif;
  background:#000;
  color:#fff;
  line-height:1.6;
}
img { max-width:100%; display:block; }

h3, h4 {padding: 10px 0 5px 0}

/* Containers */
.container {
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:2rem 0;
}

/* Header */
.site-header {
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:1rem;
  padding:1rem;
  background:#111;
  border-bottom:1px solid #222;
  /* Header fixe en haut */
  position: sticky;   /* reste visible en haut */
  top: 0;
  z-index: 1000;
}

.brand-logo img { height:65px; }
.site-nav {
  display:flex;
  gap:.8rem;
  justify-content:center;
}

  .brand-logo:hover{
    -ms-transform: scale(1.25); 
    -webkit-transform: scale(1.25); 
    transform: scale(1.25); 
}

.nav-link {
  color:#bbb;
  text-decoration:none;
  padding:.6rem .8rem;       /* plus épais */
  border-radius:.3rem;
  font-weight:600;
  text-transform:uppercase;  /* capitales */
}
.nav-link:hover { color:#fff; background:#1a1a1a; }
.nav-link.active { color:#5aadff; background:#141a20; }
.lang-switch { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; }
.lang { color:#bbb; text-decoration:none; }
.lang.active { color:#fff; }
.sep { color:#666; }

/* Hero banner avec flexbox */
.hero-banner {
  position: relative;
  display: flex;
  align-items: center;   /* centre verticalement le contenu */
  justify-content: center;
  height: 40vh;          /* hauteur proportionnelle à l’écran */
  min-height: 250px;
  overflow: hidden;
  background:#000;
/* Animation du hero */
  animation: fadeInHero 1.5s ease-in-out; /* animation */
}
@keyframes fadeInHero {
  from { opacity:0; transform:scale(1.05); }
  to   { opacity:1; transform:scale(1); }
}

.hero-media {
  position:absolute;
  inset:0;
  z-index:1;
}
.hero-media img {
  width:100%;
  height:100%;
  object-fit:contain;      /* l’image remplit la bannière */
}
.hero-gradient {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  z-index:2;
}
.hero-overlay {
  position:relative;
  z-index:3;             /* au-dessus du dégradé */
  text-align:center;
  color:#fff;
}
.hero-overlay h1 {
  font-size: clamp(2rem, 5vw, 3rem); /* plus grand */
  font-weight: 700;
  text-transform: uppercase;         /* en capitales */
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* Intro text & CTA sous la bannière */
.intro-text {
  text-align:center;
  max-width:900px;
  margin:1rem auto;
  color:#ddd;
}
.cta-row { text-align:center; margin-bottom:2rem; }
.cta {
  display:inline-block; background:#5aadff; color:#000;
  padding:.6rem 1rem; border-radius:.4rem; font-weight:700;
  text-decoration:none;
}
.cta:hover { background:#7bc5ff; }

/* Président */
.president { padding:2rem 0; }
.president blockquote {
  background:#0f0f11; border-left:3px solid #5aadff; padding:1rem; color:#ddd;
}
.president footer { margin-top:.5rem; color:#aaa; }

/* Savoir-faire */
.savoir-faire { padding:2rem 0; }
.cards {
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap:1rem;
}
.card { background:#0f0f11; border:1px solid #1d1f22; border-radius:.6rem; overflow:hidden; }
.card img { width:100%; height:220px; object-fit:cover; }
.card h3 { padding:.8rem 1rem; }
.card p { padding:0 1rem 1rem; color:#ccc; }
.link { display:inline-block; margin:0 1rem 1rem; color:#5aadff; text-decoration:none; }
.link:hover { text-decoration:underline; }

/* Société (two-cols) */
.two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.two-cols article {
  display: flex;
  flex-direction: column; /* empile texte + image */
}
.text-block {
  flex: 1;                /* occupe toute la hauteur disponible */
}
.two-cols article img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius:.4rem;
}
.two-cols article h1 { padding-bottom: 10px;}

/* Produits (listes) */
.list { margin-bottom:2rem; }
.list h2 { margin-bottom:.5rem; }
.list img { width:100%; height:220px; object-fit:cover; border-radius:.4rem; }
.bullets { list-style:none; padding-left:0; }
.bullets li { margin:.4rem 0; color:#ccc; }

/* Emplois */
.job-card {
  background:#0f0f11; border:1px solid #1d1f22; border-radius:.6rem;
  padding:1rem; margin-bottom:1rem;
}
.job-card img { width:100%; height:220px; object-fit:cover; border-radius:.4rem; margin-top:.5rem; }

/* Contact */
.contact-cards {
  display:grid; gap:1rem; grid-template-columns: repeat(2, 1fr);
}
.contact-card {
  background:#0f0f11; border:1px solid #1d1f22; border-radius:.6rem; padding:1rem;
}
.contact-card img { width:100%; height:220px; object-fit:cover; border-radius:.4rem; margin-top:.5rem; }
.contact-list { list-style:none; margin-top:.5rem; color:#ccc; }
.france-overlay img { width:100%; opacity:.25; margin-top:1rem; }

/* Footer avec lien */
.site-footer {
  border-top:1px solid #222;
  background:#111;
  padding:1rem 0;
  text-align:center;
}
.footer-grid {
  display:flex; justify-content:space-between; align-items:center; padding:1rem 0;
}

.site-footer a {
  color:#5aadff;
  text-decoration:none;
  margin-left:1rem;
}
.site-footer a:hover { text-decoration:underline; }

.no-cookies { color:#999; }


/* Mentions legales */
.legal {
    position: relative;
    margin: 10px;
}
.legal h1 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.legal h2 {
  font-size: 1.5em;
  padding-top: 15px;
  padding-bottom: 10px;
} 

/* Responsive */
@media (max-width:900px) {
  .cards { grid-template-columns:1fr; }
  .two-cols { grid-template-columns:1fr; }
  .contact-cards { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  /* Header en colonne et menu centré */
  .site-header {
    grid-template-columns:1fr;
    text-align:center;
    gap:.3rem;
  }
  .brand-logo { justify-self:center; }
  .site-nav {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.2rem;
  }
  .nav-link {
    padding:.2rem .4rem;
    font-size:.9rem;
  }
  .lang-switch { justify-content:center; }

  /* Bannière plus compacte en mobile */
  .hero-banner { height:30vh; min-height:200px; }
  .hero-overlay h1 { font-size:1.3rem; }

  /* Intro text sous la bannière */
  .intro-text {
    margin-top:.5rem;
    font-size:.95rem;
    padding:0 1rem;
  }

  /* Contenu centré */
  .container { text-align:center; }
  .cards, .two-cols, .contact-cards { text-align:center; }
  .card img,
  .two-cols article img,
  .contact-card img,
  .job-card img { margin:0 auto; }

  .footer-grid { flex-direction:column; gap:.3rem; text-align:center; }
}