/* ============================================================================
   VERION : barre de navigation, menu mobile et pied de page du site.
   SOURCE UNIQUE : les pages statiques (services, Nous rejoindre, candidatures)
   la lient directement ; les pages React (accueil, services.html, Ressources)
   rendent le meme balisage (.navbar, .nav-links, .gnl-*, .lang-btn, .nav-cta,
   .ham, .mobile-menu, .site-footer) et sont stylees par cette feuille.
   Reference : la barre de l'accueil (deux etats, transparente sur le hero puis
   teal des 60 px de defilement ; bascule 3D des liens ; pastille du lien actif).
   Variante .navbar--sombre : texte blanc des le haut, pour un hero sombre.
   ============================================================================ */
:root {
  --teal: #0E6459; --teal-light: #12877A; --carmin: #960018;
  --teal-dim: rgba(14,100,89,0.08); --teal-border: rgba(14,100,89,0.18);
  --ink: #0F1412; --ink-mid: #3A4A47; --ink-muted: #6B7D79;
  --off-white: #F7F6F3; --border-light: rgba(0,0,0,0.07);
  --font-head: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif;
}
/* == BARRE DE NAVIGATION ==================================================
   Replique fidele du header de index.html (compose en React) en CSS pur :
   memes couleurs, memes deux etats (transparente sur le hero, teal des
   60px de defilement), meme bascule 3D des liens au survol, meme pastille
   de lien actif. Partagee par les pages services et nous-rejoindre.html.
   ======================================================================== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 80px; padding: 0 5vw;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; box-shadow: none;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.navbar.scrolled {
  height: 64px; background: var(--teal);
  box-shadow: 0 2px 24px rgba(14,100,89,0.25);
}
.navbar .brand {
  display: block; width: 140px; height: 50px;
  background: url('../img/Logo Verion.png') no-repeat left center;
  background-size: contain; text-indent: -9999px; overflow: hidden;
  flex-shrink: 0; transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.navbar.scrolled .brand, .navbar.menu-open .brand {
  height: 41px; filter: brightness(0) invert(1);
}

.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links > a {
  position: relative; padding: 6px 10px; text-decoration: none; outline: none;
}
.nav-links > a::before {
  content: ''; position: absolute; inset: -6px -10px; border-radius: 24px;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(14,100,89,0.22) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.32s ease; pointer-events: none; z-index: 0;
}
.nav-links > a:hover::before, .nav-links > a[aria-current="page"]::before { opacity: 1; }
.nav-links > a[aria-current="page"]::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--teal);
}
.gnl-wrap { display: block; position: relative; z-index: 1; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.gnl-front, .gnl-back {
  display: block; font-family: var(--font-body); font-size: 14px;
  letter-spacing: 0.01em; white-space: nowrap;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), color 0.25s;
}
.gnl-front { font-weight: 500; color: var(--ink-mid); transform-origin: center bottom; }
.gnl-back {
  position: absolute; top: 0; left: 0; right: 0; font-weight: 600;
  color: var(--teal); transform-origin: center top; transform: rotateX(-90deg);
}
.nav-links > a:hover .gnl-front { transform: rotateX(90deg); }
.nav-links > a:hover .gnl-back  { transform: rotateX(0deg); }
.nav-links > a[aria-current="page"] .gnl-front { font-weight: 600; color: var(--teal); }

.navbar.scrolled .nav-links > a::before {
  background: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 70%);
}
.navbar.scrolled .gnl-front { color: rgba(255,255,255,0.82); }
.navbar.scrolled .gnl-back  { color: #ffffff; }
.navbar.scrolled .nav-links > a[aria-current="page"] .gnl-front { color: #ffffff; }
.navbar.scrolled .nav-links > a[aria-current="page"]::after { background: rgba(255,255,255,0.7); }

.lang-btn {
  display: inline-flex; align-items: center; margin-left: 6px;
  padding: 7px 12px; border-radius: 8px;
  border: 1.5px solid var(--teal); background: transparent; color: var(--teal);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em; cursor: pointer; transition: all 0.22s; white-space: nowrap;
}
.lang-btn:hover { background: var(--teal-dim); }
.lang-btn img { margin-right: 7px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.navbar.scrolled .lang-btn { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.14); color: #fff; }
.navbar.scrolled .lang-btn:hover { background: rgba(255,255,255,0.26); }

.nav-cta {
  padding: 10px 24px; border-radius: 8px; background: var(--teal); border: none;
  color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(14,100,89,0.2);
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.nav-cta:hover { background: var(--teal-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,100,89,0.3); }
.navbar.scrolled .nav-cta { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); box-shadow: none; }
.navbar.scrolled .nav-cta:hover { background: rgba(255,255,255,0.25); }

.ham {
  display: none; flex-direction: column; gap: 4px; padding: 8px;
  background: none; border: none; cursor: pointer; color: var(--ink);
}
.navbar.scrolled .ham, .navbar.menu-open .ham { color: #fff; }
.ham span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: all 0.3s cubic-bezier(0.22,1,0.36,1); }
.ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 999; background: var(--teal);
  display: none; flex-direction: column; padding: 96px 5vw 48px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu > a {
  font-family: var(--font-head); font-size: clamp(22px, 5vw, 32px); font-weight: 600;
  color: #fff; text-decoration: none; padding: 18px 0; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-actions { display: flex; gap: 12px; margin-top: 32px; }
.mobile-actions .lang-btn, .mobile-actions .nav-cta {
  flex: 1; justify-content: center; text-align: center; margin-left: 0;
  padding: 12px 16px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1);
  color: #fff; box-shadow: none;
}
.mobile-actions .nav-cta { border: none; background: rgba(255,255,255,0.18); }
/* Barre compacte entre 1200 et 1440 px, comme l'accueil : un portable de
   1280 ou 1366 px tombait en hamburger. Memes entrees, meme corps. */
