/* ================================================
   INDEX.CSS — Parallax, tilt, shimmer, wave
   ================================================ */

/* ── Propriété CSS custom pour le gradient animé ─ */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Progression de scroll par section (0 = section entrante, 1 = section sortie) */
@property --sect-prog {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* ── Hero: z-index ───────────────────────────── */
.hero > .container {
  position: relative;
  z-index: 1;
}

/* ── Hero 2-colonnes ─────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding-top: 5.5rem;
  padding-bottom: 4rem;
  will-change: transform;
}

/* Override centrage new-design.css */
.hero-left .lead {
  margin: 0 0 1.5rem !important;
  max-width: none !important;
}

.hero-left .hero-stats {
  justify-content: flex-start;
  gap: 2.5rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* ── Shimmer sur le titre h2 ─────────────────── */
/* IMPORTANT : background-clip: text doit être re-déclaré avec le background */
.hero h2 {
  background: linear-gradient(
    100deg,
    #1e1b4b 0%,
    #7c3aed 30%,
    #06b6d4 50%,
    #7c3aed 70%,
    #0e7490 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: h2-shimmer 5s ease-in-out infinite !important;
}

body.dark-mode .hero h2 {
  background: linear-gradient(
    100deg,
    #e0e7ff 0%,
    #c4b5fd 30%,
    #67e8f9 50%,
    #c4b5fd 70%,
    #e0e7ff 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@keyframes h2-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Badge hero : cacher le pulseDot auto ────── */
.hero-left .hero-badge::before {
  display: none !important;
}

.badge-laposte-logo {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Hero domains pills ──────────────────────── */
.hero-domains {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.hero-domain {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 5px 13px;
  transition: var(--transition);
}

.hero-domain:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
  background: rgba(124,58,237,0.07);
}

.hero-domain i {
  color: var(--accent-purple);
  font-size: 0.72rem;
}

/* ── Icônes tech fantômes (couche 0 — fond) ──── */
.hero-float-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: hidden;
}

.hfi {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  opacity: 0.07;
  filter: grayscale(1);
}

body.dark-mode .hfi {
  opacity: 0.10;
  filter: grayscale(1) brightness(1.6);
}

.hfi img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Positions et tailles — 8 icônes éparpillées */
.hfi-1 { width: 76px;  height: 76px;  top: 10%;  left: 5%;   }
.hfi-2 { width: 54px;  height: 54px;  top: 7%;   right: 16%; }
.hfi-3 { width: 66px;  height: 66px;  top: 44%;  left: 2%;   }
.hfi-4 { width: 50px;  height: 50px;  top: 38%;  right: 3%;  }
.hfi-5 { width: 62px;  height: 62px;  top: 70%;  left: 10%;  }
.hfi-6 { width: 56px;  height: 56px;  top: 74%;  right: 8%;  }
.hfi-7 { width: 46px;  height: 46px;  top: 20%;  left: 42%;  }
.hfi-8 { width: 52px;  height: 52px;  top: 58%;  right: 26%; }

/* ── Anneaux parallax lointains (couche 0) ──── */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.hr-2 {
  width: 480px;
  height: 480px;
  border: 1px solid rgba(124,58,237,0.07);
  top: 4%;
  left: -8%;
  /* rotate mis à jour par JS via style.rotate */
}

.hr-3 {
  width: 740px;
  height: 740px;
  border: 1px solid rgba(6,182,212,0.05);
  bottom: -18%;
  right: -12%;
  /* rotate mis à jour par JS via style.rotate */
}

/* Utilise `rotate` (prop. individuelle CSS) → pas de conflit avec transform JS */
@keyframes hr-spin {
  to { rotate: 360deg; }
}

/* ── Anneau géométrique (couche 1) ───────────── */
.hero-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.shape-ring {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.10);
  top: 8%;
  right: 5%;
  opacity: 0.5;
  animation: shape-breathe 8s ease-in-out infinite;
}

/* scale (prop. individuelle) → pas de conflit avec transform JS */
@keyframes shape-breathe {
  0%, 100% { opacity: 0.5; scale: 1;    }
  50%       { opacity: 0.2; scale: 0.96; }
}

/* ── Orbes parallax (4 couches) ──────────────── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 70%);
  top: -20%;
  left: -14%;
  animation: orb-pulse-a 8s ease-in-out infinite;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%);
  top: 5%;
  right: -10%;
  animation: orb-pulse-b 11s ease-in-out 1.5s infinite;
}

.orb-3 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
  bottom: -20%;
  left: 20%;
  animation: orb-pulse-c 13s ease-in-out 3s infinite;
}

.orb-4 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(236,72,153,0.07) 0%, transparent 70%);
  top: 25%;
  left: 48%;
  animation: orb-pulse-d 9s ease-in-out 4.5s infinite;
}

/* scale individuelle → pas de conflit avec transform: translate() JS */
@keyframes orb-pulse-a {
  0%, 100% { scale: 1;    opacity: 1;    }
  50%       { scale: 1.14; opacity: 0.70; }
}
@keyframes orb-pulse-b {
  0%, 100% { scale: 0.96; opacity: 0.85; }
  50%       { scale: 1.10; opacity: 1;    }
}
@keyframes orb-pulse-c {
  0%, 100% { scale: 1.04; opacity: 0.80; }
  45%       { scale: 0.94; opacity: 1;    }
}
@keyframes orb-pulse-d {
  0%, 100% { scale: 1;    opacity: 0.90; }
  60%       { scale: 1.18; opacity: 0.65; }
}

/* ── Wave divider ────────────────────────────── */
.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  line-height: 0;
  pointer-events: none;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 52px;
}

.wave-fill {
  fill: var(--bg-secondary);
}

body.dark-mode .wave-fill {
  fill: var(--bg-secondary);
}

/* Supprimer le border-top du marquee (la wave fait la séparation) */
.tech-marquee-section {
  border-top: none !important;
}

/* ── Carte profil — gradient border animé ────── */
.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-card-wrapper {
  position: relative;
  padding: 54px 68px;
}

/* Bordure gradient tournante */
.profile-card-border {
  position: relative;
  z-index: 2;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    #7c3aed 0%,
    #4f46e5 25%,
    #06b6d4 50%,
    #ec4899 75%,
    #7c3aed 100%
  );
  /* --border-angle mis à jour par JS en fonction du scroll */
}

@keyframes spin-border {
  to { --border-angle: 360deg; }
}

.profile-card {
  position: relative;
  width: 234px;
  background: var(--bg-card);
  border: none !important;
  border-radius: 24px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  animation: float-card 6s ease-in-out infinite, glow-pulse 4s ease-in-out infinite;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% {
    box-shadow:
      var(--shadow-card),
      0 0 30px rgba(124,58,237,0.22),
      0 0 60px rgba(124,58,237,0.08);
  }
}

/* Tilt actif : on suspend float-card */
.profile-card.is-tilting {
  animation: glow-pulse 4s ease-in-out infinite !important;
}

.profile-initials {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(124,58,237,0.45);
  margin-bottom: 0.3rem;
  position: relative;
}

/* Anneau rotatif autour des initiales */
.profile-initials::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(124,58,237,0.65);
  border-bottom-color: rgba(6,182,212,0.55);
  animation: spin-halo 3s linear infinite;
  pointer-events: none;
}

@keyframes spin-halo {
  to { transform: rotate(360deg); }
}

.profile-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.profile-role-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.profile-laposte-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.profile-role {
  font-size: 0.78rem;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.profile-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #10b981;
  font-weight: 500;
  margin-top: 0.2rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-green 2s ease-in-out infinite;
  flex-shrink: 0;
}

.status-dot-sm {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(1.45); }
}

