/* ============================================================
   DBA en Intelligence Artificielle
   ÉSTIAM Campus Casablanca × Paris Education
   ────────────────────────────────────────────────
   Direction : tech-noir, IA, futurisme, accent safran marocain
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* ─── BACKGROUNDS (sombres violet-noir ESTIAM) ─── */
  --bg-void: #0A0518;
  --bg-deepest: #0F0822;
  --bg: #160C30;
  --bg-card: #1E1240;
  --bg-elevated: #281852;
  --bg-elevated-2: #311E63;
  --bg-elevated-3: #3D2678;

  /* ─── ESTIAM PURPLE — #6633CC officiel ─── */
  --purple-50: #F4F0FC;
  --purple-100: #E6DCFA;
  --purple-300: #B89FE8;
  --purple-400: #9670DB;
  --purple-500: #7A47D1;
  --purple-600: #6633CC;
  --purple-700: #5429A8;
  --purple-800: #421F85;
  --purple-glow: rgba(102, 51, 204, 0.35);
  --purple-glow-strong: rgba(102, 51, 204, 0.6);
  --purple-soft: rgba(102, 51, 204, 0.1);

  /* ─── ORANGE ESTIAM #FF550C — détails/accents (réutilise les noms saffron) ─── */
  --saffron: #FF550C;
  --saffron-bright: #FF7438;
  --saffron-deep: #E04708;
  --saffron-burnt: #C23D06;
  --saffron-gold: #FF6A20;
  --saffron-glow: rgba(255, 85, 12, 0.3);
  --saffron-soft: rgba(255, 85, 12, 0.1);

  /* ─── ACCENT CYAN (très ponctuel) ─── */
  --cyan: #5EAEA8;
  --cyan-glow: rgba(94, 174, 168, 0.35);
  --cyan-soft: rgba(94, 174, 168, 0.06);

  /* ─── NEUTRES ─── */
  --text: #ECE8F2;
  --text-strong: #FBFAFF;
  --text-soft: #B3A9C9;
  --text-muted: #7E7596;
  --text-faint: #4D4661;

  /* ─── LIGNES ─── */
  --border: rgba(150, 112, 219, 0.12);
  --border-strong: rgba(150, 112, 219, 0.24);
  --border-saffron: rgba(255, 85, 12, 0.25);
  --border-cyan: rgba(94, 174, 168, 0.2);

  /* ─── OMBRES ─── */
  --shadow-purple: 0 30px 60px -24px rgba(102, 51, 204, 0.3), 0 0 1px rgba(102, 51, 204, 0.25);
  --shadow-saffron: 0 30px 60px -24px rgba(255, 85, 12, 0.25), 0 0 1px rgba(255, 85, 12, 0.25);
  --shadow-card: 0 24px 48px -20px rgba(10, 5, 24, 0.6), inset 0 1px 0 rgba(255,255,255,0.04);

  /* ─── TYPOGRAPHIE ─── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ─── SPACING ─── */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 11vw, 10rem);
  --container-max: 1320px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
}

/* Texture grain globale + grille de fond */
body::before {
  content: ""; position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 85%, rgba(255, 85, 12, 0.04) 0%, transparent 40%),
    linear-gradient(rgba(167, 139, 250, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   COMPOSITION GLOBALE
   ============================================================ */
section { padding: var(--section-y) var(--gutter); position: relative; z-index: 1; }
.container { max-width: var(--container-max); margin: 0 auto; width: 100%; position: relative; }

/* Préfixe "/" ÉSTIAM signature */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--purple-400);
  margin-bottom: 28px;
  text-transform: none;
}
.tag::before {
  content: "/"; color: var(--saffron); font-weight: 700;
  font-size: 14px;
}

/* Titres section */
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin-bottom: 32px;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--purple-400) 0%, var(--saffron) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.lede {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 680px;
  font-weight: 400;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* En haut de page : pleine largeur (contenu jusqu'aux bords) */
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  background: rgba(11, 7, 22, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: padding 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
  background: rgba(11, 7, 22, 0.92);
  /* Au scroll : contenu aligné sur la grille (ne dépasse pas la ligne du contenu) */
  padding: 10px max(var(--gutter), calc((100% - var(--container-max)) / 2));
  border-bottom-color: var(--border-strong);
}

.nav-logos { display: flex; align-items: center; gap: 18px; }
.nav-logos img { height: 30px; width: auto; }
.nav-logos img.nav-logo-estiam { height: 26px; }
.nav-logos img.paris-logo { filter: brightness(0) invert(1) brightness(0.95); }
.nav-logos .sep { width: 1px; height: 22px; background: var(--border-strong); }

.nav-links { display: flex; gap: 32px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.nav-links a {
  color: var(--text-soft);
  transition: color 0.2s;
  position: relative;
  text-transform: capitalize;
  letter-spacing: 0.03em;
}
.nav-links a::before { content: "/ "; color: var(--text-faint); transition: color 0.25s; }
.nav-links a:hover { color: var(--text-strong); }
.nav-links a:hover::before { color: var(--saffron); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--purple-600);
  color: var(--text-strong);
  padding: 11px 22px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--purple-500);
  border-radius: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 0 var(--purple-glow);
}
.nav-cta:hover {
  background: var(--purple-700);
  box-shadow: 0 0 24px var(--purple-glow-strong);
  transform: translateY(-1px);
}
.nav-cta svg { transition: transform 0.25s; }
.nav-cta:hover svg { transform: translateX(3px); }

.nav-burger { display: none; background: none; border: none; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: 0.3s; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; padding-left: 16px; padding-right: 16px; }
  /* CTA icône redondant avec le « Candidater » du menu burger → on l'enlève
     pour laisser respirer les deux logos de marque */
  .nav-cta { display: none; }
  .nav-logos { gap: 10px; }
  .nav-logos img { height: 22px; }
  .nav-logos img.nav-logo-estiam { height: 20px; }
  .nav-logos img.paris-logo { height: 18px; max-width: 160px; object-fit: contain; }
  .nav-logos .sep { display: none; }
  .nav-burger { display: block; }
}
@media (max-width: 360px) {
  /* écrans les plus étroits : on garde la marque ÉSTIAM seule */
  .nav-logos img.paris-logo { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: auto;
  display: flex; align-items: center;
  padding: 130px var(--gutter) 70px;
  position: relative;
  overflow: hidden;
  background: var(--bg-deepest);
}

/* Mesh gradient animé */
.hero::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(139, 92, 246, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255, 85, 12, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 100%, rgba(124, 58, 237, 0.25) 0%, transparent 60%);
  filter: blur(40px);
  animation: meshShift 18s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes meshShift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-4%, 3%) scale(1.08); }
  100% { transform: translate(3%, -2%) scale(0.96); }
}

/* Grille SVG sur le hero */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: 0;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-main { max-width: 760px; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 14px 6px 12px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--purple-300);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.hero-tag .dot {
  width: 6px; height: 6px;
  background: var(--saffron);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--saffron);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-strong);
  margin-bottom: 28px;
  font-variation-settings: "wdth" 95, "opsz" 96;
}
.hero-title strong {
  display: block;
  font-weight: 500;
  background: linear-gradient(110deg, var(--purple-400) 0%, var(--purple-500) 30%, var(--saffron) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 100, "opsz" 144;
}

.hero-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0 0 22px;
  max-width: 600px;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 100, "opsz" 96;
}

.hero-sub {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 540px;
  font-weight: 400;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.btn-primary {
  background: var(--purple-600);
  color: var(--text-strong);
  border-color: var(--purple-500);
  box-shadow: 0 0 0 0 var(--purple-glow);
}
.btn-primary:hover {
  background: var(--purple-700);
  box-shadow: 0 0 32px var(--purple-glow-strong), 0 8px 24px rgba(124, 58, 237, 0.4);
  transform: translateY(-2px);
}
.btn-primary svg { transition: transform 0.3s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--purple-soft);
  border-color: var(--purple-500);
  color: var(--text-strong);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.hero-meta-item {
  padding: 24px 0 0;
  border-right: 1px solid var(--border);
  padding-right: 24px;
}
.hero-meta-item:nth-child(even) { padding-left: 24px; border-right: none; }
.hero-meta-item .meta-prefix {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}
.hero-meta-item .meta-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  color: var(--text-strong);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variation-settings: "wdth" 100;
}
.hero-meta-item .meta-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Visuel hero à droite */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  justify-self: center;
  align-self: center;
}

/* ============================================================
   HERO EDITORIAL — Composition typographique éditoriale
   ============================================================ */
.hero-editorial {
  position: relative;
  width: 100%;
  padding: 32px;
  background:
    linear-gradient(155deg, rgba(20, 16, 31, 0.85) 0%, rgba(11, 7, 22, 0.6) 100%);
  border: 1px solid var(--border-strong);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px -16px rgba(0, 0, 0, 0.5),
    0 0 80px -20px rgba(139, 92, 246, 0.4);
}
/* Lueur diagonale en arrière-plan */
.hero-editorial::before {
  content: "";
  position: absolute;
  top: -20%; right: -20%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(255, 85, 12, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.hero-editorial::after {
  content: "";
  position: absolute;
  bottom: -10%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.hero-editorial > * { position: relative; z-index: 1; }

/* Header label */
.he-label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 36px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--saffron);
  text-transform: uppercase;
  font-weight: 600;
}
.he-label-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 10px var(--saffron-glow);
  animation: syncPulse 2.5s ease-in-out infinite;
}

/* Rotator de mots */
.he-rotator {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-soft);
  font-variation-settings: "wdth" 95, "opsz" 96;
}
.he-rotator-static { color: var(--text-soft); }
.he-rotator-words {
  list-style: none;
  position: relative;
  height: 1.2em;
  min-width: 200px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.he-rotator-words li {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-weight: 500;
  font-style: italic;
  font-family: 'Georgia', serif;
  color: var(--saffron);
  opacity: 0;
  transform: translateY(100%);
  animation: rotateWord 15s infinite;
}
.he-rotator-words li:nth-child(1) { animation-delay: 0s; }
.he-rotator-words li:nth-child(2) { animation-delay: 3s; }
.he-rotator-words li:nth-child(3) { animation-delay: 6s; color: var(--purple-400); }
.he-rotator-words li:nth-child(4) { animation-delay: 9s; color: var(--cyan); }
.he-rotator-words li:nth-child(5) { animation-delay: 12s; color: var(--saffron-bright); }
@keyframes rotateWord {
  0%, 100% { opacity: 0; transform: translateY(100%); }
  3%       { opacity: 1; transform: translateY(0); }
  17%      { opacity: 1; transform: translateY(0); }
  20%      { opacity: 0; transform: translateY(-100%); }
}

/* DBA monogramme central */
.he-monogram {
  margin: 8px 0 32px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  text-align: center;
}
.he-monogram::before {
  content: "[01]";
  position: absolute;
  top: 24px; right: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}
.he-mono-letters {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(4.5rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--text-strong);
  text-shadow:
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 85, 12, 0.2);
  font-variation-settings: "wdth" 100, "opsz" 144;
}
.he-mono-letters i {
  font-style: italic;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  background: linear-gradient(135deg, var(--saffron-bright) 0%, var(--saffron-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transform: translateY(2px);
}
.he-mono-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}

/* Coordonnées techniques */
.he-coords {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.he-coord-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.1);
}
.he-coord-row:last-child { border-bottom: none; padding-bottom: 0; }
.he-coord-key {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
}
.he-coord-key::before { content: "/ "; color: var(--saffron); opacity: 0.7; }
.he-coord-val {
  color: var(--text);
  font-weight: 500;
}

/* Marquee défilant */
.he-marquee {
  margin: 0 -32px -32px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
  background: rgba(20, 16, 31, 0.6);
  position: relative;
}
.he-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(20, 16, 31, 0.95) 0%, transparent 100%);
}
.he-marquee-track {
  display: flex;
  gap: 24px;
  padding-left: 32px;
  animation: marqueeScroll 30s linear infinite;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.he-marquee-track span:nth-child(odd) { color: var(--text); }
.he-marquee-track span:nth-child(even) { color: var(--saffron); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1000px) {
  .hero-editorial { padding: 28px; }
  .he-marquee { margin: 0 -28px -28px; }
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  filter: blur(30px);
}
.hero-orb {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 85, 12, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, var(--purple-700) 0%, var(--bg-elevated-2) 100%);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 0 80px rgba(167, 139, 250, 0.3),
    0 0 60px var(--purple-glow);
  animation: orbRotate 25s linear infinite;
}
@keyframes orbRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hero-orb-content {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: orbRotate 25s linear infinite reverse;
}
.hero-orb-ring {
  position: absolute;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  pointer-events: none;
}
.hero-orb-ring.r1 { inset: -8%; border-color: rgba(167, 139, 250, 0.2); }
.hero-orb-ring.r2 { inset: -16%; border-color: rgba(167, 139, 250, 0.12); }
.hero-orb-ring.r3 { inset: -24%; border-color: rgba(255, 85, 12, 0.1); border-style: dashed; }

.hero-dba-monogram {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--text-strong);
  letter-spacing: -0.05em;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
  font-variation-settings: "wdth" 100, "opsz" 144;
  z-index: 2;
}
.hero-dba-label {
  position: absolute; bottom: 18%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-soft);
  text-transform: uppercase;
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-visual { max-width: 320px; justify-self: center; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero { padding: 100px 20px 56px; min-height: auto; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .hero-meta-item:nth-child(even) { padding-left: 0; }
  .hero-meta-item { border-right: none; padding-right: 0; padding-top: 20px; }
  .hero-meta { gap: 16px; }
}

/* ============================================================
   TRUST BAR (logos accréditations - marché marocain)
   ============================================================ */
.trust-bar {
  padding: 32px var(--gutter);
  background: var(--bg-deepest);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
}
.trust-bar-inner.trust-bar-centered {
  grid-template-columns: 1fr;
  justify-items: center;
}
.trust-bar-inner.trust-bar-centered .trust-logos {
  justify-content: center;
}
.trust-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.trust-label::before { content: "/ "; color: var(--saffron); }
.trust-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.trust-logos img {
  height: 32px; width: auto;
  filter: brightness(0) invert(1) brightness(0.85);
  opacity: 0.6;
  transition: all 0.3s;
}
.trust-logos img:hover {
  filter: brightness(0) invert(1) brightness(1);
  opacity: 1;
  transform: scale(1.05);
}
/* Placeholder AMBA (en attendant le vrai logo) */
.amba-placeholder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  opacity: 0.6;
  transition: all 0.3s;
  min-width: 70px;
}
.amba-placeholder:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.4);
}
.amba-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}
.amba-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3px;
}
@media (max-width: 768px) {
  .trust-bar-inner { grid-template-columns: 1fr; gap: 20px; }
  .trust-logos { gap: 24px; }
  .trust-logos img { height: 24px; }
}

/* ============================================================
   MANIFESTE
   ============================================================ */
.manifeste {
  background: var(--bg);
  position: relative;
}
.manifeste .container {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.manifeste-left { position: sticky; top: 100px; }
.manifeste-left h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-variation-settings: "wdth" 90, "opsz" 96;
}
.manifeste-left h2 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--purple-400) 0%, var(--saffron) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.manifeste-paragraphs { display: flex; flex-direction: column; gap: 32px; }
.manifeste-p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-soft);
  padding-left: 32px;
  position: relative;
}
.manifeste-p::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 1px;
  background: var(--saffron);
}
.manifeste-p strong {
  color: var(--text-strong);
  font-weight: 600;
}
.manifeste-p em {
  font-style: normal;
  color: var(--purple-400);
  font-weight: 500;
}

@media (max-width: 900px) {
  .manifeste .container { grid-template-columns: 1fr; }
  .manifeste-left { position: static; }
}

/* ============================================================
   DOYENNE
   ============================================================ */
.doyenne {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.doyenne::before {
  content: ""; position: absolute; left: -20%; top: 20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 85, 12, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.doyenne .container {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.doyenne-portrait-wrap {
  position: relative;
  padding: 32px;
}
.doyenne-portrait-wrap::before {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 54px; height: 54px;
  border-top: 1.5px solid var(--saffron);
  border-left: 1.5px solid var(--saffron);
  border-top-left-radius: 12px;
  opacity: 0.7;
}
.doyenne-portrait-wrap::after {
  content: ""; position: absolute; bottom: 4px; right: 4px;
  width: 54px; height: 54px;
  border-bottom: 1.5px solid var(--purple-400);
  border-right: 1.5px solid var(--purple-400);
  border-bottom-right-radius: 12px;
  opacity: 0.7;
}
.doyenne-portrait {
  aspect-ratio: 4/5;
  background-color: var(--bg-card);
  background-image:
    linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(255, 85, 12, 0.1) 100%),
    radial-gradient(circle at 30% 30%, rgba(255, 85, 12, 0.2) 0%, transparent 60%);
  background-size: cover; background-position: center top;
  filter: grayscale(15%) contrast(1.05);
  position: relative;
}
.doyenne-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 7, 22, 0.7) 100%);
}

.doyenne-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--text-strong);
  margin: 32px 0;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 95, "opsz" 96;
}
.doyenne-sign {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.doyenne-sign-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.doyenne-sign-role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .doyenne .container { grid-template-columns: 1fr; }
  .doyenne-portrait-wrap { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   PROGRAMME — code-block inspired
   ============================================================ */
.programme {
  background: var(--bg-deepest);
  position: relative;
}
.programme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.module {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.module::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, var(--purple-soft) 100%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.module:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(139, 92, 246, 0.25);
}
.module:hover::before { opacity: 1; }

/* Header style "fenêtre IDE" */
.module-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.module-dots { display: flex; gap: 5px; }
.module-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
}
.module-dots span:first-child { background: rgba(255, 85, 12, 0.6); }
.module-dots span:nth-child(2) { background: rgba(167, 139, 250, 0.4); }
.module-header-path { margin-left: 8px; }
.module-cert {
  margin-left: auto;
  padding: 3px 10px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  color: var(--purple-300);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.module-body { padding: 32px; }
.module-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.module-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  color: var(--text-strong);
  margin-bottom: 24px;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 95, "opsz" 96;
}
.module-list { list-style: none; }
.module-list li {
  padding: 10px 0 10px 24px;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
  position: relative;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.08);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.module-list li:last-child { border-bottom: none; }
.module-list li::before {
  content: "▸"; position: absolute; left: 0; top: 10px;
  color: var(--saffron);
  font-size: 12px;
}

.programme-callout {
  margin-top: 40px;
  padding: 28px 36px;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 85, 12, 0.04) 100%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: 4px;
  display: flex; align-items: flex-start; gap: 20px;
}
.programme-callout-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--saffron-soft);
  border: 1px solid var(--border-saffron);
  border-radius: 8px;
}
.programme-callout-icon svg { stroke: var(--saffron); }
.programme-callout-text {
  font-size: 14px; line-height: 1.6; color: var(--text-soft);
}
.programme-callout-text strong { color: var(--saffron); font-weight: 600; }

