/* =============================================================
   SABATIER FORMATION — STYLE.CSS
   v1 — avril 2026 — refonte site
   Palette nuit-bleu / bleu acier / bleu vif
   Typo Raleway (titres) + Inter (corps)
   ============================================================= */

/* ---------- VARIABLES GLOBALES ---------- */
:root {
  /* Palette — validée DA */
  --nuit-1: #001019;
  --nuit-2: #092737;
  --bleu-profond: #28567e;
  --bleu-acier: #3a8ab8;
  --bleu-vif: #5ebdf2;
  --bleu-clair: #b5dff7;
  --bleu-ardoise: #8dafc2;
  --blanc: #f8f9fb;

  /* Typographies */
  --font-titre: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacements */
  --pad-section: 7rem 0;
  --pad-section-mobile: 4rem 0;
  --container-max: 1200px;

  /* Transitions */
  --t-fast: 200ms ease;
  --t-base: 300ms ease;
  --t-slow: 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--nuit-1);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ---------- TYPOGRAPHIE BASE ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
em { font-family: var(--font-corps); font-style: italic; font-weight: 300; }

/* ---------- CONTAINER ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 4rem;
}
@media (max-width: 768px) {
  .container { padding: 0 1.5rem; }
}

/* ---------- LABELS DE SECTION (eyebrow) ---------- */
.section-label {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.section-label::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--bleu-acier);
  opacity: 0.6;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 4rem;
  background: rgba(0, 16, 25, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
  transition: padding var(--t-base);
}
.nav-logo {
  display: flex;
  align-items: center;
  color: var(--blanc);
  font-family: var(--font-titre);
  line-height: 1;
}
.nav-logo .nav-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.nav-logo .nav-logo-main {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc);
}
.nav-logo .nav-logo-sub {
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-top: 0.25rem;
  padding-left: 0.45em;
}
.nav-logo .dots {
  display: inline-flex;
  gap: 0.28rem;
  margin-top: 0.35rem;
  justify-content: center;
}
.nav-logo .dot { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; }

/* Mode hero (home page) : le logo entier disparaît en fondu doux tant que le hero est à l'écran */
#mainNav .nav-logo {
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0);
  filter: blur(0);
}
#mainNav.hero-mode .nav-logo {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(3px);
  pointer-events: none;
}
.nav-logo .dot-1 { background: var(--bleu-profond); }
.nav-logo .dot-2 { background: var(--bleu-acier); }
.nav-logo .dot-3 { background: var(--bleu-clair); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
  transition: color var(--t-base);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -0.4rem; left: 0;
  width: 0; height: 1px;
  background: var(--bleu-vif);
  transition: width var(--t-base);
}
.nav-links a:hover { color: var(--blanc); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--font-titre);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border: 1px solid var(--bleu-vif);
  padding: 0.6rem 1.4rem;
  transition: background var(--t-base), color var(--t-base);
}
.nav-cta:hover { background: var(--bleu-vif); color: var(--nuit-1); }

@media (max-width: 900px) {
  nav#mainNav { padding: 1rem 1.5rem; }
  .nav-links, nav#mainNav > .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================================
   MENU BURGER MOBILE
   ============================================================ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 110;
  position: relative;
}
.nav-burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--bleu-clair);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--nuit-1);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem 3rem;
  overflow-y: auto;
}
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40, 86, 126, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-links {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.mobile-menu-links li {
  margin-bottom: 1.8rem;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open .mobile-menu-links li { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-links li:nth-child(1) { transition-delay: 200ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(2) { transition-delay: 280ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(3) { transition-delay: 360ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(4) { transition-delay: 440ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(5) { transition-delay: 520ms; }

.mobile-menu-links a {
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0;
  transition: color var(--t-base);
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus { color: var(--bleu-vif); }

.mobile-menu-footer {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease 700ms;
}
.mobile-menu.open .mobile-menu-footer { opacity: 1; }
.mobile-menu-footer a {
  color: var(--bleu-ardoise);
  text-decoration: none;
  transition: color var(--t-base);
}
.mobile-menu-footer a:hover { color: var(--blanc); }

.mobile-menu-contact {
  margin-top: 2rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease 800ms;
}
.mobile-menu.open .mobile-menu-contact { opacity: 1; }
.mobile-menu-contact a {
  font-family: var(--font-titre);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border: 1px solid var(--bleu-vif);
  padding: 0.9rem 2.2rem;
  text-decoration: none;
  transition: all var(--t-base);
}
.mobile-menu-contact a:hover {
  background: var(--bleu-vif);
  color: var(--nuit-1);
}

/* Empêcher le scroll du body quand le menu est ouvert */
body.menu-open { overflow: hidden; }

/* ============================================================
   ACCESSIBILITÉ — focus visible + reduced motion
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 4px;
}

/* Skip link (accessibilité — clavier) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 200;
  font-family: var(--font-titre);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.8rem 1.4rem;
  background: var(--nuit-2);
  color: var(--bleu-vif);
  border: 1px solid var(--bleu-vif);
  text-decoration: none;
}

/* Visually-hidden utility (titres SEO non visibles à l'œil mais lus par lecteurs d'écran) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page 404 */
.page-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12rem 2rem 6rem;
  background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
  position: relative;
  overflow: hidden;
}
.page-404 .container { max-width: 640px; position: relative; z-index: 1; }
.page-404 .num-404 {
  font-family: var(--font-titre);
  font-weight: 100;
  font-size: clamp(5rem, 12vw, 10rem);
  color: var(--bleu-acier);
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.page-404 h1 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--blanc);
  margin-bottom: 1.5rem;
  letter-spacing: 0.005em;
}
.page-404 p {
  font-size: 1rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.85;
  margin-bottom: 3rem;
}

/* (Règle prefers-reduced-motion volontairement retirée :
   sur Windows avec "Effets visuels" désactivé, elle aurait
   neutralisé toutes les animations même pour les utilisateurs
   sans véritable contre-indication.) */

/* ============================================================
   MOBILE PRIORITAIRE — confort lecture, boutons, formulaire
   ============================================================ */
@media (max-width: 768px) {
  .section-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    line-height: 1.5;
  }
  .btn-primary,
  .btn-hero,
  .cta-teaser,
  .contact-form-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.18em;
  }
  .env-secteurs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
  }
  .env-secteurs span {
    white-space: normal;
    line-height: 1.4;
    padding-right: 1.2rem;
  }
  .env-secteurs span:not(:last-child)::after { right: 0.2rem; }
  .ticker-track {
    animation-duration: 45s;
  }
  .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .contact-coord-value {
    font-size: 1.1rem;
    word-break: break-word;
  }
  .contact-coord-value a { word-break: break-all; }
}

/* ============================================================
   FIX DÉGRADÉS MOBILE
   - Active GPU rendering (évite le banding)
   - Renforce le contraste des dégradés sur petit écran
   ============================================================ */
@media (max-width: 900px) {
  .hero-bg,
  .hero-noise,
  section#hero,
  section#metier::before,
  section#methode::before,
  section#expertises::before,
  section#realisations::before,
  section#equipe::before,
  section#contact::before,
  section#environnements::before {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Hero — dégradé plus marqué pour mobile */
  .hero-bg {
    background:
      radial-gradient(ellipse 95% 70% at 50% 35%, rgba(58, 138, 184, 0.48) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 55%, rgba(94, 189, 242, 0.10) 0%, transparent 60%),
      linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit-1) 75%, #000508 100%);
  }

  /* Sections — halos plus visibles */
  section#metier { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.7) 100%); }
  section#methode { background: linear-gradient(180deg, rgba(9, 39, 55, 0.7) 0%, var(--nuit-1) 100%); }
  section#expertises { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.6) 100%); }
  section#realisations { background: linear-gradient(180deg, rgba(9, 39, 55, 0.6) 0%, var(--nuit-1) 100%); }
  section#equipe { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.7) 100%); }

  /* Mobile : rien de spécial à faire pour le fond, il est déjà uniforme. */
}

/* ============================================================
   HERO
   ============================================================ */
section#hero {
  min-height: 100vh;
  padding: 6rem 0 4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--nuit-1);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(40, 86, 126, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(94, 189, 242, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit-1) 70%);
}
.hero-noise {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.hero-line {
  position: absolute;
  bottom: 0; left: 50%;
  width: 1px; height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--bleu-acier));
  transform: translateX(-50%);
  animation: hero-line-pulse 4s ease-in-out infinite;
}
@keyframes hero-line-pulse {
  0%, 100% { opacity: 0.4; height: 4rem; }
  50% { opacity: 1; height: 5rem; }
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 2rem;
}
.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  line-height: 1;
}
.hero-logo-main {
  font-family: var(--font-titre);
  font-size: clamp(4.91rem, 12.64vw, 9.83rem);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1;
}
.hero-logo-sub {
  font-family: var(--font-titre);
  font-size: clamp(1.54rem, 3.09vw, 2.39rem);
  font-weight: 300;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-top: 0.84rem;
  padding-left: 0.55em; /* compense le letter-spacing du dernier caractère pour centrer */
}
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: 2.1rem 0 2.93rem;
}
.hero-dots .dot {
  width: 0.99rem;
  height: 0.99rem;
  border-radius: 50%;
}
.hero-dots .dot-1 { background: var(--bleu-profond); }
.hero-dots .dot-2 { background: var(--bleu-acier); }
.hero-dots .dot-3 { background: var(--bleu-clair); }