/* ── Icônes flottantes ────────────────────────── */
/*
 * On utilise les propriétés CSS individuelles `translate` et `scale`
 * (CSS Level 5) pour ne pas créer de conflit entre l'animation
 * (qui contrôle `translate`) et le hover (qui contrôle `scale`).
 */
.floating-icon {
  position: absolute;
  width: 46px;
  height: 46px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  z-index: 3;
  animation: float-icon 4s ease-in-out infinite;
  /* scale est une propriété distincte → pas de conflit avec l'animation */
  transition: scale 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.floating-icon:hover {
  scale: 1.18;
  box-shadow: 0 0 20px rgba(124,58,237,0.3), var(--shadow-card);
  border-color: var(--border-strong);
}

.floating-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter 0.25s ease;
}

.floating-icon:hover img {
  filter: drop-shadow(0 0 4px rgba(124,58,237,0.4));
}

/* fi-3/fi-4 : centrage vertical sans transform → pas de conflit */
.fi-1 { top: 8px;              left: 12px;   animation-delay: 0s;    }
.fi-2 { top: 8px;              right: 12px;  animation-delay: 0.6s;  }
.fi-3 { top: calc(50% - 23px); left: 8px;    animation-delay: 1.2s;  }
.fi-4 { top: calc(50% - 23px); right: 8px;   animation-delay: 0.3s;  }
.fi-5 { bottom: 60px;          left: 10px;   animation-delay: 0.9s;  }
.fi-6 { bottom: 60px;          right: 10px;  animation-delay: 1.5s;  }
.fi-7 { bottom: 8px;           left: 76px;   animation-delay: 0.45s; }
.fi-8 { bottom: 8px;           right: 64px;  animation-delay: 1.1s;  }

/* L'animation utilise `translate` (propriété individuelle) */
@keyframes float-icon {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 -7px; }
}

/* ── Indicateur de scroll ─────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s;
}

.scroll-indicator:hover { opacity: 1; }

.scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid var(--border-strong);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5px;
}

.scroll-dot {
  width: 4px;
  height: 7px;
  background: var(--accent-purple);
  border-radius: 2px;
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%   { transform: translateY(0);    opacity: 1; }
  55%  { transform: translateY(10px); opacity: 0; }
  56%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ── Marquee tech ─────────────────────────────── */
.tech-marquee-section {
  padding: 1.2rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary) !important;
}

.marquee-track {
  overflow: hidden;
  width: 100%;
  /* Fondu sur les bords gauche et droite */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
  padding: 0 1.4rem;
}

.marquee-content:hover { animation-play-state: paused; }

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.marquee-item:hover { transform: translateY(-2px); }

.marquee-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.marquee-item:hover img { opacity: 1; }

.marquee-item span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.marquee-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Headers sections ─────────────────────────── */
.profil-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.profil-section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-purple);
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 0.75rem;
}

.profil-section-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

/* ── Bloc intro (texte + job card) ────────────── */
.intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.intro-text p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0;
}

.intro-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.intro-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 7px 13px;
  transition: var(--transition);
}

.intro-pill:hover {
  border-color: var(--accent-purple);
  color: var(--text-primary);
}

.intro-pill i {
  color: var(--accent-purple);
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
}

/* ── Carte La Poste ───────────────────────────── */
.intro-job-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #FFCD00;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.intro-job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,205,0,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.intro-job-card:hover {
  box-shadow: var(--shadow-card), -4px 0 20px rgba(255,205,0,0.15);
}

.job-card-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.job-card-logo img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.job-card-company {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.job-card-location {
  font-size: 0.78rem;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.job-card-title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.5rem !important;
}

.job-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16,185,129,0.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.85rem;
}

.job-card-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.job-card-tasks li {
  font-size: 0.83rem;
  color: var(--text-secondary);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.job-card-tasks li i {
  color: var(--accent-purple);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ── Grille 3 domaines ────────────────────────── */
.profil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.profil-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

/* Couleurs par domaine */
.profil-card--dev  { border-top-color: #7c3aed; }
.profil-card--ops  { border-top-color: #f59e0b; }
.profil-card--net  { border-top-color: #06b6d4; }

.profil-card:hover {
  transform: translateY(-6px);
}

.profil-card--dev:hover  { box-shadow: var(--shadow-card), 0 -4px 20px rgba(124,58,237,0.2); }
.profil-card--ops:hover  { box-shadow: var(--shadow-card), 0 -4px 20px rgba(245,158,11,0.2); }
.profil-card--net:hover  { box-shadow: var(--shadow-card), 0 -4px 20px rgba(6,182,212,0.2); }

.profil-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.profil-card--dev  .profil-card-icon { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.profil-card--ops  .profil-card-icon { background: rgba(245,158,11,0.12); color: #b45309; }
.profil-card--net  .profil-card-icon { background: rgba(6,182,212,0.1);   color: #0891b2; }

.profil-card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.5rem !important;
}

.profil-card-text {
  font-size: 0.87rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
  margin: 0 0 0.5rem !important;
}

.profil-card-tasks {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.profil-card-tasks li {
  font-size: 0.83rem;
  color: var(--text-secondary);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profil-card--dev  .profil-card-tasks li i { color: #7c3aed; }
.profil-card--ops  .profil-card-tasks li i { color: #f59e0b; }
.profil-card--net  .profil-card-tasks li i { color: #06b6d4; }

.profil-card-tasks li i { font-size: 0.7rem; flex-shrink: 0; }

/* Mini icônes en bas */
.profil-card-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.profil-card-icons img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

.profil-card--dev .profil-card-icons img:hover  { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 5px rgba(124,58,237,0.5)); }
.profil-card--ops .profil-card-icons img:hover  { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 5px rgba(245,158,11,0.5)); }
.profil-card--net .profil-card-icons img:hover  { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 5px rgba(6,182,212,0.5)); }

/* ── PDF buttons ──────────────────────────────── */
.pdf {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5rem;
}

/* ── Reveal — translate + opacity ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.70s cubic-bezier(0.16,1,0.3,1),
              transform 0.70s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal wipe (clip-path) — pour titres et tags */
.reveal-wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.80s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-wipe.visible {
  clip-path: inset(0 0 0% 0);
}

/* Reveal depuis la gauche */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.70s cubic-bezier(0.16,1,0.3,1),
              transform 0.70s cubic-bezier(0.16,1,0.3,1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal depuis la droite */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.70s cubic-bezier(0.16,1,0.3,1),
              transform 0.70s cubic-bezier(0.16,1,0.3,1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 5rem;
    gap: 2rem;
  }

  .hero-right { order: -1; }

  .hero-left .lead {
    margin: 0 auto 1.5rem !important;
    max-width: 520px !important;
  }

  .hero-left .hero-stats { justify-content: center; gap: 1.75rem; }
  .hero-ctas             { justify-content: center; }
  .hero-domains          { justify-content: center; }

  .floating-icon         { display: none; }
  .profile-card-wrapper  { padding: 16px; }

  .intro-row   { grid-template-columns: 1fr; }
  .profil-grid { grid-template-columns: 1fr; }
}

@media (min-width: 600px) and (max-width: 991px) {
  .profil-grid { grid-template-columns: 1fr 1fr; }
  .profil-card:last-child { grid-column: span 2; }
}

/* ── Dark mode ────────────────────────────────── */
body.dark-mode .floating-icon {
  background: rgba(22,22,22,0.96) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

body.dark-mode .profile-card {
  background: rgba(18,18,18,0.97) !important;
}

body.dark-mode .profil-card,
body.dark-mode .intro-job-card {
  background: rgba(22,22,22,0.95) !important;
}

/* ══════════════════════════════════════════════
   SECTIONS INTÉRIEURES — positionnement + orbes
   ══════════════════════════════════════════════ */

/* Toutes les sections de l'index ont position: relative pour les orbes absolus */
.idx-section {
  position: relative;
  overflow: hidden;
}

/* Conteneur des orbes de fond */
.sec-orb-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Base des orbes */
.sec-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  pointer-events: none;
}

/* S'assurer que le contenu est au-dessus des orbes et des effets de scan */
.idx-section > .container,
#Profil > .container,
#Domaines > .container {
  position: relative;
  z-index: 2;
}

/* Orbes des sections intérieures — respiration douce (scale individuelle) */
@keyframes orb-breathe-out {
  0%, 100% { scale: 1;    opacity: 1;   }
  50%       { scale: 1.18; opacity: 0.7; }
}
@keyframes orb-breathe-in {
  0%, 100% { scale: 1.10; opacity: 0.8; }
  50%       { scale: 0.88; opacity: 1;  }
}

/* ── Orbes section Projets ────────────────────── */
.proj-orb-a {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(124,58,237,0.13) 0%, transparent 70%);
  top: -10%; left: -8%;
  animation: orb-breathe-out 11s ease-in-out infinite;
}
.proj-orb-b {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,0.09) 0%, transparent 70%);
  bottom: -8%; right: -5%;
  animation: orb-breathe-in 13s ease-in-out 2s infinite;
}

/* ── Orbes section Parcours ──────────────────── */
.parc-orb-a {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 70%);
  top: -5%; right: -12%;
  animation: orb-breathe-out 14s ease-in-out infinite;
}
.parc-orb-b {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 70%);
  bottom: 5%; left: -6%;
  animation: orb-breathe-in 10s ease-in-out 1.5s infinite;
}

/* ── Orbes section Stack ─────────────────────── */
.stack-orb-a {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(6,182,212,0.09) 0%, transparent 70%);
  top: -8%; right: 8%;
  animation: orb-breathe-out 10s ease-in-out infinite;
}
.stack-orb-b {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(236,72,153,0.07) 0%, transparent 70%);
  bottom: -5%; left: 3%;
  animation: orb-breathe-in 13s ease-in-out 2s infinite;
}
.stack-orb-c {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%);
  top: 38%; left: 38%;
  animation: orb-breathe-out 16s ease-in-out 4s infinite;
}