@media (max-width: 900px) {
  .programme-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   STATS — Présence mondiale (terminal style)
   ============================================================ */
.presence {
  background: var(--bg);
  position: relative;
}
.presence-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--text);
  max-width: 900px;
  margin: 0 0 64px;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 95, "opsz" 144;
}
.presence-quote::before {
  content: "/* "; font-family: var(--font-mono);
  color: var(--saffron); font-size: 60%;
}
.presence-quote::after {
  content: " */"; font-family: var(--font-mono);
  color: var(--saffron); font-size: 60%;
}

.presence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.stat {
  background: var(--bg-card);
  padding: 36px 28px;
  position: relative;
  transition: background 0.3s;
}
.stat:hover { background: var(--bg-elevated); }
.stat-pre {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stat-pre::before { content: "> "; color: var(--saffron); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1;
  color: var(--text-strong);
  margin-bottom: 10px;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 100, "opsz" 144;
  background: linear-gradient(180deg, var(--text-strong) 0%, var(--purple-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--saffron);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.stat-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   STUDY TOUR
   ============================================================ */
.studytour {
  background: var(--bg-deepest);
  position: relative;
  overflow: hidden;
}
.studytour::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%239670DB' stroke-opacity='0.08'%3E%3Cpath d='M0 30h60M30 0v60'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23FF550C' fill-opacity='0.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}
.studytour .container { position: relative; z-index: 1; }

.cities {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 48px 0 64px;
}
.city {
  padding: 12px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.3s;
  position: relative;
}
.city::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 8px var(--saffron);
}
.city { padding-left: 32px; }
.city:hover {
  background: var(--purple-soft);
  border-color: var(--purple-500);
  color: var(--text-strong);
  transform: translateY(-2px);
}

.studytour-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.feat {
  padding-top: 28px;
  border-top: 1px solid var(--border-strong);
  position: relative;
}
.feat::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 32px; height: 2px;
  background: var(--saffron);
}
.feat-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.feat h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-strong);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.feat p { font-size: 14px; line-height: 1.55; color: var(--text-soft); }

/* ============================================================
   ADMISSION INFO + PRICING
   ============================================================ */
.admission {
  background: var(--bg);
  position: relative;
}
.admission .container { display: block; }

.admission-rows { display: flex; flex-direction: column; }
.admission-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.admission-row:first-child { border-top: 1px solid var(--border); }
.admission-row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--saffron);
  text-transform: uppercase;
  padding-top: 6px;
}
.admission-row-label::before { content: "/"; opacity: 0.5; margin-right: 4px; }
.admission-row-value {
  color: var(--text-soft); font-size: 15px; line-height: 1.6;
}
.admission-row-value strong {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-strong);
  display: block;
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.admission-row-value em {
  font-style: normal; color: var(--purple-300); font-weight: 600;
}

/* Carte tarif */
.pricing-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 36px;
  position: sticky; top: 100px;
  position: relative;
  overflow: hidden;
}
.pricing-card::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 85, 12, 0.12) 0%, transparent 70%);
  filter: blur(40px);
}
.pricing-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--saffron);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 4px 10px;
  background: var(--saffron-soft);
  border: 1px solid var(--border-saffron);
  border-radius: 100px;
  position: relative; z-index: 1;
}
.pricing-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--text-strong);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.pricing-main {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.pricing-amount {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 100, "opsz" 144;
}
.pricing-currency {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--saffron);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pricing-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.pricing-divider {
  height: 1px; background: var(--border); margin: 24px 0;
  position: relative; z-index: 1;
}
.pricing-secondary {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.pricing-secondary strong { color: var(--text); font-weight: 600; }

.pricing-perks { margin-top: 24px; position: relative; z-index: 1; }
.pricing-perk {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
  margin-bottom: 12px;
}
.pricing-perk svg { flex-shrink: 0; margin-top: 2px; stroke: var(--saffron); }

.pricing-cta {
  margin-top: 24px;
  display: flex; gap: 12px;
  position: relative; z-index: 1;
}
.pricing-cta a {
  flex: 1;
  text-align: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .admission .container { grid-template-columns: 1fr; }
  .admission-row { grid-template-columns: 1fr; gap: 6px; }
  .pricing-card { position: static; }
}

/* ============================================================
   DIPLÔME RBC
   ============================================================ */
.diploma {
  background: var(--bg-deepest);
  position: relative;
}
.diploma-card {
  margin-top: 56px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.diploma-card::before {
  content: ""; position: absolute; top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255, 85, 12, 0.08) 0%, transparent 70%);
  filter: blur(40px);
}
.diploma-logo {
  text-align: center;
  padding: 24px;
  background: var(--bg-elevated);
  border-radius: 4px;
  border: 1px solid var(--border);
  position: relative; z-index: 1;
}
.diploma-logo img {
  max-width: 100%; height: auto;
}
.diploma-text { position: relative; z-index: 1; }
.diploma-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--text-strong);
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.diploma-text p {
  font-size: 15px; line-height: 1.65;
  color: var(--text-soft);
}
.diploma-text p strong { color: var(--text); font-weight: 600; }
.diploma-badges {
  display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap;
}
.diploma-badge {
  padding: 8px 16px;
  background: var(--purple-soft);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--purple-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
}

.accreditations {
  margin-top: 80px;
  text-align: center;
}
.accreditations-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 40px;
  display: inline-block;
}
.accreditations-title::before { content: "/ "; color: var(--saffron); }
.accreditations-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}
.acc-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.3s;
  flex: 1 1 0;
  min-width: 0;
}
.acc-cell:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.acc-cell img {
  max-height: 38px; max-width: 100%;
  width: auto;
  filter: brightness(0) invert(1) brightness(0.9);
  opacity: 0.75;
  transition: all 0.3s;
}
.acc-cell:hover img { opacity: 1; filter: brightness(0) invert(1); }

@media (max-width: 700px) {
  .diploma-card { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================================
   PROCESSUS - terminal-style
   ============================================================ */
.process {
  background: var(--bg);
  position: relative;
}
.process-stack {
  margin-top: 56px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 20px;
  padding: 28px 24px;
  align-items: start;
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
  position: relative;
}
.process-step:last-child { border-bottom: none; }
.process-step:hover { background: var(--bg-elevated); }
.process-num {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--purple-400);
  letter-spacing: -0.04em;
  opacity: 0.6;
  font-variation-settings: "wdth" 100, "opsz" 144;
  padding-top: 4px;
}
.process-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-strong);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.process-title-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--saffron);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.process-desc {
  grid-column: 2;
  font-size: 13px; line-height: 1.55; color: var(--text-soft);
  font-family: var(--font-body);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .process-step { grid-template-columns: 48px 1fr; gap: 6px 14px; padding: 22px 18px; }
  .process-num { font-size: 1.8rem; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  background: var(--bg-deepest);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(255, 85, 12, 0.1) 0%, transparent 50%);
  filter: blur(20px);
}
.cta-final .container { position: relative; z-index: 1; max-width: 880px; }
.cta-final .tag { justify-content: center; }
.cta-final .title {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--text-strong);
  margin-bottom: 24px;
}
.cta-final p {
  font-size: 1.1rem;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 40px;
}
.cta-final .btn-primary {
  padding: 20px 40px;
  font-size: 14px;
}
.cta-final-deadline {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.cta-final-deadline strong { color: var(--saffron); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--bg-deepest);
  border-top: 1px solid var(--border);
  padding: 80px var(--gutter) 32px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  max-width: var(--container-max); margin: 0 auto;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.footer-logos {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; flex-wrap: nowrap;
}
.footer-logos img { height: 24px; width: auto; opacity: 0.95; max-width: 130px; object-fit: contain; }
.footer-logos img.paris-logo { filter: brightness(0) invert(1) brightness(0.95); }
.footer-logos .sep { width: 1px; height: 18px; background: var(--border-strong); flex-shrink: 0; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 320px;
  letter-spacing: -0.01em;
}
.footer-tagline em {
  font-style: normal;
  color: var(--saffron);
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col h4::before { content: "/ "; color: var(--saffron); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; font-size: 14px; }
.footer-col a { color: var(--text-soft); transition: color 0.2s; }
.footer-col a:hover { color: var(--purple-400); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px;
  font-size: 14px; color: var(--text-soft); line-height: 1.55;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 3px; opacity: 0.5; stroke: var(--purple-400); }
.footer-contact-item a:hover { color: var(--text-strong); }

.footer-bottom {
  max-width: var(--container-max); margin: 32px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-wrap: wrap; gap: 16px;
}
.footer-made-in {
  display: flex; align-items: center; gap: 8px;
}
.footer-made-in .ma-flag {
  width: 14px; height: 10px;
  background: linear-gradient(0deg, #C1272D 0%, #C1272D 100%);
  border-radius: 2px;
  position: relative;
}
.footer-made-in .ma-flag::after {
  content: "★"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #006233; font-size: 8px;
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
}

/* ============================================================
   WHATSAPP FLOATING
   ============================================================ */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #160C30;
  border: 1px solid rgba(150, 112, 219, 0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(22, 12, 48, 0.55);
  z-index: 99;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  animation: pulse-wa 3s infinite;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(150, 112, 219, 0.6);
  box-shadow: 0 16px 38px -10px rgba(102, 51, 204, 0.55);
}
.whatsapp-float svg { fill: #FFFFFF; }
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(22, 12, 48, 0.55), 0 0 0 0 rgba(102, 51, 204, 0.35); }
  50% { box-shadow: 0 10px 30px -8px rgba(22, 12, 48, 0.55), 0 0 0 14px rgba(102, 51, 204, 0); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ============================================================
   FORMULAIRE
   ============================================================ */
.form-page {
  background: var(--bg);
  min-height: 100vh;
  padding-top: 90px;
}
.form-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px var(--gutter);
}
.form-header { text-align: center; margin-bottom: 56px; }
.form-header .tag { justify-content: center; }
.form-header .title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.form-header p { color: var(--text-soft); font-size: 1.05rem; max-width: 600px; margin: 16px auto 0; line-height: 1.65; }

.candidature-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.candidature-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-500) 0%, var(--saffron) 100%);
}
.candidature-form { counter-reset: formsec; }

.form-section {
  margin-bottom: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.form-section h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--text-strong);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 16px;
}
.form-section h3::before {
  counter-increment: formsec;
  content: counter(formsec, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--saffron);
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--saffron-soft);
  border: 1px solid var(--border-saffron);
  border-radius: 100px;
}
.form-section .section-desc {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 28px; font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid-full { grid-column: 1 / -1; }

.field {
  display: flex; flex-direction: column; gap: 8px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-transform: uppercase;
  font-weight: 500;
}
.field label .req { color: var(--saffron); }

.field input,
.field select,
.field textarea {
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  transition: all 0.25s;
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-500);
  background: var(--bg-elevated-2);
  box-shadow: 0 0 0 3px var(--purple-soft);
}
.field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239670DB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }

.field-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.field-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
  color: var(--text-soft);
  font-family: var(--font-body);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.field-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.field-radio:hover {
  background: var(--bg-elevated-2);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.field-radio:has(input:checked) {
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
  border-color: var(--purple-500);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(102, 51, 204, 0.6);
}
.field-radio:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(122, 71, 209, 0.25);
}

.field-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.55; color: var(--text-soft);
  margin-top: 12px;
}
.field-checkbox input { accent-color: var(--purple-500); margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.field-checkbox a { color: var(--purple-400); text-decoration: underline; }
.field-checkbox a:hover { color: var(--saffron); }

input[type="file"] {
  font-family: var(--font-mono); font-size: 13px;
}
input[type="file"]::-webkit-file-upload-button {
  background: var(--purple-soft);
  color: var(--purple-300);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  margin-right: 12px;
}

.form-submit {
  background: var(--purple-600);
  color: var(--text-strong);
  border: 1px solid var(--purple-500);
  padding: 18px 42px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 28px;
}
.form-submit:hover {
  background: var(--purple-700);
  box-shadow: 0 0 24px var(--purple-glow-strong);
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .candidature-form { padding: 24px; }
}

/* ============================================================
   PAGE MERCI
   ============================================================ */
.thanks {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deepest);
  text-align: center;
  padding: var(--gutter);
  position: relative;
  overflow: hidden;
}
.thanks::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(255, 85, 12, 0.12) 0%, transparent 50%);
  filter: blur(40px);
}
.thanks-content { max-width: 640px; position: relative; z-index: 1; }
.thanks-icon {
  width: 80px; height: 80px;
  background: var(--purple-soft);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 32px;
  position: relative;
}
.thanks-icon::before {
  content: ""; position: absolute; inset: -8px;
  border: 1px dashed var(--border-saffron);
  border-radius: 50%;
  animation: rotate-slow 20s linear infinite;
}
@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.thanks-icon svg { stroke: var(--saffron); }
.thanks h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  font-variation-settings: "wdth" 95, "opsz" 144;
}
.thanks h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--purple-400) 0%, var(--saffron) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.thanks p { font-size: 1.05rem; color: var(--text-soft); line-height: 1.65; margin-bottom: 32px; }
.thanks-actions {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

/* ============================================================
   NOUVEAUX COMPOSANTS — v3 (crédibilité + conversion + Maroc)
   ============================================================ */

/* ============================================================
   GRAPHE NEURONAL HERO (remplace l'orbe)
   ============================================================ */
.neural-graph {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 480px;
}
.neural-graph svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.35));
}
.neural-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 220px;
}
.neural-center .label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--saffron);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.neural-center .label-big {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(3rem, 7vw, 4.5rem);
  color: var(--text-strong);
  letter-spacing: -0.05em;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
  font-variation-settings: "wdth" 100, "opsz" 144;
}
.neural-center .label-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
  white-space: nowrap;
}

/* ============================================================
   PERSONAS — Pour qui ce DBA
   ============================================================ */
.personas {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.persona {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.persona:hover {
  border-color: var(--purple-500);
  transform: translateY(-4px);
  background: var(--bg-elevated);
}
.persona-icon-wrap {
  width: 48px; height: 48px;
  background: var(--purple-soft);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.persona-icon-wrap svg { stroke: var(--purple-400); }
.persona h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text-strong);
  margin-bottom: 14px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.persona p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  flex-grow: 1;
}
.persona-meta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.persona-meta-row {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.persona-meta-row strong {
  color: var(--saffron);
  font-weight: 600;
}

/* ============================================================
   TIMELINE PARCOURS
   ============================================================ */
.timeline {
  background: var(--bg-deepest);
  position: relative;
}
.timeline-track {
  margin-top: 64px;
  position: relative;
  padding: 32px 0;
}
.timeline-track::before {
  content: ""; position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple-500) 0%, var(--saffron) 100%);
  opacity: 0.6;
}
.timeline-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.timeline-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  transition: all 0.3s ease;
}
.timeline-item:hover {
  border-color: var(--purple-500);
  background: var(--bg-elevated);
}
/* ── Option A : timeline horizontale propre ──
   Une ligne de progression en haut, un point par carte posé sur la ligne,
   un connecteur vertical reliant le point à sa carte. Cartes alignées. */
.timeline-track { padding-top: 56px; }
.timeline-item { align-self: stretch; }
.timeline-line {
  position: absolute;
  left: 24px; right: 24px;
  top: 38px;
  height: 2px;
  background: linear-gradient(90deg, var(--purple-500) 0%, var(--purple-400) 50%, var(--saffron) 100%);
  opacity: 0.55;
  z-index: 0;
  border-radius: 2px;
}
/* point sur la ligne, au-dessus du centre de chaque carte */
.timeline-item::before {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  background: var(--saffron);
  border: 3px solid #15102A;
  border-radius: 50%;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(255, 85, 12, 0.12), 0 0 12px var(--saffron-glow);
  z-index: 2;
}
/* connecteur vertical point → carte */
.timeline-item::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 18px;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--saffron) 0%, transparent 100%);
  opacity: 0.5;
  z-index: 1;
}
.timeline-period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--saffron);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.timeline-period::before { content: "/ "; opacity: 0.6; }
.timeline-item h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-strong);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.timeline-item p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
@media (max-width: 900px) {
  .timeline-track { padding-top: 0; }
  .timeline-line { display: none; }
  .timeline-items { grid-template-columns: 1fr; gap: 12px; }
  .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { margin-top: 0; }
  .timeline-item::before { display: none; }
  .timeline-track::before { content: ""; position: absolute; left: 20px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--purple-500) 0%, var(--saffron) 100%); }
  .timeline-item { margin-left: 36px; }
  .timeline-item::after {
    content: ""; position: absolute;
    width: 12px; height: 12px;
    top: 28px; left: -42px;
    background: var(--saffron);
    border: 3px solid var(--bg-deepest);
    border-radius: 50%;
    transform: none;
    height: 12px;
  }
}

/* ============================================================
   OUTCOME — Soutenance & Carrière (section claire)
   ============================================================ */