.hero-baseline {
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: clamp(1.43rem, 2.34vw, 1.82rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(141, 175, 194, 0.85);
  margin-bottom: 4rem;
}
.hero-baseline em {
  font-style: italic;
}
.hero-baseline .bullet {
  font-style: normal;
  color: var(--bleu-vif);
  margin: 0 1rem;
  font-size: 0.85em;
  vertical-align: middle;
}

.btn-hero {
  display: inline-block;
  font-family: var(--font-titre);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
  border: 1px solid rgba(141, 175, 194, 0.3);
  padding: 1.05rem 2.81rem;
  transition: all var(--t-base);
}
.btn-hero:hover {
  color: var(--blanc);
  border-color: var(--bleu-vif);
  transform: translateY(-2px);
}

/* Baseline "Comprendre · Structurer · Progresser" au-dessus du bouton Découvrir */
.hero-baseline {
  margin: 2.81rem auto 3.51rem;
  font-family: var(--font-titre);
  font-weight: 300;
  font-style: normal;
  font-size: 1.78rem;
  letter-spacing: 0.14em;
  color: rgba(248, 249, 251, 0.85);
  text-align: center;
}
/* UVP quand elle passe SOUS le bouton — descend + réduit de 30% */
.hero-uvp.hero-uvp-below { margin-top: 5.5rem; font-size: 1.09rem; }
@media (max-width: 700px) {
  .hero-baseline { font-size: 1.43rem; letter-spacing: 0.1em; margin: 2rem auto 2.4rem; }
  .hero-uvp.hero-uvp-below { margin-top: 3.5rem; font-size: 0.97rem; }
}

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
section {
  padding: var(--pad-section);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  section { padding: var(--pad-section-mobile); }
}
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(94, 189, 242, 0.15), transparent);
  margin: 0 auto;
  max-width: 80%;
}

/* ---------- Fond global homogène ----------
   Fond uniforme nuit-1 partout, sans dégradés ni halos qui
   créent des artefacts visuels. Les "respirations" lumineuses
   sont confinées au hero et au bloc contact. */
body {
  background: var(--nuit-1);
}

section#metier,
section#methode,
section#expertises,
section#realisations,
section#equipe,
section#environnements {
  background: transparent;
}
section#contact {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40, 86, 126, 0.25) 0%, transparent 70%), var(--nuit-1);
}

/* Garantir que les contenus passent au-dessus de l'ambiance */
section .container,
section#contact .container { position: relative; z-index: 1; }

/* ============================================================
   ENVIRONNEMENTS
   ============================================================ */
.env-headline {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 200;
  color: var(--blanc);
  max-width: 900px;
  line-height: 1.3;
  margin-bottom: 2.5rem;
  letter-spacing: 0.005em;
}
.env-body {
  font-size: 0.98rem;
  color: rgba(248, 249, 251, 0.42);
  max-width: 720px;
  line-height: 1.95;
  margin-bottom: 4rem;
}
.env-secteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  font-family: var(--font-titre);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
.env-secteurs span {
  position: relative;
  padding-right: 2.5rem;
}
.env-secteurs span:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 0.5rem;
  color: var(--bleu-acier);
  opacity: 0.5;
}
@media (max-width: 768px) {
  .env-secteurs { flex-direction: column; gap: 0.8rem; }
  .env-secteurs span { padding-right: 0; }
  .env-secteurs span:not(:last-child)::after { display: none; }
}

/* ============================================================
   BANDEAU CLIENTS (TICKER) — repris fidèlement de la v originale
   ============================================================ */
section#clients {
  padding: 5rem 0;
  background: rgba(9, 39, 55, 0.3);
  border-top: 1px solid rgba(94, 189, 242, 0.08);
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
  overflow: hidden;
  position: relative;
}
.clients-label {
  text-align: center;
  font-family: var(--font-titre);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(141, 175, 194, 0.4);
  margin-bottom: 3rem;
}
.ticker-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
section#clients::before,
section#clients::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
section#clients::before {
  left: 0;
  background: linear-gradient(to right, var(--nuit-1), transparent);
}
section#clients::after {
  right: 0;
  background: linear-gradient(to left, var(--nuit-1), transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: ticker 110s linear infinite;
}
/* Ticker : le défilement continue même quand la souris survole */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5rem;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ticker-item:focus-visible {
  outline: 1px solid rgba(94, 189, 242, 0.6);
  outline-offset: 4px;
}
.ticker-item::after {
  content: '';
  position: absolute;
  right: 0;
  width: 1px;
  height: 28px;
  background: rgba(94, 189, 242, 0.1);
}
.ticker-item .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bleu-vif);
  opacity: 0.3;
  margin-right: 1.2rem;
  flex-shrink: 0;
  transition: opacity var(--t-base);
}
.ticker-name {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 1.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 249, 251, 0.35);
  white-space: nowrap;
  transition: color var(--t-base);
}
.ticker-item:hover .ticker-name { color: rgba(248, 249, 251, 0.75); }
.ticker-item:hover .dot { opacity: 1; }

/* ============================================================
   MÉTIER
   ============================================================ */