@media (max-width: 1440px) {
  .navbar { padding: 0 40px; }
  .nav-links { gap: 10px; }
  .nav-links > a { padding: 6px 7px; }
  .nav-links > a::before { inset: -6px -7px; }
  .lang-btn { padding: 7px 9px; margin-left: 2px; }
  .nav-cta { padding: 10px 18px; }
}
/* Hamburger sous 1240 px (mesure : a 1200 px la barre touche) */
@media (max-width: 1239px) {
  .nav-links { display: none; }
  .ham { display: flex; }
}

/* == PIED DE PAGE ========================================================== */
.site-footer { background: #111111; padding: 64px 5vw 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; margin-bottom: 48px; }
.footer-brand-name { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: -0.04em; display: block; margin-bottom: 20px; }
.footer-tag { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 320px; }
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.footer-social-label { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.55); white-space: nowrap; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); transition: all 0.2s; text-decoration: none; }
.footer-social a:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; }
.footer-col-title { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col a { display: block; text-decoration: none; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 10px; }
.footer-col div.footer-line { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom span { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.55); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.65); text-decoration: none; }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Hero sombre : texte de la barre en blanc des le haut (services.html). */
.navbar--sombre .gnl-front { color: rgba(255,255,255,0.82); }
.navbar--sombre .gnl-back, .navbar--sombre .nav-links > a[aria-current="page"] .gnl-front { color: #fff; }
.navbar--sombre .nav-links > a::before { background: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 70%); }
.navbar--sombre .nav-links > a[aria-current="page"]::after { background: rgba(255,255,255,0.7); }
.navbar--sombre .lang-btn { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.1); color: #fff; }
.navbar--sombre .lang-btn:hover { background: rgba(255,255,255,0.2); }
.navbar--sombre .nav-cta { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); box-shadow: none; }
.navbar--sombre .nav-cta:hover { background: rgba(255,255,255,0.28); }
.navbar--sombre .brand, .navbar--sombre .ham { filter: brightness(0) invert(1); color: #fff; }

/* Lien « Nous rejoindre » du pied (la version statique porte le meme style inline). */
.footer-col a.footer-join { display: block; margin-top: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }