/* ════════════════════════════════════════════════════════════
   LERNEA CONSULTING — Feuille de style partagée
   Variables, reset, navigation, footer, boutons, icônes, animations
   Liée par : index.html · missions.html · contact.html · publications.html
   ════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs */
  --navy: #1a2744;
  --teal: #1ab8a0;
  --teal-dark: #16a08a;
  --violet: #2a1f5e;
  --blue-mid: #2b6cb0;
  --light-bg: #f1eee7;
  --paper: #faf8f3;
  --white: #ffffff;
  --text: #2d3a4a;
  --text-light: #6b7a8d;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --grad: linear-gradient(135deg, #080e1c 0%, var(--navy) 45%, var(--violet) 100%);

  /* Échelle typographique */
  --fs-display: clamp(2.4rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.15rem;
  --fs-body: 1rem;
  --fs-small: .9rem;
  --fs-caption: .78rem;
  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.75;

  /* Rythme & formes */
  --space-section: 8rem;
  --space-section-gap: 4rem;
  --radius: 14px;
  --nav-height: 68px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--paper);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── NAVIGATION (unifiée) ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height);
}
.nav-logo img { height: 48px; width: auto; display: block; }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  letter-spacing: .02em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a.active { color: var(--teal); }
.nav-cta {
  background: var(--navy); color: var(--white) !important;
  padding: .5rem 1.2rem; border-radius: 8px;
  font-weight: 500;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--teal) !important; color: var(--white) !important; }

/* ─── BURGER (mobile) ─── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── TITRES DE SECTION ─── */
.section-label {
  font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: .8rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy); margin-bottom: 1.2rem; line-height: var(--lh-tight);
  letter-spacing: -.01em;
}
.section-sub { font-size: var(--fs-lead); color: var(--text-light); line-height: var(--lh-body); max-width: 620px; }
.section-header { margin-bottom: var(--space-section-gap); }

/* ─── BOUTONS ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--teal); color: var(--white);
  padding: .9rem 2.2rem; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,184,160,.35); background: var(--teal-dark); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: var(--navy);
  border: 2px solid rgba(26,39,68,.35);
  padding: .82rem 2rem; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }

.btn-guide-ia {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--teal);
  border: 2px solid var(--teal);
  padding: .75rem 1.75rem; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; letter-spacing: .01em;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn-guide-ia:hover {
  background: var(--teal); color: var(--white);
  transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,184,160,.35);
}

/* ─── FOOTER ─── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,.5);
  text-align: center;
  padding: 2rem;
  font-size: var(--fs-small);
}
footer a { color: var(--teal); text-decoration: none; }

/* ─── ANIMATIONS (fade-up + trait animé) ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-d5 { transition-delay: .5s; }

.underline-anim { display: inline-block; position: relative; }
.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 3px;
  background: var(--teal);
  border-radius: 2px;
  transition: width .7s ease .3s;
}
.underline-anim.visible::after { width: 100%; }

/* ─── RESPONSIVE NAV ─── */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height); left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 1.5rem 2rem 2rem;
    gap: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(26,39,68,.1);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--border); width: 100%; }
  .nav-links li:last-child { border-bottom: none; margin-top: .8rem; }
  .nav-links a { display: block; padding: .9rem 0; font-size: 1rem; }
  .nav-links a.nav-cta { text-align: center; border-radius: 8px; padding: .75rem 1rem; }
}

/* ─── BANDEAUX PREMIUM (fond --grad) ─── */
.missions-hero-wrap { position: relative; overflow: hidden; }

.missions-hero-wrap::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 65% at 22% 48%, rgba(26,184,160,.13) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 82% 18%, rgba(8,14,28,.55) 0%, transparent 70%);
}

.missions-hero-wrap::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .034;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Le contenu reste au-dessus des pseudo-éléments */
.missions-hero { position: relative; z-index: 1; }

/* Séparateur bas de bandeau — filet teal très discret */
.missions-hero-wrap { border-bottom: 1px solid rgba(26,184,160,.1); }


/* ════════════════════════════════════════════════════════════
   PATCH ACCESSIBILITÉ
   1) contraste du teal textuel  2) focus clavier  3) reduced-motion
   ════════════════════════════════════════════════════════════ */

/* ─── 1. TEAL TEXTUEL ACCESSIBLE ───────────────────────────────
   Le teal vif (#1ab8a0) sur fond clair = ~2,3:1, sous le seuil WCAG AA (4,5:1).
   On garde --teal pour les FONDS et accents (boutons, dots, bordures),
   et on introduit --teal-text (~5,3:1 sur blanc) pour tout TEXTE teal
   posé sur un fond clair. Sur fond navy, le teal vif reste lisible : on n'y touche pas. */
:root {
  --teal-text: #0b7a66; /* teal foncé, AA sur fond blanc/clair (~5,3:1) */
}

/* Texte teal sur fonds clairs → version accessible.
   NB : la section Contact force déjà var(--teal) en style inline sur fond navy,
   donc elle n'est pas affectée et reste lisible (teal vif sur navy = OK). */
.section-label        { color: var(--teal-text); }
.nav-links a:hover    { color: var(--teal-text); }
.nav-links a.active   { color: var(--teal-text); }

/* Bouton "Guide IA" : texte + bordure teal sur fond clair au repos */
.btn-guide-ia { color: var(--teal-text); border-color: var(--teal-text); }
/* Au survol le fond devient teal plein + texte blanc : on garde le teal vif. */
.btn-guide-ia:hover { color: var(--white); border-color: var(--teal); }

/* RAPPEL — éléments teal-sur-clair définis dans index.html (bloc <style> local) :
   .hero-label, .stat-box .num span, .interest-tag, etc.
   Comme leur règle est plus tardive dans la cascade, remplacez-y aussi
   color: var(--teal)  →  color: var(--teal-text)  pour le TEXTE uniquement
   (laissez les FONDS et bordures sur var(--teal)). */


/* ─── 2. FOCUS CLAVIER VISIBLE ─────────────────────────────────
   Aucun :focus n'était défini : un visiteur au clavier ne voit pas où il est.
   :focus-visible ne s'affiche qu'à la navigation clavier, pas au clic souris. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-guide-ia:focus-visible,
.nav-cta:focus-visible,
.hamburger:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px; /* halo net même sur éléments à coins droits */
}

/* Repli pour les navigateurs sans :focus-visible (anciens) */
a:focus,
button:focus { outline: 3px solid var(--teal); outline-offset: 3px; }
/* …puis on neutralise ce repli là où :focus-visible existe, pour éviter
   le contour au simple clic souris */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }


/* ─── 3. PRÉFÉRENCE "MOUVEMENT RÉDUIT" ─────────────────────────
   Respecte le réglage système des personnes sensibles au mouvement
   (vertiges, troubles vestibulaires). Attente WCAG / RGAA.
   On neutralise : boucles de fond, reveals au scroll, compteurs,
   trait animé, et le scroll fluide global. */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto !important; }

  /* Les éléments animés au scroll doivent rester VISIBLES,
     même sans animation (sinon ils resteraient invisibles). */
  .reveal { opacity: 1 !important; transform: none !important; }
  .underline-anim::after { width: 100% !important; transition: none !important; }
}