/* ── Orbes section Contact ───────────────────── */
.ctct-orb-a {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(124,58,237,0.11) 0%, transparent 70%);
  top: -12%; left: -8%;
  animation: orb-breathe-out 12s ease-in-out infinite;
}
.ctct-orb-b {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
  bottom: -10%; right: -5%;
  animation: orb-breathe-in 10s ease-in-out 2s infinite;
}

/* ══════════════════════════════════════════════
   PROJETS PHARES
   ══════════════════════════════════════════════ */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 0;
}

.proj-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.proj-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(124,58,237,0.06), transparent);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.proj-card--1 { border-top-color: #7c3aed; }
.proj-card--2 { border-top-color: #06b6d4; }
.proj-card--3 { border-top-color: #f59e0b; }

.proj-card:hover { transform: translateY(-8px); }

.proj-card--1:hover { box-shadow: var(--shadow-card), 0 16px 48px rgba(124,58,237,0.20); }
.proj-card--2:hover { box-shadow: var(--shadow-card), 0 16px 48px rgba(6,182,212,0.16);  }
.proj-card--3:hover { box-shadow: var(--shadow-card), 0 16px 48px rgba(245,158,11,0.16); }

.proj-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.proj-tag {
  font-size: 0.7rem;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(124,58,237,0.09);
  color: var(--accent-purple);
  border: 1px solid rgba(124,58,237,0.15);
  font-weight: 500;
}

.proj-link {
  color: var(--text-muted);
  font-size: 1rem;
  transition: color 0.2s;
  flex-shrink: 0;
  text-decoration: none;
}
.proj-link:hover { color: var(--accent-purple); }

.proj-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.proj-card--1 .proj-card-icon { background: rgba(124,58,237,0.1); color: #7c3aed; }
.proj-card--2 .proj-card-icon { background: rgba(6,182,212,0.1);  color: #0891b2; }
.proj-card--3 .proj-card-icon { background: rgba(245,158,11,0.1); color: #b45309; }

.proj-card-title {
  font-weight: 700;
  font-size: 1rem !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.proj-card-desc {
  font-size: 0.87rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  flex-grow: 1;
}

.proj-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-purple);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.proj-card-cta:hover { gap: 0.75rem; }

.proj-more {
  text-align: center;
  margin-top: 2.5rem;
}

/* ══════════════════════════════════════════════
   PARCOURS — TIMELINE
   ══════════════════════════════════════════════ */

.tl-wrap {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: 44px;
}

/* Ligne verticale dégradée */
.tl-line {
  position: absolute;
  left: 20px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, #7c3aed 0%, #06b6d4 70%, transparent 100%);
  border-radius: 2px;
}

.tl-entry {
  position: relative;
  margin-bottom: 2rem;
}

/* Point sur la ligne */
.tl-dot {
  position: absolute;
  left: -31px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c3aed;
  border: 2.5px solid var(--bg-secondary, #f8f9fa);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
  z-index: 1;
}

.tl-dot--stage {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.2);
}

.tl-dot--edu {
  background: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.2);
}

/* Carte timeline */
.tl-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  transition: transform 0.40s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.tl-card:hover {
  transform: translateX(5px);
  border-color: rgba(124,58,237,0.3);
  box-shadow: var(--shadow-card);
}

.tl-card--edu:hover { border-color: rgba(6,182,212,0.3); }

.tl-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 0.5rem;
}

.tl-card--edu .tl-date { color: #0891b2; }

.tl-company-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.tl-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  flex-shrink: 0;
}

.tl-title {
  font-weight: 700;
  font-size: 0.95rem !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.tl-company {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  margin: 0.1rem 0 0.6rem !important;
}

.tl-desc {
  font-size: 0.86rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
  margin: 0 0 0.75rem !important;
}

.tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(16,185,129,0.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  margin-left: auto;
}

.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tl-tag {
  font-size: 0.7rem;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(124,58,237,0.09);
  color: var(--accent-purple);
  border: 1px solid rgba(124,58,237,0.15);
  font-weight: 500;
}

.tl-tag--amber {
  background: rgba(245,158,11,0.1);
  color: #b45309;
  border-color: rgba(245,158,11,0.2);
}

.tl-tag--cyan {
  background: rgba(6,182,212,0.1);
  color: #0891b2;
  border-color: rgba(6,182,212,0.2);
}

/* ══════════════════════════════════════════════
   STACK TECHNIQUE
   ══════════════════════════════════════════════ */

.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.stack-group {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.stack-group:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease,
              box-shadow 0.40s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.40s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateY(-4px);
}

.stack-group-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.stack-gh--dev   { border-left: 3px solid #7c3aed; }
.stack-gh--front { border-left: 3px solid #06b6d4; }
.stack-gh--ops   { border-left: 3px solid #f59e0b; }
.stack-gh--tools { border-left: 3px solid #ec4899; }

.stack-gh--dev   i { color: #7c3aed; }
.stack-gh--front i { color: #0891b2; }
.stack-gh--ops   i { color: #b45309; }
.stack-gh--tools i { color: #db2777; }

.stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
}

.stack-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 5px 11px;
  transition: var(--transition);
  cursor: default;
}

.stack-item:hover {
  border-color: var(--accent-purple);
  background: rgba(124,58,237,0.08);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 4px 12px rgba(124,58,237,0.14);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.25s ease,
              border-color 0.2s ease,
              background 0.2s ease;
}

.stack-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.stack-item span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════ */

.contact-lead {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 12px 40px rgba(124,58,237,0.13);
}

.contact-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(124,58,237,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #7c3aed;
  margin-bottom: 0.4rem;
  transition: background 0.3s, transform 0.3s;
}

.contact-card-icon--linkedin { background: rgba(10,102,194,0.1); color: #0a66c2; }
.contact-card-icon--github   { background: rgba(36,41,47,0.1);   color: var(--text-primary); }

.contact-card:hover .contact-card-icon { transform: scale(1.1); background: rgba(124,58,237,0.18); }
.contact-card:hover .contact-card-icon--linkedin { background: rgba(10,102,194,0.18); }
.contact-card:hover .contact-card-icon--github   { background: rgba(124,58,237,0.12); }

.contact-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin: 0 !important;
}

.contact-card-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 !important;
}

.contact-cta {
  text-align: center;
}

/* ══════════════════════════════════════════════
   ORBES SUPPLÉMENTAIRES — sections
   ══════════════════════════════════════════════ */

.proj-orb-c {
  width: 290px; height: 290px;
  background: radial-gradient(circle, rgba(236,72,153,0.07) 0%, transparent 70%);
  bottom: -5%; left: 8%;
  animation: orb-breathe-out 9s ease-in-out 1s infinite;
}
.proj-orb-d {
  width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(79,70,229,0.11) 0%, transparent 70%);
  top: 5%; left: 42%;
  animation: orb-breathe-in 15s ease-in-out 3s infinite;
}

.parc-orb-c {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 70%);
  bottom: -3%; left: 28%;
  animation: orb-breathe-out 12s ease-in-out 3s infinite;
}
.parc-orb-d {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(124,58,237,0.09) 0%, transparent 70%);
  top: 8%; left: -5%;
  animation: orb-breathe-out 8s ease-in-out 0.5s infinite;
}

.stack-orb-d {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 70%);
  top: 5%; left: -5%;
  animation: orb-breathe-out 9s ease-in-out 1s infinite;
}
.stack-orb-e {
  width: 270px; height: 270px;
  background: radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 70%);
  bottom: -5%; right: 14%;
  animation: orb-breathe-in 11s ease-in-out 3s infinite;
}

.ctct-orb-c {
  width: 310px; height: 310px;
  background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
  top: 28%; left: 33%;
  animation: orb-breathe-out 8s ease-in-out 1s infinite;
}
.ctct-orb-d {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(79,70,229,0.09) 0%, transparent 70%);
  top: -8%; right: 22%;
  animation: orb-breathe-out 14s ease-in-out 3s infinite;
}

/* ══════════════════════════════════════════════
   FORMES GÉOMÉTRIQUES — sections (sec-shape)
   L'animation utilise `scale` (propriété individuelle)
   → composé avec transform JS (translateY) sans conflit
   ══════════════════════════════════════════════ */

.sec-shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 0;
  animation: ss-breathe 8s ease-in-out infinite;
}

/* 0.88 → 1.1 → 0.92 : grandit en entrant, rétrécit en sortant (s'inverse en remontant) */
@keyframes ss-breathe {
  0%   { scale: 0.88; }
  50%  { scale: 1.10; }
  100% { scale: 0.92; }
}

/* Rotation oscillante pour les croix (rotate individuelle — pas de conflit) */
@keyframes ss-cross-spin {
  0%, 100% { rotate: 0deg;  opacity: 0.45; }
  25%       { rotate: 22deg; opacity: 0.60; }
  50%       { rotate: 45deg; opacity: 0.45; }
  75%       { rotate: 22deg; opacity: 0.30; }
}

/* Pulsation pour les points */
@keyframes ss-dot-pulse {
  0%, 100% { opacity: 0.65; scale: 1;    }
  50%       { opacity: 1.00; scale: 1.5;  }
}

/* ── Anneaux border-only ──────────────────────── */
.ss-ring-lg {
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.09);
  opacity: 0.7;
  animation-duration: 11s;
}
.ss-ring-md {
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.12);
  opacity: 0.65;
  animation-duration: 8s;
  animation-delay: 1.8s;
}
.ss-ring-sm {
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.18);
  opacity: 0.6;
  animation-duration: 6s;
  animation-delay: 3.4s;
}

/* ── Croix ────────────────────────────────────── */
.ss-cross {
  width: 20px; height: 20px;
  opacity: 0.45;
  animation: ss-breathe 8s ease-in-out infinite, ss-cross-spin 6s ease-in-out infinite;
}
.ss-cross::before,
.ss-cross::after {
  content: '';
  position: absolute;
  background: rgba(124,58,237,0.45);
  border-radius: 2px;
}
.ss-cross::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
.ss-cross::after  { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }

/* ── Points ───────────────────────────────────── */
.ss-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(124,58,237,0.4);
  opacity: 0.65;
  animation: ss-dot-pulse 3s ease-in-out infinite;
}

/* ── Variante cyan ────────────────────────────── */
.ss-ring-lg.ss--cyan,
.ss-ring-md.ss--cyan,
.ss-ring-sm.ss--cyan { border-color: rgba(6,182,212,0.14); }
.ss-cross.ss--cyan::before,
.ss-cross.ss--cyan::after { background: rgba(6,182,212,0.45); }
.ss-dot.ss--cyan { background: rgba(6,182,212,0.45); }

/* ── Variante amber ───────────────────────────── */
.ss-ring-md.ss--amber,
.ss-ring-sm.ss--amber { border-color: rgba(245,158,11,0.18); }
.ss-cross.ss--amber::before,
.ss-cross.ss--amber::after { background: rgba(245,158,11,0.45); }
.ss-dot.ss--amber { background: rgba(245,158,11,0.45); }

/* ── Variante pink ────────────────────────────── */
.ss-ring-md.ss--pink,
.ss-ring-sm.ss--pink { border-color: rgba(236,72,153,0.15); }
.ss-dot.ss--pink { background: rgba(236,72,153,0.45); }

/* Avec view(), chaque élément anime sur sa propre position — pas de delay nécessaire */

/* ══════════════════════════════════════════════
   RESPONSIVE — nouvelles sections
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  .proj-grid    { grid-template-columns: 1fr; }
  .stack-grid   { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .tl-wrap      { padding-left: 34px; }
}

@media (min-width: 600px) and (max-width: 991px) {
  .proj-grid    { grid-template-columns: 1fr 1fr; }
  .proj-card:last-child { grid-column: span 2; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-card:last-child { grid-column: span 2; }
  .stack-grid   { grid-template-columns: 1fr 1fr; }
}

/* ── Dark mode — nouvelles sections ─────────── */
body.dark-mode .tl-card,
body.dark-mode .proj-card,
body.dark-mode .stack-group,
body.dark-mode .contact-card {
  background: rgba(22,22,22,0.95) !important;
}

body.dark-mode .tl-dot {
  border-color: var(--bg-secondary) !important;
}

body.dark-mode .contact-card-icon--github {
  color: #e6edf3;
}

/* ══════════════════════════════════════════════
   BACKGROUNDS RICHES — mesh gradients par section
   ══════════════════════════════════════════════ */

/* Les sections non-idx ont besoin d'overflow: hidden pour les ::after */
#Profil, #Domaines { position: relative; overflow: hidden; }

/* --sect-prog et --sect-conic sont mis à jour par JS (index.js) dans la boucle RAF.
   Aucune animation CSS requise — cross-browser garanti. */

/* ── Mesh dégradé animé : Qui suis-je ──────────
   Blobs dérivent vers l'intérieur au scroll.
   Formule : calc(BASE - DRIFT/2 + var(--sect-prog) * DRIFT)
   → à 0.5, on retrouve exactement la position d'origine.
   ──────────────────────────────────────────────*/
#Profil {
  background:
    /* Conic rotatif : tourne de -90°→+90° au fil du scroll */
    conic-gradient(
      from var(--sect-conic, -90deg) at 25% 40%,
      transparent 0%, rgba(124,58,237,0.035) 20%,
      transparent 40%, rgba(6,182,212,0.025) 62%,
      transparent 80%
    ),
    radial-gradient(ellipse 95% 65%
      at calc(-13% + var(--sect-prog) * 16%) 50%,
      rgba(124,58,237,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 75% 80%
      at calc(116% - var(--sect-prog) * 16%)
         calc(8%   + var(--sect-prog) * 14%),
      rgba(6,182,212,0.05) 0%, transparent 55%),
    var(--bg-primary);
}

/* ── Mesh dégradé animé : Domaines ────────────── */
#Domaines {
  background:
    conic-gradient(
      from var(--sect-conic, -90deg) at 75% 55%,
      transparent 0%, rgba(79,70,229,0.03) 18%,
      transparent 38%, rgba(6,182,212,0.025) 60%,
      transparent 80%
    ),
    radial-gradient(ellipse 80% 55%
      at 50% calc(127% - var(--sect-prog) * 24%),
      rgba(79,70,229,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 65%
      at calc(1%   + var(--sect-prog) * 14%)
         calc(-2%  + var(--sect-prog) * 14%),
      rgba(124,58,237,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60%
      at calc(102% - var(--sect-prog) * 14%)
         calc(-2%  + var(--sect-prog) * 14%),
      rgba(6,182,212,0.04) 0%, transparent 50%),
    var(--bg-secondary);
}

/* ── Mesh dégradé animé : Projets ─────────────── */
#Projets {
  background:
    conic-gradient(
      from var(--sect-conic, -120deg) at 20% 70%,
      transparent 0%, rgba(124,58,237,0.045) 15%,
      transparent 32%, rgba(6,182,212,0.03)  55%,
      transparent 72%
    ),
    radial-gradient(ellipse 100% 70%
      at calc(-13%  + var(--sect-prog) * 16%)
         calc(-3%   + var(--sect-prog) * 16%),
      rgba(124,58,237,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 90% 80%
      at calc(116%  - var(--sect-prog) * 16%)
         calc(103%  - var(--sect-prog) * 16%),
      rgba(6,182,212,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 65% 65%
      at calc(51%   + var(--sect-prog) * 8%)
         calc(41%   + var(--sect-prog) * 8%),
      rgba(79,70,229,0.04) 0%, transparent 60%),
    var(--bg-primary);
}

/* ── Mesh dégradé animé : Parcours ────────────── */
#Parcours {
  background:
    conic-gradient(
      from var(--sect-conic, -90deg) at 78% 28%,
      transparent 0%, rgba(245,158,11,0.03) 20%,
      transparent 40%, rgba(124,58,237,0.03) 62%,
      transparent 82%
    ),
    radial-gradient(ellipse 80% 70%
      at calc(-13%  + var(--sect-prog) * 16%)
         calc(18%   + var(--sect-prog) * 14%),
      rgba(124,58,237,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60%
      at calc(116%  - var(--sect-prog) * 16%)
         calc(87%   - var(--sect-prog) * 14%),
      rgba(245,158,11,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 55% 80%
      at 50% calc(123% - var(--sect-prog) * 16%),
      rgba(79,70,229,0.05) 0%, transparent 60%),
    var(--bg-secondary);
}

/* ── Mesh dégradé animé : Stack ───────────────── */
#Stack {
  background:
    conic-gradient(
      from var(--sect-conic, -120deg) at 50% 78%,
      transparent 0%, rgba(6,182,212,0.04) 15%,
      transparent 35%, rgba(79,70,229,0.03) 55%,
      transparent 75%
    ),
    radial-gradient(ellipse 90% 65%
      at calc(116%  - var(--sect-prog) * 16%)
         calc(3%    + var(--sect-prog) * 14%),
      rgba(6,182,212,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 80% 75%
      at calc(-16%  + var(--sect-prog) * 16%)
         calc(97%   - var(--sect-prog) * 14%),
      rgba(79,70,229,0.07) 0%, transparent 55%),
    var(--bg-primary);
}

/* ── Mesh dégradé animé : Contact ─────────────── */
#Contact {
  background:
    /* Conic plein tour (la plus dramatique) : le halo tourne à 360° */
    conic-gradient(
      from var(--sect-conic, 0deg) at 50% 50%,
      rgba(124,58,237,0.05) 0%,   transparent 22%,
      rgba(6,182,212,0.04)  45%,  transparent 67%,
      rgba(79,70,229,0.04)  90%,  transparent 100%
    ),
    radial-gradient(ellipse 100% 80%
      at calc(-18%  + var(--sect-prog) * 16%) 50%,
      rgba(124,58,237,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80%
      at calc(118%  - var(--sect-prog) * 16%) 50%,
      rgba(6,182,212,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70%  80%
      at 50% calc(-13%  + var(--sect-prog) * 16%),
      rgba(79,70,229,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60%  50%
      at 50% calc(118%  - var(--sect-prog) * 16%),
      rgba(124,58,237,0.06) 0%, transparent 55%),
    var(--bg-secondary);
}

body.dark-mode #Projets {
  background:
    conic-gradient(
      from calc(var(--sect-prog, 0) * 240deg - 120deg) at 20% 70%,
      transparent 0%, rgba(124,58,237,0.07) 15%,
      transparent 32%, rgba(6,182,212,0.05) 55%,
      transparent 72%
    ),
    radial-gradient(ellipse 100% 70%
      at calc(-13%  + var(--sect-prog) * 16%)
         calc(-3%   + var(--sect-prog) * 16%),
      rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 90% 80%
      at calc(116%  - var(--sect-prog) * 16%)
         calc(103%  - var(--sect-prog) * 16%),
      rgba(6,182,212,0.12) 0%, transparent 55%),
    var(--bg-primary);
}

body.dark-mode #Contact {
  background:
    conic-gradient(
      from var(--sect-conic, 0deg) at 50% 50%,
      rgba(124,58,237,0.08) 0%,  transparent 22%,
      rgba(6,182,212,0.06)  45%, transparent 67%,
      rgba(79,70,229,0.07)  90%, transparent 100%
    ),
    radial-gradient(ellipse 100% 80%
      at calc(-18%  + var(--sect-prog) * 16%) 50%,
      rgba(124,58,237,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80%
      at calc(118%  - var(--sect-prog) * 16%) 50%,
      rgba(6,182,212,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 70%  80%
      at 50% calc(-13%  + var(--sect-prog) * 16%),
      rgba(79,70,229,0.14) 0%, transparent 60%),
    var(--bg-secondary);
}

/* ══════════════════════════════════════════════
   GRILLE ANIMÉE — section Stack
   ══════════════════════════════════════════════ */

/* Rotation légère de la grille — rotate individuelle → compose avec translate JS */
@keyframes grid-tilt {
  0%, 100% { rotate: 0deg;    }
  50%       { rotate: 0.8deg; }
}

.stack-grid-bg {
  position: absolute;
  inset: -44px;
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  /* --sect-grid mis à jour par JS (valeur px) */
  translate: var(--sect-grid, 0px) var(--sect-grid, 0px);
  animation: grid-tilt 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

body.dark-mode .stack-grid-bg {
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px);
}

/* ══════════════════════════════════════════════
   AURORA ROTATIF — section Contact
   ══════════════════════════════════════════════ */

.ctct-aurora {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  top: 50%; left: 50%;
  /* translate (prop. individuelle) → composé avec rotate JS */
  translate: -50% -50%;
  background: conic-gradient(
    rgba(124,58,237,0.09) 0deg,
    rgba(6,182,212,0.07)  120deg,
    rgba(236,72,153,0.06) 240deg,
    rgba(124,58,237,0.09) 360deg
  );
  filter: blur(72px);
  /* --sect-aurora mis à jour par JS (angle en degrés) */
  rotate: var(--sect-aurora, 0deg);
  pointer-events: none;
  z-index: 0;
}

body.dark-mode .ctct-aurora {
  background: conic-gradient(
    rgba(124,58,237,0.16) 0deg,
    rgba(6,182,212,0.12)  120deg,
    rgba(236,72,153,0.10) 240deg,
    rgba(124,58,237,0.16) 360deg
  );
}

/* Second aurora décalé de 180° — --sect-aurora-b mis à jour par JS */
.ctct-aurora.aurora-b {
  rotate: var(--sect-aurora-b, 180deg);
  background: conic-gradient(
    rgba(79,70,229,0.07)  0deg,
    rgba(124,58,237,0.08) 120deg,
    rgba(6,182,212,0.06)  240deg,
    rgba(79,70,229,0.07)  360deg
  );
}

body.dark-mode .ctct-aurora.aurora-b {
  background: conic-gradient(
    rgba(79,70,229,0.12)  0deg,
    rgba(124,58,237,0.14) 120deg,
    rgba(6,182,212,0.10)  240deg,
    rgba(79,70,229,0.12)  360deg
  );
}

/* ══════════════════════════════════════════════
   SPOTLIGHT SOURIS — suivi interactif
   Chaque section émet un halo sous le curseur.
   ══════════════════════════════════════════════ */

.idx-section {
  --spot-x: 50%;
  --spot-y: -20%;
}

/* Halo radial centré sur --spot-x/y (mis à jour en JS) */
.idx-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px circle at var(--spot-x) var(--spot-y),
    rgba(124,58,237,0.07) 0%,
    transparent 65%
  );
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.idx-section:hover::before { opacity: 1; }

body.dark-mode .idx-section::before {
  background: radial-gradient(
    700px circle at var(--spot-x) var(--spot-y),
    rgba(124,58,237,0.13) 0%,
    transparent 65%
  );
}

/* ══════════════════════════════════════════════
   LIGNE SÉPARATRICE ANIMÉE (haut de section)
   ══════════════════════════════════════════════ */

.idx-section::after,
#Profil::after,
#Domaines::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124,58,237,0.35) 30%,
    rgba(6,182,212,0.25) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: border-shimmer 5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes border-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0%   0; }
  100% { background-position: 100% 0; }
}

/* ══════════════════════════════════════════════
   EFFETS SUR LES ÉLÉMENTS CLÉS
   ══════════════════════════════════════════════ */

/* Tag de section : glow pulsé */
.profil-section-tag {
  animation: tag-glow 3.5s ease-in-out infinite;
}

@keyframes tag-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(124,58,237,0.10),
                inset 0 0 6px rgba(124,58,237,0.05);
  }
  50% {
    box-shadow: 0 0 24px rgba(124,58,237,0.24),
                inset 0 0 12px rgba(124,58,237,0.10);
  }
}

/* Titre de section : lueur subtile */
.profil-section-title {
  animation: title-glow 5s ease-in-out infinite;
}

@keyframes title-glow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 50px rgba(124,58,237,0.09); }
}

/* ── Hover dramatique sur cartes projets ─────── */
/* Radial gradient depuis le haut au hover */
.proj-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.proj-card--1::after { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124,58,237,0.10) 0%, transparent 70%); }
.proj-card--2::after { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(6,182,212,0.08)  0%, transparent 70%); }
.proj-card--3::after { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245,158,11,0.07) 0%, transparent 70%); }

.proj-card:hover::after { opacity: 1; }

/* S'assurer que le texte reste au-dessus du ::after */
.proj-card > *:not(.proj-card::after) { position: relative; z-index: 1; }
.proj-card-header, .proj-card-icon, .proj-card-title,
.proj-card-desc,   .proj-card-cta { position: relative; z-index: 1; }

/* ── Ligne timeline avec glow ────────────────── */
.tl-line {
  box-shadow: 0 0 10px rgba(124,58,237,0.22), 0 0 22px rgba(6,182,212,0.10);
}

/* ── Stack group hover plus net ──────────────── */
.stack-group:hover {
  box-shadow: 0 0 0 1px rgba(124,58,237,0.22), var(--shadow-card);
}

/* ── Contact card : icon tilt au hover ───────── */
.contact-card:hover .contact-card-icon {
  transform: scale(1.12) rotate(-8deg);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              background 0.3s ease;
}

/* .sect-depth-bar supprimée (remplacée par .sect-conic-orb) */

/* ══════════════════════════════════════════════
   ORBES BRUMEUX ROTATIFS — 3 variantes
   Chaque section paire reçoit une forme distincte.
   Piloté par --sect-conic (JS, mis à jour chaque frame).
   ══════════════════════════════════════════════ */

/* Base commune */
.sect-conic-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: rotate;
  rotate: var(--sect-conic, 0deg);
}

/* ── Variante A (Profil) — disque galactique horizontal ──
 * Deux blobs aux pôles opposés → la rotation est lisible
 * comme une galaxie aplatie qui tourne lentement. */
.sect-conic-orb.orb-var-a {
  width: 145%; height: 42%;
  left: 50%; top: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse 68% 100% at 26% 35%,
      rgba(124,58,237,0.09) 0%, transparent 68%),
    radial-gradient(ellipse 52% 85% at 78% 68%,
      rgba(6,182,212,0.07) 0%, transparent 62%);
  filter: blur(62px);
}
body.dark-mode .sect-conic-orb.orb-var-a {
  background:
    radial-gradient(ellipse 68% 100% at 26% 35%,
      rgba(124,58,237,0.16) 0%, transparent 68%),
    radial-gradient(ellipse 52% 85% at 78% 68%,
      rgba(6,182,212,0.12) 0%, transparent 62%);
}

/* ── Variante B (Projets) — colonne nébuleuse verticale ──
 * Ellipse en portrait, décentrée vers la droite.
 * Blob cyan en tête, traîne indigo en bas. */
.sect-conic-orb.orb-var-b {
  width: 52%; height: 140%;
  left: 72%; top: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse 80% 38% at 50% 20%,
      rgba(6,182,212,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 60% 32% at 38% 75%,
      rgba(79,70,229,0.07) 0%, transparent 58%);
  filter: blur(52px);
}
body.dark-mode .sect-conic-orb.orb-var-b {
  background:
    radial-gradient(ellipse 80% 38% at 50% 20%,
      rgba(6,182,212,0.15) 0%, transparent 65%),
    radial-gradient(ellipse 60% 32% at 38% 75%,
      rgba(79,70,229,0.12) 0%, transparent 58%);
}

/* ── Variante C (Stack) — constellation triangulaire ──
 * Trois petits foyers de lumière positionnés en triangle.
 * La rotation trace une orbite circulaire discernable. */
.sect-conic-orb.orb-var-c {
  width: 95%; height: 85%;
  left: 50%; top: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse 38% 42% at 32% 28%,
      rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 32% 38% at 70% 55%,
      rgba(79,70,229,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 28% 32% at 48% 80%,
      rgba(6,182,212,0.07) 0%, transparent 52%);
  filter: blur(46px);
}
body.dark-mode .sect-conic-orb.orb-var-c {
  background:
    radial-gradient(ellipse 38% 42% at 32% 28%,
      rgba(124,58,237,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 32% 38% at 70% 55%,
      rgba(79,70,229,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 28% 32% at 48% 80%,
      rgba(6,182,212,0.12) 0%, transparent 52%);
}

/* .sect-scan supprimée */

/* ══════════════════════════════════════════════
   BARRE DE PROGRESSION SCROLL
   ══════════════════════════════════════════════ */

#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 50%, #ec4899 100%);
  z-index: 10000;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  transition: width 0.05s linear;
  will-change: width;
}

/* ══════════════════════════════════════════════
   HALO CURSEUR GLOBAL
   ══════════════════════════════════════════════ */

#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,58,237,0.055) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

body.dark-mode #cursor-glow {
  background: radial-gradient(circle,
    rgba(124,58,237,0.10) 0%,
    transparent 70%
  );
}

/* ══════════════════════════════════════════════
   TIMELINE — pulsation des points
   ══════════════════════════════════════════════ */

@keyframes tl-dot-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124,58,237,0.20); }
  50%       { box-shadow: 0 0 0 6px rgba(124,58,237,0.08), 0 0 14px rgba(124,58,237,0.30); }
}
@keyframes tl-dot-glow-amber {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,0.20); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0.08), 0 0 14px rgba(245,158,11,0.30); }
}
@keyframes tl-dot-glow-cyan {
  0%, 100% { box-shadow: 0 0 0 3px rgba(6,182,212,0.20); }
  50%       { box-shadow: 0 0 0 6px rgba(6,182,212,0.08), 0 0 14px rgba(6,182,212,0.30); }
}

.tl-dot           { animation: tl-dot-glow       2.8s ease-in-out infinite; }
.tl-dot--stage    { animation: tl-dot-glow-amber  2.8s ease-in-out 0.6s infinite; }
.tl-dot--edu      { animation: tl-dot-glow-cyan   2.8s ease-in-out 1.2s infinite; }

/* ══════════════════════════════════════════════
   SECT-CONIC-ORB — respiration opacity
   Composé avec rotate JS → pas de conflit
   ══════════════════════════════════════════════ */

@keyframes conic-breathe {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.5; }
}

.sect-conic-orb.orb-var-a { animation: conic-breathe  9s ease-in-out infinite; }
.sect-conic-orb.orb-var-b { animation: conic-breathe 12s ease-in-out 2s infinite; }
.sect-conic-orb.orb-var-c { animation: conic-breathe  7s ease-in-out 4s infinite; }

/* ══════════════════════════════════════════════
   CARTE LA POSTE — pulse du border gauche
   ══════════════════════════════════════════════ */

@keyframes job-border-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: -5px 0 18px rgba(255,205,0,0.18); }
}

.intro-job-card { animation: job-border-pulse 4s ease-in-out infinite; }

/* ══════════════════════════════════════════════
   PARCOURS — refonte complète
   ══════════════════════════════════════════════ */

/* Sous-titre section */
.parc-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0.5rem auto 0;
  text-align: center;
  line-height: 1.75;
}

/* ── Chiffres clés ───────────────────────────── */
.parc-kpi {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0 3.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.parc-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.parc-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0 3rem;
}

.parc-kpi-num {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #7c3aed 30%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kpi-glow 4s ease-in-out infinite;
}

@keyframes kpi-glow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(124,58,237,0)); }
  50%       { filter: drop-shadow(0 0 8px rgba(124,58,237,0.40)); }
}

.parc-kpi-label {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.parc-kpi-sep {
  width: 1px;
  height: 46px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* ── Nouveaux éléments des cartes timeline ───── */

.tl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

/* Badges de type */
.tl-type {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 10px;
  border-radius: 20px;
}
.tl-type--cdi {
  background: rgba(124,58,237,0.10);
  color: #7c3aed;
  border: 1px solid rgba(124,58,237,0.22);
}
.tl-type--stage {
  background: rgba(245,158,11,0.10);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.22);
}
.tl-type--edu {
  background: rgba(6,182,212,0.10);
  color: #0891b2;
  border: 1px solid rgba(6,182,212,0.22);
}

/* Durée */
.tl-duration {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tl-duration i { font-size: 0.62rem; }

/* Border gauche colorée par type */
.tl-card--cdi   { border-left: 3px solid rgba(124,58,237,0.50); }
.tl-card--stage { border-left: 3px solid rgba(245,158,11,0.55); }

/* Listes de réalisations */
.tl-achievements {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tl-achievements li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tl-achievements li i {
  color: #10b981;
  font-size: 0.68rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* Logo placeholder pour stages/éducation */
.tl-logo-placeholder,
.tl-logo-edu {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.tl-logo-placeholder {
  background: rgba(245,158,11,0.10);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.2);
}
.tl-logo-edu {
  background: rgba(6,182,212,0.10);
  color: #0891b2;
  border: 1px solid rgba(6,182,212,0.2);
}

/* Shimmer descendant sur la ligne de timeline */
.tl-line::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  height: 80px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  border-radius: 2px;
  pointer-events: none;
  animation: tl-shine 3.5s ease-in-out infinite;
}

@keyframes tl-shine {
  0%   { top: -80px; }
  100% { top: calc(100% + 80px); }
}

/* ── Layout alternée desktop ─────────────────── */
@media (min-width: 992px) {
  .tl-wrap {
    padding-left: 0;
    max-width: 960px;
  }

  .tl-line {
    left: 50%;
    transform: translateX(-1px);
  }

  /* Uniquement sur les entrées avec classe gauche/droite explicite */
  .tl-entry.tl-left,
  .tl-entry.tl-right {
    width: 50%;
    margin-bottom: 2.5rem;
  }

  .tl-entry.tl-left  { padding-right: 3.5rem; padding-left: 0; }
  .tl-entry.tl-right { margin-left: 50%; padding-left: 3.5rem; padding-right: 0; }

  .tl-entry.tl-left  .tl-dot { left: auto; right: -7px; top: 28px; }
  .tl-entry.tl-right .tl-dot { left: -7px; right: auto; top: 28px; }

  .tl-entry.tl-right .tl-card:hover { transform: translateX(-5px); }
}

/* ── Valeurs & posture ───────────────────────── */
.parc-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-subtle);
}

.parc-value-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.parc-value-item:hover {
  border-color: rgba(124,58,237,0.30);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 8px 24px rgba(124,58,237,0.08);
}

.parc-value-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(124,58,237,0.10);
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.parc-value-item:hover .parc-value-icon { transform: scale(1.1) rotate(-6deg); }

.parc-value-icon--cyan  { background: rgba(6,182,212,0.10);  color: #0891b2; }
.parc-value-icon--amber { background: rgba(245,158,11,0.10); color: #b45309; }
.parc-value-icon--green { background: rgba(16,185,129,0.10); color: #10b981; }

.parc-value-text h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.parc-value-text p {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Dark mode */
body.dark-mode .parc-kpi,
body.dark-mode .parc-value-item {
  background: rgba(22,22,22,0.95) !important;
}

/* Responsive Parcours */
@media (max-width: 991px) {
  .parc-kpi       { flex-wrap: wrap; gap: 1.25rem; }
  .parc-kpi-sep   { display: none; }
  .parc-kpi-item  { padding: 0.5rem 1.5rem; }
  .parc-values    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .parc-values    { grid-template-columns: 1fr; }
  .parc-kpi-item  { padding: 0.4rem 1rem; }
}


/* ══════════════════════════════════════════════
   THÈME CLAIR — amplification des animations
   et profondeur visuelle
   body:not(.dark-mode) : ne touche pas dark mode
   ══════════════════════════════════════════════ */

/* ── Fond du hero — plus de couleur ── */
body:not(.dark-mode) .hero {
  background: linear-gradient(135deg, #f2f3fb 0%, #ede9fe 45%, #dbeafe 100%) !important;
}

/* ── Section alternée — fond plus distinct ── */
body:not(.dark-mode) .section-lb {
  background: #e9ebf6 !important;
}

/* ── Orbes hero — plus visibles ── */
body:not(.dark-mode) .orb-1 {
  background: radial-gradient(circle, rgba(124,58,237,0.28) 0%, transparent 70%);
}
body:not(.dark-mode) .orb-2 {
  background: radial-gradient(circle, rgba(79,70,229,0.22) 0%, transparent 70%);
}
body:not(.dark-mode) .orb-3 {
  background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, transparent 70%);
}
body:not(.dark-mode) .orb-4 {
  background: radial-gradient(circle, rgba(236,72,153,0.16) 0%, transparent 70%);
}

/* ── Orbes section Projets ── */
body:not(.dark-mode) .proj-orb-a {
  background: radial-gradient(circle, rgba(124,58,237,0.24) 0%, transparent 70%);
}
body:not(.dark-mode) .proj-orb-b {
  background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, transparent 70%);
}

/* ── Orbes section Parcours ── */
body:not(.dark-mode) .parc-orb-a {
  background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, transparent 70%);
}
body:not(.dark-mode) .parc-orb-b {
  background: radial-gradient(circle, rgba(124,58,237,0.22) 0%, transparent 70%);
}
body:not(.dark-mode) .parc-orb-c {
  background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, transparent 70%);
}
body:not(.dark-mode) .parc-orb-d {
  background: radial-gradient(circle, rgba(236,72,153,0.14) 0%, transparent 70%);
}

/* ── Orbes section Stack ── */
body:not(.dark-mode) .stack-orb-a {
  background: radial-gradient(circle, rgba(6,182,212,0.20) 0%, transparent 70%);
}
body:not(.dark-mode) .stack-orb-b {
  background: radial-gradient(circle, rgba(236,72,153,0.16) 0%, transparent 70%);
}
body:not(.dark-mode) .stack-orb-c {
  background: radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 70%);
}
body:not(.dark-mode) .stack-orb-d {
  background: radial-gradient(circle, rgba(124,58,237,0.20) 0%, transparent 70%);
}
body:not(.dark-mode) .stack-orb-e {
  background: radial-gradient(circle, rgba(245,158,11,0.14) 0%, transparent 70%);
}

/* ── Orbes section Contact ── */
body:not(.dark-mode) .ctct-orb-a {
  background: radial-gradient(circle, rgba(124,58,237,0.22) 0%, transparent 70%);
}
body:not(.dark-mode) .ctct-orb-b {
  background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, transparent 70%);
}

/* ── Formes géométriques — anneaux ── */
body:not(.dark-mode) .ss-ring-lg {
  border-color: rgba(124,58,237,0.22);
  opacity: 0.85;
}
body:not(.dark-mode) .ss-ring-md {
  border-color: rgba(124,58,237,0.28);
  opacity: 0.80;
}
body:not(.dark-mode) .ss-ring-sm {
  border-color: rgba(124,58,237,0.38);
  opacity: 0.75;
}

/* Variantes couleur — anneaux */
body:not(.dark-mode) .ss-ring-lg.ss--cyan,
body:not(.dark-mode) .ss-ring-md.ss--cyan,
body:not(.dark-mode) .ss-ring-sm.ss--cyan  { border-color: rgba(6,182,212,0.30); }

body:not(.dark-mode) .ss-ring-md.ss--amber,
body:not(.dark-mode) .ss-ring-sm.ss--amber { border-color: rgba(245,158,11,0.35); }

body:not(.dark-mode) .ss-ring-md.ss--pink,
body:not(.dark-mode) .ss-ring-sm.ss--pink  { border-color: rgba(236,72,153,0.28); }

/* ── Formes géométriques — croix ── */
body:not(.dark-mode) .ss-cross {
  opacity: 0.70;
}
body:not(.dark-mode) .ss-cross::before,
body:not(.dark-mode) .ss-cross::after {
  background: rgba(124,58,237,0.65);
}
body:not(.dark-mode) .ss-cross.ss--cyan::before,
body:not(.dark-mode) .ss-cross.ss--cyan::after  { background: rgba(6,182,212,0.65); }
body:not(.dark-mode) .ss-cross.ss--amber::before,
body:not(.dark-mode) .ss-cross.ss--amber::after { background: rgba(245,158,11,0.65); }

/* ── Formes géométriques — points ── */
body:not(.dark-mode) .ss-dot {
  background: rgba(124,58,237,0.60);
  opacity: 0.85;
}
body:not(.dark-mode) .ss-dot.ss--cyan  { background: rgba(6,182,212,0.60); }
body:not(.dark-mode) .ss-dot.ss--amber { background: rgba(245,158,11,0.60); }
body:not(.dark-mode) .ss-dot.ss--pink  { background: rgba(236,72,153,0.55); }

/* ── Spotlight section au hover — amplifié ── */
body:not(.dark-mode) .idx-section::before {
  background: radial-gradient(
    700px circle at var(--spot-x) var(--spot-y),
    rgba(124,58,237,0.10) 0%,
    transparent 65%
  );
}

/* ── Section tag glow — plus visible ── */
body:not(.dark-mode) .profil-section-tag {
  box-shadow: 0 0 14px rgba(124,58,237,0.18),
              inset 0 0 8px rgba(124,58,237,0.08) !important;
}

/* ── Ligne de séparation section — plus nette ── */
body:not(.dark-mode) .idx-section::after,
body:not(.dark-mode) #Profil::after,
body:not(.dark-mode) #Domaines::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124,58,237,0.50) 30%,
    rgba(6,182,212,0.38) 70%,
    transparent 100%
  );
}

/* ── Scrollbar — plus colorée ── */
body:not(.dark-mode) ::-webkit-scrollbar-track {
  background: #e6e8f5;
}