.outcome {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 100%);
  color: #14101F;
  position: relative;
  overflow: hidden;
}
.outcome::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  filter: blur(60px);
}
.outcome .tag { color: var(--purple-600); }
.outcome .tag::before { color: var(--saffron-deep); }
.outcome .title { color: #14101F; }
.outcome .title em {
  background: linear-gradient(120deg, var(--purple-600) 0%, var(--saffron-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outcome .lede { color: #4A4360; }

.outcome-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.thesis-panel {
  background: white;
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 12px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(139, 92, 246, 0.15);
}
.thesis-panel::before {
  content: ""; position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--purple-600) 0%, var(--saffron-deep) 100%);
}
.thesis-panel h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: #14101F;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.thesis-panel .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron-deep);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.thesis-panel > p {
  font-size: 14px;
  color: #4A4360;
  line-height: 1.65;
}
.thesis-features {
  list-style: none;
  margin-top: 24px;
}
.thesis-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(139, 92, 246, 0.12);
  font-size: 14px;
  color: #4A4360;
  line-height: 1.55;
}
.thesis-features li:last-child { border-bottom: none; }
.thesis-features svg { flex-shrink: 0; stroke: var(--purple-600); margin-top: 2px; }
.thesis-features strong { color: #14101F; font-weight: 600; }

.outcome-careers h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: #14101F;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.outcome-careers > p.intro {
  font-size: 14px;
  color: #4A4360;
  margin-bottom: 28px;
  line-height: 1.6;
}
.careers-list { display: flex; flex-direction: column; gap: 12px; }
.career-item {
  background: white;
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}
.career-item:hover {
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: none;
}
.career-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--saffron-deep);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.career-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #14101F;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.career-arrow { display: none; }

@media (max-width: 900px) {
  .outcome-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   TÉMOIGNAGES / PROFILS
   ============================================================ */
.testimonials {
  background: var(--bg);
  position: relative;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.testi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}
.testi-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.testi-card::before {
  content: "\201C";
  font-family: Georgia, serif;
  position: absolute;
  top: 20px; right: 28px;
  font-size: 4rem;
  color: var(--purple-400);
  opacity: 0.2;
  line-height: 1;
}
.testi-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.testi-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--purple-500) 0%, var(--purple-700) 70%, var(--saffron-deep) 140%);
  border: 1px solid rgba(150, 112, 219, 0.4);
  box-shadow: 0 6px 16px -8px rgba(102, 51, 204, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-transform: uppercase;
}
.testi-meta-info {
  display: flex; flex-direction: column; gap: 2px;
}
.testi-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
.testi-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--saffron);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   FAQ — Accordéon
   ============================================================ */
.faq {
  background: var(--bg-deepest);
  position: relative;
}
.faq-list {
  margin-top: 56px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  transition: color 0.25s;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.faq-question:hover { color: var(--purple-400); }
.faq-question .faq-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: var(--purple-soft);
}
.faq-question .faq-icon svg {
  stroke: var(--purple-400);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-question .faq-icon {
  background: var(--purple-500);
  border-color: var(--purple-500);
}
.faq-item.open .faq-question .faq-icon svg {
  stroke: white;
  transform: rotate(45deg);
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-answer {
  max-height: 800px;
}
.faq-answer-inner {
  padding: 0 0 32px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}
.faq-answer-inner strong { color: var(--text); }
.faq-answer-inner a { color: var(--purple-400); text-decoration: underline; }

/* ============================================================
   CAMPUS CASABLANCA
   ============================================================ */
.campus {
  background: var(--bg);
  position: relative;
}
.campus-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.campus-image {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  border: 1px solid rgba(184, 167, 212, 0.18);
  /* Fallback gradient (visible si image absente) */
  background-color: #1a1428;
  background-image:
    radial-gradient(circle at 25% 70%, rgba(255, 85, 12, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(123, 94, 171, 0.45) 0%, transparent 55%),
    linear-gradient(155deg, #2D2540 0%, #14101F 100%);
}
.campus-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(160deg, rgba(20, 16, 31, 0.55) 0%, rgba(20, 16, 31, 0.15) 50%, rgba(20, 16, 31, 0.7) 100%),
    url('images/casablanca-bg.webp');
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) brightness(0.85) contrast(1.05);
}
/* Pattern décoratif si l'image ne charge pas du tout */
.campus-image::after {
  content: "Casablanca · 8 Route d'Azemmour";
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: white;
  background: rgba(11, 7, 22, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}
.campus-info {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.campus-info h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--text-strong);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.campus-info p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 24px;
}
.campus-info-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.campus-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.campus-info-row svg {
  flex-shrink: 0;
  stroke: var(--saffron);
  margin-top: 2px;
}
.campus-info-row-content { flex-grow: 1; }
.campus-info-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.campus-info-row-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.campus-info-row-value a { color: var(--text); transition: color 0.2s; }
.campus-info-row-value a:hover { color: var(--purple-400); }

.campus-map {
  margin-top: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6);
}
.campus-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: none;
}

@media (max-width: 900px) {
  .campus-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAYMENT STRIP (Maroc)
   ============================================================ */
.payment-strip {
  background: linear-gradient(135deg, rgba(255, 85, 12, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid var(--border-saffron);
  border-radius: 12px;
  padding: 28px 36px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.payment-strip-icon {
  width: 52px; height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border-saffron);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.payment-strip-icon svg { stroke: var(--saffron); }
.payment-strip-text h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-strong);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.payment-strip-text p {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.payment-strip-text p strong { color: var(--saffron); font-weight: 600; }
.payment-strip a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--saffron);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid var(--border-saffron);
  border-radius: 100px;
  transition: all 0.25s;
  white-space: nowrap;
  font-weight: 600;
}
.payment-strip a:hover {
  background: var(--saffron);
  color: var(--bg-deepest);
}
@media (max-width: 700px) {
  .payment-strip { grid-template-columns: 1fr; gap: 16px; text-align: center; padding: 24px; }
  .payment-strip-icon { margin: 0 auto; }
}

/* Subtiliser le module IDE (moins gimmick) */
.module-header { padding: 12px 20px; font-size: 10.5px; }
.module-dots span { width: 7px; height: 7px; opacity: 0.65; }

/* Bio doyenne */
.doyenne-bio {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--bg-card);
  border-left: 2px solid var(--saffron);
  border-radius: 0 8px 8px 0;
}
.doyenne-bio-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--saffron);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.doyenne-bio-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}
.doyenne-bio-text strong { color: var(--text); font-weight: 600; }

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v4 — 40 AMÉLIORATIONS DESIGN UI                       ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ============================================================
   GLOBAL — Body texture (grain noise + grid) — #8
   ============================================================ */
body::after {
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ============================================================
   SCROLL PROGRESS INDICATOR — #33
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; right: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--purple-500), var(--saffron));
  z-index: 999;
  transition: height 0.05s ease-out;
  box-shadow: -2px 0 12px var(--purple-glow);
}

/* ============================================================
   MINI BOUSSOLE / SECTION INDICATOR — #34
   ============================================================ */
.section-indicator {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}
.section-indicator-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.25);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.section-indicator-dot::before {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.section-indicator-dot:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}
.section-indicator-dot:hover {
  background: var(--purple-400);
  transform: scale(1.4);
}
.section-indicator-dot.active {
  background: var(--saffron);
  box-shadow: 0 0 12px var(--saffron-glow);
}
@media (max-width: 900px) { .section-indicator { display: none; } }

/* ============================================================
   CURSOR CUSTOM — DÉSACTIVÉ (problèmes d'accessibilité)
   ============================================================ */
.cursor-custom, .cursor-custom-dot { display: none !important; }

/* ============================================================
   HERO — PARTICULES, CONSTELLATIONS, VIGNETTE — #1, #2, #4
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}
/* Particules flottantes */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--purple-400);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px var(--purple-glow);
  animation: floatParticle 25s linear infinite;
}
.particle.saffron { background: var(--saffron); box-shadow: 0 0 6px var(--saffron-glow); }
.particle.cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.particle.tiny { width: 1.5px; height: 1.5px; }
@keyframes floatParticle {
  0%   { transform: translate(0, 100vh); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translate(40px, -10vh); opacity: 0; }
}

/* Constellation SVG */
.hero-constellation {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* Vignette aux bords */
.hero::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(139, 92, 246, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255, 85, 12, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 100%, rgba(124, 58, 237, 0.25) 0%, transparent 60%);
  filter: blur(40px);
  animation: meshShift 18s ease-in-out infinite alternate;
  z-index: 0;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 40%, var(--bg-void) 100%);
  opacity: 0.85;
}

/* ============================================================
   HUB DBA — GLOW PLUS PRONONCÉ — #3
   ============================================================ */
.neural-graph svg {
  filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.5)) drop-shadow(0 0 120px rgba(255, 85, 12, 0.15));
}
.neural-center .label-big {
  text-shadow:
    0 0 30px rgba(255, 255, 255, 0.6),
    0 0 60px rgba(255, 85, 12, 0.4),
    0 0 100px rgba(139, 92, 246, 0.3);
}

/* ============================================================
   PATTERN CIRCUITS PCB — #5
   ============================================================ */
.pcb-pattern {
  display: none !important;
}

/* ============================================================
   NUMÉROS DE SECTION GÉANTS WATERMARK — #6
   ============================================================ */
.section-num {
  position: absolute;
  top: 20px;
  right: clamp(20px, 4vw, 60px);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.85;
  color: var(--text-strong);
  opacity: 0.025;
  letter-spacing: -0.08em;
  pointer-events: none;
  z-index: 0;
  font-variation-settings: "wdth" 100, "opsz" 144;
  user-select: none;
}
section.light .section-num { color: #14101F; opacity: 0.04; }
section.outcome .section-num { color: #14101F; opacity: 0.05; right: auto; left: clamp(20px, 4vw, 60px); }

/* ============================================================
   LIGNES DIAGONALES ANIMÉES TRANSITIONS — #7
   ============================================================ */
.section-divider {
  position: relative;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}
.section-divider::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--saffron), transparent);
  animation: scanLine 8s ease-in-out infinite;
}
@keyframes scanLine {
  0%, 100% { left: -30%; }
  50% { left: 100%; }
}

/* ============================================================
   TYPOGRAPHIE — Underline ondulé saffran — #9
   ============================================================ */
.wavy {
  position: relative;
  display: inline;
  text-decoration: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cpath d='M0 3 Q15 0 30 3 T60 3' fill='none' stroke='%23FF550C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 60px 6px;
  padding-bottom: 8px;
}

/* ============================================================
   TYPOGRAPHIE — Variable font hover animation — #12
   ============================================================ */
.title, .module-title, .timeline-item h4 {
  transition: font-variation-settings 0.5s ease;
}

/* ============================================================
   CARDS À COINS COUPÉS + HOVER ACCESSIBLE — #13, #14
   ============================================================ */
.module {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  transition: background 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
/* Halo subtil aux coins coupés (purement décoratif, ne couvre PAS le contenu) */
.module::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, var(--purple-soft) 0%, transparent 30%),
    radial-gradient(circle at bottom left, var(--saffron-soft) 0%, transparent 30%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.module:hover::before { opacity: 1; }
.module:hover {
  transform: translateY(-6px);
  background: var(--bg-elevated);
  border-color: var(--purple-500);
  box-shadow: var(--shadow-purple);
}
.module > * { position: relative; z-index: 1; }

/* Persona — coins coupés + hover sobre */
.persona {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.persona::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, var(--saffron-soft) 0%, transparent 35%),
    radial-gradient(circle at bottom right, var(--purple-soft) 0%, transparent 35%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.persona:hover::before { opacity: 1; }
.persona:hover {
  background: var(--bg-elevated);
  border-color: var(--saffron);
  transform: translateY(-4px);
  box-shadow: var(--shadow-saffron);
}
.persona > * { position: relative; z-index: 1; }

/* Testimonials avec coin coupé (pas de hover envahissant) */
.testi-card {
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ============================================================
   OMBRES COLORÉES + INNER SHADOW — #16, #17
   ============================================================ */
.module:hover { box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(167, 139, 250, 0.1); }
.testi-card { box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.05); }
.testi-card:hover { box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(167, 139, 250, 0.15); }
.persona:hover { box-shadow: var(--shadow-saffron); }
.pricing-card { box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(255, 85, 12, 0.1); }
.timeline-item:hover { box-shadow: 0 12px 32px -12px rgba(139, 92, 246, 0.35); }
.career-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* ============================================================
   TIMELINE — COURBE EN S + NŒUDS SÉQUENTIELS + GRADIENT ANIMÉ — #18, #19, #20
   ============================================================ */
.timeline-track {
  position: relative;
}
.timeline-item .timeline-num {
  position: absolute;
  top: -18px;
  right: 16px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--purple-400);
  opacity: 0.3;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 100, "opsz" 144;
  z-index: 1;
}

/* ============================================================
   STATS — COMPTEUR ANIMÉ + SPARKLINES + GIGANTISME — #21, #22, #23
   ============================================================ */
.stat-num {
  display: inline-block;
}
.stat-num[data-target] {
  position: relative;
}
.stat-sparkline {
  margin-top: 14px;
  height: 24px;
  width: 80%;
  opacity: 0.4;
}
.stat-sparkline path {
  fill: none;
  stroke: var(--saffron);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s ease-out;
}
.stat.visible .stat-sparkline path {
  stroke-dashoffset: 0;
}

/* ============================================================
   SECTION CLAIRE — BORDURES ASYMÉTRIQUES + ÉCHOS + MARGES NOTES — #24, #25, #26
   ============================================================ */
.outcome {
  position: relative;
}
.outcome::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -10%;
  width: 400px;
  height: 400px;
  background:
    radial-gradient(circle, rgba(255, 85, 12, 0.06) 0%, transparent 70%),
    radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.margin-note {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
  line-height: 1.5;
  z-index: 0;
}
.margin-note.left { left: 20px; }
.margin-note.right { right: 20px; text-align: right; }
.margin-note::before { content: "/* "; opacity: 0.6; }
.margin-note::after { content: " */"; opacity: 0.6; }
section.outcome .margin-note { color: #14101F; opacity: 0.35; }
@media (max-width: 1200px) { .margin-note { display: none; } }
.margin-note { display: none; }

/* ============================================================
   COORDONNÉES DE SECTION + LÉGENDES ASCII — #31, #32
   ============================================================ */
.section-coord {
  position: absolute;
  top: 28px;
  left: var(--gutter);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  opacity: 0.5;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}
.section-coord::before {
  content: "[ ";
  color: var(--saffron);
  opacity: 0.7;
}
.section-coord::after {
  content: " ]";
  color: var(--saffron);
  opacity: 0.7;
}
section.outcome .section-coord { color: #14101F; opacity: 0.4; }

.fig-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  opacity: 0.45;
  text-transform: uppercase;
  pointer-events: none;
}
.fig-label::before {
  content: "// ";
  color: var(--saffron);
  opacity: 0.7;
}

/* ============================================================
   BOUTONS MAGNETIC + HOVER GLOW — #15
   ============================================================ */
.btn, .nav-cta {
  transition: transform 0.15s ease-out, box-shadow 0.3s ease, background 0.3s ease;
}

/* ============================================================
   ANIMATION TYPEWRITER HERO — #38
   ============================================================ */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--saffron);
  vertical-align: bottom;
  animation: typeBlink 0.8s steps(1) infinite;
  max-width: 100%;
}
@keyframes typeBlink {
  50% { border-right-color: transparent; }
}

/* ============================================================
   LOGO GLITCH RGB SPLIT — #39
   ============================================================ */
.glitch-on {
  animation: glitchRGB 0.3s linear;
}
@keyframes glitchRGB {
  0%, 100% {
    text-shadow: none;
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 0);
    filter: drop-shadow(2px 0 0 #FF0080) drop-shadow(-2px 0 0 #00E5FF);
  }
  40% {
    transform: translate(2px, 0);
    filter: drop-shadow(-2px 0 0 #FF0080) drop-shadow(2px 0 0 #00E5FF);
  }
  60% {
    transform: translate(0, -1px);
    filter: drop-shadow(0 -2px 0 #FF0080) drop-shadow(0 2px 0 #00E5FF);
  }
  80% {
    transform: translate(-1px, 1px);
    filter: drop-shadow(1px 0 0 #FF0080) drop-shadow(-1px 0 0 #00E5FF);
  }
}

/* ============================================================
   PULSATION SYNCHRONISÉE DES DOTS — #40
   ============================================================ */
.dot, .module-dots span, .timeline-item::before, .city::before {
  animation-name: syncPulse;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes syncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ============================================================
   STAGGER REVEAL DES LISTES — #28
   ============================================================ */
.module-list li,
.thesis-features li,
.pricing-perk,
.persona-meta-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.visible .module-list li,
.visible .thesis-features li,
.visible .pricing-perk,
.visible .persona-meta-row,
.module.visible .module-list li,
.thesis-panel.visible .thesis-features li {
  opacity: 1;
  transform: translateY(0);
}
.visible .module-list li:nth-child(1) { transition-delay: 0.08s; }
.visible .module-list li:nth-child(2) { transition-delay: 0.14s; }
.visible .module-list li:nth-child(3) { transition-delay: 0.20s; }
.visible .module-list li:nth-child(4) { transition-delay: 0.26s; }
.visible .module-list li:nth-child(5) { transition-delay: 0.32s; }
.visible .module-list li:nth-child(6) { transition-delay: 0.38s; }
.visible .module-list li:nth-child(7) { transition-delay: 0.44s; }

/* ============================================================
   HOVER RÉVÈLE INFO — Module outcome (badge en bas, pas overlay) — #30
   ============================================================ */
.module .module-reveal {
  margin: 0 32px 32px 32px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.module:hover .module-reveal { opacity: 1; }
.module-reveal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--saffron);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.module-reveal-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
  font-style: italic;
}

/* ============================================================
   ITALIC ALTERNATIF DANS LES TITRES — #10
   ============================================================ */
.title i, .hero-title i {
  font-style: italic;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--saffron);
}

/* ============================================================
   PARALLAX VISUAL HERO — #29
   ============================================================ */
.hero-visual {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ============================================================
   STATS GIGANTISME (alternative) — #23
   ============================================================ */
.stat-num {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

/* ============================================================
   ACCENT CYAN PONCTUEL (touches IA spécifiques) — #35
   ============================================================ */
.cyan-accent { color: var(--cyan); }
.dot-cyan {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  vertical-align: middle;
  margin-right: 6px;
}
/* Une mention "live IA" cyan dans le hero */
.hero-tag .live-tag {
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-right: 4px;
}

/* ============================================================
   MIX DE TAILLES DANS UN MÊME TITRE — #11
   ============================================================ */
.title-mix .small {
  font-size: 0.55em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
  color: var(--text-muted);
  font-weight: 500;
  font-family: var(--font-mono);
  margin-bottom: 16px;
}

/* ============================================================
   STATS — COMPOSANTS DÉTAILS
   ============================================================ */
.stat {
  position: relative;
}
.stat-num.counting::after {
  content: "_";
  color: var(--saffron);
  animation: blink 0.6s infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v6 — CONTEXTE AFRICAIN + VALUE PROP + ALTERNANCE      ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   ALTERNANCE GLOBALE DES FONDS
   Sombre par défaut, claires/violet en respiration
   ────────────────────────────────────────────────────────── */
section.section-light {
  background: linear-gradient(180deg, #F8F5FC 0%, #F0EAF8 100%);
  color: #1A1428;
  position: relative;
}
section.section-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(102, 51, 204, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 85, 12, 0.045) 0%, transparent 50%);
  pointer-events: none;
}
section.section-light > * { position: relative; z-index: 1; }
section.section-light .tag { color: #6E5A99; }
section.section-light .tag::before { color: var(--saffron); }
section.section-light .title { color: #160C30; }
section.section-light .title em {
  color: var(--purple-600);
  font-style: italic;
}
section.section-light .lede { color: #4A3F66; }
section.section-light .lede strong { color: #160C30; }
section.section-light .section-coord { color: #6E5A99; opacity: 0.5; }
section.section-light .section-num { color: #160C30; opacity: 0.04; }

section.section-violet {
  background: linear-gradient(180deg, #1F1638 0%, #15102A 100%);
  position: relative;
}
section.section-violet::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255, 85, 12, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
section.section-violet > * { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   BLOC 1 — CONTEXTE AFRICAIN
   ────────────────────────────────────────────────────────── */
.context-africain {
  padding: var(--section-y) var(--gutter);
  position: relative;
}

.context-quote {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding: 0 20px;
}
.context-quote .quote-mark {
  font-family: 'Georgia', serif;
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: 0.8;
  color: var(--saffron);
  opacity: 0.25;
  margin-bottom: -30px;
  font-weight: 700;
}
.context-quote blockquote {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.context-quote blockquote em {
  font-style: italic;
  font-family: 'Georgia', serif;
  font-weight: 400;
  color: var(--saffron);
  display: inline-block;
  margin-top: 8px;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: 56px;
}
.context-item {
  position: relative;
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(20, 16, 31, 0.6) 0%, rgba(20, 16, 31, 0.2) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.context-item:hover {
  border-color: var(--purple-500);
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(30, 22, 50, 0.7) 0%, rgba(20, 16, 31, 0.4) 100%);
}
.context-num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--saffron);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  opacity: 0.85;
  font-variation-settings: "wdth" 100, "opsz" 144;
}
.context-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.context-item p {
  color: var(--text-soft);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}
.context-item p strong {
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 900px) {
  .context-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   OVERRIDES POUR CONTEXTE AFRICAIN EN LIGHT MODE
   ────────────────────────────────────────────────────────── */
section.context-africain.section-light {
  background: #FFFFFF;
}
section.context-africain.section-light::before {
  background-image: none;
}
section.context-africain.section-light .context-quote blockquote {
  color: #14101F;
}
section.context-africain.section-light .context-item {
  background: var(--bg-card);
  border: 1px solid rgba(102, 51, 204, 0.2);
  box-shadow: 0 10px 30px rgba(20, 16, 31, 0.08);
}
section.context-africain.section-light .context-item:hover {
  background: var(--bg-elevated);
  border-color: var(--purple-400);
}
section.context-africain.section-light .context-item h3 {
  color: #FFFFFF;
}
section.context-africain.section-light .context-item p {
  color: rgba(255, 255, 255, 0.75);
}
section.context-africain.section-light .context-item p strong {
  color: #FFFFFF;
}

/* ──────────────────────────────────────────────────────────
   BLOC 2 — VALUE PROP (Section claire premium)
   ────────────────────────────────────────────────────────── */
.value-prop {
  padding: var(--section-y) var(--gutter);
  position: relative;
}
.vp-header {
  max-width: 820px;
  text-align: center;
  margin: 0 auto 80px;
}
.vp-header .tag { justify-content: center; }
.vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 1180px;
  margin: 0 auto;
}
.vp-card {
  background: #FFFFFF;
  border: 1px solid rgba(20, 16, 31, 0.08);
  border-radius: 16px;
  padding: 40px 32px;
  position: relative;
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  box-shadow: 0 1px 0 rgba(20, 16, 31, 0.04);
}
.vp-card:hover {
  transform: translateY(-6px);
  border-color: var(--purple-300);
  box-shadow:
    0 24px 48px -16px rgba(139, 92, 246, 0.18),
    0 0 0 1px var(--purple-300);
}
.vp-icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F5F0FF 0%, #FFF8EE 100%);
  border-radius: 14px;
  margin-bottom: 24px;
  color: var(--purple-600);
  transition: color 0.4s ease, background 0.4s ease;
}
.vp-icon svg { width: 28px; height: 28px; }
.vp-card:hover .vp-icon {
  color: var(--saffron-deep);
  background: linear-gradient(135deg, #FFF1DC 0%, #F5F0FF 100%);
}
.vp-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #14101F;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.vp-card p {
  color: #4A3F60;
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}
.vp-card p strong { color: #14101F; font-weight: 600; }
.vp-card p em {
  font-style: italic;
  font-family: 'Georgia', serif;
  color: var(--saffron-deep);
  font-weight: 500;
}
@media (max-width: 900px) {
  .vp-grid { grid-template-columns: 1fr; }
  .vp-card { padding: 32px 24px; }
}

/* ──────────────────────────────────────────────────────────
   DOYENNE — refonte humaine premium
   ────────────────────────────────────────────────────────── */
.doyenne-portrait-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.doyenne-portrait {
  aspect-ratio: 4/5;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 85, 12, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(123, 94, 171, 0.5) 0%, transparent 60%),
    linear-gradient(155deg, #2D2540 0%, #1A1428 100%);
  background-size: cover;
  background-position: center top;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 167, 212, 0.12);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.doyenne-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 7, 22, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Monogramme élégant en fallback */
.doyenne-monogram {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--saffron-bright);
  text-align: center;
  padding-bottom: 40px;
}
.dm-letters {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--saffron-bright) 0%, var(--saffron-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dm-amp {
  font-style: normal;
  font-size: 0.6em;
  vertical-align: middle;
  color: var(--saffron);
  -webkit-text-fill-color: var(--saffron);
  padding: 0 0.1em;
  opacity: 0.7;
}
.dm-line {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--saffron), transparent);
}
.dm-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, 0.55);
}
.portrait-overlay {
  position: absolute;
  bottom: 16px; left: 16px;
  z-index: 2;
}
.portrait-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 6px 10px;
  background: rgba(11, 7, 22, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.doyenne-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
}
.doyenne-caption-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.doyenne-caption-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.doyenne-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.doyenne-paragraphs p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0;
}
.doyenne-paragraphs p:first-child::first-letter {
  font-family: 'Georgia', serif;
  font-size: 3.2rem;
  font-weight: 400;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 -2px;
  color: var(--saffron);
}
/* pas de lettrine sur la citation (sinon le « apparaît en double) */
.doyenne-quote::first-letter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  color: inherit;
}
.doyenne-paragraphs strong { color: var(--text); font-weight: 600; }
.doyenne-paragraphs em {
  font-style: italic;
  font-family: 'Georgia', serif;
  color: var(--saffron-bright);
  font-weight: 400;
}

/* ──────────────────────────────────────────────────────────
   FAQ EN FOND CLAIR — Correction lisibilité (vraies classes)
   ────────────────────────────────────────────────────────── */
section.faq.section-light .faq-item {
  border-bottom-color: rgba(20, 16, 31, 0.1);
}
section.faq.section-light .faq-item:first-child {
  border-top-color: rgba(20, 16, 31, 0.1);
}
section.faq.section-light .faq-question {
  color: #14101F;
}
section.faq.section-light .faq-question:hover {
  color: var(--purple-700);
}
section.faq.section-light .faq-question .faq-icon {
  border-color: rgba(20, 16, 31, 0.15);
  background: rgba(123, 94, 171, 0.08);
}
section.faq.section-light .faq-question .faq-icon svg {
  stroke: var(--purple-600);
}
section.faq.section-light .faq-item.open .faq-question .faq-icon {
  background: var(--purple-600);
  border-color: var(--purple-600);
}
section.faq.section-light .faq-item.open .faq-question .faq-icon svg {
  stroke: #FFFFFF;
}
section.faq.section-light .faq-answer-inner {
  color: #4A3F60;
}
section.faq.section-light .faq-answer-inner strong {
  color: #14101F;
}
section.faq.section-light .faq-answer-inner em {
  color: var(--saffron-deep);
}
section.faq.section-light .tag { color: #5A4B7A; }
section.faq.section-light .tag::before { color: var(--saffron-deep); }

/* Témoignages en violet — ajustements */
section.testimonials.section-violet .testi-card {
  background: rgba(20, 16, 38, 0.5);
  border-color: rgba(167, 139, 250, 0.18);
  backdrop-filter: blur(8px);
}

/* ──────────────────────────────────────────────────────────
   MOBILE MENU OVERLAY (avec X dédié)
   ────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(5, 3, 20, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 80px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu-close {
  position: absolute;
  top: 22px; right: var(--gutter);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  z-index: 2;
}
.mobile-menu-close:hover {
  background: var(--purple-soft);
  border-color: var(--saffron);
  color: var(--saffron);
  transform: rotate(90deg);
}
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--text-soft);
  letter-spacing: -0.02em;
  text-transform: capitalize;
  padding: 8px 0;
  transition: color 0.2s ease, padding-left 0.25s ease;
  position: relative;
  text-decoration: none;
}
.mobile-menu a::before {
  content: "/";
  color: var(--saffron);
  margin-right: 14px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-menu a:hover,
.mobile-menu a:active {
  color: var(--text-strong);
  padding-left: 8px;
}
.mobile-menu a:hover::before { opacity: 1; }
.mobile-menu-cta {
  margin-top: 24px;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  color: var(--text-strong) !important;
  background: var(--purple-600);
  border: 1px solid var(--purple-500);
  border-radius: 6px;
  padding: 16px 28px !important;
  width: fit-content;
}
.mobile-menu-cta::before { display: none !important; }
.mobile-menu-cta:hover { background: var(--purple-700); padding-left: 28px !important; }
.mobile-menu-contact {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu-contact a {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.02em;
  padding: 2px 0;
}
.mobile-menu-contact a::before { display: none !important; }
.mobile-menu-contact a:hover { color: var(--saffron) !important; padding-left: 0 !important; }

body.menu-open { overflow: hidden; }

/* Burger transformation en X */
.nav-burger { position: relative; z-index: 130; }
.nav-burger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--saffron); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--saffron); }

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v8 — HUMANISATION : texture papier, photos, éditorial ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   TEXTURE PAPIER GLOBALE — Subtile, façon papier mat académique
   ────────────────────────────────────────────────────────── */
body {
  position: relative;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='paper'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23paper)'/%3E%3C/svg%3E");
}
/* Sur sections claires, le grain est en chaud sépia */
section.section-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='paper2'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23paper2)'/%3E%3C/svg%3E");
}

/* ──────────────────────────────────────────────────────────
   BACKGROUNDS HUMAINS — Photos en filigrane sur sections clés
   ────────────────────────────────────────────────────────── */

/* Hero : silhouette dirigeant pensif, très atténuée */
.hero {
  position: relative;
}
.hero .human-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(115deg, rgba(11, 7, 22, 0.92) 0%, rgba(11, 7, 22, 0.78) 50%, rgba(11, 7, 22, 0.96) 100%),
    url("images/ai-data-bg.svg");
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(0.7) saturate(0.6);
  pointer-events: none;
}

/* Contexte africain : skyline / vue panoramique */
.context-africain {
  position: relative;
}
.context-africain .human-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(11, 7, 22, 0.92) 0%, rgba(11, 7, 22, 0.85) 50%, rgba(11, 7, 22, 0.95) 100%),
    url("images/ai-neural-bg.svg");
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) hue-rotate(-5deg);
  pointer-events: none;
}
.context-africain > .container { position: relative; z-index: 1; }

/* Value-prop (claire) : texture papier d'archive plus marquée + filigrane */
.value-prop.section-light {
  background:
    radial-gradient(circle at 25% 20%, rgba(123, 94, 171, 0.04) 0%, transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(255, 85, 12, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, #F8F5FC 0%, #F0EAF8 100%);
}

/* Témoignages (violet) : photo de réunion humaine en très atténué */
.testimonials.section-violet {
  position: relative;
}
.testimonials.section-violet .human-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(22, 12, 48, 0.74) 0%, rgba(40, 24, 82, 0.58) 50%, rgba(22, 12, 48, 0.78) 100%),
    url("images/ai-data-bg.svg");
  background-size: cover;
  background-position: center;
  filter: saturate(1) brightness(1.5);
  pointer-events: none;
}
.testimonials.section-violet > .container { position: relative; z-index: 1; }

/* Doyenne (violet) : ajout texture artistique en arrière-plan */
.doyenne.section-violet {
  position: relative;
}
.doyenne.section-violet .human-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(115deg, rgba(22, 12, 48, 0.78) 0%, rgba(40, 24, 82, 0.6) 100%),
    url("images/ai-data-bg.svg");
  background-size: cover;
  background-position: center;
  filter: saturate(1) brightness(1.5);
  pointer-events: none;
}
.doyenne.section-violet > .container { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   DÉTAILS ÉDITORIAUX — Filets ornementaux, chiffres romains
   ────────────────────────────────────────────────────────── */

/* Filets ornementaux sous certains titres */
.title.ornament-below::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin: 24px 0 0;
  background: linear-gradient(90deg, var(--saffron) 0%, transparent 100%);
}

/* Petits motifs entre éléments — fleur ornementale */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 48px 0;
  color: var(--saffron);
  opacity: 0.55;
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.divider-ornament .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -10px 0 0 currentColor, 10px 0 0 currentColor;
  animation: none;
}

/* Cohorte stamp — sceau académique discret */
.cohorte-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 88px; height: 88px;
  border: 1.5px solid var(--saffron);
  border-radius: 50%;
  color: var(--saffron);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  opacity: 0.75;
  transform: rotate(-8deg);
  position: relative;
}
.cohorte-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
.cohorte-stamp .stamp-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 2px 0;
}

/* Watermarks géants — encore plus invisibles maintenant */
.section-num {
  opacity: 0.008 !important;
}
section.section-light .section-num {
  opacity: 0.03 !important;
}

/* Section coords — plus discrètes */
.section-coord {
  opacity: 0.4 !important;
}

/* ──────────────────────────────────────────────────────────
   COHORTE STAMP — Wrapper centré
   ────────────────────────────────────────────────────────── */
.cta-stamp-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

/* ──────────────────────────────────────────────────────────
   RÉDUIRE PARTICULES (encore plus subtiles)
   ────────────────────────────────────────────────────────── */
.particle {
  opacity: 0 !important;
  display: none;
}
/* Garde seulement 3 particules très lentes et discrètes */
.particle:nth-child(1),
.particle:nth-child(3),
.particle:nth-child(5) {
  display: block;
  animation-duration: 55s !important;
  opacity: 0.3 !important;
}

/* Constellation hero : encore plus subtile */
.hero-constellation { opacity: 0.18 !important; }

/* Marquee — ralentir fortement (presque statique) */
.he-marquee-track { animation-duration: 80s !important; }

/* Vignette hero plus douce */
.hero::before { opacity: 0.65 !important; }

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  HERO ÉDITORIAL V2 — Crème premium magazine            ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

.hero-editorial-v2 {
  /* Override le hero dark */
  min-height: auto;
  background: linear-gradient(180deg, #FAF6EE 0%, #F4EDDC 60%, #EFE6D2 100%);
  color: #1A1428;
  padding: 130px var(--gutter) 0;
  position: relative;
  overflow: hidden;
}
/* Désactiver tous les éléments dark du hero */
.hero-editorial-v2 .human-bg,
.hero-editorial-v2 .hero-particles,
.hero-editorial-v2 .hero-constellation,
.hero-editorial-v2 .hero-vignette,
.hero-editorial-v2::before,
.hero-editorial-v2::after { display: none !important; }

/* Texture papier subtile */
.hero-editorial-v2::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.28 0 0 0 0 0.15 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E");
}

.hero-edv2-grid {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-bottom: 80px;
}

/* ────────── COLONNE TEXTE ────────── */
.hero-edv2-text { position: relative; }

.hero-edv2-edition {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.edv2-edition-mark {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--saffron-deep);
  font-weight: 400;
}
.edv2-edition-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5A4B7A;
  position: relative;
  padding-left: 18px;
}
.edv2-edition-text::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 1px;
  background: var(--saffron-deep);
}

.hero-edv2-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #14101F;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem);
  font-variation-settings: "wdth" 95, "opsz" 144;
}
.hero-edv2-title em {
  font-style: italic;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  color: var(--saffron-deep);
  letter-spacing: -0.02em;
}

.hero-edv2-lead {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  max-width: 540px;
}
.edv2-lead-rule {
  flex: 0 0 32px;
  height: 2px;
  background: var(--saffron-deep);
  margin-top: 12px;
}
.hero-edv2-lead p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  color: #14101F;
  letter-spacing: -0.015em;
  margin: 0;
}

.hero-edv2-sub {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: #4A3F60;
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  max-width: 540px;
}
.hero-edv2-sub strong {
  color: #14101F;
  font-weight: 600;
}

.hero-edv2-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.btn-edv2-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: #14101F;
  color: #FAF6EE;
  padding: 16px 26px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.2s ease, gap 0.3s ease;
}
.btn-edv2-primary:hover {
  background: var(--purple-700);
  gap: 18px;
}
.btn-edv2-primary svg { transition: transform 0.3s ease; }
.btn-edv2-primary:hover svg { transform: translateX(2px); }
.btn-edv2-ghost {
  display: inline-flex; align-items: center;
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #14101F;
  border: 1px solid rgba(20, 16, 31, 0.25);
  border-radius: 2px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-edv2-ghost:hover {
  border-color: var(--saffron-deep);
  background: rgba(255, 85, 12, 0.08);
}

.hero-edv2-signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 16, 31, 0.1);
  max-width: 360px;
}
.edv2-sig-name {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 14px;
  color: #14101F;
  font-weight: 400;
}
.edv2-sig-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #847C92;
  text-transform: uppercase;
}

/* ────────── COLONNE VISUEL — Portrait + sceau ────────── */
.hero-edv2-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edv2-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4/5;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(20, 16, 31, 0.35),
    0 0 0 1px rgba(20, 16, 31, 0.08);
}
.edv2-portrait {
  position: absolute;
  inset: 0;
  background-color: #C4A574;
  background-image:
    linear-gradient(135deg, rgba(178, 130, 70, 0.4) 0%, rgba(80, 55, 90, 0.6) 50%, rgba(40, 28, 50, 0.85) 100%),
    url("images/ai-data-bg.svg");
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(0.4) sepia(0.2) contrast(1.05) brightness(0.95);
}
/* Pattern décoratif si image ne charge pas */
.edv2-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 85, 12, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(123, 94, 171, 0.3) 0%, transparent 50%);
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.edv2-portrait-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(20, 16, 31, 0.55) 100%),
    linear-gradient(135deg, rgba(123, 94, 171, 0.1) 0%, transparent 60%);
}

/* Sceau cohorte sur la photo */
.edv2-stamp {
  position: absolute;
  top: 20px; right: 20px;
  width: 92px; height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--saffron-bright);
  border-radius: 50%;
  color: var(--saffron-bright);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-8deg);
  background: rgba(20, 16, 31, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.edv2-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
.edv2-stamp-year {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 2px 0;
  color: var(--saffron-bright);
}

/* Caption "vu de Casablanca" en bas de la photo */
.edv2-caption {
  position: absolute;
  bottom: 20px; left: 20px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.edv2-caption-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 235, 0.7);
}
.edv2-caption-place {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 18px;
  color: #FAF6EE;
  font-weight: 400;
}

/* ────────── BANDEAU META EN BAS ────────── */
.hero-edv2-meta {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #EFE6D2 0%, #E8DCC0 100%);
  border-top: 1px solid rgba(20, 16, 31, 0.08);
  border-bottom: 1px solid rgba(20, 16, 31, 0.08);
  padding: 32px var(--gutter);
}
.edv2-meta-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  position: relative;
}
.edv2-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.edv2-meta-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: clamp(-1.5rem, -1.5vw, -0.75rem);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: rgba(20, 16, 31, 0.12);
}
.edv2-meta-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #847C92;
  margin-bottom: 4px;
}
.edv2-meta-key::before {
  content: "/ ";
  color: var(--saffron-deep);
}
.edv2-meta-val {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  color: #14101F;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 100, "opsz" 96;
  white-space: nowrap;
}
.edv2-meta-sub {
  font-size: 11px;
  color: #4A3F60;
  white-space: nowrap;
}
.edv2-meta-sep { display: none; }

/* ────────── NAVBAR SUR FOND CLAIR (override) ────────── */
.hero-editorial-v2 + .trust-bar { background: var(--bg-deepest); }

/* Quand on est sur le hero clair, la nav doit être adaptée */
.nav:not(.scrolled) {
  background: rgba(250, 246, 235, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(20, 16, 31, 0.08);
}
.nav:not(.scrolled) .nav-logo-estiam {
  filter: invert(1) brightness(0.18);
}
.nav:not(.scrolled) .nav-logos img.paris-logo {
  filter: none;
}
.nav:not(.scrolled) .nav-links a {
  color: #4A3F60;
}
.nav:not(.scrolled) .nav-links a:hover {
  color: #14101F;
}
.nav:not(.scrolled) .nav-links a::before {
  color: rgba(20, 16, 31, 0.4);
}
.nav:not(.scrolled) .nav-links a:hover::before {
  color: var(--saffron-deep);
}
.nav:not(.scrolled) .nav-burger span {
  background: #14101F;
}
.nav:not(.scrolled) .nav-cta {
  background: #14101F;
  border-color: #14101F;
  color: #FAF6EE;
}
.nav:not(.scrolled) .nav-cta:hover {
  background: var(--purple-700);
  border-color: var(--purple-700);
}

/* ────────── RESPONSIVE ────────── */
@media (max-width: 980px) {
  .hero-edv2-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }
  .hero-edv2-visual { order: -1; }
  .edv2-portrait-frame { max-width: 380px; }
  .edv2-meta-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .edv2-meta-sep { display: none; }
  .hero-edv2-signature { max-width: none; }
}
@media (max-width: 560px) {
  .hero-editorial-v2 { padding-top: 100px; }
  .edv2-meta-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-edv2-meta { padding: 24px var(--gutter); }
  .hero-edv2-cta { flex-direction: column; align-items: stretch; }
  .btn-edv2-primary, .btn-edv2-ghost { justify-content: center; }
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  HERO IMMERSIVE — Plein écran centré, photo background ║
   ║  + logos accréditation intégrés, couleurs riches       ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

.hero-immersive {
  /* Override TOUT le hero précédent */
  min-height: 100vh;
  background: #2A1F40; /* Violet aubergine profond comme fallback */
  color: #FAF6EE;
  padding: 120px clamp(1.5rem, 4vw, 3rem) 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Désactiver tout ce qui pourrait interférer du hero précédent */
.hero-immersive .human-bg,
.hero-immersive .hero-particles,
.hero-immersive .hero-constellation,
.hero-immersive .hero-vignette,
.hero-immersive .hero-edv2-grid,
.hero-immersive .hero-edv2-meta { display: none !important; }
.hero-immersive::before,
.hero-immersive::after { display: none !important; }

/* ────────── BACKGROUND IMAGE PLEIN ÉCRAN ────────── */
.hi-bg-image {
  position: absolute;
  inset: 0;
  background-color: #160C30;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(60, 35, 120, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #1B1038 0%, #130A2A 100%);
  z-index: 0;
}
.hi-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* fallback statique uniquement si l'utilisateur refuse les animations */
  .hi-bg-canvas { display: none; }
  .hi-bg-image {
    background-image:
      url("images/ai-neural-bg.svg"),
      radial-gradient(ellipse 90% 70% at 50% 30%, rgba(60, 35, 120, 0.55) 0%, transparent 70%),
      linear-gradient(180deg, #1B1038 0%, #130A2A 100%);
    background-size: cover;
    background-position: center;
  }
}
.hi-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 12, 48, 0.6) 0%, rgba(40, 24, 82, 0.42) 35%, rgba(22, 12, 48, 0.62) 70%, rgba(15, 8, 34, 0.82) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(102, 51, 204, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(255, 85, 12, 0.12) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
}
.hi-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(10, 5, 24, 0.88) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ────────── COINS — Edition mark + Sceau ────────── */
.hi-corner-left {
  position: absolute;
  top: 100px; left: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 5;
}
.hi-corner-num {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--saffron-bright);
}
.hi-corner-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(250, 246, 235, 0.65);
  position: relative;
  padding-left: 18px;
}
.hi-corner-text::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 1px;
  background: var(--saffron-bright);
}

.hi-corner-right {
  position: absolute;
  top: 100px; right: clamp(1.5rem, 4vw, 3rem);
  z-index: 5;
}
.hi-stamp {
  width: 88px; height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--saffron-bright);
  border-radius: 50%;
  color: var(--saffron-bright);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-8deg);
  background: rgba(20, 14, 35, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.hi-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
.hi-stamp-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 2px 0;
}

/* ────────── CONTENU CENTRÉ ────────── */
.hi-content {
  position: relative;
  z-index: 4;
  max-width: 920px;
  margin: auto;
  text-align: center;
  padding: 20px 0 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hi-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--saffron-bright);
}
.hi-eyebrow-line {
  flex: 0 0 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--saffron-bright), transparent);
}

.hi-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #FAF6EE;
  margin: 0 0 36px;
  font-variation-settings: "wdth" 95, "opsz" 144;
}
.hi-title em {
  font-style: italic;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  background: linear-gradient(120deg, var(--purple-300) 0%, var(--purple-400) 45%, var(--saffron) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.02em;
}
.hi-title-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 35px);
  letter-spacing: -0.02em;
  color: #FAF6EE;
  white-space: nowrap;
  font-variation-settings: "wdth" 95, "opsz" 144;
}
@media (min-width: 768px) {
  .hi-title-sub { margin-top: 12px; }
}

.hi-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: #F0EBE0;
  margin: 0 auto 28px;
  max-width: 600px;
  letter-spacing: -0.015em;
}

.hi-sub {
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.85;
  color: rgba(240, 235, 224, 0.72);
  margin: 0 auto 40px;
  max-width: 560px;
}
.hi-sub strong {
  color: #FAF6EE;
  font-weight: 600;
}

.hi-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hi-btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
  color: #FFFFFF;
  padding: 17px 30px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 6px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), gap 0.3s ease, box-shadow 0.4s ease;
  box-shadow: 0 12px 32px -10px rgba(102, 51, 204, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hi-btn-primary:hover {
  transform: translateY(-2px);
  gap: 18px;
  box-shadow: 0 18px 42px -10px rgba(122, 71, 209, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hi-btn-primary svg { transition: transform 0.3s ease; }
.hi-btn-primary:hover svg { transform: translateX(3px); }

.hi-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 17px 28px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #FAF6EE;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hi-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* ────────── META INLINE ────────── */
.hi-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 20px 32px;
  background: rgba(20, 14, 35, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 auto;
}
.hi-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.hi-meta-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #FAF6EE;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hi-meta-key {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--saffron-bright);
}
.hi-meta-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
}

/* ────────── LOGOS ACCRÉDITATION EN BAS DU HERO ────────── */
.hi-accreditations {
  position: relative;
  z-index: 4;
  padding: 32px 0 16px;
  margin-top: auto;
}
.hi-accred-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(250, 246, 235, 0.55);
}
.hi-accred-line {
  flex: 0 0 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 85, 12, 0.5), transparent);
}
.hi-accred-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 60px);
}
.hi-accred-logos img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1) brightness(0.85);
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
.hi-accred-logos img:hover {
  opacity: 0.95;
  transform: scale(1.05);
  filter: brightness(0) invert(1) brightness(1);
}
.hi-amba-placeholder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  opacity: 0.55;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.hi-amba-placeholder:hover {
  opacity: 0.95;
  border-color: rgba(255, 255, 255, 0.5);
}
.hi-amba-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}
.hi-amba-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ────────── NAVBAR ADAPTÉE — Sombre par défaut sur ce hero ────────── */
.nav:not(.scrolled) {
  background: rgba(20, 14, 35, 0.45);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav:not(.scrolled) .nav-logo-estiam {
  filter: none;
}
.nav:not(.scrolled) .nav-logos img.paris-logo {
  filter: brightness(0) invert(1) brightness(0.95);
}
.nav:not(.scrolled) .nav-links a {
  color: rgba(250, 246, 235, 0.75);
}
.nav:not(.scrolled) .nav-links a:hover {
  color: #FAF6EE;
}
.nav:not(.scrolled) .nav-links a::before {
  color: rgba(255, 255, 255, 0.35);
}
.nav:not(.scrolled) .nav-links a:hover::before {
  color: var(--saffron-bright);
}
.nav:not(.scrolled) .nav-burger span { background: #FAF6EE; }
.nav:not(.scrolled) .nav-cta {
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
  border-color: var(--purple-500);
  color: #FFFFFF;
  box-shadow: 0 8px 22px -10px rgba(102, 51, 204, 0.6);
}
.nav:not(.scrolled) .nav-cta:hover {
  background: linear-gradient(135deg, var(--purple-400) 0%, var(--purple-600) 100%);
  border-color: var(--purple-400);
}

/* ────────── RESPONSIVE ────────── */
@media (max-width: 900px) {
  .hi-corner-left { top: 90px; }
  .hi-corner-right { top: 90px; }
  .hi-stamp { width: 72px; height: 72px; font-size: 7px; }
  .hi-stamp-year { font-size: 1.2rem; }
  .hi-meta { padding: 16px 20px; gap: 18px; }
  .hi-meta-sep { display: none; }
  .hi-corner-text { display: none; }
}
@media (max-width: 600px) {
  .hero-immersive { padding-top: 100px; }
  .hi-corner-right { top: 80px; right: 16px; }
  .hi-stamp { width: 60px; height: 60px; font-size: 6.5px; }
  .hi-stamp-year { font-size: 1rem; }
  .hi-content { padding: 60px 0 40px; }
  .hi-cta { flex-direction: column; }
  .hi-btn-primary, .hi-btn-ghost { justify-content: center; }
  .hi-accred-logos { gap: 20px; }
  .hi-accred-logos img { height: 22px; }
  .hi-eyebrow { font-size: 9px; gap: 10px; }
  .hi-eyebrow-line { flex: 0 0 24px; }
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v9 — POLICE EM UNIFIÉE + HUMANISATION FINALE         ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   TOUS LES TITRES <em> EN ITALIQUE GEORGIA OCRE (COHÉRENT)
   Force le retrait de tous les gradients criards
   ────────────────────────────────────────────────────────── */
.title em,
.hero-edv2-title em,
section .title em,
.programme .title em,
.timeline .title em,
.outcome .title em,
.studytour .title em,
.testimonials .title em,
.admission .title em,
.diploma .title em,
.process .title em,
.faq .title em,
.campus .title em,
.cta-final .title em,
.manifeste em,
h2.title em {
  background: none !important;
  -webkit-text-fill-color: var(--purple-400) !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: var(--purple-400) !important;
  font-style: italic !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
/* Sur fond clair, violet ESTIAM profond */
section.section-light .title em,
section.outcome .title em,
section.faq.section-light .title em,
section.value-prop.section-light .title em {
  color: var(--purple-600) !important;
  -webkit-text-fill-color: var(--purple-600) !important;
}

/* ──────────────────────────────────────────────────────────
   SUPPRIMER LES MARQUEURS TECH RÉSIDUELS
   ────────────────────────────────────────────────────────── */

/* Coordonnées section discrètes (au lieu de visibles) */
.section-coord {
  display: none !important;
}

/* Watermarks géants enlevés complètement */
.section-num {
  display: none !important;
}

/* Mini boussole sur le côté droit — retirée (vestige tech) */
.section-indicator,
.section-indicator-dot {
  display: none !important;
}

/* Headers terminal-style programme — adoucis */
.module-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
.module-header-path {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}
.module-header-path::before { content: ""; }
.module-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-muted) !important;
  opacity: 0.55;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────
   TIMELINE — chiffres dans la card (pas flottants)
   ────────────────────────────────────────────────────────── */
.timeline-item .timeline-num {
  position: static !important;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 2.4rem !important;
  line-height: 1;
  color: var(--saffron-deep) !important;
  opacity: 0.85 !important;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 100, "opsz" 144;
}

/* ──────────────────────────────────────────────────────────
   TÉMOIGNAGES PLUS HUMAINS — avatars en monogramme élégant
   ────────────────────────────────────────────────────────── */
.testi-avatar {
  position: relative;
  overflow: hidden;
}
.testi-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22) 0%, transparent 48%);
}
.testi-avatar > * { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   SECTION CAMPUS — Le label sur photo plus discret
   ────────────────────────────────────────────────────────── */
.campus-image::after {
  font-family: 'Georgia', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   CTA primaire — Bouton plus chaleureux/humain
   ────────────────────────────────────────────────────────── */
.btn.btn-primary:not(.hi-btn-primary) {
  background: var(--purple-600);
  border: 1px solid var(--purple-500);
}
.btn.btn-primary:not(.hi-btn-primary):hover {
  background: var(--purple-700);
}

/* ──────────────────────────────────────────────────────────
   LOGO AMBA SVG — dans le hero (couleur blanche atténuée)
   ────────────────────────────────────────────────────────── */
.hi-amba-logo {
  height: 42px !important;
  width: auto;
  color: #FAF6EE;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hi-amba-logo:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

/* Logo AMBA dans la grille accréditations (cohérence taille) */
.acc-cell img.acc-amba {
  max-height: 38px;
  color: #000;
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v10 — CHARTE ESTIAM : photo doyenne + sections        ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   DOYENNE — Photo visible, taille modérée
   ────────────────────────────────────────────────────────── */
.doyenne-portrait-wrap {
  max-width: 360px;          /* taille modérée (pas trop grande) */
  margin: 0 auto;
  padding: 20px;
}
.doyenne-portrait {
  aspect-ratio: 4/5 !important;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(150, 112, 219, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Liseré dégradé premium (cadre fin violet → orange) */
.doyenne-portrait-wrap::before,
.doyenne-portrait-wrap::after {
  z-index: 4;
}
.doyenne-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;             /* au-dessus du monogramme fallback */
  filter: grayscale(0.12) contrast(1.04);
  transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.doyenne-portrait:hover .doyenne-photo {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.03);
}
/* Le monogramme reste DERRIÈRE comme fallback si la photo ne charge pas */
.doyenne-monogram { z-index: 1 !important; }
/* Léger dégradé bas pour lisibilité du badge */
.doyenne-portrait .portrait-overlay { z-index: 3; }
.doyenne-portrait::after { z-index: 2; }

/* ──────────────────────────────────────────────────────────
   SECTION VIOLET ESTIAM VIF (#6633CC) — mise en avant
   ────────────────────────────────────────────────────────── */
section.section-estiam {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(122, 71, 209, 0.35) 0%, transparent 60%),
    linear-gradient(165deg, #6633CC 0%, #5429A8 55%, #421F85 100%);
  position: relative;
  color: #FBFAFF;
}
section.section-estiam::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 80%, rgba(255, 85, 12, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
  pointer-events: none;
}
section.section-estiam > * { position: relative; z-index: 1; }
section.section-estiam .title { color: #FFFFFF; }
section.section-estiam .title em {
  color: #FFD9C2 !important;
  -webkit-text-fill-color: #FFD9C2 !important;
}
section.section-estiam .lede,
section.section-estiam .module-desc,
section.section-estiam p { color: rgba(251, 250, 255, 0.85); }
section.section-estiam .tag { color: rgba(255, 255, 255, 0.85); }
section.section-estiam .tag::before { color: var(--saffron-bright); }
section.section-estiam .module {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}
section.section-estiam .module:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
section.section-estiam .module-title { color: #FFFFFF; }
section.section-estiam .module-list li { color: rgba(251, 250, 255, 0.82); }
section.section-estiam .module-num,
section.section-estiam .module-header-path { color: rgba(255, 255, 255, 0.6) !important; }
section.section-estiam .module-tag {
  background: rgba(255, 85, 12, 0.2);
  color: #FFD9C2;
  border-color: rgba(255, 85, 12, 0.4);
}
section.section-estiam .module-outcome-label { color: var(--saffron-bright) !important; }
section.section-estiam .module-outcome-text { color: rgba(251, 250, 255, 0.8); }

/* ──────────────────────────────────────────────────────────
   DIPLOMA EN SECTION CLAIRE — ajustements
   ────────────────────────────────────────────────────────── */
section.diploma.section-light .diploma-card {
  background: #FFFFFF;
  border-color: rgba(102, 51, 204, 0.12);
}
section.diploma.section-light .diploma-card h3,
section.diploma.section-light .diploma-text strong { color: #160C30; }
section.diploma.section-light .diploma-text,
section.diploma.section-light .diploma-text p { color: #4A3F66; }
section.diploma.section-light .diploma-badge {
  background: rgba(102, 51, 204, 0.1);
  color: var(--purple-700);
  border-color: rgba(102, 51, 204, 0.25);
}
section.diploma.section-light .accreditations-title { color: #6E6488; }
/* Logos accréditation sur fond clair → version sombre */
section.diploma.section-light .acc-cell {
  background: #FFFFFF;
  border: 1px solid rgba(102, 51, 204, 0.12);
  box-shadow: 0 2px 12px -6px rgba(102, 51, 204, 0.15);
}
section.diploma.section-light .acc-cell:hover {
  background: #FFFFFF;
  border-color: rgba(102, 51, 204, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(102, 51, 204, 0.3);
}
section.diploma.section-light .acc-cell img {
  filter: none !important;
  opacity: 0.9;
}
section.diploma.section-light .acc-cell:hover img {
  filter: none !important;
  opacity: 1;
  transform: scale(1.05);
}
section.diploma.section-light .acc-cell img.acc-amba {
  filter: none !important;
  color: #160C30;
  opacity: 0.85;
}

/* ── Accréditations du bas : même style propre que le trust-strip du haut
   (logos couleur pleine, sur UNE seule ligne, sans boîtes) ── */
section.diploma.section-light .accreditations-grid {
  flex-wrap: nowrap;
  gap: clamp(10px, 2vw, 36px);
  row-gap: 0;
}
section.diploma.section-light .acc-cell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.diploma.section-light .acc-cell:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none;
}
section.diploma.section-light .acc-cell img {
  width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  filter: none !important;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
section.diploma.section-light .acc-cell:hover img {
  filter: none !important;
  opacity: 1;
  transform: scale(1.06);
}
section.diploma.section-light .acc-cell img.acc-amba {
  max-height: 40px;
  opacity: 0.92;
}
@media (max-width: 600px) {
  section.diploma.section-light .accreditations-grid { gap: 6px; }
  section.diploma.section-light .acc-cell img { max-height: 22px; }
  section.diploma.section-light .acc-cell img.acc-amba { max-height: 22px; }
}

section.diploma.section-light .rbc-logo-wrap {
  background: rgba(102, 51, 204, 0.04);
  border-color: rgba(102, 51, 204, 0.12);
}
section.diploma.section-light .diploma-logo {
  background: #FFFFFF;
  border-color: rgba(102, 51, 204, 0.12);
}
section.diploma.section-light .diploma-logo img {
  filter: none !important;
}

/* ============================================================
   ╔════════════════════════════════════════════════════════╗
   ║  v11 — BANDE RECONNAISSANCE (logos couleur) + NAVBAR   ║
   ╚════════════════════════════════════════════════════════╝
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   BANDE TRUST BLANCHE — logos en couleur pleine
   ────────────────────────────────────────────────────────── */
.trust-strip {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(102, 51, 204, 0.08);
  padding: 32px var(--gutter);
  position: relative;
  z-index: 2;
}
.trust-strip-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.trust-strip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8478A0;
  position: relative;
  padding-left: 16px;
}
.trust-strip-label::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--saffron);
}
.trust-strip-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
}
.trust-strip-logos img {
  height: 38px;
  width: auto;
  filter: none;                 /* COULEUR PLEINE */
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.trust-strip-logos img:hover {
  opacity: 1;
  transform: scale(1.06);
}
.trust-strip-amba {
  color: #160C30;               /* AMBA SVG en violet-noir sur blanc */
  height: 48px !important;
}
@media (max-width: 600px) {
  .trust-strip-logos { gap: 24px; }
  .trust-strip-logos img { height: 28px; }
  .trust-strip-amba { height: 36px !important; }
}

/* ──────────────────────────────────────────────────────────
   NAVBAR AU SCROLL — fond BLANC + logos couleur
   ────────────────────────────────────────────────────────── */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(102, 51, 204, 0.1) !important;
  box-shadow: 0 4px 24px -12px rgba(102, 51, 204, 0.25);
}
/* Logo ESTIAM → version violet ESTIAM sur blanc */
/* Logo ÉSTIAM : bascule SVG blanc (haut) <-> PNG violet (scrolled).
   On n'utilise PLUS de filter hue-rotate (instable, virait au rose sur
   mobile/iOS). Le PNG violet officiel garantit la même couleur partout. */
.nav-logo-estiam--color { display: none !important; }
.nav.scrolled .nav-logo-estiam--white { display: none !important; }
.nav.scrolled .nav-logo-estiam--color { display: inline-block !important; filter: none !important; }
/* Logo Paris Education → couleur normale (pas inversé) */
.nav.scrolled .nav-logos img.paris-logo {
  filter: none !important;
}
.nav.scrolled .nav-logos .sep {
  background: rgba(102, 51, 204, 0.2) !important;
}
/* Liens nav → sombres */
.nav.scrolled .nav-links a {
  color: #4A3F66 !important;
}
.nav.scrolled .nav-links a:hover {
  color: var(--purple-600) !important;
}
.nav.scrolled .nav-links a::before {
  color: rgba(102, 51, 204, 0.4) !important;
}
.nav.scrolled .nav-links a:hover::before {
  color: var(--saffron) !important;
}
/* Burger → sombre */
.nav.scrolled .nav-burger span {
  background: #160C30 !important;
}
/* CTA → violet ESTIAM plein */
.nav.scrolled .nav-cta {
  background: var(--purple-600) !important;
  border-color: var(--purple-600) !important;
  color: #FFFFFF !important;
}
.nav.scrolled .nav-cta:hover {
  background: var(--purple-700) !important;
  border-color: var(--purple-700) !important;
}

/* Doyenne photo : le SVG placeholder remplit bien le cadre */
.doyenne-photo {
  background: #160C30;
}

/* Custom Background Graphic Overlays */
.section-bg-image-neural {
  position: absolute;
  inset: 0;
  background-image: url("images/ai-neural-bg.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.section-bg-image-data {
  position: absolute;
  inset: 0;
  background-image: url("images/ai-data-bg.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* ── Visibilité renforcée des graphiques IA selon le fond ──
   Le texte reste lisible : il est en z-index 1, le motif en z-index 0. */

/* Programme (fond violet vif) : blend mode pour faire ressortir
   le réseau neuronal sur le violet ÉSTIAM */
.programme .section-bg-image-neural {
  opacity: 1;
  mix-blend-mode: overlay;
  filter: brightness(1.5) saturate(1.35) contrast(1.3);
}

/* Timeline (fond sombre) : on éclaircit nettement le flux de données */
.timeline .section-bg-image-data {
  opacity: 1;
  filter: brightness(2.1) saturate(1.35) contrast(1.1);
}

/* Ensure contents stay on top of the overlays */
.programme.section-estiam > *,
.timeline > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   CONVERSION CLAIR — sections basculées en .section-light
   (esprit brochure : cartes sombres flottant sur fond clair)
   On assombrit uniquement le texte qui était posé directement
   sur l'ancien fond sombre ; les cartes sombres restent telles.
   ============================================================ */

/* — Study Tour — */
section.studytour.section-light .feat h4 { color: #160C30; }
section.studytour.section-light .feat p { color: #4A3F66; }
section.studytour.section-light .feat { border-top-color: rgba(102, 51, 204, 0.18); }

/* — Admission : liste de gauche + bandeau paiement — */
section.admission.section-light .admission-row-value { color: #4A3F66; }
section.admission.section-light .admission-row-value strong { color: #160C30; }
section.admission.section-light .admission-row-value em { color: var(--purple-600); }
section.admission.section-light .admission-row { border-bottom-color: rgba(102, 51, 204, 0.12); }
section.admission.section-light .admission-row:first-child { border-top-color: rgba(102, 51, 204, 0.12); }
section.admission.section-light .payment-strip-text h4 { color: #160C30; }
section.admission.section-light .payment-strip-text p { color: #4A3F66; }

/* — Timeline : motif data atténué sur fond clair — */
section.timeline.section-light .section-bg-image-data {
  opacity: 0.4;
  filter: saturate(0.9);
}

/* ============================================================
   ALTERNANCE DES TONS CLAIRS (esprit brochure : bandes)
   Pour éviter que plusieurs sections claires consécutives se
   fondent en un seul bloc, on alterne lavande froid / blanc pur
   / ivoire chaud. La dominante reste claire.
   ============================================================ */

/* Blanc pur premium */
section.section-light.tone-white {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 100%);
}
/* Ivoire chaud (rappel papier brochure) */
section.section-light.tone-ivory {
  background: linear-gradient(180deg, #FBF8F3 0%, #F6F1E9 100%);
}
section.section-light.tone-ivory::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(102, 51, 204, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 85, 12, 0.05) 0%, transparent 50%);
}

/* ============================================================
   OMBRES « FLOTTANTES » — cartes claires sur fond clair
   Donne la profondeur premium de la brochure (cartes qui
   flottent au repos, pas seulement au survol).
   ============================================================ */
section.section-light .vp-card {
  box-shadow: 0 10px 30px -14px rgba(45, 31, 84, 0.16), 0 2px 6px -2px rgba(45, 31, 84, 0.06);
}
section.section-light .vp-card:hover {
  box-shadow:
    0 28px 56px -18px rgba(102, 51, 204, 0.24),
    0 0 0 1px var(--purple-300);
}
/* Cartes contexte (déjà claires) : même profondeur */
section.context-africain.section-light .context-item {
  box-shadow: 0 10px 30px -14px rgba(45, 31, 84, 0.14), 0 2px 6px -2px rgba(45, 31, 84, 0.05);
}

/* ============================================================
   #1 — PROGRAMME : profondeur & lisibilité du motif IA
   Fond violet approfondi (le réseau neuronal ressort) +
   cartes modules opaques qui flottent vraiment.
   ============================================================ */
section.programme.section-estiam {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(122, 71, 209, 0.35) 0%, transparent 60%),
    linear-gradient(165deg, #6633CC 0%, #5429A8 55%, #421F85 100%);
}
/* le réseau neuronal reste discret sur le violet vif (parti pris assumé) */
section.programme.section-estiam .section-bg-image-neural {
  opacity: 1;
  mix-blend-mode: overlay;
  filter: brightness(1.5) saturate(1.35) contrast(1.3);
}
/* cartes modules : opaques et sombres pour flotter sur le violet vif */
section.programme.section-estiam .module {
  background: linear-gradient(165deg, #2A1656 0%, #1E0F44 100%);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 24px 50px -22px rgba(8, 4, 22, 0.55);
}
section.programme.section-estiam .module-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(167, 139, 250, 0.18);
}
section.programme.section-estiam .module:hover {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 32px 64px -20px rgba(20, 8, 50, 0.6);
}

/* ============================================================
   #4 — TRANSITIONS DOUCES entre sections claires/sombres
   Léger fondu sur les bords des sections sombres pour adoucir
   les passages (fini magazine). Subtil, n'affecte pas le contenu.
   ============================================================ */
section.doyenne.section-violet,
section.testimonials.section-violet,
section.cta-final {
  position: relative;
}
/* fondu haut (vers la section claire au-dessus) */
section.doyenne.section-violet::after,
section.testimonials.section-violet::after,
section.cta-final::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(248, 245, 252, 0.10) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* le contenu reste au-dessus du fondu */
section.doyenne.section-violet > *,
section.testimonials.section-violet > *,
section.cta-final > * { position: relative; z-index: 1; }

/* fondu doux en bas des sections claires précédant une sombre.
   IMPORTANT : ces sections ont déjà un ::after (texture papier),
   donc on combine texture + fondu dans la même règle pour ne
   pas écraser le grain. */
section.value-prop.section-light::after,
section.studytour.section-light::after,
section.campus.section-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-image:
    linear-gradient(0deg, rgba(31, 22, 56, 0.06) 0px, transparent 80px),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='paper3'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23paper3)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 280px 280px;
}

/* ============================================================
   CORRECTION — Villes Study Tour : lisibilité au survol
   Les pills sont sombres au repos ; au survol on garde un fond
   sombre lisible (violet profond) au lieu d'un lavande pâle.
   ============================================================ */
section.studytour .city:hover {
  background: linear-gradient(135deg, #6633CC 0%, #4A23A0 100%);
  border-color: var(--saffron);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(102, 51, 204, 0.5);
}
section.studytour .city:hover::before {
  box-shadow: 0 0 10px var(--saffron);
}

/* ============================================================
   BOUTON WHATSAPP — couleur d'origine (ghost), juste l'icône
   ============================================================ */
.btn-wa-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-wa-ghost svg { flex-shrink: 0; }

/* ============================================================
   FONDS RÉSEAU NEURONAL — pages candidater & merci
   (même esprit que le hero d'index)
   ============================================================ */

/* Page candidature : fond enrichi + canvas derrière le formulaire */
.form-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(60, 35, 120, 0.5) 0%, transparent 65%),
    linear-gradient(180deg, #1B1038 0%, #130A2A 100%);
}
.form-page-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;          /* discret : le formulaire reste prioritaire */
}
.form-page .form-wrap { position: relative; z-index: 1; }

/* Page merci : fond enrichi + canvas plein écran (mini-hero) */
.thanks {
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, rgba(60, 35, 120, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #1B1038 0%, #130A2A 100%);
}
.thanks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .form-page-canvas, .thanks-canvas { display: none; }
}

/* ============================================================
   SURLIGNEMENT « tracé main » — trait orange sous un mot-clé
   (style brochure : souligné dessiné, couleur orange ÉSTIAM)
   ============================================================ */
.hl-underline {
  position: relative;
  white-space: nowrap;
  font-weight: 600;
  color: #FFFFFF;
}
.hl-underline::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  bottom: -6px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 40 2, 80 5 T 160 5 Q 180 6, 198 4' fill='none' stroke='%23FF550C' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ============================================================
   DOYENNE — credentials sous l'image + citation mise en avant
   ============================================================ */
.doyenne-creds {
  list-style: none;
  margin: 18px 4px 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(167, 139, 250, 0.18);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.doyenne-creds li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(251, 250, 255, 0.82);
}
.doyenne-creds li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 8px var(--saffron-glow);
}
/* Citation mise en avant (premier paragraphe) */
.doyenne-quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  font-style: italic;
  color: #FFFFFF;
  padding-left: 22px;
  border-left: 3px solid var(--saffron);
}
.doyenne-quote strong { color: #FFFFFF; font-weight: 600; font-style: normal; }

/* LinkedIn doyenne */
.doyenne-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 4px 0;
  padding: 9px 16px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 8px;
  color: rgba(251, 250, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  width: fit-content;
}
.doyenne-linkedin svg { color: #0A66C2; transition: color 0.25s ease; }
.doyenne-linkedin:hover {
  background: rgba(102, 51, 204, 0.15);
  border-color: var(--purple-400);
  transform: translateY(-1px);
}

/* (capitalisation des tags gérée directement dans le texte HTML) */

/* ============================================================
   ÉCOSYSTÈME DOCTORAL (section value-prop) — cartes numérotées
   ============================================================ */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.eco-card {
  position: relative;
  background: linear-gradient(165deg, #211247 0%, #18093a 100%);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 18px 40px -22px rgba(20, 8, 50, 0.5);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.eco-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 30px 60px -24px rgba(102, 51, 204, 0.4);
}
.eco-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--saffron);
  line-height: 1;
  margin-bottom: 16px;
}
.eco-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #FFFFFF;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.eco-card > p {
  color: rgba(251, 250, 255, 0.78);
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.eco-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eco-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(251, 250, 255, 0.88);
}
.eco-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--saffron);
  box-shadow: 0 0 8px var(--saffron-glow);
}
/* Carte 04 mise en avant */
.eco-card-feature {
  background: linear-gradient(165deg, #6633CC 0%, #4A23A0 60%, #3A1B82 100%);
  border-color: rgba(255, 85, 12, 0.4);
}
/* .eco-badge old absolute positioning removed — now handled in eco-rows section below */
.eco-card-feature .eco-num { color: #FFD9C7; }
.eco-card-feature .eco-list li::before { background: #FFFFFF; box-shadow: 0 0 8px rgba(255,255,255,0.5); }

/* Stats */
.eco-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
  padding: 32px;
  background: rgba(102, 51, 204, 0.05);
  border: 1px solid rgba(102, 51, 204, 0.12);
  border-radius: 16px;
}
.eco-stat { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.eco-stat-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--purple-600);
  line-height: 1;
}
.eco-stat-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E8A;
}
/* CTA bas de section */
.eco-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
  padding: 32px 40px;
  background: linear-gradient(135deg, rgba(102, 51, 204, 0.08) 0%, rgba(255, 85, 12, 0.06) 100%);
  border: 1px solid rgba(102, 51, 204, 0.15);
  border-radius: 16px;
}
.eco-cta p { font-size: 1.1rem; color: #14101F; margin: 0; }
.eco-cta p strong { color: var(--purple-600); }

@media (max-width: 900px) {
  .eco-grid { grid-template-columns: 1fr; }
  .eco-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .eco-cta { flex-direction: column; align-items: flex-start; padding: 28px; }
}

/* ============================================================
   PROCESSUS INTÉGRÉ DANS ADMISSION
   ============================================================ */
.process-block {
  margin-top: 56px;
}
.process-block-head { margin-bottom: 28px; }
.process-block-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: #160C30;
  letter-spacing: -0.01em;
}

/* ============================================================
   SECTION INVESTISSEMENT — 4 zones tarifaires
   ============================================================ */
.invest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.invest-card {
  position: relative;
  background: linear-gradient(170deg, #FFFFFF 0%, #FBF9FF 100%);
  border: 1px solid rgba(102, 51, 204, 0.14);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px -18px rgba(45, 31, 84, 0.18);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.invest-card:hover {
  transform: translateY(-6px);
  border-color: var(--purple-400);
  box-shadow: 0 28px 56px -22px rgba(102, 51, 204, 0.28);
}
.invest-zone {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  margin-bottom: 14px;
  line-height: 1.4;
  min-height: 28px;
}
.invest-region {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #160C30;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.invest-price { display: flex; align-items: baseline; gap: 4px; }
.invest-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--purple-600);
  line-height: 1;
}
.invest-cur {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--purple-600);
}
.invest-per {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6B5E8A;
  margin: 6px 0 22px;
}
.invest-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(102, 51, 204, 0.1);
}
.invest-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #4A3F66;
}
.invest-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF550C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* Carte campus principal mise en avant */
.invest-card-feature {
  background: linear-gradient(170deg, #211247 0%, #18093a 100%);
  border-color: rgba(255, 85, 12, 0.45);
  box-shadow: 0 24px 50px -22px rgba(20, 8, 50, 0.5);
}
.invest-card-feature .invest-region { color: #FFFFFF; }
.invest-card-feature .invest-amount,
.invest-card-feature .invest-cur { color: #C4A5FF; }
.invest-card-feature .invest-zone { color: #FFB48C; }
.invest-card-feature .invest-per { color: rgba(251,250,255,0.6); }
.invest-card-feature .invest-list { border-top-color: rgba(167,139,250,0.25); }
.invest-card-feature .invest-list li { color: rgba(251,250,255,0.9); }
.invest-badge {
  position: absolute;
  top: -11px; left: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--saffron);
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px -4px rgba(255,85,12,0.5);
}
/* Notes explicatives */
.invest-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding: 32px;
  background: rgba(102, 51, 204, 0.04);
  border: 1px solid rgba(102, 51, 204, 0.1);
  border-radius: 16px;
}
.invest-note h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #160C30;
  margin-bottom: 8px;
}
.invest-note p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4A3F66;
}
.invest-cta {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.invest-cta .btn { min-width: 200px; }

@media (max-width: 1100px) {
  .invest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .invest-notes { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .invest-grid { grid-template-columns: 1fr; }
  .invest-cta .btn { width: 100%; }
}

/* Bouton WhatsApp ghost sur section claire : couleur WhatsApp verte */
section.section-light .btn-wa-ghost {
  color: #128C7E;
  border-color: rgba(37, 211, 102, 0.45);
  background: transparent;
}
section.section-light .btn-wa-ghost svg {
  color: #25D366;
}
section.section-light .btn-wa-ghost:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.06);
  color: #075E54;
}

/* ============================================================
   ÉCOSYSTÈME — REDESIGN en rangées horizontales (≠ cartes)
   Grand numéro à gauche, contenu à droite, tags en ligne.
   ============================================================ */
.eco-rows {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.eco-row {
  position: relative;
  padding: 36px 30px 32px;
  background: linear-gradient(170deg, #FFFFFF 0%, #FBF9FF 100%);
  border: 1px solid rgba(102, 51, 204, 0.12);
  border-radius: 18px;
  box-shadow: 0 10px 30px -14px rgba(45, 31, 84, 0.14), 0 2px 6px -2px rgba(45, 31, 84, 0.05);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.eco-row:hover {
  transform: translateY(-6px);
  border-color: var(--purple-400);
  box-shadow: 0 28px 56px -22px rgba(102, 51, 204, 0.24), 0 0 0 1px rgba(102, 51, 204, 0.08);
}
/* Watermark number behind each card */
.eco-row-num {
  position: absolute;
  top: -10px;
  right: -5px;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(102, 51, 204, 0.05);
  pointer-events: none;
  z-index: 0;
  transition: color 0.4s ease;
}
.eco-row:hover .eco-row-num {
  color: rgba(102, 51, 204, 0.09);
}
/* Icon container */
.eco-row-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(102, 51, 204, 0.08) 0%, rgba(102, 51, 204, 0.04) 100%);
  border: 1px solid rgba(102, 51, 204, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
.eco-row-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--purple-600);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eco-row:hover .eco-row-icon {
  background: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-500) 100%);
  border-color: var(--purple-500);
  box-shadow: 0 6px 16px -6px rgba(102, 51, 204, 0.4);
}
.eco-row:hover .eco-row-icon svg {
  stroke: #FFFFFF;
}
.eco-row-body { position: relative; z-index: 1; }
.eco-row-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eco-row-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #160C30;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.eco-row-head h3 { margin-bottom: 0; }
.eco-row-body p {
  color: #4A3F66;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.eco-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--purple-600);
  background: rgba(102, 51, 204, 0.06);
  border: 1px solid rgba(102, 51, 204, 0.12);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
}
.eco-row:hover .eco-tags span {
  background: rgba(102, 51, 204, 0.1);
  border-color: rgba(102, 51, 204, 0.2);
}
/* Item 04 mis en avant (ouvrage collectif) */
.eco-row-feature {
  background: linear-gradient(170deg, #211247 0%, #18093a 100%);
  border-color: rgba(255, 85, 12, 0.35);
  box-shadow: 0 20px 44px -22px rgba(20, 8, 50, 0.5);
}
.eco-row-feature .eco-row-num {
  color: rgba(255, 85, 12, 0.1);
}
.eco-row-feature:hover .eco-row-num {
  color: rgba(255, 85, 12, 0.18);
}
.eco-row-feature .eco-row-icon {
  background: linear-gradient(135deg, rgba(255, 85, 12, 0.15) 0%, rgba(255, 85, 12, 0.08) 100%);
  border-color: rgba(255, 85, 12, 0.25);
}
.eco-row-feature .eco-row-icon svg {
  stroke: var(--saffron);
}
.eco-row-feature:hover .eco-row-icon {
  background: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  border-color: var(--saffron);
  box-shadow: 0 6px 16px -6px rgba(255, 85, 12, 0.5);
}
.eco-row-feature:hover .eco-row-icon svg { stroke: #FFFFFF; }
.eco-row-feature .eco-row-body h3 { color: #FFFFFF; }
.eco-row-feature .eco-row-body p { color: rgba(251, 250, 255, 0.78); }
.eco-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--saffron);
  padding: 5px 12px;
  border-radius: 20px;
}
.eco-row-feature .eco-tags span {
  background: rgba(255, 85, 12, 0.1);
  border-color: rgba(255, 85, 12, 0.22);
  color: #FFB48C;
}
.eco-row-feature:hover {
  border-color: rgba(255, 85, 12, 0.5);
  box-shadow: 0 32px 64px -20px rgba(20, 8, 50, 0.6);
  transform: translateY(-6px);
}

@media (max-width: 900px) {
  .eco-rows { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .eco-row-num { font-size: 5rem; }
  .eco-row { padding: 28px 22px 24px; }
}

/* ============================================================
   ADMISSION — Symmetrical Premium Open Editorial Layout
   ============================================================ */
.admission-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 56px;
  margin-top: 56px;
  align-items: stretch;
}
.admission-col-conditions,
.admission-col-process {
  display: flex;
  flex-direction: column;
}
.admission-col-head {
  margin-bottom: 28px;
}
.admission-col-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--saffron-deep);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.admission-col-head h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #160C30;
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.25;
}

/* Beautiful central editorial divider */
.admission-divider {
  width: 1px;
  background: linear-gradient(180deg, 
              rgba(102, 51, 204, 0) 0%, 
              rgba(102, 51, 204, 0.15) 20%, 
              rgba(102, 51, 204, 0.15) 80%, 
              rgba(102, 51, 204, 0) 100%);
  align-self: stretch;
  position: relative;
}
.admission-divider::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--saffron);
  box-shadow: 0 0 8px var(--saffron-glow);
}

/* Conditions column — robust horizontal list directly on the background */
.admission-rows {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.admission-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(102, 51, 204, 0.08);
  align-items: start;
}
.admission-row:first-child {
  padding-top: 8px;
}
.admission-row:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}
.admission-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(102, 51, 204, 0.04);
  border: 1px solid rgba(102, 51, 204, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 4px;
}
.admission-row-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--purple-600);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admission-row:hover .admission-row-icon {
  background: var(--purple-600);
  border-color: var(--purple-500);
  box-shadow: 0 4px 12px -4px rgba(102, 51, 204, 0.4);
}
.admission-row:hover .admission-row-icon svg {
  stroke: #FFFFFF;
}
.admission-row-content {
  display: flex;
  flex-direction: column;
}
.admission-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--saffron-deep);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 5px;
}
.admission-row-label::before {
  content: "/";
  opacity: 0.4;
  margin-right: 4px;
}
.admission-row-value {
  color: #4A3F66;
  font-size: 0.94rem;
  line-height: 1.55;
}
.admission-row-value strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: #160C30;
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 4px;
}
.admission-row-value em {
  font-style: normal;
  color: var(--purple-600);
  font-weight: 600;
}

/* Process column — timeline alignment directly on background */
.admission-col-process .process-stack {
  background: transparent;
  box-shadow: none;
  padding: 0;
  position: relative;
  height: 100%;
}
/* Connecting timeline line */
.admission-col-process .process-stack::before {
  content: "";
  position: absolute;
  left: 21px; /* centered behind the 42px wide process-num */
  top: 16px;
  bottom: 16px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--purple-300) 0%, rgba(102, 51, 204, 0.08) 100%);
  opacity: 0.25;
  border-radius: 1px;
}
/* Process step enhancements */
.admission-col-process .process-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 24px 0;
  align-items: start;
  border-bottom: 1px solid rgba(102, 51, 204, 0.08);
  position: relative;
}
.admission-col-process .process-step:first-child {
  padding-top: 8px;
}
.admission-col-process .process-step:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}
.admission-col-process .process-num {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(102, 51, 204, 0.15);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--purple-600);
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  grid-row: 1 / 3;
}
.admission-col-process .process-step:hover .process-num {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(255, 85, 12, 0.5);
}
.admission-col-process .process-content {
  display: flex;
  flex-direction: column;
}
.admission-col-process .process-title {
  color: #160C30;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}
.admission-col-process .process-title-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--saffron-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 600;
}
.admission-col-process .process-desc {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #4A3F66;
  margin-top: 4px;
}
/* Status indicator dot */
.process-step-status {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(102, 51, 204, 0.15);
  transition: all 0.3s ease;
}
.admission-col-process .process-step:hover .process-step-status {
  background: #25D366;
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.6);
}

/* ============================================================
   PRICING CARD BUTTONS (.invest-card-btn)
   ============================================================ */
.invest-card-btn {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
/* Standard cards outline button */
.invest-card .invest-card-btn {
  background: transparent;
  color: var(--purple-600);
  border-color: rgba(102, 51, 204, 0.25);
}
.invest-card .invest-card-btn:hover {
  background: var(--purple-600);
  color: #FFFFFF;
  border-color: var(--purple-500);
  box-shadow: 0 8px 20px -8px rgba(102, 51, 204, 0.4);
  transform: translateY(-2px);
}
/* Featured card primary orange/saffron button */
.invest-card-feature .invest-card-btn {
  background: var(--saffron);
  color: #FFFFFF;
  border-color: var(--saffron-deep);
  box-shadow: 0 6px 18px -6px rgba(255, 85, 12, 0.3);
}
.invest-card-feature .invest-card-btn:hover {
  background: var(--saffron-deep);
  border-color: var(--saffron-deep);
  box-shadow: 0 8px 24px -4px rgba(255, 85, 12, 0.5);
  transform: translateY(-3px);
}

@media (max-width: 1024px) {
  .admission-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .admission-divider {
    display: none;
  }
}
@media (max-width: 768px) {
  .admission-row {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 20px 0;
  }
}
@media (max-width: 600px) {
  .admission-col-process .process-stack::before {
    left: 17px;
  }
  .admission-col-process .process-step {
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .admission-col-process .process-num {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
}


/* ============================================================
   ADMISSION v2 — Conditions (grille cartes) + Processus (stepper sombre)
   Classes scopées .adm2-* — premium, charte ÉSTIAM
   ============================================================ */

.adm2-head { margin: 56px 0 26px; }
.adm2-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  display: block;
  margin-bottom: 8px;
}
.adm2-head-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #160C30;
}

/* ─── Grille de conditions ─── */
.adm2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.adm2-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(102, 51, 204, 0.10);
  border-radius: 16px;
  padding: 26px 24px 28px;
  box-shadow: 0 4px 16px -10px rgba(22, 12, 48, 0.18);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
  overflow: hidden;
}
.adm2-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-600), var(--saffron));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.adm2-card:hover {
  transform: translateY(-6px);
  border-color: rgba(102, 51, 204, 0.22);
  box-shadow: 0 26px 48px -22px rgba(102, 51, 204, 0.34);
}
.adm2-card:hover::before { transform: scaleX(1); }

.adm2-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(102, 51, 204, 0.10), rgba(102, 51, 204, 0.04));
  border: 1px solid rgba(102, 51, 204, 0.12);
  margin-bottom: 18px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.adm2-card-icon svg {
  width: 21px; height: 21px;
  fill: none;
  stroke: var(--purple-600);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease;
}
.adm2-card:hover .adm2-card-icon {
  background: linear-gradient(150deg, var(--purple-600), var(--purple-700));
  border-color: var(--purple-500);
  box-shadow: 0 10px 22px -10px rgba(102, 51, 204, 0.55);
  transform: rotate(-4deg);
}
.adm2-card:hover .adm2-card-icon svg { stroke: #FFFFFF; }

.adm2-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 7px;
}
.adm2-card-label::before { content: "/ "; opacity: 0.45; }
.adm2-card-title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.28;
  color: #160C30;
  margin-bottom: 9px;
}
.adm2-card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #4A3F66;
}
.adm2-card-desc em {
  font-style: normal;
  font-weight: 600;
  color: var(--purple-600);
}

/* ─── Bloc Processus sombre ─── */
.adm2-process {
  position: relative;
  margin-top: 30px;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(102, 51, 204, 0.30) 0%, rgba(102, 51, 204, 0) 55%),
    linear-gradient(160deg, #1E1240 0%, #160C30 60%, #0F0822 100%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 70px -40px rgba(10, 5, 24, 0.7);
  overflow: hidden;
}
.adm2-process-glow {
  position: absolute;
  top: -120px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255, 85, 12, 0.18) 0%, rgba(255, 85, 12, 0) 70%);
  pointer-events: none;
}
.adm2-process-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}
.adm2-kicker-light { color: var(--saffron-bright); }
.adm2-process-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-strong);
}
.adm2-process-title em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--purple-300);
}
.adm2-process-meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

/* Stepper horizontal */
.adm2-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.adm2-rail {
  position: absolute;
  top: 23px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(150, 112, 219, 0.10) 0%,
              rgba(150, 112, 219, 0.45) 50%,
              rgba(150, 112, 219, 0.10) 100%);
  z-index: 0;
}
.adm2-step {
  position: relative;
  z-index: 1;
  text-align: left;
}
.adm2-step-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  background: linear-gradient(160deg, #281852, #1E1240);
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.adm2-step-node span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--purple-300);
  transition: color 0.4s ease;
}
.adm2-step:hover .adm2-step-node {
  background: linear-gradient(160deg, var(--saffron), var(--saffron-deep));
  border-color: var(--saffron-bright);
  box-shadow: 0 0 0 5px rgba(255, 85, 12, 0.12),
              0 12px 26px -10px rgba(255, 85, 12, 0.55);
  transform: translateY(-3px);
}
.adm2-step:hover .adm2-step-node span { color: #FFFFFF; }

.adm2-step-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron-bright);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.adm2-step-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
  margin-bottom: 9px;
}
.adm2-step-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Pied de bloc + CTA */
.adm2-process-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.adm2-process-foot-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}
.adm2-process-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-deep));
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 26px -10px rgba(255, 85, 12, 0.5);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.adm2-process-cta svg { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.adm2-process-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -10px rgba(255, 85, 12, 0.6);
}
.adm2-process-cta:hover svg { transform: translateX(4px); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .adm2-grid { grid-template-columns: repeat(2, 1fr); }
  .adm2-timeline { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .adm2-rail { display: none; }
}
@media (max-width: 600px) {
  .adm2-grid { grid-template-columns: 1fr; }
  .adm2-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 8px; }
  .adm2-rail {
    display: block;
    top: 24px; bottom: 24px;
    left: 32px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg,
                rgba(150, 112, 219, 0.40) 0%,
                rgba(150, 112, 219, 0.10) 100%);
  }
  .adm2-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 22px;
    padding: 14px 0;
  }
  .adm2-step-node { grid-row: 1 / span 3; margin-bottom: 0; }
  .adm2-step-tag { margin-top: 4px; }
  .adm2-process-foot { flex-direction: column; align-items: flex-start; }
  .adm2-process-cta { width: 100%; justify-content: center; }
  .adm2-process-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   LOGOS ACCRÉDITATION — Qualiopi + QAHE (ajouts)
   Tailles dédiées (QAHE dense → un peu plus grand) +
   wrap propre des accréditations sur mobile
   ============================================================ */

/* ── Trust strip (hero, fond blanc) ── */
.trust-strip-qualiopi { height: 40px; }
.trust-strip-qahe { height: 54px; }          /* dense : agrandi pour lisibilité */

/* ── Grille « certifications & accréditations » (section diplôme) ── */
section.diploma.section-light .acc-cell img.acc-qahe { max-height: 52px; }
section.diploma.section-light .acc-cell img.acc-qualiopi { max-height: 42px; }