.metier-headline {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 300;
  color: var(--blanc);
  max-width: 850px;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.metier-subline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: rgba(181, 223, 247, 0.7);
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 3rem;
  letter-spacing: 0.02em;
}
.metier-intro {
  font-size: 0.98rem;
  color: rgba(248, 249, 251, 0.42);
  max-width: 780px;
  line-height: 1.95;
  margin-bottom: 6rem;
}
.metier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 5rem;
}
.metier-bloc h4 {
  font-family: var(--font-titre);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.metier-bloc p {
  font-size: 0.9rem;
  color: rgba(248, 249, 251, 0.4);
  line-height: 1.95;
}
@media (max-width: 768px) {
  .metier-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   MÉTHODE
   ============================================================ */
.methode-headline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--blanc);
  max-width: 750px;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  letter-spacing: 0.005em;
}
.methode-sub {
  font-size: 0.98rem;
  color: rgba(248, 249, 251, 0.4);
  max-width: 720px;
  line-height: 1.95;
  margin-bottom: 5rem;
}
.methode-list {
  list-style: none;
  display: grid;
  gap: 2rem;
  max-width: 850px;
}
.methode-step {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.methode-step:last-child { border-bottom: 1px solid rgba(94, 189, 242, 0.08); }
.methode-num {
  font-family: var(--font-titre);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 100;
  color: var(--bleu-acier);
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.85;
}
.methode-step h4 {
  font-family: var(--font-titre);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 0.7rem;
  letter-spacing: 0.005em;
}
.methode-step p {
  font-size: 0.95rem;
  color: rgba(248, 249, 251, 0.45);
  line-height: 1.85;
}
@media (max-width: 768px) {
  .methode-step { grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 1.8rem 0; }
  .methode-num { font-size: 2.6rem; }
}

/* ============================================================
   EXPERTISES
   ============================================================ */
.expertise-headline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--blanc);
  max-width: 850px;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  letter-spacing: 0.005em;
}
.expertise-sub {
  font-size: 0.98rem;
  color: rgba(248, 249, 251, 0.4);
  max-width: 760px;
  line-height: 1.95;
  margin-bottom: 5rem;
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 4rem;
}
.expertise-bloc {
  padding: 2rem 0;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.expertise-bloc h3 {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 1.2rem;
  letter-spacing: 0.005em;
}
.expertise-bloc p {
  font-size: 0.9rem;
  color: rgba(248, 249, 251, 0.4);
  line-height: 1.95;
}
@media (max-width: 768px) {
  .expertise-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.real-headline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--blanc);
  max-width: 900px;
  line-height: 1.35;
  margin-bottom: 5rem;
  letter-spacing: 0.005em;
}
.real-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 5rem;
}
.real-bloc {
  padding: 2rem;
  background: rgba(9, 39, 55, 0.3);
  border: 1px solid rgba(94, 189, 242, 0.06);
  transition: border-color var(--t-base), background var(--t-base);
}
.real-bloc:hover {
  border-color: rgba(94, 189, 242, 0.18);
  background: rgba(9, 39, 55, 0.5);
}
.real-bloc h4 {
  font-family: var(--font-titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 1.2rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.real-bloc p {
  font-size: 0.85rem;
  color: rgba(248, 249, 251, 0.4);
  line-height: 1.95;
}
.real-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.real-stat {
  text-align: center;
}
.real-stat .num {
  font-family: var(--font-titre);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 200;
  color: var(--bleu-vif);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.real-stat .label {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
}
@media (max-width: 900px) {
  .real-grid { grid-template-columns: 1fr; }
  .real-stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* ============================================================
   ÉQUIPE (sobre)
   ============================================================ */
.equipe-headline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--blanc);
  max-width: 750px;
  line-height: 1.3;
  margin-bottom: 2rem;
  letter-spacing: 0.005em;
}
.equipe-intro {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(181, 223, 247, 0.55);
  max-width: 720px;
  line-height: 1.75;
  margin-bottom: 6rem;
  letter-spacing: 0.02em;
}
.equipe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
.equipe-card {
  text-align: center;
}
.equipe-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--nuit-2);
  border: 1px solid rgba(94, 189, 242, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-weight: 200;
  color: var(--bleu-acier);
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.equipe-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
.equipe-card h4 {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 0.3rem;
}
.equipe-role {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.5;
  margin-bottom: 0.7rem;
  min-height: 2.5rem;
}
.equipe-linkedin {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  transition: color var(--t-base);
}
.equipe-linkedin:hover { color: var(--bleu-clair); }
@media (max-width: 1100px) {
  .equipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .equipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .equipe-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   CTA TEASER (lien "Voir...")
   ============================================================ */
.cta-teaser {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 3rem;
  font-family: var(--font-titre);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border-bottom: 1px solid rgba(94, 189, 242, 0.4);
  padding-bottom: 0.5rem;
  transition: all var(--t-base);
}
.cta-teaser::after { content: '→'; transition: transform var(--t-base); }
.cta-teaser:hover { color: var(--blanc); border-color: var(--blanc); }
.cta-teaser:hover::after { transform: translateX(4px); }

/* ============================================================
   CONTACT
   ============================================================ */
section#contact {
  text-align: center;
  background: var(--nuit-2);
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
section#contact .section-label { justify-content: center; }
section#contact .section-label::before { display: none; }
.contact-headline {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--blanc);
  max-width: 800px;
  margin: 0 auto 2.5rem;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.contact-sub {
  font-size: 0.98rem;
  color: rgba(248, 249, 251, 0.42);
  max-width: 640px;
  margin: 0 auto 4rem;
  line-height: 1.95;
}
.btn-primary {
  display: inline-block;
  font-family: var(--font-titre);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border: 1px solid var(--bleu-vif);
  padding: 1rem 2.5rem;
  transition: all var(--t-base);
}
.btn-primary:hover { background: var(--bleu-vif); color: var(--nuit-1); transform: translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 3rem 4rem;
  background: var(--nuit-1);
  border-top: 1px solid rgba(94, 189, 242, 0.08);
  font-family: var(--font-titre);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
}
.footer-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
}
.footer-left .footer-logo {
  font-family: 'Raleway', sans-serif !important;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--blanc);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-baseline {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
  margin-bottom: 1.5rem;
}
.footer-groupe {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--bleu-ardoise);
}
.footer-groupe a { color: var(--bleu-vif); transition: color var(--t-base); }
.footer-groupe a:hover { color: var(--blanc); }
.footer-groupe .groupe-link { color: var(--bleu-ardoise); }
.footer-right {
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--bleu-ardoise);
}
.footer-utility {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.footer-utility a {
  color: var(--bleu-ardoise);
  transition: color var(--t-base);
  position: relative;
}
.footer-utility a:hover { color: var(--blanc); }
.footer-utility a:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: -0.85rem;
  color: var(--bleu-acier);
  opacity: 0.6;
}
.footer-copy { font-family: 'Raleway', sans-serif !important; font-weight: 300; font-size: 0.75rem; letter-spacing: 0.16em; color: rgba(141, 175, 194, 0.78); }
footer, footer * { font-family: 'Raleway', sans-serif; }
@media (max-width: 768px) {
  footer { padding: 2.5rem 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-right { text-align: left; }
  .footer-utility { justify-content: flex-start; }
}

/* ============================================================
   ANIMATIONS REVEAL — fade pur, sans aucun mouvement
   Déclenché par IntersectionObserver (JS)
   ============================================================ */
@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* État initial : invisible */
.reveal {
  opacity: 0;
  transition: opacity 3000ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.reveal.visible { opacity: 1; }

.reveal-delay-1 { transition-delay: 150ms; }
.reveal-delay-2 { transition-delay: 300ms; }
.reveal-delay-3 { transition-delay: 450ms; }
.reveal-delay-4 { transition-delay: 600ms; }

/* Hero : animation plus lente et plus contemplative au chargement */
#hero .reveal { transition-duration: 4800ms; }
#hero .reveal-delay-1 { transition-delay: 600ms; }
#hero .reveal-delay-2 { transition-delay: 1100ms; }
#hero .reveal-delay-3 { transition-delay: 1700ms; }

/* Fallback no-JS : anim auto au chargement */
.no-js .reveal {
  animation: reveal-fade 3000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.no-js .reveal-delay-1 { animation-delay: 150ms; }
.no-js .reveal-delay-2 { animation-delay: 300ms; }
.no-js .reveal-delay-3 { animation-delay: 450ms; }
.no-js .reveal-delay-4 { animation-delay: 600ms; }

/* (Anciennement règle prefers-reduced-motion — retirée pour garantir
   les animations même quand "Effets visuels" est désactivé dans Windows.) */

/* ============================================================
   SPLITTEXT — Animation mot par mot
   ============================================================ */
.splittext .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}
.splittext .split-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
              transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.splittext.split-visible .split-word-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NAV — Transition compact
   ============================================================ */
nav#mainNav {
  transition: padding 400ms cubic-bezier(0.22, 1, 0.36, 1),
              background 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
nav#mainNav.compact {
  padding: 0.85rem 4rem;
  background: rgba(0, 16, 25, 0.96);
}
@media (max-width: 900px) {
  nav#mainNav.compact { padding: 0.75rem 1.5rem; }
}

/* ============================================================
   HOVER DÉTAILLÉS — Cartes Équipe + Réalisations
   ============================================================ */

/* ÉQUIPE — élévation + lumière qui passe */
.equipe-card {
  cursor: default;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.equipe-card:hover { transform: translateY(-6px); }

.equipe-photo {
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base);
}
.equipe-photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(94, 189, 242, 0.12) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.equipe-card:hover .equipe-photo {
  border-color: rgba(94, 189, 242, 0.35);
}
.equipe-card:hover .equipe-photo::after {
  left: 130%;
}
.equipe-card:hover .equipe-photo img {
  filter: grayscale(0) brightness(1.05);
  transition: filter 800ms ease;
}

/* RÉALISATIONS — hover détaillé (élévation + lumière) */
.real-bloc {
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: border-color 500ms ease,
              background 500ms ease,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.real-bloc::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(94, 189, 242, 0.06) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.real-bloc:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 189, 242, 0.25);
  background: rgba(9, 39, 55, 0.55);
}
.real-bloc:hover::before { left: 130%; }
.real-bloc > * { position: relative; z-index: 1; }

/* PROGRAMMES — hover plus marqué */
.prog-item {
  position: relative;
  overflow: hidden;
}
.prog-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(94, 189, 242, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.prog-item:hover::before { left: 130%; }
.prog-item > * { position: relative; z-index: 1; }

/* Indicateurs Qualiopi — hover identique */
.ind-item {
  position: relative;
  overflow: hidden;
  transition: border-color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-item:hover { transform: translateY(-3px); }

/* Boutons CTA — magnetic-like (très subtil) */
.btn-primary, .btn-hero, .nav-cta, .cta-teaser, .btn-ghost {
  transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   PAGES INTERNES — HERO COURT
   ============================================================ */
.inner-hero {
  padding: 8.5rem 0 4rem;
  background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
  position: relative;
  overflow: hidden;
}
.inner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(40, 86, 126, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.inner-hero .container { position: relative; z-index: 1; }
.inner-hero-eyebrow {
  font-family: var(--font-titre);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 2.5rem;
}
.inner-hero h1 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.15;
  color: var(--blanc);
  margin-bottom: 2rem;
  letter-spacing: 0.005em;
}
.inner-hero h1 em {
  font-style: normal;
  color: var(--bleu-clair);
}
.inner-hero p {
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(248, 249, 251, 0.42);
  max-width: 640px;
}

/* ============================================================
   PROGRAMMES — CATALOGUE
   ============================================================ */
.format-block {
  margin-bottom: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.format-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.format-header h2 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--blanc);
  margin-right: 1rem;
}
.format-badge {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
  border: 1px solid rgba(141, 175, 194, 0.25);
  padding: 0.4rem 0.9rem;
}
.devis-badge {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border: 1px solid var(--bleu-vif);
  padding: 0.4rem 0.9rem;
  margin-left: auto;
}

.prog-list { display: grid; gap: 1rem; }
.prog-item {
  border: 1px solid rgba(94, 189, 242, 0.08);
  background: rgba(9, 39, 55, 0.2);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.prog-item:hover { border-color: rgba(94, 189, 242, 0.2); background: rgba(9, 39, 55, 0.4); }
.prog-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 2rem;
}
.prog-level {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 0.6rem;
}
.prog-header h3 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--blanc);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.prog-sub {
  font-size: 0.85rem;
  color: rgba(248, 249, 251, 0.45);
  line-height: 1.7;
}
.prog-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.prog-duration {
  font-family: var(--font-titre);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--bleu-ardoise);
  text-align: right;
  line-height: 1.5;
}
.prog-toggle {
  width: 2rem; height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 200;
  color: var(--bleu-vif);
  border: 1px solid rgba(94, 189, 242, 0.3);
  border-radius: 50%;
  transition: transform var(--t-base), background var(--t-base);
}
.prog-item.open .prog-toggle { transform: rotate(45deg); background: var(--bleu-vif); color: var(--nuit-1); }
.prog-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 600ms ease;
}
.prog-item.open .prog-body { max-height: 1500px; }
.prog-body-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0 2rem 2.5rem;
  border-top: 1px solid rgba(94, 189, 242, 0.06);
  padding-top: 2rem;
}
.prog-body-inner h5 {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 1rem;
}
.prog-body-inner ul { list-style: none; }
.prog-body-inner li,
.prog-body-inner p {
  font-size: 0.85rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.85;
  margin-bottom: 0.5rem;
  padding-left: 0.8rem;
  position: relative;
}
.prog-body-inner li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--bleu-acier);
}
.prog-body-inner p { padding-left: 0; }
.prog-body-inner p::before { display: none; }
.btn-ghost {
  display: inline-block;
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  border: 1px solid rgba(94, 189, 242, 0.3);
  padding: 0.6rem 1.4rem;
  margin-top: 1rem;
  transition: all var(--t-base);
}
.btn-ghost:hover { border-color: var(--bleu-vif); background: rgba(94, 189, 242, 0.08); }

@media (max-width: 900px) {
  .prog-body-inner { grid-template-columns: 1fr; gap: 2rem; }
  .prog-header { grid-template-columns: 1fr; }
  .prog-right { justify-content: space-between; }
  .devis-badge { margin-left: 0; }
}

/* ============================================================
   QUALIOPI — RÉFÉRENTIEL & MENTIONS
   ============================================================ */
.qualiopi-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 6rem;
  align-items: start;
}
.qualiopi-intro h2 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--blanc);
  line-height: 1.25;
  margin-bottom: 2rem;
}
.qualiopi-intro p {
  font-size: 0.95rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.95;
  margin-bottom: 1.2rem;
}
.cert-block {
  padding: 2.5rem;
  background: rgba(9, 39, 55, 0.4);
  border: 1px solid rgba(94, 189, 242, 0.12);
}
.cert-label {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin-bottom: 2rem;
}
.cert-row { display: grid; gap: 1.2rem; }
.cert-field {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(94, 189, 242, 0.06);
  align-items: baseline;
}
.cert-field:last-child { border-bottom: none; padding-bottom: 0; }
.cert-field-key {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
}
.cert-field-val {
  font-family: var(--font-corps);
  font-size: 0.92rem;
  color: var(--blanc);
}
.placeholder, .placeholder-text {
  color: rgba(141, 175, 194, 0.5);
  font-style: italic;
  font-size: 0.85rem;
}

.indicateurs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 5rem;
}
.ind-item {
  padding: 2rem 1.5rem;
  background: rgba(9, 39, 55, 0.3);
  border: 1px solid rgba(94, 189, 242, 0.06);
  transition: border-color var(--t-base);
}
.ind-item:hover { border-color: rgba(94, 189, 242, 0.18); }
.ind-num {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 200;
  color: var(--bleu-vif);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.ind-item h4 {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
.ind-item p {
  font-size: 0.82rem;
  color: rgba(248, 249, 251, 0.45);
  line-height: 1.85;
}

.mentions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 5rem;
}
.mention-block {
  padding: 2rem;
  background: rgba(9, 39, 55, 0.25);
  border-left: 2px solid var(--bleu-acier);
}
.mention-block h4 {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.mention-block p,
.mention-block li {
  font-size: 0.88rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.95;
  margin-bottom: 0.5rem;
}
.mention-block ul { list-style: none; }
.mention-block ul li { padding-left: 1rem; position: relative; }
.mention-block ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--bleu-acier);
}
.mention-block a { color: var(--bleu-vif); }
.mention-block a:hover { color: var(--bleu-clair); }

.recours-block {
  padding: 2.5rem;
  background: rgba(9, 39, 55, 0.4);
  border: 1px solid rgba(94, 189, 242, 0.1);
  margin-bottom: 4rem;
}
.recours-block h4 {
  font-family: var(--font-titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 1.2rem;
}
.recours-block p {
  font-size: 0.9rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.95;
  margin-bottom: 0.8rem;
}
.recours-block a { color: var(--bleu-vif); }

@media (max-width: 900px) {
  .qualiopi-intro { grid-template-columns: 1fr; }
  .indicateurs-grid { grid-template-columns: repeat(2, 1fr); }
  .mentions-grid { grid-template-columns: 1fr; }
  .cert-field { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================================
   PAGES LÉGALES & PAGES INTERNES — contenu typographique
   ============================================================ */
.legal-content {
  padding: 4rem 0 8rem;
}
.legal-content .container { max-width: 880px; }
.legal-content h2 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--blanc);
  margin: 4rem 0 1.5rem;
  letter-spacing: 0.005em;
  padding-top: 2rem;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.legal-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal-content p,
.legal-content li {
  font-size: 0.95rem;
  color: rgba(248, 249, 251, 0.55);
  line-height: 1.95;
  margin-bottom: 1rem;
}
.legal-content a {
  color: var(--bleu-vif);
  border-bottom: 1px solid rgba(94, 189, 242, 0.3);
  transition: color var(--t-base), border-color var(--t-base);
}
.legal-content a:hover {
  color: var(--bleu-clair);
  border-color: var(--bleu-clair);
}
.legal-content strong {
  color: var(--blanc);
  font-weight: 500;
}
.legal-list {
  list-style: none;
  padding-left: 1.2rem;
  margin: 1rem 0 1.5rem;
}
.legal-list li {
  position: relative;
  padding-left: 1rem;
}
.legal-list li::before {
  content: '—';
  position: absolute;
  left: -1rem;
  color: var(--bleu-acier);
}

.legal-dl {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem 2rem;
  margin: 1rem 0 2rem;
  padding: 2rem;
  background: rgba(9, 39, 55, 0.35);
  border-left: 2px solid var(--bleu-acier);
}
.legal-dl dt {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu-ardoise);
  align-self: center;
}
.legal-dl dd {
  font-size: 0.95rem;
  color: var(--blanc);
}
.legal-dl dd a {
  color: var(--bleu-vif);
  border-bottom: 1px solid rgba(94, 189, 242, 0.3);
}
.legal-todo {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-family: var(--font-corps);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(141, 175, 194, 0.6);
  background: rgba(141, 175, 194, 0.08);
  border-radius: 2px;
}
@media (max-width: 768px) {
  .legal-dl {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 1.5rem;
  }
  .legal-dl dt { margin-top: 0.8rem; }
  .legal-dl dt:first-child { margin-top: 0; }
}

/* ============================================================
   PLACEHOLDER (pages en cours de finalisation)
   ============================================================ */
.placeholder-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12rem 2rem 6rem;
  background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
  position: relative;
  overflow: hidden;
}
.placeholder-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(40, 86, 126, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.placeholder-content { position: relative; z-index: 1; max-width: 640px; }
.placeholder-eyebrow {
  font-family: var(--font-titre);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 2.5rem;
}
.placeholder-page h1 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--blanc);
  margin-bottom: 2rem;
  letter-spacing: 0.005em;
}
.placeholder-page p {
  font-size: 1rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.85;
  margin-bottom: 3rem;
}

/* ============================================================
   FORMULAIRE DE CONTACT
   ============================================================ */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6rem;
  margin-top: 5rem;
}
.contact-coord {
  padding: 3rem 0;
}
.contact-coord-block {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
}
.contact-coord-block:last-child { border-bottom: none; }
.contact-coord-label {
  font-family: var(--font-titre);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 1rem;
}
.contact-coord-value {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 1.4rem;
  color: var(--blanc);
  margin-bottom: 0.5rem;
  letter-spacing: 0.005em;
}
.contact-coord-value a { color: var(--blanc); transition: color var(--t-base); }
.contact-coord-value a:hover { color: var(--bleu-vif); }
.contact-coord-note {
  font-size: 0.85rem;
  color: rgba(248, 249, 251, 0.45);
  line-height: 1.85;
}

.contact-form {
  background: rgba(9, 39, 55, 0.35);
  border: 1px solid rgba(94, 189, 242, 0.1);
  padding: 3.5rem 3rem;
}
.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
.contact-form-field {
  display: flex;
  flex-direction: column;
}
.contact-form-field.full { grid-column: 1 / -1; }
.contact-form-field label {
  font-family: var(--font-titre);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bleu-acier);
  margin-bottom: 0.7rem;
}
.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
  font-family: var(--font-corps);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--blanc);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(141, 175, 194, 0.3);
  padding: 0.6rem 0;
  transition: border-color var(--t-base);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
  border: 1px solid rgba(141, 175, 194, 0.3);
  padding: 1rem;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
  outline: none;
  border-color: var(--bleu-vif);
}
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(141, 175, 194, 0.4);
}
.contact-form-field select {
  border-bottom: 1px solid rgba(141, 175, 194, 0.3);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%235ebdf2'><path d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px 6px;
  padding-right: 1.5rem;
}
.contact-form-field select option {
  background: var(--nuit-2);
  color: var(--blanc);
}
.contact-form-rgpd {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  font-size: 0.78rem;
  color: rgba(248, 249, 251, 0.5);
  line-height: 1.7;
}
.contact-form-rgpd input[type="checkbox"] {
  margin-top: 0.3rem;
  appearance: none;
  -webkit-appearance: none;
  width: 1rem; height: 1rem;
  border: 1px solid rgba(141, 175, 194, 0.4);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-base);
  position: relative;
}
.contact-form-rgpd input[type="checkbox"]:checked {
  background: var(--bleu-vif);
  border-color: var(--bleu-vif);
}
.contact-form-rgpd input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--nuit-1);
  font-weight: 600;
}
.contact-form-rgpd a { color: var(--bleu-vif); }
.contact-form-submit {
  font-family: var(--font-titre);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  background: transparent;
  border: 1px solid var(--bleu-vif);
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: all var(--t-base);
}
.contact-form-submit:hover { background: var(--bleu-vif); color: var(--nuit-1); }
.contact-form-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.form-status {
  margin-top: 1.5rem;
  padding: 1rem;
  font-size: 0.85rem;
  text-align: center;
}
.form-status.success { color: var(--bleu-clair); border: 1px solid rgba(181, 223, 247, 0.3); background: rgba(94, 189, 242, 0.05); }
.form-status.error { color: #ff8a9c; border: 1px solid rgba(255, 138, 156, 0.3); background: rgba(255, 138, 156, 0.05); }

@media (max-width: 900px) {
  .contact-page-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-form { padding: 2rem 1.5rem; }
  .contact-form-row { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* =================================================================
   ============ V2 — REFONTE JUIN 2026 (Prompts PDF) ===============
   Bloc CSS ajouté pour les nouveaux composants. Aucune modification
   des couleurs, polices ou marges globales du V1.1 (variables CSS
   inchangées). Suppression de ces lignes pour revenir au V1.1.
   ================================================================= */

/* Prompt 3 — Hero : écartement des 3 points + style UVP (agrandi +20%) */
.hero-dots.hero-dots-wide { gap: 2.25rem; }
.hero-dots.hero-dots-wide .dot { width: 15px; height: 15px; }
.hero-uvp {
  font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300;
  font-size: 1.55rem; color: rgba(248,249,251,0.72); text-align: center;
  max-width: 810px; margin: 2.81rem auto 3.51rem; line-height: 1.6; padding: 0 1.5rem;
}
@media (max-width: 700px) { .hero-uvp { font-size: 1.38rem; } }

/* Ajustements mobile hero — évite débordement horizontal */
@media (max-width: 700px) {
  .hero-logo-main { font-size: 3.96rem; }
  .hero-logo-sub { font-size: 1.22rem; letter-spacing: 0.45em; margin-top: 0.72rem; padding-left: 0.45em; }
  .hero-dots.hero-dots-wide { gap: 1.44rem; }
  .hero-dots.hero-dots-wide .dot { width: 12px; height: 12px; }
  .btn-hero { font-size: 0.7rem; padding: 0.9rem 2.16rem; }
}
@media (max-width: 480px) {
  .hero-logo-main { font-size: 3.06rem; letter-spacing: 0.09em; }
  .hero-logo-sub { font-size: 0.99rem; letter-spacing: 0.4em; padding-left: 0.4em; }
  .hero-uvp { font-size: 1.04rem; }
}

/* Prompt 4 — Grille 3×2 vignettes secteurs */
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.env-tile {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 4px; text-decoration: none; background-size: cover;
  background-position: center; transition: transform 0.4s ease; padding: 1.4rem;
}
.env-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,16,25,0.1) 0%, rgba(0,16,25,0.78) 100%);
  z-index: 1; pointer-events: none; transition: background 0.4s ease;
}
.env-tile-label {
  position: relative; z-index: 2; color: #f8f9fb; font-family: 'Raleway', sans-serif;
  font-weight: 300; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.env-tile:hover { transform: translateY(-3px); }
.env-tile:hover .env-tile-overlay {
  background: linear-gradient(180deg, rgba(0,16,25,0.1) 0%, rgba(40,86,126,0.85) 100%);
}
.env-cta-wrapper { text-align: center; margin-top: 3rem; }
@media (max-width: 900px) { .env-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px) { .env-grid { grid-template-columns: 1fr; } }

/* Prompt 6 — Alternance verticale [Image|Titre|Image|Titre] */
.piliers-alt {
  display: grid; grid-template-columns: 80px 1fr 80px 1fr; gap: 2rem;
  align-items: center; margin: 4rem 0 2rem;
}
.pilier-illu-fine { height: 200px; overflow: hidden; border-radius: 2px; background: transparent; line-height: 0; font-size: 0; }
.pilier-illu-fine img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilier-titre {
  font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.15rem;
  color: var(--blanc); letter-spacing: 0.03em; line-height: 1.4;
}
@media (max-width: 900px) {
  .piliers-alt { grid-template-columns: 60px 1fr; gap: 1.5rem; }
  .pilier-illu-fine { height: 120px; }
  .pilier-titre { font-size: 1rem; }
}

/* ============================================================
   4 NIVEAUX D'INTERVENTION — Grille 2×2 avec animations
   ============================================================ */
.niveaux-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
.niveau-card {
  position: relative;
  padding: 3rem 2.5rem 2.8rem;
  background: rgba(9, 39, 55, 0.55);
  border: 1px solid rgba(94, 189, 242, 0.15);
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 550ms ease,
              background 550ms ease,
              box-shadow 550ms ease;
}
.niveau-card::before {
  /* halo bleu diffus qui apparait au hover */
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(94, 189, 242, 0.18) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.niveau-card::after {
  /* barre en bas qui se déploie au hover */
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--bleu-vif), var(--bleu-clair));
  box-shadow: 0 0 12px rgba(94, 189, 242, 0.5);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.niveau-card:hover {
  transform: translateY(-10px);
  border-color: rgba(94, 189, 242, 0.5);
  background: rgba(40, 86, 126, 0.3);
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6),
              0 0 40px -10px rgba(94, 189, 242, 0.2);
}
.niveau-card:hover::before { opacity: 1; }
.niveau-card:hover::after { width: 100%; }
.niveau-num {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: 3.6rem;
  color: rgba(94, 189, 242, 0.4);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 1.6rem;
  transition: color 550ms ease,
              transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
              text-shadow 550ms ease;
  display: inline-block;
}
.niveau-card:hover .niveau-num {
  color: var(--bleu-clair);
  transform: scale(1.08) translateY(-2px);
  text-shadow: 0 0 20px rgba(94, 189, 242, 0.5);
}
.niveau-card h4 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.55rem;
  color: var(--blanc);
  margin: 0 0 1.2rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
  position: relative;
  transition: color 450ms ease;
}
.niveau-card:hover h4 {
  color: var(--bleu-clair);
}
.niveau-card p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(248, 249, 251, 0.78);
  line-height: 1.7;
  margin: 0;
  position: relative;
}
@media (max-width: 800px) {
  .niveaux-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
  .niveau-card { padding: 2rem 1.75rem; }
  .niveau-num { font-size: 3rem; margin-bottom: 1.2rem; }
  .niveau-card h4 { font-size: 1.35rem; }
}

/* ============================================================
   RESPIRATIONS CHROMATIQUES — rompt le mono-fond bleu-nuit
   ============================================================ */
/* Chapitre Expertise : fond un cran plus clair pour marquer l'entrée méthodo */
#expertises {
  background: linear-gradient(180deg, var(--nuit-1) 0%, var(--nuit-2) 8%, var(--nuit-2) 92%, var(--nuit-1) 100%);
}
/* Chapitre Méthode : fond très légèrement teinté pour distinguer du bloc suivant */
#methode {
  background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.45) 20%, rgba(9, 39, 55, 0.45) 80%, var(--nuit-1) 100%);
}

/* ============================================================
   PILIERS ÉDITORIAUX — bande typographique (rompt les grilles)
   ============================================================ */
.piliers-editorial {
  margin-top: 3rem;
  border-top: 1px solid rgba(94, 189, 242, 0.1);
}
.pilier-line {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2.5rem;
  padding: 2.2rem 0 2.2rem 0.5rem;
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
  align-items: baseline;
  transition: padding-left 500ms cubic-bezier(0.22, 1, 0.36, 1),
              background 400ms ease;
}
.pilier-line.in-view {
  padding-left: 1.8rem;
  background: linear-gradient(90deg, rgba(94, 189, 242, 0.04) 0%, rgba(94, 189, 242, 0) 90%);
}

/* Photo de fond révélée au passage (variante piliers-with-bg / home) */
.piliers-with-bg .pilier-line { position: relative; overflow: hidden; isolation: isolate; }
.piliers-with-bg .pilier-line::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--pilier-img);
  background-size: cover;
  background-position: center right;
  opacity: 0;
  transition: opacity 900ms ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Voile sombre pour préserver la lisibilité du texte au-dessus */
.piliers-with-bg .pilier-line::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,16,25,0.95) 0%, rgba(0,16,25,0.55) 60%, rgba(0,16,25,0.35) 100%);
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
  z-index: -1;
}
.piliers-with-bg .pilier-line.in-view::before { opacity: 0.72; }
.piliers-with-bg .pilier-line.in-view::after  { opacity: 1; }
.piliers-with-bg .pilier-line.in-view { background: transparent; }
.pilier-initial {
  font-family: var(--font-titre);
  font-weight: 100;
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  color: rgba(94, 189, 242, 0.35);
  line-height: 1;
  letter-spacing: 0.04em;
  transition: color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}
.pilier-line.in-view .pilier-initial {
  color: var(--bleu-clair);
  transform: translateX(-3px);
  text-shadow: 0 0 15px rgba(94, 189, 242, 0.35);
}
.pilier-line h3 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  color: var(--blanc);
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.3;
  transition: color 400ms ease;
}
.pilier-line.in-view h3 { color: var(--bleu-clair); }

/* Variante détaillée (page expertise) : initiale + titre + paragraphe */
.piliers-editorial-detail .pilier-line { grid-template-columns: 110px 1fr; padding: 2.8rem 0 2.8rem 0.5rem; }
.pilier-body { display: flex; flex-direction: column; gap: 0.9rem; }
.pilier-body h3 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  color: var(--blanc);
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.25;
  transition: color 400ms ease;
}
.pilier-line.in-view .pilier-body h3 { color: var(--bleu-clair); }
.pilier-body p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.02rem;
  color: rgba(248, 249, 251, 0.72);
  line-height: 1.75;
  margin: 0;
  max-width: 680px;
}

@media (max-width: 700px) {
  .pilier-line { grid-template-columns: 60px 1fr; gap: 1.5rem; padding: 1.8rem 0; }
  .piliers-editorial-detail .pilier-line { grid-template-columns: 60px 1fr; padding: 2rem 0; }
}

/* ============================================================
   CITATION SPLIT — rupture éditoriale (image + verbatim)
   ============================================================ */
.citation-split {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1000px;
  margin: 4rem auto 3rem;
  padding: 3rem 3rem;
  background: linear-gradient(135deg, rgba(94, 189, 242, 0.03) 0%, transparent 60%);
  border-top: 1px solid rgba(94, 189, 242, 0.1);
  border-bottom: 1px solid rgba(94, 189, 242, 0.1);
  position: relative;
}
.citation-split-media {
  position: relative;
  width: 240px;
  height: 300px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.55);
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.citation-split-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(0.35) brightness(0.92) contrast(1.05);
  transition: transform 2s ease, filter 2s ease;
}
a.citation-split-media:hover img {
  transform: scale(1.05);
  filter: grayscale(0.05) brightness(1) contrast(1.05);
}
.citation-split-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 16, 25, 0.7) 100%);
  pointer-events: none;
  transition: background 500ms ease;
}
a.citation-split-media:hover .citation-split-overlay {
  background: linear-gradient(180deg, transparent 25%, rgba(0, 16, 25, 0.85) 100%);
}
.citation-split-hint {
  position: absolute;
  bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
a.citation-split-media:hover .citation-split-hint,
a.citation-split-media:focus-visible .citation-split-hint {
  opacity: 1;
  transform: translateY(0);
}
a.citation-split-media:focus-visible {
  outline: 2px solid rgba(94, 189, 242, 0.6);
  outline-offset: 4px;
}
.citation-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  position: relative;
}
.citation-mark {
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 5rem;
  line-height: 0.3;
  color: var(--bleu-vif);
  opacity: 0.45;
  margin-bottom: 1.4rem;
  font-style: italic;
  display: block;
  height: 2.2rem;
}
.citation-split blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.citation-split blockquote p {
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  color: rgba(248, 249, 251, 0.94);
  line-height: 1.55;
  letter-spacing: 0.005em;
  margin: 0 0 2rem;
}
.citation-split blockquote em {
  color: var(--bleu-clair);
  font-style: italic;
}
.citation-attribution {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.citation-attribution {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(94, 189, 242, 0.15);
  max-width: 280px;
}
.citation-name {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  display: block;
}
.citation-role {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: rgba(248, 249, 251, 0.5);
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
  display: block;
}
@media (max-width: 800px) {
  .citation-split {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 520px;
    margin: 4rem auto 2rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    justify-items: center;
  }
  .citation-split-media { width: 160px; height: 200px; }
  .citation-split-content { text-align: center; align-items: center; }
  .citation-mark { font-size: 4rem; height: 1.8rem; }
  .citation-attribution { margin: 0 auto; }
}

/* ============================================================
   PAGE NOTRE ÉQUIPE — Fiche CV
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(141, 175, 194, 0.7);
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color 300ms ease, gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.back-link:hover {
  color: var(--bleu-clair);
  gap: 1rem;
}
.back-arrow {
  font-size: 1.1rem;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}
.back-link:hover .back-arrow { transform: translateX(-4px); }

.cv-section {
  padding: 4rem 0 6rem;
}
.cv-fiche {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 0;
}
.cv-fiche + .cv-fiche {
  margin-top: 2rem;
  padding-top: 5rem;
  border-top: 1px solid rgba(94, 189, 242, 0.1);
}
/* Zigzag éditorial : la 2e fiche a la photo à droite */
.cv-fiche--reverse { grid-template-columns: 1fr 320px; }
.cv-fiche--reverse .cv-photo { order: 2; }
.cv-fiche--reverse .cv-content { order: 1; }
@media (max-width: 800px) {
  .cv-fiche--reverse { grid-template-columns: 1fr; }
  .cv-fiche--reverse .cv-photo { order: 0; }
  .cv-fiche--reverse .cv-content { order: 1; }
}
.cv-photo {
  position: relative;
  width: 320px;
  height: 400px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 25px 55px -18px rgba(0, 0, 0, 0.7);
}
.cv-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(0, 16, 25, 0.35) 100%);
  pointer-events: none;
}
.cv-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(0.2) brightness(0.95) contrast(1.05);
  transition: filter 2s ease;
  animation: cv-ken-burns 14s ease-in-out infinite alternate;
  transform-origin: center 30%;
  will-change: transform;
}
/* Décalages + origines variables pour un effet organique entre fiches */
.cv-fiche:nth-of-type(2) .cv-photo img { animation-delay: -3.5s;  transform-origin: 60% 30%; }
.cv-fiche:nth-of-type(3) .cv-photo img { animation-delay: -7s;    transform-origin: 40% 35%; }
.cv-fiche:nth-of-type(4) .cv-photo img { animation-delay: -10.5s; transform-origin: 55% 25%; }
@keyframes cv-ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, 1%); }
}
.cv-photo:hover img {
  filter: grayscale(0.05) brightness(1) contrast(1.05);
}
.cv-content { padding-top: 0.5rem; }
.cv-header {
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(94, 189, 242, 0.15);
  margin-bottom: 2.2rem;
}
.cv-header h2 {
  font-family: var(--font-titre);
  font-weight: 200;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--blanc);
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.cv-role {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin: 0;
}
.cv-bio p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.02rem;
  color: rgba(248, 249, 251, 0.78);
  line-height: 1.8;
  margin: 0 0 1.2rem;
  max-width: 620px;
}
.cv-bio p:last-child { margin-bottom: 2.2rem; }
.cv-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
  border-bottom: 1px solid rgba(94, 189, 242, 0.08);
  margin-bottom: 2.5rem;
}
.cv-block h4 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin: 0 0 1.2rem;
}
.cv-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cv-block li {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(248, 249, 251, 0.72);
  line-height: 1.6;
  padding: 0.4rem 0 0.4rem 1rem;
  position: relative;
}
.cv-block li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.9em;
  width: 4px; height: 4px;
  background: var(--bleu-vif);
  border-radius: 50%;
  opacity: 0.6;
}
.cv-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blanc);
  background: #0077B5;
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  border: 1px solid #0077B5;
  transition: background 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.btn-linkedin:hover {
  background: #005a8c;
  border-color: #005a8c;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(0, 119, 181, 0.5);
}
.btn-linkedin svg { flex-shrink: 0; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  background: transparent;
  padding: 0.9rem 1.8rem;
  text-decoration: none;
  border: 1px solid rgba(94, 189, 242, 0.35);
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease;
}
.btn-secondary:hover {
  background: rgba(94, 189, 242, 0.08);
  border-color: var(--bleu-vif);
  color: var(--blanc);
  transform: translateY(-2px);
}

.cv-back-section {
  padding: 3rem 0 5rem;
  text-align: center;
  border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  background: transparent;
  padding: 1.1rem 2.4rem;
  text-decoration: none;
  border: 1px solid rgba(94, 189, 242, 0.35);
  transition: background 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), gap 300ms ease;
}
.btn-back:hover {
  background: rgba(94, 189, 242, 0.08);
  border-color: var(--bleu-vif);
  gap: 1.2rem;
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .cv-fiche { grid-template-columns: 1fr; gap: 2.5rem; padding: 1.5rem 0; }
  .cv-photo { width: 100%; max-width: 320px; height: 380px; margin: 0 auto; }
  .cv-blocks { grid-template-columns: 1fr; gap: 2rem; }
  .cv-actions { justify-content: center; }
  .cv-section { padding: 2rem 0 4rem; }
}

/* ============================================================
   REAL POSTER — chiffre géant éditorial (rompt les stats grid)
   ============================================================ */
.real-poster {
  text-align: center;
  padding: 4rem 2rem 3.5rem;
  margin: 3rem 0 0;
  border-top: 1px solid rgba(94, 189, 242, 0.1);
  border-bottom: 1px solid rgba(94, 189, 242, 0.1);
  background: linear-gradient(180deg, rgba(94, 189, 242, 0.02) 0%, transparent 100%);
  position: relative;
}
.real-poster-num {
  font-family: var(--font-titre);
  font-weight: 100;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 1.8rem;
  background: linear-gradient(180deg, var(--blanc) 0%, var(--bleu-clair) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
.real-poster-plus {
  font-weight: 200;
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.06em;
  color: var(--bleu-vif);
  -webkit-text-fill-color: var(--bleu-vif);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.real-poster-label {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: rgba(248, 249, 251, 0.88);
  letter-spacing: 0.06em;
  margin: 0 auto 2.8rem;
  max-width: 640px;
  line-height: 1.45;
}
.real-poster-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.88rem;
  color: rgba(248, 249, 251, 0.55);
  letter-spacing: 0.04em;
}
.real-poster-meta .sep {
  color: var(--bleu-vif);
  opacity: 0.5;
  font-weight: 400;
}
@media (max-width: 700px) {
  .real-poster { padding: 3rem 1rem 2.5rem; margin: 3rem 0 0; }
  .real-poster-label { font-size: 1rem; margin-bottom: 2rem; }
  .real-poster-meta { flex-direction: column; gap: 0.4rem; }
  .real-poster-meta .sep { display: none; }
}

/* Prompt 8 — Triptyque méthode (hover bleu plus clair) */
.triptyque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4rem; }
.triptyque-step {
  padding: 2.5rem 2rem; border: 1px solid rgba(94,189,242,0.12); border-radius: 4px;
  background: var(--nuit-2); transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.triptyque-step:hover {
  background: rgba(40,86,126,0.3); border-color: var(--bleu-vif); transform: translateY(-3px);
}
.triptyque-step:hover .triptyque-num, .triptyque-step:hover h4 { color: var(--bleu-clair); }
.triptyque-num {
  font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 2.8rem;
  color: var(--bleu-acier); line-height: 1; margin-bottom: 1rem; transition: color 0.3s;
}
.triptyque-step h4 {
  font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.4rem;
  color: var(--blanc); letter-spacing: 0.03em; margin: 0 0 1rem; transition: color 0.3s;
}
.triptyque-step p {
  font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.65);
  line-height: 1.65; margin: 0;
}
@media (max-width: 900px) { .triptyque { grid-template-columns: 1fr; gap: 1rem; } }

/* Prompt 9 — Photos équipe réelles + 4 colonnes */
.equipe-grid.equipe-grid-4 { grid-template-columns: repeat(4, 1fr); }
.equipe-photo.equipe-photo-real {
  width: 100%; aspect-ratio: 1; background: var(--nuit-2); overflow: hidden;
  display: block; border-radius: 2px;
}
.equipe-photo.equipe-photo-real img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.85) contrast(1.05); transition: filter 0.4s, transform 0.6s;
}
.equipe-card:hover .equipe-photo.equipe-photo-real img {
  filter: grayscale(0.2); transform: scale(1.03);
}
@media (max-width: 900px) { .equipe-grid.equipe-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .equipe-grid.equipe-grid-4 { grid-template-columns: 1fr; } }

/* Prompt 11 — Footer LinkedIn inline */
.footer-social-inline {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1.2rem;
  font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(248,249,251,0.5);
}
.footer-social-inline a { color: var(--bleu-vif); display: inline-flex; align-items: center; transition: color 0.3s; }
.footer-social-inline a:hover { color: var(--bleu-clair); }

/* Prompt 12 — Page Contact : titre minimal + formulaire blanc */
.contact-title-bar { padding: 8rem 0 2rem; background: var(--nuit-1); text-align: center; }
.contact-title-h1 {
  font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 3rem;
  color: var(--blanc); letter-spacing: 0.03em; margin: 0;
}
@media (max-width: 700px) { .contact-title-bar { padding: 6rem 0 1rem; } .contact-title-h1 { font-size: 2.2rem; } }
.contact-section-light { padding: 3rem 0 8rem; background: var(--nuit-1); }
.contact-form.contact-form-white {
  background: #f8f9fb; padding: 3rem; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.contact-form.contact-form-white label { color: var(--nuit-1); }
.contact-form.contact-form-white input,
.contact-form.contact-form-white select,
.contact-form.contact-form-white textarea {
  background: #fff; color: var(--nuit-1); border: 1px solid rgba(0,16,25,0.15); border-radius: 2px;
}
.contact-form.contact-form-white input:focus,
.contact-form.contact-form-white select:focus,
.contact-form.contact-form-white textarea:focus {
  border-color: var(--bleu-profond); outline: none; box-shadow: 0 0 0 3px rgba(40,86,126,0.12);
}
.contact-form.contact-form-white input::placeholder,
.contact-form.contact-form-white textarea::placeholder { color: rgba(0,16,25,0.4); }
.contact-form.contact-form-white .contact-form-rgpd { color: rgba(0,16,25,0.65); }
.contact-form.contact-form-white .contact-form-rgpd a { color: var(--bleu-profond); }
.contact-form.contact-form-white .contact-form-submit {
  background: var(--nuit-1); color: #fff; border: none;
}
.contact-form.contact-form-white .contact-form-submit:hover { background: var(--bleu-profond); }
@media (max-width: 700px) { .contact-form.contact-form-white { padding: 2rem 1.5rem; } }

/* Prompt 14 — Page nos-environnements : 6 blocs image en arrière-plan */
.env-detail-section { padding: 4rem 0 6rem; }
.env-bloc {
  position: relative; padding: 5rem 3rem; margin-bottom: 2.5rem; border-radius: 4px;
  overflow: hidden; background-size: cover; background-position: center; min-height: 360px;
  display: flex; align-items: flex-end;
}
/* Ken Burns : l'image de fond respire lentement (scale + panoramique) */
.env-bloc::before {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform-origin: center center;
  animation: env-ken-burns 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* Décalage de départ pour éviter la synchronisation entre les 6 blocs */
.env-bloc:nth-child(2)::before { animation-delay: -4s;  transform-origin: 65% 45%; }
.env-bloc:nth-child(3)::before { animation-delay: -8s;  transform-origin: 40% 55%; }
.env-bloc:nth-child(4)::before { animation-delay: -12s; transform-origin: 55% 40%; }
.env-bloc:nth-child(5)::before { animation-delay: -16s; transform-origin: 35% 60%; }
.env-bloc:nth-child(6)::before { animation-delay: -20s; transform-origin: 60% 50%; }
@keyframes env-ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.10); }
}
.env-bloc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,16,25,0.45) 0%, rgba(0,16,25,0.92) 100%);
  z-index: 1;
}
.env-bloc-inner { position: relative; z-index: 2; max-width: 740px; }
.env-bloc-inner h2 {
  font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 2.4rem;
  color: var(--blanc); margin: 0 0 1.5rem; letter-spacing: 0.02em;
}
.env-bloc-inner p {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1rem;
  color: rgba(248,249,251,0.85); line-height: 1.7; margin: 0;
}
@media (max-width: 700px) {
  .env-bloc { padding: 3rem 1.5rem; min-height: 280px; }
  .env-bloc-inner h2 { font-size: 1.8rem; }
}

/* Prompt 15 — Page Expertise grille 2×2 */
.expertise-piliers-section { padding: 4rem 0 6rem; }
.piliers-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pilier-detail {
  display: grid; grid-template-columns: 60px 1fr; gap: 1.5rem;
  padding: 2rem; background: var(--nuit-2); border: 1px solid rgba(94,189,242,0.1);
  border-radius: 4px; transition: border-color 0.3s, transform 0.3s;
}
.pilier-detail:hover { border-color: rgba(94,189,242,0.3); transform: translateY(-2px); }
.pilier-detail-illu { height: 200px; overflow: hidden; border-radius: 2px; }
.pilier-detail-illu img { width: 100%; height: 100%; object-fit: cover; }
.pilier-detail-content h3 {
  font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.25rem;
  color: var(--blanc); margin: 0 0 1rem;
}
.pilier-detail-content p {
  font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.7);
  line-height: 1.65; margin: 0;
}
@media (max-width: 900px) { .piliers-detail-grid { grid-template-columns: 1fr; } }

/* Prompt 16 — Page À propos : grille 2×2 cartes colorées */
.apropos-section { padding: 4rem 0 6rem; }
.apropos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.apropos-card {
  display: grid; grid-template-columns: 240px 1fr; min-height: 280px;
  border-radius: 4px; overflow: hidden; background: var(--nuit-2);
  border: 1px solid rgba(94,189,242,0.08);
}
.apropos-card-logo {
  background: var(--card-color, var(--bleu-profond)) center/cover no-repeat;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  filter: grayscale(0.72) brightness(0.93) contrast(1.04);
  transition: filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apropos-card:hover .apropos-card-logo {
  filter: grayscale(0) brightness(1) contrast(1.03);
}
.apropos-card-logo::after {
  /* léger dégradé pour ancrer visuellement l'image sur le bord droit */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 75%, rgba(9, 39, 55, 0.35) 100%);
  pointer-events: none;
}
.apropos-card-body { padding: 2rem; display: flex; flex-direction: column; }
.apropos-card-body h3 {
  font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.4rem;
  color: var(--blanc); margin: 0 0 1rem;
}
.apropos-card-body p {
  font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.7);
  line-height: 1.6; margin: 0 0 1.5rem; flex: 1; font-size: 0.95rem;
}
.apropos-card-link {
  color: var(--bleu-vif); font-family: 'Raleway', sans-serif;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; transition: color 0.3s;
}
.apropos-card-link:hover { color: var(--bleu-clair); }
.apropos-card-link-disabled { color: rgba(248,249,251,0.35); pointer-events: none; cursor: default; }

/* CTA discret sous les photos équipe (home) — style "En savoir plus →" */
.equipe-cta-wrap { text-align: center; margin-top: 4rem; }
.equipe-cta-link {
  display: inline-block;
  color: var(--bleu-vif);
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}
.equipe-cta-link span { display: inline-block; margin-left: 0.6rem; transition: transform 0.3s ease; }
.equipe-cta-link:hover { color: var(--bleu-clair); border-bottom-color: var(--bleu-clair); }
.equipe-cta-link:hover span { transform: translateX(4px); }
@media (max-width: 900px) {
  .apropos-grid { grid-template-columns: 1fr; }
  .apropos-card { grid-template-columns: 1fr; }
  .apropos-card-logo { padding: 1.5rem; }
}

/* Prompt 17 — Page Cas Clients : bandeaux alternance + modal */
.cc-section { padding: 4rem 0 8rem; }
.cc-bandeau {
  display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 3rem;
  border-radius: 4px; overflow: hidden; min-height: 360px;
}
.cc-bandeau-reverse { direction: rtl; }
.cc-bandeau-reverse > * { direction: ltr; }
.cc-bandeau-img {
  background-size: cover; background-position: center; transition: transform 0.8s;
  min-height: 280px;
}
.cc-bandeau:hover .cc-bandeau-img { transform: scale(1.04); }
.cc-bandeau-content {
  display: flex; flex-direction: column; justify-content: center; padding: 3rem;
  background: linear-gradient(135deg, var(--bleu-profond) 0%, var(--nuit-2) 100%);
  color: var(--blanc);
}
.cc-bandeau-eyebrow {
  font-family: 'Raleway', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.65; margin-bottom: 1.2rem;
}
.cc-bandeau h2 {
  font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.7rem;
  letter-spacing: 0.02em; margin: 0 0 1.2rem; line-height: 1.25;
}
.cc-bandeau-sous {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.98rem;
  opacity: 0.75; line-height: 1.6; margin: 0 0 2rem;
}
.cc-bandeau-btn {
  background: transparent; color: inherit; border: 1px solid currentColor;
  padding: 0.85rem 1.8rem; font-family: 'Raleway', sans-serif; font-weight: 300;
  letter-spacing: 0.1em; font-size: 0.8rem; text-transform: uppercase;
  cursor: pointer; border-radius: 2px; transition: background 0.3s, color 0.3s;
  align-self: flex-start;
}
.cc-bandeau-btn:hover { background: var(--bleu-vif); color: var(--nuit-1); border-color: var(--bleu-vif); }
@media (max-width: 900px) {
  .cc-bandeau { grid-template-columns: 1fr; }
  .cc-bandeau-reverse { direction: ltr; }
  .cc-bandeau-content { padding: 2rem; }
  .cc-bandeau h2 { font-size: 1.4rem; }
}

/* Modal cas clients */
.cc-modal {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 2rem;
}
.cc-modal[hidden] { display: none; }
.cc-modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,16,25,0.85);
  backdrop-filter: blur(8px); cursor: pointer;
}
.cc-modal-dialog {
  position: relative; background: var(--nuit-2); border: 1px solid rgba(94,189,242,0.15);
  border-radius: 4px; max-width: 820px; width: 100%; max-height: 88vh;
  overflow-y: auto; padding: 3.5rem 3rem; box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.cc-modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem; width: 36px; height: 36px;
  border: none; background: transparent; color: rgba(248,249,251,0.5); font-size: 1.8rem;
  cursor: pointer; line-height: 1; border-radius: 50%; transition: color 0.3s, background 0.3s;
}
.cc-modal-close:hover { color: var(--blanc); background: rgba(94,189,242,0.1); }
.cc-modal-eyebrow {
  font-family: 'Raleway', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bleu-vif); margin-bottom: 1.2rem;
}
.cc-modal h2 {
  font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.9rem;
  color: var(--blanc); letter-spacing: 0.02em; margin: 0 0 1rem; line-height: 1.25;
}
.cc-modal-sous {
  font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic;
  color: rgba(248,249,251,0.65); font-size: 1.02rem; margin: 0 0 2.5rem; line-height: 1.6;
}
.cc-modal-body h3 {
  font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 1.1rem;
  color: var(--bleu-clair); letter-spacing: 0.02em; margin: 2rem 0 1rem;
}
.cc-modal-body p {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.95rem;
  color: rgba(248,249,251,0.78); line-height: 1.75; margin: 0 0 1rem;
}
@media (max-width: 700px) {
  .cc-modal { padding: 1rem; }
  .cc-modal-dialog { padding: 2.5rem 1.5rem; }
  .cc-modal h2 { font-size: 1.4rem; }
}


/* =================================================================
   3 POINTS HERO — PULSATION EN VAGUE (en boucle, dot-1 → dot-2 → dot-3)
   Ajouté juillet 2026. Uniquement sur les points du hero, pas sur ceux du logo nav.
   ================================================================= */
@keyframes hero-dots-wave {
  0%, 60%, 100% { transform: scale(1); opacity: 1; }
  30%           { transform: scale(1.6); opacity: 0.7; }
}
.hero-dots .dot {
  animation: hero-dots-wave 2.4s ease-in-out infinite;
}
.hero-dots .dot-1 { animation-delay: 0s; }
.hero-dots .dot-2 { animation-delay: 0.35s; }
.hero-dots .dot-3 { animation-delay: 0.7s; }


/* =================================================================
   HERO — MOUVEMENT LÉGER DU FOND (dérive lente du dégradé, 28 s)
   Aucun conflit avec le parallax JS qui utilise transform.
   L'animation joue sur background-position (canvas 130% de la div).
   ================================================================= */
/* Pulsation douce du fond du hero — cycle 12 s, respiration lente
   Utilise opacity + filter (pas transform) pour ne pas entrer en conflit
   avec le parallax JS qui pose déjà un transform sur .hero-bg */
.hero-bg {
  animation: hero-bg-breathe 10s ease-in-out infinite;
}
@keyframes hero-bg-breathe {
  0%, 100% { opacity: 0.55; filter: brightness(0.8) saturate(0.9); }
  50%      { opacity: 1;    filter: brightness(1.5) saturate(1.35); }
}

/* =====================================================
   FIX RESPONSIVE — patch en fin de fichier pour override
   la règle .nav-burger { display: none } déclarée après
   le media query dans l'ordre source (cascade CSS)
   ===================================================== */
@media (max-width: 900px) {
  nav#mainNav .nav-links,
  nav#mainNav > .nav-cta { display: none !important; }
  nav#mainNav .nav-burger { display: flex !important; }
}