/* ── Optimisation mobile : la grille passe en plusieurs lignes centrées ── */
@media (max-width: 860px) {
  section.diploma.section-light .accreditations-grid {
    flex-wrap: wrap;
    gap: 22px 26px;
    row-gap: 22px;
  }
  section.diploma.section-light .acc-cell {
    flex: 0 0 auto;
    width: auto;
  }
  section.diploma.section-light .acc-cell img { max-height: 34px; }
  section.diploma.section-light .acc-cell img.acc-qahe { max-height: 46px; }
  section.diploma.section-light .acc-cell img.acc-qualiopi { max-height: 36px; }
}
@media (max-width: 600px) {
  section.diploma.section-light .accreditations-grid { gap: 18px 22px; }
  section.diploma.section-light .acc-cell img { max-height: 28px; }
  section.diploma.section-light .acc-cell img.acc-qahe { max-height: 40px; }
  section.diploma.section-light .acc-cell img.acc-qualiopi { max-height: 30px; }
}
@media (max-width: 600px) {
  .trust-strip-qahe { height: 42px; }
  .trust-strip-qualiopi { height: 30px; }
}

/* ============================================================
   MAJ v2 — logos à TAILLE VISUELLE UNIFORME (hauteur identique)
   + animations DIFFÉRENCIÉES par section (anti-répétition)
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   LOGOS : modèle "hauteur uniforme" (haut ET bas identiques).
   Wrap par défaut (jamais de débordement) ; ligne unique
   uniquement sur grand écran via min-width.
   ───────────────────────────────────────────────────────── */

/* ===== Trust strip (haut) ===== */
.trust-strip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px 44px;
  width: 100%;
  max-width: var(--container-max);
}
.trust-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-cell img {
  height: 36px;              /* hauteur de référence commune */
  width: auto;
  max-width: 100%;
  filter: none;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.trust-cell img:hover { opacity: 1; transform: scale(1.06); }
/* ajustements optiques minimes (formats badge plus denses) */
.trust-cell img.trust-strip-qualiopi { height: 34px; }
.trust-cell img.trust-strip-amba { height: 38px; }
.trust-cell img.trust-strip-qahe { height: 44px; }
.trust-cell img.trust-strip-choose { height: 48px; }
@media (min-width: 1080px) {
  .trust-strip-logos { flex-wrap: nowrap; gap: clamp(16px, 2vw, 38px); }
}

/* ===== Grille accréditations (bas) — MÊME modèle ===== */
section.diploma.section-light .accreditations-grid {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
}
section.diploma.section-light .acc-cell {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
section.diploma.section-light .acc-cell img {
  width: auto;
  height: 34px;              /* hauteur de référence commune */
  max-height: none;
  max-width: 100%;
  object-fit: contain;
  filter: none !important;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
section.diploma.section-light .acc-cell:hover img { opacity: 1; transform: scale(1.06); filter: none !important; }
section.diploma.section-light .acc-cell img.acc-qualiopi { height: 32px; }
section.diploma.section-light .acc-cell img.acc-amba { height: 36px; }
section.diploma.section-light .acc-cell img.acc-qahe { height: 42px; }
@media (min-width: 1180px) {
  section.diploma.section-light .accreditations-grid { flex-wrap: nowrap; gap: clamp(14px, 1.7vw, 32px); }
}

/* ===== Mobile : hauteur uniforme réduite ===== */
@media (max-width: 768px) {
  .trust-strip-logos { gap: 26px 34px; }
  .trust-cell img { height: 30px; }
  .trust-cell img.trust-strip-qualiopi { height: 28px; }
  .trust-cell img.trust-strip-amba { height: 32px; }
  .trust-cell img.trust-strip-qahe { height: 40px; }
  .trust-cell img.trust-strip-choose { height: 42px; }
  section.diploma.section-light .accreditations-grid { gap: 26px 32px; }
  section.diploma.section-light .acc-cell img { height: 30px; }
  section.diploma.section-light .acc-cell img.acc-qualiopi { height: 28px; }
  section.diploma.section-light .acc-cell img.acc-amba { height: 32px; }
  section.diploma.section-light .acc-cell img.acc-qahe { height: 40px; }
}
@media (max-width: 480px) {
  .trust-strip-logos { gap: 22px 26px; }
  .trust-cell img { height: 26px; }
  .trust-cell img.trust-strip-qahe { height: 34px; }
  .trust-cell img.trust-strip-choose { height: 36px; }
  section.diploma.section-light .accreditations-grid { gap: 22px 26px; }
  section.diploma.section-light .acc-cell img { height: 26px; }
  section.diploma.section-light .acc-cell img.acc-qahe { height: 34px; }
}

/* ─────────────────────────────────────────────────────────
   INVEST-NOTES : cartes propres, animation PROPRE à cette section
   → accent LATÉRAL vertical (axe différent de l'admission) + fill
     d'icône SANS rotation.
   ───────────────────────────────────────────────────────── */
.invest-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.invest-note {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(102, 51, 204, 0.12);
  border-radius: 16px;
  padding: 26px 26px 28px;
  box-shadow: 0 10px 30px -16px rgba(45, 31, 84, 0.16);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.invest-note:hover {
  transform: translateY(-4px);
  border-color: rgba(102, 51, 204, 0.2);
  box-shadow: 0 24px 48px -22px rgba(102, 51, 204, 0.28);
}
.invest-note-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(102, 51, 204, 0.07);
  border: 1px solid rgba(102, 51, 204, 0.12);
  margin-bottom: 16px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.invest-note-icon svg {
  width: 21px; height: 21px; fill: none;
  stroke: var(--purple-600); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.35s ease;
}
.invest-note:hover .invest-note-icon {       /* fill simple, PAS de rotation */
  background: var(--purple-600);
  box-shadow: 0 8px 18px -8px rgba(102, 51, 204, 0.5);
}
.invest-note:hover .invest-note-icon svg { stroke: #FFFFFF; }
.invest-note h4 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
  color: #160C30; margin-bottom: 8px; line-height: 1.25;
}
.invest-note p { font-size: 0.92rem; line-height: 1.55; color: #4A3F66; }
@media (max-width: 900px) { .invest-notes { grid-template-columns: 1fr; gap: 16px; } }

/* ─────────────────────────────────────────────────────────
   ECOSYSTÈME : on garde son animation D'ORIGINE (lift + fill
   d'icône + chiffre qui s'éclaircit). Pas de barre d'accent,
   pas de rotation d'icône (réservées à l'admission).
   Touche distinctive : le chiffre fantôme glisse légèrement.
   ───────────────────────────────────────────────────────── */
.eco-row-icon {
  background: linear-gradient(135deg, rgba(102,51,204,0.11) 0%, rgba(102,51,204,0.05) 100%);
  border-color: rgba(102,51,204,0.15);
}
.eco-row-num { transition: color 0.4s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.eco-row:hover .eco-row-num { transform: translate(-7px, 5px); }
.eco-stats {
  border: 1px solid rgba(102,51,204,0.14);
  box-shadow: 0 10px 30px -18px rgba(45,31,84,0.18);
}

/* ============================================================
   MAJ v3 — logo choose-esg lisible + Study Tour (itinéraire) +
   Aboutissement (débouchés premium)
   ============================================================ */

/* ── choose-esg : badge portrait → hauteur dédiée plus grande ── */
section.diploma.section-light .acc-cell img.acc-choose { height: 50px; }
@media (max-width: 768px) {
  section.diploma.section-light .acc-cell img.acc-choose { height: 44px; }
}
@media (max-width: 480px) {
  section.diploma.section-light .acc-cell img.acc-choose { height: 38px; }
}

/* ── STUDY TOUR : cartes-destinations (carnet de voyage, non séquentiel) ── */
.st3-dest {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 52px 0 68px;
}
.st3-card {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(102,51,204,0.12);
  box-shadow: 0 10px 30px -18px rgba(45,31,84,0.18);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
/* pin discret en filigrane (évoque une destination, pas une étape) */
.st3-card::after {
  content: "";
  position: absolute;
  right: -14px; top: -14px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,85,12,0.10), rgba(255,85,12,0) 70%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.st3-card:hover {
  transform: translateY(-6px);
  border-color: rgba(102,51,204,0.22);
  box-shadow: 0 26px 50px -22px rgba(102,51,204,0.3);
}
.st3-card:hover::after { transform: scale(1.4); }
.st3-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(255,85,12,0.08);
  margin-bottom: 16px;
}
.st3-card-city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: #160C30;
  margin-bottom: 7px;
  line-height: 1.1;
}
.st3-card-focus {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #6B6385;
}
@media (max-width: 920px) {
  .st3-dest { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .st3-dest { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .st3-card { padding: 20px 18px; }
  .st3-card-city { font-size: 1.25rem; }
}
@media (max-width: 380px) {
  .st3-dest { grid-template-columns: 1fr; }
}

/* features : ajout pastille d'icône (sobre, sombre) */
.feat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(150,112,219,0.10);
  border: 1px solid rgba(150,112,219,0.18);
  margin-bottom: 16px;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.feat-icon svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--purple-300); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.4s ease;
}
.feat:hover .feat-icon {
  background: var(--saffron);
  border-color: var(--saffron-bright);
  box-shadow: 0 10px 22px -10px rgba(255,85,12,0.5);
}
.feat:hover .feat-icon svg { stroke: #fff; }
.feat { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.feat:hover { transform: translateY(-3px); }

/* ── ABOUTISSEMENT : débouchés = liste de valeur (statique, non cliquable) ── */
.career-item {
  overflow: hidden;
  border-left: 2px solid rgba(102,51,204,0.18);
}
.career-title { flex: 1; }
/* pas d'effet "bouton" : la liste informe, elle ne se clique pas */
.career-item:hover {
  border-color: rgba(139,92,246,0.1);
  border-left-color: var(--saffron-deep);
  box-shadow: none;
  transform: none;
}

/* ── Study Tour : adaptation icônes piliers sur fond CLAIR ── */
section.studytour.section-light .feat-icon {
  background: rgba(102,51,204,0.08);
  border-color: rgba(102,51,204,0.16);
}
section.studytour.section-light .feat-icon svg { stroke: var(--purple-600); }
section.studytour.section-light .feat:hover .feat-icon { background: var(--saffron); border-color: var(--saffron-bright); }
section.studytour.section-light .feat:hover .feat-icon svg { stroke: #fff; }

/* ============================================================
   FORMULAIRE — Améliorations UX (progression, upload, submit,
   validation douce)
   ============================================================ */

/* ── Barre de progression (sticky en haut du form) ── */
.form-progress {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.97);
  width: min(560px, calc(100% - 40px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 20px;
  background: linear-gradient(180deg, rgba(31, 19, 64, 0.82) 0%, rgba(22, 12, 48, 0.78) 100%);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 44px -20px rgba(0,0,0,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.form-progress.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.form-progress-track {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: rgba(150, 112, 219, 0.16);
  overflow: hidden;
}
.form-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--purple-500) 0%, var(--purple-400) 55%, var(--saffron) 100%);
  box-shadow: 0 0 12px -2px rgba(122, 71, 209, 0.55);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-progress-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 88px;
  text-align: right;
  transition: color 0.4s ease;
}

/* ── Upload CV personnalisé ── */
.file-input-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.file-dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px dashed rgba(150, 112, 219, 0.4);
  border-radius: 12px;
  background: rgba(150, 112, 219, 0.05);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.file-dropzone:hover {
  border-color: var(--purple-400);
  background: rgba(150, 112, 219, 0.1);
  color: var(--text-strong);
}
.file-dropzone-icon {
  flex-shrink: 0;
  color: var(--purple-400);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.file-dropzone:hover .file-dropzone-icon { transform: translateY(-2px); }
.file-dropzone-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.file-dropzone-hint { color: var(--text-faint); }
.file-dropzone.has-file {
  border-style: solid;
  border-color: rgba(102, 51, 204, 0.5);
  background: rgba(102, 51, 204, 0.1);
  color: var(--text-strong);
}
.file-dropzone.has-file .file-dropzone-icon { color: var(--purple-300); }
.file-dropzone.has-error {
  border-color: var(--saffron);
  background: rgba(255, 85, 12, 0.08);
  color: var(--saffron-bright);
}
.file-dropzone.has-error .file-dropzone-icon { color: var(--saffron); }

/* ── Validation douce : champ valide ── */
.field input.is-valid,
.field select.is-valid,
.field textarea.is-valid {
  border-color: rgba(102, 51, 204, 0.45);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239670DB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
/* le select garde son chevron : pas de checkmark dessus */
.field select.is-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239670DB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center;
}
.field textarea.is-valid {
  background-position: right 14px top 14px;
}

/* ── Bouton submit : état de chargement ── */
.form-submit:disabled { cursor: wait; opacity: 0.85; }
.form-submit.is-loading { pointer-events: none; }
.form-submit-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-error-note {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border-saffron);
  border-radius: 6px;
  background: rgba(255, 85, 12, 0.08);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .form-progress { top: 76px; padding: 9px 16px; gap: 12px; width: calc(100% - 28px); }
  .form-progress-label { min-width: 74px; font-size: 9px; }
}

/* ── Téléphone : indicatif + numéro accolés ── */
.tel-group {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.tel-numero {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/* Le combo indicatif se colle au numéro sans bordure double */
.combo2-tel .combo2-trigger {
  height: 48px;
}
.tel-group:focus-within .combo2-tel .combo2-trigger,
.tel-group:focus-within .tel-numero {
  border-color: var(--purple-500);
}

/* ── Date : input calendrier natif harmonisé ── */
.date-input {
  font-family: var(--font-body);
  color-scheme: dark;            /* calendrier en thème sombre */
}
.date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(3) hue-rotate(230deg);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

@media (max-width: 480px) {
  .tel-indicatif { flex: 0 0 104px; width: 104px !important; min-width: 104px; font-size: 12px; }
}

/* ============================================================
   COMBOBOX (recherche pays / indicatif) — sobre, sans emoji
   ============================================================ */
.combo { position: relative; }
.combo-input {
  width: 100%;
}
.combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  background: #1B1138;
  border: 1px solid rgba(150, 112, 219, 0.3);
  border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.7);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.combo.open .combo-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.combo-option {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.combo-option:hover,
.combo-option.active {
  background: rgba(102, 51, 204, 0.25);
  color: var(--text-strong);
}
.combo-empty {
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
/* scrollbar discrète */
.combo-list::-webkit-scrollbar { width: 8px; }
.combo-list::-webkit-scrollbar-thumb { background: rgba(150,112,219,0.3); border-radius: 8px; }

/* Combobox indicatif (compact, dans le groupe téléphone) */
.combo-tel { flex: 0 0 130px; }
.combo-tel-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: left;
}
.combo-tel .combo-list { min-width: 220px; }
@media (max-width: 480px) {
  .combo-tel { flex: 0 0 110px; }
  .combo-tel-input { font-size: 12px; }
}

/* ============================================================
   COMBOBOX v2 — trigger cliquable + panneau recherche + flags SVG
   (affordance claire, façon Fluent Forms / WPForms)
   ============================================================ */
.combo2 { position: relative; }

/* Le trigger reprend EXACTEMENT le langage visuel de .field input
   (même fond, même bordure, même rayon, même hauteur, même focus) */
.combo2-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s;
}
.combo2-trigger:hover {
  border-color: var(--border-strong);
}
.combo2.open .combo2-trigger {
  border-color: var(--purple-500);
  background: var(--bg-elevated-2);
  box-shadow: 0 0 0 3px var(--purple-soft);
}
.combo2-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo2-value.placeholder { color: var(--text-faint); }
.combo2-chevron {
  flex-shrink: 0;
  color: var(--purple-400);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.combo2.open .combo2-chevron { transform: rotate(180deg); }
.combo2.is-filled .combo2-trigger { border-color: var(--border-strong); }

/* Drapeau */
.combo2-flag { flex-shrink: 0; display: inline-flex; }
.flag-svg {
  width: 24px; height: 18px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  display: block;
  object-fit: cover;
}
.flag-fallback {
  width: 24px; height: 18px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}

/* Panneau déroulant */
.combo2-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 50;
  background: #1B1138;
  border: 1px solid rgba(150, 112, 219, 0.3);
  border-radius: 12px;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,0.75);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.combo2.open .combo2-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Barre de recherche dédiée en haut du panneau */
.combo2-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(150,112,219,0.15);
  color: var(--purple-400);
}
.combo2-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
}
.combo2-search-input::placeholder { color: var(--text-faint); }

.combo2-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.combo2-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.combo2-option:hover,
.combo2-option.active {
  background: rgba(102, 51, 204, 0.25);
  color: var(--text-strong);
}
.combo2-option-label { flex: 1; }
.combo2-dial { color: var(--purple-300); font-family: var(--font-mono); font-size: 0.85rem; }
.combo2-empty {
  padding: 16px; text-align: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
}
.combo2-list::-webkit-scrollbar { width: 8px; }
.combo2-list::-webkit-scrollbar-thumb { background: rgba(150,112,219,0.3); border-radius: 8px; }

/* Variante indicatif (compacte dans le groupe téléphone) */
.combo2-tel { flex: 0 0 128px; }
.combo2-tel .combo2-trigger {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding: 0 10px;
  gap: 7px;
}
.combo2-tel .combo2-value { font-family: var(--font-mono); font-size: 0.9rem; }
.combo2-tel .combo2-panel { min-width: 260px; }

/* Civilité seule sur sa ligne, largeur contenue */
.field-civilite { grid-column: 1 / -1; max-width: 380px; }

@media (max-width: 480px) {
  .combo2-tel { flex: 0 0 108px; }
  .combo2-tel .combo2-value { font-size: 0.82rem; }
  .field-civilite { max-width: none; }
}

/* ── Civilité : choix unique inline (chips), dégradé signature ── */
.choice-group { display: flex; gap: 10px; flex-wrap: wrap; }
.choice-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-soft);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated-2);
  color: var(--text-strong);
}
.choice-chip:has(input:checked) {
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
  border-color: var(--purple-500);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(102, 51, 204, 0.6);
}
.choice-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(122, 71, 209, 0.25